-
+
{{ title }}
@@ -52,11 +55,11 @@ const dialogKls = computed(() => [
ns.is('draggable', props.draggable),
ns.is('align-center', props.alignCenter),
{ [ns.m('center')]: props.center },
- props.customClass,
])
const composedDialogRef = composeRefs(focusTrapRef, dialogRef)
const draggable = computed(() => props.draggable)
-useDraggable(dialogRef, headerRef, draggable)
+const overflow = computed(() => props.overflow)
+useDraggable(dialogRef, headerRef, draggable, overflow)
diff --git a/packages/components/dialog/src/dialog.vue b/packages/components/dialog/src/dialog.vue
index 4ff4a08eb9..4d1434bf51 100644
--- a/packages/components/dialog/src/dialog.vue
+++ b/packages/components/dialog/src/dialog.vue
@@ -41,11 +41,11 @@
v-if="rendered"
ref="dialogContentRef"
v-bind="$attrs"
- :custom-class="customClass"
:center="center"
:align-center="alignCenter"
:close-icon="closeIcon"
:draggable="draggable"
+ :overflow="overflow"
:fullscreen="fullscreen"
:show-close="showClose"
:title="title"
@@ -104,18 +104,6 @@ useDeprecated(
computed(() => !!slots.title)
)
-useDeprecated(
- {
- scope: 'el-dialog',
- from: 'custom-class',
- replacement: 'class',
- version: '2.3.0',
- ref: 'https://element-plus.org/en-US/component/dialog.html#attributes',
- type: 'Attribute',
- },
- computed(() => !!props.customClass)
-)
-
const ns = useNamespace('dialog')
const dialogRef = ref()
const headerRef = ref()
diff --git a/packages/components/drawer/__tests__/drawer.test.ts b/packages/components/drawer/__tests__/drawer.test.ts
index 6b52168fcc..e092f76930 100644
--- a/packages/components/drawer/__tests__/drawer.test.ts
+++ b/packages/components/drawer/__tests__/drawer.test.ts
@@ -229,23 +229,6 @@ describe('Drawer', () => {
expect(wrapper.find('.el-drawer__close-btn').exists()).toBe(false)
})
- test('should have custom classes when custom classes were given', async () => {
- const classes = 'some-custom-class'
- const wrapper = _mount(
- `
-
- ${content}
-
- `,
- () => ({
- title,
- visible: true,
- })
- )
-
- expect(wrapper.find(`.${classes}`).exists()).toBe(true)
- })
-
test('drawer header should have slot props', async () => {
const wrapper = _mount(
`
diff --git a/packages/components/drawer/src/drawer.vue b/packages/components/drawer/src/drawer.vue
index a513d28795..c3a92e3b11 100644
--- a/packages/components/drawer/src/drawer.vue
+++ b/packages/components/drawer/src/drawer.vue
@@ -27,7 +27,7 @@
:aria-labelledby="!title ? titleId : undefined"
:aria-describedby="bodyId"
v-bind="$attrs"
- :class="[ns.b(), direction, visible && 'open', customClass]"
+ :class="[ns.b(), direction, visible && 'open']"
:style="
isHorizontal ? 'width: ' + drawerSize : 'height: ' + drawerSize
"
@@ -112,17 +112,6 @@ useDeprecated(
},
computed(() => !!slots.title)
)
-useDeprecated(
- {
- scope: 'el-drawer',
- from: 'custom-class',
- replacement: 'class',
- version: '2.3.0',
- ref: 'https://element-plus.org/en-US/component/drawer.html#attributes',
- type: 'Attribute',
- },
- computed(() => !!props.customClass)
-)
const drawerRef = ref()
const focusStartRef = ref()
diff --git a/packages/hooks/use-draggable/index.ts b/packages/hooks/use-draggable/index.ts
index 3aafff8a1d..33a9a40aa9 100644
--- a/packages/hooks/use-draggable/index.ts
+++ b/packages/hooks/use-draggable/index.ts
@@ -5,7 +5,8 @@ import type { ComputedRef, Ref } from 'vue'
export const useDraggable = (
targetRef: Ref,
dragRef: Ref,
- draggable: ComputedRef
+ draggable: ComputedRef,
+ overflow?: ComputedRef
) => {
let transform = {
offsetX: 0,
@@ -32,14 +33,13 @@ export const useDraggable = (
const maxTop = clientHeight - targetTop - targetHeight + offsetY
const onMousemove = (e: MouseEvent) => {
- const moveX = Math.min(
- Math.max(offsetX + e.clientX - downX, minLeft),
- maxLeft
- )
- const moveY = Math.min(
- Math.max(offsetY + e.clientY - downY, minTop),
- maxTop
- )
+ let moveX = offsetX + e.clientX - downX
+ let moveY = offsetY + e.clientY - downY
+
+ if (!overflow?.value) {
+ moveX = Math.min(Math.max(moveX, minLeft), maxLeft)
+ moveY = Math.min(Math.max(moveY, minTop), maxTop)
+ }
transform = {
offsetX: moveX,
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index ae72d73c8e..260beb9cbd 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -786,7 +786,7 @@ $dialog: map.merge(
'title-font-size': getCssVar('font-size-large'),
'content-font-size': 14px,
'font-line-height': getCssVar('font-line-height-primary'),
- 'padding-primary': 20px,
+ 'padding-primary': 16px,
'border-radius': getCssVar('border-radius-small'),
),
$dialog
diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss
index f0f361706b..e2d1b535b9 100644
--- a/packages/theme-chalk/src/dialog.scss
+++ b/packages/theme-chalk/src/dialog.scss
@@ -15,6 +15,7 @@
border-radius: getCssVar('dialog', 'border-radius');
box-shadow: getCssVar('dialog', 'box-shadow');
box-sizing: border-box;
+ padding: getCssVar('dialog', 'padding-primary');
width: var(#{getCssVarName('dialog-width')}, 50%);
&:focus {
@@ -52,18 +53,23 @@
}
@include e(header) {
- padding: getCssVar('dialog', 'padding-primary');
- padding-bottom: 10px;
- margin-right: 16px;
+ padding-bottom: getCssVar('dialog', 'padding-primary');
+
+ &.show-close {
+ padding-right: calc(getCssVar('dialog', 'padding-primary') + var(
+ #{getCssVarName('message-close-size')},
+ map.get($message, 'close-size')
+ ));
+ }
}
@include e(headerbtn) {
position: absolute;
- top: 6px;
+ top: 0;
right: 0;
padding: 0;
- width: 54px;
- height: 54px;
+ width: 48px;
+ height: 48px;
background: transparent;
border: none;
outline: none;
@@ -93,15 +99,12 @@
}
@include e(body) {
- padding: calc(#{getCssVar('dialog-padding-primary')} + 10px)
- getCssVar('dialog-padding-primary');
color: getCssVar('text-color', 'regular');
font-size: getCssVar('dialog-content-font-size');
}
@include e(footer) {
- padding: getCssVar('dialog-padding-primary');
- padding-top: 10px;
+ padding-top: getCssVar('dialog', 'padding-primary');
text-align: right;
box-sizing: border-box;
}
@@ -112,7 +115,6 @@
@include e(body) {
text-align: initial;
- padding: 25px calc(#{getCssVar('dialog-padding-primary')} + 5px) 30px;
}
@include e(footer) {
From 2484ac1a2324a304cd6a71753123e1da523c3d24 Mon Sep 17 00:00:00 2001
From: xingyixiang <452282988@qq.com>
Date: Thu, 25 Jan 2024 16:18:02 +0800
Subject: [PATCH 03/22] fix(components): [table] The namespace of the
showOverflowTooltip is invalid. (#15627)
fix:The namespace of the showOverflowTooltip is invalid.
---
packages/components/table/src/util.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts
index cf07677098..5c4f9f14cd 100644
--- a/packages/components/table/src/util.ts
+++ b/packages/components/table/src/util.ts
@@ -362,7 +362,7 @@ export function createTablePopper(
removePopper?.()
},
})
- vm.appContext = table.appContext
+ vm.appContext = { ...table.appContext, ...table }
const container = document.createElement('div')
render(vm, container)
vm.component!.exposed!.onOpen()
From 32c4dee9e5df7212a936ca61889011a283c95f4f Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Thu, 25 Jan 2024 17:41:37 +0800
Subject: [PATCH 04/22] docs: Sort resource (#15675)
docs: sort resource
---
.../vitepress/components/globals/resource.vue | 52 +++++++++----------
1 file changed, 26 insertions(+), 26 deletions(-)
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,
},
])
From 1f6537af4cef4606c533c3e1167d9dd1998e2449 Mon Sep 17 00:00:00 2001
From: nigi <67454874+wen403@users.noreply.github.com>
Date: Fri, 26 Jan 2024 10:19:35 +0800
Subject: [PATCH 05/22] fix(components): [select] Remote search does not show
menu when it has options and no query (#15683)
* fix(components): [select] Remote search does not show menu
* fix(components): fix remote search menu issue without a query
---
packages/components/select-v2/src/useSelect.ts | 3 +--
packages/components/select/src/useSelect.ts | 3 +--
2 files changed, 2 insertions(+), 4 deletions(-)
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index 6e32001891..43ffd4525c 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -358,8 +358,7 @@ const useSelect = (props: ISelectV2Props, emit) => {
// methods
const toggleMenu = () => {
if (selectDisabled.value) return
- if (props.filterable && props.remote && isFunction(props.remoteMethod))
- return
+
if (states.menuVisibleOnFocus) {
// controlled by automaticDropdown
states.menuVisibleOnFocus = false
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 22a79de144..b8439c7e70 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -687,8 +687,7 @@ export const useSelect = (props: ISelectProps, emit) => {
const toggleMenu = () => {
if (selectDisabled.value) return
- if (props.filterable && props.remote && isFunction(props.remoteMethod))
- return
+
if (states.menuVisibleOnFocus) {
// controlled by automaticDropdown
states.menuVisibleOnFocus = false
From ee7a21f670b31f888a4460e73e656800446cf941 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Fri, 26 Jan 2024 10:20:08 +0800
Subject: [PATCH 06/22] feat(components): [message-box] MessageBox can drag
overflow the viewport (#15674)
feat(components): [message-box] can drag overflow the viewport
---
docs/en-US/component/message-box.md | 5 +-
docs/examples/message-box/alert.vue | 2 +-
.../examples/message-box/centered-content.vue | 2 +-
docs/examples/message-box/confirm.vue | 2 +-
docs/examples/message-box/customization.vue | 2 +-
docs/examples/message-box/customized-icon.vue | 2 +-
.../distinguishable-close-cancel.vue | 2 +-
docs/examples/message-box/draggable.vue | 31 +++++-
docs/examples/message-box/prompt.vue | 2 +-
docs/examples/message-box/use-html.vue | 2 +-
packages/components/message-box/src/index.vue | 10 +-
.../message-box/src/message-box.type.ts | 3 +
packages/theme-chalk/src/common/var.scss | 4 +-
packages/theme-chalk/src/dialog.scss | 1 +
packages/theme-chalk/src/message-box.scss | 94 ++++++-------------
15 files changed, 83 insertions(+), 81 deletions(-)
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/examples/message-box/alert.vue b/docs/examples/message-box/alert.vue
index 1d29dbbab4..e4c40c571c 100644
--- a/docs/examples/message-box/alert.vue
+++ b/docs/examples/message-box/alert.vue
@@ -1,5 +1,5 @@
- Click to open the Message Box
+ Click to open the Message Box
diff --git a/docs/examples/message-box/prompt.vue b/docs/examples/message-box/prompt.vue
index f013377f53..c3e43a4c4f 100644
--- a/docs/examples/message-box/prompt.vue
+++ b/docs/examples/message-box/prompt.vue
@@ -1,5 +1,5 @@
- Click to open Message Box
+ Click to open Message Box
diff --git a/packages/components/message-box/src/message-box.type.ts b/packages/components/message-box/src/message-box.type.ts
index 8b02cab0a3..54d2627354 100644
--- a/packages/components/message-box/src/message-box.type.ts
+++ b/packages/components/message-box/src/message-box.type.ts
@@ -102,6 +102,9 @@ export interface ElMessageBoxOptions {
/** Whether MessageBox can be drag */
draggable?: boolean
+ /** Draggable MessageBox can overflow the viewport */
+ overflow?: boolean
+
/** Content of the MessageBox */
message?: string | VNode | (() => VNode)
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 260beb9cbd..09f37c8c9c 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -516,11 +516,13 @@ $messagebox: map.merge(
'title-color': getCssVar('text-color-primary'),
'width': 420px,
'border-radius': 4px,
+ 'box-shadow': getCssVar('box-shadow'),
'font-size': getCssVar('font-size-large'),
'content-font-size': getCssVar('font-size-base'),
'content-color': getCssVar('text-color-regular'),
'error-font-size': 12px,
- 'padding-primary': 15px,
+ 'padding-primary': 12px,
+ 'font-line-height': getCssVar('font-line-height-primary'),
),
$messagebox
);
diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss
index e2d1b535b9..6c04f94d90 100644
--- a/packages/theme-chalk/src/dialog.scss
+++ b/packages/theme-chalk/src/dialog.scss
@@ -17,6 +17,7 @@
box-sizing: border-box;
padding: getCssVar('dialog', 'padding-primary');
width: var(#{getCssVarName('dialog-width')}, 50%);
+ overflow-wrap: break-word;
&:focus {
outline: none !important;
diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss
index e5a938aa58..7b7cc550ca 100644
--- a/packages/theme-chalk/src/message-box.scss
+++ b/packages/theme-chalk/src/message-box.scss
@@ -11,20 +11,21 @@
@include b(message-box) {
display: inline-block;
+ position: relative;
max-width: getCssVar('messagebox-width');
width: 100%;
- padding-bottom: 10px;
+ padding: getCssVar('messagebox-padding-primary');
vertical-align: middle;
background-color: getCssVar('bg-color');
border-radius: getCssVar('messagebox-border-radius');
- border: 1px solid getCssVar('border-color-lighter');
font-size: getCssVar('messagebox-font-size');
- box-shadow: getCssVar('box-shadow-light');
+ box-shadow: getCssVar('messagebox-box-shadow');
text-align: left;
overflow: hidden;
backface-visibility: hidden;
// To avoid small screen overflowing, see #11919
box-sizing: border-box;
+ overflow-wrap: break-word;
&:focus {
outline: none !important;
@@ -59,24 +60,29 @@
}
@include e(header) {
- position: relative;
- padding: getCssVar('messagebox-padding-primary');
- padding-bottom: 10px;
+ padding-bottom: getCssVar('messagebox-padding-primary');
+
+ &.show-close {
+ padding-right: calc(getCssVar('messagebox-padding-primary') + var(
+ #{getCssVarName('message-close-size')},
+ map.get($message, 'close-size')
+ ));
+ }
}
@include e(title) {
- padding-left: 0;
- margin-bottom: 0;
font-size: getCssVar('messagebox-font-size');
- line-height: 1;
+ line-height: getCssVar('messagebox-font-line-height');
color: getCssVar('messagebox-title-color');
}
@include e(headerbtn) {
position: absolute;
- top: getCssVar('messagebox-padding-primary');
- right: getCssVar('messagebox-padding-primary');
+ top: 0;
+ right: 0;
padding: 0;
+ width: 40px;
+ height: 40px;
border: none;
outline: none;
background: transparent;
@@ -100,17 +106,18 @@
}
@include e(content) {
- padding: 10px getCssVar('messagebox-padding-primary');
color: getCssVar('messagebox-content-color');
font-size: getCssVar('messagebox-content-font-size');
}
@include e(container) {
- position: relative;
+ display: flex;
+ align-items: center;
+ gap: 12px;
}
@include e(input) {
- padding-top: 15px;
+ padding-top: 12px;
& div.invalid > input {
border-color: getCssVar('color-error');
@@ -122,26 +129,7 @@
}
@include e(status) {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- font-size: 24px !important;
-
- &::before {
- // 防止图标切割
- padding-left: 1px;
- }
-
- &.#{$namespace}-icon {
- // 防止 el-icon 的position样式覆盖
- position: absolute;
- }
-
- + .#{$namespace}-message-box__message {
- padding-left: 36px;
- padding-right: 12px;
- overflow-wrap: break-word;
- }
+ font-size: 24px;
@each $type in (success, info, warning, error) {
&.#{$namespace}-message-box-icon--#{$type} {
@@ -156,67 +144,43 @@
& p {
margin: 0;
- line-height: 24px;
+ line-height: getCssVar('messagebox-font-line-height');
}
}
@include e(errormsg) {
color: getCssVar('color-error');
font-size: getCssVar('messagebox-error-font-size');
- min-height: 18px;
- margin-top: 2px;
+ line-height: getCssVar('messagebox-font-line-height');
}
@include e(btns) {
- padding: 5px 15px 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
-
- & button:nth-child(2) {
- margin-left: 10px;
- }
- }
-
- @include e(btns-reverse) {
- flex-direction: row-reverse;
+ padding-top: getCssVar('messagebox-padding-primary');
}
// centerAlign 布局
@include m(center) {
@include e(title) {
- position: relative;
display: flex;
align-items: center;
justify-content: center;
+ gap: 6px;
}
@include e(status) {
- position: relative;
- top: auto;
- padding-right: 5px;
- text-align: center;
- transform: translateY(-1px);
- }
-
- @include e(message) {
- margin-left: 0;
+ font-size: inherit;
}
@include e(btns) {
justify-content: center;
}
- @include e(content) {
- $padding-horizontal: calc(
- #{getCssVar('messagebox', 'padding-primary')} + 12px
- );
-
- padding-left: $padding-horizontal;
- padding-right: $padding-horizontal;
-
- text-align: center;
+ @include e(container) {
+ justify-content: center;
}
}
}
From cf9c936a0150375f3c1396c2baeeac2b5314068a Mon Sep 17 00:00:00 2001
From: heygsc <1596920983@qq.com>
Date: Sat, 27 Jan 2024 14:36:44 +0800
Subject: [PATCH 07/22] fix(docs): overlay error caused by sidebar (#15694)
fix(docs): overlay error caused by sidebar
---
docs/.vitepress/vitepress/styles/sidebar.scss | 1 +
1 file changed, 1 insertion(+)
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') {
From a6a22dfc6aac3635e1524946a14afa474233b60d Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Mon, 29 Jan 2024 16:46:34 +0800
Subject: [PATCH 08/22] docs(components): [dropdown] make the arrow icon center
(#15704)
---
docs/examples/dropdown/how-to-trigger.vue | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/docs/examples/dropdown/how-to-trigger.vue b/docs/examples/dropdown/how-to-trigger.vue
index e65039c534..f0bf322b52 100644
--- a/docs/examples/dropdown/how-to-trigger.vue
+++ b/docs/examples/dropdown/how-to-trigger.vue
@@ -78,4 +78,9 @@ import {
font-size: 14px;
margin-bottom: 20px;
}
+
+.block-col-2 .el-dropdown-link {
+ display: flex;
+ align-items: center;
+}
From 4b56cf68f67f4c3dc79874331491d8f09c7ca812 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Tue, 30 Jan 2024 09:40:49 +0800
Subject: [PATCH 09/22] fix(components): [select] Fix value with value-key not
selected (#15681)
* fix(components): [select] Fix value with value-key not selected
* test(components): add test
* test(components): update
---
.../select/__tests__/select.test.ts | 28 +++++++++++++++++++
packages/components/select/src/useOption.ts | 6 ++--
2 files changed, 31 insertions(+), 3 deletions(-)
diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts
index 66448564e2..59ef6ef386 100644
--- a/packages/components/select/__tests__/select.test.ts
+++ b/packages/components/select/__tests__/select.test.ts
@@ -515,6 +515,34 @@ describe('Select', () => {
expect(wrapper.find(`.${PLACEHOLDER_CLASS_NAME}`).text()).toBe('Option D')
})
+ test('set default value to object with value-key', async () => {
+ wrapper = _mount(
+ `
+
+
+ `,
+ () => ({
+ options: [
+ { id: 1, label: 'Option A', desc: 'Option A - 230506' },
+ { id: 2, label: 'Option B', desc: 'Option B - 230506' },
+ { id: 3, label: 'Option C', desc: 'Option C - 230506' },
+ { id: 4, label: 'Option A', desc: 'Option A - 230507' },
+ ],
+ value: { id: 3 },
+ })
+ )
+ await nextTick()
+ const options = getOptions()
+ expect(wrapper.find(`.${PLACEHOLDER_CLASS_NAME}`).text()).toBe('Option C')
+ expect(Array.from(options[2].classList)).toContain('is-selected')
+ })
+
test('sync set value and options', async () => {
wrapper = _mount(
`
diff --git a/packages/components/select/src/useOption.ts b/packages/components/select/src/useOption.ts
index 1ecde81b70..1bdd23df7f 100644
--- a/packages/components/select/src/useOption.ts
+++ b/packages/components/select/src/useOption.ts
@@ -11,10 +11,10 @@ export function useOption(props, states) {
// computed
const itemSelected = computed(() => {
- if (!select.props.multiple) {
- return isEqual(props.value, select.props.modelValue)
- } else {
+ if (select.props.multiple) {
return contains(select.props.modelValue as unknown[], props.value)
+ } else {
+ return contains([select.props.modelValue] as unknown[], props.value)
}
})
From e85348178af6b28419029179e18f688cac29c212 Mon Sep 17 00:00:00 2001
From: inottn
Date: Tue, 30 Jan 2024 15:00:23 +0800
Subject: [PATCH 10/22] chore(ci): add workflow dispatch to CI actions (#15381)
---
.github/workflows/test-coverage.yml | 1 +
.github/workflows/test-ssr.yml | 4 +++-
.github/workflows/test-unit.yml | 4 +++-
3 files changed, 7 insertions(+), 2 deletions(-)
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 }}
From 7e6f324f35c94a13716952e48ae196a26b928885 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Tue, 30 Jan 2024 23:02:48 +0800
Subject: [PATCH 11/22] docs: [time-picker] add value-format attribute (#15672)
---
docs/en-US/component/time-picker.md | 55 +++++++++++++++--------------
1 file changed, 28 insertions(+), 27 deletions(-)
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
From 2863f2fde37c119fa20f047784e6836edb13c943 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Wed, 31 Jan 2024 10:35:36 +0800
Subject: [PATCH 12/22] style(components): [tour] Improve style and docs
(#15706)
* style(components): [tour] Improve style and docs
* style(theme-chalk): update
---
docs/examples/tour/basic.vue | 5 ++--
docs/examples/tour/indicator.vue | 4 ++--
docs/examples/tour/mask.vue | 4 ++--
docs/examples/tour/non-modal.vue | 4 ++--
docs/examples/tour/target.vue | 4 ++--
packages/components/tour/src/step.vue | 2 +-
packages/theme-chalk/src/common/var.scss | 4 ++--
packages/theme-chalk/src/tour.scss | 29 +++++++++++++-----------
8 files changed, 30 insertions(+), 26 deletions(-)
diff --git a/docs/examples/tour/basic.vue b/docs/examples/tour/basic.vue
index 8d2e79382d..b001a4c5a7 100644
--- a/docs/examples/tour/basic.vue
+++ b/docs/examples/tour/basic.vue
@@ -4,14 +4,15 @@
- upload
- save
+ Upload
+ Save
diff --git a/docs/examples/tour/indicator.vue b/docs/examples/tour/indicator.vue
index c9810b5e78..5b6fc64e18 100644
--- a/docs/examples/tour/indicator.vue
+++ b/docs/examples/tour/indicator.vue
@@ -4,8 +4,8 @@
- upload
- save
+ Upload
+ Save
diff --git a/docs/examples/tour/mask.vue b/docs/examples/tour/mask.vue
index c9aded87e2..6fd648b7df 100644
--- a/docs/examples/tour/mask.vue
+++ b/docs/examples/tour/mask.vue
@@ -4,8 +4,8 @@
- upload
- save
+ Upload
+ Save
diff --git a/docs/examples/tour/non-modal.vue b/docs/examples/tour/non-modal.vue
index 402d2fe031..33c466191d 100644
--- a/docs/examples/tour/non-modal.vue
+++ b/docs/examples/tour/non-modal.vue
@@ -4,8 +4,8 @@
- upload
- save
+ Upload
+ Save
diff --git a/docs/examples/tour/target.vue b/docs/examples/tour/target.vue
index 402c7b3013..9c83074729 100644
--- a/docs/examples/tour/target.vue
+++ b/docs/examples/tour/target.vue
@@ -4,8 +4,8 @@
- upload
- save
+ Upload
+ Save
diff --git a/packages/components/tour/src/step.vue b/packages/components/tour/src/step.vue
index e7fd7fba66..ab1f0b42b7 100644
--- a/packages/components/tour/src/step.vue
+++ b/packages/components/tour/src/step.vue
@@ -10,7 +10,7 @@
+
{{ title }}
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 09f37c8c9c..a410b2a25f 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -800,16 +800,16 @@ $tour: () !default;
$tour: map.merge(
(
'width': 520px,
- 'padding-primary': 16px,
+ 'padding-primary': 12px,
'font-line-height': getCssVar('font-line-height-primary'),
'title-font-size': 16px,
'title-text-color': getCssVar('text-color-primary'),
'title-font-weight': 400,
+ 'close-color': getCssVar('color-info'),
'font-size': 14px,
'color': getCssVar('text-color-primary'),
'bg-color': getCssVar('bg-color'),
'border-radius': 4px,
- 'border-color': getCssVar('border-color-lighter'),
),
$tour
);
diff --git a/packages/theme-chalk/src/tour.scss b/packages/theme-chalk/src/tour.scss
index f18632a338..8ec13ecea2 100644
--- a/packages/theme-chalk/src/tour.scss
+++ b/packages/theme-chalk/src/tour.scss
@@ -12,13 +12,13 @@
}
@include e(content) {
- padding: 0;
border-radius: getCssVar('tour-border-radius');
- border: 1px solid getCssVar('tour-border-color');
width: var(#{getCssVarName('tour-width')});
+ padding: getCssVar('tour-padding-primary');
background: getCssVar('tour-bg-color');
box-shadow: getCssVar('box-shadow-light');
box-sizing: border-box;
+ overflow-wrap: break-word;
$content-selector: &;
@@ -32,7 +32,6 @@
@include e(arrow) {
position: absolute;
background: getCssVar('tour-bg-color');
- border: 1px solid getCssVar('tour-border-color');
width: 10px;
height: 10px;
pointer-events: none;
@@ -63,11 +62,11 @@
@include e(closebtn) {
position: absolute;
- top: 6px;
+ top: 0;
right: 0;
padding: 0;
- width: 44px;
- height: 44px;
+ width: 40px;
+ height: 40px;
background: transparent;
border: none;
outline: none;
@@ -78,7 +77,7 @@
);
.#{$namespace}-tour__close {
- color: getCssVar('tour-title-text-color');
+ color: getCssVar('tour-close-color');
font-size: inherit;
}
@@ -91,9 +90,14 @@
}
@include e(header) {
- padding: getCssVar('tour', 'padding-primary');
- padding-bottom: 10px;
- margin-right: 16px;
+ padding-bottom: getCssVar('tour-padding-primary');
+
+ &.show-close {
+ padding-right: calc(getCssVar('tour-padding-primary') + var(
+ #{getCssVarName('message-close-size')},
+ map.get($message, 'close-size')
+ ));
+ }
}
@include e(title) {
@@ -104,7 +108,6 @@
}
@include e(body) {
- padding: 0 getCssVar('tour-padding-primary');
color: getCssVar('tour-text-color');
font-size: getCssVar('tour-font-size');
img,
@@ -114,8 +117,7 @@
}
@include e(footer) {
- padding: getCssVar('tour-padding-primary');
- padding-top: 10px;
+ padding-top: getCssVar('tour-padding-primary');
box-sizing: border-box;
display: flex;
justify-content: space-between;
@@ -144,6 +146,7 @@
@include set-css-var-value('tour-title-text-color', #fff);
@include set-css-var-value('tour-text-color', #fff);
@include set-css-var-value('tour-bg-color', getCssVar('color', 'primary'));
+ @include set-css-var-value('tour-close-color', #fff);
.#{$namespace}-tour__closebtn {
&:focus,
From 620bf03e639a285be9b9262727be7fee5bd81e63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=B7=BB?= <657454579@qq.com>
Date: Wed, 31 Jan 2024 10:37:20 +0800
Subject: [PATCH 13/22] fix(components): [tour] buttonProps & isSameProps
errors (#15680)
* fix(components): [tour] buttonProps & isSameProps errors
* test(components): [tour] add button props test
* fix(components): [tour] Maximum recursive updates exceeded error in jsx
* fix: delete debug code & use omit
---
.../components/tour/__tests__/tour.test.tsx | 27 ++++++++++
packages/components/tour/src/helper.ts | 54 ++-----------------
packages/components/tour/src/step.ts | 6 ++-
packages/components/tour/src/step.vue | 30 ++++++++---
packages/components/tour/src/steps.ts | 16 +++---
packages/components/tour/src/tour.vue | 32 +++++------
packages/components/tour/src/types.ts | 23 +++-----
7 files changed, 87 insertions(+), 101 deletions(-)
diff --git a/packages/components/tour/__tests__/tour.test.tsx b/packages/components/tour/__tests__/tour.test.tsx
index 638186a97e..273d38ecf5 100644
--- a/packages/components/tour/__tests__/tour.test.tsx
+++ b/packages/components/tour/__tests__/tour.test.tsx
@@ -163,4 +163,31 @@ describe('Tour.vue', () => {
expect(style.transform).toBe('translate3d(-50%, -50%, 0)')
expect(style.maxWidth).toBe('100vw')
})
+
+ test('button props', () => {
+ mount({
+ setup() {
+ return () => (
+
+
+ )
+ },
+ })
+
+ expect(document.querySelector('.prev-btn span')?.innerHTML).toBe('上一步')
+ expect(document.querySelector('.next-btn span')?.innerHTML).toBe('下一步')
+ })
})
diff --git a/packages/components/tour/src/helper.ts b/packages/components/tour/src/helper.ts
index 583386b134..53d5f1aefb 100644
--- a/packages/components/tour/src/helper.ts
+++ b/packages/components/tour/src/helper.ts
@@ -1,7 +1,5 @@
import {
- camelize,
computed,
- isVNode,
onBeforeUnmount,
onMounted,
ref,
@@ -19,7 +17,6 @@ import {
shift,
} from '@floating-ui/dom'
import {
- hasOwn,
isArray,
isClient,
isFunction,
@@ -30,11 +27,9 @@ import {
import type {
CSSProperties,
Component,
- ComputedRef,
InjectionKey,
Ref,
SetupContext,
- VNode,
} from 'vue'
import type { UseNamespaceReturn } from '@element-plus/hooks'
import type { PosInfo, TourGap, TourMask } from './types'
@@ -45,6 +40,7 @@ import type {
Strategy,
VirtualElement,
} from '@floating-ui/dom'
+import type { TourStepProps } from './step'
export const useTarget = (
target: Ref<
@@ -150,8 +146,9 @@ export const useTarget = (
}
export interface TourContext {
+ currentStep: Ref
current: Ref
- total: ComputedRef
+ total: Ref
showClose: Ref
closeIcon: Ref
mergedType: Ref<'default' | 'primary' | undefined>
@@ -173,51 +170,6 @@ function isInViewPort(element: HTMLElement) {
return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight
}
-const isSameProps = (a: Record, b: Record) => {
- if (Object.keys(a).length !== Object.keys(b).length) return false
- for (const key in a) {
- if (a[key] !== b[key]) {
- return false
- }
- }
- return true
-}
-
-export function isSameSteps(a: any[], b: any[]) {
- if (a.length !== b.length) return false
- for (const [index] of a.entries()) {
- if (isSameProps(a[index], b[index])) {
- return false
- }
- }
- return true
-}
-
-export const getNormalizedProps = (node: VNode, booleanKeys: string[]) => {
- if (!isVNode(node)) {
- return {}
- }
-
- const raw = node.props || {}
- const type = (node.type as any)?.props || {}
- const props: Record = {}
- Object.keys(type).forEach((key) => {
- if (hasOwn(type[key], 'default')) {
- props[key] = type[key].default
- }
- })
-
- Object.keys(raw).forEach((key) => {
- const cameKey = camelize(key)
- props[cameKey] = raw[key]
- if (booleanKeys.includes(cameKey) && props[cameKey] === '') {
- props[cameKey] = true
- }
- })
-
- return props
-}
-
export const useFloating = (
referenceRef: Ref,
contentRef: Ref,
diff --git a/packages/components/tour/src/step.ts b/packages/components/tour/src/step.ts
index 9a48108cff..dfb062000f 100644
--- a/packages/components/tour/src/step.ts
+++ b/packages/components/tour/src/step.ts
@@ -25,7 +25,7 @@ export const tourStepProps = buildProps({
*/
showClose: {
type: Boolean,
- default: true,
+ default: undefined,
},
/**
* @description custom close icon, default is Close
@@ -38,7 +38,7 @@ export const tourStepProps = buildProps({
*/
showArrow: {
type: Boolean,
- default: true,
+ default: undefined,
},
/**
* @description position of the guide card relative to the target element
@@ -49,6 +49,7 @@ export const tourStepProps = buildProps({
*/
mask: {
type: definePropType([Boolean, Object]),
+ default: undefined,
},
/**
* @description custom style for content
@@ -73,6 +74,7 @@ export const tourStepProps = buildProps({
*/
scrollIntoViewOptions: {
type: definePropType([Boolean, Object]),
+ default: undefined,
},
/**
* @description type, affects the background color and text color
diff --git a/packages/components/tour/src/step.vue b/packages/components/tour/src/step.vue
index ab1f0b42b7..d6d0ceb5b1 100644
--- a/packages/components/tour/src/step.vue
+++ b/packages/components/tour/src/step.vue
@@ -43,7 +43,7 @@
v-if="current > 0"
size="small"
:type="mergedType"
- v-bind="prevButtonProps"
+ v-bind="filterButtonProps(prevButtonProps)"
@click="onPrev"
>
{{ prevButtonProps?.children ?? t('el.tour.previous') }}
@@ -52,13 +52,12 @@
v-if="current <= total - 1"
size="small"
:type="mergedType === 'primary' ? 'default' : 'primary'"
- v-bind="nextButtonProps"
+ v-bind="filterButtonProps(nextButtonProps)"
@click="onNext"
>
{{
- nextButtonProps?.children ?? current === total - 1
- ? t('el.tour.finish')
- : t('el.tour.next')
+ nextButtonProps?.children ??
+ (current === total - 1 ? t('el.tour.finish') : t('el.tour.next'))
}}
@@ -66,7 +65,8 @@
diff --git a/docs/examples/tag/checkable.vue b/docs/examples/tag/checkable.vue
index 5729ec86ab..d75780cafd 100644
--- a/docs/examples/tag/checkable.vue
+++ b/docs/examples/tag/checkable.vue
@@ -1,16 +1,58 @@
-
diff --git a/docs/examples/tour/indicator.vue b/docs/examples/tour/indicator.vue
index c9810b5e78..5b6fc64e18 100644
--- a/docs/examples/tour/indicator.vue
+++ b/docs/examples/tour/indicator.vue
@@ -4,8 +4,8 @@
- Checked
+
- {{ tag }}
-
-
- + New Tag
-
+
- Large
- Default
- Small
-
-
-
- Large
- Default
- Small
-
+
+ Checked
Toggle me
+
+
+ Tag 1
+
+
+ Tag 2
+
+
+ Tag 3
+
+
+ Tag 4
+
+
+ Tag 5
+
+
diff --git a/docs/examples/tag/editable.vue b/docs/examples/tag/editable.vue
index edfb049145..4148114461 100644
--- a/docs/examples/tag/editable.vue
+++ b/docs/examples/tag/editable.vue
@@ -1,26 +1,27 @@
-
+
+ {{ tag }}
+
+
+ + New Tag
+
+
diff --git a/docs/examples/tag/sizes.vue b/docs/examples/tag/sizes.vue
index 3809432c2a..9de4d89fae 100644
--- a/docs/examples/tag/sizes.vue
+++ b/docs/examples/tag/sizes.vue
@@ -1,13 +1,7 @@
-
+ Large
+ Default
+ Small
+
diff --git a/docs/examples/tag/theme.vue b/docs/examples/tag/theme.vue
index 4cadb36759..de046dd271 100644
--- a/docs/examples/tag/theme.vue
+++ b/docs/examples/tag/theme.vue
@@ -1,69 +1,36 @@
-
- Dark
+
+ Dark
{{ item.label }}
-
- {{ item.label }}
-
-
- Light
+
+ Light
{{ item.label }}
-
- {{ item.label }}
-
-
- Plain
+ >([
- { type: '', label: 'Tag 1' },
+ { type: 'primary', label: 'Tag 1' },
{ type: 'success', label: 'Tag 2' },
{ type: 'info', label: 'Tag 3' },
- { type: 'danger', label: 'Tag 4' },
- { type: 'warning', label: 'Tag 5' },
+ { type: 'warning', label: 'Tag 4' },
+ { type: 'danger', label: 'Tag 5' },
])
diff --git a/packages/components/check-tag/src/check-tag.ts b/packages/components/check-tag/src/check-tag.ts
index b8bc99e4fc..405f863a96 100644
--- a/packages/components/check-tag/src/check-tag.ts
+++ b/packages/components/check-tag/src/check-tag.ts
@@ -12,6 +12,14 @@ export const checkTagProps = buildProps({
type: Boolean,
default: false,
},
+ /**
+ * @description type of Tag
+ */
+ type: {
+ type: String,
+ values: ['primary', 'success', 'info', 'warning', 'danger'],
+ default: 'primary',
+ },
} as const)
export type CheckTagProps = ExtractPropTypes
diff --git a/packages/components/check-tag/src/check-tag.vue b/packages/components/check-tag/src/check-tag.vue
index 9ff65faa42..596fbddcee 100644
--- a/packages/components/check-tag/src/check-tag.vue
+++ b/packages/components/check-tag/src/check-tag.vue
@@ -17,7 +17,11 @@ const props = defineProps(checkTagProps)
const emit = defineEmits(checkTagEmits)
const ns = useNamespace('check-tag')
-const containerKls = computed(() => [ns.b(), ns.is('checked', props.checked)])
+const containerKls = computed(() => [
+ ns.b(),
+ ns.is('checked', props.checked),
+ ns.m(props.type || 'primary'),
+])
const handleChange = () => {
const checked = !props.checked
diff --git a/packages/components/tag/src/tag.ts b/packages/components/tag/src/tag.ts
index 853308e244..5d502ab419 100644
--- a/packages/components/tag/src/tag.ts
+++ b/packages/components/tag/src/tag.ts
@@ -10,8 +10,8 @@ export const tagProps = buildProps({
*/
type: {
type: String,
- values: ['success', 'info', 'warning', 'danger', ''],
- default: '',
+ values: ['primary', 'success', 'info', 'warning', 'danger'],
+ default: 'primary',
},
/**
* @description whether Tag can be removed
@@ -28,17 +28,13 @@ export const tagProps = buildProps({
/**
* @description background color of the Tag
*/
- color: {
- type: String,
- default: '',
- },
+ color: String,
/**
* @description size of Tag
*/
size: {
type: String,
values: componentSizes,
- default: '',
},
/**
* @description theme of Tag
diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
index f33c47a918..81d80d0cee 100644
--- a/packages/components/tag/src/tag.vue
+++ b/packages/components/tag/src/tag.vue
@@ -50,7 +50,7 @@ const containerKls = computed(() => {
return [
ns.b(),
ns.is('closable', closable),
- ns.m(type),
+ ns.m(type || 'primary'),
ns.m(tagSize.value),
ns.m(effect),
ns.is('hit', hit),
diff --git a/packages/theme-chalk/src/check-tag.scss b/packages/theme-chalk/src/check-tag.scss
index 88c7e1a2c8..017febb554 100644
--- a/packages/theme-chalk/src/check-tag.scss
+++ b/packages/theme-chalk/src/check-tag.scss
@@ -18,10 +18,15 @@
}
@include when(checked) {
- background-color: getCssVar('color', 'primary', 'light-8');
- color: getCssVar('color', 'primary');
- &:hover {
- background-color: getCssVar('color', 'primary', 'light-7');
+ @each $type in $types {
+ &.#{bem('check-tag', '', $type)} {
+ background-color: getCssVar('color', $type, 'light-8');
+ color: getCssVar('color', $type);
+
+ &:hover {
+ background-color: getCssVar('color', $type, 'light-7');
+ }
+ }
}
}
}
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index d92f71f754..d1ddda33dd 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -63,7 +63,6 @@ $tag-icon-span-gap: map.merge(
@include b(tag) {
@include genTheme('light-9', 'light-8', '');
- @include css-var-from-global(('tag', 'text-color'), ('color', 'primary'));
@each $type in $types {
&.#{bem('tag', '', $type)} {
@include css-var-from-global(('tag', 'text-color'), ('color', $type));
From 880417bbecfb20f74f5dc215989ccbd5b48028a2 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Fri, 2 Feb 2024 15:06:43 +0800
Subject: [PATCH 20/22] test(components): [tree] setCheckedNodes with disabled
node (#15753)
---
.../components/tree/__tests__/tree.test.ts | 94 +++++++++++++++++++
1 file changed, 94 insertions(+)
diff --git a/packages/components/tree/__tests__/tree.test.ts b/packages/components/tree/__tests__/tree.test.ts
index 2019b9f3b3..0c74ab6c47 100644
--- a/packages/components/tree/__tests__/tree.test.ts
+++ b/packages/components/tree/__tests__/tree.test.ts
@@ -536,6 +536,100 @@ describe('Tree.vue', () => {
expect(treeVm.getCheckedNodes().length).toEqual(0)
})
+ test('setCheckedNodes with disabled node', async () => {
+ const nodes = [
+ {
+ id: 1,
+ label: 'Level one 1',
+ children: [
+ {
+ id: 4,
+ label: 'Level two 1-1',
+ children: [
+ {
+ id: 9,
+ label: 'Level three 1-1-1',
+ },
+ {
+ id: 10,
+ label: 'Level three 1-1-2',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 2,
+ label: 'Level one 2',
+ children: [
+ {
+ id: 5,
+ disabled: true,
+ label: 'Level two 2-1',
+ },
+ {
+ id: 6,
+ label: 'Level two 2-2',
+ },
+ ],
+ },
+ {
+ id: 3,
+ label: 'Level one 3',
+ children: [
+ {
+ id: 7,
+ label: 'Level two 3-1',
+ },
+ {
+ id: 8,
+ label: 'Level two 3-2',
+ },
+ ],
+ },
+ ]
+ const wrapper = mount(
+ Object.assign({
+ components: {
+ 'el-tree': Tree,
+ },
+ template: `
+
+ expect(treeVm.getCheckedNodes().length).toEqual(0)
+
+ function flattenTree(data) {
+ const result = []
+
+ function flatten(node) {
+ result.push(node)
+ if (node?.children?.length) {
+ node.children.forEach(flatten)
+ }
+ }
+
+ data.forEach(flatten)
+ return result
+ }
+ const list = flattenTree(nodes).filter((item) => !item.disabled)
+
+ treeVm.setCheckedNodes(list)
+ expect(treeVm.getCheckedNodes().length).toEqual(8)
+ })
+
test('setCheckedKeys', async () => {
const { wrapper } = getTreeVm(
`:props="defaultProps" show-checkbox node-key="id"`
From 7fd6e4f4530668665cf4cad21bd1dadd02e25e26 Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Fri, 2 Feb 2024 15:24:13 +0800
Subject: [PATCH 21/22] fix(components): [tabs] slot name use kebab-case style
(#15733)
* fix(components): [tabs] slot name use kebab-case style
* fix(components): [tabs] slot name use kebab-case style
* fix(components): [tabs] slot name use kebab-case style
* docs(components): [tabs] use deprecated tag
---
docs/en-US/component/tabs.md | 9 +++++----
.../tabs/customized-add-button-icon.vue | 2 +-
packages/components/tabs/src/tabs.tsx | 17 +++++++++++++++--
3 files changed, 21 insertions(+), 7 deletions(-)
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/examples/tabs/customized-add-button-icon.vue b/docs/examples/tabs/customized-add-button-icon.vue
index 01a4b69abc..6befa9226b 100644
--- a/docs/examples/tabs/customized-add-button-icon.vue
+++ b/docs/examples/tabs/customized-add-button-icon.vue
@@ -7,7 +7,7 @@ addIcon
editable
@edit="handleTabsEdit"
>
-
+
!!props.activeName)
)
+ useDeprecated(
+ {
+ from: '"addIcon"',
+ replacement: '"add-icon"',
+ scope: 'ElTabs',
+ version: '2.6.0',
+ ref: 'https://element-plus.org/en-US/component/tabs.html#slots',
+ type: 'Slot',
+ },
+ computed(() => !!slots.addIcon)
+ )
+
watch(
() => props.activeName,
(modelValue) => setCurrentName(modelValue)
@@ -178,7 +190,8 @@ const Tabs = defineComponent({
})
return () => {
- const addSlot = slots.addIcon
+ const addSlot = slots['add-icon'] || slots['addIcon']
+ const isCamelCase = addSlot && slots['addIcon']
const newButton =
props.editable || props.addable ? (
{addSlot ? (
- renderSlot(slots, 'addIcon')
+ renderSlot(slots, isCamelCase ? 'addIcon' : 'add-icon')
) : (
Date: Fri, 2 Feb 2024 15:40:45 +0800
Subject: [PATCH 22/22] chore: Update changelog 2.5.4 (#15766)
chore: update changelog 2.5.4
---
CHANGELOG.en-US.md | 24 ++++++++++++++++++++++++
1 file changed, 24 insertions(+)
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_
+ Plain
{{ item.label }}
-
- {{ item.label }}
-
@@ -75,10 +42,10 @@ import type { TagProps } from 'element-plus'
type Item = { type: TagProps['type']; label: string }
const items = ref