mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-04-12 16:40:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add attribute enum autosuggestion for WebStorm (#9663)

Browse Source
This commit is contained in:
qiang 2022-09-10 09:14:31 +08:00 committed by GitHub
parent 838001aadd
commit 189c379ddc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
60 changed files with 572 additions and 528 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/en-US/component/autocomplete.md
View File

@ -35,7 +35,7 @@ autocomplete/remote-search
## Autocomplete Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------- | ------------ |
| placeholder | the placeholder of Autocomplete | string | — | — |
| clearable | whether to show clear button | boolean | — | false |
@ -68,10 +68,10 @@ autocomplete/remote-search
## Autocomplete Events
| Event Name | Description | Parameters |
| ---------- | ------------------------------------------------ | ------------------------- |
| select | triggers when a suggestion is clicked | suggestion being clicked |
| change | triggers when the icon inside Input value change | (value: string \| number) |
| Name | Description | Parameters |
| ------ | ------------------------------------------------ | ------------------------- |
| select | triggers when a suggestion is clicked | suggestion being clicked |
| change | triggers when the icon inside Input value change | (value: string \| number) |
## Autocomplete Methods

14
docs/en-US/component/badge.md
View File

@ -51,13 +51,13 @@ badge/dot
### Badge Attributes
| Attribute | Description | Type | Default |
| --------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------- | ---------- |
| `value` | display value. | `string \| number` | `''` |
| `max` | maximum value, shows `{max}+` when exceeded. Only works if `value` is a number. | `number` | `99` |
| `is-dot` | if a little dot is displayed. | `boolean` | `false` |
| `hidden` | hidden badge. | `boolean` | `false` |
| `type` | badge type. | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'danger'` |
| Name | Description | Type | Default |
| -------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------- | ---------- |
| `value` | display value. | `string \| number` | `''` |
| `max` | maximum value, shows `{max}+` when exceeded. Only works if `value` is a number. | `number` | `99` |
| `is-dot` | if a little dot is displayed. | `boolean` | `false` |
| `hidden` | hidden badge. | `boolean` | `false` |
| `type` | badge type. | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'danger'` |
### Badge Slots

10
docs/en-US/component/breadcrumb.md
View File

@ -25,7 +25,7 @@ breadcrumb/icon
## Breadcrumb Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| -------------- | -------------------------------- | --------------------- | --------------- | ------- |
| separator | separator character | string | — | / |
| separator-icon | icon component of icon separator | `string \| Component` | — | - |
@ -38,10 +38,10 @@ breadcrumb/icon
## Breadcrumb Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | --------------------------------------------------------- | ------------- | --------------- | ------- |
| to | target route of the link, same as `to` of `vue-router` | string/object | — | — |
| replace | if `true`, the navigation will not leave a history record | boolean | — | false |
| Name | Description | Type | Accepted Values | Default |
| ------- | --------------------------------------------------------- | ------------- | --------------- | ------- |
| to | target route of the link, same as `to` of `vue-router` | string/object | — | — |
| replace | if `true`, the navigation will not leave a history record | boolean | — | false |
## Breadcrumb Item Slots

10
docs/en-US/component/button.md
View File

@ -125,7 +125,7 @@ button/custom
## Button Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ----------------------------------- | --------------------------------------------------------------- | --------------------- | ------------------------------------------------------------- | ------- |
| size | button size | string | large / default /small | — |
| type | button type | string | primary / success / warning / danger / info / <del>text</del> | — |
@ -153,10 +153,10 @@ button/custom
## Button-Group Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------------------------------ | ------ | --------------------- | ------- |
| size | control the size of buttons in this button-group | string | same as button's size | — |
| type | control the type of buttons in this button-group | string | same as button's type | — |
| Name | Description | Type | Accepted Values | Default |
| ---- | ------------------------------------------------ | ------ | ------------------------------------------- | ------- |
| size | control the size of buttons in this button-group | string | large / default /small | — |
| type | control the type of buttons in this button-group | string | primary / success / warning / danger / info | — |
## Button-Group Slots

8
docs/en-US/component/calendar.md
View File

@ -47,10 +47,10 @@ Note, date time locale (month name, first day of the week ...) are also configur
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------- | ------- |
| model-value / v-model | binding value | Date | — | — |
| range | time range, including start time and end time. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | [Date]Array | — | — |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------- | ------- |
| model-value / v-model | binding value | Date | — | — |
| range | time range, including start time and end time. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | Array\<Date\> | — | — |
## Slots

2
docs/en-US/component/card.md
View File

@ -49,7 +49,7 @@ card/shadow
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ---------- | ------------------------------------------------------------- | ------ | ---------------------- | --------------------- |
| header | title of the card. Also accepts a DOM passed by `slot#header` | string | — | — |
| body-style | CSS style of body | object | — | `{ padding: '20px' }` |

16
docs/en-US/component/carousel.md
View File

@ -57,7 +57,7 @@ carousel/vertical
## Carousel Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ------------------ | ----------------------------------------------------- | ------- | ------------------- | ---------- |
| height | height of the carousel | string | — | — |
| initial-index | index of the initially active slide (starting from 0) | number | — | 0 |
@ -73,9 +73,9 @@ carousel/vertical
## Carousel Events
| Event Name | Description | Parameters |
| ---------- | --------------------------------------- | ------------------------------------------------------------ |
| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |
| Name | Description | Parameters |
| ------ | --------------------------------------- | ------------------------------------------------------------ |
| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |
## Carousel Methods
@ -93,10 +93,10 @@ carousel/vertical
## Carousel-Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------------------------------ | ------ | --------------- | ------- |
| name | name of the item, can be used in `setActiveItem` | string | — | — |
| label | text content for the corresponding indicator | string | — | — |
| Name | Description | Type | Accepted Values | Default |
| ----- | ------------------------------------------------ | ------ | --------------- | ------- |
| name | name of the item, can be used in `setActiveItem` | string | — | — |
| label | text content for the corresponding indicator | string | — | — |
## Carousel-Item Slots

12
docs/en-US/component/cascader.md
View File

@ -138,10 +138,10 @@ cascader/panel
## Cascader Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------- | ------- |
| model-value / v-model | binding value | - | — | — |
| options | data of the options，the key of `value` and `label` can be customize by `Props`. | array | — | — |
| options | data of the options, the key of `value` and `label` can be customize by `Props`. | array | — | — |
| props | configuration options, see the following table. | object | — | — |
| size | size of input | string | large / default /small | — |
| placeholder | placeholder of input | string | — | Select |
@ -163,7 +163,7 @@ cascader/panel
## Cascader Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| -------------- | --------------------------------------------------- | --------------------------------------------- |
| change | triggers when the binding value changes | value |
| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |
@ -187,15 +187,15 @@ cascader/panel
## CascaderPanel Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------------------------------- | ------ | --------------- | ------- |
| model-value / v-model | binding value | - | — | — |
| options | data of the options，the key of `value` and `label` can be customize by `Props`. | array | — | — |
| options | data of the options, the key of `value` and `label` can be customize by `Props`. | array | — | — |
| props | configuration options, see the following table. | object | — | — |
## CascaderPanel Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| ------------- | --------------------------------------- | --------------------------------------------- |
| change | triggers when the binding value changes | value |
| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |

18
docs/en-US/component/checkbox.md
View File

@ -77,7 +77,7 @@ checkbox/with-border
## Checkbox Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------- | ---------------------------------- | ---------------------- | ------- |
| model-value / v-model | binding value | string / number / boolean | — | — |
| label | value of the Checkbox when used inside a `checkbox-group` | string / number / boolean / object | — | — |
@ -93,9 +93,9 @@ checkbox/with-border
## Checkbox Events
| Event Name | Description | Parameters |
| ---------- | --------------------------------------- | ----------------- |
| change | triggers when the binding value changes | the updated value |
| Name | Description | Parameters |
| ------ | --------------------------------------- | ----------------- |
| change | triggers when the binding value changes | the updated value |
## Checkbox Slots
@ -105,7 +105,7 @@ checkbox/with-border
## Checkbox-group Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------- | ------- | ---------------------- | ------- |
| model-value / v-model | binding value | array | — | [] |
| size | size of checkbox | string | large / default /small | — |
@ -119,9 +119,9 @@ checkbox/with-border
## Checkbox-group Events
| Event Name | Description | Parameters |
| ---------- | --------------------------------------- | ----------------- |
| change | triggers when the binding value changes | the updated value |
| Name | Description | Parameters |
| ------ | --------------------------------------- | ----------------- |
| change | triggers when the binding value changes | the updated value |
## Checkbox-group Slots
@ -131,7 +131,7 @@ checkbox/with-border
## Checkbox-button Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ----------- | --------------------------------------------------------- | ---------------------------------- | --------------- | ------- |
| label | value of the checkbox when used inside a `checkbox-group` | string / number / boolean / object | — | — |
| true-label | value of the checkbox if it's checked | string / number | — | — |

18
docs/en-US/component/collapse.md
View File

@ -39,16 +39,16 @@ collapse/customization
## Collapse Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ---------------------------------- | ---------------------------------------------------- | --------------- | ------- |
| model-value / v-model | currently active panel | string (accordion mode) / array (non-accordion mode) | — | — |
| accordion | whether to activate accordion mode | boolean | — | false |
## Collapse Events
| Event Name | Description | Parameters |
| ---------- | ---------------------------------- | ------------------------------------------------------------------- |
| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
| Name | Description | Parameters |
| ------ | ---------------------------------- | ------------------------------------------------------------------- |
| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
## Collapse Slots
@ -58,11 +58,11 @@ collapse/customization
## Collapse Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ---------------------------------- | ------------- | --------------- | ------- |
| name | unique identification of the panel | string/number | — | — |
| title | title of the panel | string | — | — |
| disabled | disable the collapse item | boolean | — | — |
| Name | Description | Type | Accepted Values | Default |
| -------- | ---------------------------------- | ------------- | --------------- | ------- |
| name | unique identification of the panel | string/number | — | — |
| title | title of the panel | string | — | — |
| disabled | disable the collapse item | boolean | — | — |
## Collapse Item Slot

4
docs/en-US/component/color-picker.md
View File

@ -41,7 +41,7 @@ color-picker/sizes
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------- | ------- | ---------------------- | ------------------------------------------------------------- |
| model-value / v-model | binding value | string | — | — |
| disabled | whether to disable the ColorPicker | boolean | — | false |
@ -54,7 +54,7 @@ color-picker/sizes
## Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| ------------- | ---------------------------------------------- | ------------------ |
| change | triggers when input value changes | color value |
| active-change | triggers when the current active color changes | active color value |

4
docs/en-US/component/config-provider.md
View File

@ -41,7 +41,7 @@ In this section, you can learn how to use Config Provider to provide experimenta
## Config Provider Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| locale | Locale Object | [Language](https://github.com/element-plus/element-plus/blob/a98ff9b40c0c3d2b9959f99919bd8363e3e3c25a/packages/locale/index.ts#L5) | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | [English](https://github.com/element-plus/element-plus/blob/dev/packages/locale/lang/en.ts) |
| size | global component size | string | large / default /small | default |
@ -63,7 +63,7 @@ In this section, you can learn how to use Config Provider to provide experimenta
| --------- | --------------------------------------------------------------------- | ------ | --------------- | ------- |
| max | the maximum number of messages that can be displayed at the same time | number | - | - |
## ConfigProvider Slots
## Config Provider Slots
| Name | Description | Scope |
| ---- | ------------------------- | ------------------------------------------------------- |

20
docs/en-US/component/container.md
View File

@ -81,7 +81,7 @@ container/example
## Container Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------- | ------ | --------------------- | -------------------------------------------------------------------------- |
| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
@ -93,9 +93,9 @@ container/example
## Header Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | -------------------- | ------ | --------------- | ------- |
| height | height of the header | string | — | 60px |
| Name | Description | Type | Accepted Values | Default |
| ------ | -------------------- | ------ | --------------- | ------- |
| height | height of the header | string | — | 60px |
## Header Slots
@ -105,9 +105,9 @@ container/example
## Aside Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------- | ------ | --------------- | ------- |
| width | width of the side section | string | — | 300px |
| Name | Description | Type | Accepted Values | Default |
| ----- | ------------------------- | ------ | --------------- | ------- |
| width | width of the side section | string | — | 300px |
## Aside Slots
@ -123,9 +123,9 @@ container/example
## Footer Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | -------------------- | ------ | --------------- | ------- |
| height | height of the footer | string | — | 60px |
| Name | Description | Type | Accepted Values | Default |
| ------ | -------------------- | ------ | --------------- | ------- |
| height | height of the footer | string | — | 60px |
## Footer Slots

58
docs/en-US/component/date-picker.md
View File

@ -139,38 +139,38 @@ Note, date time locale (month name, first day of the week ...) are also configur
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | ----------- |
| model-value / v-model | binding value, if it is an array, the length should be 2 | Date / number / string / Array | — | — |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| size | size of Input | string | large/default/small | default |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |
| type | type of the picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
| format | format of the displayed value in the input box | string | see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD |
| popper-class | custom class name for DatePicker's dropdown | string | — | — |
| range-separator | range separator | string | — | '-' |
| default-value | optional, default date of the calendar | Date / [Date, Date] | — | — |
| default-time | optional, the time value to use when selecting date range | Date / [Date, Date] | Array with length 2, each item is a Date. The first item for the start date and then second item for the end date | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](/en-US/component/date-picker#date-formats) | — |
| id | same as `id` in native input | string / array(string) | String `id="my-date"` or array `:id="['my-range-start', 'my-range-end']"` for date range | — |
| name | same as `name` in native input | string | — | — |
| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
| prefix-icon | custom prefix icon component | `string \| Component` | — | Date |
| clear-icon | custom clear icon component | `string \| Component` | — | CircleClose |
| validate-event | whether to trigger form validation | boolean | — | true |
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
| cell-class-name | set custom className | Function(Date) | — | — |
| teleported | whether date-picker dropdown is teleported to the body | boolean | true / false | true |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------ | ----------- |
| model-value / v-model | binding value, if it is an array, the length should be 2 | Date / number / string / Array | — | — |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| size | size of Input | string | large/default/small | default |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |
| type | type of the picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
| format | format of the displayed value in the input box | string | see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD |
| popper-class | custom class name for DatePicker's dropdown | string | — | — |
| range-separator | range separator | string | — | '-' |
| default-value | optional, default date of the calendar | Date / [Date, Date] | — | — |
| default-time | optional, the time value to use when selecting date range | Date / [Date, Date] | — | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](/en-US/component/date-picker#date-formats) | — |
| id | same as `id` in native input | string / [string, string] | — | — |
| name | same as `name` in native input | string | — | — |
| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
| prefix-icon | custom prefix icon component | `string \| Component` | — | Date |
| clear-icon | custom clear icon component | `string \| Component` | — | CircleClose |
| validate-event | whether to trigger form validation | boolean | — | true |
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| shortcuts | an object array to set shortcut options | Array\<{ text: string, value: Date \| Function }\> | — | — |
| cell-class-name | set custom className | Function(Date) | — | — |
| teleported | whether date-picker dropdown is teleported to the body | boolean | true / false | true |
## Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| --------------- | ------------------------------------------------------------------------- | ----------------------- |
| change | triggers when user confirms the value | `(val: typeof v-model)` |
| blur | triggers when Input blurs | `(e: FocusEvent)` |

58
docs/en-US/component/datetime-picker.md
View File

@ -59,38 +59,38 @@ datetime-picker/default-time
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| model-value / v-model | binding value, if it is an array, the length should be 2 | Date / number / string / Array | — | — |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | large/default/small | default |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |
| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
| format | format of the displayed value in the input box | string | see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD HH:mm:ss |
| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
| range-separator | range separator | string | — | '-' |
| default-value | optional, default date of the calendar | Date / [Date, Date] | | — |
| default-time | the default time value after picking a date | non-range: Date / range: [Date, Date] | non-range: a Date object, range: array of two Date objects, and the first item is for the start date and second for the end date. Time `00:00:00` will be used if not specified | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](https://day.js.org/docs/en/display/format) | — |
| id | same as `id` in native input | string / array(string) | String `id="my-datetime"` or array `:id="['my-range-start', 'my-range-end']"` for date range | — |
| name | same as `name` in native input | string | — | — |
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
| prefix-icon | Custom prefix icon component | `string \| Component` | — | Date |
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function(Date) | — | — |
| cell-class-name | set custom className | Function(Date) | — | — |
| teleported | whether datetime-picker dropdown is teleported to the body | boolean | true / false | true |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | ------------------- |
| model-value / v-model | binding value, if it is an array, the length should be 2 | Date / number / string / Array | — | — |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | large/default/small | default |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |
| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
| format | format of the displayed value in the input box | string | see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD HH:mm:ss |
| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
| range-separator | range separator | string | — | '-' |
| default-value | optional, default date of the calendar | Date / [Date, Date] | | — |
| default-time | the default time value after picking a date. Time `00:00:00` will be used if not specified | Date / [Date, Date] | — | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](https://day.js.org/docs/en/display/format) | — |
| id | same as `id` in native input | string / [string, string] | — | — |
| name | same as `name` in native input | string | — | — |
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
| prefix-icon | Custom prefix icon component | `string \| Component` | — | Date |
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function(Date) | — | — |
| cell-class-name | set custom className | Function(Date) | — | — |
| teleported | whether datetime-picker dropdown is teleported to the body | boolean | true / false | true |
## Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| --------------- | ----------------------------------------------------------------------------- | ----------------------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | `(e: FocusEvent)` |

4
docs/en-US/component/descriptions.md
View File

@ -41,7 +41,7 @@ descriptions/customized-style
## Descriptions Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------- | ------------------------------------------ | ------- | ----------------------- | ---------- |
| border | with or without border | boolean | — | false |
| column | numbers of `Descriptions Item` in one line | number | — | 3 |
@ -60,7 +60,7 @@ descriptions/customized-style
## Descriptions Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------------- | ------- |
| label | label text | string | — | — |
| span | colspan of column | number | — | 1 |

44
docs/en-US/component/dialog.md
View File

@ -105,27 +105,27 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------ | --------------- | ------- |
| model-value / v-model | visibility of Dialog | boolean | — | — |
| title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — |
| width | width of Dialog | string / number | — | 50% |
| fullscreen | whether the Dialog takes up full screen | boolean | — | false |
| top | value for `margin-top` of Dialog CSS | string | — | 15vh |
| modal | whether a mask is displayed | boolean | — | true |
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | false |
| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true |
| custom-class <DeprecatedTag /> | custom class names for Dialog | string | — | — |
| open-delay | Time(milliseconds) before open | number | — | 0 |
| close-delay | Time(milliseconds) before close | number | — | 0 |
| close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true |
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true |
| show-close | whether to show a close button | boolean | — | true |
| before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — |
| draggable | enable dragging feature for Dialog | boolean | — | false |
| center | whether to align the header and footer in center | boolean | — | false |
| align-center | whether to align the dialog both horizontally and vertically | boolean | — | false |
| destroy-on-close | Destroy elements in Dialog when closed | boolean | — | false |
| Name | Description | Type | Accepted Values | Default |
| ------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------- | --------------- | ------- |
| model-value / v-model | visibility of Dialog | boolean | — | — |
| title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — |
| width | width of Dialog | string / number | — | 50% |
| fullscreen | whether the Dialog takes up full screen | boolean | — | false |
| top | value for `margin-top` of Dialog CSS | string | — | 15vh |
| modal | whether a mask is displayed | boolean | — | true |
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | false |
| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true |
| custom-class <DeprecatedTag /> | custom class names for Dialog | string | — | — |
| open-delay | Time(milliseconds) before open | number | — | 0 |
| close-delay | Time(milliseconds) before close | number | — | 0 |
| close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true |
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true |
| show-close | whether to show a close button | boolean | — | true |
| before-close | callback before Dialog closes, and it will prevent Dialog from closing | Function(done) (done is used to close the Dialog) | — | — |
| draggable | enable dragging feature for Dialog | boolean | — | false |
| center | whether to align the header and footer in center | boolean | — | false |
| align-center | whether to align the dialog both horizontally and vertically | boolean | — | false |
| destroy-on-close | Destroy elements in Dialog when closed | boolean | — | false |
:::warning
@ -144,7 +144,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
## Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| ---------------- | ------------------------------------------------ | ---------- |
| open | triggers when the Dialog opens | — |
| opened | triggers when the Dialog opening animation ends | — |

2
docs/en-US/component/divider.md
View File

@ -47,7 +47,7 @@ divider/vertical-divider
## Divider Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ---------------- | ---------------------------------------------------------- | ------ | --------------------------------------------------------------------------------- | ---------- |
| direction | Set divider's direction | string | horizontal / vertical | horizontal |
| border-style | Set the style of divider | string | [CSS/border-style](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style) | solid |

14
docs/en-US/component/drawer.md
View File

@ -77,7 +77,7 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
## Drawer Attributes
| Attribute | Description | Type | Acceptable Values | Default |
| Name | Description | Type | Acceptable Values | Default |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ------- |
| model-value / v-model | Should Drawer be displayed | boolean | — | false |
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true** | boolean | — | false |
@ -115,9 +115,9 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
## Drawer Events
| Event Name | Description | Parameter |
| ---------- | ------------------------------------------------ | --------- |
| open | Triggered before Drawer opening animation begins | — |
| opened | Triggered after Drawer opening animation ended | — |
| close | Triggered before Drawer closing animation begins | — |
| closed | Triggered after Drawer closing animation ended | — |
| Name | Description | Parameter |
| ------ | ------------------------------------------------ | --------- |
| open | Triggered before Drawer opening animation begins | — |
| opened | Triggered after Drawer opening animation ended | — |
| close | Triggered before Drawer closing animation begins | — |
| closed | Triggered after Drawer closing animation ended | — |

16
docs/en-US/component/dropdown.md
View File

@ -79,7 +79,7 @@ dropdown/sizes
## Dropdown Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| -------------- | --------------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------------- | -------------------------------------------------------------------------- |
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — |
| size | menu size, also works on the split button | string | large / default / small | default |
@ -105,7 +105,7 @@ dropdown/sizes
## Dropdown Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| -------------- | ----------------------------------------------------------------- | --------------------------------------------- |
| click | if `split-button` is `true`, triggers when left button is clicked | — |
| command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item |
@ -126,12 +126,12 @@ dropdown/sizes
## Dropdown-Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------------------------------- | --------------------- | --------------- | ------- |
| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — |
| disabled | whether the item is disabled | boolean | — | false |
| divided | whether a divider is displayed | boolean | — | false |
| icon | custom icon | `string \| Component` | — | — |
| Name | Description | Type | Accepted Values | Default |
| -------- | ----------------------------------------------------------- | --------------------- | --------------- | ------- |
| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — |
| disabled | whether the item is disabled | boolean | — | false |
| divided | whether a divider is displayed | boolean | — | false |
| icon | custom icon | `string \| Component` | — | — |
## Dropdown-Item Slots

2
docs/en-US/component/empty.md
View File

@ -68,7 +68,7 @@ But usually, if you want to change style, you need to change all color, because
## Empty Attributes
| Attribute | Description | Type | Acceptable Value | Default |
| Name | Description | Type | Acceptable Value | Default |
| ----------- | ------------------ | ------ | ---------------- | ------- |
| image | image URL | string | — | — |
| image-size | image size (width) | number | — | — |

8
docs/en-US/component/form.md
View File

@ -125,7 +125,7 @@ form/accessibility
### Form Attributes
| Attribute | Description | Type | Default |
| Name | Description | Type | Default |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- | --------- |
| `model` | Data of form component. | `Record<string, any>` | — |
| `rules` | Validation rules of form. | `FormRules` | — |
@ -155,7 +155,7 @@ form/accessibility
### Form Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| ---------- | --------------------------------------- | ----------------------------------------------------------------- |
| `validate` | triggers after a form item is validated | `(prop: FormItemProp, isValid: boolean, message: string) => void` |
@ -169,13 +169,13 @@ form/accessibility
### Form Item Attributes
| Attribute | Description | Type | Default |
| Name | Description | Type | Default |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `prop` | A key of `model`. It could be an array of property paths (e.g `['a', 'b', 0]`). In the use of `validate` and `resetFields` method, the attribute is required. | `string \| string[]` | — |
| `label` | Label text. | `string` | — |
| `label-width` | Width of label, e.g. `'50px'`. `'auto'` is supported. | `string \| number` | — |
| `required` | Whether the field is required or not, will be determined by validation rules if omitted. | `boolean` | `false` |
| `rules` | Validation rules of form, see the [following table](#formitemrule), more advanced usage at [async-validator](https://github.com/yiminghe/async-validator). | `FormItemRule \| FormItemRule[]` | — |
| `rules` | Validation rules of form, see the [following table](#formitemrule), more advanced usage at [async-validator](https://github.com/yiminghe/async-validator). | `FormItemRule / FormItemRule[]` | — |
| `error` | Field error message, set its value and the field will validate error and show this message immediately. | `string` | — |
| `show-message` | Whether to show the error message. | `boolean` | `true` |
| `inline-message` | Inline style validate message. | `boolean` | `false` |

8
docs/en-US/component/icon.md
View File

@ -214,10 +214,10 @@ import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons-vue'
## Icon Attributes
| Attribute | Description | Type | Acceptable Value | Default |
| --------- | -------------------------- | ------------------------------ | ---------------- | ---------------------- |
| color | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
| size | SVG icon size, size x size | number \| string | - | inherit from font size |
| Name | Description | Type | Acceptable Value | Default |
| ----- | -------------------------- | ------------------------------ | ---------------- | ---------------------- |
| color | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
| size | SVG icon size, size x size | number \| string | - | inherit from font size |
## Icon Slots

12
docs/en-US/component/image.md
View File

@ -59,7 +59,7 @@ image/image-preview
### Image Attributes
| Attribute | Description | Type | Default |
| Name | Description | Type | Default |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------------------- |
| `src` | image source, same as native. | `string` | — |
| `fit` | indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale'-down'` | — |
@ -96,7 +96,7 @@ image/image-preview
### Image Viewer Attributes
| Attribute | Description | Type | Default |
| Name | Description | Type | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
| `url-list` | preview link list. | `string[]` | `[]` |
| `z-index` | preview backdrop z-index. | `number \| string` | — |
@ -107,10 +107,10 @@ image/image-preview
### Image Viewer Events
| Event name | Description | Type |
| ---------- | ------------------------------------------------------------------------------------------------- | ------------------------- |
| `close` | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | `() => void` |
| `switch` | trigger when switching images. | `(index: number) => void` |
| Name | Description | Type |
| -------- | ------------------------------------------------------------------------------------------------- | ------------------------- |
| `close` | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | `() => void` |
| `switch` | trigger when switching images. | `(index: number) => void` |
## Image Viewer Methods

46
docs/en-US/component/input-number.md
View File

@ -81,32 +81,32 @@ input-number/controlled
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ----------------------------- | ------------------------------------------------ | ---------------------- | --------------- | ----------- |
| model-value / v-model | binding value | number / undefined | — | — |
| min | the minimum allowed value | number | — | `-Infinity` |
| max | the maximum allowed value | number | — | `Infinity` |
| step | incremental step | number | — | 1 |
| step-strictly | whether input value can only be multiple of step | boolean | — | false |
| precision | precision of input value | number | — | — |
| size | size of the component | string | large/small | default |
| readonly | same as `readonly` in native input | boolean | — | false |
| disabled | whether the component is disabled | boolean | — | false |
| controls | whether to enable the control buttons | boolean | — | true |
| controls-position | position of the control buttons | string | right | - |
| name | same as `name` in native input | string | — | — |
| label | label text | string | — | — |
| placeholder | placeholder in input | string | - | - |
| value-on-clear **(\> 2.2.0)** | value should be set when input box is cleared | string / number / null | min/max | - |
| validate-event | whether to trigger form validation | boolean | - | true |
| Name | Description | Type | Accepted Values | Default |
| ----------------------------- | ------------------------------------------------ | ---------------------- | ----------------------- | ----------- |
| model-value / v-model | binding value | number / undefined | — | — |
| min | the minimum allowed value | number | — | `-Infinity` |
| max | the maximum allowed value | number | — | `Infinity` |
| step | incremental step | number | — | 1 |
| step-strictly | whether input value can only be multiple of step | boolean | — | false |
| precision | precision of input value | number | — | — |
| size | size of the component | string | large / default / small | default |
| readonly | same as `readonly` in native input | boolean | — | false |
| disabled | whether the component is disabled | boolean | — | false |
| controls | whether to enable the control buttons | boolean | — | true |
| controls-position | position of the control buttons | string | right | - |
| name | same as `name` in native input | string | — | — |
| label | label text | string | — | — |
| placeholder | placeholder in input | string | - | - |
| value-on-clear **(\> 2.2.0)** | value should be set when input box is cleared | string / number / null | min / max | - |
| validate-event | whether to trigger form validation | boolean | - | true |
## Events
| Event Name | Description | Parameters |
| ---------- | ------------------------------- | ------------------------------------------------------ |
| change | triggers when the value changes | (currentValue: number \| NaN, oldValue: number \| NaN) |
| blur | triggers when Input blurs | (event: FocusEvent) |
| focus | triggers when Input focuses | (event: FocusEvent) |
| Name | Description | Parameters |
| ------ | ------------------------------- | ------------------------------------------------------ |
| change | triggers when the value changes | (currentValue: number \| NaN, oldValue: number \| NaN) |
| blur | triggers when Input blurs | (event: FocusEvent) |
| focus | triggers when Input focuses | (event: FocusEvent) |
## Methods

76
docs/en-US/component/input.md
View File

@ -117,37 +117,37 @@ input/length-limiting
## Input Attributes
| Attribute | Description | Type | Accepted Values | Default |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| type | type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
| modelValue / v-model | binding value | string / number | — | — |
| maxlength | the max length | string / number | — | — |
| minlength | same as `minlength` in native input | number | — | — |
| show-word-limit | whether show word count，only works when `type` is 'text' or 'textarea' | boolean | — | false |
| placeholder | placeholder of Input | string | — | — |
| clearable | whether to show clear button | boolean | — | false |
| formatter | specifies the format of the value presented input.(only works when `type` is 'text') | function(value: string / number): string | — | — |
| parser | specifies the value extracted from formatter input.(only works when `type` is 'text') | function(string): string | — | — |
| show-password | whether to show toggleable password input | boolean | — | false |
| disabled | whether Input is disabled | boolean | — | false |
| size | size of Input, works when `type` is not 'textarea' | string | large / default / small | — |
| prefix-icon | prefix icon component | `string \| Component` | — | — |
| suffix-icon | suffix icon component | `string \| Component` | — | — |
| rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
| autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. `{ minRows: 2, maxRows: 6 }` | boolean / object | — | false |
| autocomplete | same as `autocomplete` in native input | string | — | off |
| name | same as `name` in native input | string | — | — |
| readonly | same as `readonly` in native input | boolean | — | false |
| max | same as `max` in native input | — | — | — |
| min | same as `min` in native input | — | — | — |
| step | same as `step` in native input | — | — | — |
| resize | control the resizability | string | none / both / horizontal / vertical | — |
| autofocus | same as `autofocus` in native input | boolean | — | false |
| form | same as `form` in native input | string | — | — |
| label | label text | string | — | — |
| tabindex | input tabindex | string / number | - | - |
| validate-event | whether to trigger form validation | boolean | - | true |
| input-style | the style of the input element or textarea element | object | - | {} |
| Name | Description | Type | Accepted Values | Default |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| type | type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
| modelValue / v-model | binding value | string / number | — | — |
| maxlength | the max length | string / number | — | — |
| minlength | same as `minlength` in native input | number | — | — |
| show-word-limit | whether show word count, only works when `type` is 'text' or 'textarea' | boolean | — | false |
| placeholder | placeholder of Input | string | — | — |
| clearable | whether to show clear button | boolean | — | false |
| formatter | specifies the format of the value presented input.(only works when `type` is 'text') | (value: string \| number) => string | — | — |
| parser | specifies the value extracted from formatter input.(only works when `type` is 'text') | (string) => string | — | — |
| show-password | whether to show toggleable password input | boolean | — | false |
| disabled | whether Input is disabled | boolean | — | false |
| size | size of Input, works when `type` is not 'textarea' | string | large / default / small | — |
| prefix-icon | prefix icon component | `string \| Component` | — | — |
| suffix-icon | suffix icon component | `string \| Component` | — | — |
| rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
| autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. `{ minRows: 2, maxRows: 6 }` | boolean / object | — | false |
| autocomplete | same as `autocomplete` in native input | string | — | off |
| name | same as `name` in native input | string | — | — |
| readonly | same as `readonly` in native input | boolean | — | false |
| max | same as `max` in native input | — | — | — |
| min | same as `min` in native input | — | — | — |
| step | same as `step` in native input | — | — | — |
| resize | control the resizability | string | none / both / horizontal / vertical | — |
| autofocus | same as `autofocus` in native input | boolean | — | false |
| form | same as `form` in native input | string | — | — |
| label | label text | string | — | — |
| tabindex | input tabindex | string / number | - | - |
| validate-event | whether to trigger form validation | boolean | - | true |
| input-style | the style of the input element or textarea element | object | - | {} |
## Input Slots
@ -160,13 +160,13 @@ input/length-limiting
## Input Events
| Event Name | Description | Parameters |
| ---------- | ----------------------------------------------------------------------------------------------------- | ------------------------- |
| blur | triggers when Input blurs | (event: FocusEvent) |
| focus | triggers when Input focuses | (event: FocusEvent) |
| change | triggers when the input box loses focus or the user presses Enter, only if the modelValue has changed | (value: string \| number) |
| input | triggers when the Input value change | (value: string \| number) |
| clear | triggers when the Input is cleared by clicking the clear button | — |
| Name | Description | Parameters |
| ------ | ----------------------------------------------------------------------------------------------------- | ------------------------- |
| blur | triggers when Input blurs | (event: FocusEvent) |
| focus | triggers when Input focuses | (event: FocusEvent) |
| change | triggers when the input box loses focus or the user presses Enter, only if the modelValue has changed | (value: string \| number) |
| input | triggers when the Input value change | (value: string \| number) |
| clear | triggers when the Input is cleared by clicking the clear button | — |
## Input Methods

36
docs/en-US/component/layout.md
View File

@ -103,12 +103,12 @@ The classes are:
## Row Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------- | ------ | -------------------------------------------------------- | ------- |
| gutter | grid spacing | number | — | 0 |
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between/space-evenly | start |
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
| tag | custom element tag | string | \* | div |
| Name | Description | Type | Accepted Values | Default |
| ------- | ----------------------------------- | ------ | -------------------------------------------------------- | ------- |
| gutter | grid spacing | number | — | 0 |
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between/space-evenly | start |
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
| tag | custom element tag | string | (\*) | div |
## Row Slots
@ -118,18 +118,18 @@ The classes are:
## Col Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | --------------------------------------------------- | ----------------------------------------- | --------------- | ------- |
| span | number of column the grid spans | number | — | 24 |
| offset | number of spacing on the left side of the grid | number | — | 0 |
| push | number of columns that grid moves to the right | number | — | 0 |
| pull | number of columns that grid moves to the left | number | — | 0 |
| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| tag | custom element tag | string | \* | div |
| Name | Description | Type | Accepted Values | Default |
| ------ | --------------------------------------------------- | ----------------------------------------- | --------------- | ------- |
| span | number of column the grid spans | number | — | 24 |
| offset | number of spacing on the left side of the grid | number | — | 0 |
| push | number of columns that grid moves to the right | number | — | 0 |
| pull | number of columns that grid moves to the left | number | — | 0 |
| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| tag | custom element tag | string | (\*) | div |
## Col Slots

2
docs/en-US/component/link.md
View File

@ -55,7 +55,7 @@ link/with-icon
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------- | --------------------- | ----------------------------------------------------- | ------- |
| type | type | string | primary / success / warning / danger / info / default | default |
| underline | whether the component has underline | boolean | — | true |

36
docs/en-US/component/menu.md
View File

@ -47,7 +47,7 @@ menu/collapse
## Menu Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------- | -------- |
| mode | menu display mode | string | horizontal / vertical | vertical |
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
@ -71,11 +71,11 @@ menu/collapse
## Menu Events
| Event Name | Description | Parameters |
| ---------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu, item: the selected menu item, routeResult: result returned by `vue-router` if `router` is enabled |
| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
| Name | Description | Parameters |
| ------ | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu, item: the selected menu item, routeResult: result returned by `vue-router` if `router` is enabled |
| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
## Menu Slots
@ -85,7 +85,7 @@ menu/collapse
## SubMenu Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------- | ----------------------------------------------- |
| index | unique identification | string | — | — |
| popper-class | custom class name for the popup menu | string | — | — |
@ -108,17 +108,17 @@ menu/collapse
## Menu-Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | --------------------- | ----------- | --------------- | ------- |
| index | unique identification | string/null | — | null |
| route | Vue Router object | object | — | — |
| disabled | whether disabled | boolean | — | false |
| Name | Description | Type | Accepted Values | Default |
| -------- | --------------------- | ----------- | --------------- | ------- |
| index | unique identification | string/null | — | null |
| route | Vue Router object | object | — | — |
| disabled | whether disabled | boolean | — | false |
## Menu-Item Events
| Event Name | Description | Parameters |
| ---------- | ------------------------------------------- | ---------------------- |
| click | callback function when menu-item is clicked | el: menu-item instance |
| Name | Description | Parameters |
| ----- | ------------------------------------------- | ---------------------- |
| click | callback function when menu-item is clicked | el: menu-item instance |
## Menu-Item Slots
@ -129,9 +129,9 @@ menu/collapse
## Menu-Item-Group Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------- | ------ | --------------- | ------- |
| title | group title | string | — | — |
| Name | Description | Type | Accepted Values | Default |
| ----- | ----------- | ------ | --------------- | ------- |
| title | group title | string | — | — |
## Menu-Item-Group Slots

16
docs/en-US/component/page-header.md
View File

@ -100,17 +100,17 @@ The component is consisted of these parts
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | -------------- | --------------------- | --------------- | ------- |
| icon | icon component | `string \| Component` | — | Back |
| title | main title | string | — | Back |
| content | content | string | — | — |
| Name | Description | Type | Accepted Values | Default |
| ------- | -------------- | --------------------- | --------------- | ------- |
| icon | icon component | `string \| Component` | — | Back |
| title | main title | string | — | Back |
| content | content | string | — | — |
## Events
| Event Name | Description | Parameters |
| ---------- | ----------------------------------- | ---------- |
| back | triggers when right side is clicked | — |
| Name | Description | Parameters |
| ---- | ----------------------------------- | ---------- |
| back | triggers when right side is clicked | — |
## Slots

6
docs/en-US/component/pagination.md
View File

@ -63,7 +63,7 @@ pagination/more-elements
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------ | -------------------------------------- |
| small | whether to use small pagination | boolean | — | false |
| background | whether the buttons have a background color | boolean | — | false |
@ -71,7 +71,7 @@ pagination/more-elements
| default-page-size | default initial value of page size | number | - | - |
| total | total item count | number | — | — |
| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | odd number between 5 and 21 | 7 |
| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | (odd number between 5 and 21) | 7 |
| current-page | current page number, supports the v-model bidirectional binding | number | — | 1 |
| default-current-page | default initial value of current-page | number | - | - |
| layout | layout of Pagination, elements separated with a comma | string | `sizes` / `prev` / `pager` / `next` / `jumper` / `->` / `total` / `slot` | 'prev, pager, next, jumper, ->, total' |
@ -96,7 +96,7 @@ We'll detect some deprecated usages, if your pagination don't appeared or worked
## Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| -------------- | ----------------------------------------------------------------- | -------------------- |
| size-change | triggers when `page-size` changes | the new page size |
| current-change | triggers when `current-page` changes | the new current page |

10
docs/en-US/component/popconfirm.md
View File

@ -39,7 +39,7 @@ popconfirm/trigger-event
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ------------------- | ----------------------------------------------------------------------------------- | --------------------- | -------------------------------------------------- | --------------- |
| title | Title | String | — | — |
| confirm-button-text | Confirm button text | String | — | — |
@ -61,7 +61,7 @@ popconfirm/trigger-event
## Events
| Event Name | Description | Parameters |
| ---------- | ---------------------------------- | ---------- |
| confirm | triggers when click confirm button | — |
| cancel | triggers when click cancel button | — |
| Name | Description | Parameters |
| ------- | ---------------------------------- | ---------- |
| confirm | triggers when click confirm button | — |
| cancel | triggers when click cancel button | — |

4
docs/en-US/component/popover.md
View File

@ -64,7 +64,7 @@ popover/directive-usage
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| trigger | how the popover is triggered | string | click/focus/hover/contextmenu | click |
| title | popover title | string | — | — |
@ -95,7 +95,7 @@ popover/directive-usage
## Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| ------------ | --------------------------------------------- | ---------- |
| show | triggers when popover shows | — |
| before-enter | triggers when the entering transition befores | — |

4
docs/en-US/component/progress.md
View File

@ -71,9 +71,9 @@ progress/indeterminate-progress
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| -------------- | ------------------------------------------------------------------------------------- | --------------------- | ------------------------- | ------- |
| percentage | percentage, **required** | number | 0-100 | 0 |
| percentage | percentage, **required** | number | (0-100) | 0 |
| type | the type of progress bar | string | line/circle/dashboard | line |
| stroke-width | the width of progress bar | number | — | 6 |
| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |

26
docs/en-US/component/radio.md
View File

@ -57,7 +57,7 @@ radio/with-borders
## Radio Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------ | ------------------------- | ---------------------- | ------- |
| model-value / v-model | binding value | string / number / boolean | — | — |
| label | the value of Radio | string / number / boolean | — | — |
@ -68,9 +68,9 @@ radio/with-borders
## Radio Events
| Event Name | Description | Parameters |
| ---------- | ------------------------------------- | ----------------------------------- |
| change | triggers when the bound value changes | the label value of the chosen radio |
| Name | Description | Parameters |
| ------ | ------------------------------------- | ----------------------------------- |
| change | triggers when the bound value changes | the label value of the chosen radio |
## Radio Slots
@ -80,7 +80,7 @@ radio/with-borders
## Radio-group Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------- | ------------------------- | ----------------------- | ------- |
| model-value / v-model | binding value | string / number / boolean | — | — |
| size | the size of radio | string | large / default / small | default |
@ -91,9 +91,9 @@ radio/with-borders
## Radio-group Events
| Event Name | Description | Parameters |
| ---------- | ------------------------------------- | ----------------------------------- |
| change | triggers when the bound value changes | the label value of the chosen radio |
| Name | Description | Parameters |
| ------ | ------------------------------------- | ----------------------------------- |
| change | triggers when the bound value changes | the label value of the chosen radio |
## Radio-group Slots
@ -103,11 +103,11 @@ radio/with-borders
## Radio-button Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------- | --------------- | --------------- | ------- |
| label | the value of radio | string / number | — | — |
| disabled | whether radio is disabled | boolean | — | false |
| name | native 'name' attribute | string | — | — |
| Name | Description | Type | Accepted Values | Default |
| -------- | ------------------------- | --------------- | --------------- | ------- |
| label | the value of radio | string / number | — | — |
| disabled | whether radio is disabled | boolean | — | false |
| name | native 'name' attribute | string | — | — |
## Radio-button Slots

12
docs/en-US/component/rate.md
View File

@ -77,7 +77,7 @@ Use `css/scss` language to change the global or local color. We set some global
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | ----------------------- | ------------------------------------------------------------------ |
| model-value / v-model | binding value | number | — | 0 |
| max | max rating score | number | — | 5 |
@ -90,8 +90,8 @@ Use `css/scss` language to change the global or local color. We set some global
| void-color | color of unselected icons | string | — | #C6D1DE |
| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
| icons | icon components. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon component | array/object | — | [StarFilled, StarFilled, StarFilled] |
| void-icon | component of unselected icons | string/component | — | Star |
| disabled-void-icon | component of unselected read-only icons | string/component | — | StarFilled |
| void-icon | component of unselected icons | string/Component | — | Star |
| disabled-void-icon | component of unselected read-only icons | string/Component | — | StarFilled |
| show-text | whether to display texts | boolean | — | false |
| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false |
| text-color | color of texts | string | — | #1F2D3D |
@ -100,6 +100,6 @@ Use `css/scss` language to change the global or local color. We set some global
## Events
| Event Name | Description | Parameters |
| ---------- | ----------------------------------- | -------------------- |
| change | Triggers when rate value is changed | value after changing |
| Name | Description | Parameters |
| ------ | ----------------------------------- | -------------------- |
| change | Triggers when rate value is changed | value after changing |

2
docs/en-US/component/result.md
View File

@ -25,7 +25,7 @@ result/customized-content
## Result Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------- | ----------- | ------ | -------------------------------- | ------- |
| title | title | string | — | — |
| sub-title | sub title | string | — | — |

8
docs/en-US/component/scrollbar.md
View File

@ -41,7 +41,7 @@ scrollbar/manual-scroll
## Scrollbar Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------- | ------- |
| height | height of scrollbar | string / number | — | — |
| max-height | max height of scrollbar | string / number | — | — |
@ -57,9 +57,9 @@ scrollbar/manual-scroll
## Scrollbar Events
| Event Name | Description | Parameters |
| ---------- | ----------------------- | ------------------------------------------------- |
| scroll | triggers when scrolling | distance of scrolling `{ scrollLeft, scrollTop }` |
| Name | Description | Parameters |
| ------ | ----------------------- | ------------------------------------------------- |
| scroll | triggers when scrolling | distance of scrolling `{ scrollLeft, scrollTop }` |
## Scrollbar Methods

4
docs/en-US/component/select-v2.md
View File

@ -135,7 +135,7 @@ select-v2/use-valueKey
## SelectV2 Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------- |
| model-value / v-model | biding value | string / number / boolean / object | — | — |
| multiple | is multiple | boolean | — | false |
@ -177,7 +177,7 @@ select-v2/use-valueKey
## SelectV2 Events
| Event Name | Description | Params |
| Name | Description | Params |
| -------------- | ------------------------------------------------------------- | ----------------------------------------- |
| change | triggers when the selected value changes | current selected value |
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |

22
docs/en-US/component/select.md
View File

@ -111,7 +111,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
## Select Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ---------------- |
| model-value / v-model | binding value | array / string / number / boolean / object | — | — |
| multiple | whether multiple-select is activated | boolean | true / false | false |
@ -153,7 +153,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
## Select Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| -------------- | ------------------------------------------------------------- | ----------------------------------------- |
| change | triggers when the selected value changes | current selected value |
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
@ -172,10 +172,10 @@ If the binding value of Select is an object, make sure to assign `value-key` as
## Option Group Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | -------------------------------------------- | ------- | --------------- | ------- |
| label | name of the group | string | — | — |
| disabled | whether to disable all options in this group | boolean | — | false |
| Name | Description | Type | Accepted Values | Default |
| -------- | -------------------------------------------- | ------- | --------------- | ------- |
| label | name of the group | string | — | — |
| disabled | whether to disable all options in this group | boolean | — | false |
## Option Group Slots
@ -185,11 +185,11 @@ If the binding value of Select is an object, make sure to assign `value-key` as
## Option Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------------------------- | ---------------------------------- | --------------- | ------- |
| value | value of option | string / number / boolean / object | — | — |
| label | label of option, same as `value` if omitted | string/number | — | — |
| disabled | whether option is disabled | boolean | — | false |
| Name | Description | Type | Accepted Values | Default |
| -------- | ------------------------------------------- | ---------------------------------- | --------------- | ------- |
| value | value of option | string / number / boolean / object | — | — |
| label | label of option, same as `value` if omitted | string/number | — | — |
| disabled | whether option is disabled | boolean | — | false |
## Option Slots

4
docs/en-US/component/skeleton.md
View File

@ -89,7 +89,7 @@ skeleton/avoiding-rendering-bouncing
### Skeleton Attributes
| Attribute | Description | Type | Default |
| Name | Description | Type | Default |
| ---------- | ---------------------------------------------------------------- | --------- | ------- |
| `animated` | whether showing the animation | `boolean` | `false` |
| `count` | how many fake items to render to the DOM | `number` | `1` |
@ -108,6 +108,6 @@ skeleton/avoiding-rendering-bouncing
### Skeleton Item Attributes
| Attribute | Description | Type | Default |
| Name | Description | Type | Default |
| --------- | ----------------------------------- | ----------------------------------------------------------------------------------------- | -------- |
| `variant` | The current rendering skeleton type | `'p' \| 'text' \| 'h1' \| 'h3' \| 'caption' \| 'button' \| 'image' \| 'circle' \| 'rect'` | `'text'` |

60
docs/en-US/component/slider.md
View File

@ -83,36 +83,36 @@ slider/show-marks
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------- | ------- |
| model-value / v-model | binding value | number | — | 0 |
| min | minimum value | number | — | 0 |
| max | maximum value | number | — | 100 |
| disabled | whether Slider is disabled | boolean | — | false |
| step | step size | number | — | 1 |
| show-input | whether to display an input box, works when `range` is false | boolean | — | false |
| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
| size | size of the slider wrapper, will not work in vertical mode | string | large / default / small | default |
| input-size | size of the input box, when set `size`, the default is the value of `size` | string | large / default / small | default |
| show-stops | whether to display breakpoints | boolean | — | false |
| show-tooltip | whether to display tooltip value | boolean | — | true |
| format-tooltip | format to display tooltip value | function(value) | — | — |
| range | whether to select a range | boolean | — | false |
| vertical | vertical mode | boolean | — | false |
| height | Slider height, required in vertical mode | string | — | — |
| label | label for screen reader | string | — | — |
| range-start-label | when `range` is true, screen reader label for the start of the range | string | — | — |
| range-end-label | when `range` is true, screen reader label for the end of the range | string | — | — |
| format-value-text | format to display the `aria-valuenow` attribute for screen readers | function(value) | — | — |
| debounce | debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
| tooltip-class | custom class name for the tooltip | string | — | — |
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | top |
| marks | marks， type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style | object | — | — |
| validate-event | whether to trigger form validation | boolean | - | true |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------- | ------- |
| model-value / v-model | binding value | number | — | 0 |
| min | minimum value | number | — | 0 |
| max | maximum value | number | — | 100 |
| disabled | whether Slider is disabled | boolean | — | false |
| step | step size | number | — | 1 |
| show-input | whether to display an input box, works when `range` is false | boolean | — | false |
| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
| size | size of the slider wrapper, will not work in vertical mode | string | large / default / small | default |
| input-size | size of the input box, when set `size`, the default is the value of `size` | string | large / default / small | default |
| show-stops | whether to display breakpoints | boolean | — | false |
| show-tooltip | whether to display tooltip value | boolean | — | true |
| format-tooltip | format to display tooltip value | function(value) | — | — |
| range | whether to select a range | boolean | — | false |
| vertical | vertical mode | boolean | — | false |
| height | Slider height, required in vertical mode | string | — | — |
| label | label for screen reader | string | — | — |
| range-start-label | when `range` is true, screen reader label for the start of the range | string | — | — |
| range-end-label | when `range` is true, screen reader label for the end of the range | string | — | — |
| format-value-text | format to display the `aria-valuenow` attribute for screen readers | function(value) | — | — |
| debounce | debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
| tooltip-class | custom class name for the tooltip | string | — | — |
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | top |
| marks | marks, type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style | object | — | — |
| validate-event | whether to trigger form validation | boolean | - | true |
## Events
| Event Name | Description | Parameters |
| ---------- | ----------------------------------------------------------------------------------------------------------------- | -------------------- |
| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing |
| input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |
| Name | Description | Parameters |
| ------ | ----------------------------------------------------------------------------------------------------------------- | -------------------- |
| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing |
| input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |

24
docs/en-US/component/space.md
View File

@ -121,18 +121,18 @@ space/fill-ratio
## Space Attributes
| Attribute | Description | Type | Available value | Default |
| ---------- | ------------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ---------- |
| alignment | Controls the alignment of items | string | [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | 'center' |
| class | Classname | string / Array<Record<string, boolean> \| String> / Record<string, boolean> | - | - |
| direction | Placement direction | string | vertical/horizontal | horizontal |
| prefixCls | Prefix for space-items | string | el-space | - |
| style | Extra style rules | string / Array<Object \| String> / Object | - | - |
| spacer | Spacer | string / number / VNode | - | - |
| size | Spacing size | string / number / [number, number] | - | 'small' |
| wrap | Auto wrapping | boolean | true / false | false |
| fill | Whether to fill the container | boolean | true / false | false |
| fill-ratio | Ratio of fill | number | - | 100 |
| Name | Description | Type | Available value | Default |
| ---------- | ------------------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ---------- |
| alignment | Controls the alignment of items | string | [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | 'center' |
| class | Classname | string / Array\<Record\<string, boolean\> \| String\> / Record\<string, boolean\> | - | - |
| direction | Placement direction | string | vertical/horizontal | horizontal |
| prefixCls | Prefix for space-items | string | el-space | - |
| style | Extra style rules | string / Array\<Object \| String\> / Object | - | - |
| spacer | Spacer | string / number / VNode | - | - |
| size | Spacing size | string / number / [number, number] | - | 'small' |
| wrap | Auto wrapping | boolean | true / false | false |
| fill | Whether to fill the container | boolean | true / false | false |
| fill-ratio | Ratio of fill | number | - | 100 |
## Space Slot

4
docs/en-US/component/steps.md
View File

@ -79,7 +79,7 @@ steps/simple
## Steps Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| -------------- | ----------------------------------------------------------------------------- | --------------- | ----------------------------------------- | ---------- |
| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — |
| direction | display direction | string | vertical/horizontal | horizontal |
@ -97,7 +97,7 @@ steps/simple
## Step Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ----------- | ------------------------------------------------------------------------ | --------------------- | ----------------------------------------- | ------- |
| title | step title | string | — | — |
| description | step description | string | — | — |

8
docs/en-US/component/switch.md
View File

@ -81,7 +81,7 @@ switch/prevent-switching
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------------------- | ------- |
| model-value / v-model | binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type | boolean / string / number | — | — |
| disabled | whether Switch is disabled | boolean | — | false |
@ -104,9 +104,9 @@ switch/prevent-switching
## Events
| Event Name | Description | Parameters |
| ---------- | --------------------------- | -------------------- |
| change | triggers when value changes | value after changing |
| Name | Description | Parameters |
| ------ | --------------------------- | -------------------- |
| change | triggers when value changes | value after changing |
## Methods

10
docs/en-US/component/table-v2.md
View File

@ -296,7 +296,7 @@ table-v2/manual-scroll
## TableV2 Attributes
| Attribute | Description | Type | Default |
| Name | Description | Type | Default |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | --------- |
| cache | Number of rows rendered in advance for boosting the performance | Number | 2 |
| estimated-row-height | The estimated row height for rendering dynamic height rows | Number | - |
@ -340,9 +340,9 @@ table-v2/manual-scroll
| empty | - |
| overlay | - |
## Table Events
## TableV2 Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| -------------------- | --------------------------------------------- | ---------------------------------------- |
| column-sort | Invoked when column sorted | Object\<ColumnSortParam\> |
| expanded-rows-change | Invoked when expanded rows changed | `Array<KeyType>` |
@ -351,7 +351,7 @@ table-v2/manual-scroll
| rows-rendered | Invoked when rows are rendered | Object\<[RowsRenderedParams](#typings)\> |
| row-event-handlers | A collection of handlers attached to each row | Object\<[RowEventHandlers](#typings)\> |
## Table Methods
## TableV2 Methods
| Event Name | Description | Parameters |
| ------------ | ---------------------------------------------------- | -------------------------------------------------------------------------- |
@ -368,7 +368,7 @@ Note that these are `JavaScript` Objects, so that you **CANNOT USE** kebab-case
## Column Attribute
| Attribute | Description | Type | Default |
| Name | Description | Type | Default |
| -------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| align | Alignment of the table cell content | [Alignment](https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L6) | left |
| class | Class name for the column | String | - |

86
docs/en-US/component/table.md
View File

@ -215,48 +215,48 @@ table/table-layout
## Table Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------ |
| data | Table data | array | — | — |
| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string / number | — | — |
| max-height | Table's max-height. The legal value is a number or the height in px. | string / number | — | — |
| stripe | whether Table is striped | boolean | — | false |
| border | whether Table has vertical border | boolean | — | false |
| size | size of Table | string | large / default /small | — |
| fit | whether width of column automatically fits its container | boolean | — | true |
| show-header | whether Table header is visible | boolean | — | true |
| highlight-current-row | whether current row is highlighted | boolean | — | false |
| current-row-key | key of current row, a set only prop | string / number | — | — |
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | function(\{ row, rowIndex \}) / string | — | — |
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | function(\{ row, rowIndex \}) / object | — | — |
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | function(\{ row, column, rowIndex, columnIndex \}) / string | — | — |
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | function(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | function(\{ row, rowIndex }\) / string | — | — |
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | function(\{ row, rowIndex \}) / object | — | — |
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | function(\{ row, column, rowIndex, columnIndex \}) / string | — | — |
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | function(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | function(row) / string | — | — |
| empty-text | Displayed text when data is empty. You can customize this area with `#empty` | string | — | No Data |
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | boolean | — | false |
| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | array | — | — |
| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | object | `order`: ascending / descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
| tooltip-effect | tooltip `effect` property | string | dark / light | dark |
| show-summary | whether to display a summary row | boolean | — | false |
| sum-text | displayed text for the first column of summary row | string | — | Sum |
| summary-method | custom summary method | function(\{ columns, data \}) | — | — |
| span-method | method that returns rowspan and colspan | function(\{ row, column, rowIndex, columnIndex \}) | — | — |
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | boolean | — | true |
| indent | horizontal indentation of tree data | number | — | 16 |
| lazy | whether to lazy loading data | boolean | — | — |
| load | method for loading child row data, only works when `lazy` is true | function(row, treeNode, resolve) | — | — |
| tree-props | configuration for rendering nested data | object | — | `{ hasChildren: 'hasChildren', children: 'children' }` |
| table-layout | Sets the algorithm used to lay out table cells, rows, and columns | string | fixed / auto | fixed |
| scrollbar-always-on | always show scrollbar | boolean | — | false |
| flexible <VersionTag version="2.2.1" /> | ensure main axis minimum-size doesn't follow the content | boolean | — | false |
| Name | Description | Type | Accepted Values | Default |
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------ |
| data | Table data | array | — | — |
| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string / number | — | — |
| max-height | Table's max-height. The legal value is a number or the height in px. | string / number | — | — |
| stripe | whether Table is striped | boolean | — | false |
| border | whether Table has vertical border | boolean | — | false |
| size | size of Table | string | large / default /small | — |
| fit | whether width of column automatically fits its container | boolean | — | true |
| show-header | whether Table header is visible | boolean | — | true |
| highlight-current-row | whether current row is highlighted | boolean | — | false |
| current-row-key | key of current row, a set only prop | string / number | — | — |
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | function(\{ row, rowIndex \}) / string | — | — |
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | function(\{ row, rowIndex \}) / object | — | — |
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | function(\{ row, column, rowIndex, columnIndex \}) / string | — | — |
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | function(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | function(\{ row, rowIndex }\) / string | — | — |
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | function(\{ row, rowIndex \}) / object | — | — |
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | function(\{ row, column, rowIndex, columnIndex \}) / string | — | — |
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | function(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | function(row) / string | — | — |
| empty-text | Displayed text when data is empty. You can customize this area with `#empty` | string | — | No Data |
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | boolean | — | false |
| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | array | — | — |
| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | object | (order: 'ascending' \| 'descending') | if `prop` is set, and `order` is not set, then `order` is default to ascending |
| tooltip-effect | tooltip `effect` property | string | dark / light | dark |
| show-summary | whether to display a summary row | boolean | — | false |
| sum-text | displayed text for the first column of summary row | string | — | Sum |
| summary-method | custom summary method | function(\{ columns, data \}) | — | — |
| span-method | method that returns rowspan and colspan | function(\{ row, column, rowIndex, columnIndex \}) | — | — |
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | boolean | — | true |
| indent | horizontal indentation of tree data | number | — | 16 |
| lazy | whether to lazy loading data | boolean | — | — |
| load | method for loading child row data, only works when `lazy` is true | function(row, treeNode, resolve) | — | — |
| tree-props | configuration for rendering nested data | object | — | `{ hasChildren: 'hasChildren', children: 'children' }` |
| table-layout | Sets the algorithm used to lay out table cells, rows, and columns | string | fixed / auto | fixed |
| scrollbar-always-on | always show scrollbar | boolean | — | false |
| flexible <VersionTag version="2.2.1" /> | ensure main axis minimum-size doesn't follow the content | boolean | — | false |
## Table Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| select | triggers when user clicks the checkbox in a row | selection, row |
| select-all | triggers when user clicks the checkbox in table header | selection |
@ -305,7 +305,7 @@ table/table-layout
## Table-column Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string | selection / index / expand | — |
| index | customize indices for each row, works on columns with `type=index` | number / function(index) | — | — |
@ -316,10 +316,10 @@ table/table-layout
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string / number | — | — |
| fixed | whether column is fixed at left / right. Will be fixed at left if `true` | string / boolean | true / 'left' / 'right' | — |
| render-header | render function for table header of this column | function(\{ column, $index \}) | — | — |
| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean / string | true / false / 'custom' | false |
| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean / string | custom | false |
| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | function(a, b) | — | — |
| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | function(row, index) / string / array | — | — |
| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | the elements in the array need to be one of the following: `ascending`, `descending` and `null` (restores to the original order) | ['ascending', 'descending', null] |
| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | (the elements in the array need to be one of the following: `ascending`, `descending` and `null` restores to the original order) | ['ascending', 'descending', null] |
| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | true |
| formatter | function that formats cell content | function(row, column, cellValue, index) | — | — |
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
@ -329,7 +329,7 @@ table/table-layout
| label-class-name | class name of the label of this column | string | — | — |
| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | function(row, index) | — | — |
| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work | boolean | — | false |
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | array[{ text, value }] | — | — |
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array\<{text: string, value: string}\> | — | — |
| filter-placement | placement for the filter dropdown | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | — |
| filter-multiple | whether data filtering supports multiple options | boolean | — | true |
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | function(value, row, column) | — | — |

18
docs/en-US/component/tabs.md
View File

@ -77,7 +77,7 @@ tabs/customized-trigger
## Tabs Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------------------- | ----------------- |
| model-value / v-model | binding value, name of the selected tab | string / number | — | name of first tab |
| type | type of Tab | string | card/border-card | — |
@ -90,7 +90,7 @@ tabs/customized-trigger
## Tabs Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| ---------- | ----------------------------------------------------- | -------------------------------------------------------------------- |
| tab-click | triggers when a tab is clicked | (pane: `TabsPaneContext`, ev: `Event`) |
| tab-change | triggers when `activeName` is changed | (name: `TabPanelName`) |
@ -106,13 +106,13 @@ tabs/customized-trigger
## Tab-pane Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------------------------------------------------------------------ | --------------- | --------------- | ------------------------------------------------------------------------------ |
| label | title of the tab | string | — | — |
| disabled | whether Tab is disabled | boolean | — | false |
| name | identifier corresponding to the name of Tabs, representing the alias of the tab-pane | string / number | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '0' |
| closable | whether Tab is closable | boolean | — | false |
| lazy | whether Tab is lazily rendered | boolean | — | false |
| Name | Description | Type | Accepted Values | Default |
| -------- | ------------------------------------------------------------------------------------ | --------------- | --------------- | ------------------------------------------------------------------------------ |
| label | title of the tab | string | — | — |
| disabled | whether Tab is disabled | boolean | — | false |
| name | identifier corresponding to the name of Tabs, representing the alias of the tab-pane | string / number | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '0' |
| closable | whether Tab is closable | boolean | — | false |
| lazy | whether Tab is lazily rendered | boolean | — | false |
## Tab-pane Slots

22
docs/en-US/component/tag.md
View File

@ -75,7 +75,7 @@ tag/checkable
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ------------------- | ------------------------------------ | ------- | --------------------------- | ------- |
| type | component type | string | success/info/warning/danger | — |
| closable | whether Tag can be removed | boolean | — | false |
@ -88,10 +88,10 @@ tag/checkable
## Events
| Event Name | Description | Parameters |
| ---------- | ---------------------------- | ---------- |
| click | triggers when Tag is clicked | — |
| close | triggers when Tag is removed | — |
| Name | Description | Parameters |
| ----- | ---------------------------- | ---------- |
| click | triggers when Tag is clicked | — |
| close | triggers when Tag is removed | — |
## Slots
@ -101,15 +101,15 @@ tag/checkable
## CheckTag Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------- | ------- | --------------- | ------- |
| checked | is checked | boolean | true/false | — |
| Name | Description | Type | Accepted Values | Default |
| ------- | ----------- | ------- | --------------- | ------- |
| checked | is checked | boolean | true/false | — |
## CheckTag Events
| Event Name | Description | Parameters |
| ---------- | ---------------------------------- | ---------- |
| change | triggers when Check Tag is clicked | checked |
| Name | Description | Parameters |
| ------ | ---------------------------------- | ---------- |
| change | triggers when Check Tag is clicked | checked |
## CheckTag Slots

52
docs/en-US/component/time-picker.md
View File

@ -39,35 +39,35 @@ time-picker/range
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------- | ----------- |
| model-value / v-model | binding value, if it is an array, the length should be 2 | Date / number / string / Array | — | — |
| readonly | whether TimePicker is read only | boolean | — | false |
| disabled | whether TimePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | large / default / small | — |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start time in range mode | string | — | — |
| end-placeholder | placeholder for the end time in range mode | string | — | — |
| is-range | whether to pick a time range | boolean | — | false |
| arrow-control | whether to pick time using arrow buttons | boolean | — | false |
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
| range-separator | range separator | string | — | '-' |
| format | format of the displayed value in the input box | string | see [date formats](/en-US/component/date-picker#date-formats) | HH:mm:ss |
| default-value | optional, default date of the calendar | Date / [Date, Date] | — | — |
| id | same as `id` in native input | string / array(string) | String `id="my-time"` or array `:id="['my-range-start', 'my-range-end']"` for range | - |
| name | same as `name` in native input | string | — | — |
| prefix-icon | Custom prefix icon component | `string \| Component` | — | Clock |
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
| disabled-hours | To specify the array of hours that cannot be selected | function | — | — |
| disabled-minutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
| disabled-seconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
| teleported | whether time-picker dropdown is teleported to the body | boolean | true / false | true |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------- | ----------- |
| model-value / v-model | binding value, if it is an array, the length should be 2 | Date / number / string / Array | — | — |
| readonly | whether TimePicker is read only | boolean | — | false |
| disabled | whether TimePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | large / default / small | — |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start time in range mode | string | — | — |
| end-placeholder | placeholder for the end time in range mode | string | — | — |
| is-range | whether to pick a time range | boolean | — | false |
| arrow-control | whether to pick time using arrow buttons | boolean | — | false |
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
| range-separator | range separator | string | — | '-' |
| format | format of the displayed value in the input box | string | see [date formats](/en-US/component/date-picker#date-formats) | HH:mm:ss |
| default-value | optional, default date of the calendar | Date / [Date, Date] | — | — |
| id | same as `id` in native input | string / [string, string] | — | - |
| name | same as `name` in native input | string | — | — |
| prefix-icon | Custom prefix icon component | `string \| Component` | — | Clock |
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
| disabled-hours | To specify the array of hours that cannot be selected | function | — | — |
| disabled-minutes | To specify the array of minutes that cannot be selected | Function(selectedHour) | — | — |
| disabled-seconds | To specify the array of seconds that cannot be selected | Function(selectedHour, selectedMinute) | — | — |
| teleported | whether time-picker dropdown is teleported to the body | boolean | true / false | true |
## Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| -------------- | ---------------------------------------------------------- | ----------------------- |
| change | triggers when user confirms the value | `(val: typeof v-model)` |
| blur | triggers when Input blurs | `(e: FocusEvent)` |

12
docs/en-US/component/time-select.md
View File

@ -49,7 +49,7 @@ time-select/time-range
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------- | --------------------- | -------------------------------------------------------------------------------------- | ----------- |
| model-value / v-model | binding value | string | — | — |
| disabled | whether TimeSelect is disabled | boolean | — | false |
@ -70,11 +70,11 @@ time-select/time-range
## Events
| Event Name | Description | Parameters |
| ---------- | ------------------------------------- | ------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | (event: FocusEvent) |
| focus | triggers when Input focuses | (event: FocusEvent) |
| Name | Description | Parameters |
| ------ | ------------------------------------- | ------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | (event: FocusEvent) |
| focus | triggers when Input focuses | (event: FocusEvent) |
## Methods

2
docs/en-US/component/timeline.md
View File

@ -55,7 +55,7 @@ timeline/center
## Timeline-Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| -------------- | --------------------------- | --------------------- | ------------------------------------------- | ------- |
| timestamp | timestamp content | string | — | — |
| hide-timestamp | whether to show timestamp | boolean | — | false |

2
docs/en-US/component/tooltip.md
View File

@ -142,7 +142,7 @@ tooltip/animations
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| append-to | which element the tooltip CONTENT appends to | CSSSelector \| HTMLElement | — | #el-popper-container-[randomValue] |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | dark |

6
docs/en-US/component/transfer.md
View File

@ -45,10 +45,10 @@ transfer/prop-alias
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------------------- | ------------------------------------------------------------------------- |
| model-value / v-model | binding value | array | — | — |
| data | data source | array[`{ key, label, disabled }`] | — | [ ] |
| data | data source | array\<{ key, label, disabled }\> | — | [ ] |
| filterable | whether Transfer is filterable | boolean | — | false |
| filter-placeholder | placeholder for the filter input | string | — | Enter keyword |
| filter-method | custom filter method | function | — | — |
@ -78,7 +78,7 @@ transfer/prop-alias
## Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| ------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys |
| left-check-change | triggers when end user changes the checked state of any data item in the left list | key array of currently checked items, key array of items whose checked state have changed |

6
docs/en-US/component/tree-v2.md
View File

@ -69,7 +69,7 @@ tree-v2/filter
## TreeV2 Attributes
| Attribute | Description | Type | Default |
| Name | Description | Type | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |
| data | tree data | array | — |
| empty-text | text displayed when data is void | string | — |
@ -81,7 +81,7 @@ tree-v2/filter
| show-checkbox | whether node is selectable | boolean | false |
| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | false |
| default-checked-keys | array of keys of initially checked nodes | array | — |
| current-node-key | key of initially selected node | string, number | — |
| current-node-key | key of initially selected node | string / number | — |
| filter-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data) | — |
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | 16 |
| icon | custome tree node icon | `string \| Component` | - |
@ -118,7 +118,7 @@ tree-v2/filter
## TreeV2 Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| ---------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| node-click | triggers when a node is clicked | `(data: TreeNodeData, node: TreeNode, e: MouseEvent)` |
| node-contextmenu | triggers when a node is clicked by right button | `(e: Event, data: TreeNodeData, node: TreeNode)` |

6
docs/en-US/component/tree.md
View File

@ -115,7 +115,7 @@ tree/draggable
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Name | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | --------------- | ------- |
| data | tree data | array | — | — |
| empty-text | text displayed when data is void | string | — | — |
@ -133,7 +133,7 @@ tree/draggable
| show-checkbox | whether node is selectable | boolean | — | false |
| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false |
| default-checked-keys | array of keys of initially checked nodes | array | — | — |
| current-node-key | key of initially selected node | string, number | — | — |
| current-node-key | key of initially selected node | string / number | — | — |
| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — |
| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false |
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 |
@ -179,7 +179,7 @@ tree/draggable
## Events
| Event Name | Description | Parameters |
| Name | Description | Parameters |
| ---------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| node-click | triggers when a node is clicked | four parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself, event object |
| node-contextmenu | triggers when a node is clicked by right button | four parameters: event, node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |

2
docs/en-US/component/upload.md
View File

@ -115,7 +115,7 @@ upload/manual
| `before-upload` | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted. | `(rawFile: UploadRawFile) => Awaitable<void \| undefined \| null \| boolean \| File \| Blob>` | — | No |
| `before-remove` | hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, removing will be aborted. | `(uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable<boolean>` | — | No |
| `file-list` / `v-model:file-list` | default uploaded files. | `UploadUserFile[]` | `[]` | No |
| `list-type` | type of file list. | `"text" \| "picture" \| "picture-card"` | `'text'` | No |
| `list-type` | type of file list. | `'text' \| 'picture' \| 'picture-card'` | `'text'` | No |
| `auto-upload` | whether to auto upload file. | `boolean` | `true` | No |
| `http-request` | override default xhr behavior, allowing you to implement your own upload-file's request. | (options: UploadRequestOptions) => XMLHttpRequest \| Promise\<unknown\> | — | No |
| `disabled` | whether to disable upload. | boolean | `false` | No |

2
internal/build/package.json
View File

@ -23,7 +23,7 @@
"@vitejs/plugin-vue": "^2.3.3",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"chalk": "^5.0.1",
"components-helper": "^2.0.0",
"components-helper": "^2.1.2",
"consola": "^2.15.3",
"esbuild": "^0.14.47",
"fast-glob": "^3.2.11",

82
internal/build/src/tasks/helper.ts
View File

@ -1,5 +1,13 @@
import path from 'path'
import helper from 'components-helper'
import {
arrayToRegExp,
getTypeSymbol,
hyphenate,
isCommonType,
isEnumType,
isUnionType,
main,
} from 'components-helper'
import {
epOutput,
epPackage,
@ -13,13 +21,15 @@ import type {
ReComponentName,
ReDocUrl,
ReWebTypesSource,
ReWebTypesType,
} from 'components-helper'
const reComponentName: ReComponentName = (title: string) =>
`el-${title
.replace(/\B([A-Z])/g, '-$1')
.replace(/[ ]+/g, '-')
.toLowerCase()}`
const typeMap = {
vue: ['Component', 'VNode'],
}
const reComponentName: ReComponentName = (title) =>
`el-${hyphenate(title).replace(/[ ]+/g, '-')}`
const reDocUrl: ReDocUrl = (fileName, header) => {
const docs = 'https://element-plus.org/en-US/component/'
@ -38,22 +48,22 @@ const reWebTypesSource: ReWebTypesSource = (title) => {
return { symbol }
}
const reAttribute: ReAttribute = (value, key) => {
const reAttribute: ReAttribute = (value, key, _, title) => {
const str = value
.replace(/^\*\*(.*)\*\*$/, (_, item) => item)
.replace(/^`(.*)`$/, (_, item) => item)
.replaceAll(/<del>.*<\/del>/g, '')
if (key === 'Name' && /^(-|—)$/.test(str)) {
if (title === 'Events' && key === 'Name' && /^(-|—)$/.test(str)) {
return 'default'
} else if (str === '' || /^(-|—)$/.test(str)) {
return undefined
} else if (key === 'Attribute' && /v-model:(.+)/.test(str)) {
} else if (key === 'Name' && /v-model:(.+)/.test(str)) {
const _str = str.match(/v-model:(.+)/)
return _str ? _str[1] : undefined
} else if (key === 'Attribute' && /v-model/.test(str)) {
} else if (key === 'Name' && /v-model/.test(str)) {
return 'model-value'
} else if (key === 'Attribute') {
} else if (key === 'Name') {
return str
.replaceAll(/\s*[\\*]\s*/g, '')
.replaceAll(/\s*<.*>\s*/g, '')
@ -62,14 +72,14 @@ const reAttribute: ReAttribute = (value, key) => {
.toLowerCase()
} else if (key === 'Type') {
return str
.replace(/\s*\/\s*/g, '|')
.replace(/\s*,\s*/g, '|')
.replace(/\(.*\)/g, '')
.toLowerCase()
.replaceAll(/\bfunction(\(.*\))?(:\s*\w+)?\b/gi, 'Function')
.replaceAll(/\bdate\b/g, 'Date')
.replaceAll(/\bstring \| Component\b/g, 'string / Component')
.replaceAll(/\([^)]*\)(?!\s*=>)/g, '')
} else if (key === 'Accepted Values') {
return /\[.+\]\(.+\)/.test(str) || /^\*$/.test(str)
? undefined
: str.replace(/`/g, '')
: str.replaceAll(/`/g, '').replaceAll(/\([^)]*\)(?!\s*=>)/g, '')
} else if (key === 'Subtags') {
return str
? `el-${str
@ -83,6 +93,41 @@ const reAttribute: ReAttribute = (value, key) => {
}
}
const reWebTypesType: ReWebTypesType = (type) => {
const isEnum = isEnumType(type)
const isTuple = /^\[.*\]$/.test(type)
const isArrowFunction = /^\(.*\)\s*=>\s*\w+/.test(type)
const isPublicType = isCommonType(type)
const symbol = getTypeSymbol(type)
const isUnion = isUnionType(symbol)
const module = findModule(type)
return isEnum ||
isTuple ||
isArrowFunction ||
isPublicType ||
!symbol ||
isUnion
? type
: { name: type, source: { symbol, module } }
}
const findModule = (type: string): string | undefined => {
let result: string | undefined = undefined
for (const key in typeMap) {
const regExp = arrayToRegExp(typeMap[key as keyof typeof typeMap])
const inModule = regExp.test(getTypeSymbol(type))
if (inModule) {
result = key
break
}
}
return result
}
export const buildHelper: TaskFunction = (done) => {
const { name, version } = getPackageManifest(epPackage)
@ -93,7 +138,7 @@ export const buildHelper: TaskFunction = (done) => {
: tagVer
: version!
helper({
main({
name: name!,
version: _version,
entry: `${path.resolve(
@ -105,10 +150,9 @@ export const buildHelper: TaskFunction = (done) => {
reDocUrl,
reWebTypesSource,
reAttribute,
reWebTypesType,
props: 'Attributes',
propsName: 'Attribute',
propsOptions: 'Accepted Values',
eventsName: 'Event Name',
tableRegExp:
/#+\s+(.*\s*Attributes|.*\s*Events|.*\s*Slots|.*\s*Directives)\s*\n+(\|?.+\|.+)\n\|?\s*:?-+:?\s*\|.+((\n\|?.+\|.+)+)/g,
})

10
pnpm-lock.yaml generated
View File

@ -244,7 +244,7 @@ importers:
'@vitejs/plugin-vue': ^2.3.3
'@vitejs/plugin-vue-jsx': ^1.3.10
chalk: ^5.0.1
components-helper: ^2.0.0
components-helper: ^2.1.2
consola: ^2.15.3
esbuild: ^0.14.47
fast-glob: ^3.2.11
@ -266,7 +266,7 @@ importers:
'@vitejs/plugin-vue': 2.3.3_vue@3.2.37
'@vitejs/plugin-vue-jsx': 1.3.10
chalk: 5.0.1
components-helper: 2.0.0
components-helper: 2.1.2
consola: 2.15.3
esbuild: 0.14.47
fast-glob: 3.2.11
@ -4748,8 +4748,8 @@ packages:
resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
dev: false
/components-helper/2.0.0:
resolution: {integrity: sha512-MMN9Us4jhEepMGhp7jQ/7DM5CTDMD1sl4hRZQacjXW9f3omtPjcEExMkETosKJoUD9NIdsJ+f4PAD7hye8Wy0Q==}
/components-helper/2.1.2:
resolution: {integrity: sha512-KGzom/KUa/y8nL59Q+XPV/ARiHzVIAR1AJlJEmrV4zCJBVCXqbvGbpFxdtEugy6mICBrWdpeDzcewzwCjHewyw==}
engines: {node: '>10.0.0'}
dependencies:
fast-glob: 3.2.11
@ -4815,8 +4815,8 @@ packages:
engines: {node: '>=10'}
hasBin: true
dependencies:
is-text-path: 1.0.1
JSONStream: 1.3.5
is-text-path: 1.0.1
lodash: 4.17.21
meow: 8.1.2
split2: 3.2.2