From 223d0da28a77ec9514049708f8dd591fc132dd1b Mon Sep 17 00:00:00 2001
From: wzc520pyfm <69044080+wzc520pyfm@users.noreply.github.com>
Date: Sat, 23 Mar 2024 09:43:03 +0800
Subject: [PATCH 01/18] test(utils): [vue] add refs, size and validator test
(#16201)
---
packages/utils/__tests__/vue/refs.test.ts | 11 ++++++++
packages/utils/__tests__/vue/size.test.ts | 19 ++++++++++++++
.../utils/__tests__/vue/validator.test.ts | 25 +++++++++++++++++++
3 files changed, 55 insertions(+)
create mode 100644 packages/utils/__tests__/vue/refs.test.ts
create mode 100644 packages/utils/__tests__/vue/size.test.ts
create mode 100644 packages/utils/__tests__/vue/validator.test.ts
diff --git a/packages/utils/__tests__/vue/refs.test.ts b/packages/utils/__tests__/vue/refs.test.ts
new file mode 100644
index 0000000000000..a723bbdff7a8c
--- /dev/null
+++ b/packages/utils/__tests__/vue/refs.test.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it, vi } from 'vitest'
+import { composeRefs } from '../..'
+
+describe('composeRefs', () => {
+ it('ref setter should be called', () => {
+ const refSetter = vi.fn()
+ const fn = composeRefs(refSetter)
+ fn(null)
+ expect(refSetter).toHaveBeenCalled()
+ })
+})
diff --git a/packages/utils/__tests__/vue/size.test.ts b/packages/utils/__tests__/vue/size.test.ts
new file mode 100644
index 0000000000000..c0c57c9ef6307
--- /dev/null
+++ b/packages/utils/__tests__/vue/size.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { getComponentSize } from '../..'
+
+describe('vue size', () => {
+ it('default value', () => {
+ const value1 = getComponentSize()
+ const value2 = getComponentSize('default')
+ expect(value1).toBe(32)
+ expect(value2).toBe(32)
+ })
+ it('small value', () => {
+ const value = getComponentSize('small')
+ expect(value).toBe(24)
+ })
+ it('large value', () => {
+ const value = getComponentSize('large')
+ expect(value).toBe(40)
+ })
+})
diff --git a/packages/utils/__tests__/vue/validator.test.ts b/packages/utils/__tests__/vue/validator.test.ts
new file mode 100644
index 0000000000000..6a61c1eaf3f69
--- /dev/null
+++ b/packages/utils/__tests__/vue/validator.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { isValidComponentSize, isValidDatePickType } from '../..'
+
+describe('validator', () => {
+ it('isValidComponentSize', () => {
+ expect(isValidComponentSize('')).toBe(true)
+ expect(isValidComponentSize('default')).toBe(true)
+ expect(isValidComponentSize('small')).toBe(true)
+ expect(isValidComponentSize('large')).toBe(true)
+ expect(isValidComponentSize('unknown')).toBe(false)
+ })
+ it('isValidDatePickType', () => {
+ expect(isValidDatePickType('year')).toBe(true)
+ expect(isValidDatePickType('years')).toBe(true)
+ expect(isValidDatePickType('month')).toBe(true)
+ expect(isValidDatePickType('date')).toBe(true)
+ expect(isValidDatePickType('dates')).toBe(true)
+ expect(isValidDatePickType('week')).toBe(true)
+ expect(isValidDatePickType('datetime')).toBe(true)
+ expect(isValidDatePickType('datetimerange')).toBe(true)
+ expect(isValidDatePickType('daterange')).toBe(true)
+ expect(isValidDatePickType('monthrange')).toBe(true)
+ expect(isValidDatePickType('moment')).toBe(false)
+ })
+})
From 79b6235fdfffb1e15b6d5d5108b916996fd1ff2b Mon Sep 17 00:00:00 2001
From: wzc520pyfm <69044080+wzc520pyfm@users.noreply.github.com>
Date: Sat, 23 Mar 2024 09:43:22 +0800
Subject: [PATCH 02/18] test(hooks): [use-id] add debug-warn test (#16194)
---
packages/hooks/__tests__/use-id.test.tsx | 31 +++++++++++++++++++++++-
1 file changed, 30 insertions(+), 1 deletion(-)
diff --git a/packages/hooks/__tests__/use-id.test.tsx b/packages/hooks/__tests__/use-id.test.tsx
index c8aa7953600b9..933f1f74a069a 100644
--- a/packages/hooks/__tests__/use-id.test.tsx
+++ b/packages/hooks/__tests__/use-id.test.tsx
@@ -1,5 +1,5 @@
import { config, mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { ID_INJECTION_KEY, useId, useIdInjection } from '../use-id'
describe('no injection value', () => {
@@ -73,3 +73,32 @@ describe('with injection value', () => {
expect(wrapper.vm.id).toBe('el-id-1024-0')
})
})
+
+describe('useId warns in non-client environment with default idInjection', async () => {
+ const mockGetCurrentInstance = vi.fn(() => false)
+ const mockWarn = vi.fn()
+ const mockIsClient = false
+
+ beforeEach(() => {
+ vi.resetModules()
+ vi.doMock('vue', () => ({
+ getCurrentInstance: mockGetCurrentInstance,
+ ref: vi.fn(),
+ computed: vi.fn(),
+ }))
+ vi.doMock('@element-plus/utils', () => ({
+ debugWarn: mockWarn,
+ isClient: mockIsClient,
+ }))
+ })
+ afterEach(() => {
+ vi.doUnmock('@element-plus/utils')
+ vi.doUnmock('vue')
+ })
+
+ it('should warn', async () => {
+ const { useId: mockUseId } = await import('../use-id')
+ mockUseId()
+ expect(mockWarn).toHaveBeenCalled()
+ })
+})
From 39a61350d3aa1f5d21a16df159f23790bd74ef65 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sat, 23 Mar 2024 10:55:23 +0800
Subject: [PATCH 03/18] feat(components): [tree] lazy load provide reject
(#16099)
---
docs/en-US/component/tree.md | 10 ++++-
docs/examples/tree/multiple-times-load.vue | 43 ++++++++++++++++++++++
packages/components/tree/src/model/node.ts | 5 ++-
3 files changed, 56 insertions(+), 2 deletions(-)
create mode 100644 docs/examples/tree/multiple-times-load.vue
diff --git a/docs/en-US/component/tree.md b/docs/en-US/component/tree.md
index acf3f0779891b..4795837092046 100644
--- a/docs/en-US/component/tree.md
+++ b/docs/en-US/component/tree.md
@@ -35,6 +35,14 @@ tree/custom-leaf
:::
+## Lazy loading multiple times ^(2.6.2)
+
+:::demo When lazily loading node data remotely, lazy loading may sometimes fail. In this case, you can call reject to keep the node status as is and allow remote loading to continue.
+
+tree/multiple-times-load
+
+:::
+
## Disabled checkbox
The checkbox of a node can be set as disabled.
@@ -122,7 +130,7 @@ tree/draggable
| node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — |
| props | configuration options, see the following table | object | — | — |
| render-after-expand | whether to render child nodes only after a parent node is expanded for the first time | boolean | — | true |
-| load | method for loading subtree data, only works when `lazy` is true | function(node, resolve) | — | — |
+| load | method for loading subtree data, only works when `lazy` is true | function(node, resolve, reject) | — | — |
| render-content | render function for tree node | Function(h, `{ node, data, store }`) | — | — |
| highlight-current | whether current node is highlighted | boolean | — | false |
| default-expand-all | whether to expand all nodes by default | boolean | — | false |
diff --git a/docs/examples/tree/multiple-times-load.vue b/docs/examples/tree/multiple-times-load.vue
new file mode 100644
index 0000000000000..98541edd65a34
--- /dev/null
+++ b/docs/examples/tree/multiple-times-load.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
diff --git a/packages/components/tree/src/model/node.ts b/packages/components/tree/src/model/node.ts
index fbc9d16260e98..b3d5e1fa2c181 100644
--- a/packages/components/tree/src/model/node.ts
+++ b/packages/components/tree/src/model/node.ts
@@ -547,8 +547,11 @@ class Node {
callback.call(this, children)
}
}
+ const reject = () => {
+ this.loading = false
+ }
- this.store.load(this, resolve)
+ this.store.load(this, resolve, reject)
} else {
if (callback) {
callback.call(this)
From 82775736cd384e0971aaa227333aedec36442d64 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sat, 23 Mar 2024 12:03:30 +0800
Subject: [PATCH 04/18] chore(docs): [tree] update version (#16213)
---
docs/en-US/component/tree.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/en-US/component/tree.md b/docs/en-US/component/tree.md
index 4795837092046..7c80ee9f752f7 100644
--- a/docs/en-US/component/tree.md
+++ b/docs/en-US/component/tree.md
@@ -35,7 +35,7 @@ tree/custom-leaf
:::
-## Lazy loading multiple times ^(2.6.2)
+## Lazy loading multiple times ^(2.6.3)
:::demo When lazily loading node data remotely, lazy loading may sometimes fail. In this case, you can call reject to keep the node status as is and allow remote loading to continue.
From a9c54e3b4a56dd8e0b2fbfc86ce2ee07c136d625 Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Sun, 24 Mar 2024 08:53:08 +0300
Subject: [PATCH 05/18] feat(locale): update ru locale (#16192)
---
packages/locale/lang/ru.ts | 24 ++++++++++++------------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/packages/locale/lang/ru.ts b/packages/locale/lang/ru.ts
index aeb68ae5a49ad..59e0477c82c25 100644
--- a/packages/locale/lang/ru.ts
+++ b/packages/locale/lang/ru.ts
@@ -2,7 +2,7 @@ export default {
name: 'ru',
el: {
breadcrumb: {
- label: 'Breadcrumb', // to be translated
+ label: 'Хлебные крошки',
},
colorpicker: {
confirm: 'OK',
@@ -79,12 +79,12 @@ export default {
pagesize: ' на странице',
total: 'Всего {total}',
pageClassifier: '',
- page: 'Page', // to be translated
- prev: 'Go to previous page', // to be translated
- next: 'Go to next page', // to be translated
- currentPage: 'page {pager}', // to be translated
- prevPages: 'Previous {pager} pages', // to be translated
- nextPages: 'Next {pager} pages', // to be translated
+ page: 'Страница',
+ prev: 'Перейти на предыдущую страницу',
+ next: 'Перейти на следующую страницу',
+ currentPage: 'страница {pager}',
+ prevPages: 'Предыдущие {pager} страниц',
+ nextPages: 'Следующие {pager} страниц',
},
messagebox: {
title: 'Сообщение',
@@ -122,19 +122,19 @@ export default {
hasCheckedFormat: '{checked}/{total} выбрано',
},
image: {
- error: 'FAILED', // to be translated
+ error: 'ОШИБКА',
},
pageHeader: {
- title: 'Back', // to be translated
+ title: 'Назад',
},
popconfirm: {
confirmButtonText: 'OK',
cancelButtonText: 'Отмена',
},
carousel: {
- leftArrow: 'Carousel arrow left', // to be translated
- rightArrow: 'Carousel arrow right', // to be translated
- indicator: 'Carousel switch to index {index}', // to be translated
+ leftArrow: 'Слайдер стрелка влево',
+ rightArrow: 'Слайдер стрелка вправо',
+ indicator: 'Слайдер перейти на страницу под номером {index}',
},
},
}
From dc19ddff10447ddee492819ab16ab2de4752a23c Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Tue, 26 Mar 2024 12:03:51 +0800
Subject: [PATCH 06/18] feat(components): [message] add plain prop (#16214)
* feat(components): [message] add plain prop
* feat(components): update
---
docs/en-US/component/message.md | 15 ++++++--
docs/examples/message/plain.vue | 39 +++++++++++++++++++++
packages/components/message/src/message.ts | 10 +++++-
packages/components/message/src/message.vue | 1 +
packages/theme-chalk/src/message.scss | 6 ++++
5 files changed, 68 insertions(+), 3 deletions(-)
create mode 100644 docs/examples/message/plain.vue
diff --git a/docs/en-US/component/message.md b/docs/en-US/component/message.md
index 0e96a6d962442..e6b3e24467017 100644
--- a/docs/en-US/component/message.md
+++ b/docs/en-US/component/message.md
@@ -27,6 +27,16 @@ message/different-types
:::
+## Plain ^(2.6.3)
+
+Set `plain` to have a plain background.
+
+:::demo
+
+message/plain
+
+:::
+
## Closable
A close button can be added.
@@ -85,7 +95,7 @@ import { ElMessage } from 'element-plus'
In this case you should call `ElMessage(options)`. We have also registered methods for different types, e.g. `ElMessage.success(options)`. You can call `ElMessage.closeAll()` to manually close all the instances.
-## App context inheritance >= 2.0.3
+## App context inheritance ^(2.0.3)
Now message accepts a `context` as second parameter of the message constructor which allows you to inject current app's context to message which allows you to inherit all the properties of the app.
@@ -111,9 +121,10 @@ ElMessage({}, appContext)
### Options
| Name | Description | Type | Default |
-| ------------------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------- |
+|--------------------------|------------------------------------------------------------------------------------------------------|------------------------------------------------------|---------|
| message | message text | ^[string] / ^[VNode] / ^[Function]`() => VNode` | '' |
| type | message type | ^[enum]`'success' \| 'warning' \| 'info' \| 'error'` | info |
+| plain ^(2.6.3) | whether message is plain | ^[boolean] | false |
| icon | custom icon component, overrides `type` | ^[string] / ^[Component] | — |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false |
| customClass | custom class name for Message | ^[string] | '' |
diff --git a/docs/examples/message/plain.vue b/docs/examples/message/plain.vue
new file mode 100644
index 0000000000000..e327fa87d7167
--- /dev/null
+++ b/docs/examples/message/plain.vue
@@ -0,0 +1,39 @@
+
+ Success
+ Warning
+ Message
+ Error
+
+
+
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index 3438e98699013..3497013f1036a 100644
--- a/packages/components/message/src/message.ts
+++ b/packages/components/message/src/message.ts
@@ -28,6 +28,7 @@ export const messageDefaults = mutable({
onClose: undefined,
showClose: false,
type: 'info',
+ plain: false,
offset: 16,
zIndex: 0,
grouping: false,
@@ -94,7 +95,7 @@ export const messageProps = buildProps({
*/
onClose: {
type: definePropType<() => void>(Function),
- required: false,
+ default: messageDefaults.onClose,
},
/**
* @description whether to show a close button
@@ -111,6 +112,13 @@ export const messageProps = buildProps({
values: messageTypes,
default: messageDefaults.type,
},
+ /**
+ * @description whether message is plain
+ */
+ plain: {
+ type: Boolean,
+ default: messageDefaults.plain,
+ },
/**
* @description set the distance to the top of viewport
*/
diff --git a/packages/components/message/src/message.vue b/packages/components/message/src/message.vue
index 6f2f089c83c5d..121e0ecef945d 100644
--- a/packages/components/message/src/message.vue
+++ b/packages/components/message/src/message.vue
@@ -13,6 +13,7 @@
{ [ns.m(type)]: type },
ns.is('center', center),
ns.is('closable', showClose),
+ ns.is('plain', plain),
customClass,
]"
:style="customStyle"
diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss
index a271153ddc278..cc40e9ada69a9 100644
--- a/packages/theme-chalk/src/message.scss
+++ b/packages/theme-chalk/src/message.scss
@@ -29,6 +29,12 @@
justify-content: center;
}
+ @include when(plain) {
+ background-color: getCssVar('bg-color', 'overlay');
+ border-color: getCssVar('bg-color', 'overlay');
+ box-shadow: getCssVar('box-shadow-light');
+ }
+
p {
margin: 0;
}
From 92bb239c24bbb20194ca4ecc2ea8713db02d31d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=B7=BB?= <657454579@qq.com>
Date: Tue, 26 Mar 2024 12:12:57 +0800
Subject: [PATCH 07/18] fix(components): [icon] remove repeat style (#16242)
LGTM
---
packages/components/icon/style/css.ts | 1 -
packages/components/icon/style/index.ts | 1 -
2 files changed, 2 deletions(-)
diff --git a/packages/components/icon/style/css.ts b/packages/components/icon/style/css.ts
index a1133b49f317f..9218439ba6751 100644
--- a/packages/components/icon/style/css.ts
+++ b/packages/components/icon/style/css.ts
@@ -1,2 +1 @@
import '@element-plus/components/base/style/css'
-import '@element-plus/theme-chalk/el-icon.css'
diff --git a/packages/components/icon/style/index.ts b/packages/components/icon/style/index.ts
index 86fde892dd268..1c63ba3e4e642 100644
--- a/packages/components/icon/style/index.ts
+++ b/packages/components/icon/style/index.ts
@@ -1,2 +1 @@
import '@element-plus/components/base/style'
-import '@element-plus/theme-chalk/src/icon.scss'
From fd823cd9c65ac6190c018517c2c556163f21aba2 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Tue, 26 Mar 2024 12:14:36 +0800
Subject: [PATCH 08/18] fix(components): [select] fix error in low versions of
vue (#16234)
fix(components): [select] fix error in low version of vue
---
packages/components/select/src/useSelect.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 23b0cc2fbcf79..dc09df258c15d 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -220,7 +220,7 @@ export const useSelect = (props: ISelectProps, emit) => {
if (props.filterable && props.remote && isFunction(props.remoteMethod))
return
optionsArray.value.forEach((option) => {
- option.updateOption(states.inputValue)
+ option.updateOption?.(states.inputValue)
})
}
From fa91eddb0d71578f226ff7c1cf71b73e13ef5d4f Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Wed, 27 Mar 2024 16:03:30 +0800
Subject: [PATCH 09/18] docs(components): [select] add width change description
(#16268)
* docs(components): [select] add width change description
* Update docs/en-US/component/select.md
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
---------
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
---
docs/en-US/component/select.md | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index 7297bbc6c5604..a4aaddac83575 100644
--- a/docs/en-US/component/select.md
+++ b/docs/en-US/component/select.md
@@ -9,6 +9,12 @@ When there are plenty of options, use a drop-down menu to display and select des
:::tip
+After version `2.5.0`, the default width of `el-select` changed to `100%`. When used in a inline form, the width will collapse. In order to display the width properly, you need to give `el-select` a specific width.
+
+:::
+
+:::tip
+
This component requires the `` wrap when used in SSR (eg: [Nuxt](https://nuxt.com/v3)) and SSG (eg: [VitePress](https://vitepress.vuejs.org/)).
:::
From 30b223bcdec1dda346e8fc50bfb0f7b89ab426d3 Mon Sep 17 00:00:00 2001
From: yinyueyu
Date: Thu, 28 Mar 2024 17:27:46 +0800
Subject: [PATCH 10/18] docs(components): [date-picker] update calculation of
shortcut key values (#16262)
* Update date-and-time-range.vue
Modified the calculation of the time control date range selection to a date function in JavaScript to correctly calculate the time span.
* Update docs/examples/datetime-picker/date-and-time-range.vue
---------
Co-authored-by: btea <2356281422@qq.com>
---
docs/examples/datetime-picker/date-and-time-range.vue | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/docs/examples/datetime-picker/date-and-time-range.vue b/docs/examples/datetime-picker/date-and-time-range.vue
index caf101950037c..7002e8c611c41 100644
--- a/docs/examples/datetime-picker/date-and-time-range.vue
+++ b/docs/examples/datetime-picker/date-and-time-range.vue
@@ -37,7 +37,7 @@ const shortcuts = [
value: () => {
const end = new Date()
const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+ start.setDate(start.getDate() - 7)
return [start, end]
},
},
@@ -46,7 +46,7 @@ const shortcuts = [
value: () => {
const end = new Date()
const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+ start.setMonth(start.getMonth() - 1)
return [start, end]
},
},
@@ -55,7 +55,7 @@ const shortcuts = [
value: () => {
const end = new Date()
const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+ start.setMonth(start.getMonth() - 3)
return [start, end]
},
},
From 361309ce67b411dc32ac995baad7d43b00ba5762 Mon Sep 17 00:00:00 2001
From: tangyongjie <65441198+tyj-321@users.noreply.github.com>
Date: Fri, 29 Mar 2024 08:09:21 +0800
Subject: [PATCH 11/18] docs(components): [dropdown] fix the actual showTimeout
property value (#16117)
docs(components): [dropdown]fix the actual showTimeout property value
Co-authored-by: tangyongjie
---
docs/en-US/component/dropdown.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/en-US/component/dropdown.md b/docs/en-US/component/dropdown.md
index 2474bddbfee73..7437f98206fc6 100644
--- a/docs/en-US/component/dropdown.md
+++ b/docs/en-US/component/dropdown.md
@@ -95,7 +95,7 @@ dropdown/sizes
| placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom |
| trigger | how to trigger | string | hover/click/contextmenu | hover |
| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true |
-| show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 250 |
+| show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 150 |
| hide-timeout | Delay time before hide a dropdown (only works when trigger is `hover`) | number | — | 150 |
| role | The ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation' | string | — | 'menu' |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |
From b1926d59aabf1735c15460f8506d15e8d186e44d Mon Sep 17 00:00:00 2001
From: Ganlvin <31533594+Ganlvin@users.noreply.github.com>
Date: Fri, 29 Mar 2024 08:10:10 +0800
Subject: [PATCH 12/18] fix(components): [date-picker] click the clear to reset
the date panel (#15835)
* fix(components): [date-picker] click the clear to reset the date panel
* test: add test case
---------
Co-authored-by: qiuwenlang
Co-authored-by: btea <2356281422@qq.com>
---
.../__tests__/date-time-picker.test.tsx | 31 +++++++++++++++++++
.../src/date-picker-com/panel-date-range.vue | 2 ++
2 files changed, 33 insertions(+)
diff --git a/packages/components/date-picker/__tests__/date-time-picker.test.tsx b/packages/components/date-picker/__tests__/date-time-picker.test.tsx
index dc02bffbdbdaf..a98aaeb27c6f8 100644
--- a/packages/components/date-picker/__tests__/date-time-picker.test.tsx
+++ b/packages/components/date-picker/__tests__/date-time-picker.test.tsx
@@ -566,6 +566,37 @@ describe('Datetimerange', () => {
expect(value.value).not.toBe('')
})
+ it('clear button should empty the input value', async () => {
+ const value = ref('')
+ const wrapper = _mount(() => (
+
+ ))
+ const input = wrapper.find('input')
+ input.trigger('focus')
+ await nextTick()
+ const dateRow = document.querySelectorAll('.el-date-table__row')
+ const dateCell = dateRow[1].querySelectorAll('.available')
+ dateCell[0].click()
+ dateCell[3].click()
+ await nextTick()
+ const headerValue = document.querySelectorAll(
+ '.el-date-range-picker__time-header input'
+ )
+ expect(headerValue[0].value).not.toBe('')
+ expect(headerValue[1].value).not.toBe('')
+ const clearBtn = document.querySelectorAll(
+ '.el-picker-panel__footer button'
+ )[0]
+ clearBtn.click()
+ await nextTick()
+ input.trigger('blur')
+ await nextTick()
+ input.trigger('focus')
+ await nextTick()
+ expect(headerValue[0].value).toBe('')
+ expect(headerValue[1].value).toBe('')
+ })
+
it('confirm honors disabledDate', async () => {
const value = ref('')
const disabledDate = (date: Date) => {
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 52edd467dfec7..d132188fa7218 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
@@ -679,6 +679,8 @@ const handleClear = () => {
unlinkPanels: props.unlinkPanels,
})[0]
rightDate.value = leftDate.value.add(1, 'month')
+ maxDate.value = undefined
+ minDate.value = undefined
emit('pick', null)
}
From 42fff1ef63d5bd8a4918ddf228014c91e3281afa Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Fri, 29 Mar 2024 14:08:57 +0800
Subject: [PATCH 13/18] docs(components): [overview] add keyboard control
selection component (#16305)
* docs(components): [overview] add keyboard control selection component
* fix: ts
* Update docs/.vitepress/vitepress/components/globals/overview.vue
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
* Update docs/.vitepress/vitepress/components/globals/overview.vue
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
* docs: update
* docs: update
* docs: update
---------
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
---
docs/.vitepress/vitepress/components/globals/overview.vue | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/docs/.vitepress/vitepress/components/globals/overview.vue b/docs/.vitepress/vitepress/components/globals/overview.vue
index 0a0c112930210..035b774caac71 100644
--- a/docs/.vitepress/vitepress/components/globals/overview.vue
+++ b/docs/.vitepress/vitepress/components/globals/overview.vue
@@ -25,8 +25,10 @@
{{ item.text }}
@@ -140,6 +142,12 @@ const getIcon = (link: string) => {
:deep(.el-card) {
cursor: pointer;
+ transition: none;
+
+ &:focus-visible {
+ outline: 2px solid var(--el-color-primary);
+ outline-offset: 1px;
+ }
.el-card__header {
display: flex;
From 1ec6fe583078aaa6f0d439198687ae48a266feb2 Mon Sep 17 00:00:00 2001
From: selicens <1244620067@qq.com>
Date: Fri, 29 Mar 2024 14:10:29 +0800
Subject: [PATCH 14/18] feat(components): [input-number] support slot custom
icons (#16275)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat(components): support slot custom icons
* chore:add version identifier
Co-authored-by: btea <2356281422@qq.com>
* chore: adjusting Layout
* docs: add version
* chore: rename slots
* test: update test cases
* docs: uodate description
* chore: rename
---------
Co-authored-by: btea <2356281422@qq.com>
---
docs/en-US/component/input-number.md | 15 +++++++
docs/examples/input-number/custom.vue | 41 +++++++++++++++++++
.../__tests__/input-number.test.tsx | 26 ++++++++++++
.../input-number/src/input-number.vue | 20 +++++----
4 files changed, 94 insertions(+), 8 deletions(-)
create mode 100644 docs/examples/input-number/custom.vue
diff --git a/docs/en-US/component/input-number.md b/docs/en-US/component/input-number.md
index 9b53cf8fa5feb..367c0fda09b9d 100644
--- a/docs/en-US/component/input-number.md
+++ b/docs/en-US/component/input-number.md
@@ -79,6 +79,14 @@ input-number/controlled
:::
+## Custom Icon ^(2.6.3)
+
+:::demo Use `decrease-icon` and `increase-icon` to set custom icons.
+
+input-number/custom
+
+:::
+
## API
### Attributes
@@ -103,6 +111,13 @@ input-number/controlled
| value-on-clear ^(2.2.0) | value should be set when input box is cleared | ^[number] / ^[null] / ^[enum]`'min' \| 'max'` | — |
| validate-event | whether to trigger form validation | ^[boolean] | true |
+### Slots
+
+| Name | Description |
+| ---------------------- | ------------------------------------- |
+| decrease-icon ^(2.6.3) | custom input box button decrease icon |
+| increase-icon ^(2.6.3) | custom input box button increase icon |
+
### Events
| Name | Description | Type |
diff --git a/docs/examples/input-number/custom.vue b/docs/examples/input-number/custom.vue
new file mode 100644
index 0000000000000..fb132cd42e0f5
--- /dev/null
+++ b/docs/examples/input-number/custom.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/components/input-number/__tests__/input-number.test.tsx b/packages/components/input-number/__tests__/input-number.test.tsx
index 11b0cde6fd139..b26d6ccce1fe0 100755
--- a/packages/components/input-number/__tests__/input-number.test.tsx
+++ b/packages/components/input-number/__tests__/input-number.test.tsx
@@ -3,6 +3,7 @@ import { mount } from '@vue/test-utils'
import { describe, expect, it, test, vi } from 'vitest'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { ElFormItem } from '@element-plus/components/form'
+import { ElIcon } from '@element-plus/components/icon'
import InputNumber from '../src/input-number.vue'
const mouseup = new Event('mouseup')
@@ -568,4 +569,29 @@ describe('InputNumber.vue', () => {
1, 2,
])
})
+
+ test('use slot custom icon', async () => {
+ const wrapper = mount(() => (
+ (
+
+
+
+ ),
+ increaseIcon: () => (
+
+
+
+ ),
+ }}
+ />
+ ))
+ const increase = wrapper.find('.el-input-number__increase i')
+ const decrease = wrapper.find('.el-input-number__decrease i')
+ expect(increase.exists()).toBe(true)
+ expect(decrease.exists()).toBe(true)
+ expect(increase.classes()).toContain('el-icon')
+ expect(decrease.classes()).toContain('el-icon')
+ })
})
diff --git a/packages/components/input-number/src/input-number.vue b/packages/components/input-number/src/input-number.vue
index eadc4c7e38fd1..dadb1dcfa7dd9 100755
--- a/packages/components/input-number/src/input-number.vue
+++ b/packages/components/input-number/src/input-number.vue
@@ -17,10 +17,12 @@
:class="[ns.e('decrease'), ns.is('disabled', minDisabled)]"
@keydown.enter="decrease"
>
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
Date: Fri, 29 Mar 2024 15:11:03 +0800
Subject: [PATCH 15/18] feat(components): [badge] add color prop (#16069)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: 🎸 [badge] add color prop
add color prop to set badge background color
* Update badge.md
* 更新文档
* docs: ✏️ [badge] add color prop
* Update docs/en-US/component/badge.md
---------
Co-authored-by: btea <2356281422@qq.com>
---
docs/en-US/component/badge.md | 17 +++++++++--------
docs/examples/badge/basic.vue | 6 ++++--
packages/components/badge/src/badge.ts | 4 ++++
packages/components/badge/src/badge.vue | 1 +
4 files changed, 18 insertions(+), 10 deletions(-)
diff --git a/docs/en-US/component/badge.md b/docs/en-US/component/badge.md
index 774edc5bfc534..5a8f3c4f28f43 100644
--- a/docs/en-US/component/badge.md
+++ b/docs/en-US/component/badge.md
@@ -51,14 +51,15 @@ badge/dot
### Attributes
-| Name | Description | Type | Default |
-| ------------------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
-| value | display value. | ^[string] / ^[number] | '' |
-| max | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number] | 99 |
-| is-dot | if a little dot is displayed. | ^[boolean] | false |
-| hidden | hidden badge. | ^[boolean] | false |
-| type | badge type. | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger |
-| show-zero ^(2.6.0) | Whether to show badge when value is zero. | ^[boolean] | true |
+| Name | Description | Type | Default |
+| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------- |
+| value | display value. | ^[string] / ^[number] | '' |
+| max | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number] | 99 |
+| is-dot | if a little dot is displayed. | ^[boolean] | false |
+| hidden | hidden badge. | ^[boolean] | false |
+| type | badge type. | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger |
+| show-zero ^(2.6.0) | Whether to show badge when value is zero. | ^[boolean] | true |
+| color ^(2.6.3) | background color of the dot | ^[string] | |
### Slots
diff --git a/docs/examples/badge/basic.vue b/docs/examples/badge/basic.vue
index 41c13d39da486..8b3132073fce7 100644
--- a/docs/examples/badge/basic.vue
+++ b/docs/examples/badge/basic.vue
@@ -11,7 +11,9 @@
replies
-
+
+ custom background
+
Click Me
@@ -39,7 +41,7 @@ import { CaretBottom } from '@element-plus/icons-vue'