diff --git a/examples/affix/affix.en-US.md b/examples/affix/affix.en-US.md new file mode 100644 index 000000000..bbb1e9247 --- /dev/null +++ b/examples/affix/affix.en-US.md @@ -0,0 +1,19 @@ +:: BASE_DOC :: + +## API + +### Affix Props + +name | type | default | description | required +-- | -- | -- | -- | -- +container | String / Function | () => (() => window) | Typescript：`ScrollContainer` | N +offsetBottom | Number | 0 | \- | N +offsetTop | Number | 0 | \- | N +zIndex | Number | - | \- | N +onFixedChange | Function | | TS 类型：`(affixed: boolean, context: { top: number }) => void`
| N + +### Affix Events + +name | params | description +-- | -- | -- +fixed-change | `(affixed: boolean, context: { top: number })` | \- diff --git a/examples/alert/alert.en-US.md b/examples/alert/alert.en-US.md new file mode 100644 index 000000000..c7ab0bf6c --- /dev/null +++ b/examples/alert/alert.en-US.md @@ -0,0 +1,25 @@ +:: BASE_DOC :: + +## API + +### Alert Props + +name | type | default | description | required +-- | -- | -- | -- | -- +close | String / Boolean / Slot / Function | false | Typescript：`string | boolean | 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 +icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +maxLine | Number | 0 | \- | N +message | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +operation | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +theme | String | info | options：success/info/warning/error | N +title | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onClosed | Function | | TS 类型：`(context: { e: TransitionEvent }) => void`
| N + +### Alert Events + +name | params | description +-- | -- | -- +close | `(context: { e: MouseEvent })` | \- +closed | `(context: { e: TransitionEvent })` | \- diff --git a/examples/anchor/anchor.en-US.md b/examples/anchor/anchor.en-US.md new file mode 100644 index 000000000..127c468d8 --- /dev/null +++ b/examples/anchor/anchor.en-US.md @@ -0,0 +1,38 @@ +:: BASE_DOC :: + +## API + +### Anchor Props + +name | type | default | description | required +-- | -- | -- | -- | -- +affixProps | Object | - | Typescript：`AffixProps`，[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/anchor/type.ts) | N +bounds | Number | 5 | \- | N +container | String / Function | () => (() => window) | Typescript：`ScrollContainer` | N +cursor | 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 +targetOffset | Number | 0 | \- | N +onChange | Function | | TS 类型：`(currentLink: string, prevLink: string) => void`
| N +onClick | Function | | TS 类型：`(link: { href: string; title: string; e: MouseEvent }) => void`
| N + +### Anchor Events + +name | params | description +-- | -- | -- +change | `(currentLink: string, prevLink: string)` | \- +click | `(link: { href: string; title: string; e: MouseEvent })` | \- + +### AnchorItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +href | String | - | required | Y +target | String | _self | options：_self/_blank/_parent/_top | N +title | String / Slot / Function | '' | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N + +### AnchorTarget Props + +name | type | default | description | required +-- | -- | -- | -- | -- +id | String | - | required | Y +tag | String | div | \- | N diff --git a/examples/avatar/avatar.en-US.md b/examples/avatar/avatar.en-US.md new file mode 100644 index 000000000..f0f2c2770 --- /dev/null +++ b/examples/avatar/avatar.en-US.md @@ -0,0 +1,32 @@ +:: BASE_DOC :: + +## API + +### Avatar Props + +name | type | default | description | required +-- | -- | -- | -- | -- +alt | String | - | show it when url is not valid | N +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 +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 +onError | Function | | TS 类型：`() => void`
trigger on image load failed | N + +### Avatar Events + +name | params | description +-- | -- | -- +error | \- | trigger on image load failed + +### 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 +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 +placement | String | - | popup placement。options：left/top/bottom/right。Typescript：`MaxOverPlacement` `type MaxOverPlacement = 'left' | 'top' | 'bottom' | 'right'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/avatar/type.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/avatar/type.ts) | N +size | String | medium | size | N diff --git a/examples/badge/badge.en-US.md b/examples/badge/badge.en-US.md new file mode 100644 index 000000000..d5c0368fb --- /dev/null +++ b/examples/badge/badge.en-US.md @@ -0,0 +1,18 @@ +:: BASE_DOC :: + +## API + +### Badge Props + +name | type | default | description | required +-- | -- | -- | -- | -- +color | String | - | \- | N +content | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +count | String / Number / Slot / Function | 0 | Typescript：`string | number | 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 +dot | Boolean | false | \- | N +maxCount | Number | 99 | \- | N +offset | Array | - | Typescript：`Array` | N +shape | String | circle | options：circle/round | N +showZero | Boolean | false | \- | N +size | String | medium | options：small/medium | N diff --git a/examples/breadcrumb/breadcrumb.en-US.md b/examples/breadcrumb/breadcrumb.en-US.md new file mode 100644 index 000000000..7369ff070 --- /dev/null +++ b/examples/breadcrumb/breadcrumb.en-US.md @@ -0,0 +1,26 @@ +:: BASE_DOC :: + +## API + +### Breadcrumb Props + +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 + +### 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 +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 diff --git a/examples/button/button_en.md b/examples/button/button.en-US.md similarity index 87% rename from examples/button/button_en.md rename to examples/button/button.en-US.md index 7476ddfb8..e956181cf 100644 --- a/examples/button/button_en.md +++ b/examples/button/button.en-US.md @@ -14,13 +14,13 @@ icon | Slot / Function | - | use it to set left icon in button。Typescript：`T loading | Boolean | false | set button to be loading state | N shape | String | rectangle | button shape。options：rectangle/square/round/circle | N size | String | medium | a button 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 -theme | String | undefined | button theme。options：default/primary/danger/warning/success | N +theme | String | - | button theme。options：default/primary/danger/warning/success | N type | String | button | type of button element in html。options：submit/reset/button | N variant | String | base | variant of button。options：base/outline/dashed/text | N -onClick | Function | | `(e: MouseEvent) => {}` | N +onClick | Function | | TS 类型：`(e: MouseEvent) => void`
| N ### Button Events name | params | description -- | -- | -- -click | `(e: MouseEvent)` | - +click | `(e: MouseEvent)` | \- diff --git a/examples/calendar/calendar.en-US.md b/examples/calendar/calendar.en-US.md new file mode 100644 index 000000000..4c8aa1c75 --- /dev/null +++ b/examples/calendar/calendar.en-US.md @@ -0,0 +1,62 @@ +:: BASE_DOC :: + +## API + +### Calendar Props + +name | type | default | description | required +-- | -- | -- | -- | -- +cell | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +cellAppend | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +controllerConfig | Boolean / Object | - | Typescript：`boolean | CalendarController` | N +fillWithZero | Boolean | - | \- | N +firstDayOfWeek | Number | - | options：1/2/3/4/5/6/7 | N +format | String | 'YYYY-MM-DD' | \- | N +head | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +isShowWeekendDefault | Boolean | true | \- | N +mode | String | month | options：month/year | N +month | String / Number | - | \- | N +preventCellContextmenu | Boolean | false | \- | N +range | Array | - | Typescript：`Array` | N +theme | String | full | options：full/card | N +value | String / Date | - | Typescript：`CalendarValue` `type CalendarValue = string | Date`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/calendar/type.ts) | N +week | Array / Slot / Function | - | Typescript：`Array | TNode` `interface CalendarWeek { day: WeekDay }` `type WeekDay = 1 | 2 | 3 | 4 | 5 | 6 | 7`。[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/calendar/type.ts) | N +year | String / Number | - | \- | N +onCellClick | Function | | TS 类型：`(options: { cell: CalendarCell; e: MouseEvent }) => void`
| N +onCellDoubleClick | Function | | TS 类型：`(options: { cell: CalendarCell; e: MouseEvent }) => void`
| N +onCellRightClick | Function | | TS 类型：`(options: { cell: CalendarCell; e: MouseEvent }) => void`
| N +onControllerChange | Function | | TS 类型：`(options: ControllerOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/calendar/type.ts)。
`interface ControllerOptions { filterDate: Date; formattedFilterDate: string; mode: string; isShowWeekend: boolean }`
| N +onMonthChange | Function | | TS 类型：`(options: { month: string; year: string }) => void`
| N + +### Calendar Events + +name | params | description +-- | -- | -- +cell-click | `(options: { cell: CalendarCell; e: MouseEvent })` | \- +cell-double-click | `(options: { cell: CalendarCell; e: MouseEvent })` | \- +cell-right-click | `(options: { cell: CalendarCell; e: MouseEvent })` | \- +controller-change | `(options: ControllerOptions)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/calendar/type.ts)。
`interface ControllerOptions { filterDate: Date; formattedFilterDate: string; mode: string; isShowWeekend: boolean }`
+month-change | `(options: { month: string; year: string })` | \- + +### CalendarController + +name | type | default | description | required +-- | -- | -- | -- | -- +current | Object | - | Typescript：`{ visible?: boolean; currentDayButtonProps?: ButtonProps; currentMonthButtonProps?: ButtonProps }` | N +disabled | Boolean | false | \- | N +mode | Object | - | Typescript：`{ visible?: boolean; radioGroupProps?: RadioGroupProps }`，[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/calendar/type.ts) | N +month | Object | - | Typescript：`{ visible?: boolean; selectProps?: SelectProps }` | N +weekend | Object | - | Typescript：`{ visible?: boolean; showWeekendButtonProps?: CheckTagProps; hideWeekendButtonProps?: CheckTagProps }`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/calendar/type.ts) | N +year | Object | - | Typescript：`{ visible?: boolean; selectProps?: SelectProps }`，[Select API Documents](./select?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/calendar/type.ts) | N + +### CalendarCell + +name | type | default | description | required +-- | -- | -- | -- | -- +belongTo | Number | - | \- | N +date | Object | - | Typescript：`Date` | N +day | Number | - | \- | N +formattedDate | String | - | \- | N +isCurrent | Boolean | - | \- | N +weekOrder | Number | - | \- | N +`ControllerOptions` | \- | - | \- | N diff --git a/examples/card/card.en-US.md b/examples/card/card.en-US.md new file mode 100644 index 000000000..5d6c93dd2 --- /dev/null +++ b/examples/card/card.en-US.md @@ -0,0 +1,26 @@ +:: BASE_DOC :: + +## API + +### Card Props + +name | type | default | description | required +-- | -- | -- | -- | -- +actions | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +avatar | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +bordered | Boolean | true | \- | N +content | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +cover | 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 +description | String / Slot / Function | - | card description。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 +headerBordered | Boolean | false | \- | N +hoverShadow | Boolean | false | \- | N +loading | Boolean / Slot / Function | false | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +shadow | Boolean | false | \- | N +size | String | medium | options：medium/small | N +status | String | - | \- | N +subtitle | String / Slot / Function | - | card subtitle。Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +theme | String | normal | options：normal/poster1/poster2 | N +title | String / Slot / Function | - | card title。Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/examples/cascader/cascader.en-US.md b/examples/cascader/cascader.en-US.md new file mode 100644 index 000000000..f1043eedc --- /dev/null +++ b/examples/cascader/cascader.en-US.md @@ -0,0 +1,51 @@ +:: BASE_DOC :: + +## API + +### Cascader Props + +name | type | default | description | required +-- | -- | -- | -- | -- +checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N +checkStrictly | Boolean | false | \- | N +clearable | Boolean | false | \- | N +collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +disabled | Boolean | false | \- | N +empty | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filterable | Boolean | false | \- | N +keys | Object | - | Typescript：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string | 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/cascader/type.ts) | N +lazy | Boolean | true | \- | N +load | Function | - | Typescript：`(node: TreeNodeModel) => Promise>` | 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 +max | Number | 0 | \- | N +minCollapsedNum | Number | 0 | \- | N +multiple | Boolean | false | \- | N +options | Array | [] | Typescript：`Array` | 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/cascader/type.ts) | N +popupVisible | Boolean | undefined | \- | N +readonly | 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 +showAllLevels | Boolean | true | \- | N +size | String | medium | options：large/medium/small。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +trigger | String | click | options：click/hover | N +value | String / Number / Array | [] | `v-model` is supported。Typescript：`CascaderValue` `type CascaderValue = string | number | T | Array>`。[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/cascader/type.ts) | N +defaultValue | String / Number / Array | [] | uncontrolled property。Typescript：`CascaderValue` `type CascaderValue = string | number | T | Array>`。[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/cascader/type.ts) | N +valueMode | String | onlyLeaf | options：onlyLeaf/parentFirst/all | N +valueType | String | single | options：single/full | N +onBlur | Function | | TS 类型：`(context: { value: CascaderValue; e: FocusEvent }) => void`
| N +onChange | Function | | TS 类型：`(value: CascaderValue, context: CascaderChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。
`interface CascaderChangeContext { node?: TreeNodeModel; source: CascaderChangeSource }`

`import { TreeNodeModel } from '@Tree'`

`type CascaderChangeSource = 'invalid-value' | 'check' | 'clear' | 'uncheck'`
| N +onFocus | Function | | TS 类型：`(context: { value: CascaderValue; e: FocusEvent }) => void`
| N +onPopupVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
| N +onRemove | Function | | TS 类型：`(context: RemoveContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。
`interface RemoveContext { value: CascaderValue; node: TreeNodeModel }`
| N + +### Cascader Events + +name | params | description +-- | -- | -- +blur | `(context: { value: CascaderValue; e: FocusEvent })` | \- +change | `(value: CascaderValue, context: CascaderChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。
`interface CascaderChangeContext { node?: TreeNodeModel; source: CascaderChangeSource }`

`import { TreeNodeModel } from '@Tree'`

`type CascaderChangeSource = 'invalid-value' | 'check' | 'clear' | 'uncheck'`
+focus | `(context: { value: CascaderValue; e: FocusEvent })` | \- +popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
+remove | `(context: RemoveContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。
`interface RemoveContext { value: CascaderValue; node: TreeNodeModel }`
diff --git a/examples/checkbox/checkbox.en-US.md b/examples/checkbox/checkbox.en-US.md new file mode 100644 index 000000000..57ca465f8 --- /dev/null +++ b/examples/checkbox/checkbox.en-US.md @@ -0,0 +1,43 @@ +:: BASE_DOC :: + +## API + +### Checkbox Props + +name | type | default | description | required +-- | -- | -- | -- | -- +checkAll | Boolean | false | \- | N +checked | Boolean | false | `v-model` is supported | N +defaultChecked | Boolean | false | uncontrolled property | 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 | undefined | \- | N +indeterminate | 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 +name | String | - | \- | N +readonly | Boolean | false | \- | N +value | String / Number | - | Typescript：`string | number` | N +onChange | Function | | TS 类型：`(checked: boolean, context: { e: Event }) => void`
| N + +### Checkbox Events + +name | params | description +-- | -- | -- +change | `(checked: boolean, context: { e: Event })` | \- + +### CheckboxGroup Props + +name | type | default | description | required +-- | -- | -- | -- | -- +disabled | Boolean | false | \- | N +max | Number | undefined | \- | N +name | String | - | \- | N +options | Array | [] | Typescript：`Array` `type CheckboxOption = string | number | CheckboxOptionObj` `interface CheckboxOptionObj { label?: string | TNode; value?: string | number; disabled?: boolean; name?: string; checkAll?: true }`。[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/checkbox/type.ts) | N +value | Array | [] | `v-model` is supported。Typescript：`CheckboxGroupValue` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts) | N +defaultValue | Array | [] | uncontrolled property。Typescript：`CheckboxGroupValue` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts) | N +onChange | Function | | TS 类型：`(value: CheckboxGroupValue, context: CheckboxGroupChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: Event; current: string | number; option: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck' }`
| N + +### CheckboxGroup Events + +name | params | description +-- | -- | -- +change | `(value: CheckboxGroupValue, context: CheckboxGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: Event; current: string | number; option: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck' }`
diff --git a/examples/collapse/collapse.en-US.md b/examples/collapse/collapse.en-US.md new file mode 100644 index 000000000..54c53a663 --- /dev/null +++ b/examples/collapse/collapse.en-US.md @@ -0,0 +1,37 @@ +:: BASE_DOC :: + +## API + +### Collapse Props + +name | type | default | description | required +-- | -- | -- | -- | -- +borderless | Boolean | false | \- | N +defaultExpandAll | Boolean | false | \- | N +disabled | Boolean | - | \- | N +expandIcon | Boolean / Slot / Function | true | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +expandIconPlacement | String | left | options：left/right | N +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 | | TS 类型：`(value: CollapseValue) => void`
| N + +### Collapse Events + +name | params | description +-- | -- | -- +change | `(value: CollapseValue)` | \- + +### CollapsePanel 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 +destroyOnCollapse | Boolean | false | \- | N +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 | - | \- | N diff --git a/examples/color-picker/color-picker.en-US.md b/examples/color-picker/color-picker.en-US.md new file mode 100644 index 000000000..87604a221 --- /dev/null +++ b/examples/color-picker/color-picker.en-US.md @@ -0,0 +1,33 @@ +:: BASE_DOC :: + +## API + +### ColorPicker Props + +name | type | default | description | required +-- | -- | -- | -- | -- +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 +disabled | Boolean | false | \- | N +enableAlpha | Boolean | false | \- | 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 +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 +swatchColors | Array | - | swatch colors。Typescript：`Array` | N +value | String | - | color value。`v-model` is supported | N +defaultValue | String | - | color value。uncontrolled property | N +onChange | Function | | TS 类型：`(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'`
| N +onPaletteBarChange | Function | | TS 类型：`(context: { color: ColorObject }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`
| N +onRecentColorsChange | Function | | TS 类型：`(value: Array) => void`
| N + +### ColorPicker Events + +name | params | description +-- | -- | -- +change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | [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'`
+palette-bar-change | `(context: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`
+recent-colors-change | `(value: Array)` | \- diff --git a/examples/comment/comment.en-US.md b/examples/comment/comment.en-US.md new file mode 100644 index 000000000..e19e78569 --- /dev/null +++ b/examples/comment/comment.en-US.md @@ -0,0 +1,15 @@ +:: BASE_DOC :: + +## API + +### Comment Props + +name | type | default | description | required +-- | -- | -- | -- | -- +actions | Array | - | Typescript：`Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +author | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +avatar | String / Object / Slot / Function | - | Typescript：`string | AvatarProps | TNode`，[Avatar API Documents](./avatar?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/comment/type.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 +datetime | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +quote | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +reply | 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/examples/config-provider/config-provider.en-US.md b/examples/config-provider/config-provider.en-US.md new file mode 100644 index 000000000..42d19a457 --- /dev/null +++ b/examples/config-provider/config-provider.en-US.md @@ -0,0 +1,276 @@ +:: BASE_DOC :: + +## API + +### GlobalConfigProvider + +name | type | default | description | required +-- | -- | -- | -- | -- +alert | Object | - | Alert global configs。Typescript：`AlertConfig` | N +anchor | Object | - | Anchor global configs。Typescript：`AnchorConfig` | N +animation | Object | - | Typescript：`Partial>>` `type AnimationType = 'ripple' | 'expand' | 'fade'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +calendar | Object | - | Calendar global configs。Typescript：`CalendarConfig` | N +cascader | Object | - | Cascader global configs。Typescript：`CascaderConfig` | N +classPrefix | String | t | \- | N +colorPicker | Object | - | ColorPicker global configs。Typescript：`ColorPickerConfig` | N +datePicker | Object | - | DatePicker global configs。Typescript：`DatePickerConfig` | N +dialog | Object | - | Dialog global configs。Typescript：`DialogConfig` | N +drawer | Object | - | Drawer global configs。Typescript：`DrawerConfig` | N +form | Object | - | Form global configs。Typescript：`FormConfig` | N +input | Object | - | Input global configs。Typescript：`InputConfig` | N +list | Object | - | List global configs。Typescript：`ListConfig` | N +pagination | Object | - | Pagination global configs。Typescript：`PaginationConfig` | N +popconfirm | Object | - | Popconfirm global configs。Typescript：`PopconfirmConfig` | N +select | Object | - | Select global configs。Typescript：`SelectConfig` | N +steps | Object | - | Steps global configs。Typescript：`StepsConfig` | N +table | Object | - | Table global configs。Typescript：`TableConfig` | N +tag | Object | - | Tag global configs。Typescript：`TagConfig` | N +timePicker | Object | - | TimePicker global configs。Typescript：`TimePickerConfig` | N +transfer | Object | - | Transfer global configs。Typescript：`TransferConfig` | N +tree | Object | - | Tree global configs。Typescript：`TreeConfig` | N +treeSelect | Object | - | TreeSelect global configs。Typescript：`TreeSelectConfig` | N +upload | Object | - | Upload global configs。Typescript：`UploadConfig` | N + +### InputConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +placeholder | String | - | \- | N + +### PaginationConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +itemsPerPage | String | - | \- | N +jumpTo | String | - | \- | N +page | String | - | \- | N +total | String | - | \- | N + +### CalendarConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +cellMonth | String | - | \- | N +controllerConfig | Object | - | Typescript：`CalendarController`，[Calendar API Documents](./calendar?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +fillWithZero | Boolean | true | \- | N +firstDayOfWeek | Number | 1 | options：1/2/3/4/5/6/7 | N +hideWeekend | String | - | \- | N +monthRadio | String | - | \- | N +monthSelection | String | - | \- | N +showWeekend | String | - | \- | N +thisMonth | String | - | \- | N +today | String | - | \- | N +week | String | - | \- | N +yearRadio | String | - | \- | N +yearSelection | String | - | \- | N + +### CascaderConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +empty | String | - | \- | N +loadingText | String | - | \- | N +placeholder | String | - | select placeholder text | N + +### ColorPickerConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +clearConfirmText | String | - | \- | N +recentColorTitle | String | - | \- | N +swatchColorTitle | String | - | \- | N + +### TransferConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +empty | String | - | \- | N +placeholder | String | - | \- | N +title | String | - | \- | N + +### TimePickerConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +anteMeridiem | String | - | \- | N +confirm | String | - | \- | N +now | String | - | \- | N +placeholder | String | - | placeholder text | N +postMeridiem | String | - | \- | N + +### DatePickerConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +confirm | String | - | confirm text | N +dayAriaLabel | String | - | date text | N +direction | String | 'ltr' | range separator text | N +firstDayOfWeek | Number | 7 | options：1/2/3/4/5/6/7 | N +format | String | 'YYYY-MM-DD' | date format rules | N +monthAriaLabel | String | - | month text | N +months | Array | - | Typescript：`string[]` | N +nextDecade | String | - | next decade text | N +nextMonth | String | - | next month text | N +nextYear | String | - | next year text | N +now | String | - | now text | N +placeholder | Object | - | Typescript：`{ date?: string; month?: string; year?: string }` | N +preDecade | String | - | pre decade text | N +preMonth | String | - | pre month text | N +presets | Object | - | Typescript：`ConfigPresetDate` `interface ConfigPresetDate { [name: string]: DateConfigValue | (() => DateConfigValue) }` `type DateConfigValue = string | Date | Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +preYear | String | - | pre year text | N +rangeSeparator | String | - | range separator text | N +selectDate | String | - | select date text | N +selectTime | String | - | select time text | N +weekAbbreviation | String | - | week text | N +weekdays | Object | - | Typescript：`string[]` | N +yearAriaLabel | String | - | year text | N + +### DialogConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +cancel | Object | - | Typescript：`string | ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +confirm | Object | - | Typescript：`string | ButtonProps` | N +confirmBtnTheme | Object | - | Typescript：`{ default: string; info: string; warning: string; danger: string; success: string; }` | N + +### DrawerConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +cancel | String | - | Typescript：`string | ButtonProps` | N +confirm | String | - | Typescript：`string | ButtonProps` | N + +### PopconfirmConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +cancel | String / Object | - | Typescript：`string | ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +confirm | String / Object | - | Typescript：`string | ButtonProps` | N +confirmBtnTheme | Object | - | Typescript：`{ default: string; warning: string; danger: string; }` | N + +### TableConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +cancelText | String | - | \- | N +clearFilterResultButtonText | String | - | \- | N +columnConfigButtonText | String | - | \- | N +columnConfigDescriptionText | String | - | \- | N +columnConfigTitleText | String | - | \- | N +confirmText | String | - | \- | N +empty | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +expandIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filterIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +hideSortTips | Boolean | false | hide sort tips | N +loadingMoreText | String | - | \- | N +loadingText | String | - | \- | N +resetText | String | - | \- | N +searchResultText | String | - | \- | N +selectAllText | String | - | \- | N +sortAscendingOperationText | String | - | \- | N +sortCancelOperationText | String | - | \- | N +sortDescendingOperationText | String | - | \- | N +sortIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +treeExpandAndFoldIcon | Function | undefined | Typescript：`TNode<{ type: 'expand' | 'fold' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N + +### SelectConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +clearIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +empty | String | - | \- | N +loadingText | String | - | \- | N +placeholder | String | - | placeholder text | N + +### TreeConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +empty | String | - | \- | N +folderIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N + +### TreeSelectConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +empty | String | - | \- | N +loadingText | String | - | \- | N +placeholder | String | - | placeholder text | N + +### ListConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +loadingMoreText | String | - | \- | N +loadingText | String | - | \- | N + +### UploadConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +cancelUploadText | String | - | \- | N +dragger | Object | - | Typescript：`UploadConfigDragger` | N +file | Object | - | Typescript：`UploadConfigFileList` | N +progress | Object | - | Typescript：`UploadConfigProgress` | N +sizeLimitMessage | String | - | \- | N +triggerUploadText | Object | - | Typescript：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload: string, delete?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N + +### UploadConfigProgress + +name | type | default | description | required +-- | -- | -- | -- | -- +failText | String | - | \- | N +successText | String | - | \- | N +uploadingText | String | - | \- | N +waitingText | String | - | \- | N + +### UploadConfigDragger + +name | type | default | description | required +-- | -- | -- | -- | -- +clickAndDragText | String | - | \- | N +dragDropText | String | - | \- | N +draggingText | String | - | \- | N + +### UploadConfigFileList + +name | type | default | description | required +-- | -- | -- | -- | -- +fileNameText | String | - | \- | N +fileOperationDateText | String | - | \- | N +fileOperationText | String | - | \- | N +fileSizeText | String | - | \- | N +fileStatusText | String | - | \- | N + +### FormConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +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 + +### TagConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +closeIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N + +### StepsConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +errorIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N + +### AlertConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +collapseText | String | - | \- | N +expandText | String | - | \- | N + +### AnchorConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +copySuccessText | String | - | \- | N +copyText | String | - | \- | N diff --git a/examples/date-picker/date-picker.en-US.md b/examples/date-picker/date-picker.en-US.md new file mode 100644 index 000000000..f9222151b --- /dev/null +++ b/examples/date-picker/date-picker.en-US.md @@ -0,0 +1,84 @@ +:: BASE_DOC :: + +## API + +### DatePicker Props + +name | type | default | description | required +-- | -- | -- | -- | -- +allowInput | Boolean | false | \- | N +clearable | Boolean | false | \- | N +disabled | Boolean | false | \- | 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 +enableTimePicker | Boolean | false | \- | N +firstDayOfWeek | Number | - | options：1/2/3/4/5/6/7 | N +format | String | undefined | \- | 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/month/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 +range | Boolean | false | \- | 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 +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 +valueType | String | YYYY-MM-DD | \- | N +onBlur | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`
| N +onChange | Function | | TS 类型：`(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 +onFocus | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`
| N +onInput | Function | | TS 类型：`(context: { input: string; value: DateValue; e: InputEvent }) => void`
| N +onPick | Function | | TS 类型：`(value: DateValue) => void`
| N + +### DatePicker Events + +name | params | description +-- | -- | -- +blur | `(context: { value: DateValue; e: FocusEvent })` | \- +change | `(value: DateValue, 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'`

`type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | 'clear'`
+focus | `(context: { value: DateValue; e: FocusEvent })` | \- +input | `(context: { input: string; value: DateValue; e: InputEvent })` | \- +pick | `(value: DateValue)` | \- + +### DateRangePicker Props + +name | type | default | description | required +-- | -- | -- | -- | -- +allowInput | Boolean | false | \- | N +clearable | Boolean | false | \- | N +disabled | Boolean / Array | false | Typescript：`boolean | Array` | 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 +enableTimePicker | Boolean | false | \- | N +firstDayOfWeek | Number | - | options：1/2/3/4/5/6/7 | N +format | String | 'YYYY-MM-DD' | \- | N +mode | String | date | options：year/month/date | 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 | 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 +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 | YYYY-MM-DD | \- | N +onBlur | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N +onChange | Function | | TS 类型：`(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 +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`
| N +onPick | Function | | TS 类型：`(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 + +### 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'`
+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 }`
diff --git a/examples/dialog/dialog.en-US.md b/examples/dialog/dialog.en-US.md new file mode 100644 index 000000000..8e70642dc --- /dev/null +++ b/examples/dialog/dialog.en-US.md @@ -0,0 +1,95 @@ +:: BASE_DOC :: + +## API + +### 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`，[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 +closeOnOverlayClick | Boolean | true | \- | N +confirmBtn | String / Object / Slot / Function | '' | Typescript：`string | ButtonProps | 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 +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 +mode | String | modal | options：modal/modeless/normal | N +placement | String | top | options：top/center | N +preventScrollThrough | Boolean | true | \- | N +showInAttachedElement | Boolean | false | \- | N +showOverlay | Boolean | true | \- | N +theme | String | default | options：default/info/warning/danger/success | N +top | String / Number | - | \- | N +visible | Boolean | false | \- | N +width | String / Number | - | \- | N +zIndex | Number | - | \- | N +onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onClose | Function | | TS 类型：`(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 | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onClosed | Function | | TS 类型：`() => void`
| N +onConfirm | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onEscKeydown | Function | | TS 类型：`(context: { e: KeyboardEvent }) => void`
| N +onOpened | Function | | TS 类型：`() => void`
| N +onOverlayClick | Function | | TS 类型：`(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-btn-click | `(context: { e: MouseEvent })` | \- +closed | \- | \- +confirm | `(context: { e: MouseEvent })` | \- +esc-keydown | `(context: { e: KeyboardEvent })` | \- +opened | \- | \- +overlay-click | `(context: { e: MouseEvent })` | \- + +### DialogOptions + +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 + +### DialogInstance + +name | params | return | description +-- | -- | -- | -- +destroy | \- | \- | \- +hide | \- | \- | \- +show | \- | \- | \- +update | `(props: DialogOptions)` | \- | \- + +### DialogPlugin + +同时也支持 `this.$dialog`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +options | \- | - | Typescript：`DialogOptions` + +插件返回值：`DialogInstance` + +### DialogPlugin.confirm + +同时也支持 `this.$dialog.confirm`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +options | \- | - | Typescript：`DialogOptions` + +### DialogPlugin.alert + +同时也支持 `this.$dialog.alert`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +options | Object | - | Typescript：`Omit` diff --git a/examples/divider/divider.en-US.md b/examples/divider/divider.en-US.md new file mode 100644 index 000000000..1718de916 --- /dev/null +++ b/examples/divider/divider.en-US.md @@ -0,0 +1,14 @@ +:: BASE_DOC :: + +## API + +### Divider Props + +name | type | default | description | required +-- | -- | -- | -- | -- +align | String | center | options：left/right/center | N +content | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +dashed | Boolean | false | \- | N +default | 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 +theme | String | horizontal | `deprecated`。options：horizontal/vertical | N diff --git a/examples/drawer/drawer.en-US.md b/examples/drawer/drawer.en-US.md new file mode 100644 index 000000000..33e0c66af --- /dev/null +++ b/examples/drawer/drawer.en-US.md @@ -0,0 +1,45 @@ +:: 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 +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 +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 +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 +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 +preventScrollThrough | Boolean | true | \- | N +showInAttachedElement | Boolean | false | \- | N +showOverlay | Boolean | true | \- | N +size | String | small | \- | N +sizeDraggable | Boolean | false | \- | N +visible | Boolean | false | \- | N +zIndex | Number | - | \- | N +onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onClose | Function | | TS 类型：`(context: DrawerCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts)。
`type DrawerEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay'`

`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent | KeyboardEvent }`
| N +onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onConfirm | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onEscKeydown | Function | | TS 类型：`(context: { e: KeyboardEvent }) => void`
| N +onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N + +### Drawer Events + +name | params | description +-- | -- | -- +cancel | `(context: { e: MouseEvent })` | \- +close | `(context: DrawerCloseContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts)。
`type DrawerEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay'`

`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent | KeyboardEvent }`
+close-btn-click | `(context: { e: MouseEvent })` | \- +confirm | `(context: { e: MouseEvent })` | \- +esc-keydown | `(context: { e: KeyboardEvent })` | \- +overlay-click | `(context: { e: MouseEvent })` | \- diff --git a/examples/dropdown/dropdown.en-US.md b/examples/dropdown/dropdown.en-US.md new file mode 100644 index 000000000..cd706670e --- /dev/null +++ b/examples/dropdown/dropdown.en-US.md @@ -0,0 +1,42 @@ +:: BASE_DOC :: + +## API + +### Dropdown Props + +name | type | default | description | required +-- | -- | -- | -- | -- +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 +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 +onClick | Function | | TS 类型：`(dropdownItem: DropdownOption, context: { e: MouseEvent }) => void`
| N + +### Dropdown Events + +name | params | description +-- | -- | -- +click | `(dropdownItem: DropdownOption, context: { e: MouseEvent })` | \- + +### DropdownItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +active | Boolean | false | \- | N +content | 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 +divider | Boolean | false | \- | N +value | String / Number / Object | - | Typescript：`string | number | { [key: string]: any }` | N +onClick | Function | | TS 类型：`(dropdownItem: DropdownOption, context: { e: MouseEvent }) => void`
| N + +### DropdownItem Events + +name | params | description +-- | -- | -- +click | `(dropdownItem: DropdownOption, context: { e: MouseEvent })` | \- diff --git a/examples/form/form.en-US.md b/examples/form/form.en-US.md new file mode 100644 index 000000000..94e27adce --- /dev/null +++ b/examples/form/form.en-US.md @@ -0,0 +1,101 @@ +:: BASE_DOC :: + +## API + +### Form Props + +name | type | default | description | required +-- | -- | -- | -- | -- +colon | Boolean | false | \- | N +data | Object | {} | Typescript：`FormData` | N +disabled | Boolean | undefined | \- | N +errorMessage | Object | - | Typescript：`FormErrorMessage` | N +formControlledComponents | Array | - | Typescript：`Array` | N +labelAlign | String | right | options：left/right/top | N +labelWidth | String / Number | '100px' | \- | N +layout | String | vertical | options：vertical/inline | N +preventSubmitDefault | Boolean | true | \- | N +requiredMark | Boolean | undefined | \- | N +resetType | String | empty | options：empty/initial | N +rules | Object | - | Typescript：`{ [field in keyof FormData]: Array }` | N +scrollToFirstError | String | - | options：smooth/auto | N +showErrorMessage | Boolean | true | \- | N +statusIcon | Boolean / Slot / Function | undefined | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +submitWithWarningMessage | Boolean | false | \- | N +onReset | Function | | TS 类型：`(context: { e?: FormResetEvent }) => void`
| N +onSubmit | Function | | TS 类型：`(context: SubmitContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string }`

`type FormValidateResult = boolean | ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean | ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj | ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean | ErrorList }`

`type ErrorList = Array`
| N +onValidate | Function | | TS 类型：`(result: ValidateResultContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
| N + +### Form Events + +name | params | description +-- | -- | -- +reset | `(context: { e?: FormResetEvent })` | \- +submit | `(context: SubmitContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string }`

`type FormValidateResult = boolean | ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean | ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj | ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean | ErrorList }`

`type ErrorList = Array`
+validate | `(result: ValidateResultContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
+ +### FormInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +clearValidate | `(fields?: Array)` | \- | \- +reset | `(params?: FormResetParams)` | \- | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface FormResetParams { type: 'initial' | 'empty'; fields?: Array }`
+setValidateMessage | `(message: FormValidateMessage)` | \- | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`type FormValidateMessage = { [field in keyof FormData]: FormItemValidateMessage[] }`

`interface FormItemValidateMessage { type: 'warning' | 'error'; message: string }`
+submit | \- | \- | \- +validate | `(params?: FormValidateParams)` | `Promise>` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface FormValidateParams { fields?: Array; trigger?: ValidateTriggerType }`

`type ValidateTriggerType = 'blur' | 'change' | 'all'`
+ +### FormItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +for | String | - | \- | N +help | String / Slot / Function | - | Typescript：`string | TNode`。[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 +labelAlign | String | - | options：left/right/top | N +labelWidth | String / Number | - | \- | N +name | String / Number / Array | - | Typescript：`string | number | Array` | N +requiredMark | Boolean | undefined | \- | N +rules | Array | [] | Typescript：`Array` | N +showErrorMessage | Boolean | undefined | \- | N +statusIcon | Boolean / Slot / Function | undefined | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +successBorder | Boolean | false | \- | N + +### FormRule + +name | type | default | description | required +-- | -- | -- | -- | -- +boolean | Boolean | - | \- | N +date | Boolean / Object | - | Typescript：`boolean | IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N +email | Boolean / Object | - | Typescript：`boolean | IsEmailOptions` `import { IsEmailOptions } from 'validator/es/lib/isEmail'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N +enum | Array | - | Typescript：`Array` | N +idcard | Boolean | - | \- | N +len | Number / Boolean | - | \- | N +max | Number / Boolean | - | \- | N +message | String | - | \- | N +min | Number / Boolean | - | \- | N +number | Boolean | - | \- | N +pattern | Object | - | Typescript：`RegExp` | N +required | Boolean | - | \- | N +telnumber | Boolean | - | \- | N +trigger | String | change | options：change/blur | N +type | String | error | options：error/warning | N +url | Boolean / Object | - | Typescript：`boolean | IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N +validator | Function | - | Typescript：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType | Promise` `type CustomValidateResolveType = boolean | CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' | 'warning' | 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N + +### FormErrorMessage + +name | type | default | description | required +-- | -- | -- | -- | -- +boolean | String | - | \- | N +date | String | - | \- | N +enum | String | - | \- | N +idcard | String | - | \- | N +len | String | - | \- | N +max | String | - | \- | N +min | String | - | \- | N +number | String | - | \- | N +pattern | String | - | \- | N +required | String | - | \- | N +telnumber | String | - | \- | N +url | String | - | \- | N +validator | String | - | \- | N diff --git a/examples/grid/grid.en-US.md b/examples/grid/grid.en-US.md new file mode 100644 index 000000000..42fa818ee --- /dev/null +++ b/examples/grid/grid.en-US.md @@ -0,0 +1,30 @@ +:: BASE_DOC :: + +## API + +### Row Props + +name | type | default | description | required +-- | -- | -- | -- | -- +align | String | top | options：top/middle/bottom | N +gutter | Number / Object / Array | 0 | Typescript：`number | GutterObject | Array` `interface GutterObject { xs: number; sm: number; md: number } `。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/grid/type.ts) | N +justify | String | start | options：start/end/center/space-around/space-between | N +tag | String | div | \- | N + +### Col Props + +name | type | default | description | required +-- | -- | -- | -- | -- +flex | String / Number | - | \- | N +lg | Number / Object | - | Typescript：`number | BaseColProps` | N +md | Number / Object | - | Typescript：`number | BaseColProps` | N +offset | Number | 0 | \- | N +order | Number | 0 | \- | N +pull | Number | 0 | \- | N +push | Number | 0 | \- | N +sm | Number / Object | - | Typescript：`number | BaseColProps` | N +span | Number | 12 | \- | N +tag | String | div | \- | N +xl | Number / Object | - | Typescript：`number | BaseColProps` | N +xs | Number / Object | - | Typescript：`number | BaseColProps` `interface BaseColProps { offset: number; order: number; pull: number; push: number; span: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/grid/type.ts) | N +xxl | Number / Object | - | Typescript：`number | BaseColProps` | N diff --git a/examples/icon/icon.en-US.md b/examples/icon/icon.en-US.md new file mode 100644 index 000000000..3403bdf32 --- /dev/null +++ b/examples/icon/icon.en-US.md @@ -0,0 +1,86 @@ +:: BASE_DOC :: + +### 安装独立 Icon 包 + +图标相对其他基础组件较为独立，所以作为一个独立的 npm 包做发布管理。如果项目中直接使用，请安装`tdesign-icons-vue`。 同时 tdesign-vue 也内置了 icon,支持直接通过 t-icon 来使用 + +### SVG 全量引入 + +图标尺寸单位支持多种， 'small', 'medium', 'large', '35px', '3em' 等。 +图标颜色使用 CSS 控制，如：style="color: red"，或者 style="fill: red"。 +点击右侧导航「全部图标」即可查看组件库全部图标。 + +{{ base }} + +### SVG 按需引入 + +图标可以按需引入单个 SVG 图标。组件开发内部使用到 Icon 时，均按需引入 SVG 图标。 + +{{ single }} + +### SVG 高级用法 + +可以传入 url 加入新的 SVG 图标。 + +引入新的图标 Url 之后，图标名称必须写全称，以作区分，如：`"name='home'"` 需要写成 `"name='t-icon-home'"`。 + +组件会引入默认的 SVG 图标，如果希望禁止组件加载默认的 SVG 图标，将 `loadDefaultIcons` 置为 false 即可。 + +{{ enhanced }} + +### iconfont 图标 + +使用 Iconfont 图标需要单独引入 Iconfont 图标组件 + +{{ iconfont }} + +### iconfont 高级用法 + +可以传入 url 加入新的 iconfont 图标。 + +引入新的图标 Url 之后，图标名称必须写全称，以作区分，如：`"name='home'"` 需要写成 `"name='t-icon-home'"`。 + +组件会引入默认的 iconfont 图标，如果希望禁止组件加载默认的 iconfont 图标，将 `loadDefaultIcons` 置为 false 即可。 + +{{ iconfont-enhanced }} + +### 全部图标 + + + +## API + +### IconSVG Props + +name | type | default | description | required +-- | -- | -- | -- | -- +loadDefaultIcons | Boolean | true | \- | N +name | String | - | required | Y +size | String | undefined | \- | N +style | String | - | html attribute | N +url | String / Array | - | Typescript：`string | Array` | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N + +### IconSVG Events + +name | params | description +-- | -- | -- +click | `(context: { e: MouseEvent })` | \- + +### Iconfont Props + +name | type | default | description | required +-- | -- | -- | -- | -- +loadDefaultIcons | Boolean | true | \- | N +name | String | - | required | Y +size | String | undefined | \- | N +style | String | - | html attribute | N +tag | String | i | \- | N +url | String / Array | - | Typescript：`string | Array` | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N + +### Iconfont Events + +name | params | description +-- | -- | -- +click | `(context: { e: MouseEvent })` | \- diff --git a/examples/icon/icon.md b/examples/icon/icon.md index 13f17dcbe..0bfef6b51 100644 --- a/examples/icon/icon.md +++ b/examples/icon/icon.md @@ -10,15 +10,13 @@ 图标颜色使用 CSS 控制，如：style="color: red"，或者 style="fill: red"。 点击右侧导航「全部图标」即可查看组件库全部图标。 -::: demo demos/base -::: +{{ base }} ### SVG 按需引入 图标可以按需引入单个 SVG 图标。组件开发内部使用到 Icon 时，均按需引入 SVG 图标。 -::: demo demos/single -::: +{{ single }} ### SVG 高级用法 @@ -28,15 +26,13 @@ 组件会引入默认的 SVG 图标，如果希望禁止组件加载默认的 SVG 图标，将 `loadDefaultIcons` 置为 false 即可。 -::: demo demos/enhanced -::: +{{ enhanced }} ### iconfont 图标 使用 Iconfont 图标需要单独引入 Iconfont 图标组件 -::: demo demos/iconfont -::: +{{ iconfont }} ### iconfont 高级用法 @@ -46,8 +42,7 @@ 组件会引入默认的 iconfont 图标，如果希望禁止组件加载默认的 iconfont 图标，将 `loadDefaultIcons` 置为 false 即可。 -::: demo demos/iconfont-enhanced -::: +{{ iconfont-enhanced }} ### 全部图标 diff --git a/examples/input-number/input-number.en-US.md b/examples/input-number/input-number.en-US.md new file mode 100644 index 000000000..a1465f81b --- /dev/null +++ b/examples/input-number/input-number.en-US.md @@ -0,0 +1,43 @@ +:: BASE_DOC :: + +## API + +### InputNumber Props + +name | type | default | description | required +-- | -- | -- | -- | -- +align | String | - | options：left/center/right | N +autoWidth | Boolean | false | \- | N +decimalPlaces | Number | undefined | \- | N +disabled | Boolean | false | \- | N +format | Function | - | Typescript：`(value: number) => number | string` | N +max | Number | Infinity | \- | N +min | Number | -Infinity | \- | N +placeholder | String | undefined | \- | N +readonly | Boolean | false | \- | N +size | String | medium | options：small/medium/large | N +status | String | - | options：success/warning/error | N +step | Number | 1 | \- | N +theme | String | row | options：column/row/normal | 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 | Number | undefined | `v-model` is supported | N +defaultValue | Number | undefined | uncontrolled property | N +onBlur | Function | | TS 类型：`(value: number, context: { e: FocusEvent }) => void`
| N +onChange | Function | | TS 类型：`(value: number, 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 }`

`type ChangeSource = 'add' | 'reduce' | 'input' | ''`
| N +onEnter | Function | | TS 类型：`(value: number, context: { e: KeyboardEvent }) => void`
| N +onFocus | Function | | TS 类型：`(value: number, context: { e: FocusEvent }) => void`
| N +onKeydown | Function | | TS 类型：`(value: number, context: { e: KeyboardEvent }) => void`
| N +onKeypress | Function | | TS 类型：`(value: number, context: { e: KeyboardEvent }) => void`
| N +onKeyup | Function | | TS 类型：`(value: number, context: { e: KeyboardEvent }) => void`
| N + +### InputNumber Events + +name | params | description +-- | -- | -- +blur | `(value: number, context: { e: FocusEvent })` | \- +change | `(value: number, 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 }`

`type ChangeSource = 'add' | 'reduce' | 'input' | ''`
+enter | `(value: number, context: { e: KeyboardEvent })` | \- +focus | `(value: number, context: { e: FocusEvent })` | \- +keydown | `(value: number, context: { e: KeyboardEvent })` | \- +keypress | `(value: number, context: { e: KeyboardEvent })` | \- +keyup | `(value: number, context: { e: KeyboardEvent })` | \- diff --git a/examples/input/input.en-US.md b/examples/input/input.en-US.md new file mode 100644 index 000000000..360de8347 --- /dev/null +++ b/examples/input/input.en-US.md @@ -0,0 +1,64 @@ +:: BASE_DOC :: + +## API +### Input Props + +name | type | default | description | required +-- | -- | -- | -- | -- +align | String | left | options：left/center/right | N +autocomplete | String | - | \- | N +autofocus | Boolean | false | \- | N +autoWidth | Boolean | false | \- | N +clearable | Boolean | false | \- | N +disabled | Boolean | false | \- | N +format | Function | - | Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => number | string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input/type.ts) | N +inputClass | String / Object / Array | - | Typescript：`ClassName`。[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 +maxcharacter | Number | - | \- | N +maxlength | Number | - | \- | N +name | String | - | \- | N +placeholder | String | undefined | \- | 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 +showClearIconOnEmpty | 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 +tips | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +type | String | text | options：text/number/url/tel/password/search/submit/hidden | N +value | String / Number | - | `v-model` is supported。Typescript：`InputValue` `type InputValue = string | number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input/type.ts) | N +defaultValue | String / Number | - | uncontrolled property。Typescript：`InputValue` `type InputValue = string | number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input/type.ts) | N +onBlur | Function | | TS 类型：`(value: InputValue, context: { e: FocusEvent }) => void`
| N +onChange | Function | | TS 类型：`(value: InputValue, context?: { e?: InputEvent | MouseEvent }) => void`
| N +onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onCompositionend | Function | | TS 类型：`(value: InputValue, context: { e: CompositionEvent }) => void`
trigger on compositionend | N +onCompositionstart | Function | | TS 类型：`(value: InputValue, context: { e: CompositionEvent }) => void`
trigger on compositionstart | N +onEnter | Function | | TS 类型：`(value: InputValue, context: { e: KeyboardEvent }) => void`
| N +onFocus | Function | | TS 类型：`(value: InputValue, context: { e: FocusEvent }) => void`
| N +onKeydown | Function | | TS 类型：`(value: InputValue, context: { e: KeyboardEvent }) => void`
| N +onKeypress | Function | | TS 类型：`(value: InputValue, context: { e: KeyboardEvent }) => void`
| N +onKeyup | Function | | TS 类型：`(value: InputValue, context: { e: KeyboardEvent }) => void`
| N +onMouseenter | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
trigger on mouseenter | N +onMouseleave | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
trigger on mouseleave | N +onPaste | Function | | TS 类型：`(context: { e: ClipboardEvent; pasteValue: string }) => void`
| N +onWheel | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
trigger on mouse wheel | N + +### Input Events + +name | params | description +-- | -- | -- +blur | `(value: InputValue, context: { e: FocusEvent })` | \- +change | `(value: InputValue, context?: { e?: InputEvent | MouseEvent })` | \- +clear | `(context: { e: MouseEvent })` | \- +compositionend | `(value: InputValue, context: { e: CompositionEvent })` | trigger on compositionend +compositionstart | `(value: InputValue, context: { e: CompositionEvent })` | trigger on compositionstart +enter | `(value: InputValue, context: { e: KeyboardEvent })` | \- +focus | `(value: InputValue, context: { e: FocusEvent })` | \- +keydown | `(value: InputValue, context: { e: KeyboardEvent })` | \- +keypress | `(value: InputValue, context: { e: KeyboardEvent })` | \- +keyup | `(value: InputValue, context: { e: KeyboardEvent })` | \- +mouseenter | `(context: { e: MouseEvent })` | trigger on mouseenter +mouseleave | `(context: { e: MouseEvent })` | trigger on mouseleave +paste | `(context: { e: ClipboardEvent; pasteValue: string })` | \- +wheel | `(context: { e: WheelEvent })` | trigger on mouse wheel diff --git a/examples/layout/layout.en-US.md b/examples/layout/layout.en-US.md new file mode 100644 index 000000000..41d8b97c1 --- /dev/null +++ b/examples/layout/layout.en-US.md @@ -0,0 +1,27 @@ +:: BASE_DOC :: + +## API + +### Layout Props + +name | type | default | description | required +-- | -- | -- | -- | -- +direction | String | - | options：vertical/horizontal | N + +### Header Props + +name | type | default | description | required +-- | -- | -- | -- | -- +height | String | - | \- | N + +### Aside Props + +name | type | default | description | required +-- | -- | -- | -- | -- +width | String | - | \- | N + +### Footer Props + +name | type | default | description | required +-- | -- | -- | -- | -- +height | String | - | \- | N diff --git a/examples/list/list.en-US.md b/examples/list/list.en-US.md new file mode 100644 index 000000000..44108f63d --- /dev/null +++ b/examples/list/list.en-US.md @@ -0,0 +1,41 @@ +:: BASE_DOC :: + +## API + +### List Props + +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 +split | Boolean | false | \- | N +stripe | Boolean | false | \- | N +onLoadMore | Function | | TS 类型：`(options: { e: MouseEvent }) => void`
| N +onScroll | Function | | TS 类型：`(options: { e: Event | WheelEvent; scrollTop: number; scrollBottom: number }) => void`
| N + +### List Events + +name | params | description +-- | -- | -- +load-more | `(options: { e: MouseEvent })` | \- +scroll | `(options: { e: Event | WheelEvent; scrollTop: number; scrollBottom: number })` | \- + +### ListItem Props + +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 + +### ListItemMeta Props + +name | type | default | description | required +-- | -- | -- | -- | -- +avatar | String / Slot / Function | - | `deprecated`。Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +description | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +image | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +title | 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/examples/loading/loading.en-US.md b/examples/loading/loading.en-US.md new file mode 100644 index 000000000..1e8600eba --- /dev/null +++ b/examples/loading/loading.en-US.md @@ -0,0 +1,31 @@ +:: BASE_DOC :: + +## API + +### Loading 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 +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 | 0 | \- | N +fullscreen | Boolean | false | \- | N +indicator | Boolean / Slot / Function | true | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +inheritColor | Boolean | false | \- | N +loading | Boolean | true | \- | N +preventScrollThrough | Boolean | true | \- | N +showOverlay | Boolean | true | \- | N +size | String | medium | \- | N +text | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +zIndex | Number | - | \- | N + +### LoadingPlugin + +同时也支持 `this.$loading`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +options | Function | - | required。Typescript：`boolean | TdLoadingProps` + +插件返回值：`LoadingInstance【interface LoadingInstance { hide: () => void }】` diff --git a/examples/menu/menu.en-US.md b/examples/menu/menu.en-US.md new file mode 100644 index 000000000..f443f6c08 --- /dev/null +++ b/examples/menu/menu.en-US.md @@ -0,0 +1,89 @@ +:: BASE_DOC :: + +## API + +### Menu Props + +name | type | default | description | required +-- | -- | -- | -- | -- +collapsed | Boolean | false | \- | N +expanded | Array | [] | `.sync` is supported。Typescript：`Array` | N +defaultExpanded | Array | [] | uncontrolled property。Typescript：`Array` | N +expandMutex | Boolean | false | \- | N +expandType | String | normal | options：normal/popup | 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 +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 +onChange | Function | | TS 类型：`(value: MenuValue) => void`
| N +onExpand | Function | | TS 类型：`(value: Array) => void`
| N + +### Menu Events + +name | params | description +-- | -- | -- +change | `(value: MenuValue)` | \- +expand | `(value: Array)` | \- + +### HeadMenu Props + +name | type | default | description | required +-- | -- | -- | -- | -- +expanded | Array | [] | `.sync` is supported。Typescript：`Array` | N +defaultExpanded | Array | [] | uncontrolled property。Typescript：`Array` | N +expandType | String | normal | options：normal/popup | 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 +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 | | TS 类型：`(value: MenuValue) => void`
| N +onExpand | Function | | TS 类型：`(value: Array) => void`
| N + +### HeadMenu Events + +name | params | description +-- | -- | -- +change | `(value: MenuValue)` | \- +expand | `(value: Array)` | \- + +### Submenu 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 +icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +title | 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 | - | Typescript：`MenuValue` | N + +### MenuItem 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 | - | 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 +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 | | TS 类型：`(context: { e: MouseEvent }) => void`
trigger on click | N + +### MenuItem Events + +name | params | description +-- | -- | -- +click | `(context: { e: MouseEvent })` | trigger on click + +### MenuGroup Props + +name | type | default | description | required +-- | -- | -- | -- | -- +title | 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/examples/message/message.en-US.md b/examples/message/message.en-US.md new file mode 100644 index 000000000..e421db328 --- /dev/null +++ b/examples/message/message.en-US.md @@ -0,0 +1,123 @@ +:: BASE_DOC :: + +## API + +### Message Props + +name | type | default | description | required +-- | -- | -- | -- | -- +closeBtn | String / Boolean / Slot / Function | undefined | Typescript：`string | 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 +duration | Number | 3000 | \- | N +icon | Boolean / Slot / Function | true | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +theme | String | info | options：info/success/warning/error/question/loading。Typescript：`MessageThemeList` `type MessageThemeList = 'info' | 'success' | 'warning' | 'error' | 'question' | 'loading'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/message/type.ts) | N +onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onDurationEnd | Function | | TS 类型：`() => void`
| N + +### Message Events + +name | params | description +-- | -- | -- +close-btn-click | `(context: { e: MouseEvent })` | \- +duration-end | \- | \- + +### MessageOptions + +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 +offset | Array | - | Typescript：`Array` | N +placement | String | top | options：center/top/left/right/bottom/top-left/top-right/bottom-left/bottom-right。Typescript：`MessagePlacementList` `type MessagePlacementList = 'center' | 'top' | 'left' | 'right' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/message/type.ts) | N +zIndex | Number | 5000 | \- | N +`MessageProps` | \- | - | \- | N + +### MessagePlugin + +同时也支持 `this.$message`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +theme | String | - | required。Typescript：`MessageThemeList` +message | String / Object | - | required。Typescript：`string | MessageOptions` +duration | Number | 3000 | \- + +### MessagePlugin.info + +同时也支持 `this.$message.info`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +message | String / Object | - | required。Typescript：`string | MessageInfoOptions` `type MessageInfoOptions = Omit`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/message/type.ts) +duration | Number | 3000 | \- + +### MessagePlugin.error + +同时也支持 `this.$message.error`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +message | String / Object | - | required。Typescript：`string | MessageInfoOptions` +duration | Number | 3000 | \- + +### MessagePlugin.warning + +同时也支持 `this.$message.warning`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +message | String / Object | - | required。Typescript：`string | MessageInfoOptions` +duration | Number | 3000 | \- + +### MessagePlugin.success + +同时也支持 `this.$message.success`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +message | String / Object | - | required。Typescript：`string | MessageInfoOptions` +duration | Number | 3000 | \- + +### MessagePlugin.loading + +同时也支持 `this.$message.loading`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +message | String / Object | - | required。Typescript：`string | MessageInfoOptions` +duration | Number | 3000 | \- + +### MessagePlugin.question + +同时也支持 `this.$message.question`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +message | String / Object | - | required。Typescript：`string | MessageInfoOptions` +duration | Number | 3000 | \- + +### MessagePlugin.close + +同时也支持 `this.$message.close`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +options | Object | - | required。Typescript：`Promise` + +### MessagePlugin.closeAll + +同时也支持 `this.$message.closeAll`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +\- | \- | - | \- + +### MessagePlugin.config + +同时也支持 `this.$message.config`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +placement | String | top | options：center/top/left/right/bottom/top-left/top-right/bottom-left/bottom-right。Typescript：`MessagePlacementList` `type MessagePlacementList = 'center' | 'top' | 'left' | 'right' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/message/type.ts) +attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) +offset | Array | - | Typescript：`Array` +zIndex | Number | 5000 | \- diff --git a/examples/notification/notification.en-US.md b/examples/notification/notification.en-US.md new file mode 100644 index 000000000..d05dd46eb --- /dev/null +++ b/examples/notification/notification.en-US.md @@ -0,0 +1,100 @@ +:: BASE_DOC :: + +## API + +### Notification Props + +name | type | default | description | required +-- | -- | -- | -- | -- +closeBtn | String / Boolean / Slot / Function | undefined | Typescript：`string | 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 +duration | Number | 3000 | \- | N +footer | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +icon | Boolean / Slot / Function | true | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +theme | String | info | options：info/success/warning/error。Typescript：`NotificationThemeList` `type NotificationThemeList = 'info' | 'success' | 'warning' | 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/notification/type.ts) | N +title | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onDurationEnd | Function | | TS 类型：`() => void`
| N + +### Notification Events + +name | params | description +-- | -- | -- +close-btn-click | `(context: { e: MouseEvent })` | \- +duration-end | \- | \- + +### NotificationOptions + +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 +offset | Array | - | Typescript：`Array` | N +placement | String | top-right | options：top-left/top-right/bottom-left/bottom-right。Typescript：`NotificationPlacementList` `type NotificationPlacementList = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/notification/type.ts) | N +zIndex | Number | 6000 | \- | N +`NotificationProps` | \- | - | \- | N + +### NotificationPlugin + +同时也支持 `this.$notification`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +theme | String | info | required。options：info/success/warning/error。Typescript：`NotificationThemeList` +options | Object | - | required。Typescript：`NotificationOptions` + +### NotificationPlugin.info + +同时也支持 `this.$notification.info`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +options | Object | - | required。Typescript：`NotificationInfoOptions` `type NotificationInfoOptions = Omit`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/notification/type.ts) + +插件返回值：`Promise` + +### NotificationPlugin.warning + +同时也支持 `this.$notification.warning`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +options | Object | - | required。Typescript：`NotificationInfoOptions` + +插件返回值：`Promise` + +### NotificationPlugin.error + +同时也支持 `this.$notification.error`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +options | Object | - | required。Typescript：`NotificationInfoOptions` + +插件返回值：`Promise` + +### NotificationPlugin.success + +同时也支持 `this.$notification.success`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +options | Object | - | required。Typescript：`NotificationInfoOptions` + +插件返回值：`Promise` + +### NotificationPlugin.close + +同时也支持 `this.$notification.close`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +options | Object | - | required。Typescript：`Promise` + +### NotificationPlugin.closeAll + +同时也支持 `this.$notification.closeAll`。这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +name | params | default | description +-- | -- | -- | -- +-- | \- | - | \- diff --git a/examples/pagination/pagination.en-US.md b/examples/pagination/pagination.en-US.md new file mode 100644 index 000000000..62f2a9872 --- /dev/null +++ b/examples/pagination/pagination.en-US.md @@ -0,0 +1,36 @@ +:: BASE_DOC :: + +## API + +### Pagination Props + +name | type | default | description | required +-- | -- | -- | -- | -- +current | Number | 1 | `v-model` is supported | N +defaultCurrent | Number | 1 | uncontrolled property | N +disabled | Boolean | false | \- | N +foldedMaxPageBtn | Number | 5 | \- | N +maxPageBtn | Number | 10 | \- | N +pageSize | Number | 10 | `.sync` is supported | N +defaultPageSize | Number | 10 | uncontrolled property | N +pageSizeOptions | Array | () => [5, 10, 20, 50] | Typescript：`Array` | N +showFirstAndLastPageBtn | Boolean | false | \- | N +showJumper | Boolean | false | \- | N +showPageNumber | Boolean | true | \- | N +showPageSize | Boolean | true | \- | N +showPreviousAndNextBtn | Boolean | true | \- | N +size | String | medium | options：small/medium | N +theme | String | default | options：default/simple | N +total | Number | 0 | \- | N +totalContent | Boolean / Slot / Function | true | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +onChange | Function | | TS 类型：`(pageInfo: PageInfo) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/pagination/type.ts)。
`interface PageInfo { current: number; previous: number; pageSize: number }`
| N +onCurrentChange | Function | | TS 类型：`(current: number, pageInfo: PageInfo) => void`
| N +onPageSizeChange | Function | | TS 类型：`(pageSize: number, pageInfo: PageInfo) => void`
| N + +### Pagination Events + +name | params | description +-- | -- | -- +change | `(pageInfo: PageInfo)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/pagination/type.ts)。
`interface PageInfo { current: number; previous: number; pageSize: number }`
+current-change | `(current: number, pageInfo: PageInfo)` | \- +page-size-change | `(pageSize: number, pageInfo: PageInfo)` | \- diff --git a/examples/popconfirm/popconfirm.en-US.md b/examples/popconfirm/popconfirm.en-US.md new file mode 100644 index 000000000..f4744bbb5 --- /dev/null +++ b/examples/popconfirm/popconfirm.en-US.md @@ -0,0 +1,32 @@ +:: BASE_DOC :: + +## API + +### Popconfirm Props + +name | type | default | description | required +-- | -- | -- | -- | -- +cancelBtn | String / Object / Slot / Function | '' | Typescript：`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/popconfirm/type.ts) | N +confirmBtn | String / Object / Slot / Function | '' | Typescript：`string | ButtonProps | 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 +destroyOnClose | Boolean | true | \- | N +icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +placement | String | top | 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/popconfirm/type.ts) | N +showArrow | Boolean | true | \- | N +theme | String | default | options：default/warning/danger | 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 | - | `.sync` is supported | N +defaultVisible | Boolean | - | uncontrolled property | N +onCancel | Function | | TS 类型：`(options: { e: MouseEvent }) => void`
| N +onConfirm | Function | | TS 类型：`(options: { e: MouseEvent }) => void`
| N +onVisibleChange | Function | | TS 类型：`(visible: boolean, context?: PopconfirmVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popconfirm/type.ts)。
`interface PopconfirmVisibleChangeContext { trigger?: TriggerSource; e?: MouseEvent }`

`type TriggerSource = 'cancel' | 'confirm' | 'document' | 'trigger-element-click'`
| N + +### Popconfirm Events + +name | params | description +-- | -- | -- +cancel | `(options: { e: MouseEvent })` | \- +confirm | `(options: { e: MouseEvent })` | \- +visible-change | `(visible: boolean, context?: PopconfirmVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popconfirm/type.ts)。
`interface PopconfirmVisibleChangeContext { trigger?: TriggerSource; e?: MouseEvent }`

`type TriggerSource = 'cancel' | 'confirm' | 'document' | 'trigger-element-click'`
diff --git a/examples/popup/popup.en-US.md b/examples/popup/popup.en-US.md new file mode 100644 index 000000000..72cb7c822 --- /dev/null +++ b/examples/popup/popup.en-US.md @@ -0,0 +1,32 @@ +:: BASE_DOC :: + +## API + +### Popup Props + +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 +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 +destroyOnClose | Boolean | false | \- | N +disabled | Boolean | false | \- | N +hideEmptyPopup | Boolean | false | \- | N +overlayClassName | String / Object / Array | - | Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +overlayStyle | Boolean / Object / Function | - | Typescript：`Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +placement | String | top | Typescript：`PopupPlacement` `type PopupPlacement = 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts) | N +showArrow | Boolean | false | \- | N +trigger | String | hover | options：hover/click/focus/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 | false | `v-model` is supported。Typescript：`boolean` | N +defaultVisible | Boolean | false | uncontrolled property。Typescript：`boolean` | N +zIndex | Number | - | \- | N +onScroll | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
| N +onVisibleChange | Function | | TS 类型：`(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' | 'context-menu' | 'keydown-esc'`
| N + +### Popup Events + +name | params | description +-- | -- | -- +scroll | `(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' | 'context-menu' | 'keydown-esc'`
diff --git a/examples/progress/progress.en-US.md b/examples/progress/progress.en-US.md new file mode 100644 index 000000000..07681ca5a --- /dev/null +++ b/examples/progress/progress.en-US.md @@ -0,0 +1,16 @@ +:: BASE_DOC :: + +## API + +### Progress Props + +name | type | default | description | required +-- | -- | -- | -- | -- +color | String / Object / Array | '' | Typescript：`string | Array | Record` | N +label | 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 +percentage | Number | 0 | \- | N +size | String / Number | 'medium' | \- | N +status | String | - | options：success/error/warning/active。Typescript：`StatusEnum` `type StatusEnum = 'success' | 'error' | 'warning' | 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/progress/type.ts) | N +strokeWidth | String / Number | - | \- | N +theme | String | line | options：line/plump/circle。Typescript：`ThemeEnum` `type ThemeEnum = 'line' | 'plump' | 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/progress/type.ts) | N +trackColor | String | '' | \- | N diff --git a/examples/radio/radio.en-US.md b/examples/radio/radio.en-US.md new file mode 100644 index 000000000..8f435ba21 --- /dev/null +++ b/examples/radio/radio.en-US.md @@ -0,0 +1,42 @@ +:: BASE_DOC :: + +## API + +### Radio Props + +name | type | default | description | required +-- | -- | -- | -- | -- +allowUncheck | Boolean | false | \- | N +checked | Boolean | false | `v-model` is supported | N +defaultChecked | Boolean | false | uncontrolled property | 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 | 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 | false | Typescript：`RadioValue` `type RadioValue = string | number | boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N +onChange | Function | | TS 类型：`(checked: boolean, context: { e: Event }) => void`
| N + +### Radio Events + +name | params | description +-- | -- | -- +change | `(checked: boolean, context: { e: Event })` | \- + +### RadioGroup Props + +name | type | default | description | required +-- | -- | -- | -- | -- +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 | false | `v-model` is supported。Typescript：`RadioValue` | N +defaultValue | String / Number / Boolean | false | uncontrolled property。Typescript：`RadioValue` | N +variant | String | outline | options：outline/primary-filled/default-filled | N +onChange | Function | | TS 类型：`(value: RadioValue, context: { e: Event }) => void`
| N + +### RadioGroup Events + +name | params | description +-- | -- | -- +change | `(value: RadioValue, context: { e: Event })` | \- diff --git a/examples/range-input/range-input.en-US.md b/examples/range-input/range-input.en-US.md new file mode 100644 index 000000000..e199688b9 --- /dev/null +++ b/examples/range-input/range-input.en-US.md @@ -0,0 +1,78 @@ +:: BASE_DOC :: + +## API + +### RangeInput Props + +name | type | default | description | required +-- | -- | -- | -- | -- +activeIndex | Number | 0 | \- | N +clearable | Boolean | false | \- | N +disabled | Boolean / Array | false | Typescript：`boolean | Array` | N +format | Array / Function | - | Typescript：`InputFormatType | Array` | N +inputProps | Object / Array | - | Typescript：`InputProps | Array`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/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 / Array | - | Typescript：`string | Array` | 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 +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 | - | options：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 +value | Array | - | `v-model` is supported。Typescript：`RangeInputValue` `type RangeInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N +defaultValue | Array | - | uncontrolled property。Typescript：`RangeInputValue` `type RangeInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N +onBlur | Function | | TS 类型：`(value: RangeInputValue, context?: { e?: FocusEvent; position?: RangeInputPosition }) => void`
| N +onChange | Function | | TS 类型：`(value: RangeInputValue, context?: { e?: InputEvent | MouseEvent; position?: RangeInputPosition; trigger?: 'input' | 'clear' }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts)。
`type RangeInputPosition = 'first' | 'second' | 'all'`
| N +onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onClick | Function | | TS 类型：`(context?: { e?: MouseEvent; position?: RangeInputPosition }) => void`
| N +onEnter | Function | | TS 类型：`(value: RangeInputValue, context?: { e?: InputEvent | MouseEvent; position?: RangeInputPosition }) => void`
| N +onFocus | Function | | TS 类型：`(value: RangeInputValue, context?: { e?: FocusEvent; position?: RangeInputPosition }) => void`
| N +onMouseenter | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
trigger on mouseenter | N +onMouseleave | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N + +### RangeInput Events + +name | params | description +-- | -- | -- +blur | `(value: RangeInputValue, context?: { e?: FocusEvent; position?: RangeInputPosition })` | \- +change | `(value: RangeInputValue, context?: { e?: InputEvent | MouseEvent; position?: RangeInputPosition; trigger?: 'input' | 'clear' }) ` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts)。
`type RangeInputPosition = 'first' | 'second' | 'all'`
+clear | `(context: { e: MouseEvent })` | \- +click | `(context?: { e?: MouseEvent; position?: RangeInputPosition })` | \- +enter | `(value: RangeInputValue, context?: { e?: InputEvent | MouseEvent; position?: RangeInputPosition }) ` | \- +focus | `(value: RangeInputValue, context?: { e?: FocusEvent; position?: RangeInputPosition })` | \- +mouseenter | `(context: { e: MouseEvent })` | trigger on mouseenter +mouseleave | `(context: { e: MouseEvent })` | \- + +### RangeInputInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +blur | `(options?: {position?: RangeInputPosition})` | \- | \- +focus | `(options?: {position?: RangeInputPosition})` | \- | \- +select | `(options?: {position?: RangeInputPosition})` | \- | \- + +### RangeInputPopup Props + +name | type | default | description | required +-- | -- | -- | -- | -- +autoWidth | Boolean | false | \- | N +disabled | Boolean / Array | false | Typescript：`boolean | Array` | N +inputValue | Array | - | `.sync` is supported。Typescript：`RangeInputValue` | N +defaultInputValue | Array | - | uncontrolled property。Typescript：`RangeInputValue` | N +panel | Slot / Function | - | Typescript：`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 +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 +onInputChange | Function | | TS 类型：`(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 | | TS 类型：`(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 + +### RangeInputPopup Events + +name | params | description +-- | -- | -- +input-change | `(value: RangeInputValue, context?: RangeInputValueChangeContext) ` | [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 }`
+popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
diff --git a/examples/rate/rate.en-US.md b/examples/rate/rate.en-US.md new file mode 100644 index 000000000..134e7c0a3 --- /dev/null +++ b/examples/rate/rate.en-US.md @@ -0,0 +1,25 @@ +:: BASE_DOC :: + +## API + +### Rate Props + +name | type | default | description | required +-- | -- | -- | -- | -- +allowHalf | Boolean | false | \- | N +color | String / Array | '#ED7B2F' | Typescript：`string | Array` | N +count | Number | 5 | \- | N +disabled | Boolean | false | \- | N +gap | Number | 6 | \- | N +showText | Boolean | false | \- | N +size | String | - | \- | N +texts | Array | [] | Typescript：`Array` | N +value | Number | 0 | `v-model` is supported | N +defaultValue | Number | 0 | uncontrolled property | N +onChange | Function | | TS 类型：`(value: number) => void`
| N + +### Rate Events + +name | params | description +-- | -- | -- +change | `(value: number)` | \- diff --git a/examples/select-input/select-input.en-US.md b/examples/select-input/select-input.en-US.md new file mode 100644 index 000000000..76aff838c --- /dev/null +++ b/examples/select-input/select-input.en-US.md @@ -0,0 +1,61 @@ +:: BASE_DOC :: + +## API + +### SelectInput Props + +name | type | default | description | required +-- | -- | -- | -- | -- +allowInput | Boolean | false | \- | N +autoWidth | Boolean | false | \- | N +borderless | Boolean | false | \- | N +clearable | Boolean | false | \- | N +collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +disabled | 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-input/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-input/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-input/type.ts) | N +keys | Object | - | Typescript：`SelectInputKeys` `interface SelectInputKeys { label?: string; value?: string; children?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/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 +minCollapsedNum | Number | 0 | \- | N +multiple | Boolean | false | \- | N +panel | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +placeholder | String | - | placeholder description | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts) | N +popupVisible | Boolean | undefined | \- | N +readonly | Boolean | false | \- | 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 +tag | String / Slot / Function | - | Typescript：`string | TNode<{ value: string | number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +tagInputProps | Object | - | Typescript：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts) | N +tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/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 / Boolean / Object / Array / Date | - | Typescript：`SelectInputValue` `type SelectInputValue = string | number | boolean | Date | Object | Array | Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts) | N +valueDisplay | String / Slot / Function | - | Typescript：`string | TNode<{ value: SelectInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +onBlur | Function | | TS 类型：`(value: SelectInputValue, context: SelectInputFocusContext) => void`
trigger on blur | N +onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onEnter | Function | | TS 类型：`(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: InputValue }) => void`
| N +onFocus | Function | | TS 类型：`(value: SelectInputValue, context: SelectInputFocusContext) => void`
trigger on focus。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts)。
`interface SelectInputFocusContext { inputValue: InputValue; tagInputValue?: TagInputValue; e: FocusEvent }`
| N +onInputChange | Function | | TS 类型：`(value: InputValue, context?: SelectInputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts)。
`interface SelectInputValueChangeContext { e?: InputEvent | MouseEvent | FocusEvent | KeyboardEvent; trigger: 'input' | 'clear' }`
| N +onMouseenter | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
trigger on mouseenter | N +onMouseleave | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
trigger on mouseleave | N +onPaste | Function | | TS 类型：`(context: { e: ClipboardEvent; pasteValue: string }) => void`
| N +onPopupVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
| N +onTagChange | Function | | TS 类型：`(value: SelectInputValue, context: SelectInputChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts)。
`type SelectInputChangeContext = TagInputChangeContext`
| N + +### SelectInput Events + +name | params | description +-- | -- | -- +blur | `(value: SelectInputValue, context: SelectInputFocusContext)` | trigger on blur +clear | `(context: { e: MouseEvent })` | \- +enter | `(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: InputValue })` | \- +focus | `(value: SelectInputValue, context: SelectInputFocusContext)` | trigger on focus。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts)。
`interface SelectInputFocusContext { inputValue: InputValue; tagInputValue?: TagInputValue; e: FocusEvent }`
+input-change | `(value: InputValue, context?: SelectInputValueChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts)。
`interface SelectInputValueChangeContext { e?: InputEvent | MouseEvent | FocusEvent | KeyboardEvent; trigger: 'input' | 'clear' }`
+mouseenter | `(context: { e: MouseEvent })` | trigger on mouseenter +mouseleave | `(context: { e: MouseEvent })` | trigger on mouseleave +paste | `(context: { e: ClipboardEvent; pasteValue: string })` | \- +popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
+tag-change | `(value: SelectInputValue, context: SelectInputChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts)。
`type SelectInputChangeContext = TagInputChangeContext`
diff --git a/examples/select/select.en-US.md b/examples/select/select.en-US.md new file mode 100644 index 000000000..be5c01019 --- /dev/null +++ b/examples/select/select.en-US.md @@ -0,0 +1,89 @@ +:: BASE_DOC :: + +## API + +### Select Props + +name | type | default | description | required +-- | -- | -- | -- | -- +autoWidth | Boolean | false | \- | N +bordered | Boolean | true | \- | N +borderless | Boolean | false | \- | N +clearable | Boolean | false | \- | N +collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +creatable | Boolean | false | \- | N +disabled | Boolean | false | \- | N +empty | String / Slot / Function | '' | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +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 | - | Typescript：`SelectKeysType` `interface SelectKeysType { value?: string; label?: 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 +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 +max | Number | 0 | \- | N +minCollapsedNum | Number | 0 | \- | N +multiple | Boolean | false | \- | N +options | Array | [] | Typescript：`Array` | 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 +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N +popupVisible | Boolean | undefined | \- | 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/select/type.ts) | N +showArrow | 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 +tagInputProps | Object | - | Typescript：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N +tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N +value | String / Number / Object / Array | - | `v-model` is supported。Typescript：`SelectValue` `type SelectValue = string | number | T | Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N +defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript：`SelectValue` `type SelectValue = string | number | T | Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N +valueDisplay | String / Slot / Function | - | `MouseEvent`。Typescript：`string | TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +valueType | String | value | options：value/object | N +onBlur | Function | | TS 类型：`(context: { value: SelectValue; e: FocusEvent | KeyboardEvent }) => void`
| N +onChange | Function | | TS 类型：`(value: SelectValue, context: { trigger: SelectValueChangeTrigger; e?: MouseEvent | KeyboardEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'`
| 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`
| N +onFocus | Function | | TS 类型：`(context: { value: SelectValue; e: FocusEvent | KeyboardEvent }) => void`
| N +onInputChange | Function | | TS 类型：`(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 +onPopupVisibleChange | Function | | TS 类型：`(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 | | TS 类型：`(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 | | TS 类型：`(filterWords: string) => void`
| N +onVisibleChange | Function | | TS 类型：`(visible: boolean) => void`
| N + +### Select Events + +name | params | description +-- | -- | -- +blur | `(context: { value: SelectValue; e: FocusEvent | KeyboardEvent })` | \- +change | `(value: SelectValue, context: { trigger: SelectValueChangeTrigger; e?: MouseEvent | KeyboardEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'`
+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'`
+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)` | \- +visible-change | `(visible: boolean)` | \- + +### Option 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 | false | \- | N +label | String | - | \- | N +value | String / Number | - | \- | N + +### OptionGroup Props + +name | type | default | description | required +-- | -- | -- | -- | -- +divider | Boolean | true | \- | N +label | String | - | \- | N diff --git a/examples/skeleton/skeleton.en-US.md b/examples/skeleton/skeleton.en-US.md new file mode 100644 index 000000000..2e7bd2ee2 --- /dev/null +++ b/examples/skeleton/skeleton.en-US.md @@ -0,0 +1,13 @@ +:: BASE_DOC :: + +## API + +### Skeleton Props + +name | type | default | description | required +-- | -- | -- | -- | -- +animation | String | none | options：gradient/flashed/none | N +delay | Number | 0 | \- | N +loading | Boolean | true | \- | N +rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string | TNode; type?: 'rect' | 'circle' | 'text' }`。[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/skeleton/type.ts) | N +theme | String | text | options：text/avatar/paragraph/avatar-text/tab/article | N diff --git a/examples/slider/slider.en-US.md b/examples/slider/slider.en-US.md new file mode 100644 index 000000000..6e9bfd8ee --- /dev/null +++ b/examples/slider/slider.en-US.md @@ -0,0 +1,27 @@ +:: BASE_DOC :: + +## API + +### Slider Props + +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 +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 +range | 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 +onChange | Function | | TS 类型：`(value: SliderValue) => void`
| N + +### Slider Events + +name | params | description +-- | -- | -- +change | `(value: SliderValue)` | \- diff --git a/examples/steps/steps.en-US.md b/examples/steps/steps.en-US.md new file mode 100644 index 000000000..919eb1a35 --- /dev/null +++ b/examples/steps/steps.en-US.md @@ -0,0 +1,35 @@ +:: BASE_DOC :: + +## API + +### Steps Props + +name | type | default | description | required +-- | -- | -- | -- | -- +current | String / Number | - | `v-model` is supported | N +defaultCurrent | String / Number | - | uncontrolled property | N +layout | String | horizontal | options：horizontal/vertical | N +options | Array | - | Typescript：`Array` | N +readonly | Boolean | false | \- | N +separator | String | line | options：line/dashed/arrow | N +sequence | String | positive | options：positive/reverse | N +theme | String | default | options：default/dot | N +onChange | Function | | TS 类型：`(current: string | number, previous: string | number, context?: { e?: MouseEvent }) => void`
| N + +### Steps Events + +name | params | description +-- | -- | -- +change | `(current: string | number, previous: string | number, context?: { e?: MouseEvent })` | \- + +### StepItem 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 +extra | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +icon | Boolean / Slot / Function | true | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +status | String | default | options：default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/steps/type.ts) | N +title | 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 | - | \- | N diff --git a/examples/sticky-tool/sticky-tool.en-US.md b/examples/sticky-tool/sticky-tool.en-US.md new file mode 100644 index 000000000..09d373c8a --- /dev/null +++ b/examples/sticky-tool/sticky-tool.en-US.md @@ -0,0 +1,34 @@ +:: BASE_DOC :: + +## API + +### StickyTool Props + +name | type | default | description | required +-- | -- | -- | -- | -- +collapsed | Boolean | false | \- | N +draggable | Boolean | false | \- | N +entrance | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +list | Array | [] | Typescript：`Array` | N +offset | Object | - | Typescript：`Array` | N +placement | String | right-bottom | options：right-top/right-center/right-bottom/left-top/left-center/left-bottom | N +width | String / Number | - | \- | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent; item: TdStickyItemProps }) => void`
| N +onHover | Function | | TS 类型：`(context: { e: MouseEvent; item: TdStickyItemProps }) => void`
| N + +### StickyTool Events + +name | params | description +-- | -- | -- +click | `(context: { e: MouseEvent; item: TdStickyItemProps })` | \- +hover | `(context: { e: MouseEvent; item: TdStickyItemProps })` | \- + +### StickyItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +icon | String / Slot / Function | - | Typescript：`string | TNode`。[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 +popup | 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/sticky-tool/type.ts) | N +trigger | String | hover | options：hover/click | N diff --git a/examples/swiper/swiper.en-US.md b/examples/swiper/swiper.en-US.md new file mode 100644 index 000000000..2e9a1043a --- /dev/null +++ b/examples/swiper/swiper.en-US.md @@ -0,0 +1,38 @@ +:: BASE_DOC :: + +## API + +### Swiper Props + +name | type | default | description | required +-- | -- | -- | -- | -- +animation | String | slide | options：slide/fade | N +autoplay | Boolean | true | \- | N +current | Number | 0 | `v-model` is supported | N +defaultCurrent | Number | 0 | uncontrolled property | N +direction | String | horizontal | options：horizontal/vertical | N +duration | Number | 300 | \- | N +height | Number | - | \- | N +interval | Number | 5000 | \- | N +loop | Boolean | true | \- | N +navigation | Object / Slot / Function | - | Typescript：`SwiperNavigation | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +stopOnHover | Boolean | true | \- | N +theme | String | light | options：light/dark | N +trigger | String | hover | options：hover/click | N +type | String | default | options：default/card | N +onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' | 'click' | 'hover'`
| N + +### Swiper Events + +name | params | description +-- | -- | -- +change | `(current: number, context: { source: SwiperChangeSource })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' | 'click' | 'hover'`
+ +### SwiperNavigation + +name | type | default | description | required +-- | -- | -- | -- | -- +placement | String | inside | options：inside/outside | N +showSlideBtn | String | always | options：always/hover/never | N +size | String | medium | options：small/medium/large | N +type | String | - | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' | 'dots-bar' | 'bars' | 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts) | N diff --git a/examples/switch/switch.en-US.md b/examples/switch/switch.en-US.md new file mode 100644 index 000000000..f86ac013c --- /dev/null +++ b/examples/switch/switch.en-US.md @@ -0,0 +1,22 @@ +:: BASE_DOC :: + +## API + +### Switch Props + +name | type | default | description | required +-- | -- | -- | -- | -- +customValue | Array | - | Typescript：`Array` | N +disabled | Boolean | false | \- | 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 | | TS 类型：`(value: SwitchValue) => void`
| N + +### Switch Events + +name | params | description +-- | -- | -- +change | `(value: SwitchValue)` | \- diff --git a/examples/table/table.en-US.md b/examples/table/table.en-US.md new file mode 100644 index 000000000..13536c55e --- /dev/null +++ b/examples/table/table.en-US.md @@ -0,0 +1,262 @@ +:: BASE_DOC :: + +## API + +### BaseTable Props + +name | type | default | description | required +-- | -- | -- | -- | -- +allowResizeColumnWidth | Boolean | false | allow to resize column width | N +bordered | Boolean | false | show table bordered | N +bottomContent | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +columns | Array | [] | table column configs。Typescript：`Array>` | N +data | Array | [] | table data。Typescript：`Array` | N +disableDataPage | Boolean | false | \- | N +empty | String / Slot / Function | '' | empty text or empty element。Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +firstFullRow | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +fixedRows | Array | - | Typescript：`Array` | N +footData | Array | [] | table foot data。Typescript：`Array` | N +footerAffixedBottom | Boolean | false | affix foot to viewport bottom | N +footerAffixProps | Object | - | affix props。Typescript：`AffixProps` | N +headerAffixedTop | Boolean | false | affix header to viewport top | N +headerAffixProps | Object | - | affix props。Typescript：`AffixProps`，[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +height | String / Number | - | table height | N +hover | Boolean | false | show hover style | N +lastFullRow | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +loading | Boolean / Slot / Function | undefined | loading state table。Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +loadingProps | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +maxHeight | String / Number | - | table max height | N +pagination | Object | - | you can use all props of pagination component with paginationProps。Typescript：`PaginationProps`，[Pagination API Documents](./pagination?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +rowAttributes | Object / Array / Function | - | `tr` attributes。Typescript：`TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes | ((params: { row: T; rowIndex: number; type: 'body' | 'foot' }) => HTMLElementAttributes) | Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +rowClassName | String / Object / Array / Function | - | table `th` classname。Typescript：`ClassName | ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; type?: 'body' | 'foot' }`。[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/table/type.ts) | N +rowKey | String | 'id' | required。unique key for each row data | Y +rowspanAndColspan | Function | - | rowspan and colspan。Typescript：`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +scroll | Object | - | lazy load and virtual scroll。Typescript：`TableScroll` | N +size | String | medium | table size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +stripe | Boolean | false | show stripe style | N +tableContentWidth | String | - | \- | N +tableLayout | String | fixed | table-layout css properties。options：auto/fixed | N +topContent | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +verticalAlign | String | middle | vertical align。options：top/middle/bottom | N +onCellClick | Function | | TS 类型：`(context: BaseTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onPageChange | Function | | TS 类型：`(pageInfo: PageInfo, newDataSource: Array) => void`
trigger on pagination changing | N +onRowClick | Function | | TS 类型：`(context: RowEventContext) => void`
trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
| N +onRowDblclick | Function | | TS 类型：`(context: RowEventContext) => void`
trigger on double click | N +onRowMousedown | Function | | TS 类型：`(context: RowEventContext) => void`
trigger on row mousedown | N +onRowMouseenter | Function | | TS 类型：`(context: RowEventContext) => void`
trigger on row mouseenter | N +onRowMouseleave | Function | | TS 类型：`(context: RowEventContext) => void`
trigger on row mouseenter | N +onRowMouseover | Function | | TS 类型：`(context: RowEventContext) => void`
trigger on row mouseover | N +onRowMouseup | Function | | TS 类型：`(context: RowEventContext) => void`
trigger on row mouseup | N +onScroll | Function | | TS 类型：`(params: { e: WheelEvent }) => void`
trigger on table content scroll | N +onScrollX | Function | | TS 类型：`(params: { e: WheelEvent }) => void`
`deprecated`。trigger on scroll horizontal | N +onScrollY | Function | | TS 类型：`(params: { e: WheelEvent }) => void`
`deprecated`。trigger on scroll vertical | N + +### BaseTable Events + +name | params | description +-- | -- | -- +cell-click | `(context: BaseTableCellEventContext)` | trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
+page-change | `(pageInfo: PageInfo, newDataSource: Array)` | trigger on pagination changing +row-click | `(context: RowEventContext)` | trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
+row-dblclick | `(context: RowEventContext)` | trigger on double click +row-mousedown | `(context: RowEventContext)` | trigger on row mousedown +row-mouseenter | `(context: RowEventContext)` | trigger on row mouseenter +row-mouseleave | `(context: RowEventContext)` | trigger on row mouseenter +row-mouseover | `(context: RowEventContext)` | trigger on row mouseover +row-mouseup | `(context: RowEventContext)` | trigger on row mouseup +scroll | `(params: { e: WheelEvent })` | trigger on table content scroll +scroll-x | `(params: { e: WheelEvent })` | `deprecated`。trigger on scroll horizontal +scroll-y | `(params: { e: WheelEvent })` | `deprecated`。trigger on scroll vertical + +### BaseTableCol + +name | type | default | description | required +-- | -- | -- | -- | -- +align | String | left | align type。options：left/right/center | N +attrs | Object | - | html attributes | N +cell | String / Function | - | use cell to render table cell。Typescript：`string | TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: 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/table/type.ts) | N +children | Array | - | grouping table head。Typescript：`Array>` | N +className | String / Object / Array / Function | - | cell classnames。Typescript：`ClassName | ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' | 'td' }`。[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/table/type.ts) | N +colKey | String | - | unique key for column | N +ellipsis | Boolean / Object / Slot / Function | false | ellipsis cell content。Typescript：`boolean | TNode> | PopupProps`，[Popup API Documents](./popup?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/table/type.ts) | N +ellipsisTitle | Boolean / Object / Slot / Function | undefined | ellipsis title content。Typescript：`boolean | TNode> | PopupProps` `interface BaseTableColParams { col: BaseTableCol; colIndex: 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/table/type.ts) | N +fixed | String | left | fixed current column to left or right。options：left/right | N +foot | String / Function | - | tfoot content。Typescript：`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +render | Function | - | render function can be used to render cell or head。Typescript：`TNode>` `interface BaseTableRenderParams extends BaseTableCellParams { type: RenderType }` `type RenderType = 'cell' | 'title'`。[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/table/type.ts) | N +title | String / Function | - | th content。Typescript：`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +width | String / Number | - | column width | N + +### PrimaryTable Props + +name | type | default | description | required +-- | -- | -- | -- | -- +asyncLoading | String / Slot / Function | - | async loading state。Typescript：`'loading' | 'load-more' | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +columnController | Object | - | Typescript：`TableColumnController` | N +columnControllerVisible | Boolean | undefined | `.sync` is supported | N +defaultColumnControllerVisible | Boolean | undefined | uncontrolled property | N +columns | Array | [] | table column configs。Typescript：`Array>` | N +displayColumns | Array | - | `.sync` is supported。Typescript：`CheckboxGroupValue` | N +defaultDisplayColumns | Array | - | uncontrolled property。Typescript：`CheckboxGroupValue` | N +dragSort | String | - | dag sort。options：row/row-handler/col/drag-col | N +dragSortOptions | Object | - | drag sort params。Typescript：`SortableOptions` | N +expandedRow | String / Slot / Function | - | table expanded row, to show more detail information。Typescript：`TNode>` `interface TableExpandedRowParams { row: T; index: number; columns: PrimaryTableCol[] | BaseTableCol[] }`。[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/table/type.ts) | N +expandedRowKeys | Array | [] | expanded row keys, row key value is from data[rowKey]。`.sync` is supported。Typescript：`Array` | N +defaultExpandedRowKeys | Array | [] | expanded row keys, row key value is from data[rowKey]。uncontrolled property。Typescript：`Array` | N +expandIcon | Boolean / Slot / Function | true | to show expand icon. expand icon is set in first column。Typescript：`boolean | TNode>` `interface ExpandArrowRenderParams { row: T; index: 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/table/type.ts) | N +expandOnRowClick | Boolean | - | expand row on click | N +filterIcon | Slot / Function | - | filter icon。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filterRow | String / Slot / Function | - | filter value。Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filterValue | Object | - | filter value。`.sync` is supported。Typescript：`FilterValue` `type FilterValue = { [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +defaultFilterValue | Object | - | filter value。uncontrolled property。Typescript：`FilterValue` `type FilterValue = { [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +hideSortTips | Boolean | - | hide sort tips | N +multipleSort | Boolean | false | support multiple column fields sort | N +selectedRowKeys | Array | - | selected row keys, row key is from data[rowKey]。`.sync` is supported。Typescript：`Array` | N +defaultSelectedRowKeys | Array | - | selected row keys, row key is from data[rowKey]。uncontrolled property。Typescript：`Array` | N +sort | Object / Array | - | sort configs。`.sync` is supported。Typescript：`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +defaultSort | Object / Array | - | sort configs。uncontrolled property。Typescript：`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +sortIcon | Slot / Function | - | sort icon。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +sortOnRowDraggable | Boolean | false | `deprecated`。sort on row draggable | N +`Omit, 'columns' | 'onCellClick'>` | \- | - | \- | N +onAsyncLoadingClick | Function | | TS 类型：`(context: { status: 'loading' | 'load-more' }) => void`
trigger on async loading text clicked | N +onCellClick | Function | | TS 类型：`(context: PrimaryTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onChange | Function | | TS 类型：`(data: TableChangeData, context: TableChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' | 'sorter' | 'pagination'`
| N +onColumnChange | Function | | TS 类型：`(context: PrimaryTableColumnChange) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' | 'uncheck'; e?: Event }`
| N +onColumnControllerVisibleChange | Function | | TS 类型：`(visible: boolean, context: { trigger: 'cancel' | 'confirm' }) => void`
| N +onDataChange | Function | | TS 类型：`(data: Array, context: TableDataChangeContext) => void`
trigger on data changing。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N +onDisplayColumnsChange | Function | | TS 类型：`(value: CheckboxGroupValue) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N +onDragSort | Function | | TS 类型：`(context: DragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; currentData: T[]; e: SortableEvent; sort: 'row' | 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N +onExpandChange | Function | | TS 类型：`(expandedRowKeys: Array, options: ExpandOptions) => void`
trigger on expand row keys changing。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array }`
| N +onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: { col?: PrimaryTableCol }) => void`
trigger on filter value changing | N +onSelectChange | Function | | TS 类型：`(selectedRowKeys: Array, options: SelectOptions) => void`
trigger on select changing。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' | 'check'; currentRowKey?: string; currentRowData?: T }`
| N +onSortChange | Function | | TS 类型：`(sort: TableSort, options: SortOptions) => void`
trigger on sort changing。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface SortOptions { currentDataSource?: Array; col: PrimaryTableCol }`
| N + +### PrimaryTable Events + +name | params | description +-- | -- | -- +async-loading-click | `(context: { status: 'loading' | 'load-more' })` | trigger on async loading text clicked +cell-click | `(context: PrimaryTableCellEventContext)` | trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
+change | `(data: TableChangeData, context: TableChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' | 'sorter' | 'pagination'`
+column-change | `(context: PrimaryTableColumnChange)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' | 'uncheck'; e?: Event }`
+column-controller-visible-change | `(visible: boolean, context: { trigger: 'cancel' | 'confirm' })` | \- +data-change | `(data: Array, context: TableDataChangeContext)` | trigger on data changing。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
+display-columns-change | `(value: CheckboxGroupValue)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
+drag-sort | `(context: DragSortContext)` | trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; currentData: T[]; e: SortableEvent; sort: 'row' | 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
+expand-change | `(expandedRowKeys: Array, options: ExpandOptions)` | trigger on expand row keys changing。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array }`
+filter-change | `(filterValue: FilterValue, context: { col?: PrimaryTableCol })` | trigger on filter value changing +select-change | `(selectedRowKeys: Array, options: SelectOptions)` | trigger on select changing。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' | 'check'; currentRowKey?: string; currentRowData?: T }`
+sort-change | `(sort: TableSort, options: SortOptions)` | trigger on sort changing。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface SortOptions { currentDataSource?: Array; col: PrimaryTableCol }`
+ +### PrimaryTableCol + +name | type | default | description | required +-- | -- | -- | -- | -- +cell | String / Function | - | to render table cell。Typescript：`string | TNode>` `interface PrimaryTableCellParams { row: T; rowIndex: number; col: PrimaryTableCol; colIndex: 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/table/type.ts) | N +checkProps | Object / Function | - | checkbox or radio component properties。Typescript：`CheckProps` `type CheckProps = CheckboxProps | RadioProps | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps)` `import { CheckboxProps } from '@Checkbox'`，[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +children | Array | - | grouping table head。Typescript：`Array>` | N +colKey | String | - | unique key for column | N +disabled | Function | - | disable table select action。Typescript：`(options: {row: T; rowIndex: number }) => boolean` | N +edit | Object | - | Typescript：`TableEditableCellConfig` | N +filter | Object | - | filter rules config。Typescript：`TableColumnFilter` | N +render | Function | - | to render cell or head。Typescript：`TNode>` `interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType }`。[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/table/type.ts) | N +sorter | Boolean / Function | false | sort configs。Typescript：`boolean | SorterFun` `type SorterFun = (a: T, b: T) => number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +sortType | String | all | sort options。options：desc/asc/all。Typescript：`SortType` `type SortType = 'desc' | 'asc' | 'all'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +title | String / Function | - | to render table head。Typescript：`string | TNode<{ col: PrimaryTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +type | String | single | row select type。options：single/multiple | N +`Omit` | \- | - | \- | N + +### EnhancedTable Props + +name | type | default | description | required +-- | -- | -- | -- | -- +beforeDragSort | Function | - | stop to drag sort。Typescript：`(context: DragSortContext) => boolean` | N +tree | Object | - | tree data configs。Typescript：`TableTreeConfig` | N +treeExpandAndFoldIcon | Function | - | sort icon。Typescript：`TNode<{ type: 'expand' | 'fold' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +`PrimaryTableProps` | \- | - | \- | N +onAbnormalDragSort | Function | | TS 类型：`(context: TableAbnormalDragSortContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableAbnormalDragSortContext { code: number; reason: string }`
| N +onTreeExpandChange | Function | | TS 类型：`(context: TableTreeExpandChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState; trigger?: 'expand-fold-icon' }`
| N + +### EnhancedTable Events + +name | params | description +-- | -- | -- +abnormal-drag-sort | `(context: TableAbnormalDragSortContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableAbnormalDragSortContext { code: number; reason: string }`
+tree-expand-change | `(context: TableTreeExpandChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState; trigger?: 'expand-fold-icon' }`
+ +### EnhancedTableInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +expandAll | \- | \- | required +foldAll | \- | \- | required +getData | `(key: TableRowValue)` | `TableRowState` | required。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`type TableRowValue = string | number`
+remove | `(key: TableRowValue)` | \- | required +setData | `(key: TableRowValue, newRowData: T)` | \- | required +toggleExpandData | `(p: { row: T, rowIndex: number})` | \- | required + +### TableRowState + +name | type | default | description | required +-- | -- | -- | -- | -- +disabled | Boolean | false | \- | N +expandChildrenLength | Number | - | \- | N +expanded | Boolean | false | required | Y +id | String / Number | - | required | Y +level | Number | - | Typescript：`number` | N +parent | \- | - | Typescript：`TableRowState` | N +path | Array | - | Typescript：`TableRowState[]` | N +row | \- | - | required。Typescript：`T` | Y +rowIndex | Number | - | required | Y + +### TableColumnFilter + +name | type | default | description | required +-- | -- | -- | -- | -- +component | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +list | Array | - | Typescript：`Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +props | Array | - | 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 +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 + +### TableScroll + +name | type | default | description | required +-- | -- | -- | -- | -- +bufferSize | Number | 20 | \- | N +isFixedRowHeight | Boolean | false | \- | N +rowHeight | Number | - | \- | N +threshold | Number | 100 | \- | N +type | String | - | required。options：lazy/virtual | Y + +### TableColumnController + +name | type | default | description | required +-- | -- | -- | -- | -- +buttonProps | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +checkboxProps | Object | - | Typescript：`CheckboxGroupProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +dialogProps | Object | - | Typescript：`DialogProps`，[Dialog API Documents](./dialog?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +displayType | String | auto-width | options：fixed-width/auto-width | N +fields | Array | - | Typescript：`string[]` | N +hideTriggerButton | Boolean | false | \- | N +placement | String | top-right | options：top-left/top-right/bottom-left/bottom-right | N + +### TableEditableCellConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +abortEditOnEvent | Array | - | Typescript：`string[]` | N +component | \- | - | component definition。Typescript：`ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +onEdited | Function | - | trigger on finishing editing。Typescript：`(context: { trigger: string; newRowData: T; rowIndex: number }) => void` | N +props | Object | - | props of `edit.component`。Typescript：`{ [key: string]: any }` | N +rules | Array | - | form rules。Typescript：`FormRule[]`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N + +### TableTreeConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +checkStrictly | Boolean | true | \- | N +childrenKey | String | children | \- | N +defaultExpandAll | Boolean | false | \- | N +indent | Number | 24 | \- | N +treeNodeColumnIndex | Number | 0 | \- | N diff --git a/examples/tabs/tabs.en-US.md b/examples/tabs/tabs.en-US.md new file mode 100644 index 000000000..293a92c83 --- /dev/null +++ b/examples/tabs/tabs.en-US.md @@ -0,0 +1,49 @@ +:: BASE_DOC :: + +## API + +### Tabs Props + +name | type | default | description | required +-- | -- | -- | -- | -- +addable | Boolean | false | \- | N +disabled | Boolean | false | \- | N +dragSort | Boolean | false | \- | N +list | Array | - | Typescript：`Array` | N +placement | String | top | options：left/top/bottom/right | N +size | String | medium | options：medium/large | N +theme | String | normal | options：normal/card | N +value | String / Number | - | `v-model` is supported。Typescript：`TabValue` `type TabValue = string | number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts) | N +defaultValue | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string | number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts) | N +onAdd | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onChange | Function | | TS 类型：`(value: TabValue) => void`
| N +onDragSort | Function | | TS 类型：`(context: TabsDragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts)。
`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`
| N +onRemove | Function | | TS 类型：`(options: { value: TabValue; index: number; e: MouseEvent }) => void`
| N + +### Tabs Events + +name | params | description +-- | -- | -- +add | `(context: { e: MouseEvent })` | \- +change | `(value: TabValue)` | \- +drag-sort | `(context: TabsDragSortContext)` | trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tabs/type.ts)。
`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`
+remove | `(options: { value: TabValue; index: number; e: MouseEvent })` | \- + +### TabPanel Props + +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 +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 +value | String / Number | - | Typescript：`TabValue` | N +onRemove | Function | | TS 类型：`(options: { value: TabValue; e: MouseEvent }) => void`
| N + +### TabPanel Events + +name | params | description +-- | -- | -- +remove | `(options: { value: TabValue; e: MouseEvent })` | \- diff --git a/examples/tag-input/tag-input.en-US.md b/examples/tag-input/tag-input.en-US.md new file mode 100644 index 000000000..390d925bf --- /dev/null +++ b/examples/tag-input/tag-input.en-US.md @@ -0,0 +1,59 @@ +:: BASE_DOC :: + +## API + +### TagInput Props + +name | type | default | description | required +-- | -- | -- | -- | -- +autoWidth | Boolean | false | \- | N +clearable | Boolean | false | \- | N +collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +disabled | Boolean | false | \- | N +dragSort | Boolean | false | \- | N +excessTagsDisplayType | String | scroll | options：scroll/break-line | N +inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/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/tag-input/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/tag-input/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 +max | Number | - | max tag number | N +minCollapsedNum | Number | 0 | \- | N +placeholder | String | undefined | placeholder description | N +readonly | Boolean | false | \- | N +size | String | medium | options：small/medium/large | N +status | String | default | options：success/warning/error/default | 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 +tag | String / Slot / Function | - | Typescript：`string | TNode<{ value: string | number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/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 | - | value。`v-model` is supported。Typescript：`TagInputValue` `type TagInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts) | N +defaultValue | Array | - | value。uncontrolled property。Typescript：`TagInputValue` `type TagInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts) | N +valueDisplay | String / Slot / Function | - | Typescript：`string | TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +onBlur | Function | | TS 类型：`(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void`
trigger on blur | N +onChange | Function | | TS 类型：`(value: TagInputValue, context: TagInputChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts)。
`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string | number; e?: MouseEvent | KeyboardEvent }`

`type TagInputTriggerSource = 'enter' | 'tag-remove' | 'backspace' | 'clear'`
| N +onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onDragSort | Function | | TS 类型：`(context: TagInputDragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts)。
`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string | number; targetIndex: number; target: string | number }`
| N +onEnter | Function | | TS 类型：`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: InputValue }) => void`
| N +onFocus | Function | | TS 类型：`(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void`
trigger on focus | N +onInputChange | Function | | TS 类型：`(value: InputValue, context?: InputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts)。
`interface InputValueChangeContext { e?: InputEvent | MouseEvent | KeyboardEvent; trigger: 'input' | 'clear' | 'enter' }`
| N +onMouseenter | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
trigger on mouseenter | N +onMouseleave | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
trigger on mouseleave | N +onPaste | Function | | TS 类型：`(context: { e: ClipboardEvent; pasteValue: string }) => void`
| N +onRemove | Function | | TS 类型：`(context: TagInputRemoveContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts)。
`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string | number; e?: MouseEvent | KeyboardEvent; trigger: TagInputRemoveTrigger }`

`type TagInputRemoveTrigger = 'tag-remove' | 'backspace'`
| N + +### TagInput Events + +name | params | description +-- | -- | -- +blur | `(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent })` | trigger on blur +change | `(value: TagInputValue, context: TagInputChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts)。
`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string | number; e?: MouseEvent | KeyboardEvent }`

`type TagInputTriggerSource = 'enter' | 'tag-remove' | 'backspace' | 'clear'`
+clear | `(context: { e: MouseEvent })` | \- +drag-sort | `(context: TagInputDragSortContext)` | trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts)。
`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string | number; targetIndex: number; target: string | number }`
+enter | `(value: TagInputValue, context: { e: KeyboardEvent; inputValue: InputValue })` | \- +focus | `(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent })` | trigger on focus +input-change | `(value: InputValue, context?: InputValueChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts)。
`interface InputValueChangeContext { e?: InputEvent | MouseEvent | KeyboardEvent; trigger: 'input' | 'clear' | 'enter' }`
+mouseenter | `(context: { e: MouseEvent })` | trigger on mouseenter +mouseleave | `(context: { e: MouseEvent })` | trigger on mouseleave +paste | `(context: { e: ClipboardEvent; pasteValue: string })` | \- +remove | `(context: TagInputRemoveContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts)。
`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string | number; e?: MouseEvent | KeyboardEvent; trigger: TagInputRemoveTrigger }`

`type TagInputRemoveTrigger = 'tag-remove' | 'backspace'`
diff --git a/examples/tag/tag.en-US.md b/examples/tag/tag.en-US.md new file mode 100644 index 000000000..51c722c79 --- /dev/null +++ b/examples/tag/tag.en-US.md @@ -0,0 +1,47 @@ +:: BASE_DOC :: + +## API + +### Tag Props + +name | type | default | description | required +-- | -- | -- | -- | -- +closable | Boolean | false | \- | N +content | String / Number / Slot / Function | - | Typescript：`string | number | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Number / Slot / Function | - | Typescript：`string | number | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +disabled | Boolean | false | \- | N +icon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +maxWidth | String / Number | - | Typescript：`CSSProperties['maxWidth'] | number` | N +shape | String | square | options：square/round/mark | 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 +theme | String | default | options：default/primary/warning/danger/success | N +variant | String | dark | options：dark/light/outline/light-outline | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N + +### Tag Events + +name | params | description +-- | -- | -- +click | `(context: { e: MouseEvent })` | \- +close | `(context: { e: MouseEvent })` | \- + +### CheckTag Props + +name | type | default | description | required +-- | -- | -- | -- | -- +checked | Boolean | undefined | `v-model` is supported | N +defaultChecked | Boolean | undefined | uncontrolled property | N +content | String / Number / Slot / Function | - | Typescript：`string | number | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Number / Slot / Function | - | Typescript：`string | number | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +disabled | 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 +onChange | Function | | TS 类型：`(checked: boolean) => void`
| N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N + +### CheckTag Events + +name | params | description +-- | -- | -- +change | `(checked: boolean)` | \- +click | `(context: { e: MouseEvent })` | \- diff --git a/examples/textarea/textarea.en-US.md b/examples/textarea/textarea.en-US.md new file mode 100644 index 000000000..7c8fb132a --- /dev/null +++ b/examples/textarea/textarea.en-US.md @@ -0,0 +1,38 @@ +:: BASE_DOC :: + +## API + +### Textarea Props + +name | type | default | description | required +-- | -- | -- | -- | -- +autofocus | Boolean | false | \- | N +autosize | Boolean / Object | false | Typescript：`boolean | { minRows?: number; maxRows?: number }` | N +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 | - | \- | N +name | String | - | \- | N +placeholder | String | undefined | \- | N +readonly | Boolean | false | \- | N +status | String | - | options：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 | number`。[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 | number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/textarea/type.ts) | N +onBlur | Function | | TS 类型：`(value: TextareaValue, context: { e: FocusEvent }) => void`
| N +onChange | Function | | TS 类型：`(value: TextareaValue, context?: { e?: InputEvent }) => void`
| N +onFocus | Function | | TS 类型：`(value: TextareaValue, context : { e: FocusEvent }) => void`
| N +onKeydown | Function | | TS 类型：`(value: TextareaValue, context: { e: KeyboardEvent }) => void`
| N +onKeypress | Function | | TS 类型：`(value: TextareaValue, context: { e: KeyboardEvent }) => void`
| N +onKeyup | Function | | TS 类型：`(value: TextareaValue, context: { e: KeyboardEvent }) => void`
| N + +### Textarea Events + +name | params | description +-- | -- | -- +blur | `(value: TextareaValue, context: { e: FocusEvent })` | \- +change | `(value: TextareaValue, context?: { e?: InputEvent })` | \- +focus | `(value: TextareaValue, context : { e: FocusEvent })` | \- +keydown | `(value: TextareaValue, context: { e: KeyboardEvent })` | \- +keypress | `(value: TextareaValue, context: { e: KeyboardEvent })` | \- +keyup | `(value: TextareaValue, context: { e: KeyboardEvent })` | \- diff --git a/examples/time-picker/time-picker.en-US.md b/examples/time-picker/time-picker.en-US.md new file mode 100644 index 000000000..e739868b3 --- /dev/null +++ b/examples/time-picker/time-picker.en-US.md @@ -0,0 +1,69 @@ +:: BASE_DOC :: + +## API + +### TimePicker Props + +name | type | default | description | required +-- | -- | -- | -- | -- +allowInput | Boolean | false | \- | N +clearable | Boolean | false | \- | N +disabled | Boolean | false | \- | N +disableTime | Function | - | Typescript：`(h: number, m: number, s: number) => Partial<{ hour: Array, minute: Array, second: Array }>` | 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 +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 +size | String | medium | options：small/medium/large | N +steps | Array | [1, 1, 1] | Typescript：`Array` | 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 | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
| 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`
| N +onInput | Function | | TS 类型：`(context: { value: TimePickerValue; e: InputEvent }) => void`
| N +onOpen | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N + +### TimePicker Events + +name | params | description +-- | -- | -- +blur | `(context: { value: TimePickerValue; e: FocusEvent })` | \- +change | `(value: TimePickerValue)` | \- +close | `(context: { e: MouseEvent })` | \- +focus | `(context: { value: TimePickerValue; e: FocusEvent })` | \- +input | `(context: { value: TimePickerValue; e: InputEvent })` | \- +open | `(context: { e: MouseEvent })` | \- + +### TimeRangePicker Props + +name | type | default | description | required +-- | -- | -- | -- | -- +allowInput | Boolean | false | \- | N +clearable | Boolean | false | \- | N +disabled | Boolean / Array | false | Typescript：`boolean | Array` | 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 +format | String | HH:mm:ss | \- | N +hideDisabledTime | Boolean | true | \- | 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 +rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-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 +steps | Array | [1, 1, 1] | Typescript：`Array` | N +value | Array | - | `v-model` is supported。Typescript：`TimeRangeValue` `type TimeRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N +defaultValue | Array | - | uncontrolled property。Typescript：`TimeRangeValue` `type TimeRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N +onBlur | Function | | TS 类型：`(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' | 'end'`
| N +onChange | Function | | TS 类型：`(value: TimeRangeValue) => void`
| N +onFocus | Function | | TS 类型：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' | 'end'`
| N +onInput | Function | | TS 类型：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' | 'end'`
| N + +### TimeRangePicker Events + +name | params | description +-- | -- | -- +blur | `(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) ` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' | 'end'`
+change | `(value: TimeRangeValue)` | \- +focus | `(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) ` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' | 'end'`
+input | `(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) ` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' | 'end'`
diff --git a/examples/tooltip/tooltip.en-US.md b/examples/tooltip/tooltip.en-US.md new file mode 100644 index 000000000..807a135a3 --- /dev/null +++ b/examples/tooltip/tooltip.en-US.md @@ -0,0 +1,15 @@ +:: BASE_DOC :: + +## API + +### Tooltip Props + +name | type | default | description | required +-- | -- | -- | -- | -- +delay | Number | - | \- | 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 +showArrow | Boolean | true | \- | N +theme | String | default | options：default/primary/success/danger/warning/light | N +`Omit` | \- | - | \- | N diff --git a/examples/transfer/transfer.en-US.md b/examples/transfer/transfer.en-US.md new file mode 100644 index 000000000..bd07d0955 --- /dev/null +++ b/examples/transfer/transfer.en-US.md @@ -0,0 +1,42 @@ +:: 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 | false | 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 | - | 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 +showCheckAll | Boolean / Array | true | Typescript：`boolean | Array` | N +targetSort | String | original | options：original/push/unshift | N +title | Array / Slot / Function | [] | Typescript：`Array | TNode<{ type: TransferListType }>` `type TitleType = string | TNode` `type TransferListType = 'source' | 'target'`。[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 +transferItem | Slot / Function | - | Typescript：`TNode>` `interface TransferItem { data: T; index: number; type: TransferListType}`。[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 +tree | Slot / Function | 传入 Tree 组件定义树形结构 | Typescript：`(tree: TreeProps) => TNode`，[Tree API Documents](./tree?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/transfer/type.ts) | N +value | Array | [] | `v-model` is supported。Typescript：`Array` | N +defaultValue | Array | [] | uncontrolled property。Typescript：`Array` | N +onChange | Function | | TS 类型：`(targetValue: Array, context: TargetParams) => void`
Typescript：`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)。
`interface TargetParams { type: TransferListType; movedValue: Array }`
| N +onCheckedChange | Function | | TS 类型：`(options: CheckedOptions) => void`
Typescript：`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)。
`interface CheckedOptions { checked: Array; sourceChecked: Array; targetChecked: Array; type: TransferListType }`
| N +onPageChange | Function | | TS 类型：`(page: PageInfo, context: { type: TransferListType }) => void`
| N +onScroll | Function | | TS 类型：`(options: { e: Event; bottomDistance: number; type: TransferListType }) => void`
Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +onSearch | Function | | TS 类型：`(options: SearchContext) => void`
Typescript：`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)。
`interface SearchContext { query: string; type: TransferListType; trigger: 'input' | 'enter'; e: InputEvent | KeyboardEvent }`
| N + +### Transfer Events + +name | params | description +-- | -- | -- +change | `(targetValue: Array, context: TargetParams)` | Typescript：`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)。
`interface TargetParams { type: TransferListType; movedValue: Array }`
+checked-change | `(options: CheckedOptions)` | Typescript：`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)。
`interface CheckedOptions { checked: Array; sourceChecked: Array; targetChecked: Array; type: TransferListType }`
+page-change | `(page: PageInfo, context: { type: TransferListType })` | \- +scroll | `(options: { e: Event; bottomDistance: number; type: TransferListType })` | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) +search | `(options: SearchContext)` | Typescript：`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)。
`interface SearchContext { query: string; type: TransferListType; trigger: 'input' | 'enter'; e: InputEvent | KeyboardEvent }`
diff --git a/examples/tree-select/tree-select.en-US.md b/examples/tree-select/tree-select.en-US.md new file mode 100644 index 000000000..69d7be354 --- /dev/null +++ b/examples/tree-select/tree-select.en-US.md @@ -0,0 +1,59 @@ +:: BASE_DOC :: + +## API + +### TreeSelect Props + +name | type | default | description | required +-- | -- | -- | -- | -- +autoWidth | Boolean | false | \- | N +borderless | Boolean | false | \- | N +clearable | Boolean | false | \- | N +collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +data | Array | [] | Typescript：`Array` | N +disabled | Boolean | false | \- | N +empty | String / Slot / Function | '' | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +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 +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 +max | Number | 0 | \- | N +minCollapsedNum | Number | 0 | \- | N +multiple | Boolean | false | \- | 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/tree-select/type.ts) | N +popupVisible | Boolean | undefined | \- | 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 +selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +size | String | medium | options：small/medium/large | N +tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +treeProps | Object | - | Typescript：`TreeProps`，[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +value | String / Number / Object / Array | - | `v-model` is supported。Typescript：`TreeSelectValue` `type TreeSelectValue = string | number | object | Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript：`TreeSelectValue` `type TreeSelectValue = string | number | object | Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +valueDisplay | Slot / Function | - | Typescript：`string | TNode<{ value: TreeSelectValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +valueType | String | value | options：value/object | N +onBlur | Function | | TS 类型：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N +onChange | Function | | TS 类型：`(value: TreeSelectValue, context: { node: TreeNodeModel; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent | KeyboardEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`type TreeSelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'`
| N +onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
| N +onFocus | Function | | TS 类型：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N +onInputChange | Function | | TS 类型：`(value: InputValue, context?: SelectInputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
| N +onPopupVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
| N +onRemove | Function | | TS 类型：`(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`interface RemoveOptions { value: string | number | object; data: T; e?: MouseEvent }`
| N +onSearch | Function | | TS 类型：`(filterWords: string) => void`
| N + +### TreeSelect Events + +name | params | description +-- | -- | -- +blur | `(context: { value: TreeSelectValue; e: FocusEvent })` | \- +change | `(value: TreeSelectValue, context: { node: TreeNodeModel; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent | KeyboardEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`type TreeSelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'`
+clear | `(context: { e: MouseEvent })` | \- +focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | \- +input-change | `(value: InputValue, context?: SelectInputValueChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-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/tree-select/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
+remove | `(options: RemoveOptions)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`interface RemoveOptions { value: string | number | object; data: T; e?: MouseEvent }`
+search | `(filterWords: string)` | \- diff --git a/examples/tree/tree.en-US.md b/examples/tree/tree.en-US.md new file mode 100644 index 000000000..e9640efc9 --- /dev/null +++ b/examples/tree/tree.en-US.md @@ -0,0 +1,120 @@ +:: BASE_DOC :: + +## API + +### Tree Props + +name | type | default | description | required +-- | -- | -- | -- | -- +activable | Boolean | false | \- | N +actived | Array | - | `.sync` is supported。Typescript：`Array` | N +defaultActived | Array | - | uncontrolled property。Typescript：`Array` | N +activeMultiple | Boolean | false | \- | N +allowFoldNodeOnFilter | Boolean | false | \- | N +checkable | Boolean | false | \- | N +checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree/type.ts) | N +checkStrictly | Boolean | false | \- | N +data | Array | [] | Typescript：`Array` | N +disableCheck | Boolean / Function | false | Typescript：`boolean | ((node: TreeNodeModel) => boolean)` | N +disabled | Boolean | - | \- | N +empty | String / Slot / Function | '' | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +expandAll | Boolean | false | \- | N +expanded | Array | [] | `.sync` is supported。Typescript：`Array` | N +defaultExpanded | Array | [] | uncontrolled property。Typescript：`Array` | N +expandLevel | Number | 0 | \- | N +expandMutex | Boolean | false | \- | N +expandOnClickNode | Boolean | false | \- | N +expandParent | Boolean | false | \- | N +filter | Function | - | Typescript：`(node: TreeNodeModel) => boolean` | N +hover | Boolean | - | \- | N +icon | Boolean / Slot / Function | true | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +keys | Object | - | Typescript：`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: 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/tree/type.ts) | N +label | 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 +lazy | Boolean | true | \- | N +line | Boolean / Slot / Function | false | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +load | Function | - | Typescript：`(node: TreeNodeModel) => Promise>` | N +operations | Slot / Function | - | Typescript：`TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +transition | Boolean | true | \- | N +value | Array | [] | `v-model` is supported。Typescript：`Array` `type TreeNodeValue = string | number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree/type.ts) | N +defaultValue | Array | [] | uncontrolled property。Typescript：`Array` `type TreeNodeValue = string | number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree/type.ts) | N +valueMode | String | onlyLeaf | options：onlyLeaf/parentFirst/all | N +onActive | Function | | TS 类型：`(value: Array, context: { node: TreeNodeModel }) => void`
| N +onChange | Function | | TS 类型：`(value: Array, context: { node: TreeNodeModel }) => void`
| N +onClick | Function | | TS 类型：`(context: { node: TreeNodeModel; e: MouseEvent }) => void`
| N +onExpand | Function | | TS 类型：`(value: Array, context: { node: TreeNodeModel; e: MouseEvent }) => void`
| N +onLoad | Function | | TS 类型：`(context: { node: TreeNodeModel }) => void`
| N + +### Tree Events + +name | params | description +-- | -- | -- +active | `(value: Array, context: { node: TreeNodeModel })` | \- +change | `(value: Array, context: { node: TreeNodeModel })` | \- +click | `(context: { node: TreeNodeModel; e: MouseEvent })` | \- +expand | `(value: Array, context: { node: TreeNodeModel; e: MouseEvent })` | \- +load | `(context: { node: TreeNodeModel })` | \- + +### TreeInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +appendTo | `(value: TreeNodeValue, newData: T | Array)` | \- | \- +getIndex | `(value: TreeNodeValue)` | `number` | \- +getItem | `(value: TreeNodeValue)` | `TreeNodeModel` | \- +getItems | `(value?: TreeNodeValue)` | `Array>` | \- +getParent | `(value: TreeNodeValue)` | `TreeNodeModel` | \- +getParents | `(value: TreeNodeValue)` | `TreeNodeModel[]` | \- +getPath | `(value: TreeNodeValue)` | `TreeNodeModel[]` | \- +insertAfter | `(value: TreeNodeValue, newData: T)` | \- | \- +insertBefore | `(value: TreeNodeValue, newData: T)` | \- | \- +remove | `(value: TreeNodeValue)` | \- | \- +setItem | `(value: TreeNodeValue, options: TreeNodeState)` | \- | \- + +### TreeNodeState + +name | type | default | description | required +-- | -- | -- | -- | -- +activable | Boolean | false | \- | N +actived | Boolean | false | \- | N +checkable | Boolean | false | \- | N +checked | Boolean | false | \- | N +disabled | Boolean | false | \- | N +expanded | Boolean | false | \- | N +expandMutex | Boolean | false | \- | N +indeterminate | Boolean | false | \- | N +label | String | - | \- | N +loading | Boolean | false | \- | N +value | String / Number | - | \- | N +visible | Boolean | false | \- | N + +### TreeNodeModel + +name | type | default | description | required +-- | -- | -- | -- | -- +actived | Boolean | - | required | Y +checked | Boolean | - | required | Y +data | Object | - | required。Typescript：`T` | Y +expanded | Boolean | - | required | Y +indeterminate | Boolean | - | required | Y +loading | Boolean | - | required | Y +`TreeNodeState` | \- | - | \- | N +### TreeNodeModel + +name | params | return | description +-- | -- | -- | -- +appendData | `(data: T | Array)` | \- | required +getChildren | `(deep: boolean)` | `Array | boolean` | required +getIndex | \- | `number` | required +getLevel | \- | `number` | required +getParent | \- | `TreeNodeModel` | required +getParents | \- | `Array` | required +getPath | \- | `Array` | required +getRoot | \- | `TreeNodeModel` | required +getSiblings | \- | `Array` | required +insertAfter | `(newData: T)` | \- | required +insertBefore | `(newData: T)` | \- | required +isFirst | \- | `boolean` | required +isLast | \- | `boolean` | required +isLeaf | \- | `boolean` | required +remove | `(value?: TreeNodeValue)` | \- | required +setData | `(data: T)` | \- | required diff --git a/examples/upload/upload.en-US.md b/examples/upload/upload.en-US.md new file mode 100644 index 000000000..f21f63f61 --- /dev/null +++ b/examples/upload/upload.en-US.md @@ -0,0 +1,79 @@ +:: BASE_DOC :: + +## API + +### Upload Props + +name | type | default | description | required +-- | -- | -- | -- | -- +accept | String | - | \- | N +action | String | - | \- | N +allowUploadDuplicateFile | Boolean | false | \- | N +autoUpload | Boolean | true | \- | N +beforeUpload | Function | - | Typescript：`(file: File | UploadFile) => boolean | Promise` | N +data | Object | - | Typescript：`Record | ((file: File) => Record)` | 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 +draggable | Boolean | false | \- | N +fileListDisplay | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +files | Array | - | `v-model` is supported。Typescript：`Array` | N +defaultFiles | Array | - | uncontrolled property。Typescript：`Array` | N +format | Function | - | Typescript：`(file: File) => UploadFile` | N +formatResponse | Function | - | Typescript：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string } & Record` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N +headers | Object | - | Typescript：`{[key: string]: string}` | N +isBatchUpload | Boolean | false | \- | N +max | Number | 0 | \- | N +method | String | POST | options：POST/GET/PUT/OPTION/PATCH/post/get/put/option/patch | N +multiple | Boolean | false | \- | N +name | String | file | \- | N +placeholder | String | - | \- | N +requestMethod | Function | - | Typescript：`(files: UploadFile | UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' | 'fail'; error?: string; response: { url?: string; [key: string]: any } }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N +showUploadProgress | Boolean | true | \- | N +sizeLimit | Number / Object | - | Typescript：`number | SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N +theme | String | file | options：custom/file/file-input/file-flow/image/image-flow | N +tips | String | - | \- | N +trigger | String / Slot / Function | - | Typescript：`string | TNode` `interface TriggerContext { dragActive?: boolean; uploadingFile?: UploadFile | Array }`。[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/upload/type.ts) | N +uploadAllFilesInOneRequest | Boolean | false | \- | N +useMockProgress | Boolean | true | \- | N +withCredentials | Boolean | false | \- | N +onCancelUpload | Function | | TS 类型：`() => void`
| N +onChange | Function | | TS 类型：`(value: Array, context: UploadChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。
`interface UploadChangeContext { e?: MouseEvent | ProgressEvent; response?: any; trigger: string; index?: number; file?: UploadFile }`
| N +onDragenter | Function | | TS 类型：`(context: { e: DragEvent }) => void`
| N +onDragleave | Function | | TS 类型：`(context: { e: DragEvent }) => void`
| N +onDrop | Function | | TS 类型：`(context: { e: DragEvent }) => void`
| N +onFail | Function | | TS 类型：`(options: { e: ProgressEvent; file: UploadFile }) => void`
| N +onPreview | Function | | TS 类型：`(options: { file: UploadFile; e: MouseEvent }) => void`
| N +onProgress | Function | | TS 类型：`(options: ProgressContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file: UploadFile; percent: number; type: UploadProgressType }`

`type UploadProgressType = 'real' | 'mock'`
| N +onRemove | Function | | TS 类型：`(context: UploadRemoveContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。
`interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }`
| N +onSelectChange | Function | | TS 类型：`(files: Array) => void`
| N +onSuccess | Function | | TS 类型：`(context: SuccessContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。
`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; response: any }`
| N + +### Upload Events + +name | params | description +-- | -- | -- +cancel-upload | \- | \- +change | `(value: Array, context: UploadChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。
`interface UploadChangeContext { e?: MouseEvent | ProgressEvent; response?: any; trigger: string; index?: number; file?: UploadFile }`
+dragenter | `(context: { e: DragEvent })` | \- +dragleave | `(context: { e: DragEvent })` | \- +drop | `(context: { e: DragEvent })` | \- +fail | `(options: { e: ProgressEvent; file: UploadFile })` | \- +preview | `(options: { file: UploadFile; e: MouseEvent })` | \- +progress | `(options: ProgressContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file: UploadFile; percent: number; type: UploadProgressType }`

`type UploadProgressType = 'real' | 'mock'`
+remove | `(context: UploadRemoveContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。
`interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }`
+select-change | `(files: Array)` | \- +success | `(context: SuccessContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。
`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; response: any }`
+ +### UploadFile + +name | type | default | description | required +-- | -- | -- | -- | -- +lastModified | Number | - | \- | N +name | String | - | \- | N +percent | Number | - | \- | N +raw | Object | - | Typescript：`File` | N +response | Object | - | \- | N +size | Number | - | \- | N +status | String | - | Typescript：` 'success' | 'fail' | 'progress' | 'waiting'` | N +type | String | - | \- | N +url | String | - | required | Y diff --git a/examples/watermark/watermark.en-US.md b/examples/watermark/watermark.en-US.md new file mode 100644 index 000000000..921003839 --- /dev/null +++ b/examples/watermark/watermark.en-US.md @@ -0,0 +1,40 @@ +:: BASE_DOC :: + +## API + +### Watermark Props + +name | type | default | description | required +-- | -- | -- | -- | -- +alpha | Number | 1 | \- | 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 +height | Number | - | \- | N +isRepeat | Boolean | true | \- | N +lineSpace | Number | 16 | \- | N +movable | Boolean | false | \- | N +moveInterval | Number | 3000 | \- | N +offset | Array | - | Typescript：`Array` | N +removable | Boolean | true | \- | N +rotate | Number | -22 | \- | N +watermarkContent | Object / Array | - | Typescript：`WatermarkText|WatermarkImage|Array` | N +width | Number | - | \- | N +x | Number | - | \- | N +y | Number | - | \- | N +zIndex | Number | - | \- | N + +### WatermarkText + +name | type | default | description | required +-- | -- | -- | -- | -- +fontColor | String | rgba(0,0,0,0.1) | \- | N +fontSize | Number | 16 | \- | N +fontWeight | String | normal | options：normal/lighter/bold/bolder | N +text | String | - | \- | N + +### WatermarkImage + +name | type | default | description | required +-- | -- | -- | -- | -- +isGrayscale | Boolean | false | \- | N +url | String | - | \- | N diff --git a/package.json b/package.json index ae4b18790..d40e40cab 100644 --- a/package.json +++ b/package.json @@ -166,7 +166,7 @@ "tdesign-publish-cli": "^0.0.9", "tdesign-site-components": "^0.9.11", "ts-jest": "^27.1.2", - "typescript": "^4.5.4", + "typescript": "~4.5.4", "unplugin-vue2-script-setup": "^0.10.2", "vite": "^2.7.6", "vite-plugin-pwa": "^0.11.11", diff --git a/site/plugin-tdoc/demo.js b/site/plugin-tdoc/demo.js index 269aaf7df..476392424 100644 --- a/site/plugin-tdoc/demo.js +++ b/site/plugin-tdoc/demo.js @@ -4,11 +4,11 @@ import path from 'path'; export default function renderDemo(md, container) { md.use(container, 'demo', { validate(params) { - return params.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?(\s+--dev)?$/); + return params.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?$/); }, render(tokens, idx) { if (tokens[idx].nesting === 1) { - const match = tokens[idx].info.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?(\s+--dev)?$/); + const match = tokens[idx].info.trim().match(/^demo\s+([\\/.\w-\.]+)(\s+(.+?))?$/); const [, demoPath, componentName = ''] = match; const demoPathOnlyLetters = demoPath.replace(/[^a-zA-Z\d]/g, ''); const demoName = path.basename(demoPath); diff --git a/site/plugin-tdoc/md-to-vue.js b/site/plugin-tdoc/md-to-vue.js index 6e6d18291..3d0d2cdae 100644 --- a/site/plugin-tdoc/md-to-vue.js +++ b/site/plugin-tdoc/md-to-vue.js @@ -145,7 +145,7 @@ function customRender({ source, file, md }) { }; // md filename - const reg = file.match(/examples\/(\w+-?\w+)\/(\w+-?\w+)\.md/); + const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/); const componentName = reg && reg[1]; // split md @@ -164,7 +164,6 @@ function customRender({ source, file, md }) { designMd: '', }; - // 渲染 live demo if (pageData.usage && pageData.isComponent) { const usageObj = compileUsage({ diff --git a/site/plugin-tdoc/transforms.js b/site/plugin-tdoc/transforms.js index fa7ff8930..7c4c73d8c 100644 --- a/site/plugin-tdoc/transforms.js +++ b/site/plugin-tdoc/transforms.js @@ -10,31 +10,44 @@ let demoCodesImports = {}; export default { before({ source, file }) { const resourceDir = path.dirname(file); - const reg = file.match(/examples\/(\w+-?\w+)\/(\w+-?\w+)\.md/); - const name = reg && reg[1]; + const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/); + const fileName = reg && reg[0]; + const componentName = reg && reg[1]; + const localeName = reg && reg[2]; demoImports = {}; demoCodesImports = {}; // 统一换成 common 公共文档内容 - if (name && source.includes(':: BASE_DOC ::')) { - const docPath = path.resolve(__dirname, `../../src/_common/docs/web/api/${name}.md`); - if (fs.existsSync(docPath)) { - const baseDoc = fs.readFileSync(docPath, 'utf-8'); - source = source.replace(':: BASE_DOC ::', baseDoc); + if (fileName && source.includes(':: BASE_DOC ::')) { + const localeDocPath = path.resolve(__dirname, `../../src/_common/docs/web/api/${fileName}`); + const defaultDocPath = path.resolve(__dirname, `../../src/_common/docs/web/api/${componentName}.md`); + let baseDoc = ''; + if (fs.existsSync(localeDocPath)) { + // 优先载入语言版本 + baseDoc = fs.readFileSync(localeDocPath, 'utf-8'); + } else if (fs.existsSync(defaultDocPath)) { + // 回退中文默认版本 + baseDoc = fs.readFileSync(defaultDocPath, 'utf-8'); } else { - console.error(`未找到 ${docPath} 文件`); + console.error(`未找到 ${defaultDocPath} 文件`); } + source = source.replace(':: BASE_DOC ::', baseDoc); } // 替换成对应 demo 文件 source = source.replace(/\{\{\s+(.+)\s+\}\}/g, (demoStr, demoFileName) => { - const demoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`); - if (!fs.existsSync(demoPath)) { - console.log('\x1B[36m%s\x1B[0m', `${name} 组件需要实现 demos/${demoFileName}.vue 示例!`); + const defaultDemoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`); + const localeDemoPath = path.resolve(resourceDir, `./demos/${demoFileName}.${localeName}.vue`); + // localeDemo 优先级最高 + if (fs.existsSync(localeDemoPath)) + return `\n::: demo demos/${demoFileName}.${localeName} ${componentName}\n:::\n`; + + if (!fs.existsSync(defaultDemoPath)) { + console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 demos/${demoFileName}.vue 示例!`); return '\n

DEMO (🚧建设中）...

'; } - return `\n::: demo demos/${demoFileName} ${name}\n:::\n`; + return `\n::: demo demos/${demoFileName} ${componentName}\n:::\n`; }); source.replace(/:::\s*demo\s+([\\/.\w-]+)/g, (demoStr, relativeDemoPath) => { @@ -65,7 +78,7 @@ export default { demoDefsStr, demoCodesDefsStr, demoInstallStr, - demoCodeInstallStr + demoCodeInstallStr, }); return sfc; diff --git a/site/site.config.mjs b/site/site.config.mjs index 991f081b5..ce25f1d21 100644 --- a/site/site.config.mjs +++ b/site/site.config.mjs @@ -1,411 +1,546 @@ /* eslint-disable */ -export default { - docs: [ - { - title: '开始', - type: 'doc', // 普通文档 - children: [ - { - title: '快速开始', - name: 'getting-started', - path: '/vue/getting-started', - component: () => import('@/site/docs/getting-started.md'), - }, - { - title: '最佳实践', - name: 'quick-start', - path: '/vue/quick-start', - component: () => import('@/site/docs/starter.md'), - }, - { - title: '更新日志', - name: 'changelog', - path: '/vue/changelog', - component: () => import('@/CHANGELOG.md'), - }, - { - title: '组件概览', - name: 'overview', - path: '/vue/overview', - component: () => import('@common/docs/web/overview.md'), - }, - ], - }, - { - title: '全局配置', - name: 'configs', - children: [ - { - title: '全局特性配置', - name: 'config', - path: '/vue/config', - component: () => import('@/examples/config-provider/config-provider.md'), - }, - { - title: '自定义主题', - name: 'custom-theme', - path: '/vue/custom-theme', - component: () => import('@common/theme.md'), - }, - { - title: '暗黑模式', - name: 'dark-mode', - path: '/vue/dark-mode', - component: () => import('@common/dark-mode.md'), - }, - ], - }, - { - title: '基础', - type: 'component', // 组件文档 - children: [ - { - title: 'Button 按钮', - name: 'button', - path: '/vue/components/button', - component: () => import('@/examples/button/button.md'), - }, - { - title: 'Divider 分割线', - name: 'divider', - path: '/vue/components/divider', - component: () => import('@/examples/divider/divider.md'), - }, - { - title: 'Icon 图标', - name: 'icon', - path: '/vue/components/icon', - component: () => import('@/examples/icon/icon.md'), - }, - ], - }, - { - title: '布局', - type: 'component', - children: [ - { - title: 'Grid 栅格', - name: 'grid', - path: '/vue/components/grid', - component: () => import('@/examples/grid/grid.md'), - }, - { - title: 'Layout 布局', - name: 'layout', - path: '/vue/components/layout', - component: () => import('@/examples/layout/layout.md'), - }, - ], - }, - { - title: '导航', - type: 'component', - children: [ - { - title: 'Affix 固钉', - name: 'affix', - path: '/vue/components/affix', - component: () => import('@/examples/affix/affix.md'), - }, - { - title: 'Anchor 锚点', - name: 'anchor', - path: '/vue/components/anchor', - component: () => import('@/examples/anchor/anchor.md'), - }, - { - title: 'Breadcrumb 面包屑', - name: 'breadcrumb', - path: '/vue/components/breadcrumb', - component: () => import('@/examples/breadcrumb/breadcrumb.md'), - }, - { - title: 'Dropdown 下拉菜单', - name: 'dropdown', - path: '/vue/components/dropdown', - component: () => import('@/examples/dropdown/dropdown.md'), - }, - { - title: 'Menu 导航菜单', - name: 'menu', - path: '/vue/components/menu', - component: () => import('@/examples/menu/menu.md'), - }, - { - title: 'Pagination 分页', - name: 'pagination', - path: '/vue/components/pagination', - component: () => import('@/examples/pagination/pagination.md'), - }, - { - title: 'Steps 步骤条', - name: 'steps', - path: '/vue/components/steps', - component: () => import('@/examples/steps/steps.md'), - }, - { - title: 'Tabs 选项卡', - name: 'tabs', - path: '/vue/components/tabs', - component: () => import('@/examples/tabs/tabs.md'), - }, - ], - }, - { - title: '输入', - type: 'component', // 组件文档 - children: [ - { - title: 'Cascader 级联组件', - name: 'cascader', - path: '/vue/components/cascader', - component: () => import('@/examples/cascader/cascader.md'), - }, - { - title: 'Checkbox 多选框', - name: 'checkbox', - path: '/vue/components/checkbox', - component: () => import('@/examples/checkbox/checkbox.md'), - }, - { - title: 'DatePicker 日期选择器', - name: 'date-picker', - path: '/vue/components/date-picker', - component: () => import('@/examples/date-picker/date-picker.md'), - }, - { - title: 'Form 表单', - name: 'form', - path: '/vue/components/form', - component: () => import('@/examples/form/form.md'), - }, - { - title: 'Input 输入框', - name: 'input', - path: '/vue/components/input', - component: () => import('@/examples/input/input.md'), - }, - { - title: 'InputNumber 数字输入框', - name: 'input-number', - path: '/vue/components/input-number', - component: () => import('@/examples/input-number/input-number.md'), - }, - { - title: 'TagInput 标签输入框', - name: 'tag-input', - docType: 'form', - path: '/vue/components/tag-input', - component: () => import('@/examples/tag-input/tag-input.md'), - }, - { - title: 'Radio 单选框', - name: 'radio', - path: '/vue/components/radio', - component: () => import('@/examples/radio/radio.md'), - }, - { - title: 'Select 选择器', - name: 'select', - path: '/vue/components/select', - component: () => import('@/examples/select/select.md'), - }, - { - title: 'SelectInput 筛选器输入框', - name: 'select-input', - docType: 'form', - path: '/vue/components/select-input', - component: () => import('@/examples/select-input/select-input.md'), - }, - { - title: 'Slider 滑块', - name: 'slider', - path: '/vue/components/slider', - component: () => import('@/examples/slider/slider.md'), - }, - { - title: 'Switch 开关', - name: 'switch', - path: '/vue/components/switch', - component: () => import('@/examples/switch/switch.md'), - }, - { - title: 'Textarea 多行文本框', - name: 'textarea', - path: '/vue/components/textarea', - component: () => import('@/examples/textarea/textarea.md'), - }, - { - title: 'Transfer 穿梭框', - name: 'transfer', - path: '/vue/components/transfer', - component: () => import('@/examples/transfer/transfer.md'), - }, - { - title: 'TimePicker 时间选择器', - name: 'time-picker', - path: '/vue/components/time-picker', - component: () => import('@/examples/time-picker/time-picker.md'), - }, - { - title: 'TreeSelect 树选择', - name: 'tree-select', - path: '/vue/components/tree-select', - component: () => import('@/examples/tree-select/tree-select.md'), - }, - { - title: 'Upload 上传', - name: 'upload', - path: '/vue/components/upload', - component: () => import('@/examples/upload/upload.md'), - }, - ], - }, - { - title: '数据展示', - type: 'component', // 组件文档 - children: [ - { - title: 'Avatar 头像', - name: 'avatar', - path: '/vue/components/avatar', - component: () => import('@/examples/avatar/avatar.md'), - }, - { - title: 'Badge 徽标', - name: 'badge', - path: '/vue/components/badge', - component: () => import('@/examples/badge/badge.md'), - }, - { - title: 'Calendar 日历', - name: 'calendar', - path: '/vue/components/calendar', - component: () => import('@/examples/calendar/calendar.md'), - }, - { - title: 'Card 卡片', - name: 'card', - docType: 'data', - path: '/vue/components/card', - component: () => import('@/examples/card/card.md'), - }, - { - title: 'Collapse 折叠面板', - name: 'collapse', - docType: 'data', - path: '/vue/components/collapse', - component: () => import('@/examples/collapse/collapse.md') - }, - { - title: 'Comment 评论', - name: 'comment', - path: '/vue/components/comment', - component: () => import('@/examples/comment/comment.md'), - }, - { - title: 'List 列表', - name: 'list', - path: '/vue/components/list', - component: () => import('@/examples/list/list.md'), - }, - { - title: 'Loading 加载', - name: 'loading', - path: '/vue/components/loading', - component: () => import('@/examples/loading/loading.md'), - }, - { - title: 'Progress 进度条', - name: 'progress', - path: '/vue/components/progress', - component: () => import('@/examples/progress/progress.md'), - }, - { - title: 'Skeleton 骨架屏', - name: 'skeleton', - path: '/vue/components/skeleton', - component: () => import('@/examples/skeleton/skeleton.md'), - }, - { - title: 'Swiper 轮播框', - name: 'swiper', - path: '/vue/components/swiper', - component: () => import('@/examples/swiper/swiper.md'), - }, - { - title: 'Table 表格', - name: 'table', - path: '/vue/components/table', - component: () => import('@/examples/table/table.md'), - }, - { - title: 'Tag 标签', - name: 'tag', - path: '/vue/components/tag', - component: () => import('@/examples/tag/tag.md'), - }, - { - title: 'Tooltip 文字提示', - name: 'tooltip', - path: '/vue/components/tooltip', - component: () => import('@/examples/tooltip/tooltip.md'), - }, - { - title: 'Tree 树', - name: 'tree', - path: '/vue/components/tree', - component: () => import('@/examples/tree/tree.md'), - }, - ], - }, - { - title: '消息提醒', - type: 'component', // 组件文档 - children: [ - { - title: 'Alert 警告提醒', - name: 'alert', - path: '/vue/components/alert', - component: () => import('@/examples/alert/alert.md'), - }, - { - title: 'Dialog 对话框', - name: 'dialog', - path: '/vue/components/dialog', - component: () => import('@/examples/dialog/dialog.md'), - }, - { - title: 'Drawer 抽屉', - name: 'drawer', - path: '/vue/components/drawer', - component: () => import('@/examples/drawer/drawer.md'), - }, - { - title: 'Message 全局提示', - name: 'message', - path: '/vue/components/message', - component: () => import('@/examples/message/message.md'), - }, - { - title: 'Notification 消息通知', - name: 'notification', - path: '/vue/components/notification', - component: () => import('@/examples/notification/notification.md'), - }, - { - title: 'Popconfirm 气泡确认框', - name: 'popconfirm', - path: '/vue/components/popconfirm', - component: () => import('@/examples/popconfirm/popconfirm.md'), - }, - { - title: 'Popup 弹出层', - name: 'popup', - path: '/vue/components/popup', - component: () => import('@/examples/popup/popup.md'), - }, - ], - }, - ], -}; +const docs = [ + { + title: '开始', + titleEn: 'Start', + type: 'doc', // 普通文档 + children: [ + { + title: '快速开始', + titleEn: 'Quick Start', + name: 'getting-started', + path: '/vue/getting-started', + component: () => import('@/site/docs/getting-started.md'), + }, + { + title: '最佳实践', + titleEn: 'Best Practice', + name: 'quick-start', + path: '/vue/quick-start', + component: () => import('@/site/docs/starter.md'), + }, + { + title: '更新日志', + titleEn: 'CHANGELOG', + name: 'changelog', + path: '/vue/changelog', + component: () => import('@/CHANGELOG.md'), + }, + { + title: '组件概览', + titleEn: 'Component overview', + name: 'overview', + path: '/vue/overview', + component: () => import('@common/docs/web/overview.md'), + }, + ], + }, + { + title: '全局配置', + titleEn: 'Global Config', + type: 'doc', + children: [ + { + title: '全局特性配置', + titleEn: 'Config', + name: 'config', + path: '/vue/config', + component: () => import('@/examples/config-provider/config-provider.md'), + }, + { + title: '自定义主题', + titleEn: 'Custom theme', + name: 'custom-theme', + path: '/vue/custom-theme', + component: () => import('@common/theme.md'), + }, + { + title: '暗黑模式', + titleEn: 'Dark Mode', + name: 'dark-mode', + path: '/vue/dark-mode', + component: () => import('@common/dark-mode.md'), + }, + ], + }, + { + title: '基础', + titleEn: 'Base', + type: 'component', // 组件文档 + children: [ + { + title: 'Button 按钮', + titleEn: 'Button', + name: 'button', + path: '/vue/components/button', + component: () => import('@/examples/button/button.md'), + componentEn: () => import('@/examples/button/button.en-US.md'), + }, + { + title: 'Divider 分割线', + titleEn: 'Divider', + name: 'divider', + path: '/vue/components/divider', + component: () => import('@/examples/divider/divider.md'), + componentEn: () => import('@/examples/divider/divider.en-US.md'), + }, + { + title: 'Icon 图标', + titleEn: 'Icon', + name: 'icon', + path: '/vue/components/icon', + component: () => import('@/examples/icon/icon.md'), + componentEn: () => import('@/examples/icon/icon.en-US.md'), + }, + ], + }, + { + title: '布局', + titleEn: 'Layout', + type: 'component', + children: [ + { + title: 'Grid 栅格', + titleEn: 'Grid', + name: 'grid', + path: '/vue/components/grid', + component: () => import('@/examples/grid/grid.md'), + componentEn: () => import('@/examples/grid/grid.en-US.md'), + }, + { + title: 'Layout 布局', + titleEn: 'Layout', + name: 'layout', + path: '/vue/components/layout', + component: () => import('@/examples/layout/layout.md'), + componentEn: () => import('@/examples/layout/layout.en-US.md'), + }, + ], + }, + { + title: '导航', + titleEn: 'Navigation', + type: 'component', + children: [ + { + title: 'Affix 固钉', + titleEn: 'Affix', + name: 'affix', + path: '/vue/components/affix', + component: () => import('@/examples/affix/affix.md'), + componentEn: () => import('@/examples/affix/affix.en-US.md'), + }, + { + title: 'Anchor 锚点', + titleEn: 'Anchor', + name: 'anchor', + path: '/vue/components/anchor', + component: () => import('@/examples/anchor/anchor.md'), + componentEn: () => import('@/examples/anchor/anchor.en-US.md'), + }, + { + title: 'Breadcrumb 面包屑', + titleEn: 'Breadcrumb', + name: 'breadcrumb', + path: '/vue/components/breadcrumb', + component: () => import('@/examples/breadcrumb/breadcrumb.md'), + componentEn: () => import('@/examples/breadcrumb/breadcrumb.en-US.md'), + }, + { + title: 'Dropdown 下拉菜单', + titleEn: 'Dropdown', + name: 'dropdown', + path: '/vue/components/dropdown', + component: () => import('@/examples/dropdown/dropdown.md'), + componentEn: () => import('@/examples/dropdown/dropdown.en-US.md'), + }, + { + title: 'Menu 导航菜单', + titleEn: 'Menu', + name: 'menu', + path: '/vue/components/menu', + component: () => import('@/examples/menu/menu.md'), + componentEn: () => import('@/examples/menu/menu.en-US.md'), + }, + { + title: 'Pagination 分页', + titleEn: 'Pagination', + name: 'pagination', + path: '/vue/components/pagination', + component: () => import('@/examples/pagination/pagination.md'), + componentEn: () => import('@/examples/pagination/pagination.en-US.md'), + }, + { + title: 'Steps 步骤条', + titleEn: 'Steps', + name: 'steps', + path: '/vue/components/steps', + component: () => import('@/examples/steps/steps.md'), + componentEn: () => import('@/examples/steps/steps.en-US.md'), + }, + { + title: 'Tabs 选项卡', + titleEn: 'Tabs', + name: 'tabs', + path: '/vue/components/tabs', + component: () => import('@/examples/tabs/tabs.md'), + componentEn: () => import('@/examples/tabs/tabs.en-US.md'), + }, + ], + }, + { + title: '输入', + titleEn: 'Input', + type: 'component', // 组件文档 + children: [ + { + title: 'Cascader 级联组件', + titleEn: 'Cascader', + name: 'cascader', + path: '/vue/components/cascader', + component: () => import('@/examples/cascader/cascader.md'), + componentEn: () => import('@/examples/cascader/cascader.en-US.md'), + }, + { + title: 'Checkbox 多选框', + titleEn: 'Checkbox', + name: 'checkbox', + path: '/vue/components/checkbox', + component: () => import('@/examples/checkbox/checkbox.md'), + componentEn: () => import('@/examples/checkbox/checkbox.en-US.md'), + }, + { + title: 'DatePicker 日期选择器', + titleEn: 'DatePicker', + name: 'date-picker', + path: '/vue/components/date-picker', + component: () => import('@/examples/date-picker/date-picker.md'), + componentEn: () => import('@/examples/date-picker/date-picker.en-US.md'), + }, + { + title: 'Form 表单', + titleEn: 'Form', + name: 'form', + path: '/vue/components/form', + component: () => import('@/examples/form/form.md'), + componentEn: () => import('@/examples/form/form.en-US.md'), + }, + { + title: 'Input 输入框', + titleEn: 'Input', + name: 'input', + path: '/vue/components/input', + component: () => import('@/examples/input/input.md'), + componentEn: () => import('@/examples/input/input.en-US.md'), + }, + { + title: 'InputNumber 数字输入框', + titleEn: 'InputNumber', + name: 'input-number', + path: '/vue/components/input-number', + component: () => import('@/examples/input-number/input-number.md'), + componentEn: () => import('@/examples/input-number/input-number.en-US.md'), + }, + { + title: 'TagInput 标签输入框', + titleEn: 'TagInput', + name: 'tag-input', + docType: 'form', + path: '/vue/components/tag-input', + component: () => import('@/examples/tag-input/tag-input.md'), + componentEn: () => import('@/examples/tag-input/tag-input.en-US.md'), + }, + { + title: 'Radio 单选框', + titleEn: 'Radio', + name: 'radio', + path: '/vue/components/radio', + component: () => import('@/examples/radio/radio.md'), + componentEn: () => import('@/examples/radio/radio.en-US.md'), + }, + { + title: 'Select 选择器', + titleEn: 'Select', + name: 'select', + path: '/vue/components/select', + component: () => import('@/examples/select/select.md'), + componentEn: () => import('@/examples/select/select.en-US.md'), + }, + { + title: 'SelectInput 筛选器输入框', + titleEn: 'SelectInput', + name: 'select-input', + docType: 'form', + path: '/vue/components/select-input', + component: () => import('@/examples/select-input/select-input.md'), + componentEn: () => import('@/examples/select-input/select-input.en-US.md'), + }, + { + title: 'Slider 滑块', + titleEn: 'Slider', + name: 'slider', + path: '/vue/components/slider', + component: () => import('@/examples/slider/slider.md'), + componentEn: () => import('@/examples/slider/slider.en-US.md'), + }, + { + title: 'Switch 开关', + titleEn: 'Switch', + name: 'switch', + path: '/vue/components/switch', + component: () => import('@/examples/switch/switch.md'), + componentEn: () => import('@/examples/switch/switch.en-US.md'), + }, + { + title: 'Textarea 多行文本框', + titleEn: 'Textarea', + name: 'textarea', + path: '/vue/components/textarea', + component: () => import('@/examples/textarea/textarea.md'), + componentEn: () => import('@/examples/textarea/textarea.en-US.md'), + }, + { + title: 'Transfer 穿梭框', + titleEn: 'Transfer', + name: 'transfer', + path: '/vue/components/transfer', + component: () => import('@/examples/transfer/transfer.md'), + componentEn: () => import('@/examples/transfer/transfer.en-US.md'), + }, + { + title: 'TimePicker 时间选择器', + titleEn: 'TimePicker', + name: 'time-picker', + path: '/vue/components/time-picker', + component: () => import('@/examples/time-picker/time-picker.md'), + componentEn: () => import('@/examples/time-picker/time-picker.en-US.md'), + }, + { + title: 'TreeSelect 树选择', + titleEn: 'TreeSelect', + name: 'tree-select', + path: '/vue/components/tree-select', + component: () => import('@/examples/tree-select/tree-select.md'), + componentEn: () => import('@/examples/tree-select/tree-select.en-US.md'), + }, + { + title: 'Upload 上传', + titleEn: 'Upload', + name: 'upload', + path: '/vue/components/upload', + component: () => import('@/examples/upload/upload.md'), + componentEn: () => import('@/examples/upload/upload.en-US.md'), + }, + ], + }, + { + title: '数据展示', + titleEn: 'Data Display', + type: 'component', // 组件文档 + children: [ + { + title: 'Avatar 头像', + titleEn: 'Avatar', + name: 'avatar', + path: '/vue/components/avatar', + component: () => import('@/examples/avatar/avatar.md'), + componentEn: () => import('@/examples/avatar/avatar.en-US.md'), + }, + { + title: 'Badge 徽标', + titleEn: 'Badge', + name: 'badge', + path: '/vue/components/badge', + component: () => import('@/examples/badge/badge.md'), + componentEn: () => import('@/examples/badge/badge.en-US.md'), + }, + { + title: 'Calendar 日历', + titleEn: 'Calendar', + name: 'calendar', + path: '/vue/components/calendar', + component: () => import('@/examples/calendar/calendar.md'), + componentEn: () => import('@/examples/calendar/calendar.en-US.md'), + }, + { + title: 'Card 卡片', + titleEn: 'Card', + name: 'card', + docType: 'data', + path: '/vue/components/card', + component: () => import('@/examples/card/card.md'), + componentEn: () => import('@/examples/card/card.en-US.md'), + }, + { + title: 'Collapse 折叠面板', + titleEn: 'Collapse', + name: 'collapse', + docType: 'data', + path: '/vue/components/collapse', + component: () => import('@/examples/collapse/collapse.md'), + componentEn: () => import('@/examples/collapse/collapse.en-US.md') + }, + { + title: 'Comment 评论', + titleEn: 'Comment', + name: 'comment', + path: '/vue/components/comment', + component: () => import('@/examples/comment/comment.md'), + componentEn: () => import('@/examples/comment/comment.en-US.md'), + }, + { + title: 'List 列表', + titleEn: 'List', + name: 'list', + path: '/vue/components/list', + component: () => import('@/examples/list/list.md'), + componentEn: () => import('@/examples/list/list.en-US.md'), + }, + { + title: 'Loading 加载', + titleEn: 'Loading', + name: 'loading', + path: '/vue/components/loading', + component: () => import('@/examples/loading/loading.md'), + componentEn: () => import('@/examples/loading/loading.en-US.md'), + }, + { + title: 'Progress 进度条', + titleEn: 'Progress', + name: 'progress', + path: '/vue/components/progress', + component: () => import('@/examples/progress/progress.md'), + componentEn: () => import('@/examples/progress/progress.en-US.md'), + }, + { + title: 'Skeleton 骨架屏', + titleEn: 'Skeleton', + name: 'skeleton', + path: '/vue/components/skeleton', + component: () => import('@/examples/skeleton/skeleton.md'), + componentEn: () => import('@/examples/skeleton/skeleton.en-US.md'), + }, + { + title: 'Swiper 轮播框', + titleEn: 'Swiper', + name: 'swiper', + path: '/vue/components/swiper', + component: () => import('@/examples/swiper/swiper.md'), + componentEn: () => import('@/examples/swiper/swiper.en-US.md'), + }, + { + title: 'Table 表格', + titleEn: 'Table', + name: 'table', + path: '/vue/components/table', + component: () => import('@/examples/table/table.md'), + componentEn: () => import('@/examples/table/table.en-US.md'), + }, + { + title: 'Tag 标签', + titleEn: 'Tag', + name: 'tag', + path: '/vue/components/tag', + component: () => import('@/examples/tag/tag.md'), + componentEn: () => import('@/examples/tag/tag.en-US.md'), + }, + { + title: 'Tooltip 文字提示', + titleEn: 'Tooltip', + name: 'tooltip', + path: '/vue/components/tooltip', + component: () => import('@/examples/tooltip/tooltip.md'), + componentEn: () => import('@/examples/tooltip/tooltip.en-US.md'), + }, + { + title: 'Tree 树', + titleEn: 'Tree', + name: 'tree', + path: '/vue/components/tree', + component: () => import('@/examples/tree/tree.md'), + componentEn: () => import('@/examples/tree/tree.en-US.md'), + }, + ], + }, + { + title: '消息提醒', + titleEn: 'Notifications', + type: 'component', // 组件文档 + children: [ + { + title: 'Alert 警告提醒', + titleEn: 'Alert', + name: 'alert', + path: '/vue/components/alert', + component: () => import('@/examples/alert/alert.md'), + componentEn: () => import('@/examples/alert/alert.en-US.md'), + }, + { + title: 'Dialog 对话框', + titleEn: 'Dialog', + name: 'dialog', + path: '/vue/components/dialog', + component: () => import('@/examples/dialog/dialog.md'), + componentEn: () => import('@/examples/dialog/dialog.en-US.md'), + }, + { + title: 'Drawer 抽屉', + titleEn: 'Drawer', + name: 'drawer', + path: '/vue/components/drawer', + component: () => import('@/examples/drawer/drawer.md'), + componentEn: () => import('@/examples/drawer/drawer.en-US.md'), + }, + { + title: 'Message 全局提示', + titleEn: 'Message', + name: 'message', + path: '/vue/components/message', + component: () => import('@/examples/message/message.md'), + componentEn: () => import('@/examples/message/message.en-US.md'), + }, + { + title: 'Notification 消息通知', + titleEn: 'Notification', + name: 'notification', + path: '/vue/components/notification', + component: () => import('@/examples/notification/notification.md'), + componentEn: () => import('@/examples/notification/notification.en-US.md'), + }, + { + title: 'Popconfirm 气泡确认框', + titleEn: 'Popconfirm', + name: 'popconfirm', + path: '/vue/components/popconfirm', + component: () => import('@/examples/popconfirm/popconfirm.md'), + componentEn: () => import('@/examples/popconfirm/popconfirm.en-US.md'), + }, + { + title: 'Popup 弹出层', + titleEn: 'Popup', + name: 'popup', + path: '/vue/components/popup', + component: () => import('@/examples/popup/popup.md'), + componentEn: () => import('@/examples/popup/popup.en-US.md'), + }, + ], + }, +]; + +const enDocs = docs.map(doc => { + return { + ...doc, + title: doc.titleEn, + children: doc?.children?.map(child => { + return { + title: child.titleEn, + name: `${child.name}-en`, + path: `${child.path}-en`, + meta: { lang: 'en' }, + component: child.componentEn || child.component, + } + }), + }; +}) + +export default { docs, enDocs }; diff --git a/site/src/App.vue b/site/src/App.vue index 21051e36f..c8600cdd0 100644 --- a/site/src/App.vue +++ b/site/src/App.vue @@ -1,20 +1,9 @@ - - diff --git a/site/src/routes.js b/site/src/routes.js index 38debbebc..d98eca5c3 100644 --- a/site/src/routes.js +++ b/site/src/routes.js @@ -1,7 +1,7 @@ import config from '../site.config'; import TdesignComponents from './components/page.vue'; -const { docs } = config; +const { docs, enDocs } = config; function getDocsRoutes(docs, type) { let docsRoutes = []; @@ -9,16 +9,8 @@ function getDocsRoutes(docs, type) { docs.forEach((item) => { const docType = item.type || type; + let { children } = item; - if (item.type === 'component') { - children = item.children.sort((a, b) => { - const nameA = a.name.toUpperCase(); - const nameB = b.name.toUpperCase(); - if (nameA < nameB) return -1; - if (nameA > nameB) return 1; - return 0; - }); - } if (children) { docsRoutes = docsRoutes.concat(getDocsRoutes(children, docType)); } else { @@ -34,7 +26,7 @@ const routes = [ path: '/vue', redirect: '/vue/overview', component: TdesignComponents, - children: getDocsRoutes(docs), + children: [...getDocsRoutes(docs), ...getDocsRoutes(enDocs)], }, { path: '*', diff --git a/src/color-picker/props.ts b/src/color-picker/props.ts new file mode 100644 index 000000000..876407388 --- /dev/null +++ b/src/color-picker/props.ts @@ -0,0 +1,78 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdColorPickerProps } from './type'; +import { PropType } from 'vue'; + +export default { + /** 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 */ + closeBtn: { + type: [String, Boolean, Function] as PropType, + default: true, + }, + /** 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 */ + colorModes: { + type: Array as PropType, + default: () => ['monochrome', 'linear-gradient'], + }, + /** 是否禁用组件 */ + disabled: Boolean, + /** 是否开启透明通道 */ + enableAlpha: Boolean, + /** 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 */ + format: { + type: String as PropType, + default: 'RGB' as TdColorPickerProps['format'], + validator(val: TdColorPickerProps['format']): boolean { + if (!val) return true; + return ['RGB', 'RGBA', 'HSL', 'HSLA', 'HSB', 'HSV', 'HSVA', 'HEX', 'CMYK', 'CSS'].includes(val); + }, + }, + /** 透传 Input 输入框组件全部属性 */ + inputProps: { + type: Object as PropType, + }, + /** 【开发中】是否允许选中多个颜色 */ + multiple: Boolean, + /** 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等 */ + popupProps: { + type: Object as PropType, + }, + /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” */ + recentColors: { + type: Array as PropType, + default: (): TdColorPickerProps['recentColors'] => [], + }, + /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 */ + defaultRecentColors: { + type: Array as PropType, + default: (): TdColorPickerProps['defaultRecentColors'] => [], + }, + /** 透传 SelectInputProps 筛选器输入框组件全部属性 */ + selectInputProps: { + type: Object as PropType, + }, + /** 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */ + swatchColors: { + type: Array as PropType, + }, + /** 色值 */ + value: { + type: String, + default: '', + }, + /** 色值，非受控属性 */ + defaultValue: { + type: String, + default: '', + }, + /** 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */ + onChange: Function as PropType, + /** 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 */ + onPaletteBarChange: Function as PropType, + /** 最近使用颜色发生变化时触发 */ + onRecentColorsChange: Function as PropType, +}; diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts new file mode 100644 index 000000000..ae9f0d53c --- /dev/null +++ b/src/color-picker/type.ts @@ -0,0 +1,116 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { InputProps } from '../input'; +import { PopupProps } from '../popup'; +import { SelectInputProps } from '../select-input'; +import { TNode } from '../common'; + +export interface TdColorPickerProps { + /** + * 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 + * @default true + */ + closeBtn?: string | boolean | TNode; + /** + * 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 + * @default ()=> ['monochrome', 'linear-gradient'] + */ + colorModes?: Array<'monochrome' | 'linear-gradient'>; + /** + * 是否禁用组件 + * @default false + */ + disabled?: boolean; + /** + * 是否开启透明通道 + * @default false + */ + enableAlpha?: boolean; + /** + * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 + * @default RGB + */ + format?: 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSB' | 'HSV' | 'HSVA' | 'HEX' | 'CMYK' | 'CSS'; + /** + * 透传 Input 输入框组件全部属性 + */ + inputProps?: InputProps; + /** + * 【开发中】是否允许选中多个颜色 + * @default false + */ + multiple?: boolean; + /** + * 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等 + */ + popupProps?: PopupProps; + /** + * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” + * @default [] + */ + recentColors?: boolean | Array; + /** + * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 + * @default [] + */ + defaultRecentColors?: boolean | Array; + /** + * 透传 SelectInputProps 筛选器输入框组件全部属性 + */ + selectInputProps?: SelectInputProps; + /** + * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 + */ + swatchColors?: Array; + /** + * 色值 + * @default '' + */ + value?: string; + /** + * 色值，非受控属性 + * @default '' + */ + defaultValue?: string; + /** + * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 + */ + onChange?: (value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void; + /** + * 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 + */ + onPaletteBarChange?: (context: { color: ColorObject }) => void; + /** + * 最近使用颜色发生变化时触发 + */ + onRecentColorsChange?: (value: Array) => void; +} + +export type ColorPickerChangeTrigger = + | 'palette-saturation-brightness' + | 'palette-saturation' + | 'palette-brightness' + | 'palette-hue-bar' + | 'palette-alpha-bar' + | 'input'; + +export interface ColorObject { + alpha: number; + css: string; + hex: string; + hex8: string; + hsl: string; + hsla: string; + hsv: string; + hsva: string; + rgb: string; + rgba: string; + saturation: number; + value: number; + isGradient: boolean; + linearGradient?: string; +} diff --git a/src/watermark/props.ts b/src/watermark/props.ts new file mode 100644 index 000000000..c73c18af9 --- /dev/null +++ b/src/watermark/props.ts @@ -0,0 +1,79 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdWatermarkProps } from './type'; +import { PropType } from 'vue'; + +export default { + /** 水印整体透明度，取值范围 [0-1] */ + alpha: { + type: Number, + default: 1, + }, + /** 水印所覆盖的内容节点 */ + content: { + type: [String, Function] as PropType, + }, + /** 水印所覆盖的内容节点，同 `content` */ + default: { + type: [String, Function] as PropType, + }, + /** 水印高度 */ + height: { + type: Number, + }, + /** 水印是否重复出现 */ + isRepeat: { + type: Boolean, + default: true, + }, + /** 行间距，只作用在多行（`content` 配置为数组）情况下 */ + lineSpace: { + type: Number, + default: 16, + }, + /** 水印是否可移动 */ + movable: Boolean, + /** 水印发生运动位移的间隙，单位：毫秒 */ + moveInterval: { + type: Number, + default: 3000, + }, + /** 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]` */ + offset: { + type: Array as PropType, + }, + /** 水印是否可被删除，默认会开启水印节点防删 */ + removable: { + type: Boolean, + default: true, + }, + /** 水印旋转的角度，单位 ° */ + rotate: { + type: Number, + default: -22, + }, + /** 水印内容，需要显示多行情况下可配置为数组 */ + watermarkContent: { + type: [Object, Array] as PropType, + }, + /** 水印宽度 */ + width: { + type: Number, + }, + /** 水印之间的水平间距 */ + x: { + type: Number, + }, + /** 水印之间的垂直间距 */ + y: { + type: Number, + }, + /** 水印元素的 `z-index`，默认值写在 CSS 中 */ + zIndex: { + type: Number, + }, +}; diff --git a/src/watermark/type.ts b/src/watermark/type.ts new file mode 100644 index 000000000..abfefdf71 --- /dev/null +++ b/src/watermark/type.ts @@ -0,0 +1,117 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode } from '../common'; + +export interface TdWatermarkProps { + /** + * 水印整体透明度，取值范围 [0-1] + * @default 1 + */ + alpha?: number; + /** + * 水印所覆盖的内容节点 + */ + content?: string | TNode; + /** + * 水印所覆盖的内容节点，同 `content` + */ + default?: string | TNode; + /** + * 水印高度 + */ + height?: number; + /** + * 水印是否重复出现 + * @default true + */ + isRepeat?: boolean; + /** + * 行间距，只作用在多行（`content` 配置为数组）情况下 + * @default 16 + */ + lineSpace?: number; + /** + * 水印是否可移动 + * @default false + */ + movable?: boolean; + /** + * 水印发生运动位移的间隙，单位：毫秒 + * @default 3000 + */ + moveInterval?: number; + /** + * 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]` + */ + offset?: Array; + /** + * 水印是否可被删除，默认会开启水印节点防删 + * @default true + */ + removable?: boolean; + /** + * 水印旋转的角度，单位 ° + * @default -22 + */ + rotate?: number; + /** + * 水印内容，需要显示多行情况下可配置为数组 + */ + watermarkContent?: WatermarkText | WatermarkImage | Array; + /** + * 水印宽度 + */ + width?: number; + /** + * 水印之间的水平间距 + */ + x?: number; + /** + * 水印之间的垂直间距 + */ + y?: number; + /** + * 水印元素的 `z-index`，默认值写在 CSS 中 + */ + zIndex?: number; +} + +export interface WatermarkText { + /** + * 水印文本文字颜色 + * @default rgba(0,0,0,0.1) + */ + fontColor?: string; + /** + * 水印文本文字大小 + * @default 16 + */ + fontSize?: number; + /** + * 水印文本文字粗细 + * @default normal + */ + fontWeight?: 'normal' | 'lighter' | 'bold' | 'bolder'; + /** + * 水印文本内容 + * @default '' + */ + text?: string; +} + +export interface WatermarkImage { + /** + * 水印图片是否需要灰阶显示 + * @default false + */ + isGrayscale?: boolean; + /** + * 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图 + * @default '' + */ + url?: string; +}