javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(utils): fix iconPropType (#9506)

Browse Source
This commit is contained in:
zz
2022-08-28 19:13:58 +08:00
committed by GitHub
parent ba15302200
commit 3be8b536b8
25 changed files with 264 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,10 +25,10 @@ breadcrumb/icon
## Breadcrumb Attributes
| Attribute | Description | Type | Accepted Values | Default |
| -------------- | -------------------------------- | ---------------------------- | --------------- | ------- |
| separator | separator character | string | — | / |
| separator-icon | icon component of icon separator | `Component \| (() => VNode)` | — | - |
| Attribute | Description | Type | Accepted Values | Default |
| -------------- | -------------------------------- | -------------------------------------- | --------------- | ------- |
| separator | separator character | string | — | / |
| separator-icon | icon component of icon separator | `string \| Component \| (() => VNode)` | — | - |
## Breadcrumb Slots

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

@@ -125,23 +125,23 @@ button/custom
## Button Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ----------------------------------- | --------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------- | ------- |
| size | button size | string | large / default /small | — |
| type | button type | string | primary / success / warning / danger / info / <del>text</del> | — |
| plain | determine whether it's a plain button | boolean | — | false |
| text <VersionTag version="2.2.0" /> | determine whether it's a text button | boolean | — | false |
| bg <VersionTag version="2.2.0" /> | determine whether the text button background color is always on | boolean | — | false |
| link <VersionTag version="2.2.1" /> | determine whether it's a link button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false |
| circle | determine whether it's a circle button | boolean | — | false |
| loading | determine whether it's loading | boolean | — | false |
| loading-icon | customize loading icon component | `Component \| (() => VNode)` | — | Loading |
| disabled | disable the button | boolean | — | false |
| icon | icon component | `Component \| (() => VNode)` | — | — |
| autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button / submit / reset | button |
| auto-insert-space | automatically insert a space between two chinese characters | boolean | | — |
| Attribute | Description | Type | Accepted Values | Default |
| ----------------------------------- | --------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------- | ------- |
| size | button size | string | large / default /small | — |
| type | button type | string | primary / success / warning / danger / info / <del>text</del> | — |
| plain | determine whether it's a plain button | boolean | — | false |
| text <VersionTag version="2.2.0" /> | determine whether it's a text button | boolean | — | false |
| bg <VersionTag version="2.2.0" /> | determine whether the text button background color is always on | boolean | — | false |
| link <VersionTag version="2.2.1" /> | determine whether it's a link button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false |
| circle | determine whether it's a circle button | boolean | — | false |
| loading | determine whether it's loading | boolean | — | false |
| loading-icon | customize loading icon component | `string \| Component \| (() => VNode)` | — | Loading |
| disabled | disable the button | boolean | — | false |
| icon | icon component | `string \| Component \| (() => VNode)` | — | — |
| autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button / submit / reset | button |
| auto-insert-space | automatically insert a space between two chinese characters | boolean | | — |
## Button Slots

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

@@ -160,8 +160,8 @@ Note, date time locale (month name, first day of the week ...) are also configur
| 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 | `Component \| (() => VNode)` | — | Date |
| clear-icon | custom clear icon component | `Component \| (() => VNode)` | — | CircleClose |
| prefix-icon | custom prefix icon component | `string \| Component \| (() => VNode)` | — | Date |
| clear-icon | custom clear icon component | `string \| Component \| (() => VNode)` | — | 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 }] | — | — |

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

@@ -81,8 +81,8 @@ datetime-picker/default-time
| 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 | `Component \| (() => VNode)` | — | Date |
| clear-icon | Custom clear icon component | `Component \| (() => VNode)` | — | CircleClose |
| prefix-icon | Custom prefix icon component | `string \| Component \| (() => VNode)` | — | Date |
| clear-icon | Custom clear icon component | `string \| Component \| (() => VNode)` | — | CircleClose |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |

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

@@ -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 | `Component \| (() => VNode)` | — | — |
| 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 \| (() => VNode)` | — | — |
## Dropdown-Item Slots

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

@@ -131,8 +131,8 @@ input/length-limiting
| 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 | `Component \| (() => VNode)` | — | — |
| suffix-icon | suffix icon component | `Component \| (() => VNode)` | — | — |
| prefix-icon | prefix icon component | `string \| Component \| (() => VNode)` | — | — |
| suffix-icon | suffix icon component | `string \| Component \| (() => VNode)` | — | — |
| 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 |

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

@@ -55,13 +55,13 @@ link/with-icon
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------- | ---------------------------- | ----------------------------------------------------- | ------- |
| type | type | string | primary / success / warning / danger / info / default | default |
| underline | whether the component has underline | boolean | — | true |
| disabled | whether the component is disabled | boolean | — | false |
| href | same as native hyperlink's `href` | string | — | - |
| icon | icon component | `Component \| (() => VNode)` | — | - |
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------- | -------------------------------------- | ----------------------------------------------------- | ------- |
| type | type | string | primary / success / warning / danger / info / default | default |
| underline | whether the component has underline | boolean | — | true |
| disabled | whether the component is disabled | boolean | — | false |
| href | same as native hyperlink's `href` | string | — | - |
| icon | icon component | `string \| Component \| (() => VNode)` | — | - |
## Slots

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

@@ -85,19 +85,19 @@ menu/collapse
## SubMenu Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------- | ----------------------------------------------- |
| index | unique identification | string | — | — |
| popper-class | custom class name for the popup menu | string | — | — |
| show-timeout | timeout before showing a sub-menu | number | — | 300 |
| hide-timeout | timeout before hiding a sub-menu | number | — | 300 |
| disabled | whether the sub-menu is disabled | boolean | — | false |
| popper-append-to-body(deprecated) | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop | boolean | — | level one SubMenu: true / other SubMenus: false |
| popper-offset | offset of the popper | number | — | 6 |
| expand-close-icon | Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect | `Component \| (() => VNode)` | — | — |
| expand-open-icon | Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect | `Component \| (() => VNode)` | — | — |
| collapse-close-icon | Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect | `Component \| (() => VNode)` | — | — |
| collapse-open-icon | Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect | `Component \| (() => VNode)` | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | --------------- | ----------------------------------------------- |
| index | unique identification | string | — | — |
| popper-class | custom class name for the popup menu | string | — | — |
| show-timeout | timeout before showing a sub-menu | number | — | 300 |
| hide-timeout | timeout before hiding a sub-menu | number | — | 300 |
| disabled | whether the sub-menu is disabled | boolean | — | false |
| popper-append-to-body(deprecated) | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop | boolean | — | level one SubMenu: true / other SubMenus: false |
| popper-offset | offset of the popper | number | — | 6 |
| expand-close-icon | Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect | `string \| Component \| (() => VNode)` | — | — |
| expand-open-icon | Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect | `string \| Component \| (() => VNode)` | — | — |
| collapse-close-icon | Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect | `string \| Component \| (() => VNode)` | — | — |
| collapse-open-icon | Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect | `string \| Component \| (() => VNode)` | — | — |
## SubMenu Slots

2
docs/en-US/component/message-box.md
View File

@@ -159,7 +159,7 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB
| message | content of the MessageBox | string | — | — |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
| type | message type, used for icon display | string | success / info / warning / error | — |
| icon | custom icon component, overrides `type` | `Component \| (() => VNode)` | — | — |
| icon | custom icon component, overrides `type` | `string \| Component \| (() => VNode)` | — | — |
| custom-class | custom class name for MessageBox | string | — | — |
| custom-style | custom inline style for MessageBox | CSSProperties | — | — |
| callback | MessageBox closing callback if you don't prefer Promise | function(action, instance), where `action` can be 'confirm', 'cancel' or 'close', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |

32
docs/en-US/component/notification.md
View File

@@ -106,22 +106,22 @@ ElNotification({}, appContext)
## Options
| Attribute | Description | Type | Accepted Values | Default |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------- | ------------- |
| title | title | string | — | — |
| message | description text | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
| type | notification type | string | success/warning/info/error | — |
| icon | custom icon component. It will be overridden by `type` | `Component \| (() => VNode)` | — | — |
| customClass | custom class name for Notification | string | — | — |
| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
| position | custom position | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | whether to show a close button | boolean | — | true |
| onClose | callback function when closed | function | — | — |
| onClick | callback function when notification clicked | function | — | — |
| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |
| appendTo | set the root element for the notification | string / HTMLElement | - | document.body |
| zIndex | initial zIndex | number | - | 0 |
| Attribute | Description | Type | Accepted Values | Default |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------- | ------------------------------------------- | ------------- |
| title | title | string | — | — |
| message | description text | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
| type | notification type | string | success/warning/info/error | — |
| icon | custom icon component. It will be overridden by `type` | `string \| Component \| (() => VNode)` | — | — |
| customClass | custom class name for Notification | string | — | — |
| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
| position | custom position | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | whether to show a close button | boolean | — | true |
| onClose | callback function when closed | function | — | — |
| onClick | callback function when notification clicked | function | — | — |
| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |
| appendTo | set the root element for the notification | string / HTMLElement | - | document.body |
| zIndex | initial zIndex | number | - | 0 |
## Methods

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

@@ -100,11 +100,11 @@ The component is consisted of these parts
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | -------------- | ---------------------------- | --------------- | ------- |
| icon | icon component | `Component \| (() => VNode)` | — | Back |
| title | main title | string | — | Back |
| content | content | string | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------- | -------------- | -------------------------------------- | --------------- | ------- |
| icon | icon component | `string \| Component \| (() => VNode)` | — | Back |
| title | main title | string | — | Back |
| content | content | string | — | — |
## Events

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

@@ -63,26 +63,26 @@ pagination/more-elements
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------ | -------------------------------------- |
| small | whether to use small pagination | boolean | — | false |
| background | whether the buttons have a background color | boolean | — | false |
| page-size | item count of each page, supports the v-model bidirectional binding | number | — | 10 |
| 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 |
| 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' |
| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | custom class name for the page size Select's dropdown | string | — | — |
| prev-text | text for the prev button | string | — | — |
| prev-icon | icon for the prev button, higher priority of `prev-text` | `Component \| (() => VNode)` | — | ArrowLeft |
| next-text | text for the next button | string | — | — |
| next-icon | icon for the next button, higher priority of `next-text` | `Component \| (() => VNode)` | — | ArrowRight |
| disabled | whether Pagination is disabled | boolean | — | false |
| hide-on-single-page | whether to hide when there's only one page | boolean | — | - |
| Attribute | Description | Type | Accepted Values | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------- |
| small | whether to use small pagination | boolean | — | false |
| background | whether the buttons have a background color | boolean | — | false |
| page-size | item count of each page, supports the v-model bidirectional binding | number | — | 10 |
| 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 |
| 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' |
| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | custom class name for the page size Select's dropdown | string | — | — |
| prev-text | text for the prev button | string | — | — |
| prev-icon | icon for the prev button, higher priority of `prev-text` | `string \| Component \| (() => VNode)` | — | ArrowLeft |
| next-text | text for the next button | string | — | — |
| next-icon | icon for the next button, higher priority of `next-text` | `string \| Component \| (() => VNode)` | — | ArrowRight |
| disabled | whether Pagination is disabled | boolean | — | false |
| hide-on-single-page | whether to hide when there's only one page | boolean | — | - |
:::warning

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

@@ -39,19 +39,19 @@ popconfirm/trigger-event
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ------------------- | ----------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------- | --------------- |
| title | Title | String | — | — |
| confirm-button-text | Confirm button text | String | — | — |
| cancel-button-text | Cancel button text | String | — | — |
| confirm-button-type | Confirm button type | String | primary / success / warning / danger / info / text | primary |
| cancel-button-type | Cancel button type | String | primary / success / warning / danger / info / text | text |
| icon | Icon Component | `Component \| (() => VNode)` | — | QuestionFilled |
| icon-color | Icon color | String | — | #f90 |
| hide-icon | is hide Icon | Boolean | — | false |
| teleported | whether popconfirm is teleported to the body | boolean | true / false | true |
| persistent | when popconfirm inactive and `persistent` is `false` , popconfirm will be destroyed | boolean | — | false |
| width | popconfirm width | string/number | - | Min width 150px |
| Attribute | Description | Type | Accepted Values | Default |
| ------------------- | ----------------------------------------------------------------------------------- | -------------------------------------- | -------------------------------------------------- | --------------- |
| title | Title | String | — | — |
| confirm-button-text | Confirm button text | String | — | — |
| cancel-button-text | Cancel button text | String | — | — |
| confirm-button-type | Confirm button type | String | primary / success / warning / danger / info / text | primary |
| cancel-button-type | Cancel button type | String | primary / success / warning / danger / info / text | text |
| icon | Icon Component | `string \| Component \| (() => VNode)` | — | QuestionFilled |
| icon-color | Icon color | String | — | #f90 |
| hide-icon | is hide Icon | Boolean | — | false |
| teleported | whether popconfirm is teleported to the body | boolean | true / false | true |
| persistent | when popconfirm inactive and `persistent` is `false` , popconfirm will be destroyed | boolean | — | false |
| width | popconfirm width | string/number | - | Min width 150px |
## Slots

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

@@ -127,37 +127,37 @@ select-v2/remote-search
## SelectV2 Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------- | ------------- |
| model-value / v-model | biding value | string / number / boolean / object | — | — |
| multiple | is multiple | boolean | — | false |
| disabled | is disabled | boolean | — | false |
| value-key | unique identity key name for value, required when value is an object | string | — | value |
| size | input box size | string | large/default/small | default |
| clearable | whether select can be cleared | boolean | — | false |
| clear-icon | custom clear icon | `Component \| (() => VNode)` | — | CircleClose |
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
| multiple-limit | maximum number of options user can select when multiple is true. No limit when set to 0 | number | — | 0 |
| name | the name attribute of select input | string | — | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
| autocomplete | autocomplete of select input | string | — | off |
| placeholder | the autocomplete attribute of select input | string | — | Please select |
| filterable | is filterable | boolean | — | false |
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
| reserve-keyword | whether reserve the keyword after select filtered option. | boolean | — | true |
| no-data-text | displayed text when there is no options, you can also use slot empty | string | — | No Data |
| popper-class | custom class name for Select's dropdown | string | — | — |
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | false |
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | boolean | true / false | true |
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | object | - | - |
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
| height | The height of the dropdown panel, 34px for each item | number | - | 170 |
| scrollbar-always-on | Controls whether the scrollbar is always displayed | boolean | - | false |
| remote | whether search data from server | boolean | — | false |
| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string) | — | — |
| validate-event | whether to trigger form validation | boolean | - | true |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------- | ------------- |
| model-value / v-model | biding value | string / number / boolean / object | — | — |
| multiple | is multiple | boolean | — | false |
| disabled | is disabled | boolean | — | false |
| value-key | unique identity key name for value, required when value is an object | string | — | value |
| size | input box size | string | large/default/small | default |
| clearable | whether select can be cleared | boolean | — | false |
| clear-icon | custom clear icon | `string \| Component \| (() => VNode)` | — | CircleClose |
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
| multiple-limit | maximum number of options user can select when multiple is true. No limit when set to 0 | number | — | 0 |
| name | the name attribute of select input | string | — | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
| autocomplete | autocomplete of select input | string | — | off |
| placeholder | the autocomplete attribute of select input | string | — | Please select |
| filterable | is filterable | boolean | — | false |
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
| reserve-keyword | whether reserve the keyword after select filtered option. | boolean | — | true |
| no-data-text | displayed text when there is no options, you can also use slot empty | string | — | No Data |
| popper-class | custom class name for Select's dropdown | string | — | — |
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | false |
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | boolean | true / false | true |
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | object | - | - |
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
| height | The height of the dropdown panel, 34px for each item | number | - | 170 |
| scrollbar-always-on | Controls whether the scrollbar is always displayed | boolean | - | false |
| remote | whether search data from server | boolean | — | false |
| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string) | — | — |
| validate-event | whether to trigger form validation | boolean | - | true |
<span style="display: none;">
<!-- | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |

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

@@ -111,42 +111,42 @@ If the binding value of Select is an object, make sure to assign `value-key` as
## Select Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------------------- | ---------------- |
| model-value / v-model | binding value | string / number / boolean / object | — | — |
| multiple | whether multiple-select is activated | boolean | — | false |
| disabled | whether Select is disabled | boolean | — | false |
| value-key | unique identity key name for value, required when value is an object | string | — | value |
| size | size of Input | string | large/default/small | default |
| clearable | whether select can be cleared | boolean | — | false |
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
| name | the name attribute of select input | string | — | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
| autocomplete | the autocomplete attribute of select input | string | — | off |
| placeholder | placeholder | string | — | Select |
| filterable | whether Select is filterable | boolean | — | false |
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
| filter-method | custom filter method | function | — | — |
| remote | whether options are loaded from server | boolean | — | false |
| remote-method | custom remote search method | function | — | — |
| loading | whether Select is loading data from server | boolean | — | false |
| loading-text | displayed text while loading data from server | string | — | Loading |
| no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty` | string | — | No matching data |
| no-data-text | displayed text when there is no options, you can also use slot `empty` | string | — | No data |
| popper-class | custom class name for Select's dropdown | string | — | — |
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | true |
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | boolean | true / false | true |
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
| clear-icon | Custom clear icon component | `Component \| (() => VNode)` | — | CircleClose |
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | — | false |
| suffix-icon | Custom suffix icon component | `Component \| (() => VNode)` | — | ArrowUp |
| tag-type | tag type | string | success/info/warning/danger | info |
| validate-event | whether to trigger form validation | boolean | - | true |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | --------------------------- | ---------------- |
| model-value / v-model | binding value | string / number / boolean / object | — | — |
| multiple | whether multiple-select is activated | boolean | — | false |
| disabled | whether Select is disabled | boolean | — | false |
| value-key | unique identity key name for value, required when value is an object | string | — | value |
| size | size of Input | string | large/default/small | default |
| clearable | whether select can be cleared | boolean | — | false |
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
| name | the name attribute of select input | string | — | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
| autocomplete | the autocomplete attribute of select input | string | — | off |
| placeholder | placeholder | string | — | Select |
| filterable | whether Select is filterable | boolean | — | false |
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
| filter-method | custom filter method | function | — | — |
| remote | whether options are loaded from server | boolean | — | false |
| remote-method | custom remote search method | function | — | — |
| loading | whether Select is loading data from server | boolean | — | false |
| loading-text | displayed text while loading data from server | string | — | Loading |
| no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty` | string | — | No matching data |
| no-data-text | displayed text when there is no options, you can also use slot `empty` | string | — | No data |
| popper-class | custom class name for Select's dropdown | string | — | — |
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | true |
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | boolean | true / false | true |
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
| clear-icon | Custom clear icon component | `string \| Component \| (() => VNode)` | — | CircleClose |
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | — | false |
| suffix-icon | Custom suffix icon component | `string \| Component \| (() => VNode)` | — | ArrowUp |
| tag-type | tag type | string | success/info/warning/danger | info |
| validate-event | whether to trigger form validation | boolean | - | true |
## Select Events

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

@@ -97,12 +97,12 @@ steps/simple
## Step Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ----------- | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------- | ------- |
| title | step title | string | — | — |
| description | step description | string | — | — |
| icon | step custom icon. Icons can be passed via named slot as well | `Component \| (() => VNode)` | — | — |
| status | current status. It will be automatically set by Steps if not configured. | string | wait / process / finish / error / success | — |
| Attribute | Description | Type | Accepted Values | Default |
| ----------- | ------------------------------------------------------------------------ | -------------------------------------- | ----------------------------------------- | ------- |
| title | step title | string | — | — |
| description | step description | string | — | — |
| icon | step custom icon. Icons can be passed via named slot as well | `string \| Component \| (() => VNode)` | — | — |
| status | current status. It will be automatically set by Steps if not configured. | string | wait / process / finish / error / success | — |
## Step Slots

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

@@ -81,26 +81,26 @@ switch/prevent-switching
## Attributes
| Attribute | 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 |
| loading | whether Switch is in loading state | boolean | — | false |
| size | size of Switch | string | large / default / small | default |
| width | width of Switch | number / string | — | — |
| inline-prompt | whether icon or text is displayed inside dot, only the first character will be rendered for text | boolean | — | false |
| active-icon | component of the icon displayed when in `on` state, overrides `active-text` | `Component \| (() => VNode)` | — | — |
| inactive-icon | component of the icon displayed when in `off` state, overrides `inactive-text` | `Component \| (() => VNode)` | — | — |
| active-text | text displayed when in `on` state | string | — | — |
| inactive-text | text displayed when in `off` state | string | — | — |
| active-value | switch value when in `on` state | boolean / string / number | — | true |
| inactive-value | switch value when in `off` state | boolean / string / number | — | false |
| active-color | background color when in `on` state ( deprecated, use CSS var `--el-switch-on-color` instead ) | string | — | — |
| inactive-color | background color when in `off` state ( deprecated, use CSS var `--el-switch-off-color` instead ) | string | — | — |
| border-color | border color of the switch ( deprecated, use CSS var `--el-switch-border-color` instead ) | string | — | — |
| name | input name of Switch | string | — | — |
| validate-event | whether to trigger form validation | boolean | — | true |
| before-change | before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching | `() => Promise<boolean> \| boolean` | — | — |
| Attribute | 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 |
| loading | whether Switch is in loading state | boolean | — | false |
| size | size of Switch | string | large / default / small | default |
| width | width of Switch | number / string | — | — |
| inline-prompt | whether icon or text is displayed inside dot, only the first character will be rendered for text | boolean | — | false |
| active-icon | component of the icon displayed when in `on` state, overrides `active-text` | `string \| Component \| (() => VNode)` | — | — |
| inactive-icon | component of the icon displayed when in `off` state, overrides `inactive-text` | `string \| Component \| (() => VNode)` | — | — |
| active-text | text displayed when in `on` state | string | — | — |
| inactive-text | text displayed when in `off` state | string | — | — |
| active-value | switch value when in `on` state | boolean / string / number | — | true |
| inactive-value | switch value when in `off` state | boolean / string / number | — | false |
| active-color | background color when in `on` state ( deprecated, use CSS var `--el-switch-on-color` instead ) | string | — | — |
| inactive-color | background color when in `off` state ( deprecated, use CSS var `--el-switch-off-color` instead ) | string | — | — |
| border-color | border color of the switch ( deprecated, use CSS var `--el-switch-border-color` instead ) | string | — | — |
| name | input name of Switch | string | — | — |
| validate-event | whether to trigger form validation | boolean | — | true |
| before-change | before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching | `() => Promise<boolean> \| boolean` | — | — |
## Events

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

@@ -58,8 +58,8 @@ time-picker/range
| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
| 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 | `Component \| (() => VNode)` | — | Clock |
| clear-icon | Custom clear icon component | `Component \| (() => VNode)` | — | CircleClose |
| prefix-icon | Custom prefix icon component | `string \| Component \| (() => VNode)` | — | Clock |
| clear-icon | Custom clear icon component | `string \| Component \| (() => VNode)` | — | 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) | — | — |

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

@@ -49,24 +49,24 @@ time-select/time-range
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| model-value / v-model | binding value | string | — | — |
| disabled | whether TimeSelect 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 | — | — |
| name | same as `name` in native input | string | — | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
| prefix-icon | Custom prefix icon component | `Component \| (() => VNode)` | — | Clock |
| clear-icon | Custom clear icon component | `Component \| (() => VNode)` | — | CircleClose |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| min-time | minimum time, any time before this time will be disabled | string | — | 00:00 |
| max-time | maximum time, any time after this time will be disabled | string | — | — |
| format | set format of time | string | see [formats](https://day.js.org/docs/en/display/format#list-of-all-available-formats) | HH:mm |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| model-value / v-model | binding value | string | — | — |
| disabled | whether TimeSelect 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 | — | — |
| name | same as `name` in native input | string | — | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
| prefix-icon | Custom prefix icon component | `string \| Component \| (() => VNode)` | — | Clock |
| clear-icon | Custom clear icon component | `string \| Component \| (() => VNode)` | — | CircleClose |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| min-time | minimum time, any time before this time will be disabled | string | — | 00:00 |
| max-time | maximum time, any time after this time will be disabled | string | — | — |
| format | set format of time | string | see [formats](https://day.js.org/docs/en/display/format#list-of-all-available-formats) | HH:mm |
## Events

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

@@ -55,17 +55,17 @@ timeline/center
## Timeline-Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
| -------------- | --------------------------- | ---------------------------- | ------------------------------------------- | ------- |
| timestamp | timestamp content | string | — | — |
| hide-timestamp | whether to show timestamp | boolean | — | false |
| center | Whether vertically centered | boolean | — | false |
| placement | position of timestamp | string | top / bottom | bottom |
| type | node type | string | primary / success / warning / danger / info | — |
| color | background color of node | string | hsl / hsv / hex / rgb | — |
| size | node size | string | normal / large | normal |
| icon | icon component | `Component \| (() => VNode)` | — | — |
| hollow | icon is hollow | boolean | — | false |
| Attribute | Description | Type | Accepted Values | Default |
| -------------- | --------------------------- | -------------------------------------- | ------------------------------------------- | ------- |
| timestamp | timestamp content | string | — | — |
| hide-timestamp | whether to show timestamp | boolean | — | false |
| center | Whether vertically centered | boolean | — | false |
| placement | position of timestamp | string | top / bottom | bottom |
| type | node type | string | primary / success / warning / danger / info | — |
| color | background color of node | string | hsl / hsv / hex / rgb | — |
| size | node size | string | normal / large | normal |
| icon | icon component | `string \| Component \| (() => VNode)` | — | — |
| hollow | icon is hollow | boolean | — | false |
## Timeline-Item Slots

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

@@ -69,22 +69,22 @@ tree-v2/filter
## TreeV2 Attributes
| Attribute | Description | Type | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------- |
| data | tree data | array | — |
| empty-text | text displayed when data is void | string | — |
| props | configuration options, see the following table | object | — |
| highlight-current | whether current node is highlighted | boolean | false |
| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | boolean | true |
| check-on-click-node | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean | false |
| default-expanded-keys | array of keys of initially expanded nodes | array | — |
| 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 | — |
| 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 | `Component \| (() => VNode)` | - |
| Attribute | Description | Type | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- |
| data | tree data | array | — |
| empty-text | text displayed when data is void | string | — |
| props | configuration options, see the following table | object | — |
| highlight-current | whether current node is highlighted | boolean | false |
| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | boolean | true |
| check-on-click-node | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean | false |
| default-expanded-keys | array of keys of initially expanded nodes | array | — |
| 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 | — |
| 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 \| (() => VNode)` | - |
## props

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

@@ -137,7 +137,7 @@ tree/draggable
| 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 |
| icon | custome tree node icon component | `Component \| (() => VNode)` | - | - |
| icon | custome tree node icon component | `string \| Component \| (() => VNode)` | - | - |
| lazy | whether to lazy load leaf node, used with `load` attribute | boolean | — | false |
| draggable | whether enable tree nodes drag and drop | boolean | — | false |
| allow-drag | this function will be executed before dragging a node. If `false` is returned, the node can not be dragged | Function(node) | — | — |

14
packages/components/menu/src/sub-menu.ts
View File

@@ -17,7 +17,12 @@ import {
import { useTimeoutFn } from '@vueuse/core'
import ElCollapseTransition from '@element-plus/components/collapse-transition'
import ElTooltip from '@element-plus/components/tooltip'
import { buildProps, iconPropType, throwError } from '@element-plus/utils'
import {
buildProps,
iconPropType,
isString,
throwError,
} from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
import { ElIcon } from '@element-plus/components/icon'
@@ -325,7 +330,12 @@ export default defineComponent({
: 'none',
},
},
{ default: () => h(subMenuTitleIcon.value) }
{
default: () =>
isString(subMenuTitleIcon.value)
? h(instance.appContext.components[subMenuTitleIcon.value])
: h(subMenuTitleIcon.value),
}
),
]

2
packages/components/tree/src/tree.type.ts
View File

@@ -122,7 +122,7 @@ export declare interface TreeComponentProps {
filterNodeMethod: FilterNodeMethodFunction
accordion: boolean
indent: number
icon: Component | (() => VNode)
icon: string | Component | (() => VNode)
}
export declare type NodeDropType = 'before' | 'after' | 'inner' | 'none'

3
packages/utils/vue/icon.ts
View File

@@ -12,7 +12,8 @@ import { definePropType } from './props'
import type { Component, VNode } from 'vue'
export const iconPropType = definePropType<Component | (() => VNode)>([
export const iconPropType = definePropType<string | Component | (() => VNode)>([
String,
Object,
Function,
])