From 00d90bfafc5f166cb31f40427f547467963a48bc Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 16 May 2024 07:47:43 +0000 Subject: [PATCH] feat: modify API --- global.d.ts | 151 +- helper/attributes.json | 683 ++++++-- helper/tags.json | 140 +- helper/web-types.json | 1491 +++++++++++++++-- src/affix/affix.en-US.md | 6 +- src/affix/affix.md | 6 +- src/affix/props.ts | 6 +- src/affix/type.ts | 4 +- src/auto-complete/auto-complete.en-US.md | 6 +- src/auto-complete/auto-complete.md | 4 +- src/auto-complete/props.ts | 2 +- src/auto-complete/type.ts | 2 +- src/avatar/avatar.en-US.md | 12 +- src/avatar/avatar.md | 12 +- src/avatar/props.ts | 6 + src/avatar/type.ts | 12 + src/back-top/back-top.en-US.md | 1 - src/back-top/back-top.md | 1 - src/back-top/props.ts | 2 +- src/breadcrumb-item/breadcrumb-item.en-US.md | 18 + src/breadcrumb-item/breadcrumb-item.md | 18 + src/breadcrumb/breadcrumb-item-props.ts | 2 + src/breadcrumb/breadcrumb.en-US.md | 16 +- src/breadcrumb/breadcrumb.md | 19 +- src/breadcrumb/type.ts | 6 +- src/calendar/calendar.en-US.md | 7 +- src/calendar/calendar.md | 7 +- src/card/card.en-US.md | 1 + src/card/card.md | 3 +- src/card/props.ts | 2 +- src/card/type.ts | 2 +- src/cascader/cascader.en-US.md | 1 + src/cascader/cascader.md | 2 + src/cascader/props.ts | 6 +- src/cascader/type.ts | 13 +- src/checkbox/checkbox-group-props.ts | 4 +- src/checkbox/checkbox.md | 4 +- src/checkbox/props.ts | 7 +- src/checkbox/type.ts | 4 +- src/collapse/collapse-panel-props.ts | 2 +- src/collapse/collapse.en-US.md | 7 +- src/collapse/collapse.md | 7 +- src/collapse/props.ts | 3 +- src/collapse/type.ts | 6 +- src/color-picker/color-picker.en-US.md | 14 +- src/color-picker/color-picker.md | 12 +- src/color-picker/props.ts | 4 +- src/color-picker/type.ts | 13 +- src/common.ts | 5 +- src/config-provider/config-provider.en-US.md | 40 +- src/config-provider/config-provider.md | 101 +- src/config-provider/type.ts | 12 +- src/date-picker/date-picker.en-US.md | 33 +- src/date-picker/date-picker.md | 17 +- .../date-range-picker-panel-props.ts | 2 +- src/date-picker/date-range-picker-props.ts | 18 +- src/date-picker/props.ts | 10 + src/date-picker/type.ts | 26 +- .../date-range-picker.en-US.md | 52 + src/date-range-picker/date-range-picker.md | 52 + src/descriptions/description-item-props.ts | 8 + src/descriptions/descriptions.en-US.md | 7 +- src/descriptions/descriptions.md | 7 +- src/descriptions/props.ts | 10 +- src/descriptions/type.ts | 12 +- src/dialog/dialog-card-props.ts | 8 + src/dialog/dialog.en-US.md | 97 +- src/dialog/dialog.md | 43 +- src/dialog/props.ts | 7 +- src/dialog/type.ts | 7 +- src/drawer/drawer.en-US.md | 20 +- src/drawer/drawer.md | 20 +- src/drawer/props.ts | 12 +- src/drawer/type.ts | 16 +- src/dropdown/dropdown.en-US.md | 10 +- src/dropdown/dropdown.md | 16 +- src/dropdown/props.ts | 15 +- src/empty/empty.en-US.md | 13 + src/empty/empty.md | 13 + src/empty/props.ts | 40 + src/empty/type.ts | 36 + src/form/form.en-US.md | 3 + src/form/form.md | 13 +- src/form/props.ts | 2 + src/form/type.ts | 4 + src/grid/grid.en-US.md | 1 + src/grid/grid.md | 1 + src/guide/guide-step-props.ts | 80 + src/guide/guide.en-US.md | 6 +- src/guide/guide.md | 2 +- src/guide/type.ts | 3 +- src/image-viewer/image-viewer.en-US.md | 2 + src/image-viewer/image-viewer.md | 4 +- src/image-viewer/props.ts | 17 +- src/image-viewer/type.ts | 32 +- src/image/image.en-US.md | 1 + src/image/image.md | 3 +- src/image/props.ts | 31 +- src/image/type.ts | 31 +- src/infinity-scroll/type.ts | 33 + src/input-number/input-number.en-US.md | 4 +- src/input-number/input-number.md | 4 +- src/input-number/type.ts | 2 +- src/input/__tests__/vitest-input.test.jsx | 12 +- src/input/input.md | 2 +- src/link/link.en-US.md | 7 +- src/link/link.md | 1 - src/link/props.ts | 4 - src/link/type.ts | 4 - src/list/list-item-meta-props.ts | 1 - src/list/list-item-props.ts | 3 - src/list/list.en-US.md | 13 +- src/list/list.md | 34 +- src/list/props.ts | 11 +- src/list/type.ts | 15 +- src/loading/loading.en-US.md | 3 +- src/loading/loading.md | 8 +- src/loading/props.ts | 3 +- src/loading/type.ts | 9 +- src/menu/head-menu-props.ts | 20 +- src/menu/menu-item-props.ts | 8 +- src/menu/menu.en-US.md | 12 +- src/menu/menu.md | 14 +- src/menu/props.ts | 24 +- src/menu/type.ts | 41 +- src/message/message.md | 41 - src/notification/notification.md | 14 - src/pagination/pagination.md | 1 + src/popup/popup.en-US.md | 16 +- src/popup/popup.md | 26 +- src/popup/props.ts | 9 +- src/popup/type.ts | 7 +- src/radio/props.ts | 4 +- src/radio/radio-group-props.ts | 2 +- src/radio/radio.en-US.md | 15 +- src/radio/radio.md | 19 +- src/radio/type.ts | 19 +- src/range-input/props.ts | 4 +- src/range-input/range-input-popup-props.ts | 9 +- src/range-input/range-input.en-US.md | 11 +- src/range-input/range-input.md | 9 +- src/range-input/type.ts | 13 +- src/rate/props.ts | 2 +- src/rate/rate.en-US.md | 1 + src/rate/rate.md | 5 +- src/rate/type.ts | 1 - src/select-input/props.ts | 15 +- src/select-input/select-input.en-US.md | 1 + src/select-input/select-input.md | 1 + src/select-input/type.ts | 13 +- src/select/option-props.ts | 2 +- src/select/props.ts | 7 +- src/select/select.en-US.md | 11 +- src/select/select.md | 13 +- src/select/type.ts | 33 +- src/slider/props.ts | 4 + src/slider/slider.en-US.md | 8 +- src/slider/slider.md | 6 +- src/slider/type.ts | 7 + src/space/__tests__/vitest-space.test.jsx | 8 +- src/statistic/statistic.en-US.md | 12 +- src/statistic/statistic.md | 6 + src/statistic/type.ts | 8 + src/switch/props.ts | 6 +- src/switch/switch.en-US.md | 11 +- src/switch/switch.md | 11 +- src/switch/type.ts | 16 +- src/table/table.en-US.md | 1 - src/table/table.md | 1 - src/tabs/props.ts | 12 +- src/tabs/tab-panel-props.ts | 11 +- src/tabs/tabs.en-US.md | 1 + src/tabs/tabs.md | 2 +- src/tabs/type.ts | 30 +- src/tag-input/props.ts | 8 +- src/tag-input/tag-input.en-US.md | 3 +- src/tag-input/tag-input.md | 3 +- src/tag-input/type.ts | 11 +- src/tag/check-tag-group-props.ts | 2 +- src/tag/check-tag-props.ts | 5 +- src/tag/props.ts | 5 +- src/tag/tag.en-US.md | 9 +- src/tag/tag.md | 19 +- src/tag/type.ts | 3 +- src/textarea/props.ts | 12 +- src/textarea/textarea.en-US.md | 5 +- src/textarea/textarea.md | 7 +- src/textarea/type.ts | 16 +- src/time-line/props.ts | 49 + src/time-line/time-line-item-props.ts | 42 + src/time-line/time-line.en-US.md | 23 + src/time-line/time-line.md | 23 + src/time-line/type.ts | 63 + src/time-picker/props.ts | 14 + src/time-picker/time-picker.en-US.md | 12 +- src/time-picker/time-picker.md | 16 +- src/time-picker/time-range-picker-props.ts | 6 + src/time-picker/type.ts | 29 +- src/tooltip/props.ts | 8 +- src/tooltip/tooltip-lite-props.ts | 47 + src/tooltip/tooltip.en-US.md | 8 +- src/tooltip/tooltip.md | 15 +- src/tooltip/type.ts | 42 +- src/transfer/props.ts | 7 +- src/transfer/transfer.en-US.md | 4 +- src/transfer/transfer.md | 4 +- src/transfer/type.ts | 8 +- src/tree-select/props.ts | 4 +- src/tree-select/tree-select.en-US.md | 8 +- src/tree-select/tree-select.md | 8 +- src/tree-select/type.ts | 24 +- src/tree/props.ts | 5 +- src/tree/tree.en-US.md | 1 + src/tree/tree.md | 1 + src/tree/type.ts | 4 + src/typography/paragraph-props.ts | 24 + src/typography/text-props.ts | 56 + src/typography/title-props.ts | 33 + src/typography/type.ts | 160 ++ src/typography/typography.en-US.md | 67 + src/typography/typography.md | 67 + src/upload/__tests__/vitest-upload.test.jsx | 73 +- src/upload/props.ts | 6 +- src/upload/type.ts | 2 +- src/upload/upload.en-US.md | 3 +- src/upload/upload.md | 7 +- src/virtual-scroll/type.ts | 33 + src/watermark/watermark.en-US.md | 4 +- src/watermark/watermark.md | 2 + 229 files changed, 4266 insertions(+), 1409 deletions(-) create mode 100644 src/breadcrumb-item/breadcrumb-item.en-US.md create mode 100644 src/breadcrumb-item/breadcrumb-item.md create mode 100644 src/date-range-picker/date-range-picker.en-US.md create mode 100644 src/date-range-picker/date-range-picker.md create mode 100644 src/dialog/dialog-card-props.ts create mode 100644 src/empty/empty.en-US.md create mode 100644 src/empty/empty.md create mode 100644 src/empty/props.ts create mode 100644 src/empty/type.ts create mode 100644 src/guide/guide-step-props.ts create mode 100644 src/infinity-scroll/type.ts create mode 100644 src/time-line/props.ts create mode 100644 src/time-line/time-line-item-props.ts create mode 100644 src/time-line/time-line.en-US.md create mode 100644 src/time-line/time-line.md create mode 100644 src/time-line/type.ts create mode 100644 src/tooltip/tooltip-lite-props.ts create mode 100644 src/typography/paragraph-props.ts create mode 100644 src/typography/text-props.ts create mode 100644 src/typography/title-props.ts create mode 100644 src/typography/type.ts create mode 100644 src/typography/typography.en-US.md create mode 100644 src/typography/typography.md create mode 100644 src/virtual-scroll/type.ts diff --git a/global.d.ts b/global.d.ts index 20df402a0..e70bf51be 100644 --- a/global.d.ts +++ b/global.d.ts @@ -1,96 +1,123 @@ /** - * Global Vue2 <= 2.6.14 Components for Volar - * https://github.com/johnsoncodehk/volar/issues/418 - * https://github.com/johnsoncodehk/volar/discussions/848 - * or put global.d.ts to your project root dir - */ -declare module '@vue/runtime-dom' { + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * https://github.com/TDesignOteam/tdesign-api + * eslint-disable + * */ +declare module '@vue/runtime-core' { export interface GlobalComponents { - TButton: typeof import('tdesign-vue')['Button']; - TIcon: typeof import('tdesign-vue')['Icon']; - TLink: typeof import('tdesign-vue')['Link']; - TCol: typeof import('tdesign-vue')['Col']; - TRow: typeof import('tdesign-vue')['Row']; - TLayout: typeof import('tdesign-vue')['Layout']; - TDivider: typeof import('tdesign-vue')['Divider']; - TSpace: typeof import('tdesign-vue')['Space']; TAffix: typeof import('tdesign-vue')['Affix']; + TAlert: typeof import('tdesign-vue')['Alert']; TAnchor: typeof import('tdesign-vue')['Anchor']; TAnchorItem: typeof import('tdesign-vue')['AnchorItem']; TAnchorTarget: typeof import('tdesign-vue')['AnchorTarget']; + TAside: typeof import('tdesign-vue')['Aside']; + TAutoComplete: typeof import('tdesign-vue')['AutoComplete']; + TAvatar: typeof import('tdesign-vue')['Avatar']; + TAvatarGroup: typeof import('tdesign-vue')['AvatarGroup']; + TBackTop: typeof import('tdesign-vue')['BackTop']; + TBadge: typeof import('tdesign-vue')['Badge']; + TBaseTable: typeof import('tdesign-vue')['BaseTable']; TBreadcrumb: typeof import('tdesign-vue')['Breadcrumb']; TBreadcrumbItem: typeof import('tdesign-vue')['BreadcrumbItem']; - TDropdown: typeof import('tdesign-vue')['Dropdown']; - TJumper: typeof import('tdesign-vue')['Jumper']; - TMenu: typeof import('tdesign-vue')['Menu']; - TPagination: typeof import('tdesign-vue')['Pagination']; - TSteps: typeof import('tdesign-vue')['Steps']; - TTabs: typeof import('tdesign-vue')['Tabs']; - TAutoComplete: typeof import('tdesign-vue')['AutoComplete']; + TButton: typeof import('tdesign-vue')['Button']; + TCalendar: typeof import('tdesign-vue')['Calendar']; + TCard: typeof import('tdesign-vue')['Card']; TCascader: typeof import('tdesign-vue')['Cascader']; + TCheckTag: typeof import('tdesign-vue')['CheckTag']; + TCheckTagGroup: typeof import('tdesign-vue')['CheckTagGroup']; TCheckbox: typeof import('tdesign-vue')['Checkbox']; TCheckboxGroup: typeof import('tdesign-vue')['CheckboxGroup']; + TCol: typeof import('tdesign-vue')['Col']; + TCollapse: typeof import('tdesign-vue')['Collapse']; + TCollapsePanel: typeof import('tdesign-vue')['CollapsePanel']; + TColorPicker: typeof import('tdesign-vue')['ColorPicker']; + TComment: typeof import('tdesign-vue')['Comment']; TDatePicker: typeof import('tdesign-vue')['DatePicker']; TDatePickerPanel: typeof import('tdesign-vue')['DatePickerPanel']; TDateRangePicker: typeof import('tdesign-vue')['DateRangePicker']; TDateRangePickerPanel: typeof import('tdesign-vue')['DateRangePickerPanel']; + TDescriptionItem: typeof import('tdesign-vue')['DescriptionItem']; + TDescriptions: typeof import('tdesign-vue')['Descriptions']; + TDialog: typeof import('tdesign-vue')['Dialog']; + TDialogCard: typeof import('tdesign-vue')['DialogCard']; + TDivider: typeof import('tdesign-vue')['Divider']; + TDrawer: typeof import('tdesign-vue')['Drawer']; + TDropdown: typeof import('tdesign-vue')['Dropdown']; + TDropdownItem: typeof import('tdesign-vue')['DropdownItem']; + TEmpty: typeof import('tdesign-vue')['Empty']; + TEnhancedTable: typeof import('tdesign-vue')['EnhancedTable']; + TFooter: typeof import('tdesign-vue')['Footer']; TForm: typeof import('tdesign-vue')['Form']; - TInputAdornment: typeof import('tdesign-vue')['InputAdornment']; + TFormItem: typeof import('tdesign-vue')['FormItem']; + TGuide: typeof import('tdesign-vue')['Guide']; + THeadMenu: typeof import('tdesign-vue')['HeadMenu']; + THeader: typeof import('tdesign-vue')['Header']; + TIconSVG: typeof import('tdesign-vue')['IconSVG']; + TIconfont: typeof import('tdesign-vue')['Iconfont']; + TImage: typeof import('tdesign-vue')['Image']; + TImageViewer: typeof import('tdesign-vue')['ImageViewer']; TInput: typeof import('tdesign-vue')['Input']; + TInputAdornment: typeof import('tdesign-vue')['InputAdornment']; + TInputGroup: typeof import('tdesign-vue')['InputGroup']; TInputNumber: typeof import('tdesign-vue')['InputNumber']; + TLayout: typeof import('tdesign-vue')['Layout']; + TLink: typeof import('tdesign-vue')['Link']; + TList: typeof import('tdesign-vue')['List']; + TListItem: typeof import('tdesign-vue')['ListItem']; + TListItemMeta: typeof import('tdesign-vue')['ListItemMeta']; + TLoading: typeof import('tdesign-vue')['Loading']; + TMenu: typeof import('tdesign-vue')['Menu']; + TMenuGroup: typeof import('tdesign-vue')['MenuGroup']; + TMenuItem: typeof import('tdesign-vue')['MenuItem']; + TMessage: typeof import('tdesign-vue')['Message']; + TNotification: typeof import('tdesign-vue')['Notification']; + TOption: typeof import('tdesign-vue')['Option']; + TOptionGroup: typeof import('tdesign-vue')['OptionGroup']; + TPagination: typeof import('tdesign-vue')['Pagination']; + TPaginationMini: typeof import('tdesign-vue')['PaginationMini']; + TParagraph: typeof import('tdesign-vue')['Paragraph']; + TPopconfirm: typeof import('tdesign-vue')['Popconfirm']; + TPopup: typeof import('tdesign-vue')['Popup']; + TPrimaryTable: typeof import('tdesign-vue')['PrimaryTable']; + TProgress: typeof import('tdesign-vue')['Progress']; TRadio: typeof import('tdesign-vue')['Radio']; TRadioGroup: typeof import('tdesign-vue')['RadioGroup']; + TRangeInput: typeof import('tdesign-vue')['RangeInput']; + TRangeInputPopup: typeof import('tdesign-vue')['RangeInputPopup']; + TRate: typeof import('tdesign-vue')['Rate']; + TRow: typeof import('tdesign-vue')['Row']; + TSearch: typeof import('tdesign-vue')['Search']; TSelect: typeof import('tdesign-vue')['Select']; - TOption: typeof import('tdesign-vue')['Option']; + TSelectInput: typeof import('tdesign-vue')['SelectInput']; + TSkeleton: typeof import('tdesign-vue')['Skeleton']; TSlider: typeof import('tdesign-vue')['Slider']; + TSpace: typeof import('tdesign-vue')['Space']; + TStatistic: typeof import('tdesign-vue')['Statistic']; + TStepItem: typeof import('tdesign-vue')['StepItem']; + TSteps: typeof import('tdesign-vue')['Steps']; + TStickyItem: typeof import('tdesign-vue')['StickyItem']; + TStickyTool: typeof import('tdesign-vue')['StickyTool']; + TSubmenu: typeof import('tdesign-vue')['Submenu']; + TSwiper: typeof import('tdesign-vue')['Swiper']; TSwitch: typeof import('tdesign-vue')['Switch']; + TTabPanel: typeof import('tdesign-vue')['TabPanel']; + TTabs: typeof import('tdesign-vue')['Tabs']; + TTag: typeof import('tdesign-vue')['Tag']; TTagInput: typeof import('tdesign-vue')['TagInput']; - TSelectInput: typeof import('tdesign-vue')['SelectInput']; + TText: typeof import('tdesign-vue')['Text']; TTextarea: typeof import('tdesign-vue')['Textarea']; - TTransfer: typeof import('tdesign-vue')['Transfer']; TTimePicker: typeof import('tdesign-vue')['TimePicker']; TTimeRangePicker: typeof import('tdesign-vue')['TimeRangePicker']; - TTimePickerPanel: typeof import('tdesign-vue')['TimePickerPanel']; - TTreeSelect: typeof import('tdesign-vue')['TreeSelect']; - TColorPicker: typeof import('tdesign-vue')['ColorPicker']; - TColorPickerPanel: typeof import('tdesign-vue')['ColorPickerPanel']; - TRangeInput: typeof import('tdesign-vue')['RangeInput']; - TAvatar: typeof import('tdesign-vue')['Avatar']; - TBadge: typeof import('tdesign-vue')['Badge']; - TCalendar: typeof import('tdesign-vue')['Calendar']; - TCard: typeof import('tdesign-vue')['Card']; - TComment: typeof import('tdesign-vue')['Comment']; - TImage: typeof import('tdesign-vue')['Image']; - TImageViewer: typeof import('tdesign-vue')['ImageViewer']; - TList: typeof import('tdesign-vue')['List']; - TListItem: typeof import('tdesign-vue')['ListItem']; - TProgress: typeof import('tdesign-vue')['Progress']; - TSkeleton: typeof import('tdesign-vue')['Skeleton']; - TSwiper: typeof import('tdesign-vue')['Swiper']; - TSwiperItem: typeof import('tdesign-vue')['SwiperItem']; - TTable: typeof import('tdesign-vue')['Table']; - TBaseTable: typeof import('tdesign-vue')['BaseTable']; - TPrimaryTable: typeof import('tdesign-vue')['PrimaryTable']; - TEnhancedTable: typeof import('tdesign-vue')['EnhancedTable']; - TTag: typeof import('tdesign-vue')['Tag']; TTimeline: typeof import('tdesign-vue')['Timeline']; + TTimelineItem: typeof import('tdesign-vue')['TimelineItem']; + TTitle: typeof import('tdesign-vue')['Title']; TTooltip: typeof import('tdesign-vue')['Tooltip']; + TTooltipLite: typeof import('tdesign-vue')['TooltipLite']; + TTransfer: typeof import('tdesign-vue')['Transfer']; TTree: typeof import('tdesign-vue')['Tree']; - TCollapse: typeof import('tdesign-vue')['Collapse']; - TCollapsePanel: typeof import('tdesign-vue')['CollapsePanel']; - TWatermark: typeof import('tdesign-vue')['Watermark']; - TRate: typeof import('tdesign-vue')['Rate']; - TAlert: typeof import('tdesign-vue')['Alert']; - TDialog: typeof import('tdesign-vue')['Dialog']; - TDrawer: typeof import('tdesign-vue')['Drawer']; - TGuide: typeof import('tdesign-vue')['Guide']; - TLoading: typeof import('tdesign-vue')['Loading']; - TMessage: typeof import('tdesign-vue')['Message']; - TNotification: typeof import('tdesign-vue')['Notification']; - TPopconfirm: typeof import('tdesign-vue')['Popconfirm']; - TPopup: typeof import('tdesign-vue')['Popup']; + TTreeSelect: typeof import('tdesign-vue')['TreeSelect']; TUpload: typeof import('tdesign-vue')['Upload']; - TConfigProvider: typeof import('tdesign-vue')['ConfigProvider']; + TWatermark: typeof import('tdesign-vue')['Watermark']; } } diff --git a/helper/attributes.json b/helper/attributes.json index 5d3af9056..7bd8d574d 100644 --- a/helper/attributes.json +++ b/helper/attributes.json @@ -13,11 +13,11 @@ }, "t-affix/offset-bottom": { "type": "Number", - "description": " 距离容器顶部达到指定距离后触发固定\n\ndefault: 0\n\n[docs](https://tdesign.tencent.com/vue/components/affix?tab=api#affix-props)" + "description": "When the distance from the bottom of the container reaches the specified distance, the trigger is fixed\n\n 距离容器底部达到指定距离后触发固定\n\ndefault: 0\n\n[docs](https://tdesign.tencent.com/vue/components/affix?tab=api#affix-props)" }, "t-affix/offset-top": { "type": "Number", - "description": " 距离容器底部达到指定距离后触发固定\n\ndefault: 0\n\n[docs](https://tdesign.tencent.com/vue/components/affix?tab=api#affix-props)" + "description": "When the distance from the top of the container reaches the specified distance, the trigger is fixed\n\n 距离容器顶部达到指定距离后触发固定\n\ndefault: 0\n\n[docs](https://tdesign.tencent.com/vue/components/affix?tab=api#affix-props)" }, "t-affix/z-index": { "type": "Number", @@ -85,6 +85,10 @@ "type": "TNode", "description": "用于自定义选中项左侧游标\n\n[docs](https://tdesign.tencent.com/vue/components/anchor?tab=api#anchor-props)" }, + "t-anchor/get-current-anchor": { + "type": "Function", + "description": "Custom Highlighted Anchor Points\n\n自定义高亮的锚点\t\n\n[docs](https://tdesign.tencent.com/vue/components/anchor?tab=api#anchor-props)" + }, "t-anchor/size": { "type": "String", "options": [ @@ -432,6 +436,22 @@ ], "description": "尺寸\n\ndefault: medium\n\n[docs](https://tdesign.tencent.com/vue/components/badge?tab=api#badge-props)" }, + "t-base-table/active-row-keys": { + "type": "Array", + "description": "keys of highlight rows, used to mock area selection behavior, just like macOS or windows area selection\n\n高亮行，支持鼠标键盘操作(Shift)连续高亮行，可用于处理行选中等批量操作，模拟操作系统区域选择行为\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, + "t-table/active-row-keys": { + "type": "Array", + "description": "keys of highlight rows, used to mock area selection behavior, just like macOS or windows area selection\n\n高亮行，支持鼠标键盘操作(Shift)连续高亮行，可用于处理行选中等批量操作，模拟操作系统区域选择行为\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, + "t-base-table/active-row-type": { + "type": "String", + "description": "make nodes can be highlight on clicked\n\n默认不会高亮点击行，`activeRowType=single` 表示鼠标点击仅允许同时高亮一行，Shift 键盘操作加鼠标操作依然可以高亮多行，因为这属于明显的区域选择行为。`activeRowType= multiple ` 表示允许鼠标点击同时高亮多行\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, + "t-table/active-row-type": { + "type": "String", + "description": "make nodes can be highlight on clicked\n\n默认不会高亮点击行，`activeRowType=single` 表示鼠标点击仅允许同时高亮一行，Shift 键盘操作加鼠标操作依然可以高亮多行，因为这属于明显的区域选择行为。`activeRowType= multiple ` 表示允许鼠标点击同时高亮多行\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, "t-base-table/allow-resize-column-width": { "type": "Boolean", "description": "allow to resize column width\n\n是否允许调整列宽。请更为使用 `resizable`\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" @@ -496,6 +516,14 @@ "type": "Boolean", "description": "是否禁用本地数据分页。当 `data` 数据长度超过分页大小时，会自动进行本地数据分页。如果 `disableDataPage` 设置为 true，则无论何时，都不会进行本地数据分页\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, + "t-base-table/disable-space-inactive-row": { + "type": "Boolean", + "description": "can not set row to be inactive with Space keydown\n\n默认重复按下 Space 键可取消当前行高亮，是否禁用取消\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, + "t-table/disable-space-inactive-row": { + "type": "Boolean", + "description": "can not set row to be inactive with Space keydown\n\n默认重复按下 Space 键可取消当前行高亮，是否禁用取消\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, "t-base-table/empty": { "type": "String|TNode", "description": "empty text or empty element\n\n空表格呈现样式，支持全局配置 `GlobalConfigProvider`\n\ndefault: ''\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" @@ -592,6 +620,14 @@ "type": "Boolean", "description": "show hover style\n\n是否显示鼠标悬浮状态\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, + "t-base-table/keyboard-row-hover": { + "type": "Boolean", + "description": "make table row to be hover by keydown ArrowUp/ArrowDown\n\n键盘操作行显示悬浮效果，一般用于键盘操作行选中、行展开、行高亮等功能\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, + "t-table/keyboard-row-hover": { + "type": "Boolean", + "description": "make table row to be hover by keydown ArrowUp/ArrowDown\n\n键盘操作行显示悬浮效果，一般用于键盘操作行选中、行展开、行高亮等功能\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, "t-base-table/last-full-row": { "type": "String|TNode", "description": "尾行内容，横跨所有列\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" @@ -600,6 +636,14 @@ "type": "String|TNode", "description": "尾行内容，横跨所有列\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, + "t-base-table/lazy-load": { + "type": "Boolean", + "description": "load table content when it entering the visible area, all elements in table are not rendered before it become visible\n\n是否启用整个表格元素的懒加载，当页面滚动到可视区域后再渲染表格。注意和表格内部行滚动懒加载的区别，内部行滚动无论表格是否在可视区域都会默认渲染第一屏的行元素\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, + "t-table/lazy-load": { + "type": "Boolean", + "description": "load table content when it entering the visible area, all elements in table are not rendered before it become visible\n\n是否启用整个表格元素的懒加载，当页面滚动到可视区域后再渲染表格。注意和表格内部行滚动懒加载的区别，内部行滚动无论表格是否在可视区域都会默认渲染第一屏的行元素\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, "t-base-table/loading": { "type": "Boolean|TNode", "description": "loading state table\n\n加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" @@ -616,6 +660,14 @@ "type": "Object", "description": "透传加载组件全部属性\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, + "t-base-table/locale": { + "type": "Object", + "description": "table locale config\n\n语言配置\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, + "t-table/locale": { + "type": "Object", + "description": "table locale config\n\n语言配置\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + }, "t-base-table/max-height": { "type": "String|Number", "description": "table max height\n\n表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" @@ -642,11 +694,11 @@ }, "t-base-table/resizable": { "type": "Boolean", - "description": "allow to resize column width\n\n是否允许调整列宽。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。
默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + "description": "allow to resize column width, set `tableLayout=fixed` would be better\n\n是否允许调整列宽，设置 `tableLayout=fixed` 效果更友好，此时不允许通过 CSS 设置 `table`元素宽度，也不允许设置 `tableContentWidth`。一般不建议在列宽调整场景使用 `tableLayout: auto`。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。
默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, "t-table/resizable": { "type": "Boolean", - "description": "allow to resize column width\n\n是否允许调整列宽。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。
默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + "description": "allow to resize column width, set `tableLayout=fixed` would be better\n\n是否允许调整列宽，设置 `tableLayout=fixed` 效果更友好，此时不允许通过 CSS 设置 `table`元素宽度，也不允许设置 `tableContentWidth`。一般不建议在列宽调整场景使用 `tableLayout: auto`。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。
默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, "t-base-table/row-attributes": { "type": "Object|Array|Function", @@ -711,7 +763,7 @@ "medium", "large" ], - "description": "表格尺寸\n\ndefault: medium\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + "description": "table size, support `GlobalConfigProvider`, default value is `medium`\n\n表格尺寸，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `medium`\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, "t-table/size": { "type": "String", @@ -720,7 +772,7 @@ "medium", "large" ], - "description": "表格尺寸\n\ndefault: medium\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + "description": "table size, support `GlobalConfigProvider`, default value is `medium`\n\n表格尺寸，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `medium`\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, "t-base-table/stripe": { "type": "Boolean", @@ -744,7 +796,7 @@ "auto", "fixed" ], - "description": "table-layout css properties\n\n表格布局方式\n\ndefault: fixed\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + "description": "table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please\n\n表格布局方式，`` 元素原生属性。[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。注意，在列宽调整下场景只能使用 `fixed` 模式\n\ndefault: fixed\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, "t-table/table-layout": { "type": "String", @@ -752,7 +804,7 @@ "auto", "fixed" ], - "description": "table-layout css properties\n\n表格布局方式\n\ndefault: fixed\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" + "description": "table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please\n\n表格布局方式，`
` 元素原生属性。[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。注意，在列宽调整下场景只能使用 `fixed` 模式\n\ndefault: fixed\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, "t-base-table/top-content": { "type": "String|TNode", @@ -780,6 +832,22 @@ ], "description": "vertical align\n\n行内容上下方向对齐\n\ndefault: middle\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props)" }, + "t-base-table/active-change": { + "type": "event", + "description": "trigger on row active change\n\n高亮行发生变化时触发，泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据， `currentRowData` 表示当前操作行数据\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-events)" + }, + "t-table/active-change": { + "type": "event", + "description": "trigger on row active change\n\n高亮行发生变化时触发，泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据， `currentRowData` 表示当前操作行数据\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-events)" + }, + "t-base-table/active-row-action": { + "type": "event", + "description": "keyboard operation event actions. used to mock selection behavior, just like macOS or windows\n\n键盘操作事件。开启行高亮功能后，会自动开启键盘操作功能，如：通过键盘(Shift)或鼠标操作连续选中高亮行时触发，一般用于处理行选中等批量操作，模拟操作系统区域选择行为\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-events)" + }, + "t-table/active-row-action": { + "type": "event", + "description": "keyboard operation event actions. used to mock selection behavior, just like macOS or windows\n\n键盘操作事件。开启行高亮功能后，会自动开启键盘操作功能，如：通过键盘(Shift)或鼠标操作连续选中高亮行时触发，一般用于处理行选中等批量操作，模拟操作系统区域选择行为\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-events)" + }, "t-base-table/cell-click": { "type": "event", "description": "trigger on cell clicked\n\n单元格点击时触发\n\n[docs](https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-events)" @@ -941,6 +1009,10 @@ "type": "String|Object", "description": "路由跳转目标，当且仅当 Router 存在时，该 API 有效\n\n[docs](https://tdesign.tencent.com/vue/components/breadcrumb-item?tab=api#breadcrumbitem-props)" }, + "t-breadcrumb-item/click": { + "type": "event", + "description": "trigger on click\n\n点击时触发\n\n[docs](https://tdesign.tencent.com/vue/components/breadcrumb-item?tab=api#breadcrumbitem-events)" + }, "t-button/block": { "type": "Boolean", "description": "make button to be a block-level element\n\n是否为块级元素\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/button?tab=api#button-props)" @@ -1191,7 +1263,11 @@ }, "t-card/loading": { "type": "Boolean|TNode", - "description": "加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/card?tab=api#card-props)" + "description": "加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/card?tab=api#card-props)" + }, + "t-card/loading-props": { + "type": "Object", + "description": "Loading Component Props\n\n透传加载组件(Loading)全部属性\n\n[docs](https://tdesign.tencent.com/vue/components/card?tab=api#card-props)" }, "t-card/shadow": { "type": "Boolean", @@ -1230,6 +1306,10 @@ "type": "Boolean", "description": "自动聚焦\n\n[docs](https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props)" }, + "t-cascader/borderless": { + "type": "Boolean", + "description": "无边框模式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props)" + }, "t-cascader/check-props": { "type": "Object", "description": "参考 checkbox 组件 API\n\n[docs](https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props)" @@ -1268,7 +1348,7 @@ }, "t-cascader/keys": { "type": "Object", - "description": "用来定义 value / label / children 在 `options` 中对应的字段别名\n\n[docs](https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props)" + "description": "用来定义 value / label / children / disabled 在 `options` 中对应的字段别名\n\n[docs](https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props)" }, "t-cascader/label": { "type": "String|TNode", @@ -1322,6 +1402,10 @@ "type": "Boolean", "description": "是否显示下拉框\n\n[docs](https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props)" }, + "t-cascader/prefix-icon": { + "type": "TNode", + "description": "组件前置图标\n\n[docs](https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props)" + }, "t-cascader/readonly": { "type": "Boolean", "description": "只读状态，值为真会隐藏输入框，且无法打开下拉框\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props)" @@ -1391,7 +1475,7 @@ }, "t-cascader/value-display": { "type": "String|TNode", - "description": "`MouseEvent`\n\n【开发中】自定义选中项呈现的内容\n\n[docs](https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props)" + "description": "`MouseEvent`\n\n自定义选中项呈现的内容\n\n[docs](https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props)" }, "t-cascader/value-mode": { "type": "String", @@ -1434,6 +1518,10 @@ "type": "Boolean", "description": "标签选中的状态，默认风格（theme=default）才有选中态\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-props)" }, + "t-check-tag/checked-props": { + "type": "Object", + "description": "used to set checked tag props\n\n透传标签选中态属性\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-props)" + }, "t-check-tag/content": { "type": "String|Number|Array|TNode", "description": "组件子元素；传入数组时：[选中内容，非选中内容]\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-props)" @@ -1455,6 +1543,14 @@ ], "description": "标签尺寸\n\ndefault: medium\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-props)" }, + "t-check-tag/unchecked-props": { + "type": "Object", + "description": "used to set unchecked tag props\n\n透传标签未选态属性\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-props)" + }, + "t-check-tag/value": { + "type": "String|Number", + "description": "tag unique key\n\n标签唯一标识，一般用于标签组场景，单个可选择标签无需设置\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-props)" + }, "t-check-tag/change": { "type": "event", "description": "状态切换时触发\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-events)" @@ -1463,6 +1559,30 @@ "type": "event", "description": "点击标签时触发\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-events)" }, + "t-check-tag-group/checked-props": { + "type": "Object", + "description": "used to set checked tag props\n\n透传标签选中态属性\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-props)" + }, + "t-check-tag-group/multiple": { + "type": "Boolean", + "description": "allow to select multiple tags\n\n是否支持选中多个标签\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-props)" + }, + "t-check-tag-group/options": { + "type": "Array", + "description": "tag list\n\n标签选项列表\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-props)" + }, + "t-check-tag-group/unchecked-props": { + "type": "Object", + "description": "used to set unchecked tag props\n\n透传标签未选态属性\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-props)" + }, + "t-check-tag-group/value": { + "type": "Array", + "description": "selected tag value list\n\n选中标签值\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-props)" + }, + "t-check-tag-group/change": { + "type": "event", + "description": "\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-events)" + }, "t-checkbox/check-all": { "type": "Boolean", "description": "用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-props)" @@ -1487,6 +1607,10 @@ "type": "String|TNode", "description": "主文案\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-props)" }, + "t-checkbox/lazy-load": { + "type": "Boolean", + "description": "load checkbox content when it entering the visible area\n\n是否启用懒加载。数据量大时建议开启；加载复杂内容或大量图片时建议开启\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-props)" + }, "t-checkbox/name": { "type": "String", "description": "HTML 元素原生属性\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-props)" @@ -1495,6 +1619,10 @@ "type": "Boolean", "description": "只读状态\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-props)" }, + "t-checkbox/title": { + "type": "String", + "description": "html attribute\n\nHTML 原生属性\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-props)" + }, "t-checkbox/value": { "type": "String|Number|Boolean", "description": "value of checkbox\n\n多选框的值\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-props)" @@ -1503,9 +1631,13 @@ "type": "event", "description": "值变化时触发\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-events)" }, - "t-checkbox/click": { - "type": "event", - "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-events)" + "t-checkbox-group/disabled": { + "type": "Boolean", + "description": "是否禁用组件，默认为 false。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox-group?tab=api#checkboxgroup-props)" + }, + "t-checkbox-group/lazy-load": { + "type": "Boolean", + "description": "load checkbox content when it entering the visible area\n\n是否启用懒加载。子组件 Checkbox 数据量大时建议开启；加载复杂内容或大量图片时建议开启\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox-group?tab=api#checkboxgroup-props)" }, "t-checkbox-group/max": { "type": "Number", @@ -1581,7 +1713,7 @@ }, "t-collapse/borderless": { "type": "Boolean", - "description": "是否为无边框模式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/collapse?tab=api#collapse-props)" + "description": "无边框模式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/collapse?tab=api#collapse-props)" }, "t-collapse/default-expand-all": { "type": "Boolean", @@ -1948,6 +2080,10 @@ "type": "Boolean", "description": "是否允许输入日期\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/date-range-picker?tab=api#daterangepicker-props)" }, + "t-date-range-picker/cancel-range-select-limit": { + "type": "Boolean", + "description": "The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted.\n\n默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/date-range-picker?tab=api#daterangepicker-props)" + }, "t-date-range-picker/clearable": { "type": "Boolean", "description": "是否显示清除按钮\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/date-range-picker?tab=api#daterangepicker-props)" @@ -2148,13 +2284,39 @@ "type": "event", "description": "年份切换发生变化时触发\n\n[docs](https://tdesign.tencent.com/vue/components/date-range-picker-panel?tab=api#daterangepickerpanel-events)" }, - "t-descriptions-item/label": { + "t-description-item/align": { + "type": "String", + "options": [ + "top", + "middle", + "bottom" + ], + "description": "content align type\n\n内容垂直对齐方式，DescriptionItem.align 优先级高于 Descriptions.align\n\n[docs](https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props)" + }, + "t-description-item/content": { "type": "String|TNode", - "description": "label of description item\n\n描述项字段名\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions-item?tab=api#descriptionsitem-props)" + "description": "content of description item\n\n描述项内容\n\n[docs](https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props)" }, - "t-descriptions-item/span": { + "t-description-item/default": { + "type": "String|TNode", + "description": "content of description item\n\n描述项内容，同 `content`\n\n[docs](https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props)" + }, + "t-description-item/label": { + "type": "String|TNode", + "description": "label of description item\n\n描述项标签\n\n[docs](https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props)" + }, + "t-description-item/span": { "type": "Number", - "description": "width count\n\n占用的宽度数量\n\ndefault: 1\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions-item?tab=api#descriptionsitem-props)" + "description": "width count\n\n占用的宽度数量\n\ndefault: 1\n\n[docs](https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props)" + }, + "t-descriptions/align": { + "type": "String", + "options": [ + "top", + "middle", + "bottom" + ], + "description": "content align type\n\n内容垂直对齐方式，DescriptionItem.align 优先级高于 Descriptions.align\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" }, "t-descriptions/bordered": { "type": "Boolean", @@ -2164,26 +2326,29 @@ "type": "Boolean", "description": "set label with \":\" on the right\n\n字段名右侧是否携带冒号“：”\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" }, - "t-descriptions/columns": { + "t-descriptions/column": { "type": "Number", - "description": "count of DescriptionsItem in one row\n\n一行 DescriptionsItem 的数量\n\ndefault: 2\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" + "description": "count of DescriptionItem in one row\n\n一行 `DescriptionItem` 的数量\n\ndefault: 2\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" }, - "t-descriptions/content-align": { - "type": "String", - "options": [ - "left", - "center" - ], - "description": "字段值内容的对齐方式：左对齐、居中对齐\n\ndefault: left\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" + "t-descriptions/content-style": { + "type": "Object", + "description": "style of description cotent\n\n自定义描述项内容的样式\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" }, - "t-descriptions/label-align": { + "t-descriptions/item-layout": { "type": "String", "options": [ - "left", - "right", - "top" + "horizontal", + "vertical" ], - "description": "字段标签对齐方式：左对齐、右对齐、顶部对齐\n\ndefault: right\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" + "description": "layout direction of description item\n\n描述项的排列方向\n\ndefault: horizontal\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" + }, + "t-descriptions/items": { + "type": "Array", + "description": "list of descriptions items\n\n描述项的列表\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" + }, + "t-descriptions/label-style": { + "type": "Object", + "description": "style of description item\n\n自定义描述项标签的样式\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" }, "t-descriptions/layout": { "type": "String", @@ -2202,6 +2367,10 @@ ], "description": "a descriptions has three size\n\n组件尺寸\n\ndefault: medium\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" }, + "t-descriptions/title": { + "type": "String|TNode", + "description": "title of descriptions\n\n描述列表的标题\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props)" + }, "t-dialog/attach": { "type": "String|Function", "description": "对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body\n\n[docs](https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props)" @@ -2220,7 +2389,7 @@ }, "t-dialog/close-on-esc-keydown": { "type": "Boolean", - "description": "按下 ESC 时是否触发对话框关闭事件\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props)" + "description": "trigger dialog close event on `ESC` keydown\n\n按下 ESC 时是否触发对话框关闭事件\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props)" }, "t-dialog/close-on-overlay-click": { "type": "Boolean", @@ -2230,6 +2399,10 @@ "type": "String|Object|TNode", "description": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件\n\n[docs](https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props)" }, + "t-dialog/confirm-loading": { + "type": "Boolean", + "description": "confirm button loading status\n\n确认按钮加载状态\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props)" + }, "t-dialog/confirm-on-enter": { "type": "Boolean", "description": "confirm on enter\n\n是否在按下回车键时，触发确认事件\n\n[docs](https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props)" @@ -2242,6 +2415,10 @@ "type": "Boolean", "description": "是否在关闭弹框的时候销毁子元素\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props)" }, + "t-dialog/dialog-class-name": { + "type": "String", + "description": "弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second'\n\n[docs](https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props)" + }, "t-dialog/draggable": { "type": "Boolean", "description": "对话框是否可以拖拽（仅在非模态对话框时有效）\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props)" @@ -2397,7 +2574,7 @@ }, "t-drawer/close-on-esc-keydown": { "type": "Boolean", - "description": "按下 ESC 时是否触发抽屉关闭事件\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-props)" + "description": "trigger drawer close event on `ESC` keydown\n\n按下 ESC 时是否触发抽屉关闭事件\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-props)" }, "t-drawer/close-on-overlay-click": { "type": "Boolean", @@ -2458,8 +2635,8 @@ "description": "尺寸，支持 'small', 'medium', 'large'，'35px', '30%', '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-props)" }, "t-drawer/size-draggable": { - "type": "Boolean", - "description": "抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-props)" + "type": "Boolean|Object", + "description": "allow resizing drawer width/height, set `max` or `min` to limit size\n\n抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度。`sizeDraggable.max` 和 `sizeDraggable.min` 用于控制拖拽尺寸大小限制\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-props)" }, "t-drawer/visible": { "type": "Boolean", @@ -2493,6 +2670,10 @@ "type": "event", "description": "如果蒙层存在，点击蒙层时触发\n\n[docs](https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-events)" }, + "t-drawer/size-drag-end": { + "type": "event", + "description": "trigger on size drag end\n\n抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度\n\n[docs](https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-events)" + }, "t-dropdown/direction": { "type": "String", "options": [ @@ -2525,6 +2706,14 @@ "type": "Array", "description": "下拉操作项\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/dropdown?tab=api#dropdown-props)" }, + "t-dropdown/panel-bottom-content": { + "type": "String|TNode", + "description": "bottom content of the dropdown panel\n\n面板内的底部内容\n\n[docs](https://tdesign.tencent.com/vue/components/dropdown?tab=api#dropdown-props)" + }, + "t-dropdown/panel-top-content": { + "type": "String|TNode", + "description": "top content of the dropdown panel\n\n面板内的顶部内容\n\n[docs](https://tdesign.tencent.com/vue/components/dropdown?tab=api#dropdown-props)" + }, "t-dropdown/placement": { "type": "String", "options": [ @@ -2599,10 +2788,45 @@ "type": "event", "description": "点击时触发\n\n[docs](https://tdesign.tencent.com/vue/components/dropdown-item?tab=api#dropdownitem-events)" }, + "t-empty/action": { + "type": "TNode", + "description": "action block\n\n操作区域\n\n[docs](https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props)" + }, + "t-empty/description": { + "type": "String|TNode", + "description": "empty component description\n\n描述文字\n\n[docs](https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props)" + }, + "t-empty/image": { + "type": "String|TNode", + "description": "image url, or Image component props, or custom any node you need.\n\n组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：``\n\n[docs](https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props)" + }, + "t-empty/image-style": { + "type": "Object", + "description": "pass `Cascading Style Sheets` to image element\n\n透传图片样式表\n\n[docs](https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props)" + }, + "t-empty/title": { + "type": "String|TNode", + "description": "empty component title\n\n错误标题\n\n[docs](https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props)" + }, + "t-empty/type": { + "type": "String", + "options": [ + "empty", + "success", + "fail", + "network-error", + "maintenance" + ], + "description": "Empty component type\n\n组件类型，如：空数据/成功/失败/网络错误/建设中\n\ndefault: empty\n\n[docs](https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props)" + }, "t-enhanced-table/before-drag-sort": { "type": "Function", "description": "stop to drag sort\n\n树形结构中，拖拽排序前控制，返回值为 `true` 则继续排序；返回值为 `false` 则中止排序还原数据\n\n[docs](https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-props)" }, + "t-enhanced-table/expanded-tree-nodes": { + "type": "Array", + "description": "expanded tree node row keys, row key value is from data[rowKey]\n\n展开的树形节点。非必须。在需要自由控制展开的树形节点时使用。其他场景无需设置，表格组件有内置展开逻辑\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-props)" + }, "t-enhanced-table/tree": { "type": "Object", "description": "tree data configs\n\n树形结构相关配置。具体属性文档查看 `TableTreeConfig` 相关描述\n\n[docs](https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-props)" @@ -2615,9 +2839,13 @@ "type": "event", "description": "异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因\n\n[docs](https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-events)" }, + "t-enhanced-table/expanded-tree-nodes-change": { + "type": "event", + "description": "trigger on tree node expanded or folded\n\n树形结构，展开的树节点发生变化时触发，泛型 T 指表格数据类型\n\n[docs](https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-events)" + }, "t-enhanced-table/tree-expand-change": { "type": "event", - "description": "树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发\n\n[docs](https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-events)" + "description": "trigger on tree node expanded or folded, use `expandedTreeNodesChange` please\n\n树形结构，用户操作引起节点展开或收起时触发。请更为使用 `onExpandedTreeNodesChange`\n\n[docs](https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-events)" }, "t-footer/height": { "type": "String", @@ -2743,7 +2971,7 @@ "description": "可以整体设置标签宽度，优先级高于 Form.labelWidth\n\n[docs](https://tdesign.tencent.com/vue/components/form-item?tab=api#formitem-props)" }, "t-form-item/name": { - "type": "String|Number", + "type": "String", "description": "表单字段名称\n\n[docs](https://tdesign.tencent.com/vue/components/form-item?tab=api#formitem-props)" }, "t-form-item/required-mark": { @@ -2958,6 +3186,10 @@ "type": "event", "description": "trigger on image load failed\n\n图片加载失败时触发\n\n[docs](https://tdesign.tencent.com/vue/components/image?tab=api#image-events)" }, + "t-image/fallback": { + "type": "String", + "description": "display `fallback` image on `src` loading failed. you can also use `error` to define more complex error content\n\n图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error`\n\n[docs](https://tdesign.tencent.com/vue/components/image?tab=api#image-props)" + }, "t-image/fit": { "type": "String", "options": [ @@ -3001,6 +3233,20 @@ "type": "String", "description": "等同于原生的 object-position 属性，可选值为 top right bottom left 或 string，可以自定义任何单位，px 或者 百分比\n\ndefault: center\n\n[docs](https://tdesign.tencent.com/vue/components/image?tab=api#image-props)" }, + "t-image/referrerpolicy": { + "type": "String", + "options": [ + "no-referrer", + "no-referrer-when-downgrade", + "origin", + "origin-when-cross-origin", + "same-origin", + "strict-origin", + "strict-origin-when-cross-origin", + "unsafe-url" + ], + "description": "attribute of ``, [MDN Definition](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)\n\n`` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)\n\n[docs](https://tdesign.tencent.com/vue/components/image?tab=api#image-props)" + }, "t-image/shape": { "type": "String", "options": [ @@ -3011,12 +3257,12 @@ "description": "图片圆角类型\n\ndefault: square\n\n[docs](https://tdesign.tencent.com/vue/components/image?tab=api#image-props)" }, "t-image/src": { - "type": "String", - "description": "图片链接\n\n[docs](https://tdesign.tencent.com/vue/components/image?tab=api#image-props)" + "type": "String|File", + "description": "src attribute of ``. image File can also be loaded\n\n用于显示图片的链接或原始图片文件对象\n\n[docs](https://tdesign.tencent.com/vue/components/image?tab=api#image-props)" }, "t-image/srcset": { "type": "Object", - "description": "for `.avif` and `.webp` image url\n\n图片地址，支持特殊格式的图片，如 `.avif` 和 `.webp`\n\n[docs](https://tdesign.tencent.com/vue/components/image?tab=api#image-props)" + "description": "for `.avif` and `.webp` image url, load `srcset` before `src`\n\n图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址\n\n[docs](https://tdesign.tencent.com/vue/components/image?tab=api#image-props)" }, "t-image/load": { "type": "event", @@ -3026,6 +3272,10 @@ "type": "Boolean|TNode", "description": "是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props)" }, + "t-image-viewer/close-on-esc-keydown": { + "type": "Boolean", + "description": "trigger image viewer close event on `ESC` keydown\n\n按下 ESC 时是否触发图片预览器关闭事件\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props)" + }, "t-image-viewer/close-on-overlay": { "type": "Boolean", "description": "是否在点击遮罩层时，触发预览关闭\n\n[docs](https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props)" @@ -3036,7 +3286,7 @@ }, "t-image-viewer/image-scale": { "type": "Object", - "description": " 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度\n\n[docs](https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props)" + "description": " 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例\n\n[docs](https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props)" }, "t-image-viewer/images": { "type": "Array", @@ -3044,7 +3294,7 @@ }, "t-image-viewer/index": { "type": "Number", - "description": "当前预览图片所在的下标\n\n[docs](https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props)" + "description": "当前预览图片所在的下标\n\ndefault: 0\n\n[docs](https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props)" }, "t-image-viewer/mode": { "type": "String", @@ -3076,7 +3326,7 @@ }, "t-image-viewer/visible": { "type": "Boolean", - "description": "隐藏/显示预览\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props)" + "description": "hide or show image viewer\n\n隐藏/显示预览\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props)" }, "t-image-viewer/z-index": { "type": "Number", @@ -3097,50 +3347,54 @@ "center", "right" ], - "description": "文本内容位置，居左/居中/居右\n\ndefault: left\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "text align type\n\n文本内容位置，居左/居中/居右\n\ndefault: left\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/allow-input-over-max": { "type": "Boolean", - "description": "超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "allow to continue input on value length is over `maxlength` or `maxcharacter`\n\n超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/auto-width": { "type": "Boolean", - "description": "宽度随内容自适应\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "input width is fit to input content\n\n宽度随内容自适应\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/autocomplete": { "type": "String", - "description": "是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\n\n是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/autofocus": { "type": "Boolean", - "description": "自动聚焦\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "autofocus on first rendered\n\n自动聚焦\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + }, + "t-input/borderless": { + "type": "Boolean", + "description": "input without border\n\n【开发中】无边框模式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/clearable": { "type": "Boolean", - "description": "是否可清空\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "show clear icon, clicked to clear input value\n\n是否可清空\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/disabled": { "type": "Boolean", - "description": "是否禁用输入框\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "make input to be disabled\n\n是否禁用输入框\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/format": { "type": "Function", - "description": "指定输入框展示值的格式\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better\n\n指定输入框展示值的格式。注意 `type=number` 时请勿使用，此功能建议更为使用 `InputNumber` 组件\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/input-class": { "type": "String|Object|Array", - "description": "t-input 同级类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "add className to the element with `t-input` class\n\nt-input 同级类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/label": { "type": "String|TNode", - "description": "左侧文本\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "text on the left of input\n\n左侧文本\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/maxcharacter": { "type": "Number", "description": "用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/maxlength": { - "type": "Number", + "type": "String|Number", "description": "用户最多可以输入的文本长度，一个中文等于一个计数长度。值为空，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/name": { @@ -3161,7 +3415,7 @@ }, "t-input/show-clear-icon-on-empty": { "type": "Boolean", - "description": "输入框内容为空时，悬浮状态是否显示清空按钮，默认不显示\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "show clear icon on empty input value\n\n输入框内容为空时，悬浮状态是否显示清空按钮，默认不显示\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/show-limit-number": { "type": "Boolean", @@ -3174,7 +3428,7 @@ "medium", "large" ], - "description": "输入框尺寸\n\ndefault: medium\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "make input to be different size\n\n输入框尺寸\n\ndefault: medium\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/status": { "type": "String", @@ -3188,15 +3442,15 @@ }, "t-input/suffix": { "type": "String|TNode", - "description": "后置图标前的后置内容\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "suffix content before suffixIcon\n\n后置图标前的后置内容\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/suffix-icon": { "type": "TNode", - "description": "组件后置图标\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "suffix icon of input\n\n组件后置图标\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/tips": { "type": "String|TNode", - "description": "输入框下方提示文本，会根据不同的 `status` 呈现不同的样式\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "tips on the bottom of input, different `status` can make tips to be different color\n\n输入框下方提示文本，会根据不同的 `status` 呈现不同的样式\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/type": { "type": "String", @@ -3210,11 +3464,11 @@ "submit", "hidden" ], - "description": "输入框类型\n\ndefault: text\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "type attribute of input element. if you are using `type=number`, `InputNumber` Component might be better\n\n输入框类型。`type=number` 仅支持最基础的数字输入功能，更多功能建议使用 `InputNumber` 组件\n\ndefault: text\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/value": { "type": "String|Number", - "description": "输入框的值\n\ndefault: ''\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" + "description": "input value\n\n输入框的值\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-props)" }, "t-input/blur": { "type": "event", @@ -3222,7 +3476,7 @@ }, "t-input/change": { "type": "event", - "description": "输入框值发生变化时触发。`trigger=initial` 表示传入的数据不符合预期，组件自动处理后触发 change 告知父组件。如：初始值长度超过 `maxlength` 限制\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-events)" + "description": "trigger on input value changed\n\n输入框值发生变化时触发。参数 `trigger=initial` 表示传入的数据不符合预期，组件自动处理后触发 change 告知父组件。如：初始值长度超过 `maxlength` 限制\n\n[docs](https://tdesign.tencent.com/vue/components/input?tab=api#input-events)" }, "t-input/clear": { "type": "event", @@ -3445,6 +3699,10 @@ "type": "Boolean", "description": "make link to be disabled\n\n禁用链接\n\n[docs](https://tdesign.tencent.com/vue/components/link?tab=api#link-props)" }, + "t-link/download": { + "type": "String|Boolean", + "description": "Causes the browser to treat the linked URL as a download\n\n使得浏览器将链接的 URL 视为可下载资源\n\n[docs](https://tdesign.tencent.com/vue/components/link?tab=api#link-props)" + }, "t-link/hover": { "type": "String", "options": [ @@ -3716,7 +3974,7 @@ "_parent", "_top" ], - "description": "链接或路由跳转方式\n\n[docs](https://tdesign.tencent.com/vue/components/menu-item?tab=api#menuitem-props)" + "description": "链接或路由跳转方式\n\ndefault: _self\n\n[docs](https://tdesign.tencent.com/vue/components/menu-item?tab=api#menuitem-props)" }, "t-menu-item/to": { "type": "String|Object", @@ -3985,6 +4243,18 @@ "type": "event", "description": "按钮点击事件回调\n\n[docs](https://tdesign.tencent.com/vue/components/pagination-mini?tab=api#paginationmini-events)" }, + "t-paragraph/content": { + "type": "String|TNode", + "description": "content of paragraph\n\n段落内容\n\n[docs](https://tdesign.tencent.com/vue/components/paragraph?tab=api#paragraph-props)" + }, + "t-paragraph/default": { + "type": "String|TNode", + "description": "default slot of paragraph\n\n段落内容\n\n[docs](https://tdesign.tencent.com/vue/components/paragraph?tab=api#paragraph-props)" + }, + "t-paragraph/ellipsis": { + "type": "Boolean|Object", + "description": "add ellipsis style\n\n是否省略展示，可通过配置参数自定义省略操作的具体功能和样式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/paragraph?tab=api#paragraph-props)" + }, "t-popconfirm/cancel-btn": { "type": "String|Object|TNode", "description": "取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件\n\ndefault: ''\n\n[docs](https://tdesign.tencent.com/vue/components/popconfirm?tab=api#popconfirm-props)" @@ -4060,10 +4330,6 @@ "type": "String|Function", "description": "制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body\n\ndefault: 'body'\n\n[docs](https://tdesign.tencent.com/vue/components/popup?tab=api#popup-props)" }, - "t-popup/close-btn": { - "type": "Boolean|TNode", - "description": "是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮\n\n[docs](https://tdesign.tencent.com/vue/components/popup?tab=api#popup-props)" - }, "t-popup/content": { "type": "String|TNode", "description": "浮层里面的内容\n\n[docs](https://tdesign.tencent.com/vue/components/popup?tab=api#popup-props)" @@ -4139,6 +4405,10 @@ "type": "Number", "description": "组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500\n\n[docs](https://tdesign.tencent.com/vue/components/popup?tab=api#popup-props)" }, + "t-popup/overlay-click": { + "type": "event", + "description": "trigger on popup content click\n\n内容面板点击时触发\n\n[docs](https://tdesign.tencent.com/vue/components/popup?tab=api#popup-events)" + }, "t-popup/scroll": { "type": "event", "description": "下拉选项滚动事件\n\n[docs](https://tdesign.tencent.com/vue/components/popup?tab=api#popup-events)" @@ -4307,6 +4577,30 @@ "type": "Boolean", "description": "行选中功能，是否在分页时保留上一页选中结果不清空，本地数据分页场景下，会全选所有页数据。值为 `false` 则表示全部选中操作停留在当前页，不跨分页；本地数据分页场景下，全选仅选中当前页\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props)" }, + "t-primary-table/row-selection-allow-uncheck": { + "type": "Boolean", + "description": "allow to uncheck selection in table with single row selection\n\n行选中单选场景，是否允许取消选中\n\n[docs](https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props)" + }, + "t-table/row-selection-allow-uncheck": { + "type": "Boolean", + "description": "allow to uncheck selection in table with single row selection\n\n行选中单选场景，是否允许取消选中\n\n[docs](https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props)" + }, + "t-primary-table/row-selection-type": { + "type": "String", + "options": [ + "single", + "multiple" + ], + "description": "single row selection, or multiple row selection\n\n行选中类型，单选或多选。效果和 `columns` 中配置的 `{ colKey: 'row-select', type: 'single' }` 一样\n\n[docs](https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props)" + }, + "t-table/row-selection-type": { + "type": "String", + "options": [ + "single", + "multiple" + ], + "description": "single row selection, or multiple row selection\n\n行选中类型，单选或多选。效果和 `columns` 中配置的 `{ colKey: 'row-select', type: 'single' }` 一样\n\n[docs](https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props)" + }, "t-primary-table/select-on-row-click": { "type": "Boolean", "description": "select row data on row click\n\n是否在点击整行时选中\n\n[docs](https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props)" @@ -4317,11 +4611,11 @@ }, "t-primary-table/selected-row-keys": { "type": "Array", - "description": "selected row keys, row key is from data[rowKey]\n\n选中行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props)" + "description": "selected row keys, row key is from data[rowKey]\n\n选中行。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props)" }, "t-table/selected-row-keys": { "type": "Array", - "description": "selected row keys, row key is from data[rowKey]\n\n选中行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props)" + "description": "selected row keys, row key is from data[rowKey]\n\n选中行。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props)" }, "t-primary-table/show-sort-column-bg-color": { "type": "Boolean", @@ -4554,6 +4848,14 @@ "type": "String", "description": "HTML 元素原生属性\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-props)" }, + "t-radio/readonly": { + "type": "Boolean", + "description": "只读状态\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-props)" + }, + "t-radio-button/readonly": { + "type": "Boolean", + "description": "只读状态\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-props)" + }, "t-radio/value": { "type": "String|Number|Boolean", "description": "单选按钮的值\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-props)" @@ -4572,11 +4874,11 @@ }, "t-radio/click": { "type": "event", - "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events)" + "description": "trigger on click\n\n点击时出发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events)" }, "t-radio-button/click": { "type": "event", - "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events)" + "description": "trigger on click\n\n点击时出发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events)" }, "t-radio-group/allow-uncheck": { "type": "Boolean", @@ -4845,7 +5147,7 @@ }, "t-row/gutter": { "type": "Number|Object|Array", - "description": "栅格间隔，示例：`{ xs: 8, sm: 16, md: 24}`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]\n\ndefault: 0\n\n[docs](https://tdesign.tencent.com/vue/components/row?tab=api#row-props)" + "description": "栅格间隔，示例：`{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]\n\ndefault: 0\n\n[docs](https://tdesign.tencent.com/vue/components/row?tab=api#row-props)" }, "t-row/justify": { "type": "String", @@ -4980,7 +5282,7 @@ }, "t-select/collapsed-items": { "type": "TNode", - "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量\n\n[docs](https://tdesign.tencent.com/vue/components/select?tab=api#select-props)" + "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签\n\n[docs](https://tdesign.tencent.com/vue/components/select?tab=api#select-props)" }, "t-select/creatable": { "type": "Boolean", @@ -5012,7 +5314,7 @@ }, "t-select/keys": { "type": "Object", - "description": "用来定义 value / label 在 `options` 中对应的字段别名\n\n[docs](https://tdesign.tencent.com/vue/components/select?tab=api#select-props)" + "description": "alias option field\n\n用来定义 value / label / disabled 在 `options` 中对应的字段别名\n\n[docs](https://tdesign.tencent.com/vue/components/select?tab=api#select-props)" }, "t-select/label": { "type": "String|TNode", @@ -5042,6 +5344,10 @@ "type": "Array", "description": "数据化配置选项内容\n\n[docs](https://tdesign.tencent.com/vue/components/select?tab=api#select-props)" }, + "t-select/options-layout": { + "type": "String", + "description": "layout of options in popup\n\n下拉选项布局方式，有纵向排列和横向排列两种，默认纵向排列\n\ndefault: vertical\n\n[docs](https://tdesign.tencent.com/vue/components/select?tab=api#select-props)" + }, "t-select/panel-bottom-content": { "type": "String|TNode", "description": "面板内的底部内容\n\n[docs](https://tdesign.tencent.com/vue/components/select?tab=api#select-props)" @@ -5440,6 +5746,10 @@ "type": "event", "description": "滑块值变化时触发\n\n[docs](https://tdesign.tencent.com/vue/components/slider?tab=api#slider-events)" }, + "t-slider/change-end": { + "type": "event", + "description": "triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider\n\n松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用\n\n[docs](https://tdesign.tencent.com/vue/components/slider?tab=api#slider-events)" + }, "t-space/align": { "type": "String", "options": [ @@ -5861,6 +6171,10 @@ "type": "String|TNode", "description": "选项卡名称，可自定义选项卡导航内容\n\n[docs](https://tdesign.tencent.com/vue/components/tab-panel?tab=api#tabpanel-props)" }, + "t-tab-panel/lazy": { + "type": "Boolean", + "description": "Enable tab lazy loading\n\n是否启用选项卡懒加载\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/tab-panel?tab=api#tabpanel-props)" + }, "t-tab-panel/panel": { "type": "String|TNode", "description": "用于自定义选项卡面板内容\n\n[docs](https://tdesign.tencent.com/vue/components/tab-panel?tab=api#tabpanel-props)" @@ -6062,6 +6376,10 @@ "type": "String", "description": "placeholder description\n\n占位符\n\ndefault: undefined\n\n[docs](https://tdesign.tencent.com/vue/components/tag-input?tab=api#taginput-props)" }, + "t-tag-input/prefix-icon": { + "type": "TNode", + "description": "组件前置图标\n\n[docs](https://tdesign.tencent.com/vue/components/tag-input?tab=api#taginput-props)" + }, "t-tag-input/readonly": { "type": "Boolean", "description": "只读状态，值为真会隐藏标签移除按钮和输入框\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/tag-input?tab=api#taginput-props)" @@ -6157,6 +6475,65 @@ "type": "event", "description": "移除单个标签时触发\n\n[docs](https://tdesign.tencent.com/vue/components/tag-input?tab=api#taginput-events)" }, + "t-text/code": { + "type": "Boolean", + "description": "add code style\n\n是否添加代码样式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/content": { + "type": "String|TNode", + "description": "content of text\n\n文本内容\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/copyable": { + "type": "Boolean|Object", + "description": "add copyable style\n\n是否可复制，可通过配置参数自定义复制操作的具体功能和样式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/default": { + "type": "String|TNode", + "description": "default slot of text\n\n文本内容\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/delete": { + "type": "Boolean", + "description": "add delete line style\n\n是否添加删除线样式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/disabled": { + "type": "Boolean", + "description": "add disabled style\n\n是否添加不可用样式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/ellipsis": { + "type": "Boolean|Object", + "description": "add ellipsis style\n\n是否省略展示，可通过配置参数自定义省略操作的具体功能和样式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/italic": { + "type": "Boolean", + "description": "add italic style\n\n文本是否为斜体\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/keyboard": { + "type": "Boolean", + "description": "add keyboard style\n\n是否添加键盘样式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/mark": { + "type": "String|Boolean", + "description": "add mark style\n\n是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/strong": { + "type": "Boolean", + "description": "add bold style\n\n文本是否加粗\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/theme": { + "type": "String", + "options": [ + "primary", + "secondary", + "success", + "warning", + "error" + ], + "description": "theme of text\n\n主题\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, + "t-text/underline": { + "type": "Boolean", + "description": "add underline style\n\n是否添加下划线样式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/text?tab=api#text-props)" + }, "t-textarea/allow-input-over-max": { "type": "Boolean", "description": "超出maxlength或maxcharacter之后是否还允许输入\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/textarea?tab=api#textarea-props)" @@ -6182,7 +6559,7 @@ "description": "用户最多可以输入的字符个数，一个中文汉字表示两个字符长度\n\n[docs](https://tdesign.tencent.com/vue/components/textarea?tab=api#textarea-props)" }, "t-textarea/maxlength": { - "type": "Number", + "type": "String|Number", "description": "用户最多可以输入的字符个数\n\n[docs](https://tdesign.tencent.com/vue/components/textarea?tab=api#textarea-props)" }, "t-textarea/name": { @@ -6249,7 +6626,7 @@ }, "t-time-picker/disable-time": { "type": "Function", - "description": "禁用时间项\n\n[docs](https://tdesign.tencent.com/vue/components/time-picker?tab=api#timepicker-props)" + "description": "disable time config function\n\n禁用时间项的配置函数\n\n[docs](https://tdesign.tencent.com/vue/components/time-picker?tab=api#timepicker-props)" }, "t-time-picker/disabled": { "type": "Boolean", @@ -6498,6 +6875,34 @@ "type": "Boolean", "description": "Whether it is in the loading state\n\n是否处在加载状态\n\n[docs](https://tdesign.tencent.com/vue/components/timeline-item?tab=api#timelineitem-props)" }, + "t-timeline-item/click": { + "type": "event", + "description": "trigger on click\n\n点击时触发\n\n[docs](https://tdesign.tencent.com/vue/components/timeline-item?tab=api#timelineitem-events)" + }, + "t-title/content": { + "type": "String|TNode", + "description": "content of title\n\n段落内容\n\n[docs](https://tdesign.tencent.com/vue/components/title?tab=api#title-props)" + }, + "t-title/default": { + "type": "String|TNode", + "description": "default slot of title\n\n标题内容\n\n[docs](https://tdesign.tencent.com/vue/components/title?tab=api#title-props)" + }, + "t-title/ellipsis": { + "type": "Boolean|Object", + "description": "add ellipsis style\n\n是否省略展示，可通过配置参数自定义省略操作的具体功能和样式\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/title?tab=api#title-props)" + }, + "t-title/level": { + "type": "String", + "options": [ + "h1", + "h2", + "h3", + "h4", + "h5", + "h6" + ], + "description": "level of title\n\n标题等级\n\ndefault: h1\n\n[docs](https://tdesign.tencent.com/vue/components/title?tab=api#title-props)" + }, "t-tooltip/delay": { "type": "Number|Array", "description": "delay to show or hide popover\n\n延时显示或隐藏浮层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。直接透传到 Popup 组件。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]\n\n[docs](https://tdesign.tencent.com/vue/components/tooltip?tab=api#tooltip-props)" @@ -6598,7 +7003,7 @@ }, "t-transfer/keys": { "type": "Object", - "description": "用来定义选项文本和选项值字段，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段\n\n[docs](https://tdesign.tencent.com/vue/components/transfer?tab=api#transfer-props)" + "description": "alias field name in data\n\n用来定义 value / label / disabled 在 `data` 中对应的字段别名，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段\n\n[docs](https://tdesign.tencent.com/vue/components/transfer?tab=api#transfer-props)" }, "t-transfer/operation": { "type": "Array|TNode", @@ -6616,6 +7021,10 @@ "type": "Boolean|Array", "description": "是否显示全选，值类型为数组则表示分别控制源列表和目标列表\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/transfer?tab=api#transfer-props)" }, + "t-transfer/target-draggable": { + "type": "Boolean", + "description": "allowed to sort the target list by dragging\n\n是否允许通过拖拽对目标列表进行排序\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/transfer?tab=api#transfer-props)" + }, "t-transfer/target-sort": { "type": "String", "options": [ @@ -6659,7 +7068,7 @@ }, "t-tree/activable": { "type": "Boolean", - "description": "节点是否可高亮\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" + "description": "make nodes can be highlight\n\n节点是否可高亮\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" }, "t-tree/active-multiple": { "type": "Boolean", @@ -6699,7 +7108,7 @@ }, "t-tree/draggable": { "type": "Boolean", - "description": "[开发中]节点是否可拖拽\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" + "description": "节点是否可拖拽\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" }, "t-tree/empty": { "type": "String|TNode", @@ -6735,7 +7144,7 @@ }, "t-tree/height": { "type": "String|Number", - "description": "table height\n\n表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" + "description": "The height of tree. Scrollbar will appear after the content is overflow. Examples: 100, '30%', '300'. The value should be a number and will automatically be converted to a pixel value. If the tree height is not fixed, it is recommended to use `maxHeight`.\n\n树的高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定树的高度，建议使用 `maxHeight`\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" }, "t-tree/hover": { "type": "Boolean", @@ -6747,7 +7156,7 @@ }, "t-tree/keys": { "type": "Object", - "description": "用来定义 `value / label / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }`\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" + "description": "alias field name in data\n\n用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }`。其中，disabled 待开发。\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" }, "t-tree/label": { "type": "String|Boolean|TNode", @@ -6767,7 +7176,7 @@ }, "t-tree/max-height": { "type": "String|Number", - "description": "table max height\n\n表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" + "description": "The max height of tree. Scrollbar will appear after the content is overflow. Examples: 100, '30%', '300'. \n\n树的最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" }, "t-tree/operations": { "type": "TNode", @@ -6783,7 +7192,7 @@ }, "t-tree/value": { "type": "Array", - "description": "选中值（组件为可选状态时）\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" + "description": "选中值，组件为可选状态时有效\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props)" }, "t-tree/value-mode": { "type": "String", @@ -6880,7 +7289,7 @@ }, "t-tree-select/keys": { "type": "Object", - "description": "用来定义 `value / label / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }`\n\n[docs](https://tdesign.tencent.com/vue/components/tree-select?tab=api#treeselect-props)" + "description": "alias filed name in data\n\n用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`\n\n[docs](https://tdesign.tencent.com/vue/components/tree-select?tab=api#treeselect-props)" }, "t-tree-select/label": { "type": "String|TNode", @@ -7039,31 +7448,35 @@ }, "t-upload/accept": { "type": "String", - "description": "接受上传的文件类型，[查看 W3C示例](https://www.w3schools.com/tags/att_input_accept.asp)，[查看 MDN 示例](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file)\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "File types that can be accepted. [W3C](https://www.w3schools.com/tags/att_input_accept.asp)，[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file)\n\n接受上传的文件类型，[查看 W3C示例](https://www.w3schools.com/tags/att_input_accept.asp)，[查看 MDN 示例](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file)\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/action": { "type": "String", - "description": "upload action url\n\n上传接口。设接口响应数据为字段 `response`，那么 `response.error` 存在时会判断此次上传失败，并显示错误文本信息；`response.url` 会作为文件上传成功后的地址，并使用该地址显示图片或文件\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "Uploading URL\n\n上传接口。设接口响应数据为字段 `response`，那么 `response.error` 存在时会判断此次上传失败，并显示错误文本信息；`response.url` 会作为文件上传成功后的地址，并使用该地址显示图片或文件\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/allow-upload-duplicate-file": { "type": "Boolean", - "description": "是否允许重复上传相同文件名的文件\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "allow to upload duplicate name files\n\n是否允许重复上传相同文件名的文件\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/auto-upload": { "type": "Boolean", - "description": "是否在选择文件后自动发起请求上传文件\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "post upload request automatically after files being selected\n\n是否在选择文件后自动发起请求上传文件\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/before-all-files-upload": { "type": "Function", - "description": "before all files upload, return false can stop uploading file\n\n如果是自动上传模式 `autoUpload=true`，表示全部文件上传之前的钩子函数，函数参数为上传的文件，函数返回值决定是否继续上传，若返回值为 `false` 则终止上传。
如果是非自动上传模式 `autoUpload=false`，则函数返回值为 `false` 时表示不触发文件变化\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "before all files upload, return false can stop uploading file\n\n如果是自动上传模式 `autoUpload=true`，表示全部文件上传之前的钩子函数，函数参数为上传的文件，函数返回值决定是否继续上传，若返回值为 `false` 则终止上传。
如果是非自动上传模式 `autoUpload=false`，则函数返回值为 `false` 时表示本次选中的文件不会加入到文件列表中，即不触发 `onChange` 事件\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/before-upload": { "type": "Function", - "description": "如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。
如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "stop one of files to upload\n\n如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。
如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + }, + "t-upload/cancel-upload-button": { + "type": "Object|TNode", + "description": "cancel upload button props, which showed on `autoUpload=false` and multiple files/images upload\n\n批量文件/图片上传，`autoUpload=false` 场景下，透传“取消上传”按钮属性\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/data": { "type": "Object", - "description": "上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: \"custom-file-name.txt\"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "extra request data of uploading. `formatRequest` can redefine all request data\n\n上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: \"custom-file-name.txt\"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/default": { "type": "String|TNode", @@ -7071,7 +7484,7 @@ }, "t-upload/disabled": { "type": "Boolean", - "description": "是否禁用\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "make upload to be disabled\n\n是否禁用\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/drag-content": { "type": "String|TNode", @@ -7083,7 +7496,7 @@ }, "t-upload/file-list-display": { "type": "TNode", - "description": "用于完全自定义文件列表内容\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "used to render file list UI\n\n用于完全自定义文件列表界面内容(UI)，单文件和多文件均有效\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/files": { "type": "Array", @@ -7091,19 +7504,23 @@ }, "t-upload/format": { "type": "Function", - "description": "转换文件 `UploadFile` 的数据结构，可新增或修改 `UploadFile` 的属性，注意不能删除 `UploadFile` 属性。`action` 存在时有效\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "to redefine `UploadFile` data structure\n\n转换文件 `UploadFile` 的数据结构，可新增或修改 `UploadFile` 的属性，注意不能删除 `UploadFile` 属性。`action` 存在时有效\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/format-request": { "type": "Function", - "description": "用于新增或修改文件上传请求参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`；
一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。
⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。
可以使用 `name` 定义 `file` 字段的别名，也可以使用 `formatRequest` 自定义任意字段\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "redefine request data\n\n用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`。
一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。
⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。
可以使用 `name` 定义 `file` 字段的别名。
也可以使用 `formatRequest` 自定义任意字段，如添加一个字段 `fileList` ，存储文件数组\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/format-response": { "type": "Function", - "description": "用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。
此函数的返回值 `error` 或 `response.error` 会作为错误文本提醒，如果存在会判定为本次上传失败。
此函数的返回值 `url` 或 `response.url` 会作为上传成功后的链接\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "redefine response data structure\n\n用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。
示例返回值：`{ error, url, status, files }`
此函数的返回值 `error` 会作为错误文本提醒，表示上传失败的原因，如果存在会判定为本次上传失败。
此函数的返回值 `url` 会作为单个文件上传成功后的链接。
`files` 表示一个请求同时上传多个文件后的文件列表\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/headers": { "type": "Object", - "description": "设置上传的请求头部，`action` 存在时有效\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "HTTP Request Header\n\n设置上传的请求头部，`action` 存在时有效\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + }, + "t-upload/image-viewer-props": { + "type": "Object", + "description": "ImageViewer Component Props\n\n透传图片预览组件全部属性\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/input-attributes": { "type": "Object", @@ -7111,7 +7528,7 @@ }, "t-upload/is-batch-upload": { "type": "Boolean", - "description": "多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "make all files to be a whole package, files can only be replaced or deleted together, can not add more files\n\n多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/locale": { "type": "Object", @@ -7119,7 +7536,7 @@ }, "t-upload/max": { "type": "Number", - "description": "用于控制文件上传数量，值为 0 则不限制\n\ndefault: 0\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "max count of files limit\n\n用于控制文件上传数量，值为 0 则不限制。注意，单文件上传场景，请勿设置 `max` 属性\n\ndefault: 0\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/method": { "type": "String", @@ -7135,35 +7552,43 @@ "option", "patch" ], - "description": "HTTP 请求类型\n\ndefault: POST\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "HTTP request method\n\nHTTP 请求类型\n\ndefault: POST\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/mock-progress-duration": { "type": "Number", - "description": "模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "mock progress duration time. more large files more duration time\n\n模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/multiple": { "type": "Boolean", - "description": "支持多文件上传\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "multiple files uploading\n\n支持多文件上传\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/name": { "type": "String", - "description": "文件上传时的名称\n\ndefault: file\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "field name of files in upload request data\n\n文件上传时的名称\n\ndefault: file\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/placeholder": { "type": "String", - "description": "占位符\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "placeholder\n\n占位符\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/request-method": { "type": "Function", - "description": "自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；
`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。
示例一：`{ status: 'fail', error: '上传失败', response }`。
示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。
示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "custom upload request method\n\n自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；
`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。
示例一：`{ status: 'fail', error: '上传失败', response }`。
示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。
示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + }, + "t-upload/show-image-file-name": { + "type": "Boolean", + "description": "show image's name\n\n是否显示图片的文件名称\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + }, + "t-upload/show-thumbnail": { + "type": "Boolean", + "description": "show thumbnail before file name, only works on `theme=file-flow` \n\n是否在文件列表中显示缩略图，`theme=file-flow` 时有效\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/show-upload-progress": { "type": "Boolean", - "description": "是否显示上传进度\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "show upload progress nodes\n\n是否显示上传进度\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/size-limit": { "type": "Number|Object", - "description": "图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "files size limit\n\n图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/status": { "type": "String", @@ -7185,7 +7610,7 @@ "image", "image-flow" ], - "description": "组件风格。custom 表示完全自定义风格；file 表示默认文件上传风格；file-input 表示输入框形式的文件上传；file-flow 表示文件批量上传；image 表示默认图片上传风格；image-flow 表示图片批量上传\n\ndefault: file\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "different upload UI styles\n\n组件风格。custom 表示完全自定义风格；file 表示默认文件上传风格；file-input 表示输入框形式的文件上传；file-flow 表示文件批量上传；image 表示默认图片上传风格；image-flow 表示图片批量上传\n\ndefault: file\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/tips": { "type": "String|TNode", @@ -7193,51 +7618,55 @@ }, "t-upload/trigger": { "type": "TNode", - "description": "触发上传的元素，`files` 指本次显示的全部文件\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "trigger elements UI\n\n触发上传的元素，`files` 指本次显示的全部文件\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/trigger-button-props": { "type": "Object", - "description": "透传选择按钮全部属性\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "trigger button props, it can be used to change color/size/href/... of the trigger button\n\n透传选择按钮全部属性\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/upload-all-files-in-one-request": { "type": "Boolean", - "description": "是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "uploading all files in one request\n\n是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + }, + "t-upload/upload-button": { + "type": "Object|TNode", + "description": "upload button props, which showed on `autoUpload=false` and multiple files/images upload\n\n批量文件/图片上传，`autoUpload=false` 场景下，透传“点击上传”按钮属性\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/upload-pasted-files": { "type": "Boolean", - "description": "allow to upload files in clipboard after pasting\n\n是否允许粘贴上传剪贴板中的文件\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "allow to upload files in clipboard after pasting\n\n是否允许粘贴上传剪贴板中的文件\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/use-mock-progress": { "type": "Boolean", - "description": "是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "use mock progress, instead of real progress\n\n是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。\n\ndefault: true\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/value": { "type": "Array", - "description": "file list, `UploadFile`\n\n已上传文件列表，同 `files`。TS 类型：`UploadFile`\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "file list\n\n已上传文件列表，同 `files`。TS 类型：`UploadFile`\n\ndefault: []\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/with-credentials": { "type": "Boolean", - "description": "上传请求时是否携带 cookie\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" + "description": "uploading request with cookie\n\n上传请求时是否携带 cookie\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props)" }, "t-upload/cancel-upload": { "type": "event", - "description": "点击「取消上传」时触发\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" + "description": "trigger on cancel button click\n\n点击「取消上传」时触发\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" }, "t-upload/change": { "type": "event", - "description": "已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" + "description": "trigger on uploaded files change\n\n已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" }, "t-upload/dragenter": { "type": "event", - "description": "进入拖拽区域时触发\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" + "description": "trigger on file dragged into drag elements\n\n进入拖拽区域时触发\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" }, "t-upload/dragleave": { "type": "event", - "description": "离开拖拽区域时触发\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" + "description": "trigger on file dragged leave drag elements\n\n离开拖拽区域时触发\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" }, "t-upload/drop": { "type": "event", - "description": "拖拽结束时触发\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" + "description": "trigger on file dropped\n\n拖拽结束时触发\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" }, "t-upload/fail": { "type": "event", @@ -7249,19 +7678,19 @@ }, "t-upload/one-file-success": { "type": "event", - "description": "单个文件上传成功后触发，在多文件场景下会触发多次。`context.file` 表示当前上传成功的单个文件，`context.response` 表示上传请求的返回数据\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" + "description": "trigger on file uploaded successfully\n\n单个文件上传成功后触发，在多文件场景下会触发多次。`context.file` 表示当前上传成功的单个文件，`context.response` 表示上传请求的返回数据\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" }, "t-upload/preview": { "type": "event", - "description": "点击图片预览时触发，文件没有预览\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" + "description": "trigger on preview elements click\n\n点击图片预览时触发，文件没有预览\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" }, "t-upload/progress": { "type": "event", - "description": "上传进度变化时触发，真实进度和模拟进度都会触发。
⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" + "description": "uploading request progress event\n\n上传进度变化时触发，真实进度和模拟进度都会触发。
⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" }, "t-upload/remove": { "type": "event", - "description": "移除文件时触发\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" + "description": "trigger on file removed\n\n移除文件时触发\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" }, "t-upload/select-change": { "type": "event", @@ -7269,7 +7698,7 @@ }, "t-upload/success": { "type": "event", - "description": "上传成功后触发。
`context.currentFiles` 表示当次请求上传的文件（无论成功或失败），`context.fileList` 表示上传成功后的文件，`context.response` 表示上传请求的返回数据。
`context.results` 表示单次选择全部文件上传成功后的响应结果，可以在这个字段存在时提醒用户上传成功或失败。
\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" + "description": "trigger on all files uploaded successfully\n\n上传成功后触发。
`context.currentFiles` 表示当次请求上传的文件（无论成功或失败），`context.fileList` 表示上传成功后的文件，`context.response` 表示上传请求的返回数据。
`context.results` 表示单次选择全部文件上传成功后的响应结果，可以在这个字段存在时提醒用户上传成功或失败。
\n\n[docs](https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events)" }, "t-upload/validate": { "type": "event", diff --git a/helper/tags.json b/helper/tags.json index 76ae35e54..7eb658f23 100644 --- a/helper/tags.json +++ b/helper/tags.json @@ -32,6 +32,7 @@ "bounds", "container", "cursor", + "get-current-anchor", "size", "target-offset", "change", @@ -151,6 +152,8 @@ }, "t-base-table": { "attributes": [ + "active-row-keys", + "active-row-type", "allow-resize-column-width", "attach", "bordered", @@ -159,6 +162,7 @@ "columns", "data", "disable-data-page", + "disable-space-inactive-row", "empty", "first-full-row", "fixed-rows", @@ -171,9 +175,12 @@ "height", "horizontal-scroll-affixed-bottom", "hover", + "keyboard-row-hover", "last-full-row", + "lazy-load", "loading", "loading-props", + "locale", "max-height", "pagination", "pagination-affixed-bottom", @@ -191,6 +198,8 @@ "table-layout", "top-content", "vertical-align", + "active-change", + "active-row-action", "cell-click", "column-resize-change", "page-change", @@ -229,6 +238,8 @@ "indeterminate-selected-row-keys", "multiple-sort", "reserve-selected-row-on-paginate", + "row-selection-allow-uncheck", + "row-selection-type", "select-on-row-click", "selected-row-keys", "show-sort-column-bg-color", @@ -273,7 +284,8 @@ "replace", "router", "target", - "to" + "to", + "click" ], "description": "BreadcrumbItem\n\n面包屑项\n\n[docs](https://tdesign.tencent.com/vue/components/breadcrumb-item)" }, @@ -339,6 +351,7 @@ "header-bordered", "hover-shadow", "loading", + "loading-props", "shadow", "size", "status", @@ -351,6 +364,7 @@ "t-cascader": { "attributes": [ "autofocus", + "borderless", "check-props", "check-strictly", "clearable", @@ -374,6 +388,7 @@ "placeholder", "popup-props", "popup-visible", + "prefix-icon", "readonly", "reserve-keyword", "select-input-props", @@ -401,15 +416,29 @@ "t-check-tag": { "attributes": [ "checked", + "checked-props", "content", "default", "disabled", "size", + "unchecked-props", + "value", "change", "click" ], "description": "CheckTag\n\n可选标签\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag)" }, + "t-check-tag-group": { + "attributes": [ + "checked-props", + "multiple", + "options", + "unchecked-props", + "value", + "change" + ], + "description": "CheckTagGroup\n\n可选标签组\n\n[docs](https://tdesign.tencent.com/vue/components/check-tag-group)" + }, "t-checkbox": { "attributes": [ "check-all", @@ -418,16 +447,19 @@ "disabled", "indeterminate", "label", + "lazy-load", "name", "readonly", + "title", "value", - "change", - "click" + "change" ], "description": "Checkbox\n\n多选框\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox)" }, "t-checkbox-group": { "attributes": [ + "disabled", + "lazy-load", "max", "name", "options", @@ -566,6 +598,7 @@ "t-date-range-picker": { "attributes": [ "allow-input", + "cancel-range-select-limit", "clearable", "default-time", "disable-date", @@ -613,22 +646,29 @@ ], "description": "DateRangePickerPanel\n\n日期范围选择器面板\n\n[docs](https://tdesign.tencent.com/vue/components/date-range-picker-panel)" }, - "t-descriptions-item": { + "t-description-item": { "attributes": [ + "align", + "content", + "default", "label", "span" ], - "description": "DescriptionsItem\n\n描述项\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions-item)" + "description": "DescriptionItem\n\n描述项\n\n[docs](https://tdesign.tencent.com/vue/components/description-item)" }, "t-descriptions": { "attributes": [ + "align", "bordered", "colon", - "columns", - "content-align", - "label-align", + "column", + "content-style", + "item-layout", + "items", + "label-style", "layout", - "size" + "size", + "title" ], "description": "Descriptions\n\n描述列表\n\n[docs](https://tdesign.tencent.com/vue/components/descriptions)" }, @@ -641,9 +681,11 @@ "close-on-esc-keydown", "close-on-overlay-click", "confirm-btn", + "confirm-loading", "confirm-on-enter", "default", "destroy-on-close", + "dialog-class-name", "draggable", "footer", "header", @@ -710,7 +752,8 @@ "close-btn-click", "confirm", "esc-keydown", - "overlay-click" + "overlay-click", + "size-drag-end" ], "description": "Drawer\n\n模态抽屉\n\n[docs](https://tdesign.tencent.com/vue/components/drawer)" }, @@ -723,6 +766,8 @@ "max-height", "min-column-width", "options", + "panel-bottom-content", + "panel-top-content", "placement", "popup-props", "trigger", @@ -743,12 +788,25 @@ ], "description": "DropdownItem\n\n下拉菜单选项\n\n[docs](https://tdesign.tencent.com/vue/components/dropdown-item)" }, + "t-empty": { + "attributes": [ + "action", + "description", + "image", + "image-style", + "title", + "type" + ], + "description": "Empty\n\n空状态\n\n[docs](https://tdesign.tencent.com/vue/components/empty)" + }, "t-enhanced-table": { "attributes": [ "before-drag-sort", + "expanded-tree-nodes", "tree", "tree-expand-and-fold-icon", "abnormal-drag-sort", + "expanded-tree-nodes-change", "tree-expand-change" ], "description": "EnhancedTable\n\n增强表格\n\n[docs](https://tdesign.tencent.com/vue/components/enhanced-table)" @@ -871,6 +929,7 @@ "attributes": [ "alt", "error", + "fallback", "fit", "gallery", "lazy", @@ -879,6 +938,7 @@ "overlay-trigger", "placeholder", "position", + "referrerpolicy", "shape", "src", "srcset", @@ -890,6 +950,7 @@ "t-image-viewer": { "attributes": [ "close-btn", + "close-on-esc-keydown", "close-on-overlay", "draggable", "image-scale", @@ -915,6 +976,7 @@ "auto-width", "autocomplete", "autofocus", + "borderless", "clearable", "disabled", "format", @@ -1011,6 +1073,7 @@ "content", "default", "disabled", + "download", "hover", "href", "prefix-icon", @@ -1030,6 +1093,7 @@ "header", "layout", "scroll", + "scroll", "size", "split", "stripe", @@ -1195,6 +1259,14 @@ ], "description": "PaginationMini\n\n迷你分页\n\n[docs](https://tdesign.tencent.com/vue/components/pagination-mini)" }, + "t-paragraph": { + "attributes": [ + "content", + "default", + "ellipsis" + ], + "description": "Paragraph\n\n段落\n\n[docs](https://tdesign.tencent.com/vue/components/paragraph)" + }, "t-popconfirm": { "attributes": [ "cancel-btn", @@ -1216,7 +1288,6 @@ "t-popup": { "attributes": [ "attach", - "close-btn", "content", "default", "delay", @@ -1234,6 +1305,7 @@ "trigger-element", "visible", "z-index", + "overlay-click", "scroll", "scroll-to-bottom", "visible-change" @@ -1262,6 +1334,8 @@ "indeterminate-selected-row-keys", "multiple-sort", "reserve-selected-row-on-paginate", + "row-selection-allow-uncheck", + "row-selection-type", "select-on-row-click", "selected-row-keys", "show-sort-column-bg-color", @@ -1307,6 +1381,7 @@ "disabled", "label", "name", + "readonly", "value", "change", "click" @@ -1321,6 +1396,7 @@ "disabled", "label", "name", + "readonly", "value", "change", "click" @@ -1464,6 +1540,7 @@ "min-collapsed-num", "multiple", "options", + "options-layout", "panel-bottom-content", "panel-top-content", "placeholder", @@ -1568,7 +1645,8 @@ "step", "tooltip-props", "value", - "change" + "change", + "change-end" ], "description": "Slider\n\n滑块\n\n[docs](https://tdesign.tencent.com/vue/components/slider)" }, @@ -1701,6 +1779,7 @@ "disabled", "draggable", "label", + "lazy", "panel", "removable", "value", @@ -1757,6 +1836,7 @@ "max", "min-collapsed-num", "placeholder", + "prefix-icon", "readonly", "size", "status", @@ -1782,6 +1862,24 @@ ], "description": "TagInput\n\n标签输入框\n\n[docs](https://tdesign.tencent.com/vue/components/tag-input)" }, + "t-text": { + "attributes": [ + "code", + "content", + "copyable", + "default", + "delete", + "disabled", + "ellipsis", + "italic", + "keyboard", + "mark", + "strong", + "theme", + "underline" + ], + "description": "Text\n\n文本\n\n[docs](https://tdesign.tencent.com/vue/components/text)" + }, "t-textarea": { "attributes": [ "allow-input-over-max", @@ -1875,10 +1973,20 @@ "dot-color", "label", "label-align", - "loading" + "loading", + "click" ], "description": "TimelineItem\n\n时间轴\n\n[docs](https://tdesign.tencent.com/vue/components/timeline-item)" }, + "t-title": { + "attributes": [ + "content", + "default", + "ellipsis", + "level" + ], + "description": "Title\n\n标题\n\n[docs](https://tdesign.tencent.com/vue/components/title)" + }, "t-tooltip": { "attributes": [ "delay", @@ -1915,6 +2023,7 @@ "pagination", "search", "show-check-all", + "target-draggable", "target-sort", "title", "transfer-item", @@ -2038,6 +2147,7 @@ "auto-upload", "before-all-files-upload", "before-upload", + "cancel-upload-button", "data", "default", "disabled", @@ -2049,6 +2159,7 @@ "format-request", "format-response", "headers", + "image-viewer-props", "input-attributes", "is-batch-upload", "locale", @@ -2059,6 +2170,8 @@ "name", "placeholder", "request-method", + "show-image-file-name", + "show-thumbnail", "show-upload-progress", "size-limit", "status", @@ -2067,6 +2180,7 @@ "trigger", "trigger-button-props", "upload-all-files-in-one-request", + "upload-button", "upload-pasted-files", "use-mock-progress", "value", diff --git a/helper/web-types.json b/helper/web-types.json index e5e5a1a5d..84b35dba4 100644 --- a/helper/web-types.json +++ b/helper/web-types.json @@ -45,7 +45,7 @@ }, { "name": "offset-bottom", - "description": " 距离容器顶部达到指定距离后触发固定", + "description": "When the distance from the bottom of the container reaches the specified distance, the trigger is fixed\n\n 距离容器底部达到指定距离后触发固定", "doc-url": "https://tdesign.tencent.com/vue/components/affix?tab=api#affix-props", "type": [ "Number" @@ -54,7 +54,7 @@ }, { "name": "offset-top", - "description": " 距离容器底部达到指定距离后触发固定", + "description": "When the distance from the top of the container reaches the specified distance, the trigger is fixed\n\n 距离容器顶部达到指定距离后触发固定", "doc-url": "https://tdesign.tencent.com/vue/components/affix?tab=api#affix-props", "type": [ "Number" @@ -280,6 +280,14 @@ "TNode" ] }, + { + "name": "get-current-anchor", + "description": "Custom Highlighted Anchor Points\n\n自定义高亮的锚点\t", + "doc-url": "https://tdesign.tencent.com/vue/components/anchor?tab=api#anchor-props", + "type": [ + "Function" + ] + }, { "name": "size", "description": "组件尺寸，small(120px)，medium(200px)，large(320px)", @@ -1247,6 +1255,23 @@ "description": "BaseTable\n\n基础表格", "doc-url": "https://tdesign.tencent.com/vue/components/base-table", "props": [ + { + "name": "active-row-keys", + "description": "keys of highlight rows, used to mock area selection behavior, just like macOS or windows area selection\n\n高亮行，支持鼠标键盘操作(Shift)连续高亮行，可用于处理行选中等批量操作，模拟操作系统区域选择行为", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "Array" + ], + "default": "[]" + }, + { + "name": "active-row-type", + "description": "make nodes can be highlight on clicked\n\n默认不会高亮点击行，`activeRowType=single` 表示鼠标点击仅允许同时高亮一行，Shift 键盘操作加鼠标操作依然可以高亮多行，因为这属于明显的区域选择行为。`activeRowType= multiple ` 表示允许鼠标点击同时高亮多行", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "String" + ] + }, { "name": "allow-resize-column-width", "description": "allow to resize column width\n\n是否允许调整列宽。请更为使用 `resizable`", @@ -1319,6 +1344,15 @@ ], "default": "false" }, + { + "name": "disable-space-inactive-row", + "description": "can not set row to be inactive with Space keydown\n\n默认重复按下 Space 键可取消当前行高亮，是否禁用取消", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "Boolean" + ], + "default": "undefined" + }, { "name": "empty", "description": "empty text or empty element\n\n空表格呈现样式，支持全局配置 `GlobalConfigProvider`", @@ -1427,6 +1461,15 @@ ], "default": "false" }, + { + "name": "keyboard-row-hover", + "description": "make table row to be hover by keydown ArrowUp/ArrowDown\n\n键盘操作行显示悬浮效果，一般用于键盘操作行选中、行展开、行高亮等功能", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "Boolean" + ], + "default": "true" + }, { "name": "last-full-row", "description": "尾行内容，横跨所有列", @@ -1436,6 +1479,15 @@ "TNode" ] }, + { + "name": "lazy-load", + "description": "load table content when it entering the visible area, all elements in table are not rendered before it become visible\n\n是否启用整个表格元素的懒加载，当页面滚动到可视区域后再渲染表格。注意和表格内部行滚动懒加载的区别，内部行滚动无论表格是否在可视区域都会默认渲染第一屏的行元素", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "loading", "description": "loading state table\n\n加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态", @@ -1454,6 +1506,14 @@ "Object" ] }, + { + "name": "locale", + "description": "table locale config\n\n语言配置", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "Object" + ] + }, { "name": "max-height", "description": "table max height\n\n表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px", @@ -1482,7 +1542,7 @@ }, { "name": "resizable", - "description": "allow to resize column width\n\n是否允许调整列宽。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。
默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化", + "description": "allow to resize column width, set `tableLayout=fixed` would be better\n\n是否允许调整列宽，设置 `tableLayout=fixed` 效果更友好，此时不允许通过 CSS 设置 `table`元素宽度，也不允许设置 `tableContentWidth`。一般不建议在列宽调整场景使用 `tableLayout: auto`。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。
默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化", "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", "type": [ "Boolean" @@ -1554,12 +1614,11 @@ }, { "name": "size", - "description": "表格尺寸", + "description": "table size, support `GlobalConfigProvider`, default value is `medium`\n\n表格尺寸，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `medium`", "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", "type": [ "String" ], - "default": "medium", "attribute-value": { "type": "enum" }, @@ -1594,7 +1653,7 @@ }, { "name": "table-layout", - "description": "table-layout css properties\n\n表格布局方式", + "description": "table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please\n\n表格布局方式，`
` 元素原生属性。[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。注意，在列宽调整下场景只能使用 `fixed` 模式", "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", "type": [ "String" @@ -1647,6 +1706,16 @@ ], "js": { "events": [ + { + "name": "active-change", + "description": "trigger on row active change\n\n高亮行发生变化时触发，泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据， `currentRowData` 表示当前操作行数据", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-events" + }, + { + "name": "active-row-action", + "description": "keyboard operation event actions. used to mock selection behavior, just like macOS or windows\n\n键盘操作事件。开启行高亮功能后，会自动开启键盘操作功能，如：通过键盘(Shift)或鼠标操作连续选中高亮行时触发，一般用于处理行选中等批量操作，模拟操作系统区域选择行为", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-events" + }, { "name": "cell-click", "description": "trigger on cell clicked\n\n单元格点击时触发", @@ -1795,6 +1864,23 @@ "description": "BaseTable\n\n基础表格", "doc-url": "https://tdesign.tencent.com/vue/components/base-table", "props": [ + { + "name": "active-row-keys", + "description": "keys of highlight rows, used to mock area selection behavior, just like macOS or windows area selection\n\n高亮行，支持鼠标键盘操作(Shift)连续高亮行，可用于处理行选中等批量操作，模拟操作系统区域选择行为", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "Array" + ], + "default": "[]" + }, + { + "name": "active-row-type", + "description": "make nodes can be highlight on clicked\n\n默认不会高亮点击行，`activeRowType=single` 表示鼠标点击仅允许同时高亮一行，Shift 键盘操作加鼠标操作依然可以高亮多行，因为这属于明显的区域选择行为。`activeRowType= multiple ` 表示允许鼠标点击同时高亮多行", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "String" + ] + }, { "name": "allow-resize-column-width", "description": "allow to resize column width\n\n是否允许调整列宽。请更为使用 `resizable`", @@ -1867,6 +1953,15 @@ ], "default": "false" }, + { + "name": "disable-space-inactive-row", + "description": "can not set row to be inactive with Space keydown\n\n默认重复按下 Space 键可取消当前行高亮，是否禁用取消", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "Boolean" + ], + "default": "undefined" + }, { "name": "empty", "description": "empty text or empty element\n\n空表格呈现样式，支持全局配置 `GlobalConfigProvider`", @@ -1975,6 +2070,15 @@ ], "default": "false" }, + { + "name": "keyboard-row-hover", + "description": "make table row to be hover by keydown ArrowUp/ArrowDown\n\n键盘操作行显示悬浮效果，一般用于键盘操作行选中、行展开、行高亮等功能", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "Boolean" + ], + "default": "true" + }, { "name": "last-full-row", "description": "尾行内容，横跨所有列", @@ -1984,6 +2088,15 @@ "TNode" ] }, + { + "name": "lazy-load", + "description": "load table content when it entering the visible area, all elements in table are not rendered before it become visible\n\n是否启用整个表格元素的懒加载，当页面滚动到可视区域后再渲染表格。注意和表格内部行滚动懒加载的区别，内部行滚动无论表格是否在可视区域都会默认渲染第一屏的行元素", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "loading", "description": "loading state table\n\n加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态", @@ -2002,6 +2115,14 @@ "Object" ] }, + { + "name": "locale", + "description": "table locale config\n\n语言配置", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", + "type": [ + "Object" + ] + }, { "name": "max-height", "description": "table max height\n\n表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px", @@ -2030,7 +2151,7 @@ }, { "name": "resizable", - "description": "allow to resize column width\n\n是否允许调整列宽。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。
默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化", + "description": "allow to resize column width, set `tableLayout=fixed` would be better\n\n是否允许调整列宽，设置 `tableLayout=fixed` 效果更友好，此时不允许通过 CSS 设置 `table`元素宽度，也不允许设置 `tableContentWidth`。一般不建议在列宽调整场景使用 `tableLayout: auto`。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。
默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化", "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", "type": [ "Boolean" @@ -2102,12 +2223,11 @@ }, { "name": "size", - "description": "表格尺寸", + "description": "table size, support `GlobalConfigProvider`, default value is `medium`\n\n表格尺寸，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `medium`", "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", "type": [ "String" ], - "default": "medium", "attribute-value": { "type": "enum" }, @@ -2142,7 +2262,7 @@ }, { "name": "table-layout", - "description": "table-layout css properties\n\n表格布局方式", + "description": "table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please\n\n表格布局方式，`
` 元素原生属性。[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。注意，在列宽调整下场景只能使用 `fixed` 模式", "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-props", "type": [ "String" @@ -2195,6 +2315,16 @@ ], "js": { "events": [ + { + "name": "active-change", + "description": "trigger on row active change\n\n高亮行发生变化时触发，泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据， `currentRowData` 表示当前操作行数据", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-events" + }, + { + "name": "active-row-action", + "description": "keyboard operation event actions. used to mock selection behavior, just like macOS or windows\n\n键盘操作事件。开启行高亮功能后，会自动开启键盘操作功能，如：通过键盘(Shift)或鼠标操作连续选中高亮行时触发，一般用于处理行选中等批量操作，模拟操作系统区域选择行为", + "doc-url": "https://tdesign.tencent.com/vue/components/base-table?tab=api#basetable-events" + }, { "name": "cell-click", "description": "trigger on cell clicked\n\n单元格点击时触发", @@ -2507,6 +2637,15 @@ ] } ], + "js": { + "events": [ + { + "name": "click", + "description": "trigger on click\n\n点击时触发", + "doc-url": "https://tdesign.tencent.com/vue/components/breadcrumb-item?tab=api#breadcrumbitem-events" + } + ] + }, "slots": [ { "name": "content", @@ -3170,7 +3309,7 @@ }, { "name": "loading", - "description": "加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容", + "description": "加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容", "doc-url": "https://tdesign.tencent.com/vue/components/card?tab=api#card-props", "type": [ "Boolean", @@ -3178,6 +3317,14 @@ ], "default": "false" }, + { + "name": "loading-props", + "description": "Loading Component Props\n\n透传加载组件(Loading)全部属性", + "doc-url": "https://tdesign.tencent.com/vue/components/card?tab=api#card-props", + "type": [ + "Object" + ] + }, { "name": "shadow", "description": "是否显示卡片阴影，默认不显示", @@ -3300,7 +3447,7 @@ }, { "name": "loading", - "description": "加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容类型和参数：boolean | TNode", + "description": "加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容类型和参数：boolean | TNode", "doc-url": "https://tdesign.tencent.com/vue/components/card?tab=api#card-props" }, { @@ -3331,6 +3478,15 @@ "Boolean" ] }, + { + "name": "borderless", + "description": "无边框模式", + "doc-url": "https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "check-props", "description": "参考 checkbox 组件 API", @@ -3409,7 +3565,7 @@ }, { "name": "keys", - "description": "用来定义 value / label / children 在 `options` 中对应的字段别名", + "description": "用来定义 value / label / children / disabled 在 `options` 中对应的字段别名", "doc-url": "https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props", "type": [ "Object" @@ -3528,6 +3684,14 @@ "Boolean" ] }, + { + "name": "prefix-icon", + "description": "组件前置图标", + "doc-url": "https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props", + "type": [ + "TNode" + ] + }, { "name": "readonly", "description": "只读状态，值为真会隐藏输入框，且无法打开下拉框", @@ -3687,7 +3851,7 @@ }, { "name": "value-display", - "description": "`MouseEvent`\n\n【开发中】自定义选中项呈现的内容", + "description": "`MouseEvent`\n\n自定义选中项呈现的内容", "doc-url": "https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props", "type": [ "String", @@ -3803,6 +3967,16 @@ "description": "customize one option\n\n自定义单个级联选项类型和参数：TNode<{ item: CascaderOption; index: number }>", "doc-url": "https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props" }, + { + "name": "prefixIcon", + "description": "组件前置图标", + "doc-url": "https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props" + }, + { + "name": "prefix-icon", + "description": "组件前置图标", + "doc-url": "https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props" + }, { "name": "suffix", "description": "后置图标前的后置内容", @@ -3825,12 +3999,12 @@ }, { "name": "valueDisplay", - "description": "`MouseEvent`\n\n【开发中】自定义选中项呈现的内容类型和参数：string | TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue }>", + "description": "`MouseEvent`\n\n自定义选中项呈现的内容类型和参数：string | TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue; selectedOptions: CascaderOption[] }>", "doc-url": "https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props" }, { "name": "value-display", - "description": "`MouseEvent`\n\n【开发中】自定义选中项呈现的内容类型和参数：string | TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue }>", + "description": "`MouseEvent`\n\n自定义选中项呈现的内容类型和参数：string | TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue; selectedOptions: CascaderOption[] }>", "doc-url": "https://tdesign.tencent.com/vue/components/cascader?tab=api#cascader-props" } ] @@ -3851,6 +4025,14 @@ "Boolean" ] }, + { + "name": "checked-props", + "description": "used to set checked tag props\n\n透传标签选中态属性", + "doc-url": "https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-props", + "type": [ + "Object" + ] + }, { "name": "content", "description": "组件子元素；传入数组时：[选中内容，非选中内容]", @@ -3902,6 +4084,23 @@ "name": "large" } ] + }, + { + "name": "unchecked-props", + "description": "used to set unchecked tag props\n\n透传标签未选态属性", + "doc-url": "https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-props", + "type": [ + "Object" + ] + }, + { + "name": "value", + "description": "tag unique key\n\n标签唯一标识，一般用于标签组场景，单个可选择标签无需设置", + "doc-url": "https://tdesign.tencent.com/vue/components/check-tag?tab=api#checktag-props", + "type": [ + "String", + "Number" + ] } ], "js": { @@ -3931,6 +4130,68 @@ } ] }, + { + "name": "t-check-tag-group", + "source": { + "symbol": "CheckTagGroup" + }, + "description": "CheckTagGroup\n\n可选标签组", + "doc-url": "https://tdesign.tencent.com/vue/components/check-tag-group", + "props": [ + { + "name": "checked-props", + "description": "used to set checked tag props\n\n透传标签选中态属性", + "doc-url": "https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-props", + "type": [ + "Object" + ] + }, + { + "name": "multiple", + "description": "allow to select multiple tags\n\n是否支持选中多个标签", + "doc-url": "https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-props", + "type": [ + "Boolean" + ], + "default": "false" + }, + { + "name": "options", + "description": "tag list\n\n标签选项列表", + "doc-url": "https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-props", + "type": [ + "Array" + ] + }, + { + "name": "unchecked-props", + "description": "used to set unchecked tag props\n\n透传标签未选态属性", + "doc-url": "https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-props", + "type": [ + "Object" + ] + }, + { + "name": "value", + "description": "selected tag value list\n\n选中标签值", + "doc-url": "https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-props", + "type": [ + "Array" + ], + "default": "[]" + } + ], + "js": { + "events": [ + { + "name": "change", + "description": "", + "doc-url": "https://tdesign.tencent.com/vue/components/check-tag-group?tab=api#checktaggroup-events" + } + ] + }, + "slots": [] + }, { "name": "t-checkbox", "source": { @@ -3993,6 +4254,15 @@ "TNode" ] }, + { + "name": "lazy-load", + "description": "load checkbox content when it entering the visible area\n\n是否启用懒加载。数据量大时建议开启；加载复杂内容或大量图片时建议开启", + "doc-url": "https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "name", "description": "HTML 元素原生属性", @@ -4010,6 +4280,14 @@ ], "default": "false" }, + { + "name": "title", + "description": "html attribute\n\nHTML 原生属性", + "doc-url": "https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-props", + "type": [ + "String" + ] + }, { "name": "value", "description": "value of checkbox\n\n多选框的值", @@ -4027,11 +4305,6 @@ "name": "change", "description": "值变化时触发", "doc-url": "https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-events" - }, - { - "name": "click", - "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景", - "doc-url": "https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-events" } ] }, @@ -4056,6 +4329,24 @@ "description": "CheckboxGroup\n\n多选框组", "doc-url": "https://tdesign.tencent.com/vue/components/checkbox-group", "props": [ + { + "name": "disabled", + "description": "是否禁用组件，默认为 false。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled", + "doc-url": "https://tdesign.tencent.com/vue/components/checkbox-group?tab=api#checkboxgroup-props", + "type": [ + "Boolean" + ], + "default": "undefined" + }, + { + "name": "lazy-load", + "description": "load checkbox content when it entering the visible area\n\n是否启用懒加载。子组件 Checkbox 数据量大时建议开启；加载复杂内容或大量图片时建议开启", + "doc-url": "https://tdesign.tencent.com/vue/components/checkbox-group?tab=api#checkboxgroup-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "max", "description": "支持最多选中的数量", @@ -4239,7 +4530,7 @@ "props": [ { "name": "borderless", - "description": "是否为无边框模式", + "description": "无边框模式", "doc-url": "https://tdesign.tencent.com/vue/components/collapse?tab=api#collapse-props", "type": [ "Boolean" @@ -5215,6 +5506,15 @@ ], "default": "false" }, + { + "name": "cancel-range-select-limit", + "description": "The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted.\n\n默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。", + "doc-url": "https://tdesign.tencent.com/vue/components/date-range-picker?tab=api#daterangepicker-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "clearable", "description": "是否显示清除按钮", @@ -5671,26 +5971,66 @@ "slots": [] }, { - "name": "t-descriptions-item", + "name": "t-description-item", "source": { - "symbol": "DescriptionsItem" + "symbol": "DescriptionItem" }, - "description": "DescriptionsItem\n\n描述项", - "doc-url": "https://tdesign.tencent.com/vue/components/descriptions-item", + "description": "DescriptionItem\n\n描述项", + "doc-url": "https://tdesign.tencent.com/vue/components/description-item", "props": [ { - "name": "label", - "description": "label of description item\n\n描述项字段名", - "doc-url": "https://tdesign.tencent.com/vue/components/descriptions-item?tab=api#descriptionsitem-props", + "name": "align", + "description": "content align type\n\n内容垂直对齐方式，DescriptionItem.align 优先级高于 Descriptions.align", + "doc-url": "https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props", "type": [ - "String", - "TNode" - ] - }, + "String" + ], + "attribute-value": { + "type": "enum" + }, + "values": [ + { + "name": "top" + }, + { + "name": "middle" + }, + { + "name": "bottom" + } + ] + }, + { + "name": "content", + "description": "content of description item\n\n描述项内容", + "doc-url": "https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "default", + "description": "content of description item\n\n描述项内容，同 `content`", + "doc-url": "https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "label", + "description": "label of description item\n\n描述项标签", + "doc-url": "https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props", + "type": [ + "String", + "TNode" + ] + }, { "name": "span", "description": "width count\n\n占用的宽度数量", - "doc-url": "https://tdesign.tencent.com/vue/components/descriptions-item?tab=api#descriptionsitem-props", + "doc-url": "https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props", "type": [ "Number" ], @@ -5698,10 +6038,20 @@ } ], "slots": [ + { + "name": "content", + "description": "content of description item\n\n描述项内容", + "doc-url": "https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props" + }, + { + "name": "default", + "description": "content of description item\n\n描述项内容，同 `content`", + "doc-url": "https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props" + }, { "name": "label", - "description": "label of description item\n\n描述项字段名", - "doc-url": "https://tdesign.tencent.com/vue/components/descriptions-item?tab=api#descriptionsitem-props" + "description": "label of description item\n\n描述项标签", + "doc-url": "https://tdesign.tencent.com/vue/components/description-item?tab=api#descriptionitem-props" } ] }, @@ -5713,6 +6063,28 @@ "description": "Descriptions\n\n描述列表", "doc-url": "https://tdesign.tencent.com/vue/components/descriptions", "props": [ + { + "name": "align", + "description": "content align type\n\n内容垂直对齐方式，DescriptionItem.align 优先级高于 Descriptions.align", + "doc-url": "https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props", + "type": [ + "String" + ], + "attribute-value": { + "type": "enum" + }, + "values": [ + { + "name": "top" + }, + { + "name": "middle" + }, + { + "name": "bottom" + } + ] + }, { "name": "bordered", "description": "set description list with grey border\n\n是否带边框", @@ -5731,8 +6103,8 @@ ] }, { - "name": "columns", - "description": "count of DescriptionsItem in one row\n\n一行 DescriptionsItem 的数量", + "name": "column", + "description": "count of DescriptionItem in one row\n\n一行 `DescriptionItem` 的数量", "doc-url": "https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props", "type": [ "Number" @@ -5740,48 +6112,49 @@ "default": "2" }, { - "name": "content-align", - "description": "字段值内容的对齐方式：左对齐、居中对齐", + "name": "content-style", + "description": "style of description cotent\n\n自定义描述项内容的样式", "doc-url": "https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props", "type": [ - "String" - ], - "default": "left", - "attribute-value": { - "type": "enum" - }, - "values": [ - { - "name": "left" - }, - { - "name": "center" - } + "Object" ] }, { - "name": "label-align", - "description": "字段标签对齐方式：左对齐、右对齐、顶部对齐", + "name": "item-layout", + "description": "layout direction of description item\n\n描述项的排列方向", "doc-url": "https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props", "type": [ "String" ], - "default": "right", + "default": "horizontal", "attribute-value": { "type": "enum" }, "values": [ { - "name": "left" - }, - { - "name": "right" + "name": "horizontal" }, { - "name": "top" + "name": "vertical" } ] }, + { + "name": "items", + "description": "list of descriptions items\n\n描述项的列表", + "doc-url": "https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props", + "type": [ + "Array" + ] + }, + { + "name": "label-style", + "description": "style of description item\n\n自定义描述项标签的样式", + "doc-url": "https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props", + "type": [ + "Object" + ] + }, { "name": "layout", "description": "layout direction\n\n排列方向", @@ -5824,9 +6197,24 @@ "name": "large" } ] + }, + { + "name": "title", + "description": "title of descriptions\n\n描述列表的标题", + "doc-url": "https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props", + "type": [ + "String", + "TNode" + ] } ], - "slots": [] + "slots": [ + { + "name": "title", + "description": "title of descriptions\n\n描述列表的标题", + "doc-url": "https://tdesign.tencent.com/vue/components/descriptions?tab=api#descriptions-props" + } + ] }, { "name": "t-dialog", @@ -5877,7 +6265,7 @@ }, { "name": "close-on-esc-keydown", - "description": "按下 ESC 时是否触发对话框关闭事件", + "description": "trigger dialog close event on `ESC` keydown\n\n按下 ESC 时是否触发对话框关闭事件", "doc-url": "https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props", "type": [ "Boolean" @@ -5903,6 +6291,15 @@ "TNode" ] }, + { + "name": "confirm-loading", + "description": "confirm button loading status\n\n确认按钮加载状态", + "doc-url": "https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props", + "type": [ + "Boolean" + ], + "default": "undefined" + }, { "name": "confirm-on-enter", "description": "confirm on enter\n\n是否在按下回车键时，触发确认事件", @@ -5929,6 +6326,14 @@ ], "default": "false" }, + { + "name": "dialog-class-name", + "description": "弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second'", + "doc-url": "https://tdesign.tencent.com/vue/components/dialog?tab=api#dialog-props", + "type": [ + "String" + ] + }, { "name": "draggable", "description": "对话框是否可以拖拽（仅在非模态对话框时有效）", @@ -6359,7 +6764,7 @@ }, { "name": "close-on-esc-keydown", - "description": "按下 ESC 时是否触发抽屉关闭事件", + "description": "trigger drawer close event on `ESC` keydown\n\n按下 ESC 时是否触发抽屉关闭事件", "doc-url": "https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-props", "type": [ "Boolean" @@ -6508,10 +6913,11 @@ }, { "name": "size-draggable", - "description": "抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度", + "description": "allow resizing drawer width/height, set `max` or `min` to limit size\n\n抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度。`sizeDraggable.max` 和 `sizeDraggable.min` 用于控制拖拽尺寸大小限制", "doc-url": "https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-props", "type": [ - "Boolean" + "Boolean", + "Object" ], "default": "false" }, @@ -6564,6 +6970,11 @@ "name": "overlay-click", "description": "如果蒙层存在，点击蒙层时触发", "doc-url": "https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-events" + }, + { + "name": "size-drag-end", + "description": "trigger on size drag end\n\n抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度", + "doc-url": "https://tdesign.tencent.com/vue/components/drawer?tab=api#drawer-events" } ] }, @@ -6704,6 +7115,24 @@ ], "default": "[]" }, + { + "name": "panel-bottom-content", + "description": "bottom content of the dropdown panel\n\n面板内的底部内容", + "doc-url": "https://tdesign.tencent.com/vue/components/dropdown?tab=api#dropdown-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "panel-top-content", + "description": "top content of the dropdown panel\n\n面板内的顶部内容", + "doc-url": "https://tdesign.tencent.com/vue/components/dropdown?tab=api#dropdown-props", + "type": [ + "String", + "TNode" + ] + }, { "name": "placement", "description": "弹窗定位方式，可选值同 Popup 组件", @@ -6798,7 +7227,28 @@ } ] }, - "slots": [] + "slots": [ + { + "name": "panelBottomContent", + "description": "bottom content of the dropdown panel\n\n面板内的底部内容", + "doc-url": "https://tdesign.tencent.com/vue/components/dropdown?tab=api#dropdown-props" + }, + { + "name": "panel-bottom-content", + "description": "bottom content of the dropdown panel\n\n面板内的底部内容", + "doc-url": "https://tdesign.tencent.com/vue/components/dropdown?tab=api#dropdown-props" + }, + { + "name": "panelTopContent", + "description": "top content of the dropdown panel\n\n面板内的顶部内容", + "doc-url": "https://tdesign.tencent.com/vue/components/dropdown?tab=api#dropdown-props" + }, + { + "name": "panel-top-content", + "description": "top content of the dropdown panel\n\n面板内的顶部内容", + "doc-url": "https://tdesign.tencent.com/vue/components/dropdown?tab=api#dropdown-props" + } + ] }, { "name": "t-dropdown-item", @@ -6917,6 +7367,110 @@ } ] }, + { + "name": "t-empty", + "source": { + "symbol": "Empty" + }, + "description": "Empty\n\n空状态", + "doc-url": "https://tdesign.tencent.com/vue/components/empty", + "props": [ + { + "name": "action", + "description": "action block\n\n操作区域", + "doc-url": "https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props", + "type": [ + "TNode" + ] + }, + { + "name": "description", + "description": "empty component description\n\n描述文字", + "doc-url": "https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "image", + "description": "image url, or Image component props, or custom any node you need.\n\n组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：``", + "doc-url": "https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "image-style", + "description": "pass `Cascading Style Sheets` to image element\n\n透传图片样式表", + "doc-url": "https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props", + "type": [ + "Object" + ] + }, + { + "name": "title", + "description": "empty component title\n\n错误标题", + "doc-url": "https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "type", + "description": "Empty component type\n\n组件类型，如：空数据/成功/失败/网络错误/建设中", + "doc-url": "https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props", + "type": [ + "String" + ], + "default": "empty", + "attribute-value": { + "type": "enum" + }, + "values": [ + { + "name": "empty" + }, + { + "name": "success" + }, + { + "name": "fail" + }, + { + "name": "network-error" + }, + { + "name": "maintenance" + } + ] + } + ], + "slots": [ + { + "name": "action", + "description": "action block\n\n操作区域", + "doc-url": "https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props" + }, + { + "name": "description", + "description": "empty component description\n\n描述文字", + "doc-url": "https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props" + }, + { + "name": "image", + "description": "image url, or Image component props, or custom any node you need.\n\n组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：``类型和参数：string | ImageProps | TNode 【import { ImageProps } from '@Image'】", + "doc-url": "https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props" + }, + { + "name": "title", + "description": "empty component title\n\n错误标题", + "doc-url": "https://tdesign.tencent.com/vue/components/empty?tab=api#empty-props" + } + ] + }, { "name": "t-enhanced-table", "source": { @@ -6933,6 +7487,15 @@ "Function" ] }, + { + "name": "expanded-tree-nodes", + "description": "expanded tree node row keys, row key value is from data[rowKey]\n\n展开的树形节点。非必须。在需要自由控制展开的树形节点时使用。其他场景无需设置，表格组件有内置展开逻辑", + "doc-url": "https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-props", + "type": [ + "Array" + ], + "default": "[]" + }, { "name": "tree", "description": "tree data configs\n\n树形结构相关配置。具体属性文档查看 `TableTreeConfig` 相关描述", @@ -6957,9 +7520,14 @@ "description": "异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因", "doc-url": "https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-events" }, + { + "name": "expanded-tree-nodes-change", + "description": "trigger on tree node expanded or folded\n\n树形结构，展开的树节点发生变化时触发，泛型 T 指表格数据类型", + "doc-url": "https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-events" + }, { "name": "tree-expand-change", - "description": "树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发", + "description": "trigger on tree node expanded or folded, use `expandedTreeNodesChange` please\n\n树形结构，用户操作引起节点展开或收起时触发。请更为使用 `onExpandedTreeNodesChange`", "doc-url": "https://tdesign.tencent.com/vue/components/enhanced-table?tab=api#enhancedtable-events" } ] @@ -7289,8 +7857,7 @@ "description": "表单字段名称", "doc-url": "https://tdesign.tencent.com/vue/components/form-item?tab=api#formitem-props", "type": [ - "String", - "Number" + "String" ] }, { @@ -7849,6 +8416,14 @@ "TNode" ] }, + { + "name": "fallback", + "description": "display `fallback` image on `src` loading failed. you can also use `error` to define more complex error content\n\n图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error`", + "doc-url": "https://tdesign.tencent.com/vue/components/image?tab=api#image-props", + "type": [ + "String" + ] + }, { "name": "fit", "description": "图片填充模式", @@ -7952,6 +8527,43 @@ ], "default": "center" }, + { + "name": "referrerpolicy", + "description": "attribute of ``, [MDN Definition](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)\n\n`` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)", + "doc-url": "https://tdesign.tencent.com/vue/components/image?tab=api#image-props", + "type": [ + "String" + ], + "attribute-value": { + "type": "enum" + }, + "values": [ + { + "name": "no-referrer" + }, + { + "name": "no-referrer-when-downgrade" + }, + { + "name": "origin" + }, + { + "name": "origin-when-cross-origin" + }, + { + "name": "same-origin" + }, + { + "name": "strict-origin" + }, + { + "name": "strict-origin-when-cross-origin" + }, + { + "name": "unsafe-url" + } + ] + }, { "name": "shape", "description": "图片圆角类型", @@ -7977,15 +8589,16 @@ }, { "name": "src", - "description": "图片链接", + "description": "src attribute of ``. image File can also be loaded\n\n用于显示图片的链接或原始图片文件对象", "doc-url": "https://tdesign.tencent.com/vue/components/image?tab=api#image-props", "type": [ - "String" + "String", + "File" ] }, { "name": "srcset", - "description": "for `.avif` and `.webp` image url\n\n图片地址，支持特殊格式的图片，如 `.avif` 和 `.webp`", + "description": "for `.avif` and `.webp` image url, load `srcset` before `src`\n\n图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址", "doc-url": "https://tdesign.tencent.com/vue/components/image?tab=api#image-props", "type": [ "Object" @@ -8052,6 +8665,15 @@ ], "default": "true" }, + { + "name": "close-on-esc-keydown", + "description": "trigger image viewer close event on `ESC` keydown\n\n按下 ESC 时是否触发图片预览器关闭事件", + "doc-url": "https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props", + "type": [ + "Boolean" + ], + "default": "true" + }, { "name": "close-on-overlay", "description": "是否在点击遮罩层时，触发预览关闭", @@ -8071,7 +8693,7 @@ }, { "name": "image-scale", - "description": " 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度", + "description": " 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例", "doc-url": "https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props", "type": [ "Object" @@ -8092,7 +8714,8 @@ "doc-url": "https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props", "type": [ "Number" - ] + ], + "default": "0" }, { "name": "mode", @@ -8161,7 +8784,7 @@ }, { "name": "visible", - "description": "隐藏/显示预览", + "description": "hide or show image viewer\n\n隐藏/显示预览", "doc-url": "https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props", "type": [ "Boolean" @@ -8219,7 +8842,7 @@ }, { "name": "trigger", - "description": "trigger element\n\n触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义类型和参数：string | TNode<{ open: () => void }>", + "description": "trigger element\n\n触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义类型和参数：TNode | TNode<{ open: () => void }>", "doc-url": "https://tdesign.tencent.com/vue/components/image-viewer?tab=api#imageviewer-props" } ] @@ -8234,7 +8857,7 @@ "props": [ { "name": "align", - "description": "文本内容位置，居左/居中/居右", + "description": "text align type\n\n文本内容位置，居左/居中/居右", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "String" @@ -8257,7 +8880,7 @@ }, { "name": "allow-input-over-max", - "description": "超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入", + "description": "allow to continue input on value length is over `maxlength` or `maxcharacter`\n\n超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "Boolean" @@ -8266,7 +8889,7 @@ }, { "name": "auto-width", - "description": "宽度随内容自适应", + "description": "input width is fit to input content\n\n宽度随内容自适应", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "Boolean" @@ -8275,7 +8898,7 @@ }, { "name": "autocomplete", - "description": "是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "description": "attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\n\n是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "String" @@ -8284,7 +8907,16 @@ }, { "name": "autofocus", - "description": "自动聚焦", + "description": "autofocus on first rendered\n\n自动聚焦", + "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", + "type": [ + "Boolean" + ], + "default": "false" + }, + { + "name": "borderless", + "description": "input without border\n\n【开发中】无边框模式", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "Boolean" @@ -8293,7 +8925,7 @@ }, { "name": "clearable", - "description": "是否可清空", + "description": "show clear icon, clicked to clear input value\n\n是否可清空", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "Boolean" @@ -8302,7 +8934,7 @@ }, { "name": "disabled", - "description": "是否禁用输入框", + "description": "make input to be disabled\n\n是否禁用输入框", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "Boolean" @@ -8310,7 +8942,7 @@ }, { "name": "format", - "description": "指定输入框展示值的格式", + "description": "input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better\n\n指定输入框展示值的格式。注意 `type=number` 时请勿使用，此功能建议更为使用 `InputNumber` 组件", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "Function" @@ -8318,7 +8950,7 @@ }, { "name": "input-class", - "description": "t-input 同级类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`", + "description": "add className to the element with `t-input` class\n\nt-input 同级类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "String", @@ -8328,7 +8960,7 @@ }, { "name": "label", - "description": "左侧文本", + "description": "text on the left of input\n\n左侧文本", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "String", @@ -8348,6 +8980,7 @@ "description": "用户最多可以输入的文本长度，一个中文等于一个计数长度。值为空，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ + "String", "Number" ] }, @@ -8387,7 +9020,7 @@ }, { "name": "show-clear-icon-on-empty", - "description": "输入框内容为空时，悬浮状态是否显示清空按钮，默认不显示", + "description": "show clear icon on empty input value\n\n输入框内容为空时，悬浮状态是否显示清空按钮，默认不显示", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "Boolean" @@ -8405,7 +9038,7 @@ }, { "name": "size", - "description": "输入框尺寸", + "description": "make input to be different size\n\n输入框尺寸", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "String" @@ -8454,7 +9087,7 @@ }, { "name": "suffix", - "description": "后置图标前的后置内容", + "description": "suffix content before suffixIcon\n\n后置图标前的后置内容", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "String", @@ -8463,7 +9096,7 @@ }, { "name": "suffix-icon", - "description": "组件后置图标", + "description": "suffix icon of input\n\n组件后置图标", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "TNode" @@ -8471,7 +9104,7 @@ }, { "name": "tips", - "description": "输入框下方提示文本，会根据不同的 `status` 呈现不同的样式", + "description": "tips on the bottom of input, different `status` can make tips to be different color\n\n输入框下方提示文本，会根据不同的 `status` 呈现不同的样式", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "String", @@ -8480,7 +9113,7 @@ }, { "name": "type", - "description": "输入框类型", + "description": "type attribute of input element. if you are using `type=number`, `InputNumber` Component might be better\n\n输入框类型。`type=number` 仅支持最基础的数字输入功能，更多功能建议使用 `InputNumber` 组件", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "String" @@ -8518,13 +9151,12 @@ }, { "name": "value", - "description": "输入框的值", + "description": "input value\n\n输入框的值", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props", "type": [ "String", "Number" - ], - "default": "''" + ] } ], "js": { @@ -8536,7 +9168,7 @@ }, { "name": "change", - "description": "输入框值发生变化时触发。`trigger=initial` 表示传入的数据不符合预期，组件自动处理后触发 change 告知父组件。如：初始值长度超过 `maxlength` 限制", + "description": "trigger on input value changed\n\n输入框值发生变化时触发。参数 `trigger=initial` 表示传入的数据不符合预期，组件自动处理后触发 change 告知父组件。如：初始值长度超过 `maxlength` 限制", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-events" }, { @@ -8614,7 +9246,7 @@ "slots": [ { "name": "label", - "description": "左侧文本", + "description": "text on the left of input\n\n左侧文本", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props" }, { @@ -8629,22 +9261,22 @@ }, { "name": "suffix", - "description": "后置图标前的后置内容", + "description": "suffix content before suffixIcon\n\n后置图标前的后置内容", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props" }, { "name": "suffixIcon", - "description": "组件后置图标", + "description": "suffix icon of input\n\n组件后置图标", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props" }, { "name": "suffix-icon", - "description": "组件后置图标", + "description": "suffix icon of input\n\n组件后置图标", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props" }, { "name": "tips", - "description": "输入框下方提示文本，会根据不同的 `status` 呈现不同的样式", + "description": "tips on the bottom of input, different `status` can make tips to be different color\n\n输入框下方提示文本，会根据不同的 `status` 呈现不同的样式", "doc-url": "https://tdesign.tencent.com/vue/components/input?tab=api#input-props" } ] @@ -9081,6 +9713,15 @@ "Boolean" ] }, + { + "name": "download", + "description": "Causes the browser to treat the linked URL as a download\n\n使得浏览器将链接的 URL 视为可下载资源", + "doc-url": "https://tdesign.tencent.com/vue/components/link?tab=api#link-props", + "type": [ + "String", + "Boolean" + ] + }, { "name": "hover", "description": "hover link style\n\n链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法", @@ -9299,6 +9940,14 @@ "Object" ] }, + { + "name": "scroll", + "description": "lazy load and virtual scroll\n\n懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`", + "doc-url": "https://tdesign.tencent.com/vue/components/list?tab=api#list-props", + "type": [ + "Object" + ] + }, { "name": "size", "description": "尺寸", @@ -9895,6 +10544,7 @@ "type": [ "String" ], + "default": "_self", "attribute-value": { "type": "enum" }, @@ -10680,6 +11330,56 @@ }, "slots": [] }, + { + "name": "t-paragraph", + "source": { + "symbol": "Paragraph" + }, + "description": "Paragraph\n\n段落", + "doc-url": "https://tdesign.tencent.com/vue/components/paragraph", + "props": [ + { + "name": "content", + "description": "content of paragraph\n\n段落内容", + "doc-url": "https://tdesign.tencent.com/vue/components/paragraph?tab=api#paragraph-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "default", + "description": "default slot of paragraph\n\n段落内容", + "doc-url": "https://tdesign.tencent.com/vue/components/paragraph?tab=api#paragraph-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "ellipsis", + "description": "add ellipsis style\n\n是否省略展示，可通过配置参数自定义省略操作的具体功能和样式", + "doc-url": "https://tdesign.tencent.com/vue/components/paragraph?tab=api#paragraph-props", + "type": [ + "Boolean", + "Object" + ], + "default": "false" + } + ], + "slots": [ + { + "name": "content", + "description": "content of paragraph\n\n段落内容", + "doc-url": "https://tdesign.tencent.com/vue/components/paragraph?tab=api#paragraph-props" + }, + { + "name": "default", + "description": "default slot of paragraph\n\n段落内容", + "doc-url": "https://tdesign.tencent.com/vue/components/paragraph?tab=api#paragraph-props" + } + ] + }, { "name": "t-popconfirm", "source": { @@ -10916,15 +11616,6 @@ ], "default": "'body'" }, - { - "name": "close-btn", - "description": "是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮", - "doc-url": "https://tdesign.tencent.com/vue/components/popup?tab=api#popup-props", - "type": [ - "Boolean", - "TNode" - ] - }, { "name": "content", "description": "浮层里面的内容", @@ -11101,6 +11792,11 @@ ], "js": { "events": [ + { + "name": "overlay-click", + "description": "trigger on popup content click\n\n内容面板点击时触发", + "doc-url": "https://tdesign.tencent.com/vue/components/popup?tab=api#popup-events" + }, { "name": "scroll", "description": "下拉选项滚动事件", @@ -11119,16 +11815,6 @@ ] }, "slots": [ - { - "name": "closeBtn", - "description": "是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮", - "doc-url": "https://tdesign.tencent.com/vue/components/popup?tab=api#popup-props" - }, - { - "name": "close-btn", - "description": "是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮", - "doc-url": "https://tdesign.tencent.com/vue/components/popup?tab=api#popup-props" - }, { "name": "content", "description": "浮层里面的内容", @@ -11349,6 +12035,33 @@ ], "default": "true" }, + { + "name": "row-selection-allow-uncheck", + "description": "allow to uncheck selection in table with single row selection\n\n行选中单选场景，是否允许取消选中", + "doc-url": "https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props", + "type": [ + "Boolean" + ] + }, + { + "name": "row-selection-type", + "description": "single row selection, or multiple row selection\n\n行选中类型，单选或多选。效果和 `columns` 中配置的 `{ colKey: 'row-select', type: 'single' }` 一样", + "doc-url": "https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props", + "type": [ + "String" + ], + "attribute-value": { + "type": "enum" + }, + "values": [ + { + "name": "single" + }, + { + "name": "multiple" + } + ] + }, { "name": "select-on-row-click", "description": "select row data on row click\n\n是否在点击整行时选中", @@ -11359,7 +12072,7 @@ }, { "name": "selected-row-keys", - "description": "selected row keys, row key is from data[rowKey]\n\n选中行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制", + "description": "selected row keys, row key is from data[rowKey]\n\n选中行。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制", "doc-url": "https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props", "type": [ "Array" @@ -11742,6 +12455,33 @@ ], "default": "true" }, + { + "name": "row-selection-allow-uncheck", + "description": "allow to uncheck selection in table with single row selection\n\n行选中单选场景，是否允许取消选中", + "doc-url": "https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props", + "type": [ + "Boolean" + ] + }, + { + "name": "row-selection-type", + "description": "single row selection, or multiple row selection\n\n行选中类型，单选或多选。效果和 `columns` 中配置的 `{ colKey: 'row-select', type: 'single' }` 一样", + "doc-url": "https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props", + "type": [ + "String" + ], + "attribute-value": { + "type": "enum" + }, + "values": [ + { + "name": "single" + }, + { + "name": "multiple" + } + ] + }, { "name": "select-on-row-click", "description": "select row data on row click\n\n是否在点击整行时选中", @@ -11752,7 +12492,7 @@ }, { "name": "selected-row-keys", - "description": "selected row keys, row key is from data[rowKey]\n\n选中行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制", + "description": "selected row keys, row key is from data[rowKey]\n\n选中行。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制", "doc-url": "https://tdesign.tencent.com/vue/components/primary-table?tab=api#primarytable-props", "type": [ "Array" @@ -12122,6 +12862,15 @@ "String" ] }, + { + "name": "readonly", + "description": "只读状态", + "doc-url": "https://tdesign.tencent.com/vue/components/radio?tab=api#radio-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "value", "description": "单选按钮的值", @@ -12143,7 +12892,7 @@ }, { "name": "click", - "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景", + "description": "trigger on click\n\n点击时出发，一般用于外层阻止冒泡场景", "doc-url": "https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events" } ] @@ -12222,6 +12971,15 @@ "String" ] }, + { + "name": "readonly", + "description": "只读状态", + "doc-url": "https://tdesign.tencent.com/vue/components/radio?tab=api#radio-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "value", "description": "单选按钮的值", @@ -12243,7 +13001,7 @@ }, { "name": "click", - "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景", + "description": "trigger on click\n\n点击时出发，一般用于外层阻止冒泡场景", "doc-url": "https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events" } ] @@ -12948,7 +13706,7 @@ }, { "name": "gutter", - "description": "栅格间隔，示例：`{ xs: 8, sm: 16, md: 24}`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]", + "description": "栅格间隔，示例：`{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]", "doc-url": "https://tdesign.tencent.com/vue/components/row?tab=api#row-props", "type": [ "Number", @@ -13283,7 +14041,7 @@ }, { "name": "collapsed-items", - "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量", + "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签", "doc-url": "https://tdesign.tencent.com/vue/components/select?tab=api#select-props", "type": [ "TNode" @@ -13350,7 +14108,7 @@ }, { "name": "keys", - "description": "用来定义 value / label 在 `options` 中对应的字段别名", + "description": "alias option field\n\n用来定义 value / label / disabled 在 `options` 中对应的字段别名", "doc-url": "https://tdesign.tencent.com/vue/components/select?tab=api#select-props", "type": [ "Object" @@ -13418,6 +14176,15 @@ "Array" ] }, + { + "name": "options-layout", + "description": "layout of options in popup\n\n下拉选项布局方式，有纵向排列和横向排列两种，默认纵向排列", + "doc-url": "https://tdesign.tencent.com/vue/components/select?tab=api#select-props", + "type": [ + "String" + ], + "default": "vertical" + }, { "name": "panel-bottom-content", "description": "面板内的底部内容", @@ -13702,12 +14469,12 @@ "slots": [ { "name": "collapsedItems", - "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量类型和参数：TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>", + "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签类型和参数：TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number, onClose: (index: number) => void }>", "doc-url": "https://tdesign.tencent.com/vue/components/select?tab=api#select-props" }, { "name": "collapsed-items", - "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量类型和参数：TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>", + "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签类型和参数：TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number, onClose: (index: number) => void }>", "doc-url": "https://tdesign.tencent.com/vue/components/select?tab=api#select-props" }, { @@ -14444,6 +15211,11 @@ "name": "change", "description": "滑块值变化时触发", "doc-url": "https://tdesign.tencent.com/vue/components/slider?tab=api#slider-events" + }, + { + "name": "change-end", + "description": "triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider\n\n松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用", + "doc-url": "https://tdesign.tencent.com/vue/components/slider?tab=api#slider-events" } ] }, @@ -15650,6 +16422,15 @@ "TNode" ] }, + { + "name": "lazy", + "description": "Enable tab lazy loading\n\n是否启用选项卡懒加载", + "doc-url": "https://tdesign.tencent.com/vue/components/tab-panel?tab=api#tabpanel-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "panel", "description": "用于自定义选项卡面板内容", @@ -16185,6 +16966,14 @@ ], "default": "undefined" }, + { + "name": "prefix-icon", + "description": "组件前置图标", + "doc-url": "https://tdesign.tencent.com/vue/components/tag-input?tab=api#taginput-props", + "type": [ + "TNode" + ] + }, { "name": "readonly", "description": "只读状态，值为真会隐藏标签移除按钮和输入框", @@ -16384,6 +17173,16 @@ "description": "左侧文本", "doc-url": "https://tdesign.tencent.com/vue/components/tag-input?tab=api#taginput-props" }, + { + "name": "prefixIcon", + "description": "组件前置图标", + "doc-url": "https://tdesign.tencent.com/vue/components/tag-input?tab=api#taginput-props" + }, + { + "name": "prefix-icon", + "description": "组件前置图标", + "doc-url": "https://tdesign.tencent.com/vue/components/tag-input?tab=api#taginput-props" + }, { "name": "suffix", "description": "后置图标前的后置内容", @@ -16421,6 +17220,167 @@ } ] }, + { + "name": "t-text", + "source": { + "symbol": "Text" + }, + "description": "Text\n\n文本", + "doc-url": "https://tdesign.tencent.com/vue/components/text", + "props": [ + { + "name": "code", + "description": "add code style\n\n是否添加代码样式", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "Boolean" + ], + "default": "false" + }, + { + "name": "content", + "description": "content of text\n\n文本内容", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "copyable", + "description": "add copyable style\n\n是否可复制，可通过配置参数自定义复制操作的具体功能和样式", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "Boolean", + "Object" + ], + "default": "false" + }, + { + "name": "default", + "description": "default slot of text\n\n文本内容", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "delete", + "description": "add delete line style\n\n是否添加删除线样式", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "Boolean" + ], + "default": "false" + }, + { + "name": "disabled", + "description": "add disabled style\n\n是否添加不可用样式", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "Boolean" + ], + "default": "false" + }, + { + "name": "ellipsis", + "description": "add ellipsis style\n\n是否省略展示，可通过配置参数自定义省略操作的具体功能和样式", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "Boolean", + "Object" + ], + "default": "false" + }, + { + "name": "italic", + "description": "add italic style\n\n文本是否为斜体", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "Boolean" + ], + "default": "false" + }, + { + "name": "keyboard", + "description": "add keyboard style\n\n是否添加键盘样式", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "Boolean" + ], + "default": "false" + }, + { + "name": "mark", + "description": "add mark style\n\n是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "String", + "Boolean" + ], + "default": "false" + }, + { + "name": "strong", + "description": "add bold style\n\n文本是否加粗", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "Boolean" + ], + "default": "false" + }, + { + "name": "theme", + "description": "theme of text\n\n主题", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "String" + ], + "attribute-value": { + "type": "enum" + }, + "values": [ + { + "name": "primary" + }, + { + "name": "secondary" + }, + { + "name": "success" + }, + { + "name": "warning" + }, + { + "name": "error" + } + ] + }, + { + "name": "underline", + "description": "add underline style\n\n是否添加下划线样式", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props", + "type": [ + "Boolean" + ], + "default": "false" + } + ], + "slots": [ + { + "name": "content", + "description": "content of text\n\n文本内容", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props" + }, + { + "name": "default", + "description": "default slot of text\n\n文本内容", + "doc-url": "https://tdesign.tencent.com/vue/components/text?tab=api#text-props" + } + ] + }, { "name": "t-textarea", "source": { @@ -16488,6 +17448,7 @@ "description": "用户最多可以输入的字符个数", "doc-url": "https://tdesign.tencent.com/vue/components/textarea?tab=api#textarea-props", "type": [ + "String", "Number" ] }, @@ -16637,7 +17598,7 @@ }, { "name": "disable-time", - "description": "禁用时间项", + "description": "disable time config function\n\n禁用时间项的配置函数", "doc-url": "https://tdesign.tencent.com/vue/components/time-picker?tab=api#timepicker-props", "type": [ "Function" @@ -17219,6 +18180,15 @@ ] } ], + "js": { + "events": [ + { + "name": "click", + "description": "trigger on click\n\n点击时触发", + "doc-url": "https://tdesign.tencent.com/vue/components/timeline-item?tab=api#timelineitem-events" + } + ] + }, "slots": [ { "name": "content", @@ -17237,6 +18207,88 @@ } ] }, + { + "name": "t-title", + "source": { + "symbol": "Title" + }, + "description": "Title\n\n标题", + "doc-url": "https://tdesign.tencent.com/vue/components/title", + "props": [ + { + "name": "content", + "description": "content of title\n\n段落内容", + "doc-url": "https://tdesign.tencent.com/vue/components/title?tab=api#title-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "default", + "description": "default slot of title\n\n标题内容", + "doc-url": "https://tdesign.tencent.com/vue/components/title?tab=api#title-props", + "type": [ + "String", + "TNode" + ] + }, + { + "name": "ellipsis", + "description": "add ellipsis style\n\n是否省略展示，可通过配置参数自定义省略操作的具体功能和样式", + "doc-url": "https://tdesign.tencent.com/vue/components/title?tab=api#title-props", + "type": [ + "Boolean", + "Object" + ], + "default": "false" + }, + { + "name": "level", + "description": "level of title\n\n标题等级", + "doc-url": "https://tdesign.tencent.com/vue/components/title?tab=api#title-props", + "type": [ + "String" + ], + "default": "h1", + "attribute-value": { + "type": "enum" + }, + "values": [ + { + "name": "h1" + }, + { + "name": "h2" + }, + { + "name": "h3" + }, + { + "name": "h4" + }, + { + "name": "h5" + }, + { + "name": "h6" + } + ] + } + ], + "slots": [ + { + "name": "content", + "description": "content of title\n\n段落内容", + "doc-url": "https://tdesign.tencent.com/vue/components/title?tab=api#title-props" + }, + { + "name": "default", + "description": "default slot of title\n\n标题内容", + "doc-url": "https://tdesign.tencent.com/vue/components/title?tab=api#title-props" + } + ] + }, { "name": "t-tooltip", "source": { @@ -17518,7 +18570,7 @@ }, { "name": "keys", - "description": "用来定义选项文本和选项值字段，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段", + "description": "alias field name in data\n\n用来定义 value / label / disabled 在 `data` 中对应的字段别名，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段", "doc-url": "https://tdesign.tencent.com/vue/components/transfer?tab=api#transfer-props", "type": [ "Object" @@ -17563,6 +18615,15 @@ ], "default": "true" }, + { + "name": "target-draggable", + "description": "allowed to sort the target list by dragging\n\n是否允许通过拖拽对目标列表进行排序", + "doc-url": "https://tdesign.tencent.com/vue/components/transfer?tab=api#transfer-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "target-sort", "description": "目标数据列表排列顺序", @@ -17700,7 +18761,7 @@ "props": [ { "name": "activable", - "description": "节点是否可高亮", + "description": "make nodes can be highlight\n\n节点是否可高亮", "doc-url": "https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props", "type": [ "Boolean" @@ -17788,7 +18849,7 @@ }, { "name": "draggable", - "description": "[开发中]节点是否可拖拽", + "description": "节点是否可拖拽", "doc-url": "https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props", "type": [ "Boolean" @@ -17868,7 +18929,7 @@ }, { "name": "height", - "description": "table height\n\n表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`", + "description": "The height of tree. Scrollbar will appear after the content is overflow. Examples: 100, '30%', '300'. The value should be a number and will automatically be converted to a pixel value. If the tree height is not fixed, it is recommended to use `maxHeight`.\n\n树的高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定树的高度，建议使用 `maxHeight`", "doc-url": "https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props", "type": [ "String", @@ -17895,7 +18956,7 @@ }, { "name": "keys", - "description": "用来定义 `value / label / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }`", + "description": "alias field name in data\n\n用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }`。其中，disabled 待开发。", "doc-url": "https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props", "type": [ "Object" @@ -17941,7 +19002,7 @@ }, { "name": "max-height", - "description": "table max height\n\n表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px", + "description": "The max height of tree. Scrollbar will appear after the content is overflow. Examples: 100, '30%', '300'. \n\n树的最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px", "doc-url": "https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props", "type": [ "String", @@ -17975,7 +19036,7 @@ }, { "name": "value", - "description": "选中值（组件为可选状态时）", + "description": "选中值，组件为可选状态时有效", "doc-url": "https://tdesign.tencent.com/vue/components/tree?tab=api#tree-props", "type": [ "Array" @@ -18207,7 +19268,7 @@ }, { "name": "keys", - "description": "用来定义 `value / label / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }`", + "description": "alias filed name in data\n\n用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`", "doc-url": "https://tdesign.tencent.com/vue/components/tree-select?tab=api#treeselect-props", "type": [ "Object" @@ -18636,7 +19697,7 @@ }, { "name": "accept", - "description": "接受上传的文件类型，[查看 W3C示例](https://www.w3schools.com/tags/att_input_accept.asp)，[查看 MDN 示例](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file)", + "description": "File types that can be accepted. [W3C](https://www.w3schools.com/tags/att_input_accept.asp)，[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file)\n\n接受上传的文件类型，[查看 W3C示例](https://www.w3schools.com/tags/att_input_accept.asp)，[查看 MDN 示例](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file)", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "String" @@ -18644,7 +19705,7 @@ }, { "name": "action", - "description": "upload action url\n\n上传接口。设接口响应数据为字段 `response`，那么 `response.error` 存在时会判断此次上传失败，并显示错误文本信息；`response.url` 会作为文件上传成功后的地址，并使用该地址显示图片或文件", + "description": "Uploading URL\n\n上传接口。设接口响应数据为字段 `response`，那么 `response.error` 存在时会判断此次上传失败，并显示错误文本信息；`response.url` 会作为文件上传成功后的地址，并使用该地址显示图片或文件", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "String" @@ -18652,7 +19713,7 @@ }, { "name": "allow-upload-duplicate-file", - "description": "是否允许重复上传相同文件名的文件", + "description": "allow to upload duplicate name files\n\n是否允许重复上传相同文件名的文件", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Boolean" @@ -18661,7 +19722,7 @@ }, { "name": "auto-upload", - "description": "是否在选择文件后自动发起请求上传文件", + "description": "post upload request automatically after files being selected\n\n是否在选择文件后自动发起请求上传文件", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Boolean" @@ -18670,7 +19731,7 @@ }, { "name": "before-all-files-upload", - "description": "before all files upload, return false can stop uploading file\n\n如果是自动上传模式 `autoUpload=true`，表示全部文件上传之前的钩子函数，函数参数为上传的文件，函数返回值决定是否继续上传，若返回值为 `false` 则终止上传。
如果是非自动上传模式 `autoUpload=false`，则函数返回值为 `false` 时表示不触发文件变化", + "description": "before all files upload, return false can stop uploading file\n\n如果是自动上传模式 `autoUpload=true`，表示全部文件上传之前的钩子函数，函数参数为上传的文件，函数返回值决定是否继续上传，若返回值为 `false` 则终止上传。
如果是非自动上传模式 `autoUpload=false`，则函数返回值为 `false` 时表示本次选中的文件不会加入到文件列表中，即不触发 `onChange` 事件", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Function" @@ -18678,15 +19739,24 @@ }, { "name": "before-upload", - "description": "如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。
如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件", + "description": "stop one of files to upload\n\n如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。
如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Function" ] }, + { + "name": "cancel-upload-button", + "description": "cancel upload button props, which showed on `autoUpload=false` and multiple files/images upload\n\n批量文件/图片上传，`autoUpload=false` 场景下，透传“取消上传”按钮属性", + "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", + "type": [ + "Object", + "TNode" + ] + }, { "name": "data", - "description": "上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: \"custom-file-name.txt\"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段", + "description": "extra request data of uploading. `formatRequest` can redefine all request data\n\n上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: \"custom-file-name.txt\"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Object" @@ -18703,7 +19773,7 @@ }, { "name": "disabled", - "description": "是否禁用", + "description": "make upload to be disabled\n\n是否禁用", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Boolean" @@ -18729,7 +19799,7 @@ }, { "name": "file-list-display", - "description": "用于完全自定义文件列表内容", + "description": "used to render file list UI\n\n用于完全自定义文件列表界面内容(UI)，单文件和多文件均有效", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "TNode" @@ -18746,7 +19816,7 @@ }, { "name": "format", - "description": "转换文件 `UploadFile` 的数据结构，可新增或修改 `UploadFile` 的属性，注意不能删除 `UploadFile` 属性。`action` 存在时有效", + "description": "to redefine `UploadFile` data structure\n\n转换文件 `UploadFile` 的数据结构，可新增或修改 `UploadFile` 的属性，注意不能删除 `UploadFile` 属性。`action` 存在时有效", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Function" @@ -18754,7 +19824,7 @@ }, { "name": "format-request", - "description": "用于新增或修改文件上传请求参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`；
一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。
⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。
可以使用 `name` 定义 `file` 字段的别名，也可以使用 `formatRequest` 自定义任意字段", + "description": "redefine request data\n\n用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`。
一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。
⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。
可以使用 `name` 定义 `file` 字段的别名。
也可以使用 `formatRequest` 自定义任意字段，如添加一个字段 `fileList` ，存储文件数组", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Function" @@ -18762,7 +19832,7 @@ }, { "name": "format-response", - "description": "用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。
此函数的返回值 `error` 或 `response.error` 会作为错误文本提醒，如果存在会判定为本次上传失败。
此函数的返回值 `url` 或 `response.url` 会作为上传成功后的链接", + "description": "redefine response data structure\n\n用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。
示例返回值：`{ error, url, status, files }`
此函数的返回值 `error` 会作为错误文本提醒，表示上传失败的原因，如果存在会判定为本次上传失败。
此函数的返回值 `url` 会作为单个文件上传成功后的链接。
`files` 表示一个请求同时上传多个文件后的文件列表", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Function" @@ -18770,7 +19840,15 @@ }, { "name": "headers", - "description": "设置上传的请求头部，`action` 存在时有效", + "description": "HTTP Request Header\n\n设置上传的请求头部，`action` 存在时有效", + "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", + "type": [ + "Object" + ] + }, + { + "name": "image-viewer-props", + "description": "ImageViewer Component Props\n\n透传图片预览组件全部属性", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Object" @@ -18786,7 +19864,7 @@ }, { "name": "is-batch-upload", - "description": "多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效", + "description": "make all files to be a whole package, files can only be replaced or deleted together, can not add more files\n\n多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Boolean" @@ -18803,7 +19881,7 @@ }, { "name": "max", - "description": "用于控制文件上传数量，值为 0 则不限制", + "description": "max count of files limit\n\n用于控制文件上传数量，值为 0 则不限制。注意，单文件上传场景，请勿设置 `max` 属性", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Number" @@ -18812,7 +19890,7 @@ }, { "name": "method", - "description": "HTTP 请求类型", + "description": "HTTP request method\n\nHTTP 请求类型", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "String" @@ -18856,7 +19934,7 @@ }, { "name": "mock-progress-duration", - "description": "模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效", + "description": "mock progress duration time. more large files more duration time\n\n模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Number" @@ -18864,7 +19942,7 @@ }, { "name": "multiple", - "description": "支持多文件上传", + "description": "multiple files uploading\n\n支持多文件上传", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Boolean" @@ -18873,7 +19951,7 @@ }, { "name": "name", - "description": "文件上传时的名称", + "description": "field name of files in upload request data\n\n文件上传时的名称", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "String" @@ -18882,7 +19960,7 @@ }, { "name": "placeholder", - "description": "占位符", + "description": "placeholder\n\n占位符", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "String" @@ -18890,15 +19968,33 @@ }, { "name": "request-method", - "description": "自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；
`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。
示例一：`{ status: 'fail', error: '上传失败', response }`。
示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。
示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`", + "description": "custom upload request method\n\n自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；
`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。
示例一：`{ status: 'fail', error: '上传失败', response }`。
示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。
示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Function" ] }, + { + "name": "show-image-file-name", + "description": "show image's name\n\n是否显示图片的文件名称", + "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", + "type": [ + "Boolean" + ], + "default": "true" + }, + { + "name": "show-thumbnail", + "description": "show thumbnail before file name, only works on `theme=file-flow` \n\n是否在文件列表中显示缩略图，`theme=file-flow` 时有效", + "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", + "type": [ + "Boolean" + ], + "default": "false" + }, { "name": "show-upload-progress", - "description": "是否显示上传进度", + "description": "show upload progress nodes\n\n是否显示上传进度", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Boolean" @@ -18907,7 +20003,7 @@ }, { "name": "size-limit", - "description": "图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`", + "description": "files size limit\n\n图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Number", @@ -18941,7 +20037,7 @@ }, { "name": "theme", - "description": "组件风格。custom 表示完全自定义风格；file 表示默认文件上传风格；file-input 表示输入框形式的文件上传；file-flow 表示文件批量上传；image 表示默认图片上传风格；image-flow 表示图片批量上传", + "description": "different upload UI styles\n\n组件风格。custom 表示完全自定义风格；file 表示默认文件上传风格；file-input 表示输入框形式的文件上传；file-flow 表示文件批量上传；image 表示默认图片上传风格；image-flow 表示图片批量上传", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "String" @@ -18982,7 +20078,7 @@ }, { "name": "trigger", - "description": "触发上传的元素，`files` 指本次显示的全部文件", + "description": "trigger elements UI\n\n触发上传的元素，`files` 指本次显示的全部文件", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "TNode" @@ -18990,7 +20086,7 @@ }, { "name": "trigger-button-props", - "description": "透传选择按钮全部属性", + "description": "trigger button props, it can be used to change color/size/href/... of the trigger button\n\n透传选择按钮全部属性", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Object" @@ -18998,13 +20094,22 @@ }, { "name": "upload-all-files-in-one-request", - "description": "是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效", + "description": "uploading all files in one request\n\n是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Boolean" ], "default": "false" }, + { + "name": "upload-button", + "description": "upload button props, which showed on `autoUpload=false` and multiple files/images upload\n\n批量文件/图片上传，`autoUpload=false` 场景下，透传“点击上传”按钮属性", + "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", + "type": [ + "Object", + "TNode" + ] + }, { "name": "upload-pasted-files", "description": "allow to upload files in clipboard after pasting\n\n是否允许粘贴上传剪贴板中的文件", @@ -19012,11 +20117,11 @@ "type": [ "Boolean" ], - "default": "false" + "default": "true" }, { "name": "use-mock-progress", - "description": "是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。", + "description": "use mock progress, instead of real progress\n\n是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Boolean" @@ -19025,7 +20130,7 @@ }, { "name": "value", - "description": "file list, `UploadFile`\n\n已上传文件列表，同 `files`。TS 类型：`UploadFile`", + "description": "file list\n\n已上传文件列表，同 `files`。TS 类型：`UploadFile`", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Array" @@ -19034,7 +20139,7 @@ }, { "name": "with-credentials", - "description": "上传请求时是否携带 cookie", + "description": "uploading request with cookie\n\n上传请求时是否携带 cookie", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props", "type": [ "Boolean" @@ -19046,27 +20151,27 @@ "events": [ { "name": "cancel-upload", - "description": "点击「取消上传」时触发", + "description": "trigger on cancel button click\n\n点击「取消上传」时触发", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events" }, { "name": "change", - "description": "已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源", + "description": "trigger on uploaded files change\n\n已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events" }, { "name": "dragenter", - "description": "进入拖拽区域时触发", + "description": "trigger on file dragged into drag elements\n\n进入拖拽区域时触发", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events" }, { "name": "dragleave", - "description": "离开拖拽区域时触发", + "description": "trigger on file dragged leave drag elements\n\n离开拖拽区域时触发", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events" }, { "name": "drop", - "description": "拖拽结束时触发", + "description": "trigger on file dropped\n\n拖拽结束时触发", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events" }, { @@ -19081,22 +20186,22 @@ }, { "name": "one-file-success", - "description": "单个文件上传成功后触发，在多文件场景下会触发多次。`context.file` 表示当前上传成功的单个文件，`context.response` 表示上传请求的返回数据", + "description": "trigger on file uploaded successfully\n\n单个文件上传成功后触发，在多文件场景下会触发多次。`context.file` 表示当前上传成功的单个文件，`context.response` 表示上传请求的返回数据", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events" }, { "name": "preview", - "description": "点击图片预览时触发，文件没有预览", + "description": "trigger on preview elements click\n\n点击图片预览时触发，文件没有预览", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events" }, { "name": "progress", - "description": "上传进度变化时触发，真实进度和模拟进度都会触发。
⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度", + "description": "uploading request progress event\n\n上传进度变化时触发，真实进度和模拟进度都会触发。
⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events" }, { "name": "remove", - "description": "移除文件时触发", + "description": "trigger on file removed\n\n移除文件时触发", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events" }, { @@ -19106,7 +20211,7 @@ }, { "name": "success", - "description": "上传成功后触发。
`context.currentFiles` 表示当次请求上传的文件（无论成功或失败），`context.fileList` 表示上传成功后的文件，`context.response` 表示上传请求的返回数据。
`context.results` 表示单次选择全部文件上传成功后的响应结果，可以在这个字段存在时提醒用户上传成功或失败。
", + "description": "trigger on all files uploaded successfully\n\n上传成功后触发。
`context.currentFiles` 表示当次请求上传的文件（无论成功或失败），`context.fileList` 表示上传成功后的文件，`context.response` 表示上传请求的返回数据。
`context.results` 表示单次选择全部文件上传成功后的响应结果，可以在这个字段存在时提醒用户上传成功或失败。
", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-events" }, { @@ -19122,6 +20227,16 @@ ] }, "slots": [ + { + "name": "cancelUploadButton", + "description": "cancel upload button props, which showed on `autoUpload=false` and multiple files/images upload\n\n批量文件/图片上传，`autoUpload=false` 场景下，透传“取消上传”按钮属性类型和参数：null | ButtonProps | TNode<{ disabled: boolean; cancelUploadText: string; cancelUpload: (ctx: { e: MouseEvent }) => void }>", + "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props" + }, + { + "name": "cancel-upload-button", + "description": "cancel upload button props, which showed on `autoUpload=false` and multiple files/images upload\n\n批量文件/图片上传，`autoUpload=false` 场景下，透传“取消上传”按钮属性类型和参数：null | ButtonProps | TNode<{ disabled: boolean; cancelUploadText: string; cancelUpload: (ctx: { e: MouseEvent }) => void }>", + "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props" + }, { "name": "default", "description": "非拖拽场景，指触发上传的元素，如：“选择文件”。如果是拖拽场景，则是指拖拽区域", @@ -19139,12 +20254,12 @@ }, { "name": "fileListDisplay", - "description": "用于完全自定义文件列表内容类型和参数：TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>", + "description": "used to render file list UI\n\n用于完全自定义文件列表界面内容(UI)，单文件和多文件均有效类型和参数：TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props" }, { "name": "file-list-display", - "description": "用于完全自定义文件列表内容类型和参数：TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>", + "description": "used to render file list UI\n\n用于完全自定义文件列表界面内容(UI)，单文件和多文件均有效类型和参数：TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props" }, { @@ -19154,7 +20269,17 @@ }, { "name": "trigger", - "description": "触发上传的元素，`files` 指本次显示的全部文件类型和参数：TNode【interface TriggerContext { dragActive?: boolean; files: UploadFile[] }】", + "description": "trigger elements UI\n\n触发上传的元素，`files` 指本次显示的全部文件类型和参数：TNode【interface TriggerContext { dragActive?: boolean; files: UploadFile[] }】", + "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props" + }, + { + "name": "uploadButton", + "description": "upload button props, which showed on `autoUpload=false` and multiple files/images upload\n\n批量文件/图片上传，`autoUpload=false` 场景下，透传“点击上传”按钮属性类型和参数：null | ButtonProps | TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>", + "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props" + }, + { + "name": "upload-button", + "description": "upload button props, which showed on `autoUpload=false` and multiple files/images upload\n\n批量文件/图片上传，`autoUpload=false` 场景下，透传“点击上传”按钮属性类型和参数：null | ButtonProps | TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>", "doc-url": "https://tdesign.tencent.com/vue/components/upload?tab=api#upload-props" } ] diff --git a/src/affix/affix.en-US.md b/src/affix/affix.en-US.md index 2931571cb..050cdfd8b 100644 --- a/src/affix/affix.en-US.md +++ b/src/affix/affix.en-US.md @@ -6,10 +6,10 @@ name | type | default | description | required -- | -- | -- | -- | -- container | String / Function | () => (() => window) | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -content（暂未实现） | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -offsetBottom | Number | 0 | When the distance from the bottom of the container reaches the specified distance, the trigger is fixed | N -offsetTop | Number | 0 | When the distance from the top of the container reaches the specified distance, the trigger is fixed | N +offsetBottom | Number | 0 | \- | N +offsetTop | Number | 0 | \- | N zIndex | Number | - | \- | N onFixedChange | Function | | Typescript：`(affixed: boolean, context: { top: number }) => void`
| N diff --git a/src/affix/affix.md b/src/affix/affix.md index f9938fa7a..374cfc5cd 100644 --- a/src/affix/affix.md +++ b/src/affix/affix.md @@ -6,10 +6,10 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- container | String / Function | () => (() => window) | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -content（暂未实现） | String / Slot / Function | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +content | String / Slot / Function | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -offsetBottom | Number | 0 | 距离容器底部达到指定距离后触发固定 | N -offsetTop | Number | 0 | 距离容器顶部达到指定距离后触发固定 | N +offsetBottom | Number | 0 | 距离容器顶部达到指定距离后触发固定 | N +offsetTop | Number | 0 | 距离容器底部达到指定距离后触发固定 | N zIndex | Number | - | 固钉定位层级，样式默认为 500 | N onFixedChange | Function | | TS 类型：`(affixed: boolean, context: { top: number }) => void`
固定状态发生变化时触发 | N diff --git a/src/affix/props.ts b/src/affix/props.ts index eda3414ba..1ed010f42 100644 --- a/src/affix/props.ts +++ b/src/affix/props.ts @@ -11,7 +11,7 @@ export default { /** 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */ container: { type: [String, Function] as PropType, - default: () => () => window, + default: () => (() => window), }, /** 内容 */ content: { @@ -21,12 +21,12 @@ export default { default: { type: [String, Function] as PropType, }, - /** 距离容器底部达到指定距离后触发固定 */ + /** 距离容器顶部达到指定距离后触发固定 */ offsetBottom: { type: Number, default: 0, }, - /** 距离容器顶部达到指定距离后触发固定 */ + /** 距离容器底部达到指定距离后触发固定 */ offsetTop: { type: Number, default: 0, diff --git a/src/affix/type.ts b/src/affix/type.ts index 0ac68e6c3..e76c47972 100644 --- a/src/affix/type.ts +++ b/src/affix/type.ts @@ -21,12 +21,12 @@ export interface TdAffixProps { */ default?: string | TNode; /** - * 距离容器底部达到指定距离后触发固定 + * 距离容器顶部达到指定距离后触发固定 * @default 0 */ offsetBottom?: number; /** - * 距离容器顶部达到指定距离后触发固定 + * 距离容器底部达到指定距离后触发固定 * @default 0 */ offsetTop?: number; diff --git a/src/auto-complete/auto-complete.en-US.md b/src/auto-complete/auto-complete.en-US.md index 0f885ef61..bdd203c3f 100644 --- a/src/auto-complete/auto-complete.en-US.md +++ b/src/auto-complete/auto-complete.en-US.md @@ -1,11 +1,13 @@ :: BASE_DOC :: ## API + ### AutoComplete Props name | type | default | description | required -- | -- | -- | -- | -- autofocus | Boolean | - | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | - | \- | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | - | \- | N @@ -19,8 +21,8 @@ panelTopContent | String / Slot / Function | - | Typescript：`string \| TNode` placeholder | String | undefined | \- | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/auto-complete/type.ts) | N readonly | Boolean | - | \- | N -size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -status | String | default | options：default/success/warning/error | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +status | String | default | options: default/success/warning/error | N textareaProps | Object | - | Typescript：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/auto-complete/type.ts) | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N triggerElement | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/auto-complete/auto-complete.md b/src/auto-complete/auto-complete.md index 2e1adf151..6079f241d 100644 --- a/src/auto-complete/auto-complete.md +++ b/src/auto-complete/auto-complete.md @@ -1,11 +1,13 @@ :: BASE_DOC :: ## API + ### AutoComplete Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- autofocus | Boolean | - | 自动获取焦点 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | - | 是否允许清空 | N default | String / Slot / Function | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | - | 是否禁用 | N diff --git a/src/auto-complete/props.ts b/src/auto-complete/props.ts index 7d9b3ec8c..5b562d466 100644 --- a/src/auto-complete/props.ts +++ b/src/auto-complete/props.ts @@ -92,7 +92,7 @@ export default { /** 输入框的值，即当前指定的联想词 */ value: { type: String, - default: undefined, + default: '', }, /** 输入框的值，即当前指定的联想词，非受控属性 */ defaultValue: { diff --git a/src/auto-complete/type.ts b/src/auto-complete/type.ts index b7d1d1cf1..204a3d374 100644 --- a/src/auto-complete/type.ts +++ b/src/auto-complete/type.ts @@ -107,7 +107,7 @@ export interface TdAutoCompleteProps void; + onChange?: (value: string, context?: { e?: InputEvent | MouseEvent | KeyboardEvent }) => void; /** * 清空按钮点击时触发 */ diff --git a/src/avatar/avatar.en-US.md b/src/avatar/avatar.en-US.md index ae0fcaf28..984a51944 100644 --- a/src/avatar/avatar.en-US.md +++ b/src/avatar/avatar.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Avatar Props name | type | default | description | required @@ -12,21 +13,28 @@ hideOnLoadFailed | Boolean | false | hide image when loading image failed | N icon | Slot / Function | - | use icon to fill。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N image | String | - | images url | N imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/avatar/type.ts) | N -shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/avatar/type.ts) | N +shape | String | circle | shape。options: circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/avatar/type.ts) | N size | String | - | size | N +onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on click | N +onContextmenu | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on context menu | N onError | Function | | Typescript：`(context: { e: Event }) => void`
trigger on image load failed | N +onHover | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on mouse enter | N ### Avatar Events name | params | description -- | -- | -- +click | `(context: { e: MouseEvent })` | trigger on click +contextmenu | `(context: { e: MouseEvent })` | trigger on context menu error | `(context: { e: Event })` | trigger on image load failed +hover | `(context: { e: MouseEvent })` | trigger on mouse enter + ### AvatarGroup Props name | type | default | description | required -- | -- | -- | -- | -- -cascading | String | 'right-up' | multiple images cascading。options：left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/avatar/type.ts) | N +cascading | String | 'right-up' | multiple images cascading。options: left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/avatar/type.ts) | N collapseAvatar | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N max | Number | - | \- | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/avatar/type.ts) | N diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md index d09c5abdb..e023cca86 100644 --- a/src/avatar/avatar.md +++ b/src/avatar/avatar.md @@ -1,9 +1,10 @@ :: BASE_DOC :: ## API + ### Avatar Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N content | String / Slot / Function | - | 子元素内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -14,17 +15,24 @@ image | String | - | 图片地址 | N imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/avatar/type.ts) | N shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/avatar/type.ts) | N size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N +onContextmenu | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
右键点击时触发 | N onError | Function | | TS 类型：`(context: { e: Event }) => void`
图片加载失败时触发 | N +onHover | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
鼠标移入时触发 | N ### Avatar Events 名称 | 参数 | 描述 -- | -- | -- +click | `(context: { e: MouseEvent })` | 点击时触发 +contextmenu | `(context: { e: MouseEvent })` | 右键点击时触发 error | `(context: { e: Event })` | 图片加载失败时触发 +hover | `(context: { e: MouseEvent })` | 鼠标移入时触发 + ### AvatarGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/avatar/type.ts) | N collapseAvatar | String / Slot / Function | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/avatar/props.ts b/src/avatar/props.ts index 1200235ab..815a16ff4 100644 --- a/src/avatar/props.ts +++ b/src/avatar/props.ts @@ -50,6 +50,12 @@ export default { type: String, default: '', }, + /** 点击时触发 */ + onClick: Function as PropType, + /** 右键点击时触发 */ + onContextmenu: Function as PropType, /** 图片加载失败时触发 */ onError: Function as PropType, + /** 鼠标移入时触发 */ + onHover: Function as PropType, }; diff --git a/src/avatar/type.ts b/src/avatar/type.ts index 2fe03c729..31fa5009c 100644 --- a/src/avatar/type.ts +++ b/src/avatar/type.ts @@ -50,10 +50,22 @@ export interface TdAvatarProps { * @default '' */ size?: string; + /** + * 点击时触发 + */ + onClick?: (context: { e: MouseEvent }) => void; + /** + * 右键点击时触发 + */ + onContextmenu?: (context: { e: MouseEvent }) => void; /** * 图片加载失败时触发 */ onError?: (context: { e: Event }) => void; + /** + * 鼠标移入时触发 + */ + onHover?: (context: { e: MouseEvent }) => void; } export interface TdAvatarGroupProps { diff --git a/src/back-top/back-top.en-US.md b/src/back-top/back-top.en-US.md index 7c8813e82..bd5c90223 100644 --- a/src/back-top/back-top.en-US.md +++ b/src/back-top/back-top.en-US.md @@ -1,7 +1,6 @@ :: BASE_DOC :: ## API - ### BackTop Props name | type | default | description | required diff --git a/src/back-top/back-top.md b/src/back-top/back-top.md index d2967982c..23756980e 100644 --- a/src/back-top/back-top.md +++ b/src/back-top/back-top.md @@ -1,7 +1,6 @@ :: BASE_DOC :: ## API - ### BackTop Props 名称 | 类型 | 默认值 | 说明 | 必传 diff --git a/src/back-top/props.ts b/src/back-top/props.ts index 0eb99baea..e28d6c3d9 100644 --- a/src/back-top/props.ts +++ b/src/back-top/props.ts @@ -29,7 +29,7 @@ export default { /** 回到顶部相对右下角的位置偏移，示例：[10, 20] 或 ['10em', '8rem'] */ offset: { type: Array as PropType, - default: (): TdBackTopProps['offset'] => ['24px', '80px'], + default: (): TdBackTopProps['offset'] => ["24px", "80px"], }, /** 回到顶部的形状 */ shape: { diff --git a/src/breadcrumb-item/breadcrumb-item.en-US.md b/src/breadcrumb-item/breadcrumb-item.en-US.md new file mode 100644 index 000000000..3c540b5a5 --- /dev/null +++ b/src/breadcrumb-item/breadcrumb-item.en-US.md @@ -0,0 +1,18 @@ +:: BASE_DOC :: + +## API + +### BreadcrumbItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +disabled | Boolean | - | \- | N +href | String | - | \- | N +icon | Slot / Function | - | prefix icon in breadcrumb item。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +maxWidth | String | undefined | \- | N +replace | Boolean | false | \- | N +router | Object | - | Typescript：`any` | N +target | String | _self | options：_blank/_self/_parent/_top | N +to | String / Object | - | Typescript：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/breadcrumb/type.ts) | N diff --git a/src/breadcrumb-item/breadcrumb-item.md b/src/breadcrumb-item/breadcrumb-item.md new file mode 100644 index 000000000..114732376 --- /dev/null +++ b/src/breadcrumb-item/breadcrumb-item.md @@ -0,0 +1,18 @@ +:: BASE_DOC :: + +## API + +### BreadcrumbItem Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +content | String / Slot / Function | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +disabled | Boolean | - | 是否禁用当前项点击 | N +href | String | - | 跳转链接 | N +icon | Slot / Function | - | 面板屑项内的前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +maxWidth | String | undefined | 最大宽度，超出后会以省略号形式呈现。优先级高于 Breadcrumb 中的 maxItemWidth | N +replace | Boolean | false | 路由跳转是否采用覆盖的方式（覆盖后将没有浏览器历史记录） | N +router | Object | - | 路由对象。如果项目存在 Router，则默认使用 Router。TS 类型：`any` | N +target | String | _self | 链接或路由跳转方式。可选项：_blank/_self/_parent/_top | N +to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/breadcrumb/type.ts) | N diff --git a/src/breadcrumb/breadcrumb-item-props.ts b/src/breadcrumb/breadcrumb-item-props.ts index 124956352..55842096d 100644 --- a/src/breadcrumb/breadcrumb-item-props.ts +++ b/src/breadcrumb/breadcrumb-item-props.ts @@ -51,4 +51,6 @@ export default { to: { type: [String, Object] as PropType, }, + /** 点击时触发 */ + onClick: Function as PropType, }; diff --git a/src/breadcrumb/breadcrumb.en-US.md b/src/breadcrumb/breadcrumb.en-US.md index 2a850babe..e6799ffd1 100644 --- a/src/breadcrumb/breadcrumb.en-US.md +++ b/src/breadcrumb/breadcrumb.en-US.md @@ -1,6 +1,8 @@ :: BASE_DOC :: ## API + + ### Breadcrumb Props name | type | default | description | required @@ -8,7 +10,8 @@ name | type | default | description | required maxItemWidth | String | undefined | \- | N options | Array | - | Typescript：`Array` | N separator | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -theme | String | light | options：light | N +theme | String | light | options: light | N + ### BreadcrumbItem Props @@ -22,5 +25,12 @@ icon | Slot / Function | - | prefix icon in breadcrumb item。Typescript：`TNod maxWidth | String | undefined | \- | N replace | Boolean | false | \- | N router | Object | - | Typescript：`any` | N -target | String | _self | options：_blank/_self/_parent/_top | N -to | String / Object | - | Typescript：`Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/breadcrumb/type.ts) | N +target | String | _self | options: _blank/_self/_parent/_top | N +to | String / Object | - | Typescript：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/breadcrumb/type.ts) | N +onClick | Function | | Typescript：`(e: MouseEvent) => void`
trigger on click | N + +### BreadcrumbItem Events + +name | params | description +-- | -- | -- +click | `(e: MouseEvent)` | trigger on click diff --git a/src/breadcrumb/breadcrumb.md b/src/breadcrumb/breadcrumb.md index dbcfb0e29..32ee62169 100644 --- a/src/breadcrumb/breadcrumb.md +++ b/src/breadcrumb/breadcrumb.md @@ -1,23 +1,21 @@ :: BASE_DOC :: -### 带跳转/点击的面包屑 +## API -自定义响应点击事件。 -{{ href }} -## API ### Breadcrumb Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- maxItemWidth | String | undefined | 单项最大宽度，超出后会以省略号形式呈现 | N options | Array | - | 面包屑项，功能同 BreadcrumbItem。TS 类型：`Array` | N separator | String / Slot / Function | - | 自定义分隔符。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N theme | String | light | 组件风格。可选项：light | N + ### BreadcrumbItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- content | String / Slot / Function | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -28,4 +26,11 @@ maxWidth | String | undefined | 最大宽度，超出后会以省略号形式呈 replace | Boolean | false | 路由跳转是否采用覆盖的方式（覆盖后将没有浏览器历史记录） | N router | Object | - | 路由对象。如果项目存在 Router，则默认使用 Router。TS 类型：`any` | N target | String | _self | 链接或路由跳转方式。可选项：_blank/_self/_parent/_top | N -to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/breadcrumb/type.ts) | N +to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/breadcrumb/type.ts) | N +onClick | Function | | TS 类型：`(e: MouseEvent) => void`
点击时触发 | N + +### BreadcrumbItem Events + +名称 | 参数 | 描述 +-- | -- | -- +click | `(e: MouseEvent)` | 点击时触发 diff --git a/src/breadcrumb/type.ts b/src/breadcrumb/type.ts index ba8ef1899..476af6df8 100644 --- a/src/breadcrumb/type.ts +++ b/src/breadcrumb/type.ts @@ -69,7 +69,11 @@ export interface TdBreadcrumbItemProps { /** * 路由跳转目标，当且仅当 Router 存在时，该 API 有效 */ - to?: Route; + to?: string | Route; + /** + * 点击时触发 + */ + onClick?: (e: MouseEvent) => void; } export interface Route { diff --git a/src/calendar/calendar.en-US.md b/src/calendar/calendar.en-US.md index 7782d8c1e..f9421143f 100644 --- a/src/calendar/calendar.en-US.md +++ b/src/calendar/calendar.en-US.md @@ -1,6 +1,7 @@ -:: BASE_DOC :: - -## API ### Calendar Props +:: BASE_DOC :: + +## API +### Calendar Props name | type | default | description | required -- | -- | -- | -- | -- diff --git a/src/calendar/calendar.md b/src/calendar/calendar.md index 7d017b366..7238adbbf 100644 --- a/src/calendar/calendar.md +++ b/src/calendar/calendar.md @@ -1,6 +1,7 @@ -:: BASE_DOC :: - -## API ### Calendar Props +:: BASE_DOC :: + +## API +### Calendar Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- diff --git a/src/card/card.en-US.md b/src/card/card.en-US.md index 1ce644a60..2a9fee03e 100644 --- a/src/card/card.en-US.md +++ b/src/card/card.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Card Props name | type | default | description | required diff --git a/src/card/card.md b/src/card/card.md index f88600509..d727190ae 100644 --- a/src/card/card.md +++ b/src/card/card.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Card Props 名称 | 类型 | 默认值 | 说明 | 必传 @@ -16,7 +17,7 @@ footer | String / Slot / Function | - | 卡片底部内容，可完全自定义 header | String / Slot / Function | - | 卡片顶部内容，优先级高于其他所有元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N hoverShadow | Boolean | false | hover时是否有阴影 | N -loading | Boolean / Slot / Function | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +loading | Boolean / Slot / Function | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/card/type.ts) | N shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N size | String | medium | 尺寸。可选项：medium/small | N diff --git a/src/card/props.ts b/src/card/props.ts index 1abe555a3..5da9f3d8e 100644 --- a/src/card/props.ts +++ b/src/card/props.ts @@ -49,7 +49,7 @@ export default { headerBordered: Boolean, /** hover时是否有阴影 */ hoverShadow: Boolean, - /** 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容 */ + /** 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容 */ loading: { type: [Boolean, Function] as PropType, default: false, diff --git a/src/card/type.ts b/src/card/type.ts index bcb94cd5e..7ca51793a 100644 --- a/src/card/type.ts +++ b/src/card/type.ts @@ -56,7 +56,7 @@ export interface TdCardProps { */ hoverShadow?: boolean; /** - * 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容 + * 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容 * @default false */ loading?: boolean | TNode; diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md index 65c364fe7..bb339e755 100644 --- a/src/cascader/cascader.en-US.md +++ b/src/cascader/cascader.en-US.md @@ -32,6 +32,7 @@ placeholder | String | undefined | \- | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N popupVisible | Boolean | - | \- | N defaultPopupVisible | Boolean | - | uncontrolled property | N +prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N readonly | Boolean | false | \- | N reserveKeyword | Boolean | false | \- | N selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md index 52d557365..5b8badd01 100644 --- a/src/cascader/cascader.md +++ b/src/cascader/cascader.md @@ -31,6 +31,8 @@ options | Array | [] | 可选项数据源。TS 类型：`Array` placeholder | String | undefined | 占位符 | N popupProps | Object | - | 参考 popup 组件 API。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N popupVisible | Boolean | - | 是否显示下拉框 | N +defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N +prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N diff --git a/src/cascader/props.ts b/src/cascader/props.ts index cf697a9e5..f4247f209 100644 --- a/src/cascader/props.ts +++ b/src/cascader/props.ts @@ -20,7 +20,7 @@ export default { checkStrictly: Boolean, /** 是否支持清空选项 */ clearable: Boolean, - /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */ + /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 */ collapsedItems: { type: Function as PropType, }, @@ -95,6 +95,10 @@ export default { }, /** 是否显示下拉框 */ popupVisible: Boolean, + /** 组件前置图标 */ + prefixIcon: { + type: Function as PropType, + }, /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */ readonly: Boolean, /** 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 */ diff --git a/src/cascader/type.ts b/src/cascader/type.ts index 4d7698090..1ba31283d 100644 --- a/src/cascader/type.ts +++ b/src/cascader/type.ts @@ -39,14 +39,9 @@ export interface TdCascaderProps void; - }>; + collapsedItems?: TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>; /** * 是否禁用组件 */ @@ -130,6 +125,10 @@ export interface TdCascaderProps, - default: undefined, + default: (): TdCheckboxGroupProps['value'] => [], }, /** 选中值，非受控属性 */ defaultValue: { diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md index 965e37a84..d66746928 100644 --- a/src/checkbox/checkbox.md +++ b/src/checkbox/checkbox.md @@ -12,7 +12,7 @@ default | String / Slot / Function | - | 多选框内容，同 label。TS 类型 disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N indeterminate | Boolean | false | 是否为半选 | N label | String / Slot / Function | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -lazyLoad | Boolean | false | 是否启用懒加载。数据量加大时建议开启；加载复杂内容或大量图片时建议开启 | N +lazyLoad | Boolean | false | 是否启用懒加载。数据量大时建议开启；加载复杂内容或大量图片时建议开启 | N name | String | - | HTML 元素原生属性 | N readonly | Boolean | false | 只读状态 | N value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N @@ -29,7 +29,7 @@ change | `(checked: boolean, context: { e: Event })` | 值变化时触发 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- disabled | Boolean | undefined | 是否禁用组件，默认为 false。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N -lazyLoad | Boolean | false | 是否启用懒加载。数据量加大时建议开启；加载复杂内容或大量图片时建议开启 | N +lazyLoad | Boolean | false | 是否启用懒加载。子组件 Checkbox 数据量大时建议开启；加载复杂内容或大量图片时建议开启 | N max | Number | undefined | 支持最多选中的数量 | N name | String | - | 统一设置内部复选框 HTML 属性 | N options | Array | - | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts) | N diff --git a/src/checkbox/props.ts b/src/checkbox/props.ts index 8f13e24c0..367aa09e8 100644 --- a/src/checkbox/props.ts +++ b/src/checkbox/props.ts @@ -11,10 +11,7 @@ export default { /** 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 */ checkAll: Boolean, /** 是否选中 */ - checked: { - type: Boolean, - default: undefined, - }, + checked: Boolean, /** 是否选中，非受控属性 */ defaultChecked: Boolean, /** 多选框内容，同 label */ @@ -32,7 +29,7 @@ export default { label: { type: [String, Function] as PropType, }, - /** 是否启用懒加载。数据量加大时建议开启；加载复杂内容或大量图片时建议开启 */ + /** 是否启用懒加载。数据量大时建议开启；加载复杂内容或大量图片时建议开启 */ lazyLoad: Boolean, /** HTML 元素原生属性 */ name: { diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts index 3730a2cb4..4f9ab7ed2 100644 --- a/src/checkbox/type.ts +++ b/src/checkbox/type.ts @@ -40,7 +40,7 @@ export interface TdCheckboxProps { */ label?: string | TNode; /** - * 是否启用懒加载。数据量加大时建议开启；加载复杂内容或大量图片时建议开启 + * 是否启用懒加载。数据量大时建议开启；加载复杂内容或大量图片时建议开启 * @default false */ lazyLoad?: boolean; @@ -70,7 +70,7 @@ export interface TdCheckboxGroupProps { */ disabled?: boolean; /** - * 是否启用懒加载。数据量加大时建议开启；加载复杂内容或大量图片时建议开启 + * 是否启用懒加载。子组件 Checkbox 数据量大时建议开启；加载复杂内容或大量图片时建议开启 * @default false */ lazyLoad?: boolean; diff --git a/src/collapse/collapse-panel-props.ts b/src/collapse/collapse-panel-props.ts index 8fc0115fe..8271fe544 100644 --- a/src/collapse/collapse-panel-props.ts +++ b/src/collapse/collapse-panel-props.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TdCollapsePanelProps } from './type'; +import { TdCollapsePanelProps } from '../collapse/type'; import { PropType } from 'vue'; export default { diff --git a/src/collapse/collapse.en-US.md b/src/collapse/collapse.en-US.md index 16dbd6131..ab1292aff 100644 --- a/src/collapse/collapse.en-US.md +++ b/src/collapse/collapse.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Collapse Props name | type | default | description | required @@ -14,13 +15,13 @@ expandMutex | Boolean | false | \- | N expandOnRowClick | Boolean | true | \- | N value | Array | [] | `v-model` is supported。Typescript：`CollapseValue` `type CollapseValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/collapse/type.ts) | N defaultValue | Array | [] | uncontrolled property。Typescript：`CollapseValue` `type CollapseValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/collapse/type.ts) | N -onChange | Function | | Typescript：`(value: CollapseValue) => void`
| N +onChange | Function | | Typescript：`(value: CollapseValue, context: { e: MouseEvent }) => void`
| N ### Collapse Events name | params | description -- | -- | -- -change | `(value: CollapseValue)` | \- +change | `(value: CollapseValue, context: { e: MouseEvent })` | \- ### CollapsePanel Props @@ -33,4 +34,4 @@ disabled | Boolean | undefined | \- | N expandIcon | Boolean / Slot / Function | undefined | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N header | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N headerRightContent | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -value | String / Number | - | required | Y +value | String / Number | - | \- | N diff --git a/src/collapse/collapse.md b/src/collapse/collapse.md index 44318c363..9e4ba3374 100644 --- a/src/collapse/collapse.md +++ b/src/collapse/collapse.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Collapse Props 名称 | 类型 | 默认值 | 说明 | 必传 @@ -14,13 +15,13 @@ expandMutex | Boolean | false | 每个面板互斥展开，每次只展开一个 expandOnRowClick | Boolean | true | 是否允许点击整行标题展开面板 | N value | Array | [] | 展开的面板集合。支持语法糖 `v-model`。TS 类型：`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/collapse/type.ts) | N defaultValue | Array | [] | 展开的面板集合。非受控属性。TS 类型：`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/collapse/type.ts) | N -onChange | Function | | TS 类型：`(value: CollapseValue) => void`
切换面板时触发，返回变化的值 | N +onChange | Function | | TS 类型：`(value: CollapseValue, context: { e: MouseEvent }) => void`
切换面板时触发，返回变化的值 | N ### Collapse Events 名称 | 参数 | 描述 -- | -- | -- -change | `(value: CollapseValue)` | 切换面板时触发，返回变化的值 +change | `(value: CollapseValue, context: { e: MouseEvent })` | 切换面板时触发，返回变化的值 ### CollapsePanel Props @@ -33,4 +34,4 @@ disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Coll expandIcon | Boolean / Slot / Function | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N header | String / Slot / Function | - | 面板头内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N headerRightContent | String / Slot / Function | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -value | String / Number | - | 必需。当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | Y +value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N diff --git a/src/collapse/props.ts b/src/collapse/props.ts index c95ffffca..c9f159cb1 100644 --- a/src/collapse/props.ts +++ b/src/collapse/props.ts @@ -38,11 +38,12 @@ export default { /** 展开的面板集合 */ value: { type: Array as PropType, - default: undefined, + default: (): TdCollapseProps['value'] => [], }, /** 展开的面板集合，非受控属性 */ defaultValue: { type: Array as PropType, + default: (): TdCollapseProps['defaultValue'] => [], }, /** 切换面板时触发，返回变化的值 */ onChange: Function as PropType, diff --git a/src/collapse/type.ts b/src/collapse/type.ts index 41c014091..b273ddfce 100644 --- a/src/collapse/type.ts +++ b/src/collapse/type.ts @@ -43,16 +43,18 @@ export interface TdCollapseProps { expandOnRowClick?: boolean; /** * 展开的面板集合 + * @default [] */ value?: CollapseValue; /** * 展开的面板集合，非受控属性 + * @default [] */ defaultValue?: CollapseValue; /** * 切换面板时触发，返回变化的值 */ - onChange?: (value: CollapseValue) => void; + onChange?: (value: CollapseValue, context: { e: MouseEvent }) => void; } export interface TdCollapsePanelProps { @@ -92,5 +94,3 @@ export interface TdCollapsePanelProps { } export type CollapseValue = Array; - -export type CollapsePanelValue = string | number; diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md index 4ea94ec8a..f3078605a 100644 --- a/src/color-picker/color-picker.en-US.md +++ b/src/color-picker/color-picker.en-US.md @@ -1,26 +1,28 @@ :: BASE_DOC :: ## API + ### ColorPicker Props name | type | default | description | required -- | -- | -- | -- | -- +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N closeBtn | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N +colorModes | Array | ["monochrome", "linear-gradient"] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N disabled | Boolean | - | \- | N enableAlpha | Boolean | false | \- | N enableMultipleGradient | Boolean | true | \- | N -format | String | RGB | options：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N +format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N multiple | Boolean | false | \- | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N -recentColors | Array | [] | used color recently。`.sync` is supported。Typescript：`boolean \| Array` | N -defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`boolean \| Array` | N +recentColors | Array | [] | used color recently。`.sync` is supported。Typescript：`boolean \| Array \| null` | N +defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`boolean \| Array \| null` | N selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N showPrimaryColorPreview | Boolean | true | \- | N -size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -swatchColors | Array | - | swatch colors。Typescript：`Array` | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +swatchColors | Array | - | swatch colors。Typescript：`Array \| null` | N value | String | - | color value。`v-model` is supported | N defaultValue | String | - | color value。uncontrolled property | N onChange | Function | | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `
| N diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md index c875c7037..c93dc42a5 100644 --- a/src/color-picker/color-picker.md +++ b/src/color-picker/color-picker.md @@ -1,13 +1,15 @@ :: BASE_DOC :: ## API + ### ColorPicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N +colorModes | Array | ["monochrome", "linear-gradient"] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N disabled | Boolean | - | 是否禁用组件 | N enableAlpha | Boolean | false | 是否开启透明通道 | N enableMultipleGradient | Boolean | true | 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 | N @@ -15,12 +17,12 @@ format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/H inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N multiple | Boolean | false | 【开发中】是否允许选中多个颜色 | N popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N -recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。支持语法糖 `.sync`。TS 类型：`boolean \| Array` | N -defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean \| Array` | N +recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。支持语法糖 `.sync`。TS 类型：`boolean \| Array \| null` | N +defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean \| Array \| null` | N selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N showPrimaryColorPreview | Boolean | true | 是否展示颜色选择条右侧的颜色预览区域 | N size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array` | N +swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array \| null` | N value | String | - | 色值。支持语法糖 `v-model` | N defaultValue | String | - | 色值。非受控属性 | N onChange | Function | | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `
| N diff --git a/src/color-picker/props.ts b/src/color-picker/props.ts index 0093f70ac..abb16b3eb 100644 --- a/src/color-picker/props.ts +++ b/src/color-picker/props.ts @@ -8,6 +8,8 @@ import { TdColorPickerProps } from './type'; import { PropType } from 'vue'; export default { + /** 无边框模式 */ + borderless: Boolean, /** 是否可清空 */ clearable: Boolean, /** 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 */ @@ -18,7 +20,7 @@ export default { /** 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 */ colorModes: { type: Array as PropType, - default: () => ['monochrome', 'linear-gradient'], + default: (): TdColorPickerProps['colorModes'] => ["monochrome", "linear-gradient"], }, /** 是否禁用组件 */ disabled: Boolean, diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts index 26079e2c6..e7fb238d6 100644 --- a/src/color-picker/type.ts +++ b/src/color-picker/type.ts @@ -10,6 +10,11 @@ import { SelectInputProps } from '../select-input'; import { TNode, SizeEnum } from '../common'; export interface TdColorPickerProps { + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否可清空 * @default false @@ -22,7 +27,7 @@ export interface TdColorPickerProps { closeBtn?: string | boolean | TNode; /** * 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 - * @default ()=> ['monochrome', 'linear-gradient'] + * @default ["monochrome", "linear-gradient"] */ colorModes?: Array<'monochrome' | 'linear-gradient'>; /** @@ -61,12 +66,12 @@ export interface TdColorPickerProps { * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” * @default [] */ - recentColors?: boolean | Array; + recentColors?: boolean | Array | null; /** * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 * @default [] */ - defaultRecentColors?: boolean | Array; + defaultRecentColors?: boolean | Array | null; /** * 透传 SelectInputProps 筛选器输入框组件全部属性 */ @@ -84,7 +89,7 @@ export interface TdColorPickerProps { /** * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */ - swatchColors?: Array; + swatchColors?: Array | null; /** * 色值 * @default '' diff --git a/src/common.ts b/src/common.ts index 78b9ec507..78a504810 100644 --- a/src/common.ts +++ b/src/common.ts @@ -62,10 +62,7 @@ export type HorizontalAlignEnum = 'left' | 'center' | 'right'; export type VerticalAlignEnum = 'top' | 'middle' | 'bottom'; -export enum LayoutEnum { - VERTICAL = 'vertical', - HORIZONTAL = 'horizontal', -} +export type LayoutEnum = 'vertical' | 'horizontal'; export type ClassName = { [className: string]: any } | ClassName[] | string; diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md index e3de1d3e2..c44845d15 100644 --- a/src/config-provider/config-provider.en-US.md +++ b/src/config-provider/config-provider.en-US.md @@ -1,38 +1,5 @@ :: BASE_DOC :: -### Global Component Classprefix - -the classprefix of TDesign component is `t`. In some situations, it is necessary to change the component prefix to meet the usage needs. - -You can use the `esm` version (which guarantees that you can modify less vars), modify the `classPrefix` through global configuration, and cooperate with less-loader to modify the `@prefix` less vars to ensure the normal styling of the components. - -```js -import Vue from 'vue' -import TDesign from 'tdesign-vue/esm' -import 'tdesign-vue/esm/style/index.js' - -Vue.use(TDesign); -... - - - TDesign to any design - -``` - -```js -{ - loaderOptions: { - less: { - lessOptions: { - modifyVars: { - '@prefix': 'any', // should be the same as classPrefix - }, - javascriptEnabled: true, - }, - }, - } -} -``` ## API ### GlobalConfigProvider @@ -293,6 +260,7 @@ fileStatusText | String | - | \- | N name | type | default | description | required -- | -- | -- | -- | -- +colon | String | - | colon on the right of label ":" | N errorMessage | Object | - | Typescript：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N requiredMark | Boolean | true | \- | N @@ -315,6 +283,12 @@ name | type | default | description | required collapseText | String | - | \- | N expandText | String | - | \- | N +### DescriptionsConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +colon | String | - | colon on the right of label, ":" | N + ### AnchorConfig name | type | default | description | required diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md index 5f83a10dc..fa0a64cce 100644 --- a/src/config-provider/config-provider.md +++ b/src/config-provider/config-provider.md @@ -1,43 +1,9 @@ :: BASE_DOC :: -### 全局组件前缀 - -TDesign 的组件前缀统一为`t`，在一些业务场景中，有需要改变组件前缀来满足业务的使用场景。 -可以使用`esm`版本（保证您可以修改less vars)，通过全局配置修改`classPrefix`，并配合 less-loader 修改`@prefix`这个 less vars 来保证组件样式的正常。 - -```js -import Vue from 'vue' -import TDesign from 'tdesign-vue/esm' -import 'tdesign-vue/esm/style/index.js' - -Vue.use(TDesign); - -... - - - TDesign to any design - -``` - -```js -{ - loaderOptions: { - less: { - lessOptions: { - modifyVars: { - '@prefix': 'any', // 请注意需要与classPrefix保持一致 - }, - javascriptEnabled: true, - }, - }, - } -} -``` - ## API ### GlobalConfigProvider -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- alert | Object | - | 警告全局配置。TS 类型：`AlertConfig` | N anchor | Object | - | 锚点全局配置。TS 类型：`AnchorConfig` | N @@ -71,14 +37,14 @@ upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N ### InputConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- autocomplete | String | - | 是否开启自动填充功能 | N placeholder | String | - | 语言配置，“请输入”占位符描述文本 | N ### PaginationConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- itemsPerPage | String | - | 语言配置，每页条数文本，示例：`'{size} 条/页'` | N jumpTo | String | - | 语言配置，页码跳转文本，示例：'跳至' | N @@ -87,7 +53,7 @@ total | String | - | 语言配置，数据总条数文本，示例：`'共 {tota ### CalendarConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- cellMonth | String | - | 语言配置，月份描述文本，示例：'一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月' | N controllerConfig | Object | - | 日历右上角控制器按钮配置。TS 类型：`CalendarController`，[Calendar API Documents](./calendar?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N @@ -105,7 +71,7 @@ yearSelection | String | - | 语言配置，“年”选择描述文本，示例 ### CascaderConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- empty | String | - | 语言配置，“暂无数据”描述文本 | N loadingText | String | - | 语言配置，“加载中”描述文本 | N @@ -113,7 +79,7 @@ placeholder | String | - | 语言配置，“请选择”占位描述文本 | N ### ColorPickerConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- clearConfirmText | String | - | 语言配置，“确定清空最近使用的颜色吗？”清空颜色确认文案 | N recentColorTitle | String | - | 语言配置，“最近使用颜色” 区域标题文本 | N @@ -121,7 +87,7 @@ swatchColorTitle | String | - | 语言配置，\"系统预设颜色\" 区域标 ### TransferConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- empty | String | - | 语言配置，“暂无数据”空数据描述文本 | N placeholder | String | - | 语言配置，“请输入关键词搜索”占位符描述文本 | N @@ -129,7 +95,7 @@ title | String | - | 语言配置，穿梭框标题描述文本，示例：“{c ### TimePickerConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- anteMeridiem | String | - | 语言配置，“上午”描述文本 | N confirm | String | - | 语言配置，“确定”描述文本 | N @@ -139,7 +105,7 @@ postMeridiem | String | - | 语言配置，“下午”描述文本 | N ### DatePickerConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- confirm | String | - | 语言配置，“确定” 描述文本 | N dayAriaLabel | String | - | 语言配置，“日” 描述文本 | N @@ -168,7 +134,7 @@ yearAriaLabel | String | - | 语言配置，“年” 描述文本 | N ### DialogConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- cancel | Object | - | 取消按钮风格。TS 类型：`string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发对话框关闭事件 | N @@ -178,7 +144,7 @@ confirmBtnTheme | Object | - | 确认按钮主题色，即 Dialog 的 `theme` ### DrawerConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- cancel | String | - | 语言配置，“取消”描述文本。TS 类型：`string \| ButtonProps` | N closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发抽屉关闭事件 | N @@ -188,7 +154,7 @@ size | String | 'small' | 尺寸配置，配置Drawer尺寸 | N ### PopconfirmConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- cancel | String / Object | - | 语言配置，“取消”描述文本。TS 类型：`string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N confirm | String / Object | - | 语言配置，“确定”描述文本。TS 类型：`string \| ButtonProps` | N @@ -196,7 +162,7 @@ confirmBtnTheme | Object | - | 确认按钮主题色，即 Popconfirm 的 `theme ### TableConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- cancelText | String | - | 语言配置，“取消” 描述文本 | N clearFilterResultButtonText | String | - | 语言配置，过滤功能中，“清空筛选” 描述文本 | N @@ -222,7 +188,7 @@ treeExpandAndFoldIcon | Function | undefined | 树形结构，展开和折叠图 ### SelectConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- clearIcon | Function | - | 清除图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N empty | String | - | 语言配置，“暂无数据”描述文本 | N @@ -232,14 +198,14 @@ placeholder | String | - | 语言配置，“请选择”占位符描述文本 | ### TreeConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- empty | String | - | 语言配置，“暂无数据”描述文本 | N folderIcon | Function | - | 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N ### TreeSelectConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- empty | String | - | 语言配置，“暂无数据”描述文本 | N loadingText | String | - | 语言配置，“加载中”描述文本 | N @@ -247,14 +213,14 @@ placeholder | String | - | 语言配置，“请选择”占位符描述文本 | ### ListConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- loadingMoreText | String | - | 语言配置，'点击加载更多' 描述文本 | N loadingText | String | - | 语言配置，'正在加载中，请稍后' 描述文本 | N ### UploadConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- cancelUploadText | String | - | 语言配置，“取消上传” 描述文本 | N dragger | Object | - | 语言配置，拖拽相关。示例：{ dragDropText: '释放图标', draggingText: '拖拽到此区域', clickAndDragText: '点击上方“选择文件”或将文件拖到此区域' }。TS 类型：`UploadConfigDragger` | N @@ -265,7 +231,7 @@ triggerUploadText | Object | - | 语言配置，上传功能触发文案。示 ### UploadConfigProgress -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- failText | String | - | 语言配置，“上传失败”文本描述 | N successText | String | - | 语言配置，“上传成功”文本描述 | N @@ -274,7 +240,7 @@ waitingText | String | - | 语言配置，“待上传”文本描述 | N ### UploadConfigDragger -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- clickAndDragText | String | - | 语言配置，“ 点击上方“选择文件”或将文件拖到此区域 ” 描述文本 | N dragDropText | String | - | 语言配置，“释放图标” 描述文本 | N @@ -282,7 +248,7 @@ draggingText | String | - | 语言配置，'拖拽到此区域' 描述文本 | N ### UploadConfigFileList -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- fileNameText | String | - | 语言配置，“文件名” 描述文本 | N fileOperationDateText | String | - | 语言配置，“上传日期” 描述文本 | N @@ -292,46 +258,53 @@ fileStatusText | String | - | 语言配置，“状态” 描述文本 | N ### FormConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- +colon | String | - | 字段旁边的冒号，中文为“：” | N errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N ### TagConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N ### StepsConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N ### AlertConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- collapseText | String | - | 语言配置，“收起”描述文本 | N expandText | String | - | 语言配置，“展开更多”描述文本 | N +### DescriptionsConfig + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +colon | String | - | 字段旁边的冒号，中文为“：” | N + ### AnchorConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- copySuccessText | String | - | 语言配置，“链接复制成功”描述文本 | N copyText | String | - | 语言配置，“复制链接” 描述文本 | N ### MessageConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- `MessageOptions` | \- | - | 继承 `MessageOptions` 中的全部属性 | N ### ImageConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- errorText | String | - | 图片加载失败显示的文本，中文默认为“图片无法显示” | N loadingText | String | - | 图片加载中显示的文本，中文默认为“图片加载中” | N @@ -339,7 +312,7 @@ replaceImageSrc | Function | - | 统一替换图片 `src` 地址，参数为组 ### ImageViewerConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- errorText | String | - | 全局语言配置，默认为 “图片加载失败，可尝试重新加载” | N mirrorTipText | String | - | 全局语言配置，默认为 “镜像” | N @@ -348,7 +321,7 @@ rotateTipText | String | - | 全局语言配置，默认为 “旋转” | N ### GuideConfig -名称 | 类型 | 默认值 | 描述 | 必传 +名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- finishButtonProps | Object | - | 最后一步中的完成按钮，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N nextButtonProps | Object | - | 下一步按钮，示例：`{ content: '下一步', theme: 'primary' }`。TS 类型：`ButtonProps` | N diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts index bff90e984..47d43363b 100644 --- a/src/config-provider/type.ts +++ b/src/config-provider/type.ts @@ -9,8 +9,7 @@ import { CalendarController } from '../calendar'; import { ButtonProps } from '../button'; import { FormErrorMessage } from '../form'; import { MessageOptions } from '../message'; -import { ImageProps } from '../image'; -import { TNode, SizeEnum } from '../common'; +import { TNode } from '../common'; export interface GlobalConfigProvider { /** @@ -576,11 +575,6 @@ export interface TableConfig { * @default '' */ selectAllText?: string; - /** - * 全局表格尺寸配置 - * @default medium - */ - size?: SizeEnum; /** * 语言配置，'点击升序' 描述文本 * @default '' @@ -839,10 +833,6 @@ export interface ImageConfig { * @default '' */ loadingText?: string; - /** - * 统一替换图片 `src` 地址，参数为组件的全部属性，返回值为新的图片地址 - */ - replaceImageSrc?: (params: ImageProps) => string; } export interface ImageViewerConfig { diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index e45329843..718593fcf 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/src/date-picker/date-picker.en-US.md @@ -1,32 +1,37 @@ :: BASE_DOC :: ## API + ### DatePicker Props name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N defaultTime | String | '00:00:00' | Time selector default value | N disableDate | Object / Array / Function | - | Typescript：`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N disabled | Boolean | - | make DatePicker to be disabled | N enableTimePicker | Boolean | false | \- | N -firstDayOfWeek | Number | 7 | options：1/2/3/4/5/6/7 | N +firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N format | String | 'YYYY-MM-DD' | \- | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N -mode | String | date | options：year/quarter/month/week/date | N +label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +mode | String | date | options: year/quarter/month/week/date | N placeholder | String / Array | undefined | Typescript：`string` | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript：`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N -presetsPlacement | String | bottom | options：left/top/right/bottom | N -size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -status | String | default | options：default/success/warning/error | N +presetsPlacement | String | bottom | options: left/top/right/bottom | N +selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +status | String | default | options: default/success/warning/error | N suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String / Number / Array / Date | '' | `v-model` is supported。Typescript：`DateValue` `type DateValue = string \| number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +valueDisplay | String / Slot / Function | - | `MouseEvent`。Typescript：`string \| TNode<{ value: DateValue; displayValue?: DateValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N valueType | String | - | Typescript：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N onBlur | Function | | Typescript：`(context: { value: DateValue; e: FocusEvent }) => void`
| N onChange | Function | | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`

`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
| N @@ -46,35 +51,39 @@ focus | `(context: { value: DateValue; e: FocusEvent })` | \- pick | `(value: DateValue)` | \- preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- + ### DateRangePicker Props name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N +borderless | Boolean | false | \- | N +cancelRangeSelectLimit | Boolean | false | The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted. | N clearable | Boolean | false | \- | N defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N disableDate | Object / Array / Function | - | Typescript：`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N disabled | Boolean | - | \- | N enableTimePicker | Boolean | false | \- | N -firstDayOfWeek | Number | - | options：1/2/3/4/5/6/7 | N +firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N format | String | - | \- | N -mode | String | date | options：year/quarter/month/week/date | N +label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +mode | String | date | options: year/quarter/month/week/date | N panelPreselection | Boolean | true | \- | N placeholder | String / Array | - | Typescript：`string \| Array` | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N -presetsPlacement | String | bottom | options：left/top/right/bottom | N +presetsPlacement | String | bottom | options: left/top/right/bottom | N rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N separator | String | - | \- | N -size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -status | String | default | options：default/success/warning/error | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +status | String | default | options: default/success/warning/error | N suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | Array | [] | `v-model` is supported。Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N defaultValue | Array | [] | uncontrolled property。Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N -valueType | String | - | options：time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N +valueType | String | - | options: time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N onBlur | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N onChange | Function | | Typescript：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
| N onConfirm | Function | | Typescript：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`
| N @@ -95,6 +104,7 @@ input | `(context: { input: string; value: DateRangeValue; partial: DateRangePic pick | `(value: DateValue, context: PickContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- + ### DatePickerPanel Props name | type | default | description | required @@ -123,6 +133,7 @@ preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- time-change | `(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`
year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
+ ### DateRangePickerPanel Props name | type | default | description | required diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index d0598b773..9a349b505 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -1,11 +1,13 @@ :: BASE_DOC :: ## API + ### DatePicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许输入日期 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否显示清除按钮 | N defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | N disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N @@ -21,6 +23,7 @@ popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupPr prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型：`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域（包含确定按钮）。可选项：left/top/right/bottom | N +selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N status | String | default | 输入框状态。可选项：default/success/warning/error | N suffixIcon | Slot / Function | - | 用于自定义组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -28,6 +31,7 @@ timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`Tim tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String / Number / Array / Date | '' | 选中值。支持语法糖 `v-model`。TS 类型：`DateValue` `type DateValue = string \| number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +valueDisplay | String / Slot / Function | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: DateValue; displayValue?: DateValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType`。TS 类型：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N onBlur | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`
当输入框失去焦点时触发 | N onChange | Function | | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`

`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
| N @@ -47,11 +51,14 @@ focus | `(context: { value: DateValue; e: FocusEvent })` | 输入框获得焦点 pick | `(value: DateValue)` | 面板选中值后触发 preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发 + ### DateRangePicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许输入日期 | N +borderless | Boolean | false | 无边框模式 | N +cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N clearable | Boolean | false | 是否显示清除按钮 | N defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N @@ -97,9 +104,10 @@ input | `(context: { input: string; value: DateRangeValue; partial: DateRangePic pick | `(value: DateValue, context: PickContext)` | 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发 + ### DatePickerPanel Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | N `Pick` | \- | - | 继承 `Pick` 中的全部属性 | N @@ -125,9 +133,10 @@ preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设 time-change | `(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent })` | 时间切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`
year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | 年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
+ ### DateRangePickerPanel Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N `Pick` | \- | - | 继承 `Pick` 中的全部属性 | N diff --git a/src/date-picker/date-range-picker-panel-props.ts b/src/date-picker/date-range-picker-panel-props.ts index d3af3fc67..50f121ea6 100644 --- a/src/date-picker/date-range-picker-panel-props.ts +++ b/src/date-picker/date-range-picker-panel-props.ts @@ -11,7 +11,7 @@ export default { /** 时间选择器默认值，当 value/defaultValue 未设置值时有效 */ defaultTime: { type: Array as PropType, - default: (): TdDateRangePickerPanelProps['defaultTime'] => ['00:00:00', '23:59:59'], + default: (): TdDateRangePickerPanelProps['defaultTime'] => ["00:00:00", "23:59:59"], }, /** 点击日期单元格时触发 */ onCellClick: Function as PropType, diff --git a/src/date-picker/date-range-picker-props.ts b/src/date-picker/date-range-picker-props.ts index 548de5881..4c1ab677e 100644 --- a/src/date-picker/date-range-picker-props.ts +++ b/src/date-picker/date-range-picker-props.ts @@ -10,12 +10,16 @@ import { PropType } from 'vue'; export default { /** 是否允许输入日期 */ allowInput: Boolean, + /** 无边框模式 */ + borderless: Boolean, + /** 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 */ + cancelRangeSelectLimit: Boolean, /** 是否显示清除按钮 */ clearable: Boolean, /** 时间选择器默认值，当 value/defaultValue 未设置值时有效 */ defaultTime: { type: Array as PropType, - default: (): TdDateRangePickerProps['defaultTime'] => ['00:00:00', '23:59:59'], + default: (): TdDateRangePickerProps['defaultTime'] => ["00:00:00", "23:59:59"], }, /** 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用 */ disableDate: { @@ -135,17 +139,7 @@ export default { type: String as PropType, validator(val: TdDateRangePickerProps['valueType']): boolean { if (!val) return true; - return [ - 'time-stamp', - 'Date', - 'YYYY', - 'YYYY-MM', - 'YYYY-MM-DD', - 'YYYY-MM-DD HH', - 'YYYY-MM-DD HH:mm', - 'YYYY-MM-DD HH:mm:ss', - 'YYYY-MM-DD HH:mm:ss:SSS', - ].includes(val); + return ['time-stamp', 'Date', 'YYYY', 'YYYY-MM', 'YYYY-MM-DD', 'YYYY-MM-DD HH', 'YYYY-MM-DD HH:mm', 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss:SSS'].includes(val); }, }, /** 当输入框失去焦点时触发 */ diff --git a/src/date-picker/props.ts b/src/date-picker/props.ts index 84511a072..5437210e5 100644 --- a/src/date-picker/props.ts +++ b/src/date-picker/props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 是否允许输入日期 */ allowInput: Boolean, + /** 无边框模式 */ + borderless: Boolean, /** 是否显示清除按钮 */ clearable: Boolean, /** 时间选择器默认值，当 value/defaultValue 未设置值时有效 */ @@ -81,6 +83,10 @@ export default { return ['left', 'top', 'right', 'bottom'].includes(val); }, }, + /** 透传 SelectInput 筛选器输入框组件的全部属性 */ + selectInputProps: { + type: Object as PropType, + }, /** 输入框尺寸 */ size: { type: String as PropType, @@ -121,6 +127,10 @@ export default { type: [String, Number, Array, Date] as PropType, default: '', }, + /** 自定义选中项呈现的内容 */ + valueDisplay: { + type: [String, Function] as PropType, + }, /** 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType` */ valueType: { type: String as PropType, diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index 7dcb6a5ba..3c342bacb 100644 --- a/src/date-picker/type.ts +++ b/src/date-picker/type.ts @@ -6,6 +6,7 @@ import { InputProps } from '../input'; import { PopupProps } from '../popup'; +import { SelectInputProps } from '../select-input'; import { TimePickerProps } from '../time-picker'; import { Dayjs } from 'dayjs'; import { RangeInputProps } from '../range-input'; @@ -17,6 +18,11 @@ export interface TdDatePickerProps { * @default false */ allowInput?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否显示清除按钮 * @default false @@ -53,7 +59,7 @@ export interface TdDatePickerProps { */ inputProps?: InputProps; /** - * 左侧内容 + * 左侧文本 */ label?: string | TNode; /** @@ -82,6 +88,10 @@ export interface TdDatePickerProps { * @default bottom */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; + /** + * 透传 SelectInput 筛选器输入框组件的全部属性 + */ + selectInputProps?: SelectInputProps; /** * 输入框尺寸 * @default medium @@ -114,6 +124,10 @@ export interface TdDatePickerProps { * @default '' */ defaultValue?: DateValue; + /** + * 自定义选中项呈现的内容 + */ + valueDisplay?: string | TNode<{ value: DateValue; displayValue?: DateValue }>; /** * 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType` * @default '' @@ -151,6 +165,16 @@ export interface TdDateRangePickerProps { * @default false */ allowInput?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; + /** + * 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 + * @default false + */ + cancelRangeSelectLimit?: boolean; /** * 是否显示清除按钮 * @default false diff --git a/src/date-range-picker/date-range-picker.en-US.md b/src/date-range-picker/date-range-picker.en-US.md new file mode 100644 index 000000000..705ccff98 --- /dev/null +++ b/src/date-range-picker/date-range-picker.en-US.md @@ -0,0 +1,52 @@ +:: BASE_DOC :: + +## API +### DateRangePicker Props + +name | type | default | description | required +-- | -- | -- | -- | -- +allowInput | Boolean | false | \- | N +cancelRangeSelectLimit | Boolean | false | The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted. | N +clearable | Boolean | false | \- | N +defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N +disableDate | Object / Array / Function | - | Typescript：`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +disabled | Boolean | - | \- | N +enableTimePicker | Boolean | false | \- | N +firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N +format | String | - | \- | N +mode | String | date | options: year/quarter/month/week/date | N +panelPreselection | Boolean | true | \- | N +placeholder | String / Array | - | Typescript：`string \| Array` | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +presets | Object | - | Typescript：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +presetsPlacement | String | bottom | options: left/top/right/bottom | N +rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +separator | String | - | \- | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +status | String | default | options: default/success/warning/error | N +suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +value | Array | [] | `v-model` is supported。Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +defaultValue | Array | [] | uncontrolled property。Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +valueType | String | - | options: time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N +onBlur | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N +onChange | Function | | Typescript：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
| N +onConfirm | Function | | Typescript：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`
| N +onFocus | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N +onInput | Function | | Typescript：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`
| N +onPick | Function | | Typescript：`(value: DateValue, context: PickContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N +onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`
| N + +### DateRangePicker Events + +name | params | description +-- | -- | -- +blur | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | \- +change | `(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
+confirm | `(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial })` | \- +focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | \- +input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | \- +pick | `(value: DateValue, context: PickContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
+preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- diff --git a/src/date-range-picker/date-range-picker.md b/src/date-range-picker/date-range-picker.md new file mode 100644 index 000000000..1ce2d1ced --- /dev/null +++ b/src/date-range-picker/date-range-picker.md @@ -0,0 +1,52 @@ +:: BASE_DOC :: + +## API +### DateRangePicker Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +allowInput | Boolean | false | 是否允许输入日期 | N +cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N +clearable | Boolean | false | 是否显示清除按钮 | N +defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N +disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +disabled | Boolean | - | 是否禁用组件 | N +enableTimePicker | Boolean | false | 是否显示时间选择 | N +firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N +format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N +mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N +panelPreselection | Boolean | true | 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 | N +placeholder | String / Array | - | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array` | N +popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +presets | Object | - | 预设快捷日期选择，示例：{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +presetsPlacement | String | bottom | 预设面板展示区域（包含确定按钮）。可选项：left/top/right/bottom | N +rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +separator | String | - | 日期分隔符，支持全局配置，默认为 '-' | N +size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +status | String | default | 输入框状态。可选项：default/success/warning/error | N +suffixIcon | Slot / Function | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +value | Array | [] | 选中值。支持语法糖 `v-model`。TS 类型：`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N +onBlur | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
当输入框失去焦点时触发 | N +onChange | Function | | TS 类型：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
| N +onConfirm | Function | | TS 类型：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`
如果存在“确定”按钮，则点击“确定”按钮时触发 | N +onFocus | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
输入框获得焦点时触发 | N +onInput | Function | | TS 类型：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`
输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值 | N +onPick | Function | | TS 类型：`(value: DateValue, context: PickContext) => void`
选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
| N +onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`
点击预设按钮后触发 | N + +### DateRangePicker Events + +名称 | 参数 | 描述 +-- | -- | -- +blur | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | 当输入框失去焦点时触发 +change | `(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource })` | 选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
+confirm | `(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial })` | 如果存在“确定”按钮，则点击“确定”按钮时触发 +focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | 输入框获得焦点时触发 +input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | 输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值 +pick | `(value: DateValue, context: PickContext)` | 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
+preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发 diff --git a/src/descriptions/description-item-props.ts b/src/descriptions/description-item-props.ts index 0ecbc8088..326c57e3d 100644 --- a/src/descriptions/description-item-props.ts +++ b/src/descriptions/description-item-props.ts @@ -8,6 +8,14 @@ import { TdDescriptionItemProps } from '../descriptions/type'; import { PropType } from 'vue'; export default { + /** 内容垂直对齐方式，DescriptionItem.align 优先级高于 Descriptions.align */ + align: { + type: String as PropType, + validator(val: TdDescriptionItemProps['align']): boolean { + if (!val) return true; + return ['top', 'middle', 'bottom'].includes(val); + }, + }, /** 描述项内容 */ content: { type: [String, Function] as PropType, diff --git a/src/descriptions/descriptions.en-US.md b/src/descriptions/descriptions.en-US.md index 04bebaab0..27fe111d6 100644 --- a/src/descriptions/descriptions.en-US.md +++ b/src/descriptions/descriptions.en-US.md @@ -1,17 +1,17 @@ :: BASE_DOC :: ## API - ### Descriptions Props name | type | default | description | required -- | -- | -- | -- | -- +align | String | - | content align type。options: top/middle/bottom | N bordered | Boolean | false | set description list with grey border | N colon | Boolean | - | set label with ":" on the right | N -column | Number | 2 | count of DescriptionItem in one row | N +columns | Number | 2 | count of DescriptionItem in one row | N contentStyle | Object | - | style of description cotent。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N itemLayout | String | horizontal | layout direction of description item。options: horizontal/vertical | N -items | Array | - | list of descriptions items。Typescript：`Array` | N +items | Array | - | list of descriptions items。Typescript：`Array` | N labelStyle | Object | - | style of description item。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N layout | String | horizontal | layout direction。options: horizontal/vertical | N size | String | medium | a descriptions has three size。options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -21,6 +21,7 @@ title | String / Slot / Function | - | title of descriptions。Typescript：`str name | type | default | description | required -- | -- | -- | -- | -- +align | String | - | content align type。options: top/middle/bottom | N content | String / Slot / Function | - | content of description item。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | content of description item。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | label of description item。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/descriptions/descriptions.md b/src/descriptions/descriptions.md index 1f5df50bd..06a9eb39d 100644 --- a/src/descriptions/descriptions.md +++ b/src/descriptions/descriptions.md @@ -1,17 +1,17 @@ :: BASE_DOC :: ## API - ### Descriptions Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- +align | String | - | 内容垂直对齐方式，DescriptionItem.align 优先级高于 Descriptions.align。可选项：top/middle/bottom | N bordered | Boolean | false | 是否带边框 | N colon | Boolean | - | 字段名右侧是否携带冒号“：” | N -column | Number | 2 | 一行 `DescriptionItem` 的数量 | N +columns | Number | 2 | 一行 `DescriptionItem` 的数量 | N contentStyle | Object | - | 自定义描述项内容的样式。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N itemLayout | String | horizontal | 描述项的排列方向。可选项：horizontal/vertical | N -items | Array | - | 描述项的列表。TS 类型：`Array` | N +items | Array | - | 描述项的列表。TS 类型：`Array` | N labelStyle | Object | - | 自定义描述项标签的样式。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N layout | String | horizontal | 排列方向。可选项：horizontal/vertical | N size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -21,6 +21,7 @@ title | String / Slot / Function | - | 描述列表的标题。TS 类型：`stri 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- +align | String | - | 内容垂直对齐方式，DescriptionItem.align 优先级高于 Descriptions.align。可选项：top/middle/bottom | N content | String / Slot / Function | - | 描述项内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 描述项内容，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | 描述项标签。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/descriptions/props.ts b/src/descriptions/props.ts index 23af8624e..17283f232 100644 --- a/src/descriptions/props.ts +++ b/src/descriptions/props.ts @@ -8,12 +8,20 @@ import { TdDescriptionsProps } from './type'; import { PropType } from 'vue'; export default { + /** 内容垂直对齐方式，DescriptionItem.align 优先级高于 Descriptions.align */ + align: { + type: String as PropType, + validator(val: TdDescriptionsProps['align']): boolean { + if (!val) return true; + return ['top', 'middle', 'bottom'].includes(val); + }, + }, /** 是否带边框 */ bordered: Boolean, /** 字段名右侧是否携带冒号“：” */ colon: Boolean, /** 一行 `DescriptionItem` 的数量 */ - column: { + columns: { type: Number, default: 2, }, diff --git a/src/descriptions/type.ts b/src/descriptions/type.ts index 9190783dc..9d63b47fb 100644 --- a/src/descriptions/type.ts +++ b/src/descriptions/type.ts @@ -7,6 +7,10 @@ import { TNode, SizeEnum, Styles } from '../common'; export interface TdDescriptionsProps { + /** + * 内容垂直对齐方式，DescriptionItem.align 优先级高于 Descriptions.align + */ + align?: 'top' | 'middle' | 'bottom'; /** * 是否带边框 * @default false @@ -20,7 +24,7 @@ export interface TdDescriptionsProps { * 一行 `DescriptionItem` 的数量 * @default 2 */ - column?: number; + columns?: number; /** * 自定义描述项内容的样式 */ @@ -33,7 +37,7 @@ export interface TdDescriptionsProps { /** * 描述项的列表 */ - items?: Array; + items?: Array; /** * 自定义描述项标签的样式 */ @@ -55,6 +59,10 @@ export interface TdDescriptionsProps { } export interface TdDescriptionItemProps { + /** + * 内容垂直对齐方式，DescriptionItem.align 优先级高于 Descriptions.align + */ + align?: 'top' | 'middle' | 'bottom'; /** * 描述项内容 */ diff --git a/src/dialog/dialog-card-props.ts b/src/dialog/dialog-card-props.ts new file mode 100644 index 000000000..06951ece0 --- /dev/null +++ b/src/dialog/dialog-card-props.ts @@ -0,0 +1,8 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +export default { +}; diff --git a/src/dialog/dialog.en-US.md b/src/dialog/dialog.en-US.md index 8707ab8c4..ab3a7030a 100644 --- a/src/dialog/dialog.en-US.md +++ b/src/dialog/dialog.en-US.md @@ -1,64 +1,31 @@ :: BASE_DOC :: -### Plugin or function invocations - -#### Plugin invocations - -- `this.$dialog(options)`, or - -- `this.$dialog.confirm(options)`, or - -- `this.$dialog.alert(options)` - -#### Function invocations - -- `DialogPlugin(options)`, or - -- `DialogPlugin.confirm(options)`, or - -- `DialogPlugin.alert(options)` - -#### Component instance methods - -A component instance refers to `DialogInstance = this.$dialog(options)` or `DialogInstance = DialogPlugin(options)`. - -- Destroying a dialog: `DialogInstance.destroy()` - -- Hiding a dialog: `DialogInstance.hide()` - -- Showing a dialog: `DialogInstance.show()` - -- Updating a dialog: `DialogInstance.update()` - -Note that in the following demo, there are multiple instances where DOM elements are not being destroyed. In real-world applications, it is important to consider destroying DOM elements. Otherwise, when users repeatedly click and create instances from plugin or function invocations, a large number of DOM elements can accumulate, leading to potential memory leaks. - -{{ plugin }} - ## API ### DialogCard Props name | type | default | description | required -- | -- | -- | -- | -- -`Pick` | String / Slot / Function | - | extends `Pick`. Typescript: `string \| TNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +`Pick` | String / Slot / Function | - | extends `Pick`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N ### Dialog Props name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | - | Typescript: `AttachNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -body | String / Slot / Function | - | Typescript: `string \| TNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -cancelBtn | String / Object / Slot / Function | - | Typescript: `string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api). [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts). [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N -closeBtn | String / Boolean / Slot / Function | true | Typescript: `string \| boolean \| TNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -closeOnEscKeydown | Boolean | true | \- | N +attach | String / Function | - | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +body | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +cancelBtn | String / Object / Slot / Function | - | Typescript：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N +closeBtn | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +closeOnEscKeydown | Boolean | true | trigger dialog close event on `ESC` keydown | N closeOnOverlayClick | Boolean | true | \- | N -confirmBtn | String / Object / Slot / Function | - | Typescript: `string \| ButtonProps \| TNode \| null`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +confirmBtn | String / Object / Slot / Function | - | Typescript：`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N confirmLoading | Boolean | undefined | confirm button loading status | N confirmOnEnter | Boolean | - | confirm on enter | N -default | String / Slot / Function | - | Typescript: `string \| TNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnClose | Boolean | false | \- | N +dialogClassName | String | - | \- | N draggable | Boolean | false | \- | N -footer | Boolean / Slot / Function | true | Typescript: `boolean \| TNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -header | String / Boolean / Slot / Function | true | Typescript: `string \| boolean \| TNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +footer | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +header | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N mode | String | modal | options: modal/modeless/full-screen | N placement | String | top | options: top/center | N preventScrollThrough | Boolean | true | \- | N @@ -69,21 +36,21 @@ top | String / Number | - | \- | N visible | Boolean | - | \- | N width | String / Number | - | \- | N zIndex | Number | - | \- | N -onCancel | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N -onClose | Function | | Typescript: `(context: DialogCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts).
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N -onCloseBtnClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N -onClosed | Function | | Typescript: `() => void`
| N -onConfirm | Function | | Typescript: `(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N -onEscKeydown | Function | | Typescript: `(context: { e: KeyboardEvent }) => void`
| N -onOpened | Function | | Typescript: `() => void`
| N -onOverlayClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N +onClose | Function | | Typescript：`(context: DialogCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N +onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N +onClosed | Function | | Typescript：`() => void`
| N +onConfirm | Function | | Typescript：`(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N +onEscKeydown | Function | | Typescript：`(context: { e: KeyboardEvent }) => void`
| N +onOpened | Function | | Typescript：`() => void`
| N +onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N ### Dialog Events name | params | description -- | -- | -- cancel | `(context: { e: MouseEvent })` | \- -close | `(context: DialogCloseContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts).
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
+close | `(context: DialogCloseContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
close-btn-click | `(context: { e: MouseEvent })` | \- closed | \- | \- confirm | `(context: { e: MouseEvent \| KeyboardEvent })` | \- @@ -95,9 +62,9 @@ overlay-click | `(context: { e: MouseEvent })` | \- name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript: `AttachNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N className | String | - | \- | N -style | String / Object | - | Typescript: `string \| Styles`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +style | String / Object | - | Typescript：`string \| Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N `Omit` | \- | - | extends `Omit` | N ### DialogInstance @@ -106,36 +73,32 @@ name | params | return | description -- | -- | -- | -- destroy | \- | \- | required hide | \- | \- | required -setConfirmLoading | `(loading: boolean)` | \- | required. set confirm button loading status +setConfirmLoading | `(loading: boolean)` | \- | required。set confirm button loading status show | \- | \- | required update | `(props: DialogOptions)` | \- | required ### DialogPlugin -Also supports `this.$dialog`. +同时也支持 `this.$dialog`。 name | params | default | description -- | -- | -- | -- -options | \- | - | Typescript: `DialogOptions` +options | \- | - | Typescript：`DialogOptions` -The plugin returns `DialogInstance`. +插件返回值：`DialogInstance` ### DialogPlugin.confirm -Also supports `this.$dialog.confirm`. +同时也支持 `this.$dialog.confirm`。 name | params | default | description -- | -- | -- | -- -options | \- | - | Typescript: `DialogOptions` - -The plugin returns `DialogInstance`. +options | \- | - | Typescript：`DialogOptions` ### DialogPlugin.alert -Also supports `this.$dialog.alert`. +同时也支持 `this.$dialog.alert`。 name | params | default | description -- | -- | -- | -- -options | Object | - | Typescript: `Omit` - -The plugin returns `DialogInstance`. +options | Object | - | Typescript：`Omit` diff --git a/src/dialog/dialog.md b/src/dialog/dialog.md index 88d3eac51..a821e593a 100644 --- a/src/dialog/dialog.md +++ b/src/dialog/dialog.md @@ -1,40 +1,12 @@ :: BASE_DOC :: -### 插件函数式调用 - -#### 插件调用 - -- 方式一：`this.$dialog(options)` - -- 方式二：`this.$dialog.confirm(options)` - -- 方式三：`this.$dialog.alert(options)` - -#### 函数调用 - -- 方式一：`DialogPlugin(options)` - -- 方式二：`DialogPlugin.confirm(options)` - -- 方式三：`DialogPlugin.alert(options)` - -#### 组件实例方法 - -组件实例指的是 `DialogInstance = this.$dialog(options)` 或者 `DialogInstance = DialogPlugin(options)`。 - -- 销毁弹框：`DialogInstance.destroy()` - -- 隐藏弹框：`DialogInstance.hide()` - -- 显示弹窗：`DialogInstance.show()` - -- 更新弹框：`DialogInstance.update()` - -注意在以下使用示例中，有多处并未销毁 DOM 元素。在实际应用中，需要考虑销毁 DOM 元素，否则当用户重复点击、创建插件或函数调用的实例后，会产生大量 DOM 元素、容易造成内存泄漏。 +## API +### DialogCard Props -{{ plugin }} +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +`Pick` | String / Slot / Function | - | 继承 `Pick` 中的全部属性。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -## API ### Dialog Props 名称 | 类型 | 默认值 | 说明 | 必传 @@ -50,6 +22,7 @@ confirmLoading | Boolean | undefined | 确认按钮加载状态 | N confirmOnEnter | Boolean | - | 是否在按下回车键时，触发确认事件 | N default | String / Slot / Function | - | 对话框内容，同 body。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N +dialogClassName | String | - | 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' | N draggable | Boolean | false | 对话框是否可以拖拽（仅在非模态对话框时有效） | N footer | Boolean / Slot / Function | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N header | String / Boolean / Slot / Function | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -122,8 +95,6 @@ options | \- | - | TS 类型：`DialogOptions` -- | -- | -- | -- options | \- | - | TS 类型：`DialogOptions` -插件返回值：`DialogInstance` - ### DialogPlugin.alert 同时也支持 `this.$dialog.alert`。 @@ -131,5 +102,3 @@ options | \- | - | TS 类型：`DialogOptions` 参数名称 | 参数类型 | 参数默认值 | 参数说明 -- | -- | -- | -- options | Object | - | TS 类型：`Omit` - -插件返回值：`DialogInstance` diff --git a/src/dialog/props.ts b/src/dialog/props.ts index d3022946e..f60f10ad7 100644 --- a/src/dialog/props.ts +++ b/src/dialog/props.ts @@ -52,6 +52,11 @@ export default { }, /** 是否在关闭弹框的时候销毁子元素 */ destroyOnClose: Boolean, + /** 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' */ + dialogClassName: { + type: String, + default: '', + }, /** 对话框是否可以拖拽（仅在非模态对话框时有效） */ draggable: Boolean, /** 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容 */ @@ -70,7 +75,7 @@ export default { default: 'modal' as TdDialogProps['mode'], validator(val: TdDialogProps['mode']): boolean { if (!val) return true; - return ['modal', 'normal', 'modeless', 'full-screen'].includes(val); + return ['modal', 'modeless', 'full-screen'].includes(val); }, }, /** 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小 */ diff --git a/src/dialog/type.ts b/src/dialog/type.ts index 8d4f4aebd..48ac005dc 100644 --- a/src/dialog/type.ts +++ b/src/dialog/type.ts @@ -54,6 +54,11 @@ export interface TdDialogProps { * @default false */ destroyOnClose?: boolean; + /** + * 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' + * @default '' + */ + dialogClassName?: string; /** * 对话框是否可以拖拽（仅在非模态对话框时有效） * @default false @@ -73,7 +78,7 @@ export interface TdDialogProps { * 对话框类型，有 3 种：模态对话框、非模态对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 * @default modal */ - mode?: 'modal' | 'modeless' | 'normal' | 'full-screen'; + mode?: 'modal' | 'modeless' | 'full-screen'; /** * 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小 * @default top diff --git a/src/drawer/drawer.en-US.md b/src/drawer/drawer.en-US.md index 8221d2232..9598e141e 100644 --- a/src/drawer/drawer.en-US.md +++ b/src/drawer/drawer.en-US.md @@ -1,28 +1,29 @@ :: BASE_DOC :: ## API + ### Drawer Props name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | '' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +attach | String / Function | - | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N body | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -cancelBtn | String / Object / Slot / Function | '' | Typescript：`FooterButton` | N +cancelBtn | String / Object / Slot / Function | - | Typescript：`FooterButton` | N closeBtn | String / Boolean / Slot / Function | - | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -closeOnEscKeydown | Boolean | true | \- | N +closeOnEscKeydown | Boolean | true | trigger drawer close event on `ESC` keydown | N closeOnOverlayClick | Boolean | true | \- | N -confirmBtn | String / Object / Slot / Function | '' | Typescript：`FooterButton` `type FooterButton = string \| ButtonProps \| TNode`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts) | N +confirmBtn | String / Object / Slot / Function | - | Typescript：`FooterButton` `type FooterButton = string \| ButtonProps \| TNode`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnClose | Boolean | false | \- | N footer | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N header | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -mode | String | overlay | options：overlay/push | N -placement | String | right | options：left/right/top/bottom | N +mode | String | overlay | options: overlay/push | N +placement | String | right | options: left/right/top/bottom | N preventScrollThrough | Boolean | true | \- | N showInAttachedElement | Boolean | false | \- | N showOverlay | Boolean | true | \- | N size | String | 'small' | \- | N -sizeDraggable | Boolean | false | \- | N +sizeDraggable | Boolean / Object | false | allow resizing drawer width/height, set `max` or `min` to limit size。Typescript：`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts) | N visible | Boolean | false | \- | N zIndex | Number | - | \- | N onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N @@ -31,6 +32,7 @@ onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => vo onConfirm | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onEscKeydown | Function | | Typescript：`(context: { e: KeyboardEvent }) => void`
| N onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N +onSizeDragEnd | Function | | Typescript：`(context: { e: MouseEvent; size: number }) => void`
trigger on size drag end | N ### Drawer Events @@ -42,6 +44,7 @@ close-btn-click | `(context: { e: MouseEvent })` | \- confirm | `(context: { e: MouseEvent })` | \- esc-keydown | `(context: { e: KeyboardEvent })` | \- overlay-click | `(context: { e: MouseEvent })` | \- +size-drag-end | `(context: { e: MouseEvent; size: number })` | trigger on size drag end ### DrawerOptions @@ -49,8 +52,7 @@ name | type | default | description | required -- | -- | -- | -- | -- attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N className | String | - | \- | N -style | String / Object | - | Typescript：`string \| Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -`Omit` | \- | - | \- | N +`Omit` | \- | - | extends `Omit` | N ### DrawerInstance diff --git a/src/drawer/drawer.md b/src/drawer/drawer.md index d13e6b803..14632e1f1 100644 --- a/src/drawer/drawer.md +++ b/src/drawer/drawer.md @@ -1,17 +1,18 @@ :: BASE_DOC :: ## API + ### Drawer Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -attach | String / Function | '' | 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +attach | String / Function | - | 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N body | String / Slot / Function | - | 抽屉内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -cancelBtn | String / Object / Slot / Function | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`FooterButton` | N +cancelBtn | String / Object / Slot / Function | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`FooterButton` | N closeBtn | String / Boolean / Slot / Function | - | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发抽屉关闭事件 | N closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N -confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`FooterButton` `type FooterButton = string \| ButtonProps \| TNode`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts) | N +confirmBtn | String / Object / Slot / Function | - | 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`FooterButton` `type FooterButton = string \| ButtonProps \| TNode`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts) | N default | String / Slot / Function | - | 抽屉内容，同 body。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnClose | Boolean | false | 抽屉关闭时是否销毁节点 | N footer | Boolean / Slot / Function | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 或 null 不显示任何内容，值类型为 TNode 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -22,7 +23,7 @@ preventScrollThrough | Boolean | true | 防止滚动穿透 | N showInAttachedElement | Boolean | false | 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative | N showOverlay | Boolean | true | 是否显示遮罩层 | N size | String | 'small' | 尺寸，支持 'small', 'medium', 'large'，'35px', '30%', '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度 | N -sizeDraggable | Boolean | false | 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度 | N +sizeDraggable | Boolean / Object | false | 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度。`sizeDraggable.max` 和 `sizeDraggable.min` 用于控制拖拽尺寸大小限制。TS 类型：`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts) | N visible | Boolean | false | 组件是否可见 | N zIndex | Number | - | 抽屉层级，样式默认为 1500 | N onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 | N @@ -31,6 +32,7 @@ onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => voi onConfirm | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“确认”按钮存在，则点击“确认”按钮时触发 | N onEscKeydown | Function | | TS 类型：`(context: { e: KeyboardEvent }) => void`
按下 ESC 键时触发 | N onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果蒙层存在，点击蒙层时触发 | N +onSizeDragEnd | Function | | TS 类型：`(context: { e: MouseEvent; size: number }) => void`
抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 | N ### Drawer Events @@ -42,15 +44,15 @@ close-btn-click | `(context: { e: MouseEvent })` | 如果关闭按钮存在， confirm | `(context: { e: MouseEvent })` | 如果“确认”按钮存在，则点击“确认”按钮时触发 esc-keydown | `(context: { e: KeyboardEvent })` | 按下 ESC 键时触发 overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙层时触发 +size-drag-end | `(context: { e: MouseEvent; size: number })` | 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 ### DrawerOptions -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- attach | String / Function | 'body' | 抽屉挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N className | String | - | 抽屉类名，示例：'t-class-drawer-first t-class-drawer-second' | N -style | String / Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`string \| Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -`Omit` | \- | - | 继承 `Omit` 中的全部 API | N +`Omit` | \- | - | 继承 `Omit` 中的全部属性 | N ### DrawerInstance @@ -65,6 +67,6 @@ update | `(props: DrawerOptions)` | \- | 更新抽屉内容 同时也支持 `this.$drawer`。 -参数名称 | 参数类型 | 参数默认值 | 参数说明 +参数名称 | 参数类型 | 参数默认值 | 参数描述 -- | -- | -- | -- options | \- | - | TS 类型：`DrawerOptions` diff --git a/src/drawer/props.ts b/src/drawer/props.ts index b52f34480..ac62767de 100644 --- a/src/drawer/props.ts +++ b/src/drawer/props.ts @@ -11,7 +11,6 @@ export default { /** 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */ attach: { type: [String, Function] as PropType, - default: '', }, /** 抽屉内容 */ body: { @@ -20,7 +19,6 @@ export default { /** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 */ cancelBtn: { type: [String, Object, Function] as PropType, - default: '', }, /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 */ closeBtn: { @@ -39,7 +37,6 @@ export default { /** 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */ confirmBtn: { type: [String, Object, Function] as PropType, - default: '', }, /** 抽屉内容，同 body */ default: { @@ -92,8 +89,11 @@ export default { type: String, default: undefined, }, - /** 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度 */ - sizeDraggable: Boolean, + /** 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度。`sizeDraggable.max` 和 `sizeDraggable.min` 用于控制拖拽尺寸大小限制 */ + sizeDraggable: { + type: [Boolean, Object] as PropType, + default: false, + }, /** 组件是否可见 */ visible: Boolean, /** 抽屉层级，样式默认为 1500 */ @@ -112,4 +112,6 @@ export default { onEscKeydown: Function as PropType, /** 如果蒙层存在，点击蒙层时触发 */ onOverlayClick: Function as PropType, + /** 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 */ + onSizeDragEnd: Function as PropType, }; diff --git a/src/drawer/type.ts b/src/drawer/type.ts index 50a8707d6..7168187fc 100644 --- a/src/drawer/type.ts +++ b/src/drawer/type.ts @@ -10,7 +10,6 @@ import { TNode, Styles, AttachNode } from '../common'; export interface TdDrawerProps { /** * 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body - * @default '' */ attach?: AttachNode; /** @@ -19,7 +18,6 @@ export interface TdDrawerProps { body?: string | TNode; /** * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 - * @default '' */ cancelBtn?: FooterButton; /** @@ -36,7 +34,6 @@ export interface TdDrawerProps { closeOnOverlayClick?: boolean; /** * 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 - * @default '' */ confirmBtn?: FooterButton; /** @@ -88,10 +85,10 @@ export interface TdDrawerProps { */ size?: string; /** - * 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度 + * 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度。`sizeDraggable.max` 和 `sizeDraggable.min` 用于控制拖拽尺寸大小限制 * @default false */ - sizeDraggable?: boolean; + sizeDraggable?: boolean | SizeDragLimit; /** * 组件是否可见 * @default false @@ -125,6 +122,10 @@ export interface TdDrawerProps { * 如果蒙层存在，点击蒙层时触发 */ onOverlayClick?: (context: { e: MouseEvent }) => void; + /** + * 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 + */ + onSizeDragEnd?: (context: { e: MouseEvent; size: number }) => void; } export interface DrawerOptions extends Omit { @@ -165,6 +166,11 @@ export interface DrawerInstance { export type FooterButton = string | ButtonProps | TNode; +export interface SizeDragLimit { + max: number; + min: number; +} + export type DrawerEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay'; export interface DrawerCloseContext { diff --git a/src/dropdown/dropdown.en-US.md b/src/dropdown/dropdown.en-US.md index 12e3d0bba..cbe315162 100644 --- a/src/dropdown/dropdown.en-US.md +++ b/src/dropdown/dropdown.en-US.md @@ -5,16 +5,18 @@ name | type | default | description | required -- | -- | -- | -- | -- -direction | String | right | options：left/right | N +direction | String | right | options: left/right | N disabled | Boolean | false | \- | N hideAfterItemClick | Boolean | true | \- | N maxColumnWidth | String / Number | 100 | \- | N maxHeight | Number | 300 | \- | N minColumnWidth | String / Number | 10 | \- | N options | Array | [] | Typescript：`Array` `type DropdownOption = { children?: Array } & TdDropdownItemProps & Record`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dropdown/type.ts) | N -placement | String | bottom-left | options：top/left/right/bottom/top-left/top-right/bottom-left/bottom-right/left-top/left-bottom/right-top/right-bottom | N +panelBottomContent | String / Slot / Function | - | bottom content of the dropdown panel。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +panelTopContent | String / Slot / Function | - | top content of the dropdown panel。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +placement | String | bottom-left | options: top/left/right/bottom/top-left/top-right/bottom-left/bottom-right/left-top/left-bottom/right-top/right-bottom | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dropdown/type.ts) | N -trigger | String | hover | options：hover/click/focus/context-menu | N +trigger | String | hover | options: hover/click/focus/context-menu | N onClick | Function | | Typescript：`(dropdownItem: DropdownOption, context: { e: MouseEvent }) => void`
| N ### Dropdown Events @@ -32,7 +34,7 @@ content | String / Slot / Function | '' | Typescript：`string \| TNode`。[see disabled | Boolean | false | \- | N divider | Boolean | false | \- | N prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -theme | String | default | options：default/success/warning/error。Typescript：`DropdownItemTheme` `type DropdownItemTheme = 'default' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dropdown/type.ts) | N +theme | String | default | options: default/success/warning/error。Typescript：`DropdownItemTheme` `type DropdownItemTheme = 'default' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dropdown-menu/type.ts) | N value | String / Number / Object | - | Typescript：`string \| number \| { [key: string]: any }` | N onClick | Function | | Typescript：`(dropdownItem: DropdownOption, context: { e: MouseEvent }) => void`
| N diff --git a/src/dropdown/dropdown.md b/src/dropdown/dropdown.md index b739ba3bf..635f93915 100644 --- a/src/dropdown/dropdown.md +++ b/src/dropdown/dropdown.md @@ -1,17 +1,5 @@ :: BASE_DOC :: -### 绑定点击事件的下拉菜单 - -下拉菜单的操作项绑定 click 事件，常用于需要对每个操作项绑定不同的 click 事件的场景。 - -{{ event }} - -### 通过插槽方式使用下拉菜单 - -下拉菜单操作项支持通过插槽的方式传递操作项。 - -{{ slot }} - ## API ### Dropdown Props @@ -24,6 +12,8 @@ maxColumnWidth | String / Number | 100 | 选项最大宽度，内容超出时， maxHeight | Number | 300 | 弹窗最大高度，单位：px 。统一控制每一列的高度 | N minColumnWidth | String / Number | 10 | 选项最小宽度。值为字符串时，值就是最小宽度；值为数字时，单位：px | N options | Array | [] | 下拉操作项。TS 类型：`Array` `type DropdownOption = { children?: Array } & TdDropdownItemProps & Record`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dropdown/type.ts) | N +panelBottomContent | String / Slot / Function | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +panelTopContent | String / Slot / Function | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placement | String | bottom-left | 弹窗定位方式，可选值同 Popup 组件。可选项：top/left/right/bottom/top-left/top-right/bottom-left/bottom-right/left-top/left-bottom/right-top/right-bottom | N popupProps | Object | - | 透传 Popup 组件属性，方便更加自由地控制。比如使用 popupProps.overlayStyle 设置浮层样式。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dropdown/type.ts) | N trigger | String | hover | 触发下拉显示的方式。可选项：hover/click/focus/context-menu | N @@ -44,7 +34,7 @@ content | String / Slot / Function | '' | 下拉操作项内容。TS 类型：`s disabled | Boolean | false | 是否禁用操作项 | N divider | Boolean | false | 是否显示操作项之间的分隔线（分隔线默认在下方） | N prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -theme | String | default | 下拉菜单选项主题。可选项：default/success/warning/error。TS 类型：`DropdownItemTheme` `type DropdownItemTheme = 'default' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dropdown/type.ts) | N +theme | String | default | 下拉菜单选项主题。可选项：default/success/warning/error。TS 类型：`DropdownItemTheme` `type DropdownItemTheme = 'default' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dropdown-menu/type.ts) | N value | String / Number / Object | - | 下拉操作项唯一标识。TS 类型：`string \| number \| { [key: string]: any }` | N onClick | Function | | TS 类型：`(dropdownItem: DropdownOption, context: { e: MouseEvent }) => void`
点击时触发 | N diff --git a/src/dropdown/props.ts b/src/dropdown/props.ts index 234432f9a..208f6b1b9 100644 --- a/src/dropdown/props.ts +++ b/src/dropdown/props.ts @@ -50,20 +50,7 @@ export default { default: 'bottom-left' as TdDropdownProps['placement'], validator(val: TdDropdownProps['placement']): boolean { if (!val) return true; - return [ - 'top', - 'left', - 'right', - 'bottom', - 'top-left', - 'top-right', - 'bottom-left', - 'bottom-right', - 'left-top', - 'left-bottom', - 'right-top', - 'right-bottom', - ].includes(val); + return ['top', 'left', 'right', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'left-top', 'left-bottom', 'right-top', 'right-bottom'].includes(val); }, }, /** 透传 Popup 组件属性，方便更加自由地控制。比如使用 popupProps.overlayStyle 设置浮层样式 */ diff --git a/src/empty/empty.en-US.md b/src/empty/empty.en-US.md new file mode 100644 index 000000000..9ac69a137 --- /dev/null +++ b/src/empty/empty.en-US.md @@ -0,0 +1,13 @@ +:: BASE_DOC :: + +## API +### Empty Props + +name | type | default | description | required +-- | -- | -- | -- | -- +action | Slot / Function | - | action block。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +description | String / Slot / Function | - | empty component description。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +image | String / Slot / Function | - | image url, or Image component props, or custom any node you need.。Typescript：`string \| ImageProps \| TNode `，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/empty/type.ts) | N +imageStyle | Object | - | pass `Cascading Style Sheets` to image element。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +title | String / Slot / Function | - | empty component title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +type | String | empty | Empty component type。options: empty/success/fail/network-error/maintenance | N diff --git a/src/empty/empty.md b/src/empty/empty.md new file mode 100644 index 000000000..33e766224 --- /dev/null +++ b/src/empty/empty.md @@ -0,0 +1,13 @@ +:: BASE_DOC :: + +## API +### Empty Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +action | Slot / Function | - | 操作区域。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +description | String / Slot / Function | - | 描述文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +image | String / Slot / Function | - | 组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：``。TS 类型：`string \| ImageProps \| TNode `，[Image API Documents](./image?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/empty/type.ts) | N +imageStyle | Object | - | 透传图片样式表。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +title | String / Slot / Function | - | 错误标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +type | String | empty | 组件类型，如：空数据/成功/失败/网络错误/建设中。可选项：empty/success/fail/network-error/maintenance | N diff --git a/src/empty/props.ts b/src/empty/props.ts new file mode 100644 index 000000000..3855a199a --- /dev/null +++ b/src/empty/props.ts @@ -0,0 +1,40 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdEmptyProps } from './type'; +import { PropType } from 'vue'; + +export default { + /** 操作区域 */ + action: { + type: Function as PropType, + }, + /** 描述文字 */ + description: { + type: [String, Function] as PropType, + }, + /** 组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：`` */ + image: { + type: [String, Function] as PropType, + }, + /** 透传图片样式表 */ + imageStyle: { + type: Object as PropType, + }, + /** 错误标题 */ + title: { + type: [String, Function] as PropType, + }, + /** 组件类型，如：空数据/成功/失败/网络错误/建设中 */ + type: { + type: String as PropType, + default: 'empty' as TdEmptyProps['type'], + validator(val: TdEmptyProps['type']): boolean { + if (!val) return true; + return ['empty', 'success', 'fail', 'network-error', 'maintenance'].includes(val); + }, + }, +}; diff --git a/src/empty/type.ts b/src/empty/type.ts new file mode 100644 index 000000000..8fdf4f3dd --- /dev/null +++ b/src/empty/type.ts @@ -0,0 +1,36 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { ImageProps } from '../image'; +import { TNode, Styles } from '../common'; + +export interface TdEmptyProps { + /** + * 操作区域 + */ + action?: TNode; + /** + * 描述文字 + */ + description?: string | TNode; + /** + * 组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：`` + */ + image?: string | ImageProps | TNode; + /** + * 透传图片样式表 + */ + imageStyle?: Styles; + /** + * 错误标题 + */ + title?: string | TNode; + /** + * 组件类型，如：空数据/成功/失败/网络错误/建设中 + * @default empty + */ + type?: 'empty' | 'success' | 'fail' | 'network-error' | 'maintenance'; +} diff --git a/src/form/form.en-US.md b/src/form/form.en-US.md index 1e10f3449..57f40c1af 100644 --- a/src/form/form.en-US.md +++ b/src/form/form.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Form Props name | type | default | description | required @@ -14,6 +15,7 @@ labelAlign | String | right | options: left/right/top | N labelWidth | String / Number | '100px' | \- | N layout | String | vertical | options: vertical/inline | N preventSubmitDefault | Boolean | true | \- | N +readonly | Boolean | - | \- | N requiredMark | Boolean | true | \- | N resetType | String | empty | options: empty/initial | N rules | Object | - | Typescript：`FormRules` `type FormRules = { [field in keyof T]?: Array }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N @@ -44,6 +46,7 @@ submit | `(params?: { showErrorMessage?: boolean })` | \- | required validate | `(params?: FormValidateParams)` | `Promise>` | required。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface FormValidateParams { fields?: Array; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`

`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`
validateOnly | `(params?: Pick)` | `Promise>` | required + ### FormItem Props name | type | default | description | required diff --git a/src/form/form.md b/src/form/form.md index 49e0bf351..7f3180cf5 100644 --- a/src/form/form.md +++ b/src/form/form.md @@ -1,11 +1,10 @@ :: BASE_DOC :: - - ## API + ### Form Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- colon | Boolean | false | 是否在表单标签字段右侧显示冒号 | N data | Object | {} | 表单数据。TS 类型：`FormData` | N @@ -16,6 +15,7 @@ labelAlign | String | right | 表单字段标签对齐方式：左对齐、右 labelWidth | String / Number | '100px' | 可以整体设置label标签宽度，默认为100px | N layout | String | vertical | 表单布局，有两种方式：纵向布局 和 行内布局。可选项：vertical/inline | N preventSubmitDefault | Boolean | true | 是否阻止表单提交默认事件（表单提交默认事件会刷新页面），设置为 `true` 可以避免刷新 | N +readonly | Boolean | - | 是否整个表单只读 | N requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N resetType | String | empty | 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值。可选项：empty/initial | N rules | Object | - | 表单字段校验规则。TS 类型：`FormRules` `type FormRules = { [field in keyof T]?: Array }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N @@ -46,9 +46,10 @@ submit | `(params?: { showErrorMessage?: boolean })` | \- | 必需。提交表 validate | `(params?: FormValidateParams)` | `Promise>` | 必需。校验函数，包含错误文本提示等功能。泛型 `FormData` 表示表单数据 TS 类型。
【关于参数】`params.fields` 表示校验字段，如果设置了 `fields`，本次校验将仅对这些字段进行校验。`params.trigger` 表示本次触发校验的范围，'params.trigger = blur' 表示只触发校验规则设定为 trigger='blur' 的字段，'params.trigger = change' 表示只触发校验规则设定为 trigger='change' 的字段，默认触发全范围校验。`params.showErrorMessage` 表示校验结束后是否显示错误文本提示，默认显示。
【关于返回值】返回值为 true 表示校验通过；如果校验不通过，返回值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface FormValidateParams { fields?: Array; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`

`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`
validateOnly | `(params?: Pick)` | `Promise>` | 必需。纯净的校验函数，仅返回校验结果，不对组件进行任何操作。泛型 `FormData` 表示表单数据 TS 类型。参数和返回值含义同 `validate` 方法 + ### FormItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- for | String | - | label 原生属性 | N help | String / Slot / Function | - | 表单项说明内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -66,7 +67,7 @@ tips | String / Slot / Function | - | 自定义提示内容，样式跟随 `stat ### FormRule -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- boolean | Boolean | - | 内置校验方法，校验值类型是否为布尔类型，示例：`{ boolean: true, message: '数据类型必须是布尔类型' }` | N date | Boolean / Object | - | 内置校验方法，校验值是否为日期格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ date: { delimiters: '-' }, message: '日期分隔线必须是短横线（-）' }`。TS 类型：`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N @@ -89,7 +90,7 @@ whitespace | Boolean | - | 内置校验方法，校验值是否为空格。示 ### FormErrorMessage -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- boolean | String | - | 布尔类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}数据类型必须是布尔类型'` | N date | String | - | 日期校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N diff --git a/src/form/props.ts b/src/form/props.ts index eebf0882e..1669031da 100644 --- a/src/form/props.ts +++ b/src/form/props.ts @@ -56,6 +56,8 @@ export default { type: Boolean, default: true, }, + /** 是否整个表单只读 */ + readonly: Boolean, /** 是否显示必填符号（*），默认显示 */ requiredMark: { type: Boolean, diff --git a/src/form/type.ts b/src/form/type.ts index 6b08a220d..1aa31ff0f 100644 --- a/src/form/type.ts +++ b/src/form/type.ts @@ -51,6 +51,10 @@ export interface TdFormProps { * @default true */ preventSubmitDefault?: boolean; + /** + * 是否整个表单只读 + */ + readonly?: boolean; /** * 是否显示必填符号（*），默认显示 */ diff --git a/src/grid/grid.en-US.md b/src/grid/grid.en-US.md index 53f851e73..58032fccb 100644 --- a/src/grid/grid.en-US.md +++ b/src/grid/grid.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Row Props name | type | default | description | required diff --git a/src/grid/grid.md b/src/grid/grid.md index 8c1f53e24..49b571664 100644 --- a/src/grid/grid.md +++ b/src/grid/grid.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Row Props 名称 | 类型 | 默认值 | 说明 | 必传 diff --git a/src/guide/guide-step-props.ts b/src/guide/guide-step-props.ts new file mode 100644 index 000000000..6fd5149ac --- /dev/null +++ b/src/guide/guide-step-props.ts @@ -0,0 +1,80 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdGuideStepProps } from '../guide/type'; +import { PropType } from 'vue'; + +export default { + /** 当前步骤提示框的内容 */ + body: { + type: [String, Function] as PropType, + }, + /** 自定义内容，同 content */ + children: { + type: [String, Function] as PropType, + }, + /** 用户自定义引导弹框的内容，一旦存在，此时除 `placement`、`offset`和`element` 外，其它属性全部失效） */ + content: { + type: Function as PropType, + }, + /** 高亮的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'#tdesign' 或 () => document.querySelector('#tdesign') */ + element: { + type: [String, Function] as PropType, + required: true, + }, + /** 用户自定义的高亮框 (仅当 `mode` 为 `popup` 时生效) */ + highlightContent: { + type: Function as PropType, + }, + /** 高亮框的内边距 */ + highlightPadding: { + type: Number, + }, + /** 引导框的类型 */ + mode: { + type: String as PropType, + validator(val: TdGuideStepProps['mode']): boolean { + if (!val) return true; + return ['popup', 'dialog'].includes(val); + }, + }, + /** 用于自定义当前引导框的下一步按钮的内容 */ + nextButtonProps: { + type: Object as PropType, + }, + /** 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10px', '8px'] */ + offset: { + type: Array as PropType, + }, + /** 引导框相对于高亮元素出现的位置 */ + placement: { + type: String, + default: 'top', + }, + /** 用于自定义当前引导框的上一步按钮的内容 */ + prevButtonProps: { + type: Object as PropType, + }, + /** 是否出现遮罩层 */ + showOverlay: { + type: Boolean, + default: true, + }, + /** 用于自定义当前步骤引导框的跳过按钮的内容 */ + skipButtonProps: { + type: Object as PropType, + }, + /** 覆盖引导框的类名 */ + stepOverlayClass: { + type: String, + default: '', + }, + /** 当前步骤的标题内容 */ + title: { + type: String, + default: '', + }, +}; diff --git a/src/guide/guide.en-US.md b/src/guide/guide.en-US.md index 4022f92bd..6741b0869 100644 --- a/src/guide/guide.en-US.md +++ b/src/guide/guide.en-US.md @@ -13,7 +13,7 @@ hideCounter | Boolean | false | \- | N hidePrev | Boolean | false | \- | N hideSkip | Boolean | false | \- | N highlightPadding | Number | 8 | \- | N -mode | String | popup | options：popup/dialog | N +mode | String | popup | options: popup/dialog | N nextButtonProps | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/guide/type.ts) | N prevButtonProps | Object | - | Typescript：`ButtonProps` | N showOverlay | Boolean | true | \- | N @@ -45,7 +45,7 @@ content | Slot / Function | - | Typescript：`TNode`。[see more ts definition]( element | String / Function | - | required。Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | Y highlightContent | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N highlightPadding | Number | - | \- | N -mode | String | - | options：popup/dialog | N +mode | String | - | options: popup/dialog | N nextButtonProps | Object | - | Typescript：`ButtonProps` | N offset | Array | - | this api is in discussing. do not use it.。Typescript：`Array` | N placement | String | 'top' | Typescript：`StepPopupPlacement \| StepDialogPlacement` `type StepPopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'` `type StepDialogPlacement = 'top'\|'center' `。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/guide/type.ts) | N @@ -54,4 +54,4 @@ prevButtonProps | Object | - | Typescript：`ButtonProps` | N showOverlay | Boolean | true | \- | N skipButtonProps | Object | - | Typescript：`ButtonProps` | N stepOverlayClass | String | - | \- | N -title | String | - | \- | N +title | String / Slot / Function | - | title of current step。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/guide/guide.md b/src/guide/guide.md index 74269376c..da193aa96 100644 --- a/src/guide/guide.md +++ b/src/guide/guide.md @@ -54,4 +54,4 @@ prevButtonProps | Object | - | 用于自定义当前引导框的上一步按钮 showOverlay | Boolean | true | 是否出现遮罩层 | N skipButtonProps | Object | - | 用于自定义当前步骤引导框的跳过按钮的内容。TS 类型：`ButtonProps` | N stepOverlayClass | String | - | 覆盖引导框的类名 | N -title | String | - | 当前步骤的标题内容 | N +title | String / Slot / Function | - | 当前步骤的标题内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/guide/type.ts b/src/guide/type.ts index 6b8d96dd5..224e27576 100644 --- a/src/guide/type.ts +++ b/src/guide/type.ts @@ -160,9 +160,8 @@ export interface GuideStep { stepOverlayClass?: string; /** * 当前步骤的标题内容 - * @default '' */ - title?: string; + title?: string | TNode; } export type StepPopupPlacement = diff --git a/src/image-viewer/image-viewer.en-US.md b/src/image-viewer/image-viewer.en-US.md index b75f8420c..4f337e262 100644 --- a/src/image-viewer/image-viewer.en-US.md +++ b/src/image-viewer/image-viewer.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### ImageViewer Props name | type | default | description | required @@ -9,6 +10,7 @@ closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。 closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` keydown | N closeOnOverlay | Boolean | - | \- | N draggable | Boolean | undefined | \- | N +imageReferrerpolicy | String | - | attribute of ``, [MDN Definition](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。options: no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N images | Array | [] | Typescript：`Array` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N index | Number | 0 | `.sync` is supported | N diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md index 419dd4394..47cee703a 100644 --- a/src/image-viewer/image-viewer.md +++ b/src/image-viewer/image-viewer.md @@ -1,14 +1,16 @@ :: BASE_DOC :: ## API + ### ImageViewer Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N +imageReferrerpolicy | String | - | 图片预览中的 `` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。可选项：no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N imageScale | Object | - | 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N index | Number | 0 | 当前预览图片所在的下标。支持语法糖 `.sync` | N diff --git a/src/image-viewer/props.ts b/src/image-viewer/props.ts index 657355532..dd55057c1 100644 --- a/src/image-viewer/props.ts +++ b/src/image-viewer/props.ts @@ -25,7 +25,15 @@ export default { type: Boolean, default: undefined, }, - /** 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度 */ + /** 图片预览中的 `` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) */ + imageReferrerpolicy: { + type: String as PropType, + validator(val: TdImageViewerProps['imageReferrerpolicy']): boolean { + if (!val) return true; + return ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'].includes(val); + }, + }, + /** 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例 */ imageScale: { type: Object as PropType, }, @@ -37,7 +45,7 @@ export default { /** 当前预览图片所在的下标 */ index: { type: Number, - default: undefined, + default: 0, }, /** 当前预览图片所在的下标，非受控属性 */ defaultIndex: { @@ -76,10 +84,7 @@ export default { type: Object as PropType, }, /** 隐藏/显示预览 */ - visible: { - type: Boolean, - default: undefined, - }, + visible: Boolean, /** 隐藏/显示预览，非受控属性 */ defaultVisible: Boolean, /** 层级，默认为 2000 */ diff --git a/src/image-viewer/type.ts b/src/image-viewer/type.ts index d389f3c28..9560da030 100644 --- a/src/image-viewer/type.ts +++ b/src/image-viewer/type.ts @@ -26,7 +26,19 @@ export interface TdImageViewerProps { */ draggable?: boolean; /** - * 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度 + * 图片预览中的 `` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) + */ + imageReferrerpolicy?: + | 'no-referrer' + | 'no-referrer-when-downgrade' + | 'origin' + | 'origin-when-cross-origin' + | 'same-origin' + | 'strict-origin' + | 'strict-origin-when-cross-origin' + | 'unsafe-url'; + /** + * 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例 */ imageScale?: ImageScale; /** @@ -101,6 +113,19 @@ export interface ImageScale { defaultScale?: number; } +export interface ImageScale { + max: number; + min: number; + step: number; + defaultScale?: number; +} + +export interface ImageInfo { + mainImage: string | File; + thumbnail?: string | File; + download?: boolean; +} + export interface ImageInfo { mainImage: string | File; thumbnail?: string | File; @@ -111,3 +136,8 @@ export interface ImageViewerScale { minWidth: number; minHeight: number; } + +export interface ImageViewerScale { + minWidth: number; + minHeight: number; +} diff --git a/src/image/image.en-US.md b/src/image/image.en-US.md index 103c38a91..d0166b762 100644 --- a/src/image/image.en-US.md +++ b/src/image/image.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Image Props name | type | default | description | required diff --git a/src/image/image.md b/src/image/image.md index d1ca82c12..fee7313a8 100644 --- a/src/image/image.md +++ b/src/image/image.md @@ -1,9 +1,10 @@ :: BASE_DOC :: ## API + ### Image Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- alt | String | - | 图片描述 | N error | String / Slot / Function | - | 自定义图片加载失败状态下的显示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/image/props.ts b/src/image/props.ts index 0a8738946..dfe8b620d 100644 --- a/src/image/props.ts +++ b/src/image/props.ts @@ -17,11 +17,6 @@ export default { error: { type: [String, Function] as PropType, }, - /** 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` */ - fallback: { - type: String, - default: '', - }, /** 图片填充模式 */ fit: { type: String as PropType, @@ -61,23 +56,6 @@ export default { type: String, default: 'center', }, - /** `` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) */ - referrerpolicy: { - type: String as PropType, - validator(val: TdImageProps['referrerpolicy']): boolean { - if (!val) return true; - return [ - 'no-referrer', - 'no-referrer-when-downgrade', - 'origin', - 'origin-when-cross-origin', - 'same-origin', - 'strict-origin', - 'strict-origin-when-cross-origin', - 'unsafe-url', - ].includes(val); - }, - }, /** 图片圆角类型 */ shape: { type: String as PropType, @@ -87,13 +65,10 @@ export default { return ['circle', 'round', 'square'].includes(val); }, }, - /** 用于显示图片的链接或原始图片文件对象 */ + /** 图片链接 */ src: { - type: [String, Object] as PropType, - }, - /** 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址 */ - srcset: { - type: Object as PropType, + type: String, + default: '', }, /** 图片加载失败时触发 */ onError: Function as PropType, diff --git a/src/image/type.ts b/src/image/type.ts index e8fe3af3d..8d3d57172 100644 --- a/src/image/type.ts +++ b/src/image/type.ts @@ -16,11 +16,6 @@ export interface TdImageProps { * 自定义图片加载失败状态下的显示内容 */ error?: string | TNode; - /** - * 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` - * @default '' - */ - fallback?: string; /** * 图片填充模式 * @default fill @@ -58,31 +53,16 @@ export interface TdImageProps { * @default center */ position?: string; - /** - * `` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) - */ - referrerpolicy?: - | 'no-referrer' - | 'no-referrer-when-downgrade' - | 'origin' - | 'origin-when-cross-origin' - | 'same-origin' - | 'strict-origin' - | 'strict-origin-when-cross-origin' - | 'unsafe-url'; /** * 图片圆角类型 * @default square */ shape?: 'circle' | 'round' | 'square'; /** - * 用于显示图片的链接或原始图片文件对象 - */ - src?: string | File; - /** - * 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址 + * 图片链接 + * @default '' */ - srcset?: ImageSrcset; + src?: string; /** * 图片加载失败时触发 */ @@ -92,8 +72,3 @@ export interface TdImageProps { */ onLoad?: (context: { e: ImageEvent }) => void; } - -export interface ImageSrcset { - 'image/avif': string; - 'image/webp': string; -} diff --git a/src/infinity-scroll/type.ts b/src/infinity-scroll/type.ts new file mode 100644 index 000000000..cb7192404 --- /dev/null +++ b/src/infinity-scroll/type.ts @@ -0,0 +1,33 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { InfinityScroll } from '../common'; + +export interface InfinityScroll { + /** + * 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白 + * @default 20 + */ + bufferSize?: number; + /** + * 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值 + * @default false + */ + isFixedRowHeight?: boolean; + /** + * 行高，不会给``元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为每行平均高度，从而使得滚动过程更加平滑 + */ + rowHeight?: number; + /** + * 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动 + * @default 100 + */ + threshold?: number; + /** + * 滚动加载类型，有两种：懒加载和虚拟滚动。
值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；
值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性 + */ + type: 'lazy' | 'virtual'; +} diff --git a/src/input-number/input-number.en-US.md b/src/input-number/input-number.en-US.md index 4a989f133..35540d319 100644 --- a/src/input-number/input-number.en-US.md +++ b/src/input-number/input-number.en-US.md @@ -27,7 +27,7 @@ tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more value | String / Number | - | `v-model` is supported。Typescript：`T` `type InputNumberValue = number \| string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N defaultValue | String / Number | - | uncontrolled property。Typescript：`T` `type InputNumberValue = number \| string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N onBlur | Function | | Typescript：`(value: InputNumberValue, context: { e: FocusEvent }) => void`
| N -onChange | Function | | Typescript：`(value: T, context: ChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`

`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`
| N +onChange | Function | | Typescript：`(value: T, context: ChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent }`

`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`
| N onEnter | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
| N onFocus | Function | | Typescript：`(value: InputNumberValue, context: { e: FocusEvent }) => void`
| N onKeydown | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
| N @@ -40,7 +40,7 @@ onValidate | Function | | Typescript：`(context: { error?: 'exceed-maximum' \| name | params | description -- | -- | -- blur | `(value: InputNumberValue, context: { e: FocusEvent })` | \- -change | `(value: T, context: ChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`

`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`
+change | `(value: T, context: ChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent }`

`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`
enter | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \- focus | `(value: InputNumberValue, context: { e: FocusEvent })` | \- keydown | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \- diff --git a/src/input-number/input-number.md b/src/input-number/input-number.md index 8fde12f0d..1988092e6 100644 --- a/src/input-number/input-number.md +++ b/src/input-number/input-number.md @@ -27,7 +27,7 @@ tips | String / Slot / Function | - | 输入框下方提示文本，会根据不 value | String / Number | - | 数字输入框的值。当值为 '' 时，输入框显示为空。支持语法糖 `v-model`。TS 类型：`T` `type InputNumberValue = number \| string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N defaultValue | String / Number | - | 数字输入框的值。当值为 '' 时，输入框显示为空。非受控属性。TS 类型：`T` `type InputNumberValue = number \| string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N onBlur | Function | | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`
失去焦点时触发 | N -onChange | Function | | TS 类型：`(value: T, context: ChangeContext) => void`
值变化时触发，`type` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`

`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`
| N +onChange | Function | | TS 类型：`(value: T, context: ChangeContext) => void`
值变化时触发，`type` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent }`

`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`
| N onEnter | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
回车键按下时触发 | N onFocus | Function | | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`
获取焦点时触发 | N onKeydown | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
键盘按下时触发 | N @@ -40,7 +40,7 @@ onValidate | Function | | TS 类型：`(context: { error?: 'exceed-maximum' \| 名称 | 参数 | 描述 -- | -- | -- blur | `(value: InputNumberValue, context: { e: FocusEvent })` | 失去焦点时触发 -change | `(value: T, context: ChangeContext)` | 值变化时触发，`type` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`

`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`
+change | `(value: T, context: ChangeContext)` | 值变化时触发，`type` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent }`

`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`
enter | `(value: InputNumberValue, context: { e: KeyboardEvent })` | 回车键按下时触发 focus | `(value: InputNumberValue, context: { e: FocusEvent })` | 获取焦点时触发 keydown | `(value: InputNumberValue, context: { e: KeyboardEvent })` | 键盘按下时触发 diff --git a/src/input-number/type.ts b/src/input-number/type.ts index 80c169da4..2d054d833 100644 --- a/src/input-number/type.ts +++ b/src/input-number/type.ts @@ -140,7 +140,7 @@ export type InputNumberValue = number | string; export interface ChangeContext { type: ChangeSource; - e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent | CompositionEvent; + e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent; } export type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | 'clear' | 'props'; diff --git a/src/input/__tests__/vitest-input.test.jsx b/src/input/__tests__/vitest-input.test.jsx index bbbb6405c..eb9d3e3f2 100644 --- a/src/input/__tests__/vitest-input.test.jsx +++ b/src/input/__tests__/vitest-input.test.jsx @@ -6,9 +6,9 @@ */ import { mount } from '@vue/test-utils'; import { vi } from 'vitest'; -import { mockDelay, simulateInputChange, createElementById } from '@test/utils'; import { Input, InputGroup } from '..'; import { getInputGroupDefaultMount } from './mount'; +import { mockDelay, simulateInputChange, createElementById } from '@test/utils'; describe('Input Component', () => { const alignClassNameList = [{ 't-align-left': false }, 't-align-center', 't-align-right']; @@ -51,7 +51,7 @@ describe('Input Component', () => { expect(wrapper.attributes('autocomplete')).toBe('https://tdesign.tencent.com/'); }); - it('props.autofocus is equal to false', () => { + it(`props.autofocus is equal to false`, () => { const wrapper = mount({ render() { return ; @@ -60,7 +60,7 @@ describe('Input Component', () => { const domWrapper = wrapper.find('input'); expect(domWrapper.attributes('autofocus')).toBeUndefined(); }); - it('props.autofocus is equal to true', () => { + it(`props.autofocus is equal to true`, () => { const wrapper = mount({ render() { return ; @@ -161,7 +161,7 @@ describe('Input Component', () => { expect(attrDom1.element.value).toBe('100 元'); }); - it('props.inputClass is equal to name1 name2', () => { + it(`props.inputClass is equal to name1 name2`, () => { const wrapper = mount({ render() { return ; @@ -171,7 +171,7 @@ describe('Input Component', () => { expect(domWrapper.classes('name1')).toBeTruthy(); expect(domWrapper.classes('name2')).toBeTruthy(); }); - it("props.inputClass is equal to ['name1', 'name2']", () => { + it(`props.inputClass is equal to ['name1', 'name2']`, () => { const wrapper = mount({ render() { return ; @@ -181,7 +181,7 @@ describe('Input Component', () => { expect(domWrapper.classes('name1')).toBeTruthy(); expect(domWrapper.classes('name2')).toBeTruthy(); }); - it('props.inputClass is equal to { name1: true, name2: false }', () => { + it(`props.inputClass is equal to { name1: true, name2: false }`, () => { const wrapper = mount({ render() { return ; diff --git a/src/input/input.md b/src/input/input.md index b53e25468..c029f090e 100644 --- a/src/input/input.md +++ b/src/input/input.md @@ -10,7 +10,7 @@ allowInputOverMax | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之 autoWidth | Boolean | false | 宽度随内容自适应 | N autocomplete | String | undefined | 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | N autofocus | Boolean | false | 自动聚焦 | N -borderless | Boolean | false | 无边框模式 | N +borderless | Boolean | false | 【开发中】无边框模式 | N clearable | Boolean | false | 是否可清空 | N disabled | Boolean | - | 是否禁用输入框 | N format | Function | - | 指定输入框展示值的格式。注意 `type=number` 时请勿使用，此功能建议更为使用 `InputNumber` 组件。TS 类型：`InputFormatType` `type InputFormatType = (value: string) => string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input/type.ts) | N diff --git a/src/link/link.en-US.md b/src/link/link.en-US.md index 8f03c5ed3..28fd15f48 100644 --- a/src/link/link.en-US.md +++ b/src/link/link.en-US.md @@ -8,14 +8,13 @@ name | type | default | description | required content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | - | make link to be disabled | N -download | String / Boolean | - | Causes the browser to treat the linked URL as a download | N -hover | String | underline | hover link style。options: color/underline | N +hover | String | underline | hover link style。options：color/underline | N href | String | - | \- | N prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N target | String | - | target is an attribute of `` | N -theme | String | default | options: default/primary/danger/warning/success | N +theme | String | default | options：default/primary/danger/warning/success | N underline | Boolean | - | \- | N onClick | Function | | Typescript：`(e: MouseEvent) => void`
click event, it won't trigger when it's disabled | N diff --git a/src/link/link.md b/src/link/link.md index 5a86b6a59..a8f2ccee5 100644 --- a/src/link/link.md +++ b/src/link/link.md @@ -8,7 +8,6 @@ content | String / Slot / Function | - | 链接内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 链接内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | - | 禁用链接 | N -download | String / Boolean | - | 使得浏览器将链接的 URL 视为可下载资源 | N hover | String | underline | 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法。可选项：color/underline | N href | String | - | 跳转链接 | N prefixIcon | Slot / Function | - | 前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/link/props.ts b/src/link/props.ts index 853987c15..43a182d94 100644 --- a/src/link/props.ts +++ b/src/link/props.ts @@ -18,10 +18,6 @@ export default { }, /** 禁用链接 */ disabled: Boolean, - /** 使得浏览器将链接的 URL 视为可下载资源 */ - download: { - type: [String, Boolean] as PropType, - }, /** 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法 */ hover: { type: String as PropType, diff --git a/src/link/type.ts b/src/link/type.ts index 64bfe6161..7748826f1 100644 --- a/src/link/type.ts +++ b/src/link/type.ts @@ -19,10 +19,6 @@ export interface TdLinkProps { * 禁用链接 */ disabled?: boolean; - /** - * 使得浏览器将链接的 URL 视为可下载资源 - */ - download?: string | boolean; /** * 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法 * @default underline diff --git a/src/list/list-item-meta-props.ts b/src/list/list-item-meta-props.ts index 990419405..c0e79937b 100644 --- a/src/list/list-item-meta-props.ts +++ b/src/list/list-item-meta-props.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-19 10:44:26 * */ import { TdListItemMetaProps } from '../list/type'; diff --git a/src/list/list-item-props.ts b/src/list/list-item-props.ts index efb1ad6b8..384ec0159 100644 --- a/src/list/list-item-props.ts +++ b/src/list/list-item-props.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-19 10:44:26 * */ import { TdListItemProps } from '../list/type'; @@ -21,6 +20,4 @@ export default { default: { type: [String, Function] as PropType, }, - /** 点击事件 */ - onClick: Function as PropType, }; diff --git a/src/list/list.en-US.md b/src/list/list.en-US.md index 019660404..faa4c43b3 100644 --- a/src/list/list.en-US.md +++ b/src/list/list.en-US.md @@ -8,8 +8,10 @@ name | type | default | description | required asyncLoading | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N footer | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N header | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -layout | String | horizontal | options：horizontal/vertical | N -size | String | medium | options：small/medium/large | N +layout | String | horizontal | options: horizontal/vertical | N +scroll | Object | - | lazy load and virtual scroll。Typescript：`InfinityScroll`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +scroll | Object | - | lazy load and virtual scroll。Typescript：`TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large | N split | Boolean | false | \- | N stripe | Boolean | false | \- | N onLoadMore | Function | | Typescript：`(options: { e: MouseEvent }) => void`
| N @@ -29,13 +31,6 @@ name | type | default | description | required action | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N - -### ListItem Events - -name | params | description --- | -- | -- -click | `(context: { e: MouseEvent })` | \- ### ListItemMeta Props diff --git a/src/list/list.md b/src/list/list.md index c3614f8fa..bd04e9cc3 100644 --- a/src/list/list.md +++ b/src/list/list.md @@ -1,29 +1,5 @@ :: BASE_DOC :: -### 斑马纹的列表 - -当列表内容较多时，可以使用斑马纹样式，便于用户获取信息。 - -{{ stripe }} - -### 异步加载的列表 - -当数据需要通过二次请求加载展示时，可以通过`asyncLoading`来处理相关的逻辑。 - -{{ loading }} - -### 带头部及尾部的列表 - -当列表需要展示头部或尾部信息时，可以通过`header`或`footer`来配置。 - -{{ header-footer }} - -### 带滚动事件的列表 - -当列表较长时，可以配置滚动条及事件来进行滚动处理 - -{{ scroll }} - ## API ### List Props @@ -33,6 +9,8 @@ asyncLoading | String / Slot / Function | - | 自定义加载中。值为空不 footer | String / Slot / Function | - | 底部。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N header | String / Slot / Function | - | 头部。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N layout | String | horizontal | 排列方式（待设计稿输出）。可选项：horizontal/vertical | N +scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`InfinityScroll`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N size | String | medium | 尺寸。可选项：small/medium/large | N split | Boolean | false | 是否展示分割线 | N stripe | Boolean | false | 是否展示斑马纹 | N @@ -53,14 +31,6 @@ scroll | `(options: { e: Event \| WheelEvent; scrollTop: number; scrollBottom: n action | String / Slot / Function | - | 操作栏。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N content | String / Slot / Function | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N - -### ListItem Events - -名称 | 参数 | 描述 --- | -- | -- -click | `(context: { e: MouseEvent })` | 点击时触发 - ### ListItemMeta Props diff --git a/src/list/props.ts b/src/list/props.ts index e931c5d15..ac8886f8d 100644 --- a/src/list/props.ts +++ b/src/list/props.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-19 10:44:26 * */ import { TdListProps } from './type'; @@ -26,14 +25,24 @@ export default { type: String as PropType, default: 'horizontal' as TdListProps['layout'], validator(val: TdListProps['layout']): boolean { + if (!val) return true; return ['horizontal', 'vertical'].includes(val); }, }, + /** 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100` */ + scroll: { + type: Object as PropType, + }, + /** 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100` */ + scroll: { + type: Object as PropType, + }, /** 尺寸 */ size: { type: String as PropType, default: 'medium' as TdListProps['size'], validator(val: TdListProps['size']): boolean { + if (!val) return true; return ['small', 'medium', 'large'].includes(val); }, }, diff --git a/src/list/type.ts b/src/list/type.ts index 35d685e84..51fc1e608 100644 --- a/src/list/type.ts +++ b/src/list/type.ts @@ -2,10 +2,9 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-19 10:44:26 * */ -import { TNode } from '../common'; +import { TNode, TScroll, InfinityScroll } from '../common'; export interface TdListProps { /** @@ -25,6 +24,14 @@ export interface TdListProps { * @default horizontal */ layout?: 'horizontal' | 'vertical'; + /** + * 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100` + */ + scroll?: InfinityScroll; + /** + * 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100` + */ + scroll?: TScroll; /** * 尺寸 * @default medium @@ -63,10 +70,6 @@ export interface TdListItemProps { * 内容，同 content */ default?: string | TNode; - /** - * 点击时触发 - */ - onClick?: (context: { e: MouseEvent }) => void; } export interface TdListItemMetaProps { diff --git a/src/loading/loading.en-US.md b/src/loading/loading.en-US.md index a2f61a036..630fe23c7 100644 --- a/src/loading/loading.en-US.md +++ b/src/loading/loading.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Loading Props name | type | default | description | required @@ -21,7 +22,7 @@ zIndex | Number | - | \- | N ### LoadingPlugin -同时也支持 `this.$loading`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， +同时也支持 `this.$loading`。 name | params | default | description -- | -- | -- | -- diff --git a/src/loading/loading.md b/src/loading/loading.md index 41cd023e5..e54cee97e 100644 --- a/src/loading/loading.md +++ b/src/loading/loading.md @@ -1,11 +1,7 @@ :: BASE_DOC :: -### 指令方式调用 -支持 `v-loading` 指令调用 `Loading`，只需要绑定 `boolean` 值即可，支持 `fullscreen` 和 `inheritColor` 修饰符以及 `Object` 形式的自定义配置，分别对应其属性。 - -{{ directive }} - ## API + ### Loading Props 名称 | 类型 | 默认值 | 说明 | 必传 @@ -26,7 +22,7 @@ zIndex | Number | - | 消息通知层级，样式默认为 3500 | N ### LoadingPlugin -同时也支持 `this.$loading`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， +同时也支持 `this.$loading`。 参数名称 | 参数类型 | 参数默认值 | 参数说明 -- | -- | -- | -- diff --git a/src/loading/props.ts b/src/loading/props.ts index 719d882d2..976ce7701 100644 --- a/src/loading/props.ts +++ b/src/loading/props.ts @@ -2,14 +2,13 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-06 21:29:31 * */ import { TdLoadingProps } from './type'; import { PropType } from 'vue'; export default { - /** 挂载元素，默认挂载到组件本身所在的位置。仅全屏加载模式下有效。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */ + /** 挂载元素，默认挂载到组件本身所在的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */ attach: { type: [String, Function] as PropType, default: '', diff --git a/src/loading/type.ts b/src/loading/type.ts index f30399fa3..00354962c 100644 --- a/src/loading/type.ts +++ b/src/loading/type.ts @@ -2,14 +2,13 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-06 21:29:31 * */ import { TNode, AttachNode } from '../common'; export interface TdLoadingProps { /** - * 挂载元素，默认挂载到组件本身所在的位置。仅全屏加载模式下有效。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body + * 挂载元素，默认挂载到组件本身所在的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body * @default '' */ attach?: AttachNode; @@ -69,8 +68,10 @@ export interface TdLoadingProps { * 消息通知层级，样式默认为 3500 */ zIndex?: number; -}; +} -export interface LoadingInstance { hide: () => void }; +export interface LoadingInstance { + hide: () => void; +} export type LoadingMethod = (options: boolean | TdLoadingProps) => LoadingInstance; diff --git a/src/menu/head-menu-props.ts b/src/menu/head-menu-props.ts index 8187ad679..c2caf8258 100644 --- a/src/menu/head-menu-props.ts +++ b/src/menu/head-menu-props.ts @@ -8,22 +8,25 @@ import { TdHeadMenuProps } from '../menu/type'; import { PropType } from 'vue'; export default { - /** 展开的子菜单集合 */ - expanded: { - type: Array as PropType, - }, - /** 展开的子菜单集合，非受控属性 */ - defaultExpanded: { - type: Array as PropType, - }, /** 二级菜单展开方式，平铺展开和浮层展开 */ expandType: { type: String as PropType, default: 'normal' as TdHeadMenuProps['expandType'], validator(val: TdHeadMenuProps['expandType']): boolean { + if (!val) return true; return ['normal', 'popup'].includes(val); }, }, + /** 展开的子菜单集合 */ + expanded: { + type: Array as PropType, + default: (): TdHeadMenuProps['expanded'] => [], + }, + /** 展开的子菜单集合，非受控属性 */ + defaultExpanded: { + type: Array as PropType, + default: (): TdHeadMenuProps['defaultExpanded'] => [], + }, /** 站点 LOGO */ logo: { type: Function as PropType, @@ -37,6 +40,7 @@ export default { type: String as PropType, default: 'light' as TdHeadMenuProps['theme'], validator(val: TdHeadMenuProps['theme']): boolean { + if (!val) return true; return ['light', 'dark'].includes(val); }, }, diff --git a/src/menu/menu-item-props.ts b/src/menu/menu-item-props.ts index 3cf780dc5..7120ba554 100644 --- a/src/menu/menu-item-props.ts +++ b/src/menu/menu-item-props.ts @@ -18,7 +18,7 @@ export default { }, /** 是否禁用菜单项展开/收起/跳转等功能 */ disabled: Boolean, - /** 跳转链接，菜单项渲染为a标签，当routerLink为true时将使用Router进行路由跳转 */ + /** 跳转链接 */ href: { type: String, default: '', @@ -33,14 +33,14 @@ export default { router: { type: Object as PropType, }, - /** - * 菜单项内容是否渲染为使用Router进行跳转的a标签，当且仅当 Router 存在时，该 API 有效 - */ + /** 当且仅当 Router 存在时，该 API 有效。开启菜单项内容渲染为与router-link行为一致的``标签。 */ routerLink: Boolean, /** 链接或路由跳转方式 */ target: { type: String as PropType, + default: '_self' as TdMenuItemProps['target'], validator(val: TdMenuItemProps['target']): boolean { + if (!val) return true; return ['_blank', '_self', '_parent', '_top'].includes(val); }, }, diff --git a/src/menu/menu.en-US.md b/src/menu/menu.en-US.md index 747dbe897..b63695307 100644 --- a/src/menu/menu.en-US.md +++ b/src/menu/menu.en-US.md @@ -7,12 +7,12 @@ name | type | default | description | required -- | -- | -- | -- | -- collapsed | Boolean | false | \- | N expandMutex | Boolean | false | \- | N -expandType | String | normal | options：normal/popup | N +expandType | String | normal | options: normal/popup | N expanded | Array | [] | `.sync` is supported。Typescript：`Array` | N defaultExpanded | Array | [] | uncontrolled property。Typescript：`Array` | N logo | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N operations | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -theme | String | light | Menu can be light mode or dark mode.。options：light/dark/global/system | N +theme | String | light | Menu can be light mode or dark mode.。options: light/dark/global/system | N value | String / Number | - | `v-model` is supported。Typescript：`MenuValue` `type MenuValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/menu/type.ts) | N defaultValue | String / Number | - | uncontrolled property。Typescript：`MenuValue` `type MenuValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/menu/type.ts) | N width | String / Number / Array | '232px' | Typescript：`string \| number \| Array` | N @@ -30,12 +30,11 @@ expand | `(value: Array)` | \- name | type | default | description | required -- | -- | -- | -- | -- -expandType | String | normal | options：normal/popup | N +expandType | String | normal | options: normal/popup | N expanded | Array | [] | `.sync` is supported。Typescript：`Array` | N -defaultExpanded | Array | [] | uncontrolled property。Typescript：`Array` | N logo | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N operations | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -theme | String | light | options：light/dark | N +theme | String | light | options: light/dark | N value | String / Number | - | `v-model` is supported。Typescript：`MenuValue` `type MenuValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/menu/type.ts) | N defaultValue | String / Number | - | uncontrolled property。Typescript：`MenuValue` `type MenuValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/menu/type.ts) | N onChange | Function | | Typescript：`(value: MenuValue) => void`
| N @@ -71,7 +70,8 @@ href | String | - | \- | N icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N replace | Boolean | false | \- | N router | Object | - | Typescript：`Record` | N -target | String | - | options：_blank/_self/_parent/_top | N +routerLink | Boolean | - | `1.5.0`。This API is valid if and only if the Router exists. Enable menu item content to be rendered as an `` consistent with router-link behavior. | N +target | String | _self | options: _blank/_self/_parent/_top | N to | String / Object | - | Typescript：`MenuRoute` `interface MenuRoute { path?: string; name?: string; hash?: string; query?: MenuQueryData; params?: MenuQueryData }` `type MenuQueryData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/menu/type.ts) | N value | String / Number | - | Typescript：`MenuValue` | N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on click | N diff --git a/src/menu/menu.md b/src/menu/menu.md index 79baad3be..c673370f1 100644 --- a/src/menu/menu.md +++ b/src/menu/menu.md @@ -1,11 +1,5 @@ :: BASE_DOC :: -### 可设置宽度的侧边导航 - -通过 `width` 设置侧边导航的宽度。 - -{{ side-menu-width }} - ## API ### Menu Props @@ -38,7 +32,6 @@ expand | `(value: Array)` | 展开的菜单项发生变化时触发 -- | -- | -- | -- | -- expandType | String | normal | 二级菜单展开方式，平铺展开和浮层展开。可选项：normal/popup | N expanded | Array | [] | 展开的子菜单集合。支持语法糖 `.sync`。TS 类型：`Array` | N -defaultExpanded | Array | [] | 展开的子菜单集合。非受控属性。TS 类型：`Array` | N logo | Slot / Function | - | 站点 LOGO。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N operations | Slot / Function | - | 导航操作区域。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N theme | String | light | 可选项：light/dark | N @@ -77,16 +70,17 @@ href | String | - | 跳转链接 | N icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N replace | Boolean | false | 路由跳转是否采用覆盖的方式（覆盖后将没有浏览器历史记录） | N router | Object | - | 路由对象。如果项目存在 Router，则默认使用 Router。。TS 类型：`Record` | N -target | String | - | 链接或路由跳转方式。可选项：_blank/_self/_parent/_top | N +routerLink | Boolean | - | `1.5.0`。当且仅当 Router 存在时，该 API 有效。开启菜单项内容渲染为与router-link行为一致的``标签。 | N +target | String | _self | 链接或路由跳转方式。可选项：_blank/_self/_parent/_top | N to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`MenuRoute` `interface MenuRoute { path?: string; name?: string; hash?: string; query?: MenuQueryData; params?: MenuQueryData }` `type MenuQueryData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/menu/type.ts) | N value | String / Number | - | 菜单项唯一标识。TS 类型：`MenuValue` | N -onClick | Function | | TS 类型：`(context: { e: MouseEvent, value: MenuValue }) => void`
点击时触发 | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N ### MenuItem Events 名称 | 参数 | 描述 -- | -- | -- -click | `(context: { e: MouseEvent, value: MenuValue })` | 点击时触发 +click | `(context: { e: MouseEvent })` | 点击时触发 ### MenuGroup Props diff --git a/src/menu/props.ts b/src/menu/props.ts index bdefbe9f4..a446e032d 100644 --- a/src/menu/props.ts +++ b/src/menu/props.ts @@ -10,14 +10,6 @@ import { PropType } from 'vue'; export default { /** 是否收起菜单 */ collapsed: Boolean, - /** 子菜单展开的导航集合 */ - expanded: { - type: Array as PropType, - }, - /** 子菜单展开的导航集合，非受控属性 */ - defaultExpanded: { - type: Array as PropType, - }, /** 同级别互斥展开 */ expandMutex: Boolean, /** 二级菜单展开方式，平铺展开和浮层展开 */ @@ -25,9 +17,20 @@ export default { type: String as PropType, default: 'normal' as TdMenuProps['expandType'], validator(val: TdMenuProps['expandType']): boolean { + if (!val) return true; return ['normal', 'popup'].includes(val); }, }, + /** 子菜单展开的导航集合 */ + expanded: { + type: Array as PropType, + default: (): TdMenuProps['expanded'] => [], + }, + /** 子菜单展开的导航集合，非受控属性 */ + defaultExpanded: { + type: Array as PropType, + default: (): TdMenuProps['defaultExpanded'] => [], + }, /** 站点 LOGO */ logo: { type: Function as PropType, @@ -36,12 +39,13 @@ export default { operations: { type: Function as PropType, }, - /** 菜单风格 */ + /** 菜单风格，有亮色模式和暗色模式两种。当 `theme = global` 时，模式随整个组件库；当 `theme = system` 时，模式跟随系统。⚠️ `global/system` 正在开发中，暂勿使用 */ theme: { type: String as PropType, default: 'light' as TdMenuProps['theme'], validator(val: TdMenuProps['theme']): boolean { - return ['light', 'dark'].includes(val); + if (!val) return true; + return ['light', 'dark', 'global', 'system'].includes(val); }, }, /** 激活菜单项 */ diff --git a/src/menu/type.ts b/src/menu/type.ts index 2c590d93a..995359fb7 100644 --- a/src/menu/type.ts +++ b/src/menu/type.ts @@ -13,14 +13,6 @@ export interface TdMenuProps { * @default false */ collapsed?: boolean; - /** - * 子菜单展开的导航集合 - */ - expanded?: Array; - /** - * 子菜单展开的导航集合，非受控属性 - */ - defaultExpanded?: Array; /** * 同级别互斥展开 * @default false @@ -31,6 +23,16 @@ export interface TdMenuProps { * @default normal */ expandType?: 'normal' | 'popup'; + /** + * 子菜单展开的导航集合 + * @default [] + */ + expanded?: Array; + /** + * 子菜单展开的导航集合，非受控属性 + * @default [] + */ + defaultExpanded?: Array; /** * 站点 LOGO */ @@ -40,10 +42,10 @@ export interface TdMenuProps { */ operations?: TNode; /** - * 菜单风格 + * 菜单风格，有亮色模式和暗色模式两种。当 `theme = global` 时，模式随整个组件库；当 `theme = system` 时，模式跟随系统。⚠️ `global/system` 正在开发中，暂勿使用 * @default light */ - theme?: 'light' | 'dark'; + theme?: 'light' | 'dark' | 'global' | 'system'; /** * 激活菜单项 */ @@ -68,19 +70,21 @@ export interface TdMenuProps { } export interface TdHeadMenuProps { + /** + * 二级菜单展开方式，平铺展开和浮层展开 + * @default normal + */ + expandType?: 'normal' | 'popup'; /** * 展开的子菜单集合 + * @default [] */ expanded?: Array; /** * 展开的子菜单集合，非受控属性 + * @default [] */ defaultExpanded?: Array; - /** - * 二级菜单展开方式，平铺展开和浮层展开 - * @default normal - */ - expandType?: 'normal' | 'popup'; /** * 站点 LOGO */ @@ -157,7 +161,7 @@ export interface TdMenuItemProps { */ disabled?: boolean; /** - * 跳转链接，菜单项渲染为a标签，当routerLink为true时将使用Router进行路由跳转 + * 跳转链接 * @default '' */ href?: string; @@ -175,11 +179,12 @@ export interface TdMenuItemProps { */ router?: Record; /** - * 菜单项内容是否渲染为使用Router进行跳转的a标签，当且仅当 Router 存在时，该 API 有效 + * 当且仅当 Router 存在时，该 API 有效。开启菜单项内容渲染为与router-link行为一致的``标签。 */ routerLink?: boolean; /** * 链接或路由跳转方式 + * @default _self */ target?: '_blank' | '_self' | '_parent' | '_top'; /** @@ -193,7 +198,7 @@ export interface TdMenuItemProps { /** * 点击时触发 */ - onClick?: (context: { e: MouseEvent; value: MenuValue }) => void; + onClick?: (context: { e: MouseEvent }) => void; } export interface TdMenuGroupProps { diff --git a/src/message/message.md b/src/message/message.md index 5e866bcc5..a37d7081c 100644 --- a/src/message/message.md +++ b/src/message/message.md @@ -1,46 +1,5 @@ :: BASE_DOC :: -### 关闭全局提示 - -#### 带关闭按钮的全局提示 - -{{ close }} - -#### 使用关闭函数控制全局提示 - -如果不希望通过计时关闭，或者用户点击按钮关闭，也可以使用关闭函数。 - -{{ toggle }} - -#### 关闭多条全局提示 - -{{ close-all }} - -### 控制全局提示显示位置 - -全局提示显示位置可控制，`placement` 用于控制大概位置，`offset` 用于设置相对于 `placement` 所在位置的偏移 - -{{ placement }} - -### 插件调用与函数式调用 - -支持插件式调用 `this.$message` 和函数式调用 `MessagePlugin` 两种方式，两种方式参数完全一样。 - -- 示例一：`MessagePlugin.warning('请输入信息')` 或 `this.$message.warning('请输入信息')` -- 示例二：`MessagePlugin.warning({ content: '请输入信息', duration: 5000, placement: 'top', onDurationEnd: () => {} })` - -{{ plugin }} - -### 全局方法 -还提供了全局配置方法 -+ `this.$message.config(placement, attach, offset, zIndex)` -+ `MessagePlugin.config(placement, attach, offset, zIndex)` - -```javascript -this.$message.config('top', 'body', [10, 20], 9999); -MessagePlugin.config('top', 'body', [10, 20], 9999); -``` - ## API ### Message Props diff --git a/src/notification/notification.md b/src/notification/notification.md index ed3eb8549..2cd1ce0c9 100644 --- a/src/notification/notification.md +++ b/src/notification/notification.md @@ -1,19 +1,5 @@ :: BASE_DOC :: -### 关闭多个消息通知 - -可以通过`closeAll`同时关闭多个消息通知。 - -{{ close-all }} - -### 插件调用与函数式调用 - -支持插件式调用 `this.$notify` 和函数式调用 `NotifyPlugin` 两种方式，两种方式参数完全一样。 - -示例：`NotifyPlugin.warning('请输入信息')` 或 `this.$notify.warning('请输入信息')` - -{{ plugin }} - ## API ### Notification Props diff --git a/src/pagination/pagination.md b/src/pagination/pagination.md index bf836825c..179d89ce6 100644 --- a/src/pagination/pagination.md +++ b/src/pagination/pagination.md @@ -1,4 +1,5 @@ :: BASE_DOC :: + ## API ### Pagination Props diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index 63d6f990e..478776fd8 100644 --- a/src/popup/popup.en-US.md +++ b/src/popup/popup.en-US.md @@ -6,6 +6,7 @@ name | type | default | description | required -- | -- | -- | -- | -- attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +closeBtn | Boolean / Slot / Function | - | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N delay | Number / Array | - | delay to show or hide popover。Typescript：`number \| Array` | N @@ -22,11 +23,10 @@ showArrow | Boolean | false | \- | N trigger | String | hover | options：hover/click/focus/mousedown/context-menu | N triggerElement | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N visible | Boolean | - | `v-model` is supported。Typescript：`boolean` | N -defaultVisible | Boolean | - | uncontrolled property。Typescript：`boolean` | N zIndex | Number | - | \- | N onScroll | Function | | Typescript：`(context: { e: WheelEvent }) => void`
| N onScrollToBottom | Function | | Typescript：`(context: { e: WheelEvent }) => void`
| N -onVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
| N +onVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N ### Popup Events @@ -34,14 +34,4 @@ name | params | description -- | -- | -- scroll | `(context: { e: WheelEvent })` | \- scroll-to-bottom | `(context: { e: WheelEvent })` | \- -visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
- -### PopupPlugin - -support `this.$popup` - -name | params | default | description --- | -- | -- | -- -content | String / Slot / Function | - | required。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) -popupProps | Object | - | \- -triggerElement | String | - | required +visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
diff --git a/src/popup/popup.md b/src/popup/popup.md index 4613bbd09..229906439 100644 --- a/src/popup/popup.md +++ b/src/popup/popup.md @@ -1,21 +1,12 @@ :: BASE_DOC :: -### 通过插件方式调用Popup - -通过插件方式调用Popup，用于将Popup渲染在已有节点的场景，同时该方式不论如何调用都只会挂载在一个节点上，用于减少页面上的Popup的渲染节点。 - -支持插件式调用 `this.$popup` 和函数式调用 `PopupPlugin` 两种方式，两种方式参数完全一样。 -- `this.$popup(triggerElement, content, popupProps)` -- `PopupPlugin(triggerElement, content, popupProps)` - -{{ plugin }} - ## API ### Popup Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +closeBtn | Boolean / Slot / Function | - | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N content | String / Slot / Function | - | 浮层里面的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N delay | Number / Array | - | 延时显示或隐藏浮层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]。TS 类型：`number \| Array` | N @@ -32,11 +23,10 @@ showArrow | Boolean | false | 是否显示浮层箭头 | N trigger | String | hover | 触发浮层出现的方式。可选项：hover/click/focus/mousedown/context-menu | N triggerElement | String / Slot / Function | - | 触发元素。值类型为字符串表示元素选择器。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N visible | Boolean | - | 是否显示浮层。支持语法糖 `v-model`。TS 类型：`boolean` | N -defaultVisible | Boolean | - | 是否显示浮层。非受控属性。TS 类型：`boolean` | N zIndex | Number | - | 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 | N onScroll | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
下拉选项滚动事件 | N onScrollToBottom | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 | N -onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
| N +onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N ### Popup Events @@ -44,14 +34,4 @@ onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVi -- | -- | -- scroll | `(context: { e: WheelEvent })` | 下拉选项滚动事件 scroll-to-bottom | `(context: { e: WheelEvent })` | 下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 -visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
- -### PopupPlugin - -同时也支持 `this.$popup`。 - -参数名称 | 参数类型 | 参数默认值 | 参数说明 --- | -- | -- | -- -content | String / Slot / Function | - | 必需。气泡框的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) -popupProps | Object | - | 透传气泡框/浮层的属性 -triggerElement | String | - | 必需。触发气泡框/浮层的元素，传入选择器即可 +visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
diff --git a/src/popup/props.ts b/src/popup/props.ts index 085df65aa..a975441f6 100644 --- a/src/popup/props.ts +++ b/src/popup/props.ts @@ -13,6 +13,10 @@ export default { type: [String, Function] as PropType, default: 'body', }, + /** 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮 */ + closeBtn: { + type: [Boolean, Function] as PropType, + }, /** 浮层里面的内容 */ content: { type: [String, Function] as PropType, @@ -72,10 +76,7 @@ export default { type: [String, Function] as PropType, }, /** 是否显示浮层 */ - visible: { - type: Boolean, - default: undefined, - }, + visible: Boolean, /** 是否显示浮层，非受控属性 */ defaultVisible: Boolean, /** 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 */ diff --git a/src/popup/type.ts b/src/popup/type.ts index 5b883a175..5c9004d11 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -6,14 +6,16 @@ import { TNode, ClassName, Styles, AttachNode } from '../common'; -export type PopupMethod = (triggerElement: string, content: string | TNode, popupProps?: object) => void; - export interface TdPopupProps { /** * 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body * @default 'body' */ attach?: AttachNode; + /** + * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮 + */ + closeBtn?: boolean | TNode; /** * 浮层里面的内容 */ @@ -133,5 +135,6 @@ export type PopupTriggerSource = | 'trigger-element-blur' | 'trigger-element-focus' | 'trigger-element-mousedown' + | 'trigger-element-close' | 'context-menu' | 'keydown-esc'; diff --git a/src/radio/props.ts b/src/radio/props.ts index 1e1467b1a..3f7522ba0 100644 --- a/src/radio/props.ts +++ b/src/radio/props.ts @@ -18,7 +18,7 @@ export default { default: { type: [String, Function] as PropType, }, - /** 是否为禁用态 */ + /** 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled */ disabled: { type: Boolean, default: undefined, @@ -32,6 +32,8 @@ export default { type: String, default: '', }, + /** 只读状态 */ + readonly: Boolean, /** 单选按钮的值 */ value: { type: [String, Number, Boolean] as PropType, diff --git a/src/radio/radio-group-props.ts b/src/radio/radio-group-props.ts index 33673b33c..a922884a1 100644 --- a/src/radio/radio-group-props.ts +++ b/src/radio/radio-group-props.ts @@ -10,7 +10,7 @@ import { PropType } from 'vue'; export default { /** 是否允许取消选中 */ allowUncheck: Boolean, - /** 是否禁用全部子单选框 */ + /** 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled */ disabled: { type: Boolean, default: undefined, diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md index c175f5fbc..21a2e3dd6 100644 --- a/src/radio/radio.en-US.md +++ b/src/radio/radio.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Radio Props name | type | default | description | required @@ -12,7 +13,8 @@ default | String / Slot / Function | - | Typescript：`string \| TNode`。[see m disabled | Boolean | undefined | \- | N label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N name | String | - | \- | N -value | String / Number / Boolean | undefined | Typescript：`T` | N +readonly | Boolean | false | \- | N +value | String / Number / Boolean | undefined | Typescript：`string \| number \| boolean` | N onChange | Function | | Typescript：`(checked: boolean, context: { e: Event }) => void`
| N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on click | N @@ -23,6 +25,7 @@ name | params | description change | `(checked: boolean, context: { e: Event })` | \- click | `(context: { e: MouseEvent })` | trigger on click + ### RadioGroup Props name | type | default | description | required @@ -30,11 +33,11 @@ name | type | default | description | required allowUncheck | Boolean | false | \- | N disabled | Boolean | undefined | \- | N name | String | - | \- | N -options | Array | - | Typescript：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N -size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -value | String / Number / Boolean | - | `v-model` is supported。Typescript：`T` | N -defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` | N -variant | String | outline | options：outline/primary-filled/default-filled | N +options | Array | - | Typescript：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +value | String / Number / Boolean | - | `v-model` is supported。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N +defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N +variant | String | outline | options: outline/primary-filled/default-filled | N onChange | Function | | Typescript：`(value: T, context: { e: Event }) => void`
| N ### RadioGroup Events diff --git a/src/radio/radio.md b/src/radio/radio.md index 882848a30..f254f5168 100644 --- a/src/radio/radio.md +++ b/src/radio/radio.md @@ -1,18 +1,20 @@ :: BASE_DOC :: ## API + ### Radio Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowUncheck | Boolean | false | 是否允许取消选中 | N checked | Boolean | false | 是否选中。支持语法糖 `v-model` | N defaultChecked | Boolean | false | 是否选中。非受控属性 | N default | String / Slot / Function | - | 单选按钮内容，同 label。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -disabled | Boolean | undefined | 是否为禁用态 | N +disabled | Boolean | undefined | 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled | N label | String / Slot / Function | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N name | String | - | HTML 元素原生属性 | N -value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`T` | N +readonly | Boolean | false | 只读状态 | N +value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`string \| number \| boolean` | N onChange | Function | | TS 类型：`(checked: boolean, context: { e: Event }) => void`
选中状态变化时触发 | N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发，一般用于外层阻止冒泡场景 | N @@ -23,17 +25,18 @@ onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
change | `(checked: boolean, context: { e: Event })` | 选中状态变化时触发 click | `(context: { e: MouseEvent })` | 点击时触发，一般用于外层阻止冒泡场景 + ### RadioGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowUncheck | Boolean | false | 是否允许取消选中 | N -disabled | Boolean | undefined | 是否禁用全部子单选框 | N +disabled | Boolean | undefined | 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled | N name | String | - | HTML 元素原生属性 | N -options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N +options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N size | String | medium | 组件尺寸【讨论中】。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model`。TS 类型：`T` | N -defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` | N +value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model`。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N +defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N variant | String | outline | 单选组件按钮形式。可选项：outline/primary-filled/default-filled | N onChange | Function | | TS 类型：`(value: T, context: { e: Event }) => void`
选中值发生变化时触发 | N diff --git a/src/radio/type.ts b/src/radio/type.ts index 4acc9a81d..ab1a19706 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -6,7 +6,7 @@ import { TNode, SizeEnum } from '../common'; -export interface TdRadioProps { +export interface TdRadioProps { /** * 是否允许取消选中 * @default false @@ -27,7 +27,7 @@ export interface TdRadioProps { */ default?: string | TNode; /** - * 是否为禁用态 + * 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled */ disabled?: boolean; /** @@ -39,10 +39,15 @@ export interface TdRadioProps { * @default '' */ name?: string; + /** + * 只读状态 + * @default false + */ + readonly?: boolean; /** * 单选按钮的值 */ - value?: T; + value?: string | number | boolean; /** * 选中状态变化时触发 */ @@ -60,7 +65,7 @@ export interface TdRadioGroupProps { */ allowUncheck?: boolean; /** - * 是否禁用全部子单选框 + * 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled > Form.disabled */ disabled?: boolean; /** @@ -96,12 +101,12 @@ export interface TdRadioGroupProps { onChange?: (value: T, context: { e: Event }) => void; } -export type RadioValue = string | number | boolean; - export type RadioOption = string | number | RadioOptionObj; export interface RadioOptionObj { label?: string | TNode; - value?: string | number; + value?: string | number | boolean; disabled?: boolean; } + +export type RadioValue = string | number | boolean; diff --git a/src/range-input/props.ts b/src/range-input/props.ts index f68dcdafc..0ca955d61 100644 --- a/src/range-input/props.ts +++ b/src/range-input/props.ts @@ -12,6 +12,8 @@ export default { activeIndex: { type: Number, }, + /** 无边框模式 */ + borderless: Boolean, /** 是否可清空 */ clearable: Boolean, /** 是否禁用范围输入框 */ @@ -78,7 +80,7 @@ export default { /** 范围输入框的值 */ value: { type: Array as PropType, - default: undefined, + default: (): TdRangeInputProps['value'] => [], }, /** 范围输入框的值，非受控属性 */ defaultValue: { diff --git a/src/range-input/range-input-popup-props.ts b/src/range-input/range-input-popup-props.ts index 4abe1cf82..ef126be2e 100644 --- a/src/range-input/range-input-popup-props.ts +++ b/src/range-input/range-input-popup-props.ts @@ -15,12 +15,15 @@ export default { /** 输入框的值 */ inputValue: { type: Array as PropType, - default: undefined, }, /** 输入框的值，非受控属性 */ defaultInputValue: { type: Array as PropType, }, + /** 左侧文本 */ + label: { + type: [String, Function] as PropType, + }, /** 下拉框内容，可完全自定义 */ panel: { type: [String, Function] as PropType, @@ -37,10 +40,6 @@ export default { }, /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */ readonly: Boolean, - /** 左侧文本 */ - label: { - type: [String, Function] as PropType, - }, /** 输入框状态 */ status: { type: String as PropType, diff --git a/src/range-input/range-input.en-US.md b/src/range-input/range-input.en-US.md index 098c1ed93..2a1c142b4 100644 --- a/src/range-input/range-input.en-US.md +++ b/src/range-input/range-input.en-US.md @@ -1,11 +1,13 @@ :: BASE_DOC :: ## API + ### RangeInput Props name | type | default | description | required -- | -- | -- | -- | -- activeIndex | Number | - | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N disabled | Boolean | - | \- | N format | Array / Function | - | Typescript：`InputFormatType \| Array` | N @@ -16,8 +18,8 @@ prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definitio readonly | Boolean | false | \- | N separator | String / Slot / Function | '-' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N showClearIconOnEmpty | Boolean | false | \- | N -size | String | medium | options：small/medium/large | N -status | String | default | options：default/success/warning/error | N +size | String | medium | options: small/medium/large | N +status | String | default | options: default/success/warning/error | N suffix | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -53,6 +55,7 @@ blur | `(options?: {position?: RangeInputPosition})` | \- | \- focus | `(options?: {position?: RangeInputPosition})` | \- | \- select | `(options?: {position?: RangeInputPosition})` | \- | \- + ### RangeInputPopup Props name | type | default | description | required @@ -61,12 +64,14 @@ autoWidth | Boolean | false | \- | N disabled | Boolean | - | \- | N inputValue | Array | - | `.sync` is supported。Typescript：`RangeInputValue` | N defaultInputValue | Array | - | uncontrolled property。Typescript：`RangeInputValue` | N +label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N panel | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N popupVisible | Boolean | - | \- | N +defaultPopupVisible | Boolean | - | uncontrolled property | N rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N readonly | Boolean | false | \- | N -status | String | default | options：default/success/warning/error | N +status | String | default | options: default/success/warning/error | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N onInputChange | Function | | Typescript：`(value: RangeInputValue, context?: RangeInputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts)。
`type RangeInputValueChangeContext = { e?: InputEvent \| MouseEvent; trigger?: 'input' \| 'clear', position?: RangeInputPosition }`
| N onPopupVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
| N diff --git a/src/range-input/range-input.md b/src/range-input/range-input.md index 587fc6723..4f25bc2a1 100644 --- a/src/range-input/range-input.md +++ b/src/range-input/range-input.md @@ -1,11 +1,13 @@ :: BASE_DOC :: ## API + ### RangeInput Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- activeIndex | Number | - | 输入框高亮状态序号 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N disabled | Boolean | - | 是否禁用范围输入框 | N format | Array / Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType \| Array` | N @@ -53,17 +55,20 @@ blur | `(options?: {position?: RangeInputPosition})` | \- | 使其中一个输 focus | `(options?: {position?: RangeInputPosition})` | \- | 使其中一个输入框获得焦点 select | `(options?: {position?: RangeInputPosition})` | \- | 使其中一个输入框选中内容 + ### RangeInputPopup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- autoWidth | Boolean | false | 宽度随内容自适应 | N disabled | Boolean | - | 是否禁用范围输入框，值为数组表示可分别控制某一个输入框是否禁用 | N inputValue | Array | - | 输入框的值。支持语法糖 `.sync`。TS 类型：`RangeInputValue` | N defaultInputValue | Array | - | 输入框的值。非受控属性。TS 类型：`RangeInputValue` | N +label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N panel | String / Slot / Function | - | 下拉框内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N popupProps | Object | - | 透传 Popup 浮层组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N popupVisible | Boolean | - | 是否显示下拉框 | N +defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N rangeInputProps | Object | - | 透传 RangeInput 组件全部属性。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N status | String | default | 输入框状态。可选项：default/success/warning/error | N diff --git a/src/range-input/type.ts b/src/range-input/type.ts index 70027e01a..59eae9c3e 100644 --- a/src/range-input/type.ts +++ b/src/range-input/type.ts @@ -15,6 +15,11 @@ export interface TdRangeInputProps { * 输入框高亮状态序号 */ activeIndex?: number; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否可清空 * @default false @@ -162,14 +167,14 @@ export interface TdRangeInputPopupProps { * 输入框的值 */ inputValue?: RangeInputValue; - /** - * 左侧文本 - */ - label?: string | TNode; /** * 输入框的值，非受控属性 */ defaultInputValue?: RangeInputValue; + /** + * 左侧文本 + */ + label?: string | TNode; /** * 下拉框内容，可完全自定义 */ diff --git a/src/rate/props.ts b/src/rate/props.ts index addd0de5b..e4fb97280 100644 --- a/src/rate/props.ts +++ b/src/rate/props.ts @@ -46,7 +46,7 @@ export default { /** 选择评分的值 */ value: { type: Number, - default: undefined, + default: 0, }, /** 选择评分的值，非受控属性 */ defaultValue: { diff --git a/src/rate/rate.en-US.md b/src/rate/rate.en-US.md index 898ea3953..9971392f3 100644 --- a/src/rate/rate.en-US.md +++ b/src/rate/rate.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Rate Props name | type | default | description | required diff --git a/src/rate/rate.md b/src/rate/rate.md index adff78675..747503716 100644 --- a/src/rate/rate.md +++ b/src/rate/rate.md @@ -1,9 +1,10 @@ :: BASE_DOC :: ## API + ### Rate Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowHalf | Boolean | false | 是否允许半选 | N color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array` | N @@ -12,7 +13,7 @@ disabled | Boolean | - | 是否禁用评分 | N gap | Number | 4 | 评分图标的间距 | N icon | Slot / Function | - | 自定义评分图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N showText | Boolean | false | 是否显示对应的辅助文字 | N -size | String | 24px | 评分图标的大小，示例：`20px` | N +size | String | 24px | 评分图标的大小 | N texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array` | N value | Number | 0 | 选择评分的值。支持语法糖 `v-model` | N defaultValue | Number | 0 | 选择评分的值。非受控属性 | N diff --git a/src/rate/type.ts b/src/rate/type.ts index e9de15171..3d227af03 100644 --- a/src/rate/type.ts +++ b/src/rate/type.ts @@ -24,7 +24,6 @@ export interface TdRateProps { count?: number; /** * 是否禁用评分 - * @default false */ disabled?: boolean; /** diff --git a/src/select-input/props.ts b/src/select-input/props.ts index 077515fa3..6cec8a87e 100644 --- a/src/select-input/props.ts +++ b/src/select-input/props.ts @@ -31,7 +31,6 @@ export default { /** 输入框的值 */ inputValue: { type: [String, Number] as PropType, - default: undefined, }, /** 输入框的值，非受控属性 */ defaultInputValue: { @@ -68,16 +67,22 @@ export default { type: Object as PropType, }, /** 是否显示下拉框 */ - popupVisible: { - type: Boolean, - default: undefined, - }, + popupVisible: Boolean, /** 是否显示下拉框，非受控属性 */ defaultPopupVisible: Boolean, /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */ readonly: Boolean, /** 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 */ reserveKeyword: Boolean, + /** 组件尺寸 */ + size: { + type: String as PropType, + default: 'medium' as TdSelectInputProps['size'], + validator(val: TdSelectInputProps['size']): boolean { + if (!val) return true; + return ['small', 'medium', 'large'].includes(val); + }, + }, /** 输入框状态 */ status: { type: String as PropType, diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md index b557b7534..7cc49779a 100644 --- a/src/select-input/select-input.en-US.md +++ b/src/select-input/select-input.en-US.md @@ -28,6 +28,7 @@ popupVisible | Boolean | - | `.sync` is supported | N defaultPopupVisible | Boolean | - | uncontrolled property | N readonly | Boolean | false | \- | N reserveKeyword | Boolean | false | \- | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N status | String | default | options: default/success/warning/error | N suffix | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/select-input/select-input.md b/src/select-input/select-input.md index aee9f958d..7cc07089f 100644 --- a/src/select-input/select-input.md +++ b/src/select-input/select-input.md @@ -28,6 +28,7 @@ popupVisible | Boolean | - | 是否显示下拉框。支持语法糖 `.sync` | N defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N +size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N status | String | default | 输入框状态。可选项：default/success/warning/error | N suffix | String / Slot / Function | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/select-input/type.ts b/src/select-input/type.ts index 47de097de..8ca8dd696 100644 --- a/src/select-input/type.ts +++ b/src/select-input/type.ts @@ -9,7 +9,7 @@ import { PopupProps } from '../popup'; import { TagInputProps, TagInputValue, TagInputChangeContext } from '../tag-input'; import { TagProps } from '../tag'; import { PopupVisibleChangeContext } from '../popup'; -import { TNode } from '../common'; +import { TNode, SizeEnum } from '../common'; export interface TdSelectInputProps { /** @@ -116,6 +116,11 @@ export interface TdSelectInputProps { * @default false */ reserveKeyword?: boolean; + /** + * 组件尺寸 + * @default medium + */ + size?: SizeEnum; /** * 输入框状态 * @default default @@ -204,12 +209,6 @@ export interface SelectInputKeys { children?: string; } -export interface SelectInputKeys { - label?: string; - value?: string; - children?: string; -} - export type SelectInputValue = string | number | boolean | Date | Object | Array | Array; export type SelectInputBlurContext = PopupVisibleChangeContext & { inputValue: string; tagInputValue?: TagInputValue }; diff --git a/src/select/option-props.ts b/src/select/option-props.ts index e3dd5e02a..ebcf258fd 100644 --- a/src/select/option-props.ts +++ b/src/select/option-props.ts @@ -32,6 +32,6 @@ export default { }, /** 选项值 */ value: { - type: [String, Number, Boolean] as PropType, + type: [String, Number] as PropType, }, }; diff --git a/src/select/props.ts b/src/select/props.ts index ce2c1b026..30808bcc9 100644 --- a/src/select/props.ts +++ b/src/select/props.ts @@ -16,7 +16,7 @@ export default { borderless: Boolean, /** 是否可以清空选项 */ clearable: Boolean, - /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签 */ + /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签 */ collapsedItems: { type: Function as PropType, }, @@ -76,6 +76,11 @@ export default { options: { type: Array as PropType, }, + /** 下拉选项布局方式，有纵向排列和横向排列两种，默认纵向排列 */ + optionsLayout: { + type: String as PropType, + default: 'vertical', + }, /** 面板内的底部内容 */ panelBottomContent: { type: [String, Function] as PropType, diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md index 73aaf9bc9..ee291a847 100644 --- a/src/select/select.en-US.md +++ b/src/select/select.en-US.md @@ -17,9 +17,9 @@ empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see mor filter | Function | - | Typescript：`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | false | \- | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N -inputValue | String / Number | - | input value。`.sync` is supported。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N -defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N -keys | Object | - | alias option field。Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +inputValue | String / Number | - | input value。`.sync` is supported。Typescript：`string` | N +defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`string` | N +keys | Object | - | alias option field。Typescript：`SelectKeysType` `interface SelectKeysType { value?: string \| ((option: SelectOption) => string); label?: string \| ((option: SelectOption) => string); disabled?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | \- | N loadingText | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -27,6 +27,7 @@ max | Number | 0 | \- | N minCollapsedNum | Number | 0 | \- | N multiple | Boolean | false | \- | N options | Array | - | Typescript：`Array` | N +optionsLayout | String | vertical | layout of options in popup。Typescript：`vertical \| horizontal` | N panelBottomContent | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N panelTopContent | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placeholder | String | undefined | \- | N @@ -56,7 +57,7 @@ onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`
onCreate | Function | | Typescript：`(value: string \| number) => void`
| N onEnter | Function | | Typescript：`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`
| N onFocus | Function | | Typescript：`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`
| N -onInputChange | Function | | Typescript：`(value: InputValue, context?: SelectInputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
| N +onInputChange | Function | | Typescript：`(value: string, context?: SelectInputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
| N onPopupVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
| N onRemove | Function | | Typescript：`(options: SelectRemoveContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`interface SelectRemoveContext { value: string \| number; data: T; e: MouseEvent \| KeyboardEvent }`
| N onSearch | Function | | Typescript：`(filterWords: string, context: { e: KeyboardEvent }) => void`
| N @@ -71,7 +72,7 @@ clear | `(context: { e: MouseEvent })` | \- create | `(value: string \| number)` | \- enter | `(context: { inputValue: string; e: KeyboardEvent; value: SelectValue })` | \- focus | `(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent })` | \- -input-change | `(value: InputValue, context?: SelectInputValueChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
+input-change | `(value: string, context?: SelectInputValueChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
remove | `(options: SelectRemoveContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`interface SelectRemoveContext { value: string \| number; data: T; e: MouseEvent \| KeyboardEvent }`
search | `(filterWords: string, context: { e: KeyboardEvent })` | \- diff --git a/src/select/select.md b/src/select/select.md index e41ea2d07..524b0460a 100644 --- a/src/select/select.md +++ b/src/select/select.md @@ -17,9 +17,9 @@ empty | String / Slot / Function | - | 当下拉列表为空时显示的内容 filter | Function | - | 自定义搜索规则，用于对现有数据进行搜索，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`。TS 类型：`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | false | 是否可搜索，默认搜索规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则 | N inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N -inputValue | String / Number | - | 输入框的值。支持语法糖 `.sync`。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N -defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N -keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +inputValue | String / Number | - | 输入框的值。支持语法糖 `.sync`。TS 类型：`string` | N +defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`string` | N +keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`SelectKeysType` `interface SelectKeysType { value?: string \| ((option: SelectOption) => string); label?: string \| ((option: SelectOption) => string); disabled?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | 是否为加载状态 | N loadingText | String / Slot / Function | - | 远程加载时显示的文字，支持自定义。如加上超链接。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -27,6 +27,7 @@ max | Number | 0 | 用于控制多选数量，值为 0 则不限制 | N minCollapsedNum | Number | 0 | 最小折叠数量，用于多选情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠 | N multiple | Boolean | false | 是否允许多选 | N options | Array | - | 数据化配置选项内容。TS 类型：`Array` | N +optionsLayout | String | vertical | 下拉选项布局方式，有纵向排列和横向排列两种，默认纵向排列。TS 类型：`vertical \| horizontal` | N panelBottomContent | String / Slot / Function | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N panelTopContent | String / Slot / Function | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placeholder | String | undefined | 占位符 | N @@ -49,14 +50,14 @@ tips | String / Slot / Function | - | 输入框下方提示文本，会根据不 value | String / Number / Boolean / Object / Array | - | 选中值。支持语法糖 `v-model`。TS 类型：`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N defaultValue | String / Number / Boolean / Object / Array | - | 选中值。非受控属性。TS 类型：`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N valueDisplay | String / Slot / Function | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -valueType | String | value | 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据。可选项：value/object | N +valueType | String | value | 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据。。可选项：value/object | N onBlur | Function | | TS 类型：`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`
输入框失去焦点时触发 | N onChange | Function | | TS 类型：`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`
选中值变化时触发。`context.trigger` 表示触发变化的来源；`context.selectedOptions` 表示选中值的完整对象，数组长度一定和 `value` 相同；`context.option` 表示当前操作的选项，不一定存在。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`
| N onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击清除按钮时触发 | N onCreate | Function | | TS 类型：`(value: string \| number) => void`
当选择新创建的条目时触发 | N onEnter | Function | | TS 类型：`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`
回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值 | N onFocus | Function | | TS 类型：`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`
输入框获得焦点时触发 | N -onInputChange | Function | | TS 类型：`(value: InputValue, context?: SelectInputValueChangeContext) => void`
输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
| N +onInputChange | Function | | TS 类型：`(value: string, context?: SelectInputValueChangeContext) => void`
输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
| N onPopupVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
| N onRemove | Function | | TS 类型：`(options: SelectRemoveContext) => void`
多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`interface SelectRemoveContext { value: string \| number; data: T; e: MouseEvent \| KeyboardEvent }`
| N onSearch | Function | | TS 类型：`(filterWords: string, context: { e: KeyboardEvent }) => void`
输入值变化时，触发搜索事件。主要用于远程搜索新数据 | N @@ -71,7 +72,7 @@ clear | `(context: { e: MouseEvent })` | 点击清除按钮时触发 create | `(value: string \| number)` | 当选择新创建的条目时触发 enter | `(context: { inputValue: string; e: KeyboardEvent; value: SelectValue })` | 回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值 focus | `(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent })` | 输入框获得焦点时触发 -input-change | `(value: InputValue, context?: SelectInputValueChangeContext)` | 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
+input-change | `(value: string, context?: SelectInputValueChangeContext)` | 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
remove | `(options: SelectRemoveContext)` | 多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`interface SelectRemoveContext { value: string \| number; data: T; e: MouseEvent \| KeyboardEvent }`
search | `(filterWords: string, context: { e: KeyboardEvent })` | 输入值变化时，触发搜索事件。主要用于远程搜索新数据 diff --git a/src/select/type.ts b/src/select/type.ts index 9eda8a1f8..24baa4b64 100644 --- a/src/select/type.ts +++ b/src/select/type.ts @@ -5,14 +5,13 @@ * */ import { InputProps } from '../input'; -import { InputValue } from '../input'; import { PopupProps } from '../popup'; import { SelectInputProps } from '../select-input'; import { TagInputProps } from '../tag-input'; import { TagProps } from '../tag'; import { SelectInputValueChangeContext } from '../select-input'; import { PopupVisibleChangeContext } from '../popup'; -import { PlainObject, TNode, SizeEnum, KeysType, InfinityScroll } from '../common'; +import { PlainObject, TNode, SizeEnum, InfinityScroll } from '../common'; export interface TdSelectProps { /** @@ -36,14 +35,9 @@ export interface TdSelectProps { */ clearable?: boolean; /** - * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签 + * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签 */ - collapsedItems?: TNode<{ - value: T[]; - collapsedSelectedItems: T[]; - count: number; - onClose: (context: { index: number; e?: MouseEvent }) => void; - }>; + collapsedItems?: TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (index: number) => void }>; /** * 是否允许用户创建新条目，需配合 filterable 使用 * @default false @@ -72,15 +66,15 @@ export interface TdSelectProps { /** * 输入框的值 */ - inputValue?: InputValue; + inputValue?: string; /** * 输入框的值，非受控属性 */ - defaultInputValue?: InputValue; + defaultInputValue?: string; /** * 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */ - keys?: KeysType; + keys?: SelectKeysType; /** * 左侧文本 */ @@ -113,6 +107,11 @@ export interface TdSelectProps { * 数据化配置选项内容 */ options?: Array; + /** + * 下拉选项布局方式，有纵向排列和横向排列两种，默认纵向排列 + * @default vertical + */ + optionsLayout?: vertical | horizontal; /** * 面板内的底部内容 */ @@ -241,7 +240,7 @@ export interface TdSelectProps { /** * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 */ - onInputChange?: (value: InputValue, context?: SelectInputValueChangeContext) => void; + onInputChange?: (value: string, context?: SelectInputValueChangeContext) => void; /** * 下拉框显示或隐藏时触发 */ @@ -288,7 +287,7 @@ export interface TdOptionProps { /** * 选项值 */ - value?: string | number | boolean; + value?: string | number; } export interface TdOptionGroupProps { @@ -304,6 +303,12 @@ export interface TdOptionGroupProps { label?: string; } +export interface SelectKeysType { + value?: string | ((option: SelectOption) => string); + label?: string | ((option: SelectOption) => string); + disabled?: string; +} + export type SelectValue = string | number | boolean | T | Array>; export type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck' | 'default'; diff --git a/src/slider/props.ts b/src/slider/props.ts index 81052cb9a..e74684faf 100644 --- a/src/slider/props.ts +++ b/src/slider/props.ts @@ -45,6 +45,8 @@ export default { }, /** 双游标滑块 */ range: Boolean, + /** 控制步长刻度值显示 */ + showStep: Boolean, /** 步长 */ step: { type: Number, @@ -57,10 +59,12 @@ export default { /** 滑块值 */ value: { type: [Number, Array] as PropType, + default: 0, }, /** 滑块值，非受控属性 */ defaultValue: { type: [Number, Array] as PropType, + default: 0, }, /** 滑块值变化时触发 */ onChange: Function as PropType, diff --git a/src/slider/slider.en-US.md b/src/slider/slider.en-US.md index 07480e351..da7038c7d 100644 --- a/src/slider/slider.en-US.md +++ b/src/slider/slider.en-US.md @@ -8,7 +8,7 @@ name | type | default | description | required disabled | Boolean | false | \- | N inputNumberProps | Boolean / Object | false | Typescript：`boolean \| InputNumberProps`，[InputNumber API Documents](./input-number?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N label | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -layout | String | horizontal | options：vertical/horizontal | N +layout | String | horizontal | options: vertical/horizontal | N marks | Object / Array | - | Typescript：`Array \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N max | Number | 100 | \- | N min | Number | 0 | \- | N @@ -16,8 +16,8 @@ range | Boolean | false | \- | N showStep | Boolean | false | \- | N step | Number | 1 | \- | N tooltipProps | Object | - | Typescript：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N -value | Number / Array | - | `v-model` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N -defaultValue | Number / Array | - | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N +value | Number / Array | 0 | `v-model` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N +defaultValue | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N onChange | Function | | Typescript：`(value: SliderValue) => void`
| N onChangeEnd | Function | | Typescript：`(value: SliderValue) => void`
triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider | N @@ -26,4 +26,4 @@ onChangeEnd | Function | | Typescript：`(value: SliderValue) => void`
trig name | params | description -- | -- | -- change | `(value: SliderValue)` | \- -change-end | `(value: SliderValue)` | triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider \ No newline at end of file +change-end | `(value: SliderValue)` | triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider diff --git a/src/slider/slider.md b/src/slider/slider.md index 06edc7cee..d058e2698 100644 --- a/src/slider/slider.md +++ b/src/slider/slider.md @@ -16,8 +16,8 @@ range | Boolean | false | 双游标滑块 | N showStep | Boolean | false | 控制步长刻度值显示 | N step | Number | 1 | 步长 | N tooltipProps | Object | - | 透传提示组件属性。TS 类型：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N -value | Number / Array | - | 滑块值。支持语法糖 `v-model`。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N -defaultValue | Number / Array | - | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N +value | Number / Array | 0 | 滑块值。支持语法糖 `v-model`。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N +defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N onChange | Function | | TS 类型：`(value: SliderValue) => void`
滑块值变化时触发 | N onChangeEnd | Function | | TS 类型：`(value: SliderValue) => void`
松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用 | N @@ -26,4 +26,4 @@ onChangeEnd | Function | | TS 类型：`(value: SliderValue) => void`
松 名称 | 参数 | 描述 -- | -- | -- change | `(value: SliderValue)` | 滑块值变化时触发 -change-end | `(value: SliderValue)` | 松开拖动 `mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用 \ No newline at end of file +change-end | `(value: SliderValue)` | 松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用 diff --git a/src/slider/type.ts b/src/slider/type.ts index 649c556a7..47c92e8b4 100644 --- a/src/slider/type.ts +++ b/src/slider/type.ts @@ -48,6 +48,11 @@ export interface TdSliderProps { * @default false */ range?: boolean; + /** + * 控制步长刻度值显示 + * @default false + */ + showStep?: boolean; /** * 步长 * @default 1 @@ -59,10 +64,12 @@ export interface TdSliderProps { tooltipProps?: TooltipProps; /** * 滑块值 + * @default 0 */ value?: SliderValue; /** * 滑块值，非受控属性 + * @default 0 */ defaultValue?: SliderValue; /** diff --git a/src/space/__tests__/vitest-space.test.jsx b/src/space/__tests__/vitest-space.test.jsx index 55598d277..6751bba58 100644 --- a/src/space/__tests__/vitest-space.test.jsx +++ b/src/space/__tests__/vitest-space.test.jsx @@ -46,22 +46,22 @@ describe('Space Component', () => { expect(wrapper.find('.custom-node').exists()).toBeTruthy(); }); - it('props.size is equal to \'small\'', () => { + it(`props.size is equal to 'small'`, () => { const wrapper = getSpaceDefaultMount(Space, { size: 'small' }); const domWrapper = wrapper.findComponent(Space); expect(domWrapper.element.style.gap).toBe('8px'); }); - it('props.size is equal to \'large\'', () => { + it(`props.size is equal to 'large'`, () => { const wrapper = getSpaceDefaultMount(Space, { size: 'large' }); const domWrapper = wrapper.findComponent(Space); expect(domWrapper.element.style.gap).toBe('24px'); }); - it('props.size is equal to \'38px\'', () => { + it(`props.size is equal to '38px'`, () => { const wrapper = getSpaceDefaultMount(Space, { size: '38px' }); const domWrapper = wrapper.findComponent(Space); expect(domWrapper.element.style.gap).toBe('38px'); }); - it('props.size is equal to [\'20px\', \'80px\']', () => { + it(`props.size is equal to ['20px', '80px']`, () => { const wrapper = getSpaceDefaultMount(Space, { size: ['20px', '80px'] }); const domWrapper = wrapper.findComponent(Space); expect(domWrapper.element.style.gap).toBe('20px 80px'); diff --git a/src/statistic/statistic.en-US.md b/src/statistic/statistic.en-US.md index 17649bfbe..307e0f31d 100644 --- a/src/statistic/statistic.en-US.md +++ b/src/statistic/statistic.en-US.md @@ -7,7 +7,7 @@ name | type | default | description | required -- | -- | -- | -- | -- animation | Object | - | Animation effect control, `duration` refers to the transition time of the animation `unit: millisecond`, `valueFrom` refers to the initial value of the animation. `{ duration, valueFrom }`。Typescript：`animation` `interface animation { duration: number; valueFrom: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/statistic/type.ts) | N animationStart | Boolean | false | Whether to start animation | N -color | String | - | Color style, followed by TDesign style black, blue, red, orange, green.Can also be any RGB equivalent supported by [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)。options：black/blue/red/orange/green | N +color | String | - | Color style, followed by TDesign style black, blue, red, orange, green.Can also be any RGB equivalent supported by [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)。options: black/blue/red/orange/green | N decimalPlaces | Number | - | Decimal places | N extra | String / Slot / Function | - | Additional display content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N format | Function | - | Format numeric display value。Typescript：`(value: number) => number` | N @@ -16,7 +16,13 @@ prefix | String / Slot / Function | - | Prefix content, display priority is high separator | String | , | The carry separator is displayed by default, and can be customized to other content. When `separator = ''` is set to an empty string/null/undefined, the separator is hidden | N suffix | String / Slot / Function | - | Suffix content, display priority is higher than trend。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N title | String / Slot / Function | - | The title of Statistic。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -trend | String | - | trend。options：increase/decrease | N -trendPlacement | String | left | Position of trending placements。options：left/right | N +trend | String | - | trend。options: increase/decrease | N +trendPlacement | String | left | Position of trending placements。options: left/right | N unit | String / Slot / Function | - | Unit content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | Number | - | The value of Statistic | N + +### StatisticInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +start | `(from: number, to: number)` | \- | required。Digital scrolling change, from one number to another number diff --git a/src/statistic/statistic.md b/src/statistic/statistic.md index b8bc87063..26f4f636a 100644 --- a/src/statistic/statistic.md +++ b/src/statistic/statistic.md @@ -20,3 +20,9 @@ trend | String | - | 趋势。可选项：increase/decrease | N trendPlacement | String | left | 趋势展示位置。可选项：left/right | N unit | String / Slot / Function | - | 单位内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | Number | - | 数值显示的值 | N + +### StatisticInstanceFunctions 组件实例方法 + +名称 | 参数 | 返回值 | 描述 +-- | -- | -- | -- +start | `(from: number, to: number)` | \- | 必需。设置数字滚动变化效果，从一个数字到另一个数字 diff --git a/src/statistic/type.ts b/src/statistic/type.ts index 06d43d29f..b09a44d58 100644 --- a/src/statistic/type.ts +++ b/src/statistic/type.ts @@ -73,6 +73,14 @@ export interface TdStatisticProps { value?: number; } +/** 组件实例方法 */ +export interface StatisticInstanceFunctions { + /** + * 设置数字滚动变化效果，从一个数字到另一个数字 + */ + start: (from: number, to: number) => void; +} + export interface animation { duration: number; valueFrom: number; diff --git a/src/switch/props.ts b/src/switch/props.ts index e03f64701..c7f07bdf0 100644 --- a/src/switch/props.ts +++ b/src/switch/props.ts @@ -2,14 +2,13 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-24 14:47:35 * */ import { TdSwitchProps } from './type'; import { PropType } from 'vue'; export default { - /** 开关内容，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0] */ + /** 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close'] */ customValue: { type: Array as PropType, }, @@ -27,18 +26,17 @@ export default { type: String as PropType, default: 'medium' as TdSwitchProps['size'], validator(val: TdSwitchProps['size']): boolean { + if (!val) return true; return ['small', 'medium', 'large'].includes(val); }, }, /** 开关值 */ value: { type: [String, Number, Boolean] as PropType, - default: false, }, /** 开关值，非受控属性 */ defaultValue: { type: [String, Number, Boolean] as PropType, - default: false, }, /** 数据发生变化时触发 */ onChange: Function as PropType, diff --git a/src/switch/switch.en-US.md b/src/switch/switch.en-US.md index de6efcc03..6d6f38168 100644 --- a/src/switch/switch.en-US.md +++ b/src/switch/switch.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Switch Props name | type | default | description | required @@ -9,13 +10,13 @@ customValue | Array | - | Typescript：`Array` | N disabled | Boolean | - | \- | N label | Array / Slot / Function | [] | Typescript：`Array \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | \- | N -size | String | medium | options：small/medium/large | N -value | String / Number / Boolean | - | `v-model` is supported。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N -defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N -onChange | Function | | Typescript：`(value: SwitchValue) => void`
| N +size | String | medium | options: small/medium/large | N +value | String / Number / Boolean | - | `v-model` is supported。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N +defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N +onChange | Function | | Typescript：`(value: T, context: { e: MouseEvent }) => void`
| N ### Switch Events name | params | description -- | -- | -- -change | `(value: SwitchValue)` | \- +change | `(value: T, context: { e: MouseEvent })` | \- diff --git a/src/switch/switch.md b/src/switch/switch.md index 449e5fc87..9e65f4f07 100644 --- a/src/switch/switch.md +++ b/src/switch/switch.md @@ -1,21 +1,22 @@ :: BASE_DOC :: ## API + ### Switch Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- customValue | Array | - | 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']。TS 类型：`Array` | N disabled | Boolean | - | 是否禁用组件 | N label | Array / Slot / Function | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | 是否处于加载中状态 | N size | String | medium | 开关尺寸。可选项：small/medium/large | N -value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model`。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N -defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N -onChange | Function | | TS 类型：`(value: SwitchValue) => void`
数据发生变化时触发 | N +value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model`。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N +defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N +onChange | Function | | TS 类型：`(value: T, context: { e: MouseEvent }) => void`
数据发生变化时触发 | N ### Switch Events 名称 | 参数 | 描述 -- | -- | -- -change | `(value: SwitchValue)` | 数据发生变化时触发 +change | `(value: T, context: { e: MouseEvent })` | 数据发生变化时触发 diff --git a/src/switch/type.ts b/src/switch/type.ts index 00a25e7b7..16d9876ea 100644 --- a/src/switch/type.ts +++ b/src/switch/type.ts @@ -2,19 +2,17 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-24 14:47:35 * */ import { TNode } from '../common'; -export interface TdSwitchProps { +export interface TdSwitchProps { /** - * 开关内容，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0] + * 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close'] */ customValue?: Array; /** * 是否禁用组件 - * @default false */ disabled?: boolean; /** @@ -34,18 +32,16 @@ export interface TdSwitchProps { size?: 'small' | 'medium' | 'large'; /** * 开关值 - * @default false */ - value?: SwitchValue; + value?: T; /** * 开关值，非受控属性 - * @default false */ - defaultValue?: SwitchValue; + defaultValue?: T; /** * 数据发生变化时触发 */ - onChange?: (value: SwitchValue) => void; -}; + onChange?: (value: T, context: { e: MouseEvent }) => void; +} export type SwitchValue = string | number | boolean; diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md index 19f7baf23..b7bb9eb54 100644 --- a/src/table/table.en-US.md +++ b/src/table/table.en-US.md @@ -293,7 +293,6 @@ popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./po props | Object | - | Typescript：`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N resetValue | \- | - | Typescript：`any` | N showConfirmAndReset | Boolean | false | \- | N -style | Object | - | styles of component。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N type | String | - | Typescript：`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N ### TableColumnController diff --git a/src/table/table.md b/src/table/table.md index ee3c70d79..c1a86775e 100644 --- a/src/table/table.md +++ b/src/table/table.md @@ -293,7 +293,6 @@ popupProps | Object | - | 透传 Popup 组件全部属性到筛选器浮层。TS props | Object | - | 用于透传筛选器属性到自定义组件 `component`，可以对筛选器进行任何原组件支持的属性配置。TS 类型：`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N resetValue | \- | - | 重置时设置的值，示例：'' 或 []。TS 类型：`any` | N showConfirmAndReset | Boolean | false | 是否显示重置和确认。值为真，过滤事件（filter-change）会在确定时触发；值为假，则数据变化时会立即触发过滤事件 | N -style | Object | - | 透传内联样式到自定义组件 `component`。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N type | String | - | 用于设置筛选器类型：单选按钮筛选器、复选框筛选器、输入框筛选器。更多复杂组件，请更为使用 `component` 自定义任意组件。TS 类型：`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N ### TableColumnController diff --git a/src/tabs/props.ts b/src/tabs/props.ts index b99f00d26..05905edcc 100644 --- a/src/tabs/props.ts +++ b/src/tabs/props.ts @@ -2,17 +2,22 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-19 10:44:26 * */ import { TdTabsProps } from './type'; import { PropType } from 'vue'; export default { + /** 【开发中】选项卡右侧的操作区域 */ + action: { + type: [String, Function] as PropType, + }, /** 选项卡是否可增加 */ addable: Boolean, /** 是否禁用选项卡 */ disabled: Boolean, + /** 是否开启拖拽调整顺序 */ + dragSort: Boolean, /** 选项卡列表 */ list: { type: Array as PropType, @@ -22,6 +27,7 @@ export default { type: String as PropType, default: 'top' as TdTabsProps['placement'], validator(val: TdTabsProps['placement']): boolean { + if (!val) return true; return ['left', 'top', 'bottom', 'right'].includes(val); }, }, @@ -30,6 +36,7 @@ export default { type: String as PropType, default: 'medium' as TdTabsProps['size'], validator(val: TdTabsProps['size']): boolean { + if (!val) return true; return ['medium', 'large'].includes(val); }, }, @@ -38,6 +45,7 @@ export default { type: String as PropType, default: 'normal' as TdTabsProps['theme'], validator(val: TdTabsProps['theme']): boolean { + if (!val) return true; return ['normal', 'card'].includes(val); }, }, @@ -53,6 +61,8 @@ export default { onAdd: Function as PropType, /** 激活的选项卡发生变化时触发 */ onChange: Function as PropType, + /** 拖拽排序时触发 */ + onDragSort: Function as PropType, /** 删除选项卡时触发 */ onRemove: Function as PropType, }; diff --git a/src/tabs/tab-panel-props.ts b/src/tabs/tab-panel-props.ts index aad27d27f..82ebc8766 100644 --- a/src/tabs/tab-panel-props.ts +++ b/src/tabs/tab-panel-props.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-19 10:44:26 * */ import { TdTabPanelProps } from '../tabs/type'; @@ -20,6 +19,11 @@ export default { }, /** 是否禁用当前选项卡 */ disabled: Boolean, + /** 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动 */ + draggable: { + type: Boolean, + default: true, + }, /** 选项卡名称，可自定义选项卡导航内容 */ label: { type: [String, Function] as PropType, @@ -36,9 +40,4 @@ export default { }, /** 点击删除按钮时触发 */ onRemove: Function as PropType, - /** 标签内容是否延迟渲染 */ - lazy: { - type: Boolean, - default: false, - }, }; diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md index 4737abea6..3e03bc85c 100644 --- a/src/tabs/tabs.en-US.md +++ b/src/tabs/tabs.en-US.md @@ -36,6 +36,7 @@ name | type | default | description | required default | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnHide | Boolean | true | \- | N disabled | Boolean | false | \- | N +draggable | Boolean | true | \- | N label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N panel | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N removable | Boolean | false | \- | N diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md index 2d150fda2..6969b690e 100644 --- a/src/tabs/tabs.md +++ b/src/tabs/tabs.md @@ -36,12 +36,12 @@ remove | `(options: { value: TabValue; index: number; e: MouseEvent })` | 删除 default | Slot / Function | - | 用于自定义选项卡导航，同 panel。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N disabled | Boolean | false | 是否禁用当前选项卡 | N +draggable | Boolean | true | 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动 | N label | String / Slot / Function | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N panel | String / Slot / Function | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N removable | Boolean | false | 当前选项卡是否允许移除 | N value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N onRemove | Function | | TS 类型：`(options: { value: TabValue; e: MouseEvent }) => void`
点击删除按钮时触发 | N -lazy | Boolean | false | 标签内容是否延迟渲染 | N ### TabPanel Events diff --git a/src/tabs/type.ts b/src/tabs/type.ts index fbc587d55..2cc6068c3 100644 --- a/src/tabs/type.ts +++ b/src/tabs/type.ts @@ -2,12 +2,15 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-19 10:44:26 * */ import { TNode } from '../common'; export interface TdTabsProps { + /** + * 【开发中】选项卡右侧的操作区域 + */ + action?: string | TNode; /** * 选项卡是否可增加 * @default false @@ -18,6 +21,11 @@ export interface TdTabsProps { * @default false */ disabled?: boolean; + /** + * 是否开启拖拽调整顺序 + * @default false + */ + dragSort?: boolean; /** * 选项卡列表 */ @@ -53,6 +61,10 @@ export interface TdTabsProps { * 激活的选项卡发生变化时触发 */ onChange?: (value: TabValue) => void; + /** + * 拖拽排序时触发 + */ + onDragSort?: (context: TabsDragSortContext) => void; /** * 删除选项卡时触发 */ @@ -74,6 +86,11 @@ export interface TdTabPanelProps { * @default false */ disabled?: boolean; + /** + * 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动 + * @default true + */ + draggable?: boolean; /** * 选项卡名称，可自定义选项卡导航内容 */ @@ -95,10 +112,13 @@ export interface TdTabPanelProps { * 点击删除按钮时触发 */ onRemove?: (options: { value: TabValue; e: MouseEvent }) => void; - /** - * 标签是否延迟渲染 - */ - lazy?: Boolean; } export type TabValue = string | number; + +export interface TabsDragSortContext { + currentIndex: number; + current: TabValue; + targetIndex: number; + target: TabValue; +} diff --git a/src/tag-input/props.ts b/src/tag-input/props.ts index a30d02c66..9cf0845f6 100644 --- a/src/tag-input/props.ts +++ b/src/tag-input/props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 宽度随内容自适应 */ autoWidth: Boolean, + /** 无边框模式 */ + borderless: Boolean, /** 是否可清空 */ clearable: Boolean, /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */ @@ -36,7 +38,7 @@ export default { /** 输入框的值 */ inputValue: { type: [String, Number] as PropType, - default: undefined, + default: '', }, /** 输入框的值，非受控属性 */ defaultInputValue: { @@ -67,7 +69,7 @@ export default { }, /** 只读状态，值为真会隐藏标签移除按钮和输入框 */ readonly: Boolean, - /** 尺寸 */ + /** 组件尺寸 */ size: { type: String as PropType, default: 'medium' as TdTagInputProps['size'], @@ -107,7 +109,7 @@ export default { /** 值 */ value: { type: Array as PropType, - default: undefined, + default: (): TdTagInputProps['value'] => [], }, /** 值，非受控属性 */ defaultValue: { diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md index 9bce04c17..ae82abd4b 100644 --- a/src/tag-input/tag-input.en-US.md +++ b/src/tag-input/tag-input.en-US.md @@ -7,6 +7,7 @@ name | type | default | description | required -- | -- | -- | -- | -- autoWidth | Boolean | false | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | - | \- | N @@ -21,7 +22,7 @@ minCollapsedNum | Number | 0 | \- | N placeholder | String | undefined | placeholder description | N prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N readonly | Boolean | false | \- | N -size | String | medium | options: small/medium/large | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N status | String | - | options: default/success/warning/error | N suffix | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/tag-input/tag-input.md b/src/tag-input/tag-input.md index 9a79dec47..1cdc68383 100644 --- a/src/tag-input/tag-input.md +++ b/src/tag-input/tag-input.md @@ -7,6 +7,7 @@ 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- autoWidth | Boolean | false | 宽度随内容自适应 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | - | 是否禁用标签输入框 | N @@ -21,7 +22,7 @@ minCollapsedNum | Number | 0 | 最小折叠数量，用于标签数量过多的 placeholder | String | undefined | 占位符 | N prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N readonly | Boolean | false | 只读状态，值为真会隐藏标签移除按钮和输入框 | N -size | String | medium | 尺寸。可选项：small/medium/large | N +size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N status | String | - | 输入框状态。可选项：default/success/warning/error | N suffix | String / Slot / Function | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/tag-input/type.ts b/src/tag-input/type.ts index 63bf56f99..091c3de08 100644 --- a/src/tag-input/type.ts +++ b/src/tag-input/type.ts @@ -6,7 +6,7 @@ import { InputProps } from '../input'; import { TagProps } from '../tag'; -import { TNode } from '../common'; +import { TNode, SizeEnum } from '../common'; export interface TdTagInputProps { /** @@ -14,6 +14,11 @@ export interface TdTagInputProps { * @default false */ autoWidth?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否可清空 * @default false @@ -83,10 +88,10 @@ export interface TdTagInputProps { */ readonly?: boolean; /** - * 尺寸 + * 组件尺寸 * @default medium */ - size?: 'small' | 'medium' | 'large'; + size?: SizeEnum; /** * 输入框状态 */ diff --git a/src/tag/check-tag-group-props.ts b/src/tag/check-tag-group-props.ts index 2924d32c2..f735d2599 100644 --- a/src/tag/check-tag-group-props.ts +++ b/src/tag/check-tag-group-props.ts @@ -25,7 +25,7 @@ export default { /** 选中标签值 */ value: { type: Array as PropType, - default: undefined, + default: (): TdCheckTagGroupProps['value'] => [], }, /** 选中标签值，非受控属性 */ defaultValue: { diff --git a/src/tag/check-tag-props.ts b/src/tag/check-tag-props.ts index 09f234ef1..feaf912c4 100644 --- a/src/tag/check-tag-props.ts +++ b/src/tag/check-tag-props.ts @@ -14,7 +14,10 @@ export default { default: undefined, }, /** 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性 */ - defaultChecked: Boolean, + defaultChecked: { + type: Boolean, + default: undefined, + }, /** 透传标签选中态属性 */ checkedProps: { type: Object as PropType, diff --git a/src/tag/props.ts b/src/tag/props.ts index 68922af95..02b65a9d6 100644 --- a/src/tag/props.ts +++ b/src/tag/props.ts @@ -11,7 +11,10 @@ export default { /** 标签是否可关闭 */ closable: Boolean, /** 自定义标签颜色 */ - color: String, + color: { + type: String, + default: '', + }, /** 组件子元素 */ content: { type: [String, Function] as PropType, diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md index fdeded2c8..69250c8e6 100644 --- a/src/tag/tag.en-US.md +++ b/src/tag/tag.en-US.md @@ -1,12 +1,13 @@ :: BASE_DOC :: ## API + ### Tag Props name | type | default | description | required -- | -- | -- | -- | -- closable | Boolean | false | \- | N -color | String | '' | custom color | N +color | String | - | self-defined tag color | N content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | false | \- | N @@ -26,12 +27,13 @@ name | params | description click | `(context: { e: MouseEvent })` | \- close | `(context: { e: MouseEvent })` | \- + ### CheckTag Props name | type | default | description | required -- | -- | -- | -- | -- -checked | Boolean | - | `v-model` is supported | N -defaultChecked | Boolean | - | uncontrolled property | N +checked | Boolean | undefined | `v-model` is supported | N +defaultChecked | Boolean | undefined | uncontrolled property | N checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N content | String / Number / Array / Slot / Function | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -49,6 +51,7 @@ name | params | description change | `(checked: boolean, context: CheckTagChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
click | `(context: { e: MouseEvent })` | \- + ### CheckTagGroup Props name | type | default | description | required diff --git a/src/tag/tag.md b/src/tag/tag.md index f16c47e9c..9a718633f 100644 --- a/src/tag/tag.md +++ b/src/tag/tag.md @@ -1,16 +1,13 @@ :: BASE_DOC :: -### 自定义颜色 - -{{ custom-color }} - ## API + ### Tag Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- closable | Boolean | false | 标签是否可关闭 | N -color | String | '' | 颜色 | N +color | String | - | 自定义标签颜色 | N content | String / Slot / Function | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N @@ -30,12 +27,13 @@ onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
click | `(context: { e: MouseEvent })` | 点击时触发 close | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭按钮时触发 + ### CheckTag Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model` | N -defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N +checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model` | N +defaultChecked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N content | String / Number / Array / Slot / Function | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 组件子元素，默认插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -53,9 +51,10 @@ onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
change | `(checked: boolean, context: CheckTagChangeContext)` | 状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
click | `(context: { e: MouseEvent })` | 点击标签时触发 + ### CheckTagGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N multiple | Boolean | false | 是否支持选中多个标签 | N diff --git a/src/tag/type.ts b/src/tag/type.ts index fd2fe32bb..13655a6f2 100644 --- a/src/tag/type.ts +++ b/src/tag/type.ts @@ -13,7 +13,8 @@ export interface TdTagProps { */ closable?: boolean; /** - * 自定义颜色 + * 自定义标签颜色 + * @default '' */ color?: string; /** diff --git a/src/textarea/props.ts b/src/textarea/props.ts index 6f3b2c6f7..30bb482d0 100644 --- a/src/textarea/props.ts +++ b/src/textarea/props.ts @@ -8,6 +8,8 @@ import { TdTextareaProps } from './type'; import { PropType } from 'vue'; export default { + /** 超出maxlength或maxcharacter之后是否还允许输入 */ + allowInputOverMax: Boolean, /** 自动聚焦，拉起键盘 */ autofocus: Boolean, /** 高度自动撑开。 autosize = true 表示组件高度自动撑开，同时，依旧允许手动拖高度。如果设置了 autosize.maxRows 或者 autosize.minRows 则不允许手动调整高度 */ @@ -17,13 +19,17 @@ export default { }, /** 是否禁用文本框 */ disabled: Boolean, + /** 左侧文本 */ + label: { + type: [String, Function] as PropType, + }, /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 */ maxcharacter: { type: Number, }, /** 用户最多可以输入的字符个数 */ maxlength: { - type: [Number, String] as PropType, + type: Number, }, /** 名称，HTML 元素原生属性 */ name: { @@ -35,12 +41,14 @@ export default { type: String, default: undefined, }, - /** 文本框是否只读 */ + /** 只读状态 */ readonly: Boolean, /** 文本框状态 */ status: { type: String as PropType, + default: 'default' as TdTextareaProps['status'], validator(val: TdTextareaProps['status']): boolean { + if (!val) return true; return ['default', 'success', 'warning', 'error'].includes(val); }, }, diff --git a/src/textarea/textarea.en-US.md b/src/textarea/textarea.en-US.md index 8d1e9db63..c25fea828 100644 --- a/src/textarea/textarea.en-US.md +++ b/src/textarea/textarea.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Textarea Props name | type | default | description | required @@ -11,11 +12,11 @@ autosize | Boolean / Object | false | Typescript：`boolean \| { minRows?: numbe disabled | Boolean | false | \- | N label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N maxcharacter | Number | - | \- | N -maxlength | Number / String | - | \- | N +maxlength | String / Number | - | \- | N name | String | - | \- | N placeholder | String | undefined | \- | N readonly | Boolean | false | \- | N -status | String | - | options：default/success/warning/error | N +status | String | default | options: default/success/warning/error | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String / Number | - | `v-model` is supported。Typescript：`TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/textarea/type.ts) | N defaultValue | String / Number | - | uncontrolled property。Typescript：`TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/textarea/type.ts) | N diff --git a/src/textarea/textarea.md b/src/textarea/textarea.md index 9a4028f43..c4f9994bf 100644 --- a/src/textarea/textarea.md +++ b/src/textarea/textarea.md @@ -1,9 +1,10 @@ :: BASE_DOC :: ## API + ### Textarea Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInputOverMax | Boolean | false | 超出maxlength或maxcharacter之后是否还允许输入 | N autofocus | Boolean | false | 自动聚焦，拉起键盘 | N @@ -11,11 +12,11 @@ autosize | Boolean / Object | false | 高度自动撑开。 autosize = true 表 disabled | Boolean | false | 是否禁用文本框 | N label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N -maxlength | Number / String | - | 用户最多可以输入的字符个数 | N +maxlength | String / Number | - | 用户最多可以输入的字符个数 | N name | String | - | 名称，HTML 元素原生属性 | N placeholder | String | undefined | 占位符 | N readonly | Boolean | false | 只读状态 | N -status | String | - | 文本框状态。可选项：default/success/warning/error | N +status | String | default | 文本框状态。可选项：default/success/warning/error | N tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String / Number | - | 文本框值。支持语法糖 `v-model`。TS 类型：`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/textarea/type.ts) | N defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/textarea/type.ts) | N diff --git a/src/textarea/type.ts b/src/textarea/type.ts index 2cf85a0ea..f896d5c46 100644 --- a/src/textarea/type.ts +++ b/src/textarea/type.ts @@ -7,6 +7,11 @@ import { TNode } from '../common'; export interface TdTextareaProps { + /** + * 超出maxlength或maxcharacter之后是否还允许输入 + * @default false + */ + allowInputOverMax?: boolean; /** * 自动聚焦，拉起键盘 * @default false @@ -22,6 +27,10 @@ export interface TdTextareaProps { * @default false */ disabled?: boolean; + /** + * 左侧文本 + */ + label?: string | TNode; /** * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 */ @@ -29,7 +38,7 @@ export interface TdTextareaProps { /** * 用户最多可以输入的字符个数 */ - maxlength?: number | string; + maxlength?: number; /** * 名称，HTML 元素原生属性 * @default '' @@ -40,12 +49,13 @@ export interface TdTextareaProps { */ placeholder?: string; /** - * 文本框是否只读 + * 只读状态 * @default false */ readonly?: boolean; /** * 文本框状态 + * @default default */ status?: 'default' | 'success' | 'warning' | 'error'; /** @@ -86,4 +96,4 @@ export interface TdTextareaProps { onKeyup?: (value: TextareaValue, context: { e: KeyboardEvent }) => void; } -export type TextareaValue = string | number; +export type TextareaValue = string; diff --git a/src/time-line/props.ts b/src/time-line/props.ts new file mode 100644 index 000000000..211bcaec7 --- /dev/null +++ b/src/time-line/props.ts @@ -0,0 +1,49 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdTimeLineProps } from './type'; +import { PropType } from 'vue'; + +export default { + /** 标签信息放在时间轴的位置，`mode='alternate'` 时生效。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧 */ + labelAlign: { + type: String as PropType, + default: 'left' as TdTimeLineProps['labelAlign'], + validator(val: TdTimeLineProps['labelAlign']): boolean { + if (!val) return true; + return ['left', 'right', 'alternate', 'top', 'bottom'].includes(val); + }, + }, + /** 时间轴方向：水平方向、垂直方向 */ + layout: { + type: String as PropType, + default: 'vertical' as TdTimeLineProps['layout'], + validator(val: TdTimeLineProps['layout']): boolean { + if (!val) return true; + return ['horizontal', 'vertical'].includes(val); + }, + }, + /** 标签与内容文本的位置关系，`alternate` 为展示在轴两侧，`same` 为展示在同一侧 */ + mode: { + type: String as PropType, + default: 'alternate' as TdTimeLineProps['mode'], + validator(val: TdTimeLineProps['mode']): boolean { + if (!val) return true; + return ['alternate', 'same'].includes(val); + }, + }, + /** 时间轴是否表现为倒序 */ + reverse: Boolean, + /** 步骤条风格 */ + theme: { + type: String as PropType, + default: 'default' as TdTimeLineProps['theme'], + validator(val: TdTimeLineProps['theme']): boolean { + if (!val) return true; + return ['default', 'dot'].includes(val); + }, + }, +}; diff --git a/src/time-line/time-line-item-props.ts b/src/time-line/time-line-item-props.ts new file mode 100644 index 000000000..4df13af1c --- /dev/null +++ b/src/time-line/time-line-item-props.ts @@ -0,0 +1,42 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdTimeLineItemProps } from '../time-line/type'; +import { PropType } from 'vue'; + +export default { + /** 描述内容 */ + content: { + type: [String, Function] as PropType, + }, + /** 用于自定义时间轴节点元素 */ + dot: { + type: Function as PropType, + }, + /** 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值. */ + dotColor: { + type: String as PropType, + default: 'primary' as TdTimeLineItemProps['dotColor'], + validator(val: TdTimeLineItemProps['dotColor']): boolean { + if (!val) return true; + return ['primary', 'warning', 'error', 'default'].includes(val); + }, + }, + /** 标签文本内容，可完全自定义 */ + label: { + type: [String, Function] as PropType, + }, + /** 标签信息相对于时间轴的位置，在 `mode='alternate'` 时生效，优先级高于 `TimeLine.labelAlign` */ + labelAlign: { + type: String as PropType, + validator(val: TdTimeLineItemProps['labelAlign']): boolean { + if (!val) return true; + return ['left', 'right', 'top', 'bottom'].includes(val); + }, + }, + /** 是否处在加载状态 */ + loading: Boolean, +}; diff --git a/src/time-line/time-line.en-US.md b/src/time-line/time-line.en-US.md new file mode 100644 index 000000000..891cd35b3 --- /dev/null +++ b/src/time-line/time-line.en-US.md @@ -0,0 +1,23 @@ +:: BASE_DOC :: + +## API +### TimeLine Props + +name | type | default | description | required +-- | -- | -- | -- | -- +labelAlign | String | left | label info placement。options：left/right/alternate/top/bottom | N +layout | String | vertical | time line layout。options：horizontal/vertical | N +mode | String | alternate | The position relationship between the label and the content text, 'alternate' is displayed on both sides of the axis, and 'same' is displayed on the same side。options：alternate/same | N +reverse | Boolean | false | \- | N +theme | String | default | options：default/dot | N + +### TimeLineItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +dot | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +dotColor | String | primary | options：primary/warning/error/default。Typescript：`string` | N +label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +labelAlign | String | - | options：left/right/top/bottom | N +loading | Boolean | - | Whether it is in the loading state | N diff --git a/src/time-line/time-line.md b/src/time-line/time-line.md new file mode 100644 index 000000000..69be58915 --- /dev/null +++ b/src/time-line/time-line.md @@ -0,0 +1,23 @@ +:: BASE_DOC :: + +## API +### TimeLine Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +labelAlign | String | left | 标签信息放在时间轴的位置，`mode='alternate'` 时生效。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧。可选项：left/right/alternate/top/bottom | N +layout | String | vertical | 时间轴方向：水平方向、垂直方向。可选项：horizontal/vertical | N +mode | String | alternate | 标签与内容文本的位置关系，`alternate` 为展示在轴两侧，`same` 为展示在同一侧。可选项：alternate/same | N +reverse | Boolean | false | 时间轴是否表现为倒序 | N +theme | String | default | 步骤条风格。可选项：default/dot | N + +### TimeLineItem Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +content | String / Slot / Function | - | 描述内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +dot | Slot / Function | - | 用于自定义时间轴节点元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +dotColor | String | primary | 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值.。可选项：primary/warning/error/default。TS 类型：`string` | N +label | String / Slot / Function | - | 标签文本内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +labelAlign | String | - | 标签信息相对于时间轴的位置，在 `mode='alternate'` 时生效，优先级高于 `TimeLine.labelAlign`。可选项：left/right/top/bottom | N +loading | Boolean | - | 是否处在加载状态 | N diff --git a/src/time-line/type.ts b/src/time-line/type.ts new file mode 100644 index 000000000..551b06574 --- /dev/null +++ b/src/time-line/type.ts @@ -0,0 +1,63 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode } from '../common'; + +export interface TdTimeLineProps { + /** + * 标签信息放在时间轴的位置，`mode='alternate'` 时生效。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧 + * @default left + */ + labelAlign?: 'left' | 'right' | 'alternate' | 'top' | 'bottom'; + /** + * 时间轴方向：水平方向、垂直方向 + * @default vertical + */ + layout?: 'horizontal' | 'vertical'; + /** + * 标签与内容文本的位置关系，`alternate` 为展示在轴两侧，`same` 为展示在同一侧 + * @default alternate + */ + mode?: 'alternate' | 'same'; + /** + * 时间轴是否表现为倒序 + * @default false + */ + reverse?: boolean; + /** + * 步骤条风格 + * @default default + */ + theme?: 'default' | 'dot'; +} + +export interface TdTimeLineItemProps { + /** + * 描述内容 + */ + content?: string | TNode; + /** + * 用于自定义时间轴节点元素 + */ + dot?: TNode; + /** + * 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值. + * @default primary + */ + dotColor?: string; + /** + * 标签文本内容，可完全自定义 + */ + label?: string | TNode; + /** + * 标签信息相对于时间轴的位置，在 `mode='alternate'` 时生效，优先级高于 `TimeLine.labelAlign` + */ + labelAlign?: 'left' | 'right' | 'top' | 'bottom'; + /** + * 是否处在加载状态 + */ + loading?: boolean; +} diff --git a/src/time-picker/props.ts b/src/time-picker/props.ts index 3c8e6cdf1..3a6c3f7a7 100644 --- a/src/time-picker/props.ts +++ b/src/time-picker/props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 是否允许直接输入时间 */ allowInput: Boolean, + /** 无边框模式 */ + borderless: Boolean, /** 是否允许清除选中值 */ clearable: Boolean, /** 禁用时间项的配置函数 */ @@ -32,6 +34,10 @@ export default { inputProps: { type: Object as PropType, }, + /** 左侧文本 */ + label: { + type: [String, Function] as PropType, + }, /** 占位符 */ placeholder: { type: String, @@ -45,6 +51,10 @@ export default { presets: { type: Object as PropType, }, + /** 透传 SelectInput 筛选器输入框组件的全部属性 */ + selectInputProps: { + type: Object as PropType, + }, /** 尺寸 */ size: { type: String as PropType, @@ -82,6 +92,10 @@ export default { type: String as PropType, default: '', }, + /** 自定义选中项呈现的内容 */ + valueDisplay: { + type: [String, Function] as PropType, + }, /** 当输入框失去焦点时触发，value 表示组件当前有效值 */ onBlur: Function as PropType, /** 选中值发生变化时触发 */ diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index fff7569a2..7a7cf5910 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -1,27 +1,32 @@ :: BASE_DOC :: ## API + ### TimePicker Props name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N disableTime | Function | - | disable time config function。Typescript：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N disabled | Boolean | - | \- | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N +label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placeholder | String | undefined | \- | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N presets | Object | - | Typescript：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N +selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N size | String | medium | options: small/medium/large | N status | String | default | options: default/success/warning/error | N steps | Array | [1, 1, 1] | Typescript：`Array` | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String | - | `v-model` is supported。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N defaultValue | String | - | uncontrolled property。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N -onBlur | Function | | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
| N +valueDisplay | String / Slot / Function | - | `MouseEvent`。Typescript：`string \| TNode<{ value: TimePickerValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +onBlur | Function | | Typescript：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。
`import { SelectInputBlurContext } from '@SelectInput'`
| N onChange | Function | | Typescript：`(value: TimePickerValue) => void`
| N onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onFocus | Function | | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
| N @@ -33,7 +38,7 @@ onPick | Function | | Typescript：`(value: TimePickerValue, context: { e: Mous name | params | description -- | -- | -- -blur | `(context: { value: TimePickerValue; e: FocusEvent })` | \- +blur | `(context: { value: TimePickerValue } & SelectInputBlurContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。
`import { SelectInputBlurContext } from '@SelectInput'`
change | `(value: TimePickerValue)` | \- close | `(context: { e: MouseEvent })` | \- focus | `(context: { value: TimePickerValue; e: FocusEvent })` | \- @@ -41,16 +46,19 @@ input | `(context: { value: TimePickerValue; e: InputEvent })` | \- open | `(context: { e: MouseEvent })` | \- pick | `(value: TimePickerValue, context: { e: MouseEvent })` | \- + ### TimeRangePicker Props name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N disableTime | Function | - | Typescript：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N disabled | Boolean / Array | - | Typescript：`boolean \| Array` | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N +label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placeholder | String / Array | undefined | Typescript：`string \| Array` | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N presets | Object | - | Typescript：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md index 9749a3478..be328b5a0 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -1,27 +1,32 @@ :: BASE_DOC :: ## API + ### TimePicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许直接输入时间 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清除选中值 | N disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N disabled | Boolean | - | 是否禁用组件 | N format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N +label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placeholder | String | undefined | 占位符 | N popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N presets | Object | - | 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`。TS 类型：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N +selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N size | String | medium | 尺寸。可选项：small/medium/large | N status | String | default | 输入框状态。可选项：default/success/warning/error | N steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：`Array` | N tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String | - | 选中值。支持语法糖 `v-model`。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N defaultValue | String | - | 选中值。非受控属性。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N -onBlur | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
当输入框失去焦点时触发，value 表示组件当前有效值 | N +valueDisplay | String / Slot / Function | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: TimePickerValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +onBlur | Function | | TS 类型：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`
当输入框失去焦点时触发，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。
`import { SelectInputBlurContext } from '@SelectInput'`
| N onChange | Function | | TS 类型：`(value: TimePickerValue) => void`
选中值发生变化时触发 | N onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
面板关闭时触发 | N onFocus | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
输入框获得焦点时触发，value 表示组件当前有效值 | N @@ -33,7 +38,7 @@ onPick | Function | | TS 类型：`(value: TimePickerValue, context: { e: Mouse 名称 | 参数 | 描述 -- | -- | -- -blur | `(context: { value: TimePickerValue; e: FocusEvent })` | 当输入框失去焦点时触发，value 表示组件当前有效值 +blur | `(context: { value: TimePickerValue } & SelectInputBlurContext)` | 当输入框失去焦点时触发，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。
`import { SelectInputBlurContext } from '@SelectInput'`
change | `(value: TimePickerValue)` | 选中值发生变化时触发 close | `(context: { e: MouseEvent })` | 面板关闭时触发 focus | `(context: { value: TimePickerValue; e: FocusEvent })` | 输入框获得焦点时触发，value 表示组件当前有效值 @@ -41,16 +46,19 @@ input | `(context: { value: TimePickerValue; e: InputEvent })` | 当输入框内 open | `(context: { e: MouseEvent })` | 面板打开时触发 pick | `(value: TimePickerValue, context: { e: MouseEvent })` | 面板选中值后触发 + ### TimeRangePicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许直接输入时间 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清除选中值 | N disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N disabled | Boolean / Array | - | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array` | N format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N +label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placeholder | String / Array | undefined | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array` | N popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N presets | Object | - | 预设快捷时间范围选择，示例：{ '下午': ['13:00:00', '18:00:00'] }。TS 类型：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N diff --git a/src/time-picker/time-range-picker-props.ts b/src/time-picker/time-range-picker-props.ts index e7b030b04..2c12db1d8 100644 --- a/src/time-picker/time-range-picker-props.ts +++ b/src/time-picker/time-range-picker-props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 是否允许直接输入时间 */ allowInput: Boolean, + /** 无边框模式 */ + borderless: Boolean, /** 是否允许清除选中值 */ clearable: Boolean, /** 禁用时间项 */ @@ -30,6 +32,10 @@ export default { type: Boolean, default: true, }, + /** 左侧文本 */ + label: { + type: [String, Function] as PropType, + }, /** 占位符，值为数组表示可分别为开始日期和结束日期设置占位符 */ placeholder: { type: [String, Array] as PropType, diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts index 045c66479..78ab3eff1 100644 --- a/src/time-picker/type.ts +++ b/src/time-picker/type.ts @@ -6,6 +6,7 @@ import { InputProps } from '../input'; import { PopupProps } from '../popup'; +import { SelectInputProps } from '../select-input'; import { SelectInputBlurContext } from '../select-input'; import { RangeInputProps } from '../range-input'; import { TNode } from '../common'; @@ -16,6 +17,11 @@ export interface TdTimePickerProps { * @default false */ allowInput?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否允许清除选中值 * @default false @@ -48,6 +54,10 @@ export interface TdTimePickerProps { * 透传给输入框（Input）组件的参数 */ inputProps?: InputProps; + /** + * 左侧文本 + */ + label?: string | TNode; /** * 占位符 */ @@ -60,6 +70,10 @@ export interface TdTimePickerProps { * 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }` */ presets?: PresetTime; + /** + * 透传 SelectInput 筛选器输入框组件的全部属性 + */ + selectInputProps?: SelectInputProps; /** * 尺寸 * @default medium @@ -89,10 +103,14 @@ export interface TdTimePickerProps { * @default '' */ defaultValue?: TimePickerValue; + /** + * 自定义选中项呈现的内容 + */ + valueDisplay?: string | TNode<{ value: TimePickerValue }>; /** * 当输入框失去焦点时触发，value 表示组件当前有效值 */ - onBlur?: (context: { value: TimePickerValue; e: FocusEvent }) => void; + onBlur?: (context: { value: TimePickerValue } & SelectInputBlurContext) => void; /** * 选中值发生变化时触发 */ @@ -125,6 +143,11 @@ export interface TdTimeRangePickerProps { * @default false */ allowInput?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否允许清除选中值 * @default false @@ -153,6 +176,10 @@ export interface TdTimeRangePickerProps { * @default true */ hideDisabledTime?: boolean; + /** + * 左侧文本 + */ + label?: string | TNode; /** * 占位符，值为数组表示可分别为开始日期和结束日期设置占位符 */ diff --git a/src/tooltip/props.ts b/src/tooltip/props.ts index 17b3fa2bb..63f21eead 100644 --- a/src/tooltip/props.ts +++ b/src/tooltip/props.ts @@ -8,9 +8,9 @@ import { TdTooltipProps } from './type'; import { PropType } from 'vue'; export default { - /** 【议案讨论中】延迟出现提示，用于异步加载提示信息需要延迟显示的业务场景下 */ + /** 延时显示或隐藏浮层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。直接透传到 Popup 组件。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150] */ delay: { - type: Number, + type: [Number, Array] as PropType, }, /** 是否在关闭浮层时销毁浮层 */ destroyOnClose: { @@ -23,8 +23,8 @@ export default { }, /** 浮层出现位置 */ placement: { - type: String as PropType, - default: 'top' as TdTooltipProps['placement'], + type: String, + default: 'top', }, /** 是否显示浮层箭头 */ showArrow: { diff --git a/src/tooltip/tooltip-lite-props.ts b/src/tooltip/tooltip-lite-props.ts new file mode 100644 index 000000000..dfb955dfc --- /dev/null +++ b/src/tooltip/tooltip-lite-props.ts @@ -0,0 +1,47 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdTooltipLiteProps } from '../tooltip/type'; +import { PropType } from 'vue'; + +export default { + /** 文字提示内容 */ + content: { + type: [String, Function] as PropType, + }, + /** 提示浮层出现的位置 */ + placement: { + type: String as PropType, + default: 'top' as TdTooltipLiteProps['placement'], + validator(val: TdTooltipLiteProps['placement']): boolean { + if (!val) return true; + return ['top', 'bottom', 'mouse'].includes(val); + }, + }, + /** 是否显示箭头 */ + showArrow: { + type: Boolean, + default: true, + }, + /** 文字提示浮层是否需要阴影 */ + showShadow: { + type: Boolean, + default: true, + }, + /** 组件风格，有亮色模式和暗色模式两种 */ + theme: { + type: String as PropType, + default: 'default' as TdTooltipLiteProps['theme'], + validator(val: TdTooltipLiteProps['theme']): boolean { + if (!val) return true; + return ['light', 'default'].includes(val); + }, + }, + /** 触发元素 */ + triggerElement: { + type: [String, Function] as PropType, + }, +}; diff --git a/src/tooltip/tooltip.en-US.md b/src/tooltip/tooltip.en-US.md index b388cceae..d930b27a6 100644 --- a/src/tooltip/tooltip.en-US.md +++ b/src/tooltip/tooltip.en-US.md @@ -5,20 +5,20 @@ name | type | default | description | required -- | -- | -- | -- | -- -delay | Number | - | \- | N +delay | Number / Array | - | delay to show or hide popover。Typescript：`number \| Array` | N destroyOnClose | Boolean | true | \- | N duration | Number | - | \- | N -placement | String | top | Typescript：`'mouse' \| PopupPlacement`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tooltip/type.ts) | N +placement | String | top | Typescript：`PopupPlacement`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tooltip/type.ts) | N showArrow | Boolean | true | \- | N theme | String | default | options：default/primary/success/danger/warning/light | N -`Omit` | \- | - | \- | N +`PopupProps` | \- | - | \- | N ### TooltipLite Props name | type | default | description | required -- | -- | -- | -- | -- content | String / Slot / Function | - | tip content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -placement | String | top | options：top/bottom | N +placement | String | top | options：top/bottom/mouse | N showArrow | Boolean | true | \- | N showShadow | Boolean | true | \- | N theme | String | default | options：light/default | N diff --git a/src/tooltip/tooltip.md b/src/tooltip/tooltip.md index f7d519a97..472fb3428 100644 --- a/src/tooltip/tooltip.md +++ b/src/tooltip/tooltip.md @@ -1,31 +1,24 @@ :: BASE_DOC :: -### 模拟超出省略原生属性 - -{{ mouse }} - -### 定时消失 -{{ duration }} - ## API ### Tooltip Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -delay | Number | - | 【议案讨论中】延迟出现提示，用于异步加载提示信息需要延迟显示的业务场景下 | N +delay | Number / Array | - | 延时显示或隐藏浮层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。直接透传到 Popup 组件。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]。TS 类型：`number \| Array` | N destroyOnClose | Boolean | true | 是否在关闭浮层时销毁浮层 | N duration | Number | - | 用于设置提示默认显示多长时间之后消失，初始第一次有效，单位：毫秒 | N -placement | String | top | 浮层出现位置。TS 类型：`'mouse' \| PopupPlacement`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tooltip/type.ts) | N +placement | String | top | 浮层出现位置。TS 类型：`PopupPlacement`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tooltip/type.ts) | N showArrow | Boolean | true | 是否显示浮层箭头 | N theme | String | default | 文字提示风格。可选项：default/primary/success/danger/warning/light | N -`Omit` | \- | - | 继承 `Omit` 中的全部 API | N +`PopupProps` | \- | - | 继承 `PopupProps` 中的全部 API | N ### TooltipLite Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- content | String / Slot / Function | - | 文字提示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -placement | String | top | 提示浮层出现的位置。可选项：top/bottom | N +placement | String | top | 提示浮层出现的位置。可选项：top/bottom/mouse | N showArrow | Boolean | true | 是否显示箭头 | N showShadow | Boolean | true | 文字提示浮层是否需要阴影 | N theme | String | default | 组件风格，有亮色模式和暗色模式两种。可选项：light/default | N diff --git a/src/tooltip/type.ts b/src/tooltip/type.ts index bf61ccb76..043bd3482 100644 --- a/src/tooltip/type.ts +++ b/src/tooltip/type.ts @@ -5,13 +5,14 @@ * */ import { PopupPlacement } from '../popup'; -import { PopupProps } from '../popup'; +import { TdPopupProps } from '../popup'; +import { TNode } from '../common'; -export interface TdTooltipProps extends Omit { +export interface TdTooltipProps extends TdPopupProps { /** - * 【议案讨论中】延迟出现提示，用于异步加载提示信息需要延迟显示的业务场景下 + * 延时显示或隐藏浮层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。直接透传到 Popup 组件。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150] */ - delay?: number; + delay?: number | Array; /** * 是否在关闭浮层时销毁浮层 * @default true @@ -25,7 +26,7 @@ export interface TdTooltipProps extends Omit { * 浮层出现位置 * @default top */ - placement?: 'mouse' | PopupPlacement; + placement?: PopupPlacement; /** * 是否显示浮层箭头 * @default true @@ -37,3 +38,34 @@ export interface TdTooltipProps extends Omit { */ theme?: 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'light'; } + +export interface TdTooltipLiteProps { + /** + * 文字提示内容 + */ + content?: string | TNode; + /** + * 提示浮层出现的位置 + * @default top + */ + placement?: 'top' | 'bottom' | 'mouse'; + /** + * 是否显示箭头 + * @default true + */ + showArrow?: boolean; + /** + * 文字提示浮层是否需要阴影 + * @default true + */ + showShadow?: boolean; + /** + * 组件风格，有亮色模式和暗色模式两种 + * @default default + */ + theme?: 'light' | 'default'; + /** + * 触发元素 + */ + triggerElement?: string | TNode; +} diff --git a/src/transfer/props.ts b/src/transfer/props.ts index 894786991..b0ce5454a 100644 --- a/src/transfer/props.ts +++ b/src/transfer/props.ts @@ -49,7 +49,7 @@ export default { footer: { type: [Array, Function] as PropType, }, - /** 用来定义 value / label / disabled 在 `data` 中对应的字段别名，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段 */ + /** 用来定义选项文本和选项值字段，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段 */ keys: { type: Object as PropType, }, @@ -91,6 +91,11 @@ export default { transferItem: { type: Function as PropType, }, + /** null */ + tree: { + type: Function as PropType, + default: 传入 Tree 组件定义树形结构, + }, /** 目标数据列表数据 */ value: { type: Array as PropType, diff --git a/src/transfer/transfer.en-US.md b/src/transfer/transfer.en-US.md index 953a88f53..8dfb3320c 100644 --- a/src/transfer/transfer.en-US.md +++ b/src/transfer/transfer.en-US.md @@ -1,19 +1,19 @@ :: BASE_DOC :: ## API + ### Transfer Props name | type | default | description | required -- | -- | -- | -- | -- checkboxProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N checked | Array | [] | `.sync` is supported。Typescript：`Array` | N -defaultChecked | Array | [] | uncontrolled property。Typescript：`Array` | N data | Array | [] | Typescript：`Array` | N direction | String | both | options: left/right/both | N disabled | Boolean / Array | - | Typescript：`boolean \| Array` | N empty | String / Array / Slot / Function | '' | Typescript：`EmptyType \| Array \| TNode` `type EmptyType = string \| TNode `。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N footer | Array / Slot / Function | - | Typescript：`Array \| TNode<{ type: TransferListType }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -keys | Object | - | alias field name in data。Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N operation | Array / Slot / Function | - | Typescript：`Array \| TNode<{ direction: 'left' \| 'right' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N pagination | Object / Array | - | Typescript：`PaginationProps \| Array`，[Pagination API Documents](./pagination?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N search | Boolean / Object / Array | false | Typescript：`SearchOption \| Array` `type SearchOption = boolean \| InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N diff --git a/src/transfer/transfer.md b/src/transfer/transfer.md index ff6458a56..7eaa5ee02 100644 --- a/src/transfer/transfer.md +++ b/src/transfer/transfer.md @@ -1,19 +1,19 @@ :: BASE_DOC :: ## API + ### Transfer Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- checkboxProps | Object | - | 用于控制复选框属性。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N checked | Array | [] | 数据列表选中项。支持语法糖 `.sync`。TS 类型：`Array` | N -defaultChecked | Array | [] | 数据列表选中项。非受控属性。TS 类型：`Array` | N data | Array | [] | 全量数据。TS 类型：`Array` | N direction | String | both | 穿梭框可操作方向。可选项：left/right/both | N disabled | Boolean / Array | - | 禁用全部操作：搜索、选中、移动、分页等。[源列表, 目标列表]，示例：[true, false] 或者 true。TS 类型：`boolean \| Array` | N empty | String / Array / Slot / Function | '' | 列表为空时呈现的内容。值类型为数组，则表示分别控制源列表和目标列表数据为空的呈现内容。TS 类型：`EmptyType \| Array \| TNode` `type EmptyType = string \| TNode `。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N footer | Array / Slot / Function | - | 穿梭框底部内容。TS 类型：`Array \| TNode<{ type: TransferListType }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -keys | Object | - | 用来定义 value / label / disabled 在 `data` 中对应的字段别名，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +keys | Object | - | 用来定义选项文本和选项值字段，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N operation | Array / Slot / Function | - | 方向操作按钮。默认显示组件内置操作图标。自定义操作图标示例：['向左', '向右'] 或者 `[() => , () => ]` 或者 `(h, direction) => direction === 'left' ? '《' : '》'`。TS 类型：`Array \| TNode<{ direction: 'left' \| 'right' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N pagination | Object / Array | - | 分页配置，值为空则不显示。具体 API 参考分页组件。值类型为数组，表示可分别控制源列表和目标列表分页组件。TS 类型：`PaginationProps \| Array`，[Pagination API Documents](./pagination?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N search | Boolean / Object / Array | false | 搜索框配置，值为 false 表示不显示搜索框；值为 true 表示显示默认搜索框；值类型为对象，用于透传 Props 到 Input 组件；值类型为数组，则分别表示控制两侧搜索框。TS 类型：`SearchOption \| Array` `type SearchOption = boolean \| InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N diff --git a/src/transfer/type.ts b/src/transfer/type.ts index b87f7bff1..954e45f80 100644 --- a/src/transfer/type.ts +++ b/src/transfer/type.ts @@ -7,6 +7,7 @@ import { CheckboxProps } from '../checkbox'; import { PaginationProps, PageInfo } from '../pagination'; import { InputProps } from '../input'; +import { TreeProps } from '../tree'; import { TNode, KeysType } from '../common'; export interface TdTransferProps { @@ -48,7 +49,7 @@ export interface TdTransferProps { */ footer?: Array | TNode<{ type: TransferListType }>; /** - * 用来定义 value / label / disabled 在 `data` 中对应的字段别名，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段 + * 用来定义选项文本和选项值字段，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段 */ keys?: KeysType; /** @@ -88,6 +89,11 @@ export interface TdTransferProps { * 自定义渲染节点 */ transferItem?: TNode>; + /** + * null + * @default 传入 Tree 组件定义树形结构 + */ + tree?: (tree: TreeProps) => TNode; /** * 目标数据列表数据 * @default [] diff --git a/src/tree-select/props.ts b/src/tree-select/props.ts index 8596a81a1..17df7ea9c 100644 --- a/src/tree-select/props.ts +++ b/src/tree-select/props.ts @@ -16,7 +16,7 @@ export default { borderless: Boolean, /** 是否允许清空 */ clearable: Boolean, - /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */ + /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 */ collapsedItems: { type: Function as PropType, }, @@ -49,7 +49,7 @@ export default { defaultInputValue: { type: [String, Number] as PropType, }, - /** 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }` */ + /** 用来定义 `value / label / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }` */ keys: { type: Object as PropType, }, diff --git a/src/tree-select/tree-select.en-US.md b/src/tree-select/tree-select.en-US.md index 957240042..eeb617c05 100644 --- a/src/tree-select/tree-select.en-US.md +++ b/src/tree-select/tree-select.en-US.md @@ -17,8 +17,8 @@ empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see mor filter | Function | - | Typescript：`(filterWords: string, option: DataOption) => boolean` | N filterable | Boolean | false | \- | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -inputValue | String / Number | - | input value。`.sync` is supported。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +inputValue | String / Number | - | input value。`.sync` is supported。Typescript：`string` | N +defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`string` | N keys | Object | - | alias filed name in data。Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | \- | N @@ -52,7 +52,7 @@ onChange | Function | | Typescript：`(value: TreeValueType, context: TreeSelec onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onEnter | Function | | Typescript：`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
| N onFocus | Function | | Typescript：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N -onInputChange | Function | | Typescript：`(value: InputValue, context: SelectInputValueChangeContext) => void`
| N +onInputChange | Function | | Typescript：`(value: string, context: SelectInputValueChangeContext) => void`
| N onPopupVisibleChange | Function | | Typescript：`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N onRemove | Function | | Typescript：`(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N onSearch | Function | | Typescript：`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N @@ -66,7 +66,7 @@ change | `(value: TreeValueType, context: TreeSelectChangeContext)` clear | `(context: { e: MouseEvent })` | \- enter | `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType })` | \- focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | \- -input-change | `(value: InputValue, context: SelectInputValueChangeContext)` | \- +input-change | `(value: string, context: SelectInputValueChangeContext)` | \- popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
remove | `(options: RemoveOptions)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
search | `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] })` | \- diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md index 87c9aaf1b..ae1b4c6b8 100644 --- a/src/tree-select/tree-select.md +++ b/src/tree-select/tree-select.md @@ -17,8 +17,8 @@ empty | String / Slot / Function | - | 当下拉列表为空时显示的内容 filter | Function | - | 过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, option: DataOption) => boolean` | N filterable | Boolean | false | 是否可搜索 | N inputProps | Object | - | 透传给 输入框 Input 组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -inputValue | String / Number | - | 输入框的值。支持语法糖 `.sync`。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +inputValue | String / Number | - | 输入框的值。支持语法糖 `.sync`。TS 类型：`string` | N +defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`string` | N keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | 是否正在加载数据 | N @@ -52,7 +52,7 @@ onChange | Function | | TS 类型：`(value: TreeValueType, context: TreeSelect onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击清除按钮时触发 | N onEnter | Function | | TS 类型：`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` | N onFocus | Function | | TS 类型：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N -onInputChange | Function | | TS 类型：`(value: InputValue, context: SelectInputValueChangeContext) => void`
输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 | N +onInputChange | Function | | TS 类型：`(value: string, context: SelectInputValueChangeContext) => void`
输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 | N onPopupVisibleChange | Function | | TS 类型：`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N onRemove | Function | | TS 类型：`(options: RemoveOptions) => void`
多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N onSearch | Function | | TS 类型：`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
输入值变化时，触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`，即一旦存在这个远程搜索事件 `filter` 失效 | N @@ -66,7 +66,7 @@ change | `(value: TreeValueType, context: TreeSelectChangeContext)` clear | `(context: { e: MouseEvent })` | 点击清除按钮时触发 enter | `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType })` | 回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | 输入框获得焦点时触发 -input-change | `(value: InputValue, context: SelectInputValueChangeContext)` | 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 +input-change | `(value: string, context: SelectInputValueChangeContext)` | 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | 下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
remove | `(options: RemoveOptions)` | 多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
search | `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] })` | 输入值变化时，触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`，即一旦存在这个远程搜索事件 `filter` 失效 diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts index ba447fe72..bea4cb233 100644 --- a/src/tree-select/type.ts +++ b/src/tree-select/type.ts @@ -5,12 +5,13 @@ * */ import { InputProps } from '../input'; +import { InputValue } from '../input'; import { PopupProps } from '../popup'; import { SelectInputProps, SelectInputBlurContext, SelectInputValueChangeContext } from '../select-input'; import { TagProps } from '../tag'; -import { TreeProps, TreeNodeModel } from '../tree'; -import { PopupTriggerEvent, PopupTriggerSource } from '../popup'; -import { TNode, TreeOptionData, TreeKeysType } from '../common'; +import { TreeProps, TreeNodeModel, TreeKeysType } from '../tree'; +import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '../popup'; +import { TNode, TreeOptionData } from '../common'; export interface TdTreeSelectProps< DataOption extends TreeOptionData = TreeOptionData, @@ -37,14 +38,9 @@ export interface TdTreeSelectProps< */ clearable?: boolean; /** - * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 + * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 */ - collapsedItems?: TNode<{ - value: DataOption[]; - collapsedSelectedItems: DataOption[]; - count: number; - onClose: (context: { index: number; e?: MouseEvent }) => void; - }>; + collapsedItems?: TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>; /** * 树选择的数据列表。结构：`[{ label: TNode, value: string | number, text: string, ... }]`，其中 `label` 表示选项呈现的内容，可自定义；`value` 表示选项的唯一值；表示当 `label` 用于选项复杂内容呈现时，`text` 用于搜索功能。
其中 `label` 和 `value` 可以使用 `keys` 属性定义别名 * @default [] @@ -74,13 +70,13 @@ export interface TdTreeSelectProps< /** * 输入框的值 */ - inputValue?: string; + inputValue?: InputValue; /** * 输入框的值，非受控属性 */ - defaultInputValue?: string; + defaultInputValue?: InputValue; /** - * 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }` + * 用来定义 `value / label / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }` */ keys?: TreeKeysType; /** @@ -223,7 +219,7 @@ export interface TdTreeSelectProps< /** * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 */ - onInputChange?: (value: string, context: SelectInputValueChangeContext) => void; + onInputChange?: (value: InputValue, context: SelectInputValueChangeContext) => void; /** * 下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node` */ diff --git a/src/tree/props.ts b/src/tree/props.ts index b1029fc6d..1e12ccf28 100644 --- a/src/tree/props.ts +++ b/src/tree/props.ts @@ -15,7 +15,6 @@ export default { /** 高亮的节点值 */ actived: { type: Array as PropType, - default: undefined, }, /** 高亮的节点值，非受控属性 */ defaultActived: { @@ -66,7 +65,7 @@ export default { /** 展开的节点值 */ expanded: { type: Array as PropType, - default: undefined, + default: (): TdTreeProps['expanded'] => [], }, /** 展开的节点值，非受控属性 */ defaultExpanded: { @@ -131,7 +130,7 @@ export default { /** 选中值，组件为可选状态时有效 */ value: { type: Array as PropType, - default: undefined, + default: (): TdTreeProps['value'] => [], }, /** 选中值，组件为可选状态时有效，非受控属性 */ defaultValue: { diff --git a/src/tree/tree.en-US.md b/src/tree/tree.en-US.md index 80e87f811..7988fa420 100644 --- a/src/tree/tree.en-US.md +++ b/src/tree/tree.en-US.md @@ -81,6 +81,7 @@ getPath | `(value: TreeNodeValue)` | `TreeNodeModel[]` | required getTreeData | `(value?: TreeNodeValue)` | `Array` | required。get tree struct data insertAfter | `(value: TreeNodeValue, newData: T)` | \- | required insertBefore | `(value: TreeNodeValue, newData: T)` | \- | required +refresh | \- | \- | required。refresh tree state, used in tree search remove | `(value: TreeNodeValue)` | \- | required scrollTo | `(scrollToParams: ScrollToElementParams)` | \- | support scrolling to a specific node when virtual scrolling setItem | `(value: TreeNodeValue, options: TreeNodeState)` | \- | required diff --git a/src/tree/tree.md b/src/tree/tree.md index a54645c45..98d453c8e 100644 --- a/src/tree/tree.md +++ b/src/tree/tree.md @@ -81,6 +81,7 @@ getPath | `(value: TreeNodeValue)` | `TreeNodeModel[]` | 必需。自下而 getTreeData | `(value?: TreeNodeValue)` | `Array` | 必需。获取某节点的全部树形结构；参数为空，则表示获取整棵树的结构数据，泛型 `T` 表示树节点 TS 类型 insertAfter | `(value: TreeNodeValue, newData: T)` | \- | 必需。插入新节点到指定节点后面，泛型 `T` 表示树节点 TS 类型 insertBefore | `(value: TreeNodeValue, newData: T)` | \- | 必需。插入新节点到指定节点前面，泛型 `T` 表示树节点 TS 类型 +refresh | \- | \- | 必需。刷新树节点状态，可用于搜索场景刷新 remove | `(value: TreeNodeValue)` | \- | 必需。移除指定节点 scrollTo | `(scrollToParams: ScrollToElementParams)` | \- | 虚拟滚动场景下 支持指定滚动到具体的节点 setItem | `(value: TreeNodeValue, options: TreeNodeState)` | \- | 必需。设置节点状态 diff --git a/src/tree/type.ts b/src/tree/type.ts index e0de332c8..c7d8e0bb6 100644 --- a/src/tree/type.ts +++ b/src/tree/type.ts @@ -277,6 +277,10 @@ export interface TreeInstanceFunctions void; + /** + * 刷新树节点状态，可用于搜索场景刷新 + */ + refresh: () => void; /** * 移除指定节点 */ diff --git a/src/typography/paragraph-props.ts b/src/typography/paragraph-props.ts new file mode 100644 index 000000000..cc519da2e --- /dev/null +++ b/src/typography/paragraph-props.ts @@ -0,0 +1,24 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdParagraphProps } from '../typography/type'; +import { PropType } from 'vue'; + +export default { + /** 段落内容 */ + content: { + type: [String, Function] as PropType, + }, + /** 段落内容 */ + default: { + type: [String, Function] as PropType, + }, + /** 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式 */ + ellipsis: { + type: [Boolean, Object] as PropType, + default: false, + }, +}; diff --git a/src/typography/text-props.ts b/src/typography/text-props.ts new file mode 100644 index 000000000..3941e8ecd --- /dev/null +++ b/src/typography/text-props.ts @@ -0,0 +1,56 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdTextProps } from '../typography/type'; +import { PropType } from 'vue'; + +export default { + /** 是否添加代码样式 */ + code: Boolean, + /** 文本内容 */ + content: { + type: [String, Function] as PropType, + }, + /** 是否可复制，可通过配置参数自定义复制操作的具体功能和样式 */ + copyable: { + type: [Boolean, Object] as PropType, + default: false, + }, + /** 文本内容 */ + default: { + type: [String, Function] as PropType, + }, + /** 是否添加删除线样式 */ + delete: Boolean, + /** 是否添加不可用样式 */ + disabled: Boolean, + /** 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式 */ + ellipsis: { + type: [Boolean, Object] as PropType, + default: false, + }, + /** 文本是否为斜体 */ + italic: Boolean, + /** 是否添加键盘样式 */ + keyboard: Boolean, + /** 是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9 */ + mark: { + type: [String, Boolean] as PropType, + default: false, + }, + /** 文本是否加粗 */ + strong: Boolean, + /** 主题 */ + theme: { + type: String as PropType, + validator(val: TdTextProps['theme']): boolean { + if (!val) return true; + return ['primary', 'secondary', 'success', 'warning', 'error'].includes(val); + }, + }, + /** 是否添加下划线样式 */ + underline: Boolean, +}; diff --git a/src/typography/title-props.ts b/src/typography/title-props.ts new file mode 100644 index 000000000..ee7cd4a35 --- /dev/null +++ b/src/typography/title-props.ts @@ -0,0 +1,33 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdTitleProps } from '../typography/type'; +import { PropType } from 'vue'; + +export default { + /** 段落内容 */ + content: { + type: [String, Function] as PropType, + }, + /** 标题内容 */ + default: { + type: [String, Function] as PropType, + }, + /** 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式 */ + ellipsis: { + type: [Boolean, Object] as PropType, + default: false, + }, + /** 标题等级 */ + level: { + type: String as PropType, + default: 'h1' as TdTitleProps['level'], + validator(val: TdTitleProps['level']): boolean { + if (!val) return true; + return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(val); + }, + }, +}; diff --git a/src/typography/type.ts b/src/typography/type.ts new file mode 100644 index 000000000..30012e892 --- /dev/null +++ b/src/typography/type.ts @@ -0,0 +1,160 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { tooltipProps } from '../tooltip'; +import { TNode } from '../common'; + +export interface TdTextProps { + /** + * 是否添加代码样式 + * @default false + */ + code?: boolean; + /** + * 文本内容 + */ + content?: string | TNode; + /** + * 是否可复制，可通过配置参数自定义复制操作的具体功能和样式 + * @default false + */ + copyable?: boolean | TypographyCopyable; + /** + * 文本内容 + */ + default?: string | TNode; + /** + * 是否添加删除线样式 + * @default false + */ + delete?: boolean; + /** + * 是否添加不可用样式 + * @default false + */ + disabled?: boolean; + /** + * 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式 + * @default false + */ + ellipsis?: boolean | TypographyEllipsis; + /** + * 文本是否为斜体 + * @default false + */ + italic?: boolean; + /** + * 是否添加键盘样式 + * @default false + */ + keyboard?: boolean; + /** + * 是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9 + * @default false + */ + mark?: string | boolean; + /** + * 文本是否加粗 + * @default false + */ + strong?: boolean; + /** + * 主题 + */ + theme?: 'primary' | 'secondary' | 'success' | 'warning' | 'error'; + /** + * 是否添加下划线样式 + * @default false + */ + underline?: boolean; +} + +export interface TdTitleProps { + /** + * 段落内容 + */ + content?: string | TNode; + /** + * 标题内容 + */ + default?: string | TNode; + /** + * 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式 + * @default false + */ + ellipsis?: boolean | TypographyEllipsis; + /** + * 标题等级 + * @default h1 + */ + level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; +} + +export interface TdParagraphProps { + /** + * 段落内容 + */ + content?: string | TNode; + /** + * 段落内容 + */ + default?: string | TNode; + /** + * 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式 + * @default false + */ + ellipsis?: boolean | TypographyEllipsis; +} + +export interface TypographyEllipsis { + /** + * 展开后是否可以重新收起 + * @default true + */ + collapsible?: boolean; + /** + * 是否可展开 + * @default true + */ + expandable?: boolean; + /** + * 省略配置默认展示行数 + * @default 1 + */ + row?: number; + /** + * 自定义省略触发元素，一般用于自定义折叠图标 + */ + suffix?: TNode<{ expanded: boolean }>; + /** + * 光标在省略图标上出现的tooltip的配置 + */ + tooltipProps?: tooltipProps; + /** + * 点击省略按钮的回调 + */ + onExpand?: (expanded: boolean) => void; +} + +export interface TypographyCopyable { + /** + * 复制的文本内容，默认为全部文本 + * @default '' + */ + text?: string; + /** + * 自定义复制触发元素，一般用于自定义复制图标 + */ + suffix?: TNode<{ copied: boolean }>; + /** + * 光标在复制图标上出现的tooltip的配置 + */ + tooltipProps?: tooltipProps; + /** + * 点击复制按钮的回调 + */ + onCopy?: () => void; +} diff --git a/src/typography/typography.en-US.md b/src/typography/typography.en-US.md new file mode 100644 index 000000000..d17614e22 --- /dev/null +++ b/src/typography/typography.en-US.md @@ -0,0 +1,67 @@ +:: BASE_DOC :: + +## API +### Text Props + +name | type | default | description | required +-- | -- | -- | -- | -- +code | Boolean | false | add code style | N +content | String / Slot / Function | - | content of text。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +copyable | Boolean / Object | false | add copyable style。Typescript：`boolean \| TypographyCopyable` | N +default | String / Slot / Function | - | default slot of text。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +delete | Boolean | false | add delete line style | N +disabled | Boolean | false | add disabled style | N +ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N +italic | Boolean | false | add italic style | N +keyboard | Boolean | false | add keyboard style | N +mark | String / Boolean | false | add mark style | N +strong | Boolean | false | add bold style | N +theme | String | - | theme of text。options: primary/secondary/success/warning/error | N +underline | Boolean | false | add underline style | N + +### Title Props + +name | type | default | description | required +-- | -- | -- | -- | -- +content | String / Slot / Function | - | content of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | default slot of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N +level | String | h1 | level of title。options: h1/h2/h3/h4/h5/h6 | N + +### Paragraph Props + +name | type | default | description | required +-- | -- | -- | -- | -- +content | String / Slot / Function | - | content of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | default slot of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N + +### TypographyEllipsis + +name | type | default | description | required +-- | -- | -- | -- | -- +collapsible | Boolean | true | collapsible after expanding | N +expandable | Boolean | true | expandable | N +row | Number | 1 | default row number of ellipsis | N +suffix | Slot / Function | - | custom element configuration for ellipsis and collapse icon。Typescript：`TNode<{ expanded: boolean }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +tooltipProps | Object | - | Configuration of the tooltip that appears on the ellipsis icon when the cursor is over it.。Typescript：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/typography/type.ts) | N +onExpand | Function | | Typescript：`(expanded:boolean) => void`
| N +### TypographyEllipsis + +name | params | description +-- | -- | -- +expand | `(expanded:boolean)` | \- + +### TypographyCopyable + +name | type | default | description | required +-- | -- | -- | -- | -- + text | String | - | copied content | N +suffix | Slot / Function | - | custom element configuration for copy icon。Typescript：`TNode<{ copied: boolean }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +tooltipProps | Object | - | Configuration of the tooltip that appears on the copy icon when the cursor is over it.。Typescript：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/typography/type.ts) | N +onCopy | Function | | Typescript：`() => void`
| N +### TypographyCopyable + +name | params | description +-- | -- | -- +copy | \- | \- diff --git a/src/typography/typography.md b/src/typography/typography.md new file mode 100644 index 000000000..13f303831 --- /dev/null +++ b/src/typography/typography.md @@ -0,0 +1,67 @@ +:: BASE_DOC :: + +## API +### Text Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +code | Boolean | false | 是否添加代码样式 | N +content | String / Slot / Function | - | 文本内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +copyable | Boolean / Object | false | 是否可复制，可通过配置参数自定义复制操作的具体功能和样式。TS 类型：`boolean \| TypographyCopyable` | N +default | String / Slot / Function | - | 文本内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +delete | Boolean | false | 是否添加删除线样式 | N +disabled | Boolean | false | 是否添加不可用样式 | N +ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N +italic | Boolean | false | 文本是否为斜体 | N +keyboard | Boolean | false | 是否添加键盘样式 | N +mark | String / Boolean | false | 是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9 | N +strong | Boolean | false | 文本是否加粗 | N +theme | String | - | 主题。可选项：primary/secondary/success/warning/error | N +underline | Boolean | false | 是否添加下划线样式 | N + +### Title Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +content | String / Slot / Function | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | 标题内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N +level | String | h1 | 标题等级。可选项：h1/h2/h3/h4/h5/h6 | N + +### Paragraph Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +content | String / Slot / Function | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N + +### TypographyEllipsis + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +collapsible | Boolean | true | 展开后是否可以重新收起 | N +expandable | Boolean | true | 是否可展开 | N +row | Number | 1 | 省略配置默认展示行数 | N +suffix | Slot / Function | - | 自定义省略触发元素，一般用于自定义折叠图标。TS 类型：`TNode<{ expanded: boolean }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +tooltipProps | Object | - | 光标在省略图标上出现的tooltip的配置。TS 类型：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/typography/type.ts) | N +onExpand | Function | | TS 类型：`(expanded:boolean) => void`
点击省略按钮的回调 | N +### TypographyEllipsis + +名称 | 参数 | 描述 +-- | -- | -- +expand | `(expanded:boolean)` | 点击省略按钮的回调 + +### TypographyCopyable + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- + text | String | - | 复制的文本内容，默认为全部文本 | N +suffix | Slot / Function | - | 自定义复制触发元素，一般用于自定义复制图标。TS 类型：`TNode<{ copied: boolean }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +tooltipProps | Object | - | 光标在复制图标上出现的tooltip的配置。TS 类型：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/typography/type.ts) | N +onCopy | Function | | TS 类型：`() => void`
点击复制按钮的回调 | N +### TypographyCopyable + +名称 | 参数 | 描述 +-- | -- | -- +copy | \- | 点击复制按钮的回调 diff --git a/src/upload/__tests__/vitest-upload.test.jsx b/src/upload/__tests__/vitest-upload.test.jsx index 0fedad7d1..2fec4c3c0 100644 --- a/src/upload/__tests__/vitest-upload.test.jsx +++ b/src/upload/__tests__/vitest-upload.test.jsx @@ -6,10 +6,8 @@ */ import { mount } from '@vue/test-utils'; import { vi } from 'vitest'; -import { - mockDelay, simulateFileChange, getFakeFileList, simulateDragFileChange, -} from '@test/utils'; import { Upload } from '..'; +import { mockDelay, simulateFileChange, getFakeFileList, simulateDragFileChange } from '@test/utils'; import { getUploadServer } from './request'; describe('Upload Component', () => { @@ -273,24 +271,9 @@ describe('Upload Component', () => { theme={'file-flow'} autoUpload={false} files={[ - { - name: 'file1.txt', - status: 'waiting', - uploadTime: '2023-01-27', - lastModified: 1674830942522, - }, - { - name: 'file2.txt', - status: 'success', - uploadTime: '2023-01-27', - lastModified: 1674831204354, - }, - { - name: 'file3.txt', - status: 'fail', - uploadTime: '2023-01-27', - lastModified: 1674831204354, - }, + { name: 'file1.txt', status: 'waiting', uploadTime: '2023-01-27', lastModified: 1674830942522 }, + { name: 'file2.txt', status: 'success', uploadTime: '2023-01-27', lastModified: 1674831204354 }, + { name: 'file3.txt', status: 'fail', uploadTime: '2023-01-27', lastModified: 1674831204354 }, ]} action={'https://tdesign.test.com/upload/file_success'} on={{ change: onChangeFn1, remove: onRemoveFn1 }} @@ -304,24 +287,9 @@ describe('Upload Component', () => { await wrapper.vm.$nextTick(); expect(onChangeFn1).toHaveBeenCalled(); expect(onChangeFn1.mock.calls[0][0]).toEqual([ - { - name: 'file1.txt', - status: 'waiting', - uploadTime: '2023-01-27', - lastModified: 1674830942522, - }, - { - name: 'file2.txt', - status: 'success', - uploadTime: '2023-01-27', - lastModified: 1674831204354, - }, - { - name: 'file3.txt', - status: 'waiting', - uploadTime: '2023-01-27', - lastModified: 1674831204354, - }, + { name: 'file1.txt', status: 'waiting', uploadTime: '2023-01-27', lastModified: 1674830942522 }, + { name: 'file2.txt', status: 'success', uploadTime: '2023-01-27', lastModified: 1674831204354 }, + { name: 'file3.txt', status: 'waiting', uploadTime: '2023-01-27', lastModified: 1674831204354 }, ]); expect(onChangeFn1.mock.calls[0][1].trigger).toBe('abort'); expect(onRemoveFn1).not.toHaveBeenCalled(); @@ -676,14 +644,7 @@ describe('Upload Component', () => { ); }, @@ -1330,7 +1291,7 @@ describe('Upload Component', () => { expect(onFailFn.mock.calls[0][0].XMLHttpRequest.upload.requestHeaders['XML-HTTP-REQUEST']).toBe('tdesign_token'); }); - it("props.inputAttributes is equal to { webkitdirectory: 'webkitdirectory' }", () => { + it(`props.inputAttributes is equal to { webkitdirectory: 'webkitdirectory' }`, () => { const wrapper = mount({ render() { return ; @@ -1520,10 +1481,11 @@ describe('Upload Component', () => { theme={'image-flow'} multiple={true} files={[]} - requestMethod={() => Promise.resolve({ - status: 'success', - response: { url: 'https://tdesign.gtimg.com/demo/demo-image-1.png' }, - }) + requestMethod={() => + Promise.resolve({ + status: 'success', + response: { url: 'https://tdesign.gtimg.com/demo/demo-image-1.png' }, + }) } on={{ change: onChangeFn }} > @@ -1790,12 +1752,7 @@ describe('Upload Component', () => { { url: 'https://img1.txt', status: 'success', name: 'img1.txt' }, { url: 'https://img2.txt', status: 'waiting', name: 'img2.txt' }, { url: 'https://img3.txt', status: 'fail', name: 'img3.txt' }, - { - url: 'https://img4.txt', - status: 'progress', - percent: 90, - name: 'img4.txt', - }, + { url: 'https://img4.txt', status: 'progress', percent: 90, name: 'img4.txt' }, ]} > ); diff --git a/src/upload/props.ts b/src/upload/props.ts index f94ca93dc..0ce8f2e24 100644 --- a/src/upload/props.ts +++ b/src/upload/props.ts @@ -67,7 +67,7 @@ export default { /** 已上传文件列表，同 `value`。TS 类型：`UploadFile` */ files: { type: Array as PropType, - default: undefined, + default: (): TdUploadProps['files'] => [], }, /** 已上传文件列表，同 `value`。TS 类型：`UploadFile`，非受控属性 */ defaultFiles: { @@ -115,7 +115,7 @@ export default { default: 'POST' as TdUploadProps['method'], validator(val: TdUploadProps['method']): boolean { if (!val) return true; - return ['POST', 'GET', 'PUT', 'OPTIONS', 'PATCH', 'post', 'get', 'put', 'options', 'patch'].includes(val); + return ['POST', 'GET', 'PUT', 'OPTION', 'PATCH', 'post', 'get', 'put', 'option', 'patch'].includes(val); }, }, /** 模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效 */ @@ -202,7 +202,7 @@ export default { /** 已上传文件列表，同 `files`。TS 类型：`UploadFile` */ value: { type: Array as PropType, - default: undefined, + default: (): TdUploadProps['value'] => [], }, /** 已上传文件列表，同 `files`。TS 类型：`UploadFile`，非受控属性 */ defaultValue: { diff --git a/src/upload/type.ts b/src/upload/type.ts index be27ad599..b81e68f53 100644 --- a/src/upload/type.ts +++ b/src/upload/type.ts @@ -125,7 +125,7 @@ export interface TdUploadProps { * HTTP 请求类型 * @default POST */ - method?: 'POST' | 'GET' | 'PUT' | 'OPTIONS' | 'PATCH' | 'post' | 'get' | 'put' | 'options' | 'patch'; + method?: 'POST' | 'GET' | 'PUT' | 'OPTION' | 'PATCH' | 'post' | 'get' | 'put' | 'option' | 'patch'; /** * 模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效 */ diff --git a/src/upload/upload.en-US.md b/src/upload/upload.en-US.md index 9b87cee59..a9ca594af 100644 --- a/src/upload/upload.en-US.md +++ b/src/upload/upload.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Upload Props name | type | default | description | required @@ -30,7 +31,7 @@ inputAttributes | Object | - | add attributes to HTML element `input`。Typescri isBatchUpload | Boolean | false | make all files to be a whole package, files can only be replaced or deleted together, can not add more files | N locale | Object | - | upload language config, priority of `locale` is higher than global language config。Typescript：`UploadConfig` `import { UploadConfig } from '../config-provider/type'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N max | Number | 0 | max count of files limit | N -method | String | POST | HTTP request method。options: POST/GET/PUT/OPTIONS/PATCH/post/get/put/options/patch | N +method | String | POST | HTTP request method。options: POST/GET/PUT/OPTION/PATCH/post/get/put/option/patch | N mockProgressDuration | Number | - | mock progress duration time. more large files more duration time | N multiple | Boolean | false | multiple files uploading | N name | String | file | field name of files in upload request data | N diff --git a/src/upload/upload.md b/src/upload/upload.md index 1a2e492e6..5d61318d5 100644 --- a/src/upload/upload.md +++ b/src/upload/upload.md @@ -1,9 +1,10 @@ :: BASE_DOC :: ## API + ### Upload Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- abridgeName | Array | - | 文件名过长时，需要省略中间的文本，保留首尾文本。示例：[10, 7]，表示首尾分别保留的文本长度。TS 类型：`Array` | N accept | String | - | 接受上传的文件类型，[查看 W3C示例](https://www.w3schools.com/tags/att_input_accept.asp)，[查看 MDN 示例](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file) | N @@ -30,7 +31,7 @@ inputAttributes | Object | - | 用于添加属性到 HTML 元素 `input`。TS isBatchUpload | Boolean | false | 多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效 | N locale | Object | - | 上传组件文本语言配置，支持自定义配置组件中的全部文本。优先级高于全局配置中语言。TS 类型：`UploadConfig` `import { UploadConfig } from '../config-provider/type'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制。注意，单文件上传场景，请勿设置 `max` 属性 | N -method | String | POST | HTTP 请求类型。可选项：POST/GET/PUT/OPTIONS/PATCH/post/get/put/options/patch | N +method | String | POST | HTTP 请求类型。可选项：POST/GET/PUT/OPTION/PATCH/post/get/put/option/patch | N mockProgressDuration | Number | - | 模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效 | N multiple | Boolean | false | 支持多文件上传 | N name | String | file | 文件上传时的名称 | N @@ -98,7 +99,7 @@ uploadFiles | `(files?: UploadFile[])` | \- | 必需。组件实例方法，默 ### UploadFile -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- lastModified | Number | - | 上一次变更的时间 | N name | String | - | 文件名称 | N diff --git a/src/virtual-scroll/type.ts b/src/virtual-scroll/type.ts new file mode 100644 index 000000000..05e5c3b6a --- /dev/null +++ b/src/virtual-scroll/type.ts @@ -0,0 +1,33 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { VirtualSInfinityScroll'../common'; + +export interface VirtualScroll { + /** + * 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白 + * @default 20 + */ + bufferSize?: number; + /** + * 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值 + * @default false + */ + isFixedRowHeight?: boolean; + /** + * 行高，不会给``元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为每行平均高度，从而使得滚动过程更加平滑 + */ + rowHeight?: number; + /** + * 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动 + * @default 100 + */ + threshold?: number; + /** + * 滚动加载类型，有两种：懒加载和虚拟滚动。
值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；
值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性 + */ + type: 'lazy' | 'virtual'; +} diff --git a/src/watermark/watermark.en-US.md b/src/watermark/watermark.en-US.md index 084f1839a..ce3676b2f 100644 --- a/src/watermark/watermark.en-US.md +++ b/src/watermark/watermark.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Watermark Props name | type | default | description | required @@ -27,8 +28,9 @@ zIndex | Number | - | \- | N name | type | default | description | required -- | -- | -- | -- | -- fontColor | String | rgba(0,0,0,0.1) | \- | N +fontFamily | String | - | font-family configuration for watermark text. | N fontSize | Number | 16 | \- | N -fontWeight | String | normal | options：normal/lighter/bold/bolder | N +fontWeight | String | normal | options: normal/lighter/bold/bolder | N text | String | - | \- | N ### WatermarkImage diff --git a/src/watermark/watermark.md b/src/watermark/watermark.md index 54e24a4ee..dd2d6a19c 100644 --- a/src/watermark/watermark.md +++ b/src/watermark/watermark.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Watermark Props 名称 | 类型 | 默认值 | 说明 | 必传 @@ -27,6 +28,7 @@ zIndex | Number | - | 水印元素的 `z-index`，默认值写在 CSS 中 | N 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- fontColor | String | rgba(0,0,0,0.1) | 水印文本文字颜色 | N +fontFamily | String | - | 水印文本文字字体 | N fontSize | Number | 16 | 水印文本文字大小 | N fontWeight | String | normal | 水印文本文字粗细。可选项：normal/lighter/bold/bolder | N text | String | - | 水印文本内容 | N