From e5ebf80bf539b902088b4efdbfc4e7df1c2417a3 Mon Sep 17 00:00:00 2001 From: sseinHu <101374143+sseinHu@users.noreply.github.com> Date: Mon, 28 Aug 2023 09:31:22 +0800 Subject: [PATCH 01/27] fix(components): [select] gurad value type error (#14074) fix(components): [useSelect.ts] selected.slice is not a function select In the case of radio, the packaged code will report select. slice is not a function, because the radio selected is an object, and the object does not have the api of slice --- packages/components/select/src/useSelect.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts index a404a7d5651f9..b7f336c3686b4 100644 --- a/packages/components/select/src/useSelect.ts +++ b/packages/components/select/src/useSelect.ts @@ -914,11 +914,11 @@ export const useSelect = (props, states: States, ctx) => { ) const showTagList = computed(() => - states.selected.slice(0, props.maxCollapseTags) + props.multiple ? states.selected.slice(0, props.maxCollapseTags) : [] ) const collapseTagList = computed(() => - states.selected.slice(props.maxCollapseTags) + props.multiple ? states.selected.slice(props.maxCollapseTags) : [] ) const navigateOptions = (direction) => { From 2b3a34e6b55f4ac7850930c641f7d379f69a869f Mon Sep 17 00:00:00 2001 From: Hefty Date: Mon, 28 Aug 2023 10:29:30 +0800 Subject: [PATCH 02/27] refactor(components): [upload] reuse revkoeObjectURL function (#14126) --- packages/components/upload/src/upload.vue | 5 ++--- packages/components/upload/src/use-handlers.ts | 5 +++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/upload/src/upload.vue b/packages/components/upload/src/upload.vue index 0943ac2a8ffb6..66e78a8b53889 100644 --- a/packages/components/upload/src/upload.vue +++ b/packages/components/upload/src/upload.vue @@ -78,6 +78,7 @@ const { handleRemove, handleSuccess, handleProgress, + revokeFileObjectURL, } = useHandlers(props, uploadRef) const isPictureCard = computed(() => props.listType === 'picture-card') @@ -93,9 +94,7 @@ const uploadContentProps = computed(() => ({ })) onBeforeUnmount(() => { - uploadFiles.value.forEach(({ url }) => { - if (url?.startsWith('blob:')) URL.revokeObjectURL(url) - }) + uploadFiles.value.forEach(revokeFileObjectURL) }) provide(uploadContextKey, { diff --git a/packages/components/upload/src/use-handlers.ts b/packages/components/upload/src/use-handlers.ts index cb6752093289a..6b9275b1d75f0 100644 --- a/packages/components/upload/src/use-handlers.ts +++ b/packages/components/upload/src/use-handlers.ts @@ -18,7 +18,7 @@ import type { const SCOPE = 'ElUpload' -const revokeObjectURL = (file: UploadFile) => { +const revokeFileObjectURL = (file: UploadFile) => { if (file.url?.startsWith('blob:')) { URL.revokeObjectURL(file.url) } @@ -117,7 +117,7 @@ export const useHandlers = ( const fileList = uploadFiles.value fileList.splice(fileList.indexOf(file), 1) props.onRemove(file, fileList) - revokeObjectURL(file) + revokeFileObjectURL(file) } if (props.beforeRemove) { @@ -177,5 +177,6 @@ export const useHandlers = ( handleSuccess, handleRemove, submit, + revokeFileObjectURL, } } From 69750fbaf75be1b0ae7bbca9969e9b468157f9c9 Mon Sep 17 00:00:00 2001 From: King <103868381+kinggq@users.noreply.github.com> Date: Mon, 28 Aug 2023 15:30:43 +0800 Subject: [PATCH 03/27] fix(components): [collapse] allow nested inputs in ElCollapseItem (#14061) * fix(components): [collapse] allow nested inputs in ElCollapseItem to handle space key * Update packages/components/collapse/src/collapse-item.vue Co-authored-by: btea <2356281422@qq.com> --------- Co-authored-by: btea <2356281422@qq.com> --- packages/components/collapse/src/collapse-item.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/collapse/src/collapse-item.vue b/packages/components/collapse/src/collapse-item.vue index fac3f6048aedb..b69f0a0cee014 100644 --- a/packages/components/collapse/src/collapse-item.vue +++ b/packages/components/collapse/src/collapse-item.vue @@ -12,7 +12,7 @@ role="button" :tabindex="disabled ? -1 : 0" @click="handleHeaderClick" - @keypress.space.enter.stop.prevent="handleEnterClick" + @keypress.space.enter.self.stop.prevent="handleEnterClick" @focus="handleFocus" @blur="focusing = false" > From d73bf47f8bb78f3d5358e4d160f6602ef42862fb Mon Sep 17 00:00:00 2001 From: wonderl17 <31885971+wonderl17@users.noreply.github.com> Date: Mon, 28 Aug 2023 15:42:06 +0800 Subject: [PATCH 04/27] docs: [select-v2] add item-height attribute into doc (#14033) --- docs/en-US/component/select-v2.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md index 11f1a224d7be1..91142026a955d 100644 --- a/docs/en-US/component/select-v2.md +++ b/docs/en-US/component/select-v2.md @@ -167,6 +167,7 @@ select-v2/use-valueKey | 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 | +| item-height | The height of the dropdown item | number | - | 34 | | 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) | — | — | From 68980b3c50ecdec26015eef514d339122a20d837 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Mon, 28 Aug 2023 21:50:49 +0800 Subject: [PATCH 05/27] docs(components): [collapse] (#14066) --- docs/en-US/component/collapse.md | 52 +++++++++++++++++--------------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/docs/en-US/component/collapse.md b/docs/en-US/component/collapse.md index fdef9c598a481..d5314fb38e5e6 100644 --- a/docs/en-US/component/collapse.md +++ b/docs/en-US/component/collapse.md @@ -37,36 +37,40 @@ collapse/customization ::: -## Collapse Attributes +## Collapse API -| Name | Description | Type | Accepted Values | Default | -| --------------------- | ---------------------------------- | ---------------------------------------------------- | --------------- | ------- | -| model-value / v-model | currently active panel | string (accordion mode) / array (non-accordion mode) | — | — | -| accordion | whether to activate accordion mode | boolean | — | false | +### Collapse Attributes -## Collapse Events +| Name | Description | Type | Default | +| --------------------- | ---------------------------------- | ---------------------------------------------------------- | ------- | +| model-value / v-model | currently active panel | ^[string] (accordion mode) / ^[array] (non-accordion mode) | — | +| accordion | whether to activate accordion mode | ^[boolean] | false | -| Name | Description | Parameters | -| ------ | ---------------------------------- | ------------------------------------------------------------------- | -| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) | +### Collapse Events -## Collapse Slots +| Name | Description | Parameters | +| ------ | ---------------------------------- | --------------------------------------------------------------------- | +| change | triggers when active panels change | `(activeNames: array (non-accordion mode) / string (accordion mode))` | -| Name | Description | Subtags | -| ---- | ------------------------- | ------------- | -| - | customize default content | Collapse Item | +### Collapse Slots -## Collapse Item Attributes +| Name | Description | Subtags | +| ------- | ------------------------- | ------------- | +| default | customize default content | Collapse Item | -| Name | Description | Type | Accepted Values | Default | -| -------- | ---------------------------------- | ------------- | --------------- | ------- | -| name | unique identification of the panel | string/number | — | — | -| title | title of the panel | string | — | — | -| disabled | disable the collapse item | boolean | — | — | +## Collapse Item API -## Collapse Item Slot +### Collapse Item Attributes -| Name | Description | -| ----- | ------------------------------ | -| — | content of Collapse Item | -| title | content of Collapse Item title | +| Name | Description | Type | Default | +| -------- | ---------------------------------- | ------------------- | ------- | +| name | unique identification of the panel | ^[string]/^[number] | — | +| title | title of the panel | ^[string] | — | +| disabled | disable the collapse item | ^[boolean] | — | + +### Collapse Item Slot + +| Name | Description | +| ------- | ------------------------------ | +| default | content of Collapse Item | +| title | content of Collapse Item title | From cea00f0dc8774a216abe9f2ae46307696847d4af Mon Sep 17 00:00:00 2001 From: zepeng <75007029+yj-liuzepeng@users.noreply.github.com> Date: Mon, 28 Aug 2023 21:51:18 +0800 Subject: [PATCH 06/27] fix(components): [rate] bind the textColor property (#14092) * fix(components): [rate] bind the textColor property * add test case * add test case * Update rate.test.tsx * Update rate.md --- docs/en-US/component/rate.md | 2 +- packages/components/rate/__tests__/rate.test.tsx | 12 ++++++++++++ packages/components/rate/src/rate.vue | 6 +++++- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/docs/en-US/component/rate.md b/docs/en-US/component/rate.md index 9b0397a3ba7b2..208e2200fa76d 100644 --- a/docs/en-US/component/rate.md +++ b/docs/en-US/component/rate.md @@ -104,7 +104,7 @@ Use `css/scss` language to change the global or local color. We set some global | 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 | +| text-color | color of texts | ^[string] | '' | | texts | text array | ^[array]`string[]` | ['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise'] | | score-template | score template | ^[string] | {value} | | clearable ^(2.2.18) | whether value can be reset to `0` | ^[boolean] | false | diff --git a/packages/components/rate/__tests__/rate.test.tsx b/packages/components/rate/__tests__/rate.test.tsx index 8d04ac75a6968..6880cc5002307 100644 --- a/packages/components/rate/__tests__/rate.test.tsx +++ b/packages/components/rate/__tests__/rate.test.tsx @@ -56,6 +56,18 @@ describe('Rate.vue', () => { expect(text.textContent).toMatchInlineSnapshot('"4"') }) + it('text color', () => { + const wrapper = mount(Rate, { + props: { + showText: true, + modelValue: 1, + textColor: 'red', + }, + }) + const text = wrapper.find('.el-rate__text').element as HTMLSpanElement + expect(text.style.color).toEqual('red') + }) + it('value change', async () => { const wrapper = mount(Rate, { props: { diff --git a/packages/components/rate/src/rate.vue b/packages/components/rate/src/rate.vue index 9cfbb4fedbe41..136fd415564d0 100644 --- a/packages/components/rate/src/rate.vue +++ b/packages/components/rate/src/rate.vue @@ -43,7 +43,11 @@ - + {{ text }} From 5c03a3484d69790d2dc650f4f615bbb96490b8ef Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Tue, 29 Aug 2023 18:21:25 +0800 Subject: [PATCH 07/27] chore(ci): modify nightly release `PKG_NAME` value (#14147) --- scripts/nightly.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/nightly.sh b/scripts/nightly.sh index 532f233d205cf..83d00bed079e9 100644 --- a/scripts/nightly.sh +++ b/scripts/nightly.sh @@ -1 +1,2 @@ sed -i 's/"name": "element-plus",/"name": "@element-plus\/nightly",/' packages/element-plus/package.json +sed -i '2s/element-plus/@element-plus\/nightly/' internal/build-constants/src/pkg.ts \ No newline at end of file From ee8f1574c61c970fc3c8f886fff6d11a0e3cc9ff Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Tue, 29 Aug 2023 22:16:02 +0800 Subject: [PATCH 08/27] refactor(components): [collapse] replace `keypress` with `keydown` (#14137) --- packages/components/collapse/src/collapse-item.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/collapse/src/collapse-item.vue b/packages/components/collapse/src/collapse-item.vue index b69f0a0cee014..742e1aa5a14c8 100644 --- a/packages/components/collapse/src/collapse-item.vue +++ b/packages/components/collapse/src/collapse-item.vue @@ -12,7 +12,7 @@ role="button" :tabindex="disabled ? -1 : 0" @click="handleHeaderClick" - @keypress.space.enter.self.stop.prevent="handleEnterClick" + @keydown.space.enter.self.stop.prevent="handleEnterClick" @focus="handleFocus" @blur="focusing = false" > From 5f028f84492226ae0302607019de96b09d7b1a0f Mon Sep 17 00:00:00 2001 From: Frank Fang Date: Wed, 30 Aug 2023 14:01:45 +0800 Subject: [PATCH 09/27] fix(components): [table] add tabindex to tbody to fix #13991 (#14020) * fix(components): [table] add tabindex to tbody to fix #13991 * remove :focus style * fix: remove the focus outline * fix: replace focus with focus-visible * chore: add comments to explain why the tabIndex attr is needed --- packages/components/table/src/table-body/index.ts | 7 ++++++- packages/theme-chalk/src/table.scss | 6 ++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/components/table/src/table-body/index.ts b/packages/components/table/src/table-body/index.ts index cb9ff9703a11e..0df091f51417e 100644 --- a/packages/components/table/src/table-body/index.ts +++ b/packages/components/table/src/table-body/index.ts @@ -64,7 +64,12 @@ export default defineComponent({ render() { const { wrappedRowRender, store } = this const data = store.states.data.value || [] - return h('tbody', {}, [ + // Why do we need tabIndex: -1 ? + // If you set the tabindex attribute on an element , + // then its child content cannot be scrolled with the arrow keys, + // unless you set tabindex on the content too + // See https://github.com/facebook/react/issues/25462#issuecomment-1274775248 or https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex + return h('tbody', { tabIndex: -1 }, [ data.reduce((acc: VNode[], row) => { return acc.concat(wrappedRowRender(row, acc.length)) }, []), diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss index d255b8b9b86ed..f8530be8fdda2 100644 --- a/packages/theme-chalk/src/table.scss +++ b/packages/theme-chalk/src/table.scss @@ -34,6 +34,12 @@ } } + tbody { + &:focus-visible { + outline: none; + } + } + &.has-footer { &.#{$namespace}-table--scrollable-y, &.#{$namespace}-table--fluid-height { From 3c1bd4efc6c69aebc9820f08b38cc09150ebfe76 Mon Sep 17 00:00:00 2001 From: Wu Rui Date: Wed, 30 Aug 2023 21:31:10 +0800 Subject: [PATCH 10/27] fix(components): [form] improve types (#14062) * fix(components): [form] improve types * docs: update form * fix: consider RegExp * chore: update jsdoc --- docs/en-US/component/form.md | 34 ++++++++++++++++++++++++++- packages/components/form/src/types.ts | 7 ++++-- 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/docs/en-US/component/form.md b/docs/en-US/component/form.md index 393469f87218a..72ead4a83ee3b 100644 --- a/docs/en-US/component/form.md +++ b/docs/en-US/component/form.md @@ -235,7 +235,39 @@ type FormValidateCallback = ( interface FormItemRule extends RuleItem { trigger?: Arrayable } -type FormRules = Partial>> + +type Primitive = null | undefined | string | number | boolean | symbol | bigint +type BrowserNativeObject = Date | FileList | File | Blob | RegExp +type IsTuple> = number extends T['length'] + ? false + : true +type ArrayMethodKey = keyof any[] +type TupleKey> = Exclude +type ArrayKey = number +type PathImpl = V extends + | Primitive + | BrowserNativeObject + ? `${K}` + : `${K}` | `${K}.${Path}` +type Path = T extends ReadonlyArray + ? IsTuple extends true + ? { + [K in TupleKey]-?: PathImpl, T[K]> + }[TupleKey] + : PathImpl + : { + [K in keyof T]-?: PathImpl, T[K]> + }[keyof T] +type FieldPath = T extends object ? Path : never +// MaybeRef: see [@vueuse/core](https://github.com/vueuse/vueuse/blob/main/packages/shared/utils/types.ts) +// UnwrapRef: see [vue](https://github.com/vuejs/core/blob/main/packages/reactivity/src/ref.ts) +type FormRules | string> = string> = + Partial< + Record< + UnwrapRef extends string ? UnwrapRef : FieldPath>, + Arrayable + > + > ``` diff --git a/packages/components/form/src/types.ts b/packages/components/form/src/types.ts index 99006f011c6d5..8a3383452696c 100644 --- a/packages/components/form/src/types.ts +++ b/packages/components/form/src/types.ts @@ -22,6 +22,7 @@ export interface FormItemRule extends RuleItem { } type Primitive = null | undefined | string | number | boolean | symbol | bigint +type BrowserNativeObject = Date | FileList | File | Blob | RegExp /** * Check whether it is tuple * @@ -60,7 +61,9 @@ type ArrayKey = number * * 用于通过一个类型递归构建路径的辅助类型 */ -type PathImpl = V extends Primitive +type PathImpl = V extends + | Primitive + | BrowserNativeObject ? `${K}` : `${K}` | `${K}.${Path}` /** @@ -85,7 +88,7 @@ type Path = T extends ReadonlyArray * 通过一个类型收集所有路径的类型 * * @example - * FieldPath<{ 1: number; a: number; b: string; c: { d: number; e: string }; f: [{ value: string }]; g: { value: string }[] }> => '1' | 'a' | 'b' | 'c' | 'f' | 'g' | 'c.d' | 'c.e' | 'f.0' | 'f.0.value' | 'g.number' | 'g.number.value' + * FieldPath<{ 1: number; a: number; b: string; c: { d: number; e: string }; f: [{ value: string }]; g: { value: string }[]; h: Date; i: FileList; j: File; k: Blob; l: RegExp }> => '1' | 'a' | 'b' | 'c' | 'f' | 'g' | 'c.d' | 'c.e' | 'f.0' | 'f.0.value' | 'g.number' | 'g.number.value' | 'h' | 'i' | 'j' | 'k' | 'l' */ type FieldPath = T extends object ? Path : never export type FormRules< From 6cc58926728cbc74dabd088cc2f67c6a086d373e Mon Sep 17 00:00:00 2001 From: wzc520pyfm <69044080+wzc520pyfm@users.noreply.github.com> Date: Thu, 31 Aug 2023 11:22:01 +0800 Subject: [PATCH 11/27] fix(components): [select] fix hover index error when creating option (#12635) * fix(components): [select] fix error when creating option closed #12634 * test(components): [select] add test for create and default first option * fix(components): [select] compatible #11297 --- .../select/__tests__/select.test.ts | 35 +++++++++++++++++++ packages/components/select/src/useSelect.ts | 2 +- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts index 3e8d9080a9133..1b3a20fb9d9f5 100644 --- a/packages/components/select/__tests__/select.test.ts +++ b/packages/components/select/__tests__/select.test.ts @@ -858,6 +858,41 @@ describe('Select', () => { expect((wrapper.vm as any).value).toBe('new') }) + test('allow create with default first option', async () => { + wrapper = getSelectVm( + { + filterable: true, + allowCreate: true, + defaultFirstOption: true, + }, + [ + { + value: 'HTML', + label: 'HTML', + }, + { + value: 'CSS', + label: 'CSS', + }, + { + value: 'JavaScript', + label: 'JavaScript', + }, + ] + ) + const select = wrapper.findComponent({ name: 'ElSelect' }) + const selectVm = select.vm as any + const input = wrapper.find('input') + input.element.focus() + selectVm.selectedLabel = 'Java' + selectVm.debouncedOnInputChange() + await nextTick() + const options = [...getOptions()] + expect(Array.from(options[0].classList)).toContain('hover') + options[0].click() + expect((wrapper.vm as any).value).toBe('Java') + }) + test('allow create async option', async () => { const options = [ { diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts index b7f336c3686b4..9a3fd76cd8fa6 100644 --- a/packages/components/select/src/useSelect.ts +++ b/packages/components/select/src/useSelect.ts @@ -182,7 +182,7 @@ export const useSelect = (props, states: States, ctx) => { newList.push(list[index]) } }) - return newList.length ? newList : list + return newList.length >= list.length ? newList : list }) const cachedOptionsArray = computed(() => From 86beacee50f32843d8a78a73738e7a20ce1e315c Mon Sep 17 00:00:00 2001 From: JBtje Date: Fri, 1 Sep 2023 14:21:03 +0200 Subject: [PATCH 12/27] fix(i18n): improve Dutch(nl) translation (#14164) --- packages/locale/lang/nl.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/locale/lang/nl.ts b/packages/locale/lang/nl.ts index 2b4814f8163a8..1ee3072cb5946 100644 --- a/packages/locale/lang/nl.ts +++ b/packages/locale/lang/nl.ts @@ -114,14 +114,14 @@ export default { hasCheckedFormat: '{checked}/{total} geselecteerd', }, image: { - error: 'FAILED', // to be translated + error: 'MISLUKT', }, pageHeader: { - title: 'Back', // to be translated + title: 'Terug', }, popconfirm: { - confirmButtonText: 'Yes', // to be translated - cancelButtonText: 'No', // to be translated + confirmButtonText: 'Ja', + cancelButtonText: 'Nee', }, }, } From ce2315d7346374c68d9b218e4b47fc95f77821ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E8=87=BB?= <770226915@qq.com> Date: Mon, 4 Sep 2023 21:39:22 +0800 Subject: [PATCH 13/27] docs(components): message-box (#14179) update message-box options closed #14178 --- docs/en-US/component/message-box.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md index 1d10bee89fcd0..ea432d7fa0acd 100644 --- a/docs/en-US/component/message-box.md +++ b/docs/en-US/component/message-box.md @@ -159,16 +159,16 @@ 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) | — | | dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false | -| type | message type, used for icon display | ^[enum]`'success' \ | 'info' \| 'warning' \| 'error'` | '' | +| type | message type, used for icon display | ^[enum]`'success' \| 'info' \| 'warning' \| 'error'` | '' | | 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]`(value: string, action: Action) => any \ | (action: Action) => any` | null | +| callback | MessageBox closing callback if you don't prefer Promise | ^[Function]`(value: string, action: Action) => any \| (action: Action) => any` | null | | showClose | whether to show close icon of MessageBox | ^[boolean] | true | | before-close | callback before MessageBox closes, and it will prevent MessageBox from closing | ^[Function]`(action: Action, instance: MessageBoxState, done: () => void) => void` | null | | distinguish-cancel-and-close | whether to distinguish canceling and closing the MessageBox | ^[boolean] | false | From 9a60a90e1e1d089d7e2decafd04232bc69839eba Mon Sep 17 00:00:00 2001 From: boomboy4 <37095891+boomboy4@users.noreply.github.com> Date: Wed, 6 Sep 2023 08:14:58 +0800 Subject: [PATCH 14/27] feat(components): [el-pagination] add teleported prop (#14072) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(components): [pagination] 修复toplayer全屏模式下分页下拉框无法显示问题 分页组件新增teleported参数 默认为true 便于用户控制size下拉框是否插入body closed #14070 * docs(docs): [pagination] Add a teleported attribute closed #14070 * fix(components): [pagination] teleported props default value delete set teleported default value closed #14070 * fix(components): [pagination] change the default value of teleported change the default value of teleported to true * Update docs/en-US/component/pagination.md Co-authored-by: qiang --------- Co-authored-by: shaojia.cheng Co-authored-by: qiang --- docs/en-US/component/pagination.md | 1 + packages/components/pagination/src/components/sizes.ts | 1 + packages/components/pagination/src/components/sizes.vue | 1 + packages/components/pagination/src/pagination.ts | 8 ++++++++ 4 files changed, 11 insertions(+) diff --git a/docs/en-US/component/pagination.md b/docs/en-US/component/pagination.md index 64384dda19053..0628672f1f04f 100644 --- a/docs/en-US/component/pagination.md +++ b/docs/en-US/component/pagination.md @@ -84,6 +84,7 @@ pagination/more-elements | next-text | text for the next button | ^[string] | '' | | next-icon | icon for the next button, has a lower priority than `next-text` | ^[string] / ^[Component] | ArrowRight | | disabled | whether Pagination is disabled | ^[boolean] | false | +| teleported ^(2.3.13) | whether Pagination select dropdown is teleported to the body | ^[boolean] | true | | hide-on-single-page | whether to hide when there's only one page | ^[boolean] | false | :::warning diff --git a/packages/components/pagination/src/components/sizes.ts b/packages/components/pagination/src/components/sizes.ts index 7f45efbac22a4..256faaf9c49ce 100644 --- a/packages/components/pagination/src/components/sizes.ts +++ b/packages/components/pagination/src/components/sizes.ts @@ -16,6 +16,7 @@ export const paginationSizesProps = buildProps({ type: String, }, disabled: Boolean, + teleported: Boolean, size: { type: String, values: componentSizes, diff --git a/packages/components/pagination/src/components/sizes.vue b/packages/components/pagination/src/components/sizes.vue index 956216c68aaf6..a5f230de7a88c 100644 --- a/packages/components/pagination/src/components/sizes.vue +++ b/packages/components/pagination/src/components/sizes.vue @@ -5,6 +5,7 @@ :disabled="disabled" :popper-class="popperClass" :size="size" + :teleported="teleported" :validate-event="false" @change="handleChange" > diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts index f04ec59ff7082..275d9b492cba0 100644 --- a/packages/components/pagination/src/pagination.ts +++ b/packages/components/pagination/src/pagination.ts @@ -137,6 +137,13 @@ export const paginationProps = buildProps({ type: iconPropType, default: () => ArrowRight, }, + /** + * @description whether Pagination size is teleported to body + */ + teleported: { + type: Boolean, + default: true, + }, /** * @description whether to use small pagination */ @@ -369,6 +376,7 @@ export default defineComponent({ pageSizes: props.pageSizes, popperClass: props.popperClass, disabled: props.disabled, + teleported: props.teleported, size: props.small ? 'small' : 'default', }), slot: slots?.default?.() ?? null, From 95494b7154289a51b57ad94cbbee60a1ea654f35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bean=20Deng=20=E9=82=93=E6=96=8C?= Date: Wed, 6 Sep 2023 14:28:14 +0800 Subject: [PATCH 15/27] feat(components): [image-viewer] Add rotate event when rotating images (#14138) * feat(components): [image-viewer] Add rotate event when rotating images * Update docs/en-US/component/image.md Co-authored-by: btea <2356281422@qq.com> --------- Co-authored-by: btea <2356281422@qq.com> --- docs/en-US/component/image.md | 1 + packages/components/image-viewer/src/image-viewer.ts | 1 + packages/components/image-viewer/src/image-viewer.vue | 2 ++ 3 files changed, 4 insertions(+) diff --git a/docs/en-US/component/image.md b/docs/en-US/component/image.md index 84b78ffda300d..566a721a7af11 100644 --- a/docs/en-US/component/image.md +++ b/docs/en-US/component/image.md @@ -116,6 +116,7 @@ image/image-preview | ------ | ------------------------------------------------------------------------------------------------- | ------------------------------------ | | close | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | ^[Function]`() => void` | | switch | trigger when switching images. | ^[Function]`(index: number) => void` | +| rotate ^(2.3.13) | trigger when rotating images. | ^[Function]`(deg: number) => void` | ### Image Viewer Exposes diff --git a/packages/components/image-viewer/src/image-viewer.ts b/packages/components/image-viewer/src/image-viewer.ts index 9f42360666705..251e8bf148628 100644 --- a/packages/components/image-viewer/src/image-viewer.ts +++ b/packages/components/image-viewer/src/image-viewer.ts @@ -70,6 +70,7 @@ export type ImageViewerProps = ExtractPropTypes export const imageViewerEmits = { close: () => true, switch: (index: number) => isNumber(index), + rotate: (deg: number) => isNumber(deg), } export type ImageViewerEmits = typeof imageViewerEmits diff --git a/packages/components/image-viewer/src/image-viewer.vue b/packages/components/image-viewer/src/image-viewer.vue index 8262b1a34f84f..c6a0f0df82ca8 100644 --- a/packages/components/image-viewer/src/image-viewer.vue +++ b/packages/components/image-viewer/src/image-viewer.vue @@ -345,9 +345,11 @@ function handleActions(action: ImageViewerAction, options = {}) { break case 'clockwise': transform.value.deg += rotateDeg + emit('rotate', transform.value.deg) break case 'anticlockwise': transform.value.deg -= rotateDeg + emit('rotate', transform.value.deg) break } transform.value.enableTransition = enableTransition From 9b0a8f8c9a3b02fe8c02fc6f4429e401edab715d Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Thu, 7 Sep 2023 13:51:25 +0800 Subject: [PATCH 16/27] chore: format (#14200) --- docs/en-US/component/card.md | 10 ++++----- docs/en-US/component/date-picker.md | 2 +- docs/en-US/component/input-number.md | 2 +- docs/en-US/component/pagination.md | 2 +- docs/en-US/component/rate.md | 2 +- docs/en-US/component/time-picker.md | 2 +- docs/en-US/component/transfer.md | 33 +++++++++++++--------------- 7 files changed, 25 insertions(+), 28 deletions(-) diff --git a/docs/en-US/component/card.md b/docs/en-US/component/card.md index f820f8a38fe4d..c1b244cdb3d86 100644 --- a/docs/en-US/component/card.md +++ b/docs/en-US/component/card.md @@ -51,12 +51,12 @@ card/shadow ### Attributes -| Name | Description | Type | Default | -| ---------- | ------------------------------------------------------------- | --------------------------------- | ------- | -| header | title of the card. Also accepts a DOM passed by `slot#header` | ^[string] | — | -| body-style | CSS style of card body | ^[object]`CSSProperties` | — | +| Name | Description | Type | Default | +| -------------------- | ------------------------------------------------------------- | --------------------------------- | ------- | +| header | title of the card. Also accepts a DOM passed by `slot#header` | ^[string] | — | +| body-style | CSS style of card body | ^[object]`CSSProperties` | — | | body-class ^(2.3.10) | custom class name of card body | ^[string] | — | -| shadow | when to show card shadows | ^[enum]`always \| never \| hover` | always | +| shadow | when to show card shadows | ^[enum]`always \| never \| hover` | always | ### Slots diff --git a/docs/en-US/component/date-picker.md b/docs/en-US/component/date-picker.md index 2f52c88c5a56a..91ee90387f2e6 100644 --- a/docs/en-US/component/date-picker.md +++ b/docs/en-US/component/date-picker.md @@ -189,7 +189,7 @@ Note, date time locale (month name, first day of the week ...) are also configur ## Methods | Method | Description | Parameters | -|-----------------------| --------------------------- | ---------- | +| --------------------- | --------------------------- | ---------- | | focus | focus the Input component | — | | handleOpen ^(2.2.16) | open the DatePicker popper | — | | handleClose ^(2.2.16) | close the DatePicker popper | — | diff --git a/docs/en-US/component/input-number.md b/docs/en-US/component/input-number.md index 8518ef4c12113..9b53cf8fa5feb 100644 --- a/docs/en-US/component/input-number.md +++ b/docs/en-US/component/input-number.md @@ -84,7 +84,7 @@ input-number/controlled ### Attributes | Name | Description | Type | Default | -|-------------------------| ------------------------------------------------ | --------------------------------------------- | --------- | +| ----------------------- | ------------------------------------------------ | --------------------------------------------- | --------- | | model-value / v-model | binding value | ^[number] | — | | min | the minimum allowed value | ^[number] | -Infinity | | max | the maximum allowed value | ^[number] | Infinity | diff --git a/docs/en-US/component/pagination.md b/docs/en-US/component/pagination.md index 0628672f1f04f..d16b484ca311c 100644 --- a/docs/en-US/component/pagination.md +++ b/docs/en-US/component/pagination.md @@ -84,7 +84,7 @@ pagination/more-elements | next-text | text for the next button | ^[string] | '' | | next-icon | icon for the next button, has a lower priority than `next-text` | ^[string] / ^[Component] | ArrowRight | | disabled | whether Pagination is disabled | ^[boolean] | false | -| teleported ^(2.3.13) | whether Pagination select dropdown is teleported to the body | ^[boolean] | true | +| teleported ^(2.3.13) | whether Pagination select dropdown is teleported to the body | ^[boolean] | true | | hide-on-single-page | whether to hide when there's only one page | ^[boolean] | false | :::warning diff --git a/docs/en-US/component/rate.md b/docs/en-US/component/rate.md index 208e2200fa76d..94eda0338b4d1 100644 --- a/docs/en-US/component/rate.md +++ b/docs/en-US/component/rate.md @@ -104,7 +104,7 @@ Use `css/scss` language to change the global or local color. We set some global | 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] | '' | +| text-color | color of texts | ^[string] | '' | | texts | text array | ^[array]`string[]` | ['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise'] | | score-template | score template | ^[string] | {value} | | clearable ^(2.2.18) | whether value can be reset to `0` | ^[boolean] | false | diff --git a/docs/en-US/component/time-picker.md b/docs/en-US/component/time-picker.md index 81fdeb5e50e5d..88a81f4ffbdf0 100644 --- a/docs/en-US/component/time-picker.md +++ b/docs/en-US/component/time-picker.md @@ -87,7 +87,7 @@ time-picker/range ### Exposes | Name | Description | Type | -|-----------------------| --------------------------- | ------------------------------------------------- | +| --------------------- | --------------------------- | ------------------------------------------------- | | focus | focus the Input component | ^[Function]`(e: FocusEvent \| undefined) => void` | | blur | blur the Input component | ^[Function]`(e: FocusEvent \| undefined) => void` | | handleOpen ^(2.2.16) | open the TimePicker popper | ^[Function]`() => void` | diff --git a/docs/en-US/component/transfer.md b/docs/en-US/component/transfer.md index d8113f6c10a40..062310249701d 100644 --- a/docs/en-US/component/transfer.md +++ b/docs/en-US/component/transfer.md @@ -47,22 +47,22 @@ transfer/prop-alias ### Attributes -| Name | Description | Type | Default | -| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------- | -| model-value / v-model | binding value | ^[object]`Array` | [] | +| Name | Description | Type | Default | +| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | -------- | +| model-value / v-model | binding value | ^[object]`Array` | [] | | data | data source | ^[object]`Record[]` | [] | -| filterable | whether Transfer is filterable | ^[boolean] | false | -| filter-placeholder | placeholder for the filter input | ^[string] | — | +| filterable | whether Transfer is filterable | ^[boolean] | false | +| filter-placeholder | placeholder for the filter input | ^[string] | — | | filter-method | custom filter method | ^[Function]`(query: string, item: Record) => boolean` | — | -| target-order | order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top | ^[enum]`'original' \| 'push' \| 'unshift'` | original | -| titles | custom list titles | ^[object]`[string, string]` | [] | -| button-texts | custom button texts | ^[object]`[string, string]` | [] | -| render-content | custom render function for data items | ^[object]`renderContent` | — | -| format | texts for checking status in list header | ^[object]`TransferFormat` | {} | -| props | prop aliases for data source | ^[object]`TransferPropsAlias` | — | -| left-default-checked | key array of initially checked data items of the left list | ^[object]`Array` | [] | -| right-default-checked | key array of initially checked data items of the right list | ^[object]`Array` | [] | -| validate-event | whether to trigger form validation | ^[boolean] | true | +| target-order | order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top | ^[enum]`'original' \| 'push' \| 'unshift'` | original | +| titles | custom list titles | ^[object]`[string, string]` | [] | +| button-texts | custom button texts | ^[object]`[string, string]` | [] | +| render-content | custom render function for data items | ^[object]`renderContent` | — | +| format | texts for checking status in list header | ^[object]`TransferFormat` | {} | +| props | prop aliases for data source | ^[object]`TransferPropsAlias` | — | +| left-default-checked | key array of initially checked data items of the left list | ^[object]`Array` | [] | +| right-default-checked | key array of initially checked data items of the right list | ^[object]`Array` | [] | +| validate-event | whether to trigger form validation | ^[boolean] | true | ### Events @@ -100,10 +100,7 @@ type TransferDirection = 'left' | 'right' type TransferDataItem = Record -type renderContent = ( - h: typeof H, - option: TransferDataItem -) => VNode | VNode[] +type renderContent = (h: typeof H, option: TransferDataItem) => VNode | VNode[] interface TransferFormat { noChecked?: string From c7021b31ed75eb5b9a4185d3ae02a25327b80262 Mon Sep 17 00:00:00 2001 From: Karolis_Stoncius_Sneakybox Date: Fri, 8 Sep 2023 06:54:44 +0300 Subject: [PATCH 17/27] refactor(components): [date-picker] add aria-labels to date picker btns (#14149) --- .../date-picker/src/date-picker-com/panel-date-range.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue index b4be312f406ad..512ebc0b745e8 100644 --- a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue +++ b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue @@ -109,6 +109,7 @@