-
Checked
+
+ 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
-
+
+
+ {{ 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
-
-
-
- Large
- Default
- Small
-
+
+ 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
+
+ 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
>([
- { 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/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/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/dialog/src/dialog-content.ts b/packages/components/dialog/src/dialog-content.ts
index b80c2fae39..bed43fd379 100644
--- a/packages/components/dialog/src/dialog-content.ts
+++ b/packages/components/dialog/src/dialog-content.ts
@@ -15,17 +15,14 @@ export const dialogContentProps = buildProps({
closeIcon: {
type: iconPropType,
},
- /**
- * @deprecated will be removed in version 2.4.0, please use class
- */
- customClass: {
- type: String,
- default: '',
- },
/**
* @description enable dragging feature for Dialog
*/
draggable: Boolean,
+ /**
+ * @description draggable Dialog can overflow the viewport
+ */
+ overflow: Boolean,
/**
* @description whether the Dialog takes up full screen
*/
diff --git a/packages/components/dialog/src/dialog-content.vue b/packages/components/dialog/src/dialog-content.vue
index e9a6b22ae4..826489c36f 100644
--- a/packages/components/dialog/src/dialog-content.vue
+++ b/packages/components/dialog/src/dialog-content.vue
@@ -1,6 +1,9 @@
-
+
{{ 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..7cf3f79d25 100644
--- a/packages/components/drawer/src/drawer.vue
+++ b/packages/components/drawer/src/drawer.vue
@@ -18,6 +18,9 @@
:trapped="visible"
:focus-trap-el="drawerRef"
:focus-start-el="focusStartRef"
+ @focus-after-trapped="onOpenAutoFocus"
+ @focus-after-released="onCloseAutoFocus"
+ @focusout-prevented="onFocusoutPrevented"
@release-requested="onCloseRequested"
>
!!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()
@@ -137,6 +129,9 @@ const {
titleId,
bodyId,
onModalClick,
+ onOpenAutoFocus,
+ onCloseAutoFocus,
+ onFocusoutPrevented,
onCloseRequested,
handleClose,
} = useDialog(props, drawerRef)
diff --git a/packages/components/menu/src/menu.ts b/packages/components/menu/src/menu.ts
index 3f1116e8b0..a0b6e51f42 100644
--- a/packages/components/menu/src/menu.ts
+++ b/packages/components/menu/src/menu.ts
@@ -255,6 +255,13 @@ export default defineComponent({
}
}
+ const calcMenuItemWidth = (menuItem: HTMLElement) => {
+ const computedStyle = getComputedStyle(menuItem)
+ const marginLeft = Number.parseInt(computedStyle.marginLeft, 10)
+ const marginRight = Number.parseInt(computedStyle.marginRight, 10)
+ return menuItem.offsetWidth + marginLeft + marginRight || 0
+ }
+
const calcSliceIndex = () => {
if (!menu.value) return -1
const items = Array.from(menu.value?.childNodes ?? []).filter(
@@ -264,19 +271,14 @@ export default defineComponent({
(item.nodeName !== '#text' || item.nodeValue)
) as HTMLElement[]
const moreItemWidth = 64
- const paddingLeft = Number.parseInt(
- getComputedStyle(menu.value!).paddingLeft,
- 10
- )
- const paddingRight = Number.parseInt(
- getComputedStyle(menu.value!).paddingRight,
- 10
- )
+ const computedMenuStyle = getComputedStyle(menu.value!)
+ const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10)
+ const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10)
const menuWidth = menu.value!.clientWidth - paddingLeft - paddingRight
let calcWidth = 0
let sliceIndex = 0
items.forEach((item, index) => {
- calcWidth += item.offsetWidth || 0
+ calcWidth += calcMenuItemWidth(item)
if (calcWidth <= menuWidth - moreItemWidth) {
sliceIndex = index + 1
}
diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue
index 0a73ab9e02..7d895ecd5c 100644
--- a/packages/components/message-box/src/index.vue
+++ b/packages/components/message-box/src/index.vue
@@ -38,7 +38,7 @@
props.draggable)
- useDraggable(rootRef, headerRef, draggable)
+ const overflow = computed(() => props.overflow)
+ useDraggable(rootRef, headerRef, draggable, overflow)
onMounted(async () => {
await nextTick()
@@ -499,5 +501,5 @@ export default defineComponent({
t,
}
},
-}) as DefineComponent
+})
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/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/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts
index 66448564e2..238b7bd396 100644
--- a/packages/components/select/__tests__/select.test.ts
+++ b/packages/components/select/__tests__/select.test.ts
@@ -1,5 +1,5 @@
// @ts-nocheck
-import { markRaw, nextTick } from 'vue'
+import { defineComponent, markRaw, nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import { afterEach, describe, expect, it, test, vi } from 'vitest'
import { EVENT_CODE } from '@element-plus/constants'
@@ -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(
`
@@ -1850,6 +1878,69 @@ describe('Select', () => {
expect(vm.value).toBe('Shanghai')
})
+ test('el-option-group should visible when el-option in a component', async () => {
+ const Options = defineComponent({
+ components: {
+ 'el-option': Option,
+ },
+ props: {
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ },
+ template: `
+
+ `,
+ })
+
+ wrapper = mount({
+ template: `
+
+
+
+
+
+ `,
+ components: {
+ 'el-select': Select,
+ 'el-option-group': Group,
+ Options,
+ },
+ data() {
+ return {
+ value: '',
+ options: [
+ {
+ label: 'Popular cities',
+ options: [
+ {
+ value: 'Shanghai',
+ label: 'Shanghai',
+ },
+ {
+ value: 'Beijing',
+ label: 'Beijing',
+ },
+ ],
+ },
+ ],
+ }
+ },
+ })
+
+ expect(wrapper.findComponent(Group).vm.visible).toBe(true)
+ })
+
test('tag of disabled option is not closable', async () => {
wrapper = _mount(
`
diff --git a/packages/components/select/src/option-group.vue b/packages/components/select/src/option-group.vue
index 10b07fc032..d7b3a71eb5 100644
--- a/packages/components/select/src/option-group.vue
+++ b/packages/components/select/src/option-group.vue
@@ -71,6 +71,8 @@ export default defineComponent({
children.push(child.component.proxy)
} else if (child.children?.length) {
children.push(...flattedChildren(child))
+ } else if (child.component?.subTree) {
+ children.push(...flattedChildren(child.component.subTree))
}
})
}
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)
}
})
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
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()
diff --git a/packages/components/tabs/src/tabs.tsx b/packages/components/tabs/src/tabs.tsx
index c74387f59b..6c85a23664 100644
--- a/packages/components/tabs/src/tabs.tsx
+++ b/packages/components/tabs/src/tabs.tsx
@@ -151,6 +151,18 @@ const Tabs = defineComponent({
computed(() => !!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')
) : (
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/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 e7fd7fba66..d6d0ceb5b1 100644
--- a/packages/components/tour/src/step.vue
+++ b/packages/components/tour/src/step.vue
@@ -10,7 +10,7 @@
-
+
{{ title }}
@@ -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 @@