diff --git a/.github/workflows/test-coverage.yml b/.github/workflows/test-coverage.yml index 657f31ffd2..2bcd5dd6dd 100644 --- a/.github/workflows/test-coverage.yml +++ b/.github/workflows/test-coverage.yml @@ -6,6 +6,7 @@ on: pull_request: branches: - master + workflow_dispatch: jobs: build: diff --git a/.github/workflows/test-ssr.yml b/.github/workflows/test-ssr.yml index 92682bb0b2..2b1673416f 100644 --- a/.github/workflows/test-ssr.yml +++ b/.github/workflows/test-ssr.yml @@ -1,6 +1,8 @@ name: πŸ§ͺ Test SSR -on: pull_request +on: + pull_request: + workflow_dispatch: concurrency: group: ${{ github.workflow }}-${{ github.event.number || github.sha }} diff --git a/.github/workflows/test-unit.yml b/.github/workflows/test-unit.yml index b8ace9720f..167064975e 100644 --- a/.github/workflows/test-unit.yml +++ b/.github/workflows/test-unit.yml @@ -1,6 +1,8 @@ name: πŸ§ͺ Unit Test -on: pull_request +on: + pull_request: + workflow_dispatch: concurrency: group: ${{ github.workflow }}-${{ github.event.number || github.sha }} diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 9a9db423d4..60ea71b983 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,29 @@ ## Changelog +### 2.5.4 + +_2024-02-02_ + +#### Features + +- Components [dialog] Dialog can drag overflow the viewport (#15643 by @kooriookami) +- Components [message-box] MessageBox can drag overflow the viewport (#15674 by @kooriookami) +- Play custom namespace (#15677 by @btea) +- Components [check-tag] add type prop (#15727 by @kooriookami) + +#### Bug fixes + +- Components [table] The namespace of the showOverflowTooltip is invalid. (#15627 by @xingyixiang) +- Components [select] Remote search does not show menu when it has options and no query (#15683 by @wen403) +- Docs overlay error caused by sidebar (#15694 by @heygsc) +- Components [select] Fix value with value-key not selected (#15681 by @kooriookami) +- Components [tour] buttonProps & isSameProps errors (#15680 by @Fuphoenixes) +- Components [select] el-option-group error when el-option in a component (#15703 by @Fuphoenixes) +- Components [drawer] click allow focus out (#11965 by @tolking) +- Components [menu] Add menu-item margin when calculating `calcSliceIndex` (#15699 by @zhixiaotong) +- Components [upload] Add crossorigin property (#15524 by @wkasunsampath) +- Components [tabs] slot name use kebab-case style (#15733 by @chenxch) + ### 2.5.3 _2024-01-22_ diff --git a/docs/.vitepress/vitepress/components/globals/resource.vue b/docs/.vitepress/vitepress/components/globals/resource.vue index ba3c56bbdb..bf507f0eb5 100644 --- a/docs/.vitepress/vitepress/components/globals/resource.vue +++ b/docs/.vitepress/vitepress/components/globals/resource.vue @@ -39,12 +39,26 @@ const onClick = (item: string) => { const resourceCards = computed(() => [ { - key: 'axure', - title: resourceLang.value.axure, - description: 'Axure RP 9.0', - icon: AxureComponentsSvg, - intro: resourceLang.value.axureIntro, - url: resourceUrl.axure, + key: '2023-figma-ui-kit', + title: resourceLang.value.figma2023, + description: '2023 Figma UI Kit', + icon: FigmaUiKitSvg, + intro: resourceLang.value.figma2023Intro, + url: 'https://www.figma.com/community/file/1305760370797950824/element-plus-design-system-ui-kit', + }, + { + key: 'figma-variables', + title: resourceLang.value.figmaVariables, + icon: FigmaVariablesSvg, + intro: resourceLang.value.figmaVariablesIntro, + url: 'https://www.figma.com/community/file/1256091634199852065', + }, + { + key: 'figma', + title: resourceLang.value.figma, + icon: FigmaTemplateSvg, + intro: resourceLang.value.figmaIntro, + url: 'https://www.figma.com/community/file/1021254029764378306', }, { key: 'sketch', @@ -55,26 +69,12 @@ const resourceCards = computed(() => [ url: resourceUrl.sketch, }, { - key: 'figma', - title: resourceLang.value.figma, - icon: FigmaTemplateSvg, - intro: resourceLang.value.figmaIntro, - url: 'https://www.figma.com/community/file/1021254029764378306', - }, - { - key: 'figma-variables', - title: resourceLang.value.figmaVariables, - icon: FigmaVariablesSvg, - intro: resourceLang.value.figmaVariablesIntro, - url: 'https://www.figma.com/community/file/1256091634199852065', - }, - { - key: '2023-figma-ui-kit', - title: resourceLang.value.figma2023, - description: '2023 Figma UI Kit', - icon: FigmaUiKitSvg, - intro: resourceLang.value.figma2023Intro, - url: 'https://www.figma.com/community/file/1305760370797950824/element-plus-design-system-ui-kit', + key: 'axure', + title: resourceLang.value.axure, + description: 'Axure RP 9.0', + icon: AxureComponentsSvg, + intro: resourceLang.value.axureIntro, + url: resourceUrl.axure, }, ]) diff --git a/docs/.vitepress/vitepress/styles/sidebar.scss b/docs/.vitepress/vitepress/styles/sidebar.scss index 917accedfa..d84fe49568 100644 --- a/docs/.vitepress/vitepress/styles/sidebar.scss +++ b/docs/.vitepress/vitepress/styles/sidebar.scss @@ -42,6 +42,7 @@ @include respond-to('md') { width: calc(var(--vp-sidebar-width-small)); + z-index: var(--sidebar-z-index-mobile); } @include respond-to('lg') { diff --git a/docs/en-US/component/dialog.md b/docs/en-US/component/dialog.md index 40de4a12cc..fbc9dbe9e7 100644 --- a/docs/en-US/component/dialog.md +++ b/docs/en-US/component/dialog.md @@ -99,7 +99,7 @@ dialog/destroy-on-close Try to drag the `header` part. -:::demo Set `draggable` to `true` to drag. +:::demo Set `draggable` to `true` to drag. Set `overflow` ^(2.5.4) to `true` can drag overflow the viewport. dialog/draggable-dialog @@ -116,7 +116,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to ** ### Attributes | Name | Description | Type | Default | -| -------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------- | ------- | +|----------------------------|------------------------------------------------------------------------------------------------------| ----------------------------------- | ------- | | model-value / v-model | visibility of Dialog | ^[boolean] | β€” | | title | title of Dialog. Can also be passed with a named slot (see the following table) | ^[string] | '' | | width | width of Dialog, default is 50% | ^[string] / ^[number] | '' | @@ -135,6 +135,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to ** | show-close | whether to show a close button | ^[boolean] | true | | before-close | callback before Dialog closes, and it will prevent Dialog from closing, use done to close the dialog | ^[Function]`(done: DoneFn) => void` | β€” | | draggable | enable dragging feature for Dialog | ^[boolean] | false | +| overflow ^(2.5.4) | draggable Dialog can overflow the viewport | ^[boolean] | false | | center | whether to align the header and footer in center | ^[boolean] | false | | align-center ^(2.2.16) | whether to align the dialog both horizontally and vertically | ^[boolean] | false | | destroy-on-close | destroy elements in Dialog when closed | ^[boolean] | false | diff --git a/docs/en-US/component/drawer.md b/docs/en-US/component/drawer.md index 0cd36952eb..42a753a7fa 100644 --- a/docs/en-US/component/drawer.md +++ b/docs/en-US/component/drawer.md @@ -115,12 +115,14 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in ### Events -| Name | Description | Type | -| ------ | ------------------------------------------------ | ----------------------- | -| open | Triggered before Drawer opening animation begins | ^[Function]`() => void` | -| opened | Triggered after Drawer opening animation ended | ^[Function]`() => void` | -| close | Triggered before Drawer closing animation begins | ^[Function]`() => void` | -| closed | Triggered after Drawer closing animation ended | ^[Function]`() => void` | +| Name | Description | Type | +| ---------------- | ------------------------------------------------ | ----------------------- | +| open | Triggered before Drawer opening animation begins | ^[Function]`() => void` | +| opened | Triggered after Drawer opening animation ended | ^[Function]`() => void` | +| close | Triggered before Drawer closing animation begins | ^[Function]`() => void` | +| closed | Triggered after Drawer closing animation ended | ^[Function]`() => void` | +| open-auto-focus | triggers after Drawer opens and content focused | ^[Function]`() => void` | +| close-auto-focus | triggers after Drawer closed and content focused | ^[Function]`() => void` | ### Slots diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md index ea432d7fa0..07943f237c 100644 --- a/docs/en-US/component/message-box.md +++ b/docs/en-US/component/message-box.md @@ -113,7 +113,7 @@ message-box/customized-icon MessageBox can be draggable. -:::demo Setting `draggable` to `true` allows user to drag MessageBox. +:::demo Setting `draggable` to `true` allows user to drag MessageBox. Set `overflow` ^(2.5.4) to `true` can drag overflow the viewport. message-box/draggable @@ -159,7 +159,7 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB ### Options | Name | Description | Type | Default | -| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------ | +|------------------------------|------------------------------------------------------------------------------------------------------------------------------------------| ---------------------------------------------------------------------------------- | ------------------------------------------------ | | autofocus | auto focus when open MessageBox | ^[boolean] | true | | title | title of the MessageBox | ^[string] | '' | | message | content of the MessageBox | ^[string] / ^[VNode] / ^[Function]`() => VNode` ^(2.2.17) | β€” | @@ -191,6 +191,7 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB | input-error-message | error message when validation fails | ^[string] | Illegal input | | center | whether to align the content in center | ^[boolean] | false | | draggable | whether MessageBox is draggable | ^[boolean] | false | +| overflow ^(2.5.4) | draggable MessageBox can overflow the viewport | ^[boolean] | false | | round-button | whether to use round button | ^[boolean] | false | | button-size | custom size of confirm and cancel buttons | ^[string]`'small' \| 'default' \| 'large'` | default | | append-to ^(2.2.19) | set the root element for the message box | ^[string] / ^[HTMLElement] | β€” | diff --git a/docs/en-US/component/tabs.md b/docs/en-US/component/tabs.md index c3a116992d..ceed07b078 100644 --- a/docs/en-US/component/tabs.md +++ b/docs/en-US/component/tabs.md @@ -108,10 +108,11 @@ tabs/customized-trigger ## Tabs Slots -| Name | Description | Subtags | -| ---------------- | ------------------------- | -------- | -| - | customize default content | Tab-pane | -| addIcon ^(2.4.0) | customize add button icon | - | +| Name | Description | Subtags | +| ------------------------------ | ------------------------- | -------- | +| - | customize default content | Tab-pane | +| addIcon ^(2.4.0) ^(deprecated) | customize add button icon | - | +| add-icon ^(2.5.4) | customize add button icon | - | ## Tab-pane Attributes diff --git a/docs/en-US/component/tag.md b/docs/en-US/component/tag.md index 0e75fb3de2..25ed34b73a 100644 --- a/docs/en-US/component/tag.md +++ b/docs/en-US/component/tag.md @@ -53,7 +53,7 @@ tag/theme ::: -## Rounded > 2.1.7 +## Rounded Tag can also be rounded like button. @@ -63,9 +63,9 @@ tag/rounded ::: -## Checkable tag +## Checkable Tag -Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag` +Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`. You can use `type` prop in ^(2.5.4). :::demo basic check-tag usage, the API is rather simple. @@ -77,16 +77,16 @@ tag/checkable ### Tag Attributes -| Name | Description | Type | Default | -| ------------------- | ------------------------------------ | ----------------------------------------------------------- | ------- | -| type | type of Tag | ^[enum]`'success' \| 'info' \| 'warning' \| 'danger' \| ''` | '' | -| closable | whether Tag can be removed | ^[boolean] | false | -| disable-transitions | whether to disable animations | ^[boolean] | false | -| hit | whether Tag has a highlighted border | ^[boolean] | false | -| color | background color of the Tag | ^[string] | '' | -| size | size of Tag | ^[enum]`'large' \| 'default' \| 'small' \| ''` | '' | -| effect | theme of Tag | ^[enum]`'dark' \| 'light' \| 'plain'` | light | -| round | whether Tag is rounded | ^[boolean] | false | +| Name | Description | Type | Default | +|---------------------|--------------------------------------|--------------------------------------------------------------------|---------| +| type | type of Tag | ^[enum]`'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'` | primary | +| closable | whether Tag can be removed | ^[boolean] | false | +| disable-transitions | whether to disable animations | ^[boolean] | false | +| hit | whether Tag has a highlighted border | ^[boolean] | false | +| color | background color of the Tag | ^[string] | β€” | +| size | size of Tag | ^[enum]`'large' \| 'default' \| 'small'` | β€” | +| effect | theme of Tag | ^[enum]`'dark' \| 'light' \| 'plain'` | light | +| round | whether Tag is rounded | ^[boolean] | false | ### Tag Events @@ -105,9 +105,10 @@ tag/checkable ### CheckTag Attributes -| Name | Description | Type | Default | -| ------------------------- | ----------- | ---------- | ------- | -| checked / v-model:checked | is checked | ^[boolean] | false | +| Name | Description | Type | Default | +|---------------------------|------------------|--------------------------------------------------------------------|---------| +| checked / v-model:checked | is checked | ^[boolean] | false | +| type ^(2.5.4) | type of CheckTag | ^[enum]`'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'` | primary | ### CheckTag Events diff --git a/docs/en-US/component/time-picker.md b/docs/en-US/component/time-picker.md index 88a81f4ffb..6cde162615 100644 --- a/docs/en-US/component/time-picker.md +++ b/docs/en-US/component/time-picker.md @@ -47,33 +47,34 @@ time-picker/range ### Attributes -| Name | Description | Type | Default | -| --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | -| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [number, number] \| [string, string]` | '' | -| readonly | whether TimePicker is read only | ^[boolean] | false | -| disabled | whether TimePicker is disabled | ^[boolean] | false | -| editable | whether the input is editable | ^[boolean] | true | -| clearable | whether to show clear button | ^[boolean] | true | -| size | size of Input | ^[enum]`'large' \| 'default' \| 'small'` | β€” | -| placeholder | placeholder in non-range mode | ^[string] | '' | -| start-placeholder | placeholder for the start time in range mode | ^[string] | β€” | -| end-placeholder | placeholder for the end time in range mode | ^[string] | β€” | -| is-range | whether to pick a time range | ^[boolean] | false | -| arrow-control | whether to pick time using arrow buttons | ^[boolean] | false | -| popper-class | custom class name for TimePicker's dropdown | ^[string] | '' | -| range-separator | range separator | ^[string] | '-' | -| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | β€” | -| default-value | optional, default date of the calendar | ^[Date] / ^[object]`[Date, Date]` | β€” | -| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | β€” | -| name | same as `name` in native input | ^[string] | '' | -| label ^(a11y) | same as `aria-label` in native input | ^[string] | β€” | -| prefix-icon | Custom prefix icon component | ^[string] / ^[Component] | Clock | -| clear-icon | Custom clear icon component | ^[string] / ^[Component] | CircleClose | -| disabled-hours | To specify the array of hours that cannot be selected | ^[Function]`(role: string, comparingDate?: Dayjs) => number[]` | β€” | -| disabled-minutes | To specify the array of minutes that cannot be selected | ^[Function]`(hour: number, role: string, comparingDate?: Dayjs) => number[]` | β€” | -| disabled-seconds | To specify the array of seconds that cannot be selected | ^[Function]`(hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]` | β€” | -| teleported | whether time-picker dropdown is teleported to the body | ^[boolean] | true | -| tabindex | input tabindex | ^[string] / ^[number] | 0 | +| Name | Description | Type | Default | +| --------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | +| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [number, number] \| [string, string]` | '' | +| readonly | whether TimePicker is read only | ^[boolean] | false | +| disabled | whether TimePicker is disabled | ^[boolean] | false | +| editable | whether the input is editable | ^[boolean] | true | +| clearable | whether to show clear button | ^[boolean] | true | +| size | size of Input | ^[enum]`'large' \| 'default' \| 'small'` | β€” | +| placeholder | placeholder in non-range mode | ^[string] | '' | +| start-placeholder | placeholder for the start time in range mode | ^[string] | β€” | +| end-placeholder | placeholder for the end time in range mode | ^[string] | β€” | +| is-range | whether to pick a time range | ^[boolean] | false | +| arrow-control | whether to pick time using arrow buttons | ^[boolean] | false | +| popper-class | custom class name for TimePicker's dropdown | ^[string] | '' | +| range-separator | range separator | ^[string] | '-' | +| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | β€” | +| default-value | optional, default date of the calendar | ^[Date] / ^[object]`[Date, Date]` | β€” | +| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | β€” | +| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | β€” | +| name | same as `name` in native input | ^[string] | '' | +| label ^(a11y) | same as `aria-label` in native input | ^[string] | β€” | +| prefix-icon | Custom prefix icon component | ^[string] / ^[Component] | Clock | +| clear-icon | Custom clear icon component | ^[string] / ^[Component] | CircleClose | +| disabled-hours | To specify the array of hours that cannot be selected | ^[Function]`(role: string, comparingDate?: Dayjs) => number[]` | β€” | +| disabled-minutes | To specify the array of minutes that cannot be selected | ^[Function]`(hour: number, role: string, comparingDate?: Dayjs) => number[]` | β€” | +| disabled-seconds | To specify the array of seconds that cannot be selected | ^[Function]`(hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]` | β€” | +| teleported | whether time-picker dropdown is teleported to the body | ^[boolean] | true | +| tabindex | input tabindex | ^[string] / ^[number] | 0 | ### Events diff --git a/docs/en-US/component/tour.md b/docs/en-US/component/tour.md index 34459f9856..5bd8e1901c 100644 --- a/docs/en-US/component/tour.md +++ b/docs/en-US/component/tour.md @@ -126,10 +126,10 @@ tour-step component configuration with the same name has higher priority ### TourStep slots -| Name | Description | -| ------- | ----------- | -| default | description | -| title | title | +| Name | Description | +| -------- | ----------- | +| default | description | +| header | header | ### TourStep events diff --git a/docs/en-US/component/upload.md b/docs/en-US/component/upload.md index 852173b16a..00655e7990 100644 --- a/docs/en-US/component/upload.md +++ b/docs/en-US/component/upload.md @@ -105,6 +105,7 @@ upload/manual | show-file-list | whether to show the uploaded file list. | ^[boolean] | true | | drag | whether to activate drag and drop mode. | ^[boolean] | false | | accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true`. | ^[string] | '' | +| crossorigin | native attribute [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). | ^[enum]`'' \| 'anonymous' \| 'use-credentials'` | β€” | | on-preview | hook function when clicking the uploaded files. | ^[Function]`(uploadFile: UploadFile) => void` | β€” | | on-remove | hook function when files are removed. | ^[Function]`(uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | β€” | | on-success | hook function when uploaded successfully. | ^[Function]`(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | β€” | diff --git a/docs/examples/dialog/align-center.vue b/docs/examples/dialog/align-center.vue index 1474756062..72a7acdff0 100644 --- a/docs/examples/dialog/align-center.vue +++ b/docs/examples/dialog/align-center.vue @@ -1,22 +1,22 @@ @@ -25,8 +25,3 @@ import { ref } from 'vue' const centerDialogVisible = ref(false) - diff --git a/docs/examples/dialog/basic-usage.vue b/docs/examples/dialog/basic-usage.vue index 1f337afe9e..346b1f85c3 100644 --- a/docs/examples/dialog/basic-usage.vue +++ b/docs/examples/dialog/basic-usage.vue @@ -1,22 +1,22 @@ @@ -37,8 +37,3 @@ const handleClose = (done: () => void) => { }) } - diff --git a/docs/examples/dialog/centered-content.vue b/docs/examples/dialog/centered-content.vue index 79df4943f6..23c7c8fbef 100644 --- a/docs/examples/dialog/centered-content.vue +++ b/docs/examples/dialog/centered-content.vue @@ -1,20 +1,20 @@ @@ -23,8 +23,3 @@ import { ref } from 'vue' const centerDialogVisible = ref(false) - diff --git a/docs/examples/dialog/customization-content.vue b/docs/examples/dialog/customization-content.vue index bbccc0d485..67e771b0a9 100644 --- a/docs/examples/dialog/customization-content.vue +++ b/docs/examples/dialog/customization-content.vue @@ -1,9 +1,13 @@ @@ -80,17 +79,3 @@ const gridData = [ }, ] - diff --git a/docs/examples/dialog/customization-header.vue b/docs/examples/dialog/customization-header.vue index ba4502c44f..009c58b6eb 100644 --- a/docs/examples/dialog/customization-header.vue +++ b/docs/examples/dialog/customization-header.vue @@ -1,8 +1,9 @@