From 883fd8d6ef7ff40b3f31fdc34c59fcdc2b54d807 Mon Sep 17 00:00:00 2001 From: Aex Date: Wed, 27 Oct 2021 23:17:13 +0800 Subject: [PATCH] epic: refactor icons (#3492) * refactor(components): el-alert icon (#3441) * refactor(components): el-alert icon * fix: el-alert test * fix: [el-alert] lint error * feat(utils): add icon util * refactor(components): el-alert icon * refactor(utils): icon * test: update alert test * refactor: remove el-icon in util * refactor(components): el-notification icon (#3512) * chore: temp save changes * refactor: update icon * fix: var * docs: update icon * fix: type class error * style: remove unused class * fix: update icon type * docs: update icon * fix: update iconComponent * refactor(components): el-dialog icon (#3505) * refactor(components): [el-dialog] icon * fix: typo * refactor: dialog icon ref * refactor: dialog icon * style: update close button size * refactor(components): el-message-box icon (#3507) * refactor(components): message-box icon * refactor(components): message icon * fix: test * refactor: update ref * fix: test * docs: update icon * fix: delete unused code * docs: update type * fix: update close button size * fix: type * fix: icon type class * fix: icon type * fix: update type class * refactor(components): el-popconfirm icon (#3513) * refactor(components): el-popconfirm icon * fix: space styles * docs: update example * docs: update example for trigger event * refactor(components): el-page-header icon (#3518) * refactor(components): el-page-header icon * docs: update icon * fix: space errors * refactor(components): el-steps icon (#3520) * refactor(components): el-backtop icon (#3514) * refactor(components): el-backtop icon * fix: update font size * refactor(components): el-button icon (#3536) * refactor(components): el-button icon * fix: update example * refactor(components): el-button icon * refactor: style simplify Co-authored-by: imswk * refactor(components): el-tree icon (#3590) Co-authored-by: qianjie * refactor(components): el-avatar icon (#3599) Co-authored-by: qianjie * refactor(components): el-carousel icon (#3602) Co-authored-by: qianjie * refactor(components): el-progress icon (#3607) Co-authored-by: qianjie * refactor(components): el-result icon (#3609) Co-authored-by: qianjie * refactor(components): el-timeline icon (#3646) Co-authored-by: qianjie * refactor(components): el-table icon (#3611) Co-authored-by: qianjie * chore: add vue to gitignore * fix: buildProp error * refactor(components): el-pagination icon (#3605) * test: el-menu deprecated icon font (#3794) * test: el-loading deprecated icon font (#3795) * chore: Update changelog 1.1.0-beta.20 (#3838) * fix: about custom extension of table column (#3437) * refactor(components): el-autocomplete icon (#3783) * refactor(components): el-dropdown icon (#3517) * refactor(components): el-dropdown icon * fix: arrow down icon size * style: revert * fix: font-size * refactor(components): el-link icon (#3538) * refactor(components): el-link icon * refactor: update example * fix: import icons * docs: add tip * refactor: update link icon * fix: icon align * fix: typo * refactor(components): el-select icon (#3780) * refactor(components): el-input icon (#3565) * refactor(components): input icon * docs: update example * refactor(components): el-select icon * docs: icon usage * fix: input style * fix: add scoped * docs: fix icon * fix: icon align * fix: icon align * fix: typo * fix: typo * refactor(components): el-input-number icon (#3566) * refactor(components): el-input-number icon * fix: icon align * refactor(components): el-tag icon (#3793) * refactor(components): el-tag icon * fix: icon align * fix: icon margin * refactor(components): el-switch icon (#3787) * refactor(components): el-switch icon * fix: icon align * docs: add icon usage * refactor(components): el-collapse icon (#3788) * refactor(components): el-collapse icon * docs: update icon demo * fix: typo * refactor(components): el-uplod icon (#3598) * refactor(components): el-uplod icon * docs: update icon useage * docs: fix icon * docs: fix icon * docs: update upload-filled icon * fix: icon align * fix: item icon align * refactor(components): el-select-v2 icon (#3781) * refactor(components): el-select-v2 icon * revert: play/main.ts * fix: icon style * fix: icon solt * refactor(components): el-cascader icon (#3785) * refactor(components): input icon * docs: update example * refactor(components): el-select icon * refactor(components): el-cascader icon * refactor(components): el-tag icon * fix: icon align * fix: icon margin * docs: icon usage * fix: input style * fix: add scoped * test: remove unuesd code * fix: cascader-panel * fix: icon style * fix: icon animation * refactor(components): el-drawer icon (#3796) * refactor(components): el-drawer icon * fix: close icon size * fix: close icon align * refactor(components): el-transfer icon (#3792) * refactor(components): el-transfer icon * fix: icon align * refactor(components): el-image-viewer icon (#3797) * refactor(components): el-image-view icon * fix: icon size * docs: update domo * style: format vue * fix: fullscreen icon * Add cursor for icons Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> * refactor(components): rate-icon (#3891) * refactor(components): el-rate icon * docs: update example * docs: update * test: update * docs: update * fix: variable rename * fix: demo update * fix: allow half bug * refactor(components): el-time-picker icon (#3834) * refactor(components): el-button icon * refactor(components): date-picker icon * refactor(components): input icon * docs: update example * refactor(components): el-select icon * refactor(components): el-time-select icon * fix: icon width * docs: icon usage * fix: input style * fix: add scoped * fix: icon size * docs: icon display * fix: icon in button * docs: fix error * refactor(components): el-time-picker icon * fix: var * fix: icon align * test: delete unused code * test: fix error * fix: remove unused code * docs: fix typo * docs: update icon * fix: default prefix icon * fix: range picker icon align * Update cursor for picker Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> * fix(components): el-input close icon * chore: delete fonts * fix: copy full style Co-authored-by: imswk Co-authored-by: bastarder <85257684@qq.com> Co-authored-by: qianjie Co-authored-by: Element Co-authored-by: Alan Wang <948467222@qq.com> Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> --- build/gulpfile.ts | 7 +- docs/en-US/component/avatar.md | 18 ++--- docs/en-US/component/button.md | 24 +++--- docs/en-US/component/date-picker.md | 50 ++++++------ docs/en-US/component/image.md | 3 + docs/en-US/component/input.md | 60 +++++++------- docs/en-US/component/link.md | 24 ++++-- docs/en-US/component/message-box.md | 2 +- docs/en-US/component/message.md | 24 +++--- docs/en-US/component/notification.md | 28 +++---- docs/en-US/component/page-header.md | 10 +-- docs/en-US/component/popconfirm.md | 20 ++--- docs/en-US/component/rate.md | 40 +++++----- docs/en-US/component/scrollbar.md | 2 +- docs/en-US/component/select-v2.md | 44 +++++------ docs/en-US/component/select.md | 56 ++++++------- docs/en-US/component/switch.md | 18 ++++- docs/en-US/component/time-picker.md | 46 +++++------ docs/en-US/component/time-select.md | 32 ++++---- docs/en-US/component/timeline.md | 22 +++--- docs/en-US/component/tree.md | 2 +- docs/examples/avatar/types.vue | 14 +++- docs/examples/button/basic.vue | 27 +++++-- docs/examples/button/group.vue | 35 +++++--- docs/examples/button/icon.vue | 28 +++++-- docs/examples/button/size.vue | 18 ++++- docs/examples/collapse/customization.vue | 8 +- docs/examples/image/load-failed.vue | 6 +- docs/examples/input/autocomplete-template.vue | 8 +- docs/examples/input/mixed-input.vue | 4 +- docs/examples/input/with-icon.vue | 16 +++- docs/examples/link/with-icon.vue | 9 ++- docs/examples/popconfirm/customize.vue | 13 ++- docs/examples/popconfirm/trigger-event.vue | 9 ++- docs/examples/rate/more-icons.vue | 60 ++------------ docs/examples/switch/custom-icons.vue | 17 ++++ docs/examples/table/custom-column.vue | 7 +- docs/examples/timeline/custom-node.vue | 4 +- docs/examples/upload/avatar.vue | 10 ++- docs/examples/upload/custom-thumbnail.vue | 15 +++- docs/examples/upload/drag-and-drop.vue | 6 +- docs/examples/upload/photo-album.vue | 6 +- .../components/alert/__tests__/alert.spec.ts | 6 +- packages/components/alert/src/alert.ts | 10 +-- packages/components/alert/src/alert.vue | 46 ++++++----- .../components/autocomplete/src/index.vue | 8 +- .../avatar/__tests__/avatar.spec.ts | 5 +- packages/components/avatar/src/avatar.ts | 8 +- packages/components/avatar/src/avatar.vue | 7 +- .../backtop/__tests__/backtop.spec.ts | 3 +- packages/components/backtop/src/backtop.vue | 9 ++- .../button/__tests__/button.spec.ts | 7 +- packages/components/button/src/button.ts | 6 +- packages/components/button/src/button.vue | 13 ++- packages/components/carousel/src/main.vue | 15 +++- .../__tests__/cascader-panel.spec.ts | 13 ++- .../components/cascader-panel/src/node.vue | 25 ++++-- .../cascader/__tests__/cascader.spec.ts | 31 +++----- packages/components/cascader/src/index.vue | 28 ++++--- .../components/collapse/src/collapse-item.vue | 13 +-- .../date-picker/__tests__/date-picker.spec.ts | 36 ++++----- .../__tests__/date-time-picker.spec.ts | 4 +- .../src/date-picker-com/panel-date-pick.vue | 34 ++++++-- .../src/date-picker-com/panel-date-range.vue | 69 +++++++++++----- .../src/date-picker-com/panel-month-range.vue | 27 ++++--- packages/components/dialog/src/dialog.vue | 6 +- packages/components/drawer/src/index.vue | 6 +- packages/components/dropdown/src/dropdown.vue | 8 +- .../image-viewer/src/image-viewer.vue | 63 ++++++++++----- .../__tests__/input-number.spec.ts | 5 +- .../input-number/src/input-number.vue | 18 ++++- packages/components/input/src/input.ts | 6 +- packages/components/input/src/input.vue | 57 ++++++++----- packages/components/link/src/link.ts | 10 ++- packages/components/link/src/link.vue | 6 +- .../loading/__tests__/loading.spec.ts | 2 +- .../components/menu/__tests__/menu.spec.ts | 6 +- .../message-box/__tests__/message-box.spec.ts | 9 ++- packages/components/message-box/src/index.vue | 58 ++++++++------ .../message-box/src/message-box.type.ts | 8 +- .../message/__tests__/message.spec.ts | 13 +-- packages/components/message/src/message.ts | 6 +- packages/components/message/src/message.vue | 46 ++++++----- .../__tests__/notification.spec.ts | 15 ++-- .../notification/src/notification.ts | 4 +- .../notification/src/notification.vue | 49 +++++++----- .../page-header/__tests__/page-header.spec.ts | 7 +- .../components/page-header/src/page-header.ts | 7 +- .../page-header/src/page-header.vue | 8 +- .../pagination/src/components/next.vue | 8 +- .../pagination/src/components/pager.vue | 43 +++++----- .../pagination/src/components/prev.vue | 8 +- .../components/popconfirm/src/popconfirm.ts | 9 ++- .../components/popconfirm/src/popconfirm.vue | 9 ++- .../progress/__tests__/progress.spec.ts | 6 +- packages/components/progress/src/index.vue | 31 ++++++-- packages/components/rate/src/index.vue | 79 ++++++++++--------- packages/components/result/src/icon-error.vue | 15 ---- packages/components/result/src/icon-info.vue | 15 ---- .../components/result/src/icon-success.vue | 15 ---- .../components/result/src/icon-warning.vue | 15 ---- packages/components/result/src/index.vue | 39 +++++---- .../select-v2/__tests__/select.spec.ts | 3 +- packages/components/select-v2/src/defaults.ts | 7 +- .../select-v2/src/select-dropdown.vue | 3 + packages/components/select-v2/src/select.vue | 22 +++--- .../components/select-v2/src/useSelect.ts | 16 ++-- .../select/__tests__/select.spec.ts | 5 +- packages/components/select/src/select.vue | 35 ++++---- packages/components/select/src/useSelect.ts | 17 ++-- .../components/steps/__tests__/steps.spec.ts | 10 ++- packages/components/steps/src/item.vue | 28 ++++--- .../switch/__tests__/switch.spec.ts | 8 +- packages/components/switch/src/index.vue | 31 ++++---- packages/components/table/src/config.ts | 21 ++--- .../components/table/src/filter-panel.vue | 15 ++-- packages/components/tag/src/tag.vue | 20 ++--- .../time-picker/src/common/picker.vue | 36 +++++---- .../time-picker/src/common/props.ts | 9 ++- .../time-picker-com/basic-time-spinner.vue | 21 +++-- .../time-select/src/time-select.vue | 19 +++-- .../timeline/__tests__/timeline.spec.ts | 8 +- packages/components/timeline/src/item.vue | 12 ++- packages/components/transfer/src/index.vue | 9 ++- .../transfer/src/transfer-panel.vue | 14 ++-- packages/components/tree/src/tree-node.vue | 18 +++-- packages/components/tree/src/tree.type.ts | 3 +- packages/components/tree/src/tree.vue | 4 +- .../upload/__tests__/upload-list.spec.ts | 2 +- .../components/upload/src/upload-list.vue | 57 +++++++++---- packages/theme-chalk/gulpfile.ts | 11 --- packages/theme-chalk/src/backtop.scss | 4 + packages/theme-chalk/src/button.scss | 5 +- packages/theme-chalk/src/cascader.scss | 14 +++- .../src/date-picker/picker-panel.scss | 4 + .../theme-chalk/src/date-picker/picker.scss | 35 +++++--- .../src/date-picker/time-spinner.scss | 4 +- packages/theme-chalk/src/dialog.scss | 1 + packages/theme-chalk/src/drawer.scss | 4 + packages/theme-chalk/src/dropdown.scss | 1 + packages/theme-chalk/src/image-viewer.scss | 5 ++ packages/theme-chalk/src/input-number.scss | 4 + packages/theme-chalk/src/input.scss | 3 +- packages/theme-chalk/src/message-box.scss | 3 +- packages/theme-chalk/src/message.scss | 2 +- packages/theme-chalk/src/notification.scss | 2 +- packages/theme-chalk/src/option-item.scss | 15 ++-- packages/theme-chalk/src/pagination.scss | 10 +-- packages/theme-chalk/src/result.scss | 2 +- packages/theme-chalk/src/select-v2.scss | 7 ++ packages/theme-chalk/src/select.scss | 8 ++ packages/theme-chalk/src/switch.scss | 3 + packages/theme-chalk/src/table.scss | 14 ++-- packages/theme-chalk/src/tag.scss | 6 +- packages/theme-chalk/src/transfer.scss | 2 +- packages/theme-chalk/src/upload.scss | 32 ++++---- packages/utils/constants.ts | 6 -- packages/utils/icon.ts | 39 +++++++++ 158 files changed, 1616 insertions(+), 1073 deletions(-) create mode 100644 docs/examples/switch/custom-icons.vue delete mode 100644 packages/components/result/src/icon-error.vue delete mode 100644 packages/components/result/src/icon-info.vue delete mode 100644 packages/components/result/src/icon-success.vue delete mode 100644 packages/components/result/src/icon-warning.vue create mode 100644 packages/utils/icon.ts diff --git a/build/gulpfile.ts b/build/gulpfile.ts index 67732e41dd..cd47e779cf 100644 --- a/build/gulpfile.ts +++ b/build/gulpfile.ts @@ -34,11 +34,8 @@ export const copyTypesDefinitions: TaskFunction = (done) => { } export const copyFullStyle = async () => { - await run(`mkdir -p ${epOutput}/dist/fonts`) - await Promise.all([ - run(`cp ${epOutput}/theme-chalk/index.css ${epOutput}/dist/index.css`), - run(`cp -R ${epOutput}/theme-chalk/fonts ${epOutput}/dist`), - ]) + await run(`mkdir -p ${epOutput}/dist`) + await run(`cp ${epOutput}/theme-chalk/index.css ${epOutput}/dist/index.css`) } export default series( diff --git a/docs/en-US/component/avatar.md b/docs/en-US/component/avatar.md index 16f70e0156..269c2dfc21 100644 --- a/docs/en-US/component/avatar.md +++ b/docs/en-US/component/avatar.md @@ -49,15 +49,15 @@ avatar/fit ## Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------- | ---------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------ | ------- | -| icon | set representation type to Icon, more info on Icon Component | string | | | -| size | set avatar size | number/string | number / large / medium / small | large | -| shape | set avatar shape | string | circle / square | circle | -| src | the address of the image for an image avatar | string | | | -| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | | -| alt | This attribute defines an alternative text description of the image | string | | | -| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover | +| Attribute | Description | Type | Accepted Values | Default | +| --------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------ | ------- | +| icon | set representation type to Icon, more info on Icon Component | string / Component | | | +| size | set avatar size | number / string | number / large / medium / small | large | +| shape | set avatar shape | string | circle / square | circle | +| src | the address of the image for an image avatar | string | | | +| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | | +| alt | This attribute defines an alternative text description of the image | string | | | +| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover | ## Events diff --git a/docs/en-US/component/button.md b/docs/en-US/component/button.md index bcc2678f92..9ed120295c 100644 --- a/docs/en-US/component/button.md +++ b/docs/en-US/component/button.md @@ -77,18 +77,18 @@ button/size ## Button Attributes -| Attribute | Description | Type | Accepted Values | Default | -| ----------- | -------------------------------------- | ------- | -------------------------------------------------- | ------- | -| size | button size | string | medium / small / mini | — | -| type | button type | string | primary / success / warning / danger / info / text | — | -| plain | determine whether it's a plain 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 | -| disabled | disable the button | boolean | — | false | -| icon | icon class name | string | — | — | -| autofocus | same as native button's `autofocus` | boolean | — | false | -| native-type | same as native button's `type` | string | button / submit / reset | button | +| Attribute | Description | Type | Accepted Values | Default | +| ----------- | -------------------------------------- | ------------------ | -------------------------------------------------- | ------- | +| size | button size | string | medium / small / mini | — | +| type | button type | string | primary / success / warning / danger / info / text | — | +| plain | determine whether it's a plain 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 | +| disabled | disable the button | boolean | — | false | +| icon | icon component | string / Component | — | — | +| autofocus | same as native button's `autofocus` | boolean | — | false | +| native-type | same as native button's `type` | string | button / submit / reset | button | ## Button Slots diff --git a/docs/en-US/component/date-picker.md b/docs/en-US/component/date-picker.md index bf10224003..9dfbfe08b2 100644 --- a/docs/en-US/component/date-picker.md +++ b/docs/en-US/component/date-picker.md @@ -138,31 +138,31 @@ 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(DatePicker) / array(DateRangePicker) | — | — | -| readonly | whether DatePicker is read only | boolean | — | false | -| disabled | whether DatePicker is disabled | boolean | — | false | -| size | size of Input | string | large/medium/small/mini | large | -| 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 | anything accepted by `new Date()` | — | -| default-time | optional, the time value to use when selecting date range | 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) | — | -| name | same as `name` in native input | string | — | — | -| unlink-panels | unlink two date-panels in range-picker | boolean | — | false | -| prefix-icon | Custom prefix icon class | string | — | el-icon-date | -| clear-icon | Custom clear icon class | string | — | el-icon-circle-close | -| validate-event | whether to trigger form validation | boolean | - | true | -| disabledDate | 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 }] | — | — | +| Attribute | Description | Type | Accepted Values | Default | +| --------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | ----------- | +| model-value / v-model | binding value | date(DatePicker) / array(DateRangePicker) | — | — | +| readonly | whether DatePicker is read only | boolean | — | false | +| disabled | whether DatePicker is disabled | boolean | — | false | +| size | size of Input | string | large/medium/small/mini | large | +| 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 | anything accepted by `new Date()` | — | +| default-time | optional, the time value to use when selecting date range | 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) | — | +| 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 | +| disabledDate | 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 }] | — | — | ## Events diff --git a/docs/en-US/component/image.md b/docs/en-US/component/image.md index fc4913d220..c10e985084 100644 --- a/docs/en-US/component/image.md +++ b/docs/en-US/component/image.md @@ -66,6 +66,9 @@ Besides the native features of img, support lazy load, custom placeholder and lo .demo-image__error { .image-slot { font-size: 30px; + .el-icon { + font-size: 30px; + } } .el-image { width: 100%; diff --git a/docs/en-US/component/input.md b/docs/en-US/component/input.md index a264dbc921..ddc269c585 100644 --- a/docs/en-US/component/input.md +++ b/docs/en-US/component/input.md @@ -137,35 +137,35 @@ 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 | -| 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 | medium / small / mini | — | -| prefix-icon | prefix icon class | string | — | — | -| suffix-icon | suffix icon class | string | — | — | -| 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 | - | {} | +| 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 | +| 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 | medium / small / mini | — | +| 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 @@ -202,7 +202,7 @@ input/length-limiting | clearable | whether to show clear button | boolean | — | false | | disabled | whether Autocomplete is disabled | boolean | — | false | | value-key | key name of the input suggestion object for display | string | — | value | -| icon | icon name | string | — | — | +| icon | icon component | string / Component | — | — | | model-value / v-model | binding value | string | — | — | | debounce | debounce delay when typing, in milliseconds | number | — | 300 | | placement | placement of the popup menu | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start | diff --git a/docs/en-US/component/link.md b/docs/en-US/component/link.md index 5952a43791..44dd8528bf 100644 --- a/docs/en-US/component/link.md +++ b/docs/en-US/component/link.md @@ -12,6 +12,10 @@ Text hyperlink .example-showcase { .el-link { margin-right: 8px; + + & .el-icon--right.el-icon { + vertical-align: text-bottom; + } } } @@ -51,6 +55,12 @@ link/underline Link with icon +:::tip + +Use the `icon` attribute to add icon. You can pass either string for the component name (registered in advance) or the component itself which is a SVG Vue component. Element Plus has provided a set of icon that you can find at [icon](/en-US/component/icon) + +::: + :::demo link/with-icon @@ -59,13 +69,13 @@ link/with-icon ## Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------- | ----------------------------------- | ------- | ------------------------------------------- | ------- | -| type | type | string | primary / success / warning / danger / info | 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 | class name of icon | string | — | - | +| Attribute | Description | Type | Accepted Values | Default | +| --------- | ----------------------------------- | ------------------ | ------------------------------------------- | ------- | +| type | type | string | primary / success / warning / danger / info | 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 | — | - | ## Slots diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md index c4e547b94c..47ca7e51f2 100644 --- a/docs/en-US/component/message-box.md +++ b/docs/en-US/component/message-box.md @@ -122,7 +122,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-class | custom icon's class, overrides `type` | string | — | — | +| icon | custom icon component, overrides `type` | string / Component | — | — | | 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), where action can be 'confirm', 'cancel' or 'close', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — | diff --git a/docs/en-US/component/message.md b/docs/en-US/component/message.md index f9fe28b6ca..84e1506665 100644 --- a/docs/en-US/component/message.md +++ b/docs/en-US/component/message.md @@ -77,18 +77,18 @@ In this case you should call `ElMessage(options)`. We have also registered metho ## Options -| Attribute | Description | Type | Accepted Values | Default | -| ------------------------ | ------------------------------------------------------------------------------ | -------------- | -------------------------- | ------- | -| message | message text | string / VNode | — | — | -| type | message type | string | success/warning/info/error | info | -| icon-class | custom icon's class, overrides `type` | string | — | — | -| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false | -| custom-class | custom class name for Message | string | — | — | -| duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 | -| show-close | whether to show a close button | boolean | — | false | -| center | whether to center the text | boolean | — | false | -| on-close | callback function when closed with the message instance as the parameter | function | — | — | -| offset | set the distance to the top of viewport | number | — | 20 | +| Attribute | Description | Type | Accepted Values | Default | +| ------------------------ | ------------------------------------------------------------------------------ | ------------------ | -------------------------- | ------- | +| message | message text | string / VNode | — | — | +| type | message type | string | success/warning/info/error | info | +| icon | custom icon component, overrides `type` | string / Component | — | — | +| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false | +| custom-class | custom class name for Message | string | — | — | +| duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 | +| show-close | whether to show a close button | boolean | — | false | +| center | whether to center the text | boolean | — | false | +| on-close | callback function when closed with the message instance as the parameter | function | — | — | +| offset | set the distance to the top of viewport | number | — | 20 | ## Methods diff --git a/docs/en-US/component/notification.md b/docs/en-US/component/notification.md index dcbfcfb6c3..4724188a88 100644 --- a/docs/en-US/component/notification.md +++ b/docs/en-US/component/notification.md @@ -85,20 +85,20 @@ In this case you should call `ElNotification(options)`. We have also registered ## 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 | — | -| iconClass | custom icon's class. It will be overridden by `type` | string | — | — | -| 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 | +| 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 | — | — | +| 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 | ## Methods diff --git a/docs/en-US/component/page-header.md b/docs/en-US/component/page-header.md index e7c0d874dc..2f4f8103a2 100644 --- a/docs/en-US/component/page-header.md +++ b/docs/en-US/component/page-header.md @@ -25,11 +25,11 @@ page-header/custom-icon ## Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------- | ----------- | ------ | --------------- | ------------ | -| icon | icon | string | — | el-icon-back | -| title | main title | string | — | Back | -| content | content | string | — | — | +| Attribute | Description | Type | Accepted Values | Default | +| --------- | -------------- | ------------------ | --------------- | ------- | +| icon | icon component | string / Component | — | Back | +| title | main title | string | — | Back | +| content | content | string | — | — | ## Events diff --git a/docs/en-US/component/popconfirm.md b/docs/en-US/component/popconfirm.md index 2d3ffcd8eb..7e5cc76136 100644 --- a/docs/en-US/component/popconfirm.md +++ b/docs/en-US/component/popconfirm.md @@ -39,16 +39,16 @@ popconfirm/trigger-event ## Attributes -| Attribute | Description | Type | Accepted Values | Default | -| ----------------- | ------------------- | ------- | --------------- | ---------------- | -| title | Title | String | — | — | -| confirmButtonText | Confirm button text | String | — | — | -| cancelButtonText | Cancel button text | String | — | — | -| confirmButtonType | Confirm button type | String | — | Primary | -| cancelButtonType | Cancel button type | String | — | Text | -| icon | Icon | String | — | el-icon-question | -| iconColor | Icon color | String | — | #f90 | -| hideIcon | is hide Icon | Boolean | — | false | +| Attribute | Description | Type | Accepted Values | Default | +| ----------------- | ------------------- | ------------------ | --------------- | -------------- | +| title | Title | String | — | — | +| confirmButtonText | Confirm button text | String | — | — | +| cancelButtonText | Cancel button text | String | — | — | +| confirmButtonType | Confirm button type | String | — | Primary | +| cancelButtonType | Cancel button type | String | — | Text | +| icon | Icon Component | String / Component | — | QuestionFilled | +| iconColor | Icon color | String | — | #f90 | +| hideIcon | is hide Icon | Boolean | — | false | ## Slots diff --git a/docs/en-US/component/rate.md b/docs/en-US/component/rate.md index 26c6a33cf9..23fcdf71a0 100644 --- a/docs/en-US/component/rate.md +++ b/docs/en-US/component/rate.md @@ -62,7 +62,7 @@ rate/text You can use different icons to distinguish different rate components. -:::demo You can customize icons by passing `icon-classes` an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon class. In this example, we also use `void-icon-class` to set the icon if it is unselected. +:::demo You can customize icons by passing `icons` an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon. In this example, we also use `void-icon` to set the icon if it is unselected. rate/more-icons @@ -80,25 +80,25 @@ rate/readonly ## Attributes -| Attribute | Description | Type | Accepted Values | Default | -| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | --------------- | -------------------------------------------------------------- | -| model-value / v-model | binding value | number | — | 0 | -| max | max rating score | number | — | 5 | -| disabled | whether Rate is read-only | boolean | — | false | -| allow-half | whether picking half start is allowed | boolean | — | false | -| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 | -| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 | -| colors | colors for icons. If array, it 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 color | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] | -| void-color | color of unselected icons | string | — | #C6D1DE | -| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 | -| icon-classes | class names of icons. 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 class | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] | -| void-icon-class | class name of unselected icons | string | — | el-icon-star-off | -| disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on | -| 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 | -| texts | text array | array | — | ['Extremely bad','Disappointed','Fair','Satisfied','Surprise'] | -| score-template | score template | string | — | {value} | +| Attribute | Description | Type | Accepted Values | Default | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | --------------- | ------------------------------------------------------------------ | +| model-value / v-model | binding value | number | — | 0 | +| max | max rating score | number | — | 5 | +| disabled | whether Rate is read-only | boolean | — | false | +| allow-half | whether picking half start is allowed | boolean | — | false | +| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 | +| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 | +| colors | colors for icons. If array, it 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 color | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] | +| 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 | +| 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 | +| texts | text array | array | — | ['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise'] | +| score-template | score template | string | — | {value} | ## Events diff --git a/docs/en-US/component/scrollbar.md b/docs/en-US/component/scrollbar.md index 22ceea5d79..4eea79ad35 100644 --- a/docs/en-US/component/scrollbar.md +++ b/docs/en-US/component/scrollbar.md @@ -7,7 +7,7 @@ lang: en-US Used to replace the browser's native scrollbar. - diff --git a/docs/examples/switch/custom-icons.vue b/docs/examples/switch/custom-icons.vue new file mode 100644 index 0000000000..aa3bc2ba87 --- /dev/null +++ b/docs/examples/switch/custom-icons.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/examples/table/custom-column.vue b/docs/examples/table/custom-column.vue index 90b68a2f97..08fc101458 100644 --- a/docs/examples/table/custom-column.vue +++ b/docs/examples/table/custom-column.vue @@ -2,7 +2,7 @@ @@ -38,7 +38,12 @@ diff --git a/docs/examples/upload/photo-album.vue b/docs/examples/upload/photo-album.vue index 94460eb7d4..c86f0b5ff9 100644 --- a/docs/examples/upload/photo-album.vue +++ b/docs/examples/upload/photo-album.vue @@ -5,14 +5,18 @@ :on-preview="handlePictureCardPreview" :on-remove="handleRemove" > - + diff --git a/packages/components/result/src/icon-info.vue b/packages/components/result/src/icon-info.vue deleted file mode 100644 index fa85008523..0000000000 --- a/packages/components/result/src/icon-info.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/packages/components/result/src/icon-success.vue b/packages/components/result/src/icon-success.vue deleted file mode 100644 index 6ba451ed9e..0000000000 --- a/packages/components/result/src/icon-success.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/packages/components/result/src/icon-warning.vue b/packages/components/result/src/icon-warning.vue deleted file mode 100644 index c443917d1d..0000000000 --- a/packages/components/result/src/icon-warning.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/packages/components/result/src/index.vue b/packages/components/result/src/index.vue index 66bbc04b57..8eaf7442ce 100644 --- a/packages/components/result/src/index.vue +++ b/packages/components/result/src/index.vue @@ -2,7 +2,7 @@
- +
@@ -22,11 +22,14 @@