element-plus 2.14.1 → 2.14.3

package/lib/components/tooltip/src/trigger.d.ts

@@ -34,7 +34,7 @@ declare const useTooltipTriggerPropsDefaults: {
  */
 declare const useTooltipTriggerProps: {
   readonly disabled: BooleanConstructor;
-  readonly trigger: EpPropFinalized<(new (...args: any[]) => "focus" | "hover" | "click" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | (((new (...args: any[]) => "focus" | "hover" | "click" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>)) | null)[], unknown, unknown, "hover", boolean>;
+  readonly trigger: EpPropFinalized<(new (...args: any[]) => "click" | "contextmenu" | "focus" | "hover" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | (((new (...args: any[]) => "click" | "contextmenu" | "focus" | "hover" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>)) | null)[], unknown, unknown, "hover", boolean>;
   readonly triggerKeys: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => string[], boolean>;
   readonly focusOnTarget: BooleanConstructor;
   readonly virtualRef: {

package/lib/components/tour/src/content.d.ts

@@ -37,7 +37,7 @@ interface TourContentProps {
 declare const tourContentProps: {
   placement: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
   reference: EpPropFinalized<(new (...args: any[]) => HTMLElement | VirtualElement) | (() => HTMLElement | VirtualElement | null) | (((new (...args: any[]) => HTMLElement | VirtualElement) | (() => HTMLElement | VirtualElement | null)) | null)[], unknown, unknown, null, boolean>;
-  strategy: EpPropFinalized<(new (...args: any[]) => "fixed" | "absolute") | (() => Strategy) | (((new (...args: any[]) => "fixed" | "absolute") | (() => Strategy)) | null)[], "fixed" | "absolute", unknown, string, boolean>;
+  strategy: EpPropFinalized<(new (...args: any[]) => "absolute" | "fixed") | (() => Strategy) | (((new (...args: any[]) => "absolute" | "fixed") | (() => Strategy)) | null)[], "absolute" | "fixed", unknown, string, boolean>;
   offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
   showArrow: BooleanConstructor;
   zIndex: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;

package/lib/components/tour/src/helper.d.ts

@@ -30,7 +30,6 @@ interface TourContext {
   updateModelValue(modelValue: boolean): void;
   onClose(): void;
   onFinish(): void;
-  onChange(): void;
 }
 declare const tourKey: InjectionKey<TourContext>;
 declare const useFloating: (referenceRef: Ref<HTMLElement | VirtualElement | null>, contentRef: Ref<HTMLElement | null>, arrowRef: Ref<HTMLElement | null>, placement: Ref<Placement | undefined>, strategy: Ref<Strategy>, offset: Ref<number>, zIndex: Ref<number>, showArrow: Ref<boolean>) => {

package/lib/components/tour/src/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","names":["isClient"],"sources":["../../../../../../packages/components/tour/src/helper.ts"],"sourcesContent":["import {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  unref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  detectOverflow,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n} from '@floating-ui/dom'\nimport {\n  isArray,\n  isClient,\n  isFunction,\n  isString,\n  keysOf,\n} from '@element-plus/utils'\n\nimport type {\n  CSSProperties,\n  Component,\n  InjectionKey,\n  Ref,\n  SetupContext,\n} from 'vue'\nimport type { UseNamespaceReturn } from '@element-plus/hooks'\nimport type { PosInfo, TourGap, TourMask } from './types'\nimport type {\n  ComputePositionReturn,\n  Middleware,\n  Placement,\n  Strategy,\n  VirtualElement,\n} from '@floating-ui/dom'\nimport type { TourStepProps } from './step'\n\nexport const useTarget = (\n  target: Ref<\n    string | HTMLElement | (() => HTMLElement | null) | null | undefined\n  >,\n  open: Ref<boolean>,\n  gap: Ref<TourGap>,\n  mergedMask: Ref<TourMask>,\n  scrollIntoViewOptions: Ref<boolean | ScrollIntoViewOptions>\n) => {\n  const posInfo: Ref<PosInfo | null> = ref(null)\n\n  const getTargetEl = () => {\n    let targetEl: HTMLElement | null | undefined\n    if (isString(target.value)) {\n      targetEl = document.querySelector<HTMLElement>(target.value)\n    } else if (isFunction(target.value)) {\n      targetEl = target.value()\n    } else {\n      targetEl = target.value\n    }\n    return targetEl\n  }\n\n  const updatePosInfo = () => {\n    const targetEl = getTargetEl()\n    if (!targetEl || !open.value) {\n      posInfo.value = null\n      return\n    }\n    if (!isInViewPort(targetEl)) {\n      targetEl.scrollIntoView(scrollIntoViewOptions.value)\n    }\n    const { left, top, width, height } = targetEl.getBoundingClientRect()\n    posInfo.value = {\n      left,\n      top,\n      width,\n      height,\n      radius: 0,\n    }\n  }\n\n  onMounted(() => {\n    watch(\n      [open, target],\n      () => {\n        updatePosInfo()\n      },\n      {\n        immediate: true,\n      }\n    )\n    window.addEventListener('resize', updatePosInfo)\n  })\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', updatePosInfo)\n  })\n\n  const getGapOffset = (index: number) =>\n    (isArray(gap.value.offset) ? gap.value.offset[index] : gap.value.offset) ??\n    6\n\n  const mergedPosInfo = computed(() => {\n    if (!posInfo.value) return posInfo.value\n\n    const gapOffsetX = getGapOffset(0)\n    const gapOffsetY = getGapOffset(1)\n    const gapRadius = gap.value?.radius || 2\n\n    return {\n      left: posInfo.value.left - gapOffsetX,\n      top: posInfo.value.top - gapOffsetY,\n      width: posInfo.value.width + gapOffsetX * 2,\n      height: posInfo.value.height + gapOffsetY * 2,\n      radius: gapRadius,\n    }\n  })\n\n  const triggerTarget = computed(() => {\n    const targetEl = getTargetEl()\n    if (!mergedMask.value || !targetEl || !window.DOMRect) {\n      return targetEl || undefined\n    }\n\n    return {\n      getBoundingClientRect() {\n        return window.DOMRect.fromRect({\n          width: mergedPosInfo.value?.width || 0,\n          height: mergedPosInfo.value?.height || 0,\n          x: mergedPosInfo.value?.left || 0,\n          y: mergedPosInfo.value?.top || 0,\n        })\n      },\n    }\n  })\n\n  return {\n    mergedPosInfo,\n    triggerTarget,\n  }\n}\n\nexport interface TourContext {\n  currentStep: Ref<TourStepProps | undefined>\n  current: Ref<number>\n  total: Ref<number>\n  showClose: Ref<boolean>\n  closeIcon: Ref<string | Component | undefined>\n  mergedType: Ref<'default' | 'primary' | undefined>\n  ns: UseNamespaceReturn\n  slots: SetupContext['slots']\n  updateModelValue(modelValue: boolean): void\n  onClose(): void\n  onFinish(): void\n  onChange(): void\n}\n\nexport const tourKey: InjectionKey<TourContext> = Symbol('ElTour')\n\nfunction isInViewPort(element: HTMLElement) {\n  const viewWidth = window.innerWidth || document.documentElement.clientWidth\n  const viewHeight = window.innerHeight || document.documentElement.clientHeight\n  const { top, right, bottom, left } = element.getBoundingClientRect()\n\n  return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight\n}\n\nexport const useFloating = (\n  referenceRef: Ref<HTMLElement | VirtualElement | null>,\n  contentRef: Ref<HTMLElement | null>,\n  arrowRef: Ref<HTMLElement | null>,\n  placement: Ref<Placement | undefined>,\n  strategy: Ref<Strategy>,\n  offset: Ref<number>,\n  zIndex: Ref<number>,\n  showArrow: Ref<boolean>\n) => {\n  const x = ref<number>()\n  const y = ref<number>()\n  const middlewareData = ref<ComputePositionReturn['middlewareData']>({})\n\n  const states = {\n    x,\n    y,\n    placement,\n    strategy,\n    middlewareData,\n  } as const\n\n  const middleware = computed(() => {\n    const _middleware: Middleware[] = [\n      offsetMiddleware(unref(offset)),\n      flip(),\n      shift(),\n      overflowMiddleware(),\n    ]\n\n    if (unref(showArrow) && unref(arrowRef)) {\n      _middleware.push(\n        arrow({\n          element: unref(arrowRef)!,\n        })\n      )\n    }\n    return _middleware\n  })\n\n  const update = async () => {\n    if (!isClient) return\n\n    const referenceEl = unref(referenceRef)\n    const contentEl = unref(contentRef)\n    if (!referenceEl || !contentEl) return\n\n    const data = await computePosition(referenceEl, contentEl, {\n      placement: unref(placement),\n      strategy: unref(strategy),\n      middleware: unref(middleware),\n    })\n\n    keysOf(states).forEach((key) => {\n      states[key].value = data[key]\n    })\n  }\n\n  const contentStyle = computed<CSSProperties>(() => {\n    if (!unref(referenceRef)) {\n      return {\n        position: 'fixed',\n        top: '50%',\n        left: '50%',\n        transform: 'translate3d(-50%, -50%, 0)',\n        maxWidth: '100vw',\n        zIndex: unref(zIndex),\n      }\n    }\n\n    const { overflow } = unref(middlewareData)\n\n    return {\n      position: unref(strategy),\n      zIndex: unref(zIndex),\n      top: unref(y) != null ? `${unref(y)}px` : '',\n      left: unref(x) != null ? `${unref(x)}px` : '',\n      maxWidth: overflow?.maxWidth ? `${overflow?.maxWidth}px` : '',\n    }\n  })\n\n  const arrowStyle = computed<CSSProperties>(() => {\n    if (!unref(showArrow)) return {}\n\n    const { arrow } = unref(middlewareData)\n    return {\n      left: arrow?.x != null ? `${arrow?.x}px` : '',\n      top: arrow?.y != null ? `${arrow?.y}px` : '',\n    }\n  })\n\n  let cleanup: any\n  onMounted(() => {\n    const referenceEl = unref(referenceRef)\n    const contentEl = unref(contentRef)\n    if (referenceEl && contentEl) {\n      cleanup = autoUpdate(referenceEl, contentEl, update)\n    }\n\n    watchEffect(() => {\n      update()\n    })\n  })\n\n  onBeforeUnmount(() => {\n    cleanup && cleanup()\n  })\n\n  return {\n    update,\n    contentStyle,\n    arrowStyle,\n  }\n}\n\nconst overflowMiddleware = (): Middleware => {\n  return {\n    name: 'overflow',\n    async fn(state) {\n      const overflow = await detectOverflow(state)\n      let overWidth = 0\n      if (overflow.left > 0) overWidth = overflow.left\n      if (overflow.right > 0) overWidth = overflow.right\n      const floatingWidth = state.rects.floating.width\n      return {\n        data: {\n          maxWidth: floatingWidth - overWidth,\n        },\n      }\n    },\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"helper.js","names":["isClient"],"sources":["../../../../../../packages/components/tour/src/helper.ts"],"sourcesContent":["import {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  unref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  detectOverflow,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n} from '@floating-ui/dom'\nimport {\n  isArray,\n  isClient,\n  isFunction,\n  isString,\n  keysOf,\n} from '@element-plus/utils'\n\nimport type {\n  CSSProperties,\n  Component,\n  InjectionKey,\n  Ref,\n  SetupContext,\n} from 'vue'\nimport type { UseNamespaceReturn } from '@element-plus/hooks'\nimport type { PosInfo, TourGap, TourMask } from './types'\nimport type {\n  ComputePositionReturn,\n  Middleware,\n  Placement,\n  Strategy,\n  VirtualElement,\n} from '@floating-ui/dom'\nimport type { TourStepProps } from './step'\n\nexport const useTarget = (\n  target: Ref<\n    string | HTMLElement | (() => HTMLElement | null) | null | undefined\n  >,\n  open: Ref<boolean>,\n  gap: Ref<TourGap>,\n  mergedMask: Ref<TourMask>,\n  scrollIntoViewOptions: Ref<boolean | ScrollIntoViewOptions>\n) => {\n  const posInfo: Ref<PosInfo | null> = ref(null)\n\n  const getTargetEl = () => {\n    let targetEl: HTMLElement | null | undefined\n    if (isString(target.value)) {\n      targetEl = document.querySelector<HTMLElement>(target.value)\n    } else if (isFunction(target.value)) {\n      targetEl = target.value()\n    } else {\n      targetEl = target.value\n    }\n    return targetEl\n  }\n\n  const updatePosInfo = () => {\n    const targetEl = getTargetEl()\n    if (!targetEl || !open.value) {\n      posInfo.value = null\n      return\n    }\n    if (!isInViewPort(targetEl)) {\n      targetEl.scrollIntoView(scrollIntoViewOptions.value)\n    }\n    const { left, top, width, height } = targetEl.getBoundingClientRect()\n    posInfo.value = {\n      left,\n      top,\n      width,\n      height,\n      radius: 0,\n    }\n  }\n\n  onMounted(() => {\n    watch(\n      [open, target],\n      () => {\n        updatePosInfo()\n      },\n      {\n        immediate: true,\n      }\n    )\n    window.addEventListener('resize', updatePosInfo)\n  })\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', updatePosInfo)\n  })\n\n  const getGapOffset = (index: number) =>\n    (isArray(gap.value.offset) ? gap.value.offset[index] : gap.value.offset) ??\n    6\n\n  const mergedPosInfo = computed(() => {\n    if (!posInfo.value) return posInfo.value\n\n    const gapOffsetX = getGapOffset(0)\n    const gapOffsetY = getGapOffset(1)\n    const gapRadius = gap.value?.radius || 2\n\n    return {\n      left: posInfo.value.left - gapOffsetX,\n      top: posInfo.value.top - gapOffsetY,\n      width: posInfo.value.width + gapOffsetX * 2,\n      height: posInfo.value.height + gapOffsetY * 2,\n      radius: gapRadius,\n    }\n  })\n\n  const triggerTarget = computed(() => {\n    const targetEl = getTargetEl()\n    if (!mergedMask.value || !targetEl || !window.DOMRect) {\n      return targetEl || undefined\n    }\n\n    return {\n      getBoundingClientRect() {\n        return window.DOMRect.fromRect({\n          width: mergedPosInfo.value?.width || 0,\n          height: mergedPosInfo.value?.height || 0,\n          x: mergedPosInfo.value?.left || 0,\n          y: mergedPosInfo.value?.top || 0,\n        })\n      },\n    }\n  })\n\n  return {\n    mergedPosInfo,\n    triggerTarget,\n  }\n}\n\nexport interface TourContext {\n  currentStep: Ref<TourStepProps | undefined>\n  current: Ref<number>\n  total: Ref<number>\n  showClose: Ref<boolean>\n  closeIcon: Ref<string | Component | undefined>\n  mergedType: Ref<'default' | 'primary' | undefined>\n  ns: UseNamespaceReturn\n  slots: SetupContext['slots']\n  updateModelValue(modelValue: boolean): void\n  onClose(): void\n  onFinish(): void\n}\n\nexport const tourKey: InjectionKey<TourContext> = Symbol('ElTour')\n\nfunction isInViewPort(element: HTMLElement) {\n  const viewWidth = window.innerWidth || document.documentElement.clientWidth\n  const viewHeight = window.innerHeight || document.documentElement.clientHeight\n  const { top, right, bottom, left } = element.getBoundingClientRect()\n\n  return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight\n}\n\nexport const useFloating = (\n  referenceRef: Ref<HTMLElement | VirtualElement | null>,\n  contentRef: Ref<HTMLElement | null>,\n  arrowRef: Ref<HTMLElement | null>,\n  placement: Ref<Placement | undefined>,\n  strategy: Ref<Strategy>,\n  offset: Ref<number>,\n  zIndex: Ref<number>,\n  showArrow: Ref<boolean>\n) => {\n  const x = ref<number>()\n  const y = ref<number>()\n  const middlewareData = ref<ComputePositionReturn['middlewareData']>({})\n\n  const states = {\n    x,\n    y,\n    placement,\n    strategy,\n    middlewareData,\n  } as const\n\n  const middleware = computed(() => {\n    const _middleware: Middleware[] = [\n      offsetMiddleware(unref(offset)),\n      flip(),\n      shift(),\n      overflowMiddleware(),\n    ]\n\n    if (unref(showArrow) && unref(arrowRef)) {\n      _middleware.push(\n        arrow({\n          element: unref(arrowRef)!,\n        })\n      )\n    }\n    return _middleware\n  })\n\n  const update = async () => {\n    if (!isClient) return\n\n    const referenceEl = unref(referenceRef)\n    const contentEl = unref(contentRef)\n    if (!referenceEl || !contentEl) return\n\n    const data = await computePosition(referenceEl, contentEl, {\n      placement: unref(placement),\n      strategy: unref(strategy),\n      middleware: unref(middleware),\n    })\n\n    keysOf(states).forEach((key) => {\n      states[key].value = data[key]\n    })\n  }\n\n  const contentStyle = computed<CSSProperties>(() => {\n    if (!unref(referenceRef)) {\n      return {\n        position: 'fixed',\n        top: '50%',\n        left: '50%',\n        transform: 'translate3d(-50%, -50%, 0)',\n        maxWidth: '100vw',\n        zIndex: unref(zIndex),\n      }\n    }\n\n    const { overflow } = unref(middlewareData)\n\n    return {\n      position: unref(strategy),\n      zIndex: unref(zIndex),\n      top: unref(y) != null ? `${unref(y)}px` : '',\n      left: unref(x) != null ? `${unref(x)}px` : '',\n      maxWidth: overflow?.maxWidth ? `${overflow?.maxWidth}px` : '',\n    }\n  })\n\n  const arrowStyle = computed<CSSProperties>(() => {\n    if (!unref(showArrow)) return {}\n\n    const { arrow } = unref(middlewareData)\n    return {\n      left: arrow?.x != null ? `${arrow?.x}px` : '',\n      top: arrow?.y != null ? `${arrow?.y}px` : '',\n    }\n  })\n\n  let cleanup: any\n  onMounted(() => {\n    const referenceEl = unref(referenceRef)\n    const contentEl = unref(contentRef)\n    if (referenceEl && contentEl) {\n      cleanup = autoUpdate(referenceEl, contentEl, update)\n    }\n\n    watchEffect(() => {\n      update()\n    })\n  })\n\n  onBeforeUnmount(() => {\n    cleanup && cleanup()\n  })\n\n  return {\n    update,\n    contentStyle,\n    arrowStyle,\n  }\n}\n\nconst overflowMiddleware = (): Middleware => {\n  return {\n    name: 'overflow',\n    async fn(state) {\n      const overflow = await detectOverflow(state)\n      let overWidth = 0\n      if (overflow.left > 0) overWidth = overflow.left\n      if (overflow.right > 0) overWidth = overflow.right\n      const floatingWidth = state.rects.floating.width\n      return {\n        data: {\n          maxWidth: floatingWidth - overWidth,\n        },\n      }\n    },\n  }\n}\n"],"mappings":"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"}

package/lib/components/tour/src/step.vue_vue_type_script_setup_true_lang.js

@@ -21,7 +21,7 @@ var step_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.d
 		const emit = __emit;
 		const { Close } = require_icon.CloseComponents;
 		const { t } = require_index.useLocale();
-		const { currentStep, current, total, showClose, closeIcon, mergedType, ns, slots: tourSlots, updateModelValue, onClose: tourOnClose, onFinish: tourOnFinish, onChange } = (0, vue.inject)(require_helper.tourKey);
+		const { currentStep, current, total, showClose, closeIcon, mergedType, ns, slots: tourSlots, updateModelValue, onClose: tourOnClose, onFinish: tourOnFinish } = (0, vue.inject)(require_helper.tourKey);
 		(0, vue.watch)(props, (val) => {
 			currentStep.value = val;
 		}, { immediate: true });
@@ -34,13 +34,11 @@ var step_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.d
 		const onPrev = () => {
 			current.value -= 1;
 			if (props.prevButtonProps?.onClick) props.prevButtonProps?.onClick();
-			onChange();
 		};
 		const onNext = () => {
 			if (current.value >= total.value - 1) onFinish();
 			else current.value += 1;
 			if (props.nextButtonProps?.onClick) props.nextButtonProps.onClick();
-			onChange();
 		};
 		const onFinish = () => {
 			onClose();

package/lib/components/tour/src/step.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"step.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/tour/src/step.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"mergedShowClose\"\n    :aria-label=\"t('el.tour.close')\"\n    :class=\"ns.e('closebtn')\"\n    type=\"button\"\n    @click=\"onClose\"\n  >\n    <el-icon :class=\"ns.e('close')\">\n      <component :is=\"mergedCloseIcon\" />\n    </el-icon>\n  </button>\n  <header :class=\"[ns.e('header'), { 'show-close': showClose }]\">\n    <slot name=\"header\">\n      <span role=\"heading\" :class=\"ns.e('title')\">\n        {{ title }}\n      </span>\n    </slot>\n  </header>\n  <div :class=\"ns.e('body')\">\n    <slot>\n      <span>{{ description }}</span>\n    </slot>\n  </div>\n  <footer :class=\"ns.e('footer')\">\n    <div :class=\"ns.b('indicators')\">\n      <component\n        :is=\"tourSlots.indicators\"\n        v-if=\"tourSlots.indicators\"\n        :current=\"current\"\n        :total=\"total\"\n      />\n      <template v-else>\n        <span\n          v-for=\"(item, index) in total\"\n          :key=\"item\"\n          :class=\"[ns.b('indicator'), ns.is('active', index === current)]\"\n        />\n      </template>\n    </div>\n    <div :class=\"ns.b('buttons')\">\n      <el-button\n        v-if=\"current > 0\"\n        size=\"small\"\n        :type=\"mergedType\"\n        v-bind=\"filterButtonProps(prevButtonProps)\"\n        @click=\"onPrev\"\n      >\n        {{ prevButtonProps?.children ?? t('el.tour.previous') }}\n      </el-button>\n      <el-button\n        v-if=\"current <= total - 1\"\n        size=\"small\"\n        :type=\"mergedType === 'primary' ? 'default' : 'primary'\"\n        v-bind=\"filterButtonProps(nextButtonProps)\"\n        @click=\"onNext\"\n      >\n        {{\n          nextButtonProps?.children ??\n          (current === total - 1 ? t('el.tour.finish') : t('el.tour.next'))\n        }}\n      </el-button>\n    </div>\n  </footer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, onMounted, watch } from 'vue'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { omit } from 'lodash-unified'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CloseComponents, getEventCode } from '@element-plus/utils'\nimport { useLocale } from '@element-plus/hooks'\nimport { tourStepEmits } from './step'\nimport { tourKey } from './helper'\n\nimport type { TourBtnProps } from './types'\nimport type { TourStepProps } from './step'\n\ndefineOptions({\n  name: 'ElTourStep',\n})\n\nconst props = withDefaults(defineProps<TourStepProps>(), {\n  showClose: undefined,\n  showArrow: undefined,\n  placement: 'bottom',\n  mask: undefined,\n  scrollIntoViewOptions: undefined,\n})\nconst emit = defineEmits(tourStepEmits)\n\nconst { Close } = CloseComponents\n\nconst { t } = useLocale()\n\nconst {\n  currentStep,\n  current,\n  total,\n  showClose,\n  closeIcon,\n  mergedType,\n  ns,\n  slots: tourSlots,\n  updateModelValue,\n  onClose: tourOnClose,\n  onFinish: tourOnFinish,\n  onChange,\n} = inject(tourKey)!\n\nwatch(\n  props,\n  (val) => {\n    currentStep.value = val\n  },\n  {\n    immediate: true,\n  }\n)\n\nconst mergedShowClose = computed(() => props.showClose ?? showClose.value)\nconst mergedCloseIcon = computed(\n  () => props.closeIcon ?? closeIcon.value ?? Close\n)\n\nconst filterButtonProps = (btnProps?: TourBtnProps) => {\n  if (!btnProps) return\n  return omit(btnProps, ['children', 'onClick'])\n}\n\nconst onPrev = () => {\n  current.value -= 1\n  if (props.prevButtonProps?.onClick) {\n    props.prevButtonProps?.onClick()\n  }\n  onChange()\n}\n\nconst onNext = () => {\n  if (current.value >= total.value - 1) {\n    onFinish()\n  } else {\n    current.value += 1\n  }\n  if (props.nextButtonProps?.onClick) {\n    props.nextButtonProps.onClick()\n  }\n  onChange()\n}\n\nconst onFinish = () => {\n  onClose()\n  tourOnFinish()\n}\n\nconst onClose = () => {\n  updateModelValue(false)\n  tourOnClose()\n  emit('close')\n}\n\nconst handleKeydown = (e: KeyboardEvent) => {\n  const target = e.target as HTMLElement | null\n  if (target?.isContentEditable) return\n  const code = getEventCode(e)\n\n  switch (code) {\n    case EVENT_CODE.left:\n      e.preventDefault()\n      current.value > 0 && onPrev()\n      break\n    case EVENT_CODE.right:\n      e.preventDefault()\n      onNext()\n      break\n  }\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', handleKeydown)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', handleKeydown)\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAoFA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAEb,MAAM,EAAE,UAAU,aAAA;EAElB,MAAM,EAAE,MAAM,cAAA,WAAU;EAExB,MAAM,EACJ,aACA,SACA,OACA,WACA,WACA,YACA,IACA,OAAO,WACP,kBACA,SAAS,aACT,UAAU,cACV,cAAA,GAAA,IAAA,QACS,eAAA,QAAQ;EAEnB,CAAA,GAAA,IAAA,OACE,QACC,QAAQ;GACP,YAAY,QAAQ;KAEtB,EACE,WAAW,MACb,CACF;EAEA,MAAM,mBAAA,GAAA,IAAA,gBAAiC,MAAM,aAAa,UAAU,MAAK;EACzE,MAAM,mBAAA,GAAA,IAAA,gBACE,MAAM,aAAa,UAAU,SAAS,MAC9C;EAEA,MAAM,qBAAqB,aAA4B;GACrD,IAAI,CAAC,UAAU;GACf,QAAA,GAAA,eAAA,MAAY,UAAU,CAAC,YAAY,UAAU,CAAA;;EAG/C,MAAM,eAAe;GACnB,QAAQ,SAAS;GACjB,IAAI,MAAM,iBAAiB,SACzB,MAAM,iBAAiB,SAAQ;GAEjC,UAAS;;EAGX,MAAM,eAAe;GACnB,IAAI,QAAQ,SAAS,MAAM,QAAQ,GACjC,UAAS;QAET,QAAQ,SAAS;GAEnB,IAAI,MAAM,iBAAiB,SACzB,MAAM,gBAAgB,SAAQ;GAEhC,UAAS;;EAGX,MAAM,iBAAiB;GACrB,SAAQ;GACR,cAAa;;EAGf,MAAM,gBAAgB;GACpB,iBAAiB,MAAK;GACtB,aAAY;GACZ,KAAK,QAAO;;EAGd,MAAM,iBAAiB,MAAqB;GAE1C,IADe,EAAE,QACL,mBAAmB;GAG/B,QAFa,cAAA,aAAa,EAEd,EAAZ;IACE,KAAK,aAAA,WAAW;KACd,EAAE,gBAAe;KACjB,QAAQ,QAAQ,KAAK,QAAO;KAC5B;IACF,KAAK,aAAA,WAAW;KACd,EAAE,gBAAe;KACjB,QAAO;KACP;;;EAIN,CAAA,GAAA,IAAA,iBAAgB;GACd,OAAO,iBAAiB,WAAW,cAAa;IACjD;EAED,CAAA,GAAA,IAAA,uBAAsB;GACpB,OAAO,oBAAoB,WAAW,cAAa;IACpD;;;IAxLS,gBAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBASC,UAAA;;KARN,eAAA,GAAA,IAAA,OAAY,EAAC,CAAA,gBAAA;KACb,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,WAAA,CAAA;KACZ,MAAK;KACJ,SAAO;4CAIE,gBAAA,OAAA,EAAA,EAFA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,QAAA,CAAA,EAAA,EAAA;qCACgB,GAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,cAAA,GAAA,IAAA,yBAAnB,gBAAA,MAAe,CAAA,EAAA,CAAA;;;gCAS1B,UAAA,EANA,QAAA,GAAA,IAAA,gBAAK,EAAA,GAAA,IAAA,OAAG,GAAE,CAAC,EAAC,SAAA,EAAA,EAAA,eAAA,GAAA,IAAA,OAA4B,UAAS,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAAA,IAAA,YAKjD,KAAA,QAAA,UAAA,EAAA,QAAA,EAAA,GAAA,IAAA,oBADE,QAAA;KAFD,MAAK;KAAW,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,QAAA,CAAA;gCAC5B,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;gCAQR,OAAA,EAJA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,OAAA,CAAA,EAAA,EAAA,EAAA,GAAA,IAAA,YAGR,KAAA,QAAA,WAAA,EAAA,QAAA,EAAA,GAAA,IAAA,oBADyB,QAAA,OAAA,GAAA,IAAA,iBAArB,QAAA,YAAW,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;gCA0Cf,UAAA,EAvCA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,SAAA,CAAA,EAAA,EAAA,EAAA,GAAA,IAAA,oBAeZ,OAAA,EAdA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,aAAA,CAAA,EAAA,EAAA,EAAA,GAAA,IAAA,OAGP,UAAS,CAAC,eAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,cAAA,GAAA,IAAA,0BAAA,GAAA,IAAA,OADX,UAAS,CAAC,WAAU,EAAA;;KAExB,UAAA,GAAA,IAAA,OAAS,QAAO;KAChB,QAAA,GAAA,IAAA,OAAO,MAAA;gGAON,IAAA,UAAA,EAAA,KAAA,GAAA,GAAA,GAAA,IAAA,aAAA,GAAA,IAAA,OAHwB,MAAK,GAArB,MAAM,UAAK;8DAGnB,QAAA;MAFC,KAAK;MACL,QAAA,GAAA,IAAA,gBAAK,EAAA,GAAA,IAAA,OAAG,GAAE,CAAC,EAAC,YAAA,GAAA,GAAA,IAAA,OAAe,GAAE,CAAC,GAAE,UAAW,WAAA,GAAA,IAAA,OAAU,QAAO,CAAA,CAAA,CAAA;;gDA0B7D,OAAA,EAtBA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,UAAA,CAAA,EAAA,EAAA,EAAA,GAAA,IAAA,OAEP,QAAO,GAAA,MAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OAOH,gBAAA,SAAA,GAAA,GAAA,IAAA,YAAA;;KANV,MAAK;KACJ,OAAA,GAAA,IAAA,OAAM,WAAA;OACC,kBAAkB,QAAA,gBAAe,EAAA,EACxC,SAAO,QAAM,CAAA,EAAA;qCAE0C,EAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,iBAArD,QAAA,iBAAiB,aAAA,GAAA,IAAA,OAAY,EAAC,CAAA,mBAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;kFAG3B,QAAO,KAAA,GAAA,IAAA,OAAI,MAAK,GAAA,MAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OAUZ,gBAAA,SAAA,GAAA,GAAA,IAAA,YAAA;;KATV,MAAK;KACJ,OAAA,GAAA,IAAA,OAAM,WAAU,KAAA,YAAA,YAAA;OACT,kBAAkB,QAAA,gBAAe,EAAA,EACxC,SAAO,QAAM,CAAA,EAAA;qCAKZ,EAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,iBAFA,QAAA,iBAAiB,cAAA,GAAA,IAAA,OAAuB,QAAO,MAAA,GAAA,IAAA,OAAK,MAAK,GAAA,KAAA,GAAA,IAAA,OAAO,EAAC,CAAA,iBAAA,IAAA,GAAA,IAAA,OAAqB,EAAC,CAAA,eAAA,EAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"step.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/tour/src/step.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"mergedShowClose\"\n    :aria-label=\"t('el.tour.close')\"\n    :class=\"ns.e('closebtn')\"\n    type=\"button\"\n    @click=\"onClose\"\n  >\n    <el-icon :class=\"ns.e('close')\">\n      <component :is=\"mergedCloseIcon\" />\n    </el-icon>\n  </button>\n  <header :class=\"[ns.e('header'), { 'show-close': showClose }]\">\n    <slot name=\"header\">\n      <span role=\"heading\" :class=\"ns.e('title')\">\n        {{ title }}\n      </span>\n    </slot>\n  </header>\n  <div :class=\"ns.e('body')\">\n    <slot>\n      <span>{{ description }}</span>\n    </slot>\n  </div>\n  <footer :class=\"ns.e('footer')\">\n    <div :class=\"ns.b('indicators')\">\n      <component\n        :is=\"tourSlots.indicators\"\n        v-if=\"tourSlots.indicators\"\n        :current=\"current\"\n        :total=\"total\"\n      />\n      <template v-else>\n        <span\n          v-for=\"(item, index) in total\"\n          :key=\"item\"\n          :class=\"[ns.b('indicator'), ns.is('active', index === current)]\"\n        />\n      </template>\n    </div>\n    <div :class=\"ns.b('buttons')\">\n      <el-button\n        v-if=\"current > 0\"\n        size=\"small\"\n        :type=\"mergedType\"\n        v-bind=\"filterButtonProps(prevButtonProps)\"\n        @click=\"onPrev\"\n      >\n        {{ prevButtonProps?.children ?? t('el.tour.previous') }}\n      </el-button>\n      <el-button\n        v-if=\"current <= total - 1\"\n        size=\"small\"\n        :type=\"mergedType === 'primary' ? 'default' : 'primary'\"\n        v-bind=\"filterButtonProps(nextButtonProps)\"\n        @click=\"onNext\"\n      >\n        {{\n          nextButtonProps?.children ??\n          (current === total - 1 ? t('el.tour.finish') : t('el.tour.next'))\n        }}\n      </el-button>\n    </div>\n  </footer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, onMounted, watch } from 'vue'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { omit } from 'lodash-unified'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CloseComponents, getEventCode } from '@element-plus/utils'\nimport { useLocale } from '@element-plus/hooks'\nimport { tourStepEmits } from './step'\nimport { tourKey } from './helper'\n\nimport type { TourBtnProps } from './types'\nimport type { TourStepProps } from './step'\n\ndefineOptions({\n  name: 'ElTourStep',\n})\n\nconst props = withDefaults(defineProps<TourStepProps>(), {\n  showClose: undefined,\n  showArrow: undefined,\n  placement: 'bottom',\n  mask: undefined,\n  scrollIntoViewOptions: undefined,\n})\nconst emit = defineEmits(tourStepEmits)\n\nconst { Close } = CloseComponents\n\nconst { t } = useLocale()\n\nconst {\n  currentStep,\n  current,\n  total,\n  showClose,\n  closeIcon,\n  mergedType,\n  ns,\n  slots: tourSlots,\n  updateModelValue,\n  onClose: tourOnClose,\n  onFinish: tourOnFinish,\n} = inject(tourKey)!\n\nwatch(\n  props,\n  (val) => {\n    currentStep.value = val\n  },\n  {\n    immediate: true,\n  }\n)\n\nconst mergedShowClose = computed(() => props.showClose ?? showClose.value)\nconst mergedCloseIcon = computed(\n  () => props.closeIcon ?? closeIcon.value ?? Close\n)\n\nconst filterButtonProps = (btnProps?: TourBtnProps) => {\n  if (!btnProps) return\n  return omit(btnProps, ['children', 'onClick'])\n}\n\nconst onPrev = () => {\n  current.value -= 1\n  if (props.prevButtonProps?.onClick) {\n    props.prevButtonProps?.onClick()\n  }\n}\n\nconst onNext = () => {\n  if (current.value >= total.value - 1) {\n    onFinish()\n  } else {\n    current.value += 1\n  }\n  if (props.nextButtonProps?.onClick) {\n    props.nextButtonProps.onClick()\n  }\n}\n\nconst onFinish = () => {\n  onClose()\n  tourOnFinish()\n}\n\nconst onClose = () => {\n  updateModelValue(false)\n  tourOnClose()\n  emit('close')\n}\n\nconst handleKeydown = (e: KeyboardEvent) => {\n  const target = e.target as HTMLElement | null\n  if (target?.isContentEditable) return\n  const code = getEventCode(e)\n\n  switch (code) {\n    case EVENT_CODE.left:\n      e.preventDefault()\n      current.value > 0 && onPrev()\n      break\n    case EVENT_CODE.right:\n      e.preventDefault()\n      onNext()\n      break\n  }\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', handleKeydown)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', handleKeydown)\n})\n</script>\n"],"mappings":"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"}

package/lib/components/tour/src/step2.js.map

@@ -1 +1 @@
-{"version":3,"file":"step2.js","names":[],"sources":["../../../../../../packages/components/tour/src/step.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"mergedShowClose\"\n    :aria-label=\"t('el.tour.close')\"\n    :class=\"ns.e('closebtn')\"\n    type=\"button\"\n    @click=\"onClose\"\n  >\n    <el-icon :class=\"ns.e('close')\">\n      <component :is=\"mergedCloseIcon\" />\n    </el-icon>\n  </button>\n  <header :class=\"[ns.e('header'), { 'show-close': showClose }]\">\n    <slot name=\"header\">\n      <span role=\"heading\" :class=\"ns.e('title')\">\n        {{ title }}\n      </span>\n    </slot>\n  </header>\n  <div :class=\"ns.e('body')\">\n    <slot>\n      <span>{{ description }}</span>\n    </slot>\n  </div>\n  <footer :class=\"ns.e('footer')\">\n    <div :class=\"ns.b('indicators')\">\n      <component\n        :is=\"tourSlots.indicators\"\n        v-if=\"tourSlots.indicators\"\n        :current=\"current\"\n        :total=\"total\"\n      />\n      <template v-else>\n        <span\n          v-for=\"(item, index) in total\"\n          :key=\"item\"\n          :class=\"[ns.b('indicator'), ns.is('active', index === current)]\"\n        />\n      </template>\n    </div>\n    <div :class=\"ns.b('buttons')\">\n      <el-button\n        v-if=\"current > 0\"\n        size=\"small\"\n        :type=\"mergedType\"\n        v-bind=\"filterButtonProps(prevButtonProps)\"\n        @click=\"onPrev\"\n      >\n        {{ prevButtonProps?.children ?? t('el.tour.previous') }}\n      </el-button>\n      <el-button\n        v-if=\"current <= total - 1\"\n        size=\"small\"\n        :type=\"mergedType === 'primary' ? 'default' : 'primary'\"\n        v-bind=\"filterButtonProps(nextButtonProps)\"\n        @click=\"onNext\"\n      >\n        {{\n          nextButtonProps?.children ??\n          (current === total - 1 ? t('el.tour.finish') : t('el.tour.next'))\n        }}\n      </el-button>\n    </div>\n  </footer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, onMounted, watch } from 'vue'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { omit } from 'lodash-unified'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CloseComponents, getEventCode } from '@element-plus/utils'\nimport { useLocale } from '@element-plus/hooks'\nimport { tourStepEmits } from './step'\nimport { tourKey } from './helper'\n\nimport type { TourBtnProps } from './types'\nimport type { TourStepProps } from './step'\n\ndefineOptions({\n  name: 'ElTourStep',\n})\n\nconst props = withDefaults(defineProps<TourStepProps>(), {\n  showClose: undefined,\n  showArrow: undefined,\n  placement: 'bottom',\n  mask: undefined,\n  scrollIntoViewOptions: undefined,\n})\nconst emit = defineEmits(tourStepEmits)\n\nconst { Close } = CloseComponents\n\nconst { t } = useLocale()\n\nconst {\n  currentStep,\n  current,\n  total,\n  showClose,\n  closeIcon,\n  mergedType,\n  ns,\n  slots: tourSlots,\n  updateModelValue,\n  onClose: tourOnClose,\n  onFinish: tourOnFinish,\n  onChange,\n} = inject(tourKey)!\n\nwatch(\n  props,\n  (val) => {\n    currentStep.value = val\n  },\n  {\n    immediate: true,\n  }\n)\n\nconst mergedShowClose = computed(() => props.showClose ?? showClose.value)\nconst mergedCloseIcon = computed(\n  () => props.closeIcon ?? closeIcon.value ?? Close\n)\n\nconst filterButtonProps = (btnProps?: TourBtnProps) => {\n  if (!btnProps) return\n  return omit(btnProps, ['children', 'onClick'])\n}\n\nconst onPrev = () => {\n  current.value -= 1\n  if (props.prevButtonProps?.onClick) {\n    props.prevButtonProps?.onClick()\n  }\n  onChange()\n}\n\nconst onNext = () => {\n  if (current.value >= total.value - 1) {\n    onFinish()\n  } else {\n    current.value += 1\n  }\n  if (props.nextButtonProps?.onClick) {\n    props.nextButtonProps.onClick()\n  }\n  onChange()\n}\n\nconst onFinish = () => {\n  onClose()\n  tourOnFinish()\n}\n\nconst onClose = () => {\n  updateModelValue(false)\n  tourOnClose()\n  emit('close')\n}\n\nconst handleKeydown = (e: KeyboardEvent) => {\n  const target = e.target as HTMLElement | null\n  if (target?.isContentEditable) return\n  const code = getEventCode(e)\n\n  switch (code) {\n    case EVENT_CODE.left:\n      e.preventDefault()\n      current.value > 0 && onPrev()\n      break\n    case EVENT_CODE.right:\n      e.preventDefault()\n      onNext()\n      break\n  }\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', handleKeydown)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', handleKeydown)\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"step2.js","names":[],"sources":["../../../../../../packages/components/tour/src/step.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"mergedShowClose\"\n    :aria-label=\"t('el.tour.close')\"\n    :class=\"ns.e('closebtn')\"\n    type=\"button\"\n    @click=\"onClose\"\n  >\n    <el-icon :class=\"ns.e('close')\">\n      <component :is=\"mergedCloseIcon\" />\n    </el-icon>\n  </button>\n  <header :class=\"[ns.e('header'), { 'show-close': showClose }]\">\n    <slot name=\"header\">\n      <span role=\"heading\" :class=\"ns.e('title')\">\n        {{ title }}\n      </span>\n    </slot>\n  </header>\n  <div :class=\"ns.e('body')\">\n    <slot>\n      <span>{{ description }}</span>\n    </slot>\n  </div>\n  <footer :class=\"ns.e('footer')\">\n    <div :class=\"ns.b('indicators')\">\n      <component\n        :is=\"tourSlots.indicators\"\n        v-if=\"tourSlots.indicators\"\n        :current=\"current\"\n        :total=\"total\"\n      />\n      <template v-else>\n        <span\n          v-for=\"(item, index) in total\"\n          :key=\"item\"\n          :class=\"[ns.b('indicator'), ns.is('active', index === current)]\"\n        />\n      </template>\n    </div>\n    <div :class=\"ns.b('buttons')\">\n      <el-button\n        v-if=\"current > 0\"\n        size=\"small\"\n        :type=\"mergedType\"\n        v-bind=\"filterButtonProps(prevButtonProps)\"\n        @click=\"onPrev\"\n      >\n        {{ prevButtonProps?.children ?? t('el.tour.previous') }}\n      </el-button>\n      <el-button\n        v-if=\"current <= total - 1\"\n        size=\"small\"\n        :type=\"mergedType === 'primary' ? 'default' : 'primary'\"\n        v-bind=\"filterButtonProps(nextButtonProps)\"\n        @click=\"onNext\"\n      >\n        {{\n          nextButtonProps?.children ??\n          (current === total - 1 ? t('el.tour.finish') : t('el.tour.next'))\n        }}\n      </el-button>\n    </div>\n  </footer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, onMounted, watch } from 'vue'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { omit } from 'lodash-unified'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CloseComponents, getEventCode } from '@element-plus/utils'\nimport { useLocale } from '@element-plus/hooks'\nimport { tourStepEmits } from './step'\nimport { tourKey } from './helper'\n\nimport type { TourBtnProps } from './types'\nimport type { TourStepProps } from './step'\n\ndefineOptions({\n  name: 'ElTourStep',\n})\n\nconst props = withDefaults(defineProps<TourStepProps>(), {\n  showClose: undefined,\n  showArrow: undefined,\n  placement: 'bottom',\n  mask: undefined,\n  scrollIntoViewOptions: undefined,\n})\nconst emit = defineEmits(tourStepEmits)\n\nconst { Close } = CloseComponents\n\nconst { t } = useLocale()\n\nconst {\n  currentStep,\n  current,\n  total,\n  showClose,\n  closeIcon,\n  mergedType,\n  ns,\n  slots: tourSlots,\n  updateModelValue,\n  onClose: tourOnClose,\n  onFinish: tourOnFinish,\n} = inject(tourKey)!\n\nwatch(\n  props,\n  (val) => {\n    currentStep.value = val\n  },\n  {\n    immediate: true,\n  }\n)\n\nconst mergedShowClose = computed(() => props.showClose ?? showClose.value)\nconst mergedCloseIcon = computed(\n  () => props.closeIcon ?? closeIcon.value ?? Close\n)\n\nconst filterButtonProps = (btnProps?: TourBtnProps) => {\n  if (!btnProps) return\n  return omit(btnProps, ['children', 'onClick'])\n}\n\nconst onPrev = () => {\n  current.value -= 1\n  if (props.prevButtonProps?.onClick) {\n    props.prevButtonProps?.onClick()\n  }\n}\n\nconst onNext = () => {\n  if (current.value >= total.value - 1) {\n    onFinish()\n  } else {\n    current.value += 1\n  }\n  if (props.nextButtonProps?.onClick) {\n    props.nextButtonProps.onClick()\n  }\n}\n\nconst onFinish = () => {\n  onClose()\n  tourOnFinish()\n}\n\nconst onClose = () => {\n  updateModelValue(false)\n  tourOnClose()\n  emit('close')\n}\n\nconst handleKeydown = (e: KeyboardEvent) => {\n  const target = e.target as HTMLElement | null\n  if (target?.isContentEditable) return\n  const code = getEventCode(e)\n\n  switch (code) {\n    case EVENT_CODE.left:\n      e.preventDefault()\n      current.value > 0 && onPrev()\n      break\n    case EVENT_CODE.right:\n      e.preventDefault()\n      onNext()\n      break\n  }\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', handleKeydown)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', handleKeydown)\n})\n</script>\n"],"mappings":""}

package/lib/components/tour/src/tour.d.ts

@@ -75,7 +75,12 @@ interface TourProps {
  */
 declare const tourProps: {
   modelValue: BooleanConstructor;
-  current: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
+  current: {
+    readonly type: _$vue.PropType<number>;
+    readonly required: false;
+    readonly validator: ((val: unknown) => boolean) | undefined;
+    __epPropKey: true;
+  };
   showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   showClose: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   closeIcon: {

package/lib/components/tour/src/tour.js

@@ -16,10 +16,7 @@ const tourProps = require_runtime.buildProps({
 	/**
 	* @description what is the current step
 	*/
-	current: {
-		type: Number,
-		default: 0
-	},
+	current: { type: Number },
 	/**
 	* @description whether to show the arrow
 	*/

package/lib/components/tour/src/tour.js.map

@@ -1 +1 @@
-{"version":3,"file":"tour.js","names":["buildProps","iconPropType","tourContentProps","definePropType","UPDATE_MODEL_EVENT","isBoolean","isNumber"],"sources":["../../../../../../packages/components/tour/src/tour.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  iconPropType,\n  isBoolean,\n  isNumber,\n} from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { tourContentProps } from './content'\n\nimport type { TourContentProps } from './content'\nimport type { CSSProperties, ExtractPublicPropTypes } from 'vue'\nimport type { IconPropType } from '@element-plus/utils'\nimport type Tour from './tour.vue'\nimport type { TourGap, TourMask } from './types'\n\nexport interface TourProps {\n  /**\n   * @description open tour\n   */\n  modelValue?: boolean\n  /**\n   * @description what is the current step\n   */\n  current?: number\n  /**\n   * @description whether to show the arrow\n   */\n  showArrow?: boolean\n  /**\n   * @description whether to show a close button\n   */\n  showClose?: boolean\n  /**\n   * @description custom close icon\n   */\n  closeIcon?: IconPropType\n  /**\n   * @description position of the guide card relative to the target element\n   */\n  placement?: TourContentProps['placement']\n  /**\n   * @description custom style for content\n   */\n  contentStyle?: CSSProperties\n  /**\n   * @description whether to enable masking, change mask style and fill color by pass custom props\n   */\n  mask?: TourMask\n  /**\n   * @description transparent gap between mask and target\n   */\n  gap?: TourGap\n  /**\n   * @description tour's zIndex\n   */\n  zIndex?: number\n  /**\n   * @description support pass custom scrollIntoView options\n   */\n  scrollIntoViewOptions?: boolean | ScrollIntoViewOptions\n  /**\n   * @description type, affects the background color and text color\n   */\n  type?: 'default' | 'primary'\n  /**\n   * @description which element the TourContent appends to\n   */\n  appendTo?: string | HTMLElement\n  /**\n   * @description whether the Tour can be closed by pressing ESC\n   */\n  closeOnPressEscape?: boolean\n  /**\n   * @description whether the target element can be clickable, when using mask\n   */\n  targetAreaClickable?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TourProps` instead.\n */\nexport const tourProps = buildProps({\n  /**\n   * @description open tour\n   */\n  modelValue: Boolean,\n  /**\n   * @description what is the current step\n   */\n  current: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description whether to show the arrow\n   */\n  showArrow: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether to show a close button\n   */\n  showClose: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description custom close icon\n   */\n  closeIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description position of the guide card relative to the target element\n   */\n  placement: tourContentProps.placement,\n  /**\n   * @description custom style for content\n   */\n  contentStyle: {\n    type: definePropType<CSSProperties>([Object]),\n  },\n  /**\n   * @description whether to enable masking, change mask style and fill color by pass custom props\n   */\n  mask: {\n    type: definePropType<TourMask>([Boolean, Object]),\n    default: true,\n  },\n  /**\n   * @description transparent gap between mask and target\n   */\n  gap: {\n    type: definePropType<TourGap>(Object),\n    default: () => ({\n      offset: 6,\n      radius: 2,\n    }),\n  },\n  /**\n   * @description tour's zIndex\n   */\n  zIndex: {\n    type: Number,\n  },\n  /**\n   * @description support pass custom scrollIntoView options\n   */\n  scrollIntoViewOptions: {\n    type: definePropType<boolean | ScrollIntoViewOptions>([Boolean, Object]),\n    default: () => ({\n      block: 'center',\n    }),\n  },\n  /**\n   * @description type, affects the background color and text color\n   */\n  type: {\n    type: definePropType<'default' | 'primary'>(String),\n  },\n  /**\n   * @description which element the TourContent appends to\n   */\n  appendTo: {\n    type: definePropType<string | HTMLElement>([String, Object]),\n    default: 'body',\n  },\n  /**\n   * @description whether the Tour can be closed by pressing ESC\n   */\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether the target element can be clickable, when using mask\n   */\n  targetAreaClickable: {\n    type: Boolean,\n    default: true,\n  },\n})\n\n/**\n * @deprecated Removed after 3.0.0, Use `TourProps` instead.\n */\nexport type TourPropsPublic = ExtractPublicPropTypes<typeof tourProps>\nexport type TourInstance = InstanceType<typeof Tour> & unknown\n\nexport const tourEmits = {\n  [UPDATE_MODEL_EVENT]: (value: boolean) => isBoolean(value),\n  ['update:current']: (current: number) => isNumber(current),\n  close: (current: number) => isNumber(current),\n  finish: () => true,\n  change: (current: number) => isNumber(current),\n}\nexport type TourEmits = typeof tourEmits\n"],"mappings":";;;;;;;;;;AAkFA,MAAa,YAAYA,gBAAAA,WAAW;;;;CAIlC,YAAY;;;;CAIZ,SAAS;EACP,MAAM;EACN,SAAS;EACV;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;;;;CAID,WAAW,EACT,MAAMC,aAAAA,cACP;;;;CAID,WAAWC,gBAAAA,iBAAiB;;;;CAI5B,cAAc,EACZ,MAAMC,gBAAAA,eAA8B,CAAC,OAAO,CAAC,EAC9C;;;;CAID,MAAM;EACJ,MAAMA,gBAAAA,eAAyB,CAAC,SAAS,OAAO,CAAC;EACjD,SAAS;EACV;;;;CAID,KAAK;EACH,MAAMA,gBAAAA,eAAwB,OAAO;EACrC,gBAAgB;GACd,QAAQ;GACR,QAAQ;GACT;EACF;;;;CAID,QAAQ,EACN,MAAM,QACP;;;;CAID,uBAAuB;EACrB,MAAMA,gBAAAA,eAAgD,CAAC,SAAS,OAAO,CAAC;EACxE,gBAAgB,EACd,OAAO,UACR;EACF;;;;CAID,MAAM,EACJ,MAAMA,gBAAAA,eAAsC,OAAO,EACpD;;;;CAID,UAAU;EACR,MAAMA,gBAAAA,eAAqC,CAAC,QAAQ,OAAO,CAAC;EAC5D,SAAS;EACV;;;;CAID,oBAAoB;EAClB,MAAM;EACN,SAAS;EACV;;;;CAID,qBAAqB;EACnB,MAAM;EACN,SAAS;EACV;CACF,CAAC;AAQF,MAAa,YAAY;EACtBC,cAAAA,sBAAsB,UAAmBC,cAAAA,UAAU,MAAM;EACzD,oBAAoB,YAAoBC,cAAAA,SAAS,QAAQ;CAC1D,QAAQ,YAAoBA,cAAAA,SAAS,QAAQ;CAC7C,cAAc;CACd,SAAS,YAAoBA,cAAAA,SAAS,QAAQ;CAC/C"}
+{"version":3,"file":"tour.js","names":["buildProps","iconPropType","tourContentProps","definePropType","UPDATE_MODEL_EVENT","isBoolean","isNumber"],"sources":["../../../../../../packages/components/tour/src/tour.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  iconPropType,\n  isBoolean,\n  isNumber,\n} from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { tourContentProps } from './content'\n\nimport type { TourContentProps } from './content'\nimport type { CSSProperties, ExtractPublicPropTypes } from 'vue'\nimport type { IconPropType } from '@element-plus/utils'\nimport type Tour from './tour.vue'\nimport type { TourGap, TourMask } from './types'\n\nexport interface TourProps {\n  /**\n   * @description open tour\n   */\n  modelValue?: boolean\n  /**\n   * @description what is the current step\n   */\n  current?: number\n  /**\n   * @description whether to show the arrow\n   */\n  showArrow?: boolean\n  /**\n   * @description whether to show a close button\n   */\n  showClose?: boolean\n  /**\n   * @description custom close icon\n   */\n  closeIcon?: IconPropType\n  /**\n   * @description position of the guide card relative to the target element\n   */\n  placement?: TourContentProps['placement']\n  /**\n   * @description custom style for content\n   */\n  contentStyle?: CSSProperties\n  /**\n   * @description whether to enable masking, change mask style and fill color by pass custom props\n   */\n  mask?: TourMask\n  /**\n   * @description transparent gap between mask and target\n   */\n  gap?: TourGap\n  /**\n   * @description tour's zIndex\n   */\n  zIndex?: number\n  /**\n   * @description support pass custom scrollIntoView options\n   */\n  scrollIntoViewOptions?: boolean | ScrollIntoViewOptions\n  /**\n   * @description type, affects the background color and text color\n   */\n  type?: 'default' | 'primary'\n  /**\n   * @description which element the TourContent appends to\n   */\n  appendTo?: string | HTMLElement\n  /**\n   * @description whether the Tour can be closed by pressing ESC\n   */\n  closeOnPressEscape?: boolean\n  /**\n   * @description whether the target element can be clickable, when using mask\n   */\n  targetAreaClickable?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TourProps` instead.\n */\nexport const tourProps = buildProps({\n  /**\n   * @description open tour\n   */\n  modelValue: Boolean,\n  /**\n   * @description what is the current step\n   */\n  current: {\n    type: Number,\n  },\n  /**\n   * @description whether to show the arrow\n   */\n  showArrow: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether to show a close button\n   */\n  showClose: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description custom close icon\n   */\n  closeIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description position of the guide card relative to the target element\n   */\n  placement: tourContentProps.placement,\n  /**\n   * @description custom style for content\n   */\n  contentStyle: {\n    type: definePropType<CSSProperties>([Object]),\n  },\n  /**\n   * @description whether to enable masking, change mask style and fill color by pass custom props\n   */\n  mask: {\n    type: definePropType<TourMask>([Boolean, Object]),\n    default: true,\n  },\n  /**\n   * @description transparent gap between mask and target\n   */\n  gap: {\n    type: definePropType<TourGap>(Object),\n    default: () => ({\n      offset: 6,\n      radius: 2,\n    }),\n  },\n  /**\n   * @description tour's zIndex\n   */\n  zIndex: {\n    type: Number,\n  },\n  /**\n   * @description support pass custom scrollIntoView options\n   */\n  scrollIntoViewOptions: {\n    type: definePropType<boolean | ScrollIntoViewOptions>([Boolean, Object]),\n    default: () => ({\n      block: 'center',\n    }),\n  },\n  /**\n   * @description type, affects the background color and text color\n   */\n  type: {\n    type: definePropType<'default' | 'primary'>(String),\n  },\n  /**\n   * @description which element the TourContent appends to\n   */\n  appendTo: {\n    type: definePropType<string | HTMLElement>([String, Object]),\n    default: 'body',\n  },\n  /**\n   * @description whether the Tour can be closed by pressing ESC\n   */\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether the target element can be clickable, when using mask\n   */\n  targetAreaClickable: {\n    type: Boolean,\n    default: true,\n  },\n})\n\n/**\n * @deprecated Removed after 3.0.0, Use `TourProps` instead.\n */\nexport type TourPropsPublic = ExtractPublicPropTypes<typeof tourProps>\nexport type TourInstance = InstanceType<typeof Tour> & unknown\n\nexport const tourEmits = {\n  [UPDATE_MODEL_EVENT]: (value: boolean) => isBoolean(value),\n  ['update:current']: (current: number) => isNumber(current),\n  close: (current: number) => isNumber(current),\n  finish: () => true,\n  change: (current: number) => isNumber(current),\n}\nexport type TourEmits = typeof tourEmits\n"],"mappings":";;;;;;;;;;AAkFA,MAAa,YAAYA,gBAAAA,WAAW;;;;CAIlC,YAAY;;;;CAIZ,SAAS,EACP,MAAM,QACP;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;;;;CAID,WAAW,EACT,MAAMC,aAAAA,cACP;;;;CAID,WAAWC,gBAAAA,iBAAiB;;;;CAI5B,cAAc,EACZ,MAAMC,gBAAAA,eAA8B,CAAC,OAAO,CAAC,EAC9C;;;;CAID,MAAM;EACJ,MAAMA,gBAAAA,eAAyB,CAAC,SAAS,OAAO,CAAC;EACjD,SAAS;EACV;;;;CAID,KAAK;EACH,MAAMA,gBAAAA,eAAwB,OAAO;EACrC,gBAAgB;GACd,QAAQ;GACR,QAAQ;GACT;EACF;;;;CAID,QAAQ,EACN,MAAM,QACP;;;;CAID,uBAAuB;EACrB,MAAMA,gBAAAA,eAAgD,CAAC,SAAS,OAAO,CAAC;EACxE,gBAAgB,EACd,OAAO,UACR;EACF;;;;CAID,MAAM,EACJ,MAAMA,gBAAAA,eAAsC,OAAO,EACpD;;;;CAID,UAAU;EACR,MAAMA,gBAAAA,eAAqC,CAAC,QAAQ,OAAO,CAAC;EAC5D,SAAS;EACV;;;;CAID,oBAAoB;EAClB,MAAM;EACN,SAAS;EACV;;;;CAID,qBAAqB;EACnB,MAAM;EACN,SAAS;EACV;CACF,CAAC;AAQF,MAAa,YAAY;EACtBC,cAAAA,sBAAsB,UAAmBC,cAAAA,UAAU,MAAM;EACzD,oBAAoB,YAAoBC,cAAAA,SAAS,QAAQ;CAC1D,QAAQ,YAAoBA,cAAAA,SAAS,QAAQ;CAC7C,cAAc;CACd,SAAS,YAAoBA,cAAAA,SAAS,QAAQ;CAC/C"}

package/lib/components/tour/src/tour.vue.d.ts

@@ -15,26 +15,25 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: _$vue.DefineComponent<TourProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: boolean) => void;
-  change: (current: number) => void;
   close: (current: number) => void;
   finish: () => void;
+  change: (current: number) => void;
   "update:current": (current: number) => void;
 }, string, _$vue.PublicProps, Readonly<TourProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-  onChange?: ((current: number) => any) | undefined;
   onClose?: ((current: number) => any) | undefined;
   onFinish?: (() => any) | undefined;
+  onChange?: ((current: number) => any) | undefined;
   "onUpdate:current"?: ((current: number) => any) | undefined;
 }>, {
-  appendTo: string | HTMLElement;
+  closeOnPressEscape: boolean;
   placement: _$_floating_ui_dom0.Placement;
   showArrow: boolean;
+  appendTo: string | HTMLElement;
   gap: TourGap;
   mask: TourMask;
-  closeOnPressEscape: boolean;
   showClose: boolean;
   scrollIntoViewOptions: boolean | ScrollIntoViewOptions;
-  current: number;
   targetAreaClickable: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/lib/components/tour/src/tour.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,6 @@ const require_helper = require("./helper.js");
 const require_mask = require("./mask2.js");
 const require_content = require("./content2.js");
 const require_steps = require("./steps.js");
-let _vueuse_core = require("@vueuse/core");
 let vue = require("vue");
 //#region ../../packages/components/tour/src/tour.vue?vue&type=script&setup=true&lang.ts
 var tour_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -23,7 +22,18 @@ var tour_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.d
 		const ns = require_index.useNamespace("tour");
 		const total = (0, vue.ref)(0);
 		const currentStep = (0, vue.ref)();
-		const current = (0, _vueuse_core.useVModel)(props, "current", emit, { passive: true });
+		const isControlled = (0, vue.computed)(() => !require_types.isUndefined(props.current));
+		const innerCurrent = (0, vue.ref)(props.current ?? 0);
+		const current = (0, vue.computed)({
+			get() {
+				return require_types.isUndefined(props.current) ? innerCurrent.value : props.current;
+			},
+			set(newValue) {
+				if ((isControlled.value ? props.current : innerCurrent.value) === newValue) return;
+				if (!isControlled.value) innerCurrent.value = newValue;
+				emit("update:current", newValue);
+			}
+		});
 		const currentTarget = (0, vue.computed)(() => currentStep.value?.target);
 		const kls = (0, vue.computed)(() => [ns.b(), mergedType.value === "primary" ? ns.m("primary") : ""]);
 		const mergedPlacement = (0, vue.computed)(() => currentStep.value?.placement || props.placement);
@@ -38,8 +48,13 @@ var tour_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.d
 		const nowZIndex = nextZIndex();
 		const mergedZIndex = (0, vue.computed)(() => props.zIndex ?? nowZIndex);
 		const { mergedPosInfo: pos, triggerTarget } = require_helper.useTarget(currentTarget, (0, vue.toRef)(props, "modelValue"), (0, vue.toRef)(props, "gap"), mergedMask, mergedScrollIntoViewOptions);
+		(0, vue.watch)(() => props.current, (val) => !require_types.isUndefined(val) && (innerCurrent.value = val));
+		(0, vue.watch)(current, (newCurrent, oldCurrent) => {
+			if (!props.modelValue || newCurrent === oldCurrent) return;
+			emit(require_event.CHANGE_EVENT, newCurrent);
+		}, { flush: "post" });
 		(0, vue.watch)(() => props.modelValue, (val) => {
-			if (!val) current.value = 0;
+			if (!val && current.value !== 0) current.value = 0;
 		});
 		const onEscClose = () => {
 			if (props.closeOnPressEscape) {
@@ -68,9 +83,6 @@ var tour_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.d
 			},
 			onFinish() {
 				emit("finish");
-			},
-			onChange() {
-				emit(require_event.CHANGE_EVENT, current.value);
 			}
 		});
 		return (_ctx, _cache) => {
@@ -90,7 +102,7 @@ var tour_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.d
 					"z-index",
 					"target-area-clickable"
 				]), __props.modelValue ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_content.default, {
-					key: (0, vue.unref)(current),
+					key: current.value,
 					reference: (0, vue.unref)(triggerTarget),
 					placement: mergedPlacement.value,
 					"show-arrow": mergedShowArrow.value,
@@ -99,7 +111,7 @@ var tour_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.d
 					onClose: onEscClose
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_steps.default), {
-						current: (0, vue.unref)(current),
+						current: current.value,
 						onUpdateTotal
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),

package/lib/components/tour/src/tour.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"tour.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../../../packages/components/tour/src/tour.vue"],"sourcesContent":["<template>\n  <teleport :to=\"appendTo\">\n    <div :class=\"kls\" v-bind=\"$attrs\">\n      <el-tour-mask\n        :visible=\"mergedShowMask\"\n        :fill=\"mergedMaskStyle?.color\"\n        :style=\"mergedMaskStyle?.style\"\n        :pos=\"pos\"\n        :z-index=\"mergedZIndex\"\n        :target-area-clickable=\"targetAreaClickable\"\n      />\n      <el-tour-content\n        v-if=\"modelValue\"\n        :key=\"current\"\n        :reference=\"triggerTarget\"\n        :placement=\"mergedPlacement\"\n        :show-arrow=\"mergedShowArrow\"\n        :z-index=\"mergedZIndex\"\n        :style=\"mergedContentStyle\"\n        @close=\"onEscClose\"\n      >\n        <el-tour-steps :current=\"current\" @update-total=\"onUpdateTotal\">\n          <slot />\n        </el-tour-steps>\n      </el-tour-content>\n    </div>\n  </teleport>\n  <!-- just for IDE -->\n  <slot v-if=\"false\" name=\"indicators\" :current=\"current + 1\" :total=\"total\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, toRef, useSlots, watch } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { useNamespace, useZIndex } from '@element-plus/hooks'\nimport { isBoolean } from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport ElTourMask from './mask.vue'\nimport ElTourContent from './content.vue'\nimport ElTourSteps from './steps'\nimport { tourEmits } from './tour'\nimport { tourKey, useTarget } from './helper'\n\nimport type { TourStepProps } from './step'\nimport type { TourProps } from './tour'\n\ndefineOptions({\n  name: 'ElTour',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TourProps>(), {\n  current: 0,\n  showArrow: true,\n  showClose: true,\n  placement: 'bottom',\n  mask: true,\n  gap: () => ({ offset: 6, radius: 2 }),\n  scrollIntoViewOptions: () => ({ block: 'center' }),\n  appendTo: 'body',\n  closeOnPressEscape: true,\n  targetAreaClickable: true,\n})\nconst emit = defineEmits(tourEmits)\n\nconst ns = useNamespace('tour')\nconst total = ref(0)\nconst currentStep = ref<TourStepProps>()\n\nconst current = useVModel(props, 'current', emit, {\n  passive: true,\n})\n\nconst currentTarget = computed(() => currentStep.value?.target)\n\nconst kls = computed(() => [\n  ns.b(),\n  mergedType.value === 'primary' ? ns.m('primary') : '',\n])\n\nconst mergedPlacement = computed(\n  () => currentStep.value?.placement || props.placement\n)\n\nconst mergedContentStyle = computed(\n  () => currentStep.value?.contentStyle ?? props.contentStyle\n)\n\nconst mergedMask = computed(() => currentStep.value?.mask ?? props.mask)\nconst mergedShowMask = computed(() => !!mergedMask.value && props.modelValue)\nconst mergedMaskStyle = computed(() =>\n  isBoolean(mergedMask.value) ? undefined : mergedMask.value\n)\n\nconst mergedShowArrow = computed(\n  () =>\n    !!currentTarget.value && (currentStep.value?.showArrow ?? props.showArrow)\n)\n\nconst mergedScrollIntoViewOptions = computed(\n  () => currentStep.value?.scrollIntoViewOptions ?? props.scrollIntoViewOptions\n)\nconst mergedType = computed(() => currentStep.value?.type ?? props.type)\n\nconst { nextZIndex } = useZIndex()\nconst nowZIndex = nextZIndex()\nconst mergedZIndex = computed(() => props.zIndex ?? nowZIndex)\n\nconst { mergedPosInfo: pos, triggerTarget } = useTarget(\n  currentTarget,\n  toRef(props, 'modelValue'),\n  toRef(props, 'gap'),\n  mergedMask,\n  mergedScrollIntoViewOptions\n)\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    if (!val) {\n      current.value = 0\n    }\n  }\n)\n\nconst onEscClose = () => {\n  if (props.closeOnPressEscape) {\n    emit(UPDATE_MODEL_EVENT, false)\n    emit('close', current.value)\n  }\n}\n\nconst onUpdateTotal = (val: number) => {\n  total.value = val\n}\n\nconst slots = useSlots()\n\nprovide(tourKey, {\n  currentStep,\n  current,\n  total,\n  showClose: toRef(props, 'showClose'),\n  closeIcon: toRef(props, 'closeIcon'),\n  mergedType,\n  ns,\n  slots,\n  updateModelValue(modelValue) {\n    emit(UPDATE_MODEL_EVENT, modelValue)\n  },\n  onClose() {\n    emit('close', current.value)\n  },\n  onFinish() {\n    emit('finish')\n  },\n  onChange() {\n    emit(CHANGE_EVENT, current.value)\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAmDA,MAAM,QAAQ;EAYd,MAAM,OAAO;EAEb,MAAM,KAAK,cAAA,aAAa,OAAM;EAC9B,MAAM,SAAA,GAAA,IAAA,KAAY,EAAC;EACnB,MAAM,eAAA,GAAA,IAAA,MAAiC;EAEvC,MAAM,WAAA,GAAA,aAAA,WAAoB,OAAO,WAAW,MAAM,EAChD,SAAS,MACV,CAAA;EAED,MAAM,iBAAA,GAAA,IAAA,gBAA+B,YAAY,OAAO,OAAM;EAE9D,MAAM,OAAA,GAAA,IAAA,gBAAqB,CACzB,GAAG,GAAG,EACN,WAAW,UAAU,YAAY,GAAG,EAAE,UAAU,GAAG,GACpD,CAAA;EAED,MAAM,mBAAA,GAAA,IAAA,gBACE,YAAY,OAAO,aAAa,MAAM,UAC9C;EAEA,MAAM,sBAAA,GAAA,IAAA,gBACE,YAAY,OAAO,gBAAgB,MAAM,aACjD;EAEA,MAAM,cAAA,GAAA,IAAA,gBAA4B,YAAY,OAAO,QAAQ,MAAM,KAAI;EACvE,MAAM,kBAAA,GAAA,IAAA,gBAAgC,CAAC,CAAC,WAAW,SAAS,MAAM,WAAU;EAC5E,MAAM,mBAAA,GAAA,IAAA,gBACJ,cAAA,UAAU,WAAW,MAAM,GAAG,KAAA,IAAY,WAAW,MACvD;EAEA,MAAM,mBAAA,GAAA,IAAA,gBAEF,CAAC,CAAC,cAAc,UAAU,YAAY,OAAO,aAAa,MAAM,WACpE;EAEA,MAAM,+BAAA,GAAA,IAAA,gBACE,YAAY,OAAO,yBAAyB,MAAM,sBAC1D;EACA,MAAM,cAAA,GAAA,IAAA,gBAA4B,YAAY,OAAO,QAAQ,MAAM,KAAI;EAEvE,MAAM,EAAE,eAAe,gBAAA,WAAU;EACjC,MAAM,YAAY,YAAW;EAC7B,MAAM,gBAAA,GAAA,IAAA,gBAA8B,MAAM,UAAU,UAAS;EAE7D,MAAM,EAAE,eAAe,KAAK,kBAAkB,eAAA,UAC5C,gBAAA,GAAA,IAAA,OACM,OAAO,aAAa,GAAA,GAAA,IAAA,OACpB,OAAO,MAAM,EACnB,YACA,4BACF;EAEA,CAAA,GAAA,IAAA,aACQ,MAAM,aACX,QAAQ;GACP,IAAI,CAAC,KACH,QAAQ,QAAQ;IAGtB;EAEA,MAAM,mBAAmB;GACvB,IAAI,MAAM,oBAAoB;IAC5B,KAAK,cAAA,oBAAoB,MAAK;IAC9B,KAAK,SAAS,QAAQ,MAAK;;;EAI/B,MAAM,iBAAiB,QAAgB;GACrC,MAAM,QAAQ;;EAGhB,MAAM,SAAA,GAAA,IAAA,WAAiB;EAEvB,CAAA,GAAA,IAAA,SAAQ,eAAA,SAAS;GACf;GACA;GACA;GACA,YAAA,GAAA,IAAA,OAAiB,OAAO,YAAY;GACpC,YAAA,GAAA,IAAA,OAAiB,OAAO,YAAY;GACpC;GACA;GACA;GACA,iBAAiB,YAAY;IAC3B,KAAK,cAAA,oBAAoB,WAAU;;GAErC,UAAU;IACR,KAAK,SAAS,QAAQ,MAAK;;GAE7B,WAAW;IACT,KAAK,SAAQ;;GAEf,WAAW;IACT,KAAK,cAAA,cAAc,QAAQ,MAAK;;GAEnC,CAAA;;;gDArIY,IAAA,UAAA,EAzBA,IAAI,QAAA,UAAQ,EAAA,EAAA,GAAA,IAAA,oBAwBf,QAAA,GAAA,IAAA,YAAA,EAvBA,OAAO,IAAA,OAAG,EAAUA,KAAAA,OAAM,EAAA,EAAA,GAAA,IAAA,aAQ5B,aAAA,SAAA;KANC,SAAS,eAAA;KACT,MAAM,gBAAA,OAAiB;KACvB,QAAA,GAAA,IAAA,gBAAO,gBAAA,OAAiB,MAAK;KAC7B,MAAA,GAAA,IAAA,OAAK,IAAG;KACR,WAAS,aAAA;KACT,yBAAuB,QAAA;;;;;;;;QAGlB,QAAA,eAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,aAYU,gBAAA,SAAA;KAXf,MAAA,GAAA,IAAA,OAAK,QAAO;KACZ,YAAA,GAAA,IAAA,OAAW,cAAa;KACxB,WAAW,gBAAA;KACX,cAAY,gBAAA;KACZ,WAAS,aAAA;KACT,QAAA,GAAA,IAAA,gBAAO,mBAAA,MAAkB;KACzB,SAAO;;qCAIQ,EAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OAAA,cAAA,QAAA,EAAA;MAFA,UAAA,GAAA,IAAA,OAAS,QAAO;MAAiB;;sCACvC,EAAA,GAAA,IAAA,YAAA,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;;;;gCAKhB,iBAAqB"}
+{"version":3,"file":"tour.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../../../packages/components/tour/src/tour.vue"],"sourcesContent":["<template>\n  <teleport :to=\"appendTo\">\n    <div :class=\"kls\" v-bind=\"$attrs\">\n      <el-tour-mask\n        :visible=\"mergedShowMask\"\n        :fill=\"mergedMaskStyle?.color\"\n        :style=\"mergedMaskStyle?.style\"\n        :pos=\"pos\"\n        :z-index=\"mergedZIndex\"\n        :target-area-clickable=\"targetAreaClickable\"\n      />\n      <el-tour-content\n        v-if=\"modelValue\"\n        :key=\"current\"\n        :reference=\"triggerTarget\"\n        :placement=\"mergedPlacement\"\n        :show-arrow=\"mergedShowArrow\"\n        :z-index=\"mergedZIndex\"\n        :style=\"mergedContentStyle\"\n        @close=\"onEscClose\"\n      >\n        <el-tour-steps :current=\"current\" @update-total=\"onUpdateTotal\">\n          <slot />\n        </el-tour-steps>\n      </el-tour-content>\n    </div>\n  </teleport>\n  <!-- just for IDE -->\n  <slot v-if=\"false\" name=\"indicators\" :current=\"current + 1\" :total=\"total\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, toRef, useSlots, watch } from 'vue'\nimport { useNamespace, useZIndex } from '@element-plus/hooks'\nimport { isBoolean, isUndefined } from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport ElTourMask from './mask.vue'\nimport ElTourContent from './content.vue'\nimport ElTourSteps from './steps'\nimport { tourEmits } from './tour'\nimport { tourKey, useTarget } from './helper'\n\nimport type { TourStepProps } from './step'\nimport type { TourProps } from './tour'\n\ndefineOptions({\n  name: 'ElTour',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TourProps>(), {\n  showArrow: true,\n  showClose: true,\n  placement: 'bottom',\n  mask: true,\n  gap: () => ({ offset: 6, radius: 2 }),\n  scrollIntoViewOptions: () => ({ block: 'center' }),\n  appendTo: 'body',\n  closeOnPressEscape: true,\n  targetAreaClickable: true,\n})\nconst emit = defineEmits(tourEmits)\n\nconst ns = useNamespace('tour')\nconst total = ref(0)\nconst currentStep = ref<TourStepProps>()\nconst isControlled = computed(() => !isUndefined(props.current))\nconst innerCurrent = ref(props.current ?? 0)\n\nconst current = computed<number>({\n  get() {\n    return isUndefined(props.current) ? innerCurrent.value : props.current\n  },\n  set(newValue) {\n    const oldValue = isControlled.value ? props.current : innerCurrent.value\n    if (oldValue === newValue) return\n\n    if (!isControlled.value) {\n      innerCurrent.value = newValue\n    }\n\n    emit('update:current', newValue)\n  },\n})\n\nconst currentTarget = computed(() => currentStep.value?.target)\n\nconst kls = computed(() => [\n  ns.b(),\n  mergedType.value === 'primary' ? ns.m('primary') : '',\n])\n\nconst mergedPlacement = computed(\n  () => currentStep.value?.placement || props.placement\n)\n\nconst mergedContentStyle = computed(\n  () => currentStep.value?.contentStyle ?? props.contentStyle\n)\n\nconst mergedMask = computed(() => currentStep.value?.mask ?? props.mask)\nconst mergedShowMask = computed(() => !!mergedMask.value && props.modelValue)\nconst mergedMaskStyle = computed(() =>\n  isBoolean(mergedMask.value) ? undefined : mergedMask.value\n)\n\nconst mergedShowArrow = computed(\n  () =>\n    !!currentTarget.value && (currentStep.value?.showArrow ?? props.showArrow)\n)\n\nconst mergedScrollIntoViewOptions = computed(\n  () => currentStep.value?.scrollIntoViewOptions ?? props.scrollIntoViewOptions\n)\nconst mergedType = computed(() => currentStep.value?.type ?? props.type)\n\nconst { nextZIndex } = useZIndex()\nconst nowZIndex = nextZIndex()\nconst mergedZIndex = computed(() => props.zIndex ?? nowZIndex)\n\nconst { mergedPosInfo: pos, triggerTarget } = useTarget(\n  currentTarget,\n  toRef(props, 'modelValue'),\n  toRef(props, 'gap'),\n  mergedMask,\n  mergedScrollIntoViewOptions\n)\n\nwatch(\n  () => props.current,\n  (val) => !isUndefined(val) && (innerCurrent.value = val)\n)\n\nwatch(\n  current,\n  (newCurrent, oldCurrent) => {\n    if (!props.modelValue || newCurrent === oldCurrent) return\n    emit(CHANGE_EVENT, newCurrent)\n  },\n  { flush: 'post' }\n)\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    if (!val && current.value !== 0) {\n      current.value = 0\n    }\n  }\n)\n\nconst onEscClose = () => {\n  if (props.closeOnPressEscape) {\n    emit(UPDATE_MODEL_EVENT, false)\n    emit('close', current.value)\n  }\n}\n\nconst onUpdateTotal = (val: number) => {\n  total.value = val\n}\n\nconst slots = useSlots()\n\nprovide(tourKey, {\n  currentStep,\n  current,\n  total,\n  showClose: toRef(props, 'showClose'),\n  closeIcon: toRef(props, 'closeIcon'),\n  mergedType,\n  ns,\n  slots,\n  updateModelValue(modelValue) {\n    emit(UPDATE_MODEL_EVENT, modelValue)\n  },\n  onClose() {\n    emit('close', current.value)\n  },\n  onFinish() {\n    emit('finish')\n  },\n})\n</script>\n"],"mappings":"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"}

package/lib/components/tour/src/tour2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tour2.js","names":[],"sources":["../../../../../../packages/components/tour/src/tour.vue"],"sourcesContent":["<template>\n  <teleport :to=\"appendTo\">\n    <div :class=\"kls\" v-bind=\"$attrs\">\n      <el-tour-mask\n        :visible=\"mergedShowMask\"\n        :fill=\"mergedMaskStyle?.color\"\n        :style=\"mergedMaskStyle?.style\"\n        :pos=\"pos\"\n        :z-index=\"mergedZIndex\"\n        :target-area-clickable=\"targetAreaClickable\"\n      />\n      <el-tour-content\n        v-if=\"modelValue\"\n        :key=\"current\"\n        :reference=\"triggerTarget\"\n        :placement=\"mergedPlacement\"\n        :show-arrow=\"mergedShowArrow\"\n        :z-index=\"mergedZIndex\"\n        :style=\"mergedContentStyle\"\n        @close=\"onEscClose\"\n      >\n        <el-tour-steps :current=\"current\" @update-total=\"onUpdateTotal\">\n          <slot />\n        </el-tour-steps>\n      </el-tour-content>\n    </div>\n  </teleport>\n  <!-- just for IDE -->\n  <slot v-if=\"false\" name=\"indicators\" :current=\"current + 1\" :total=\"total\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, toRef, useSlots, watch } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { useNamespace, useZIndex } from '@element-plus/hooks'\nimport { isBoolean } from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport ElTourMask from './mask.vue'\nimport ElTourContent from './content.vue'\nimport ElTourSteps from './steps'\nimport { tourEmits } from './tour'\nimport { tourKey, useTarget } from './helper'\n\nimport type { TourStepProps } from './step'\nimport type { TourProps } from './tour'\n\ndefineOptions({\n  name: 'ElTour',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TourProps>(), {\n  current: 0,\n  showArrow: true,\n  showClose: true,\n  placement: 'bottom',\n  mask: true,\n  gap: () => ({ offset: 6, radius: 2 }),\n  scrollIntoViewOptions: () => ({ block: 'center' }),\n  appendTo: 'body',\n  closeOnPressEscape: true,\n  targetAreaClickable: true,\n})\nconst emit = defineEmits(tourEmits)\n\nconst ns = useNamespace('tour')\nconst total = ref(0)\nconst currentStep = ref<TourStepProps>()\n\nconst current = useVModel(props, 'current', emit, {\n  passive: true,\n})\n\nconst currentTarget = computed(() => currentStep.value?.target)\n\nconst kls = computed(() => [\n  ns.b(),\n  mergedType.value === 'primary' ? ns.m('primary') : '',\n])\n\nconst mergedPlacement = computed(\n  () => currentStep.value?.placement || props.placement\n)\n\nconst mergedContentStyle = computed(\n  () => currentStep.value?.contentStyle ?? props.contentStyle\n)\n\nconst mergedMask = computed(() => currentStep.value?.mask ?? props.mask)\nconst mergedShowMask = computed(() => !!mergedMask.value && props.modelValue)\nconst mergedMaskStyle = computed(() =>\n  isBoolean(mergedMask.value) ? undefined : mergedMask.value\n)\n\nconst mergedShowArrow = computed(\n  () =>\n    !!currentTarget.value && (currentStep.value?.showArrow ?? props.showArrow)\n)\n\nconst mergedScrollIntoViewOptions = computed(\n  () => currentStep.value?.scrollIntoViewOptions ?? props.scrollIntoViewOptions\n)\nconst mergedType = computed(() => currentStep.value?.type ?? props.type)\n\nconst { nextZIndex } = useZIndex()\nconst nowZIndex = nextZIndex()\nconst mergedZIndex = computed(() => props.zIndex ?? nowZIndex)\n\nconst { mergedPosInfo: pos, triggerTarget } = useTarget(\n  currentTarget,\n  toRef(props, 'modelValue'),\n  toRef(props, 'gap'),\n  mergedMask,\n  mergedScrollIntoViewOptions\n)\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    if (!val) {\n      current.value = 0\n    }\n  }\n)\n\nconst onEscClose = () => {\n  if (props.closeOnPressEscape) {\n    emit(UPDATE_MODEL_EVENT, false)\n    emit('close', current.value)\n  }\n}\n\nconst onUpdateTotal = (val: number) => {\n  total.value = val\n}\n\nconst slots = useSlots()\n\nprovide(tourKey, {\n  currentStep,\n  current,\n  total,\n  showClose: toRef(props, 'showClose'),\n  closeIcon: toRef(props, 'closeIcon'),\n  mergedType,\n  ns,\n  slots,\n  updateModelValue(modelValue) {\n    emit(UPDATE_MODEL_EVENT, modelValue)\n  },\n  onClose() {\n    emit('close', current.value)\n  },\n  onFinish() {\n    emit('finish')\n  },\n  onChange() {\n    emit(CHANGE_EVENT, current.value)\n  },\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"tour2.js","names":[],"sources":["../../../../../../packages/components/tour/src/tour.vue"],"sourcesContent":["<template>\n  <teleport :to=\"appendTo\">\n    <div :class=\"kls\" v-bind=\"$attrs\">\n      <el-tour-mask\n        :visible=\"mergedShowMask\"\n        :fill=\"mergedMaskStyle?.color\"\n        :style=\"mergedMaskStyle?.style\"\n        :pos=\"pos\"\n        :z-index=\"mergedZIndex\"\n        :target-area-clickable=\"targetAreaClickable\"\n      />\n      <el-tour-content\n        v-if=\"modelValue\"\n        :key=\"current\"\n        :reference=\"triggerTarget\"\n        :placement=\"mergedPlacement\"\n        :show-arrow=\"mergedShowArrow\"\n        :z-index=\"mergedZIndex\"\n        :style=\"mergedContentStyle\"\n        @close=\"onEscClose\"\n      >\n        <el-tour-steps :current=\"current\" @update-total=\"onUpdateTotal\">\n          <slot />\n        </el-tour-steps>\n      </el-tour-content>\n    </div>\n  </teleport>\n  <!-- just for IDE -->\n  <slot v-if=\"false\" name=\"indicators\" :current=\"current + 1\" :total=\"total\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, toRef, useSlots, watch } from 'vue'\nimport { useNamespace, useZIndex } from '@element-plus/hooks'\nimport { isBoolean, isUndefined } from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport ElTourMask from './mask.vue'\nimport ElTourContent from './content.vue'\nimport ElTourSteps from './steps'\nimport { tourEmits } from './tour'\nimport { tourKey, useTarget } from './helper'\n\nimport type { TourStepProps } from './step'\nimport type { TourProps } from './tour'\n\ndefineOptions({\n  name: 'ElTour',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TourProps>(), {\n  showArrow: true,\n  showClose: true,\n  placement: 'bottom',\n  mask: true,\n  gap: () => ({ offset: 6, radius: 2 }),\n  scrollIntoViewOptions: () => ({ block: 'center' }),\n  appendTo: 'body',\n  closeOnPressEscape: true,\n  targetAreaClickable: true,\n})\nconst emit = defineEmits(tourEmits)\n\nconst ns = useNamespace('tour')\nconst total = ref(0)\nconst currentStep = ref<TourStepProps>()\nconst isControlled = computed(() => !isUndefined(props.current))\nconst innerCurrent = ref(props.current ?? 0)\n\nconst current = computed<number>({\n  get() {\n    return isUndefined(props.current) ? innerCurrent.value : props.current\n  },\n  set(newValue) {\n    const oldValue = isControlled.value ? props.current : innerCurrent.value\n    if (oldValue === newValue) return\n\n    if (!isControlled.value) {\n      innerCurrent.value = newValue\n    }\n\n    emit('update:current', newValue)\n  },\n})\n\nconst currentTarget = computed(() => currentStep.value?.target)\n\nconst kls = computed(() => [\n  ns.b(),\n  mergedType.value === 'primary' ? ns.m('primary') : '',\n])\n\nconst mergedPlacement = computed(\n  () => currentStep.value?.placement || props.placement\n)\n\nconst mergedContentStyle = computed(\n  () => currentStep.value?.contentStyle ?? props.contentStyle\n)\n\nconst mergedMask = computed(() => currentStep.value?.mask ?? props.mask)\nconst mergedShowMask = computed(() => !!mergedMask.value && props.modelValue)\nconst mergedMaskStyle = computed(() =>\n  isBoolean(mergedMask.value) ? undefined : mergedMask.value\n)\n\nconst mergedShowArrow = computed(\n  () =>\n    !!currentTarget.value && (currentStep.value?.showArrow ?? props.showArrow)\n)\n\nconst mergedScrollIntoViewOptions = computed(\n  () => currentStep.value?.scrollIntoViewOptions ?? props.scrollIntoViewOptions\n)\nconst mergedType = computed(() => currentStep.value?.type ?? props.type)\n\nconst { nextZIndex } = useZIndex()\nconst nowZIndex = nextZIndex()\nconst mergedZIndex = computed(() => props.zIndex ?? nowZIndex)\n\nconst { mergedPosInfo: pos, triggerTarget } = useTarget(\n  currentTarget,\n  toRef(props, 'modelValue'),\n  toRef(props, 'gap'),\n  mergedMask,\n  mergedScrollIntoViewOptions\n)\n\nwatch(\n  () => props.current,\n  (val) => !isUndefined(val) && (innerCurrent.value = val)\n)\n\nwatch(\n  current,\n  (newCurrent, oldCurrent) => {\n    if (!props.modelValue || newCurrent === oldCurrent) return\n    emit(CHANGE_EVENT, newCurrent)\n  },\n  { flush: 'post' }\n)\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    if (!val && current.value !== 0) {\n      current.value = 0\n    }\n  }\n)\n\nconst onEscClose = () => {\n  if (props.closeOnPressEscape) {\n    emit(UPDATE_MODEL_EVENT, false)\n    emit('close', current.value)\n  }\n}\n\nconst onUpdateTotal = (val: number) => {\n  total.value = val\n}\n\nconst slots = useSlots()\n\nprovide(tourKey, {\n  currentStep,\n  current,\n  total,\n  showClose: toRef(props, 'showClose'),\n  closeIcon: toRef(props, 'closeIcon'),\n  mergedType,\n  ns,\n  slots,\n  updateModelValue(modelValue) {\n    emit(UPDATE_MODEL_EVENT, modelValue)\n  },\n  onClose() {\n    emit('close', current.value)\n  },\n  onFinish() {\n    emit('finish')\n  },\n})\n</script>\n"],"mappings":""}

package/lib/components/transfer/src/composables/use-check.d.ts

@@ -1,17 +1,22 @@
+import { FixedSizeListInstance } from "../../../virtual-list/src/components/fixed-size-list.js";
 import { CheckboxValueType } from "../../../checkbox/src/checkbox.js";
+import { CheckboxGroupInstance } from "../../../checkbox/src/checkbox-group.js";
 import { TransferDataItem } from "../transfer.js";
 import { TransferPanelEmits, TransferPanelProps, TransferPanelState } from "../transfer-panel.js";
 import * as _$vue from "vue";
 import { SetupContext } from "vue";
 
 //#region ../../packages/components/transfer/src/composables/use-check.d.ts
-declare const useCheck: <T extends TransferDataItem = TransferDataItem>(props: Required<Pick<TransferPanelProps<T>, "data" | "format" | "defaultChecked" | "props">> & {
+declare const useCheck: <T extends TransferDataItem = TransferDataItem>(props: Required<Pick<TransferPanelProps<T>, "data" | "format" | "defaultChecked" | "props" | "virtualScroll">> & {
   filterMethod: TransferPanelProps<T>["filterMethod"];
 }, panelState: TransferPanelState, emit: SetupContext<TransferPanelEmits>["emit"]) => {
   filteredData: _$vue.ComputedRef<T[]>;
   checkableData: _$vue.ComputedRef<T[]>;
   checkedSummary: _$vue.ComputedRef<string>;
+  virtualListRef: _$vue.Ref<FixedSizeListInstance | undefined, FixedSizeListInstance | undefined>;
   isIndeterminate: _$vue.ComputedRef<boolean>;
+  checkboxGroupRef: _$vue.Ref<CheckboxGroupInstance | undefined, CheckboxGroupInstance | undefined>;
+  virtualListHeight: _$vue.ShallowRef<number>;
   updateAllChecked: () => void;
   handleAllCheckedChange: (value: CheckboxValueType) => void;
 };

package/lib/components/transfer/src/composables/use-check.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../../../_virtual/_rolldown/runtime.js");
 const require_transfer_panel = require("../transfer-panel.js");
 const require_use_props_alias = require("./use-props-alias.js");
+let _vueuse_core = require("@vueuse/core");
 let vue = require("vue");
 let _vue_shared = require("@vue/shared");
 //#region ../../packages/components/transfer/src/composables/use-check.ts
@@ -32,6 +33,9 @@ const useCheck = (props, panelState, emit) => {
 	const handleAllCheckedChange = (value) => {
 		panelState.checked = value ? checkableData.value.map((item) => item[propsAlias.value.key]) : [];
 	};
+	const checkboxGroupRef = (0, vue.ref)();
+	const { height: virtualListHeight } = (0, _vueuse_core.useElementSize)((0, vue.computed)(() => checkboxGroupRef.value?.$el));
+	const virtualListRef = (0, vue.ref)();
 	(0, vue.watch)(() => panelState.checked, (val, oldVal) => {
 		updateAllChecked();
 		if (panelState.checkChangeByUser) emit(require_transfer_panel.CHECKED_CHANGE_EVENT, val, val.concat(oldVal).filter((v) => !val.includes(v) || !oldVal.includes(v)));
@@ -62,11 +66,18 @@ const useCheck = (props, panelState, emit) => {
 		panelState.checkChangeByUser = false;
 		panelState.checked = checked;
 	}, { immediate: true });
+	(0, vue.watch)(() => panelState.query, () => {
+		if (!props.virtualScroll) return;
+		virtualListRef.value?.scrollToItem(0);
+	}, { flush: "post" });
 	return {
 		filteredData,
 		checkableData,
 		checkedSummary,
+		virtualListRef,
 		isIndeterminate,
+		checkboxGroupRef,
+		virtualListHeight,
 		updateAllChecked,
 		handleAllCheckedChange
 	};

package/lib/components/transfer/src/composables/use-check.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-check.js","names":["usePropsAlias","CHECKED_CHANGE_EVENT"],"sources":["../../../../../../../packages/components/transfer/src/composables/use-check.ts"],"sourcesContent":["import { computed, watch } from 'vue'\nimport { isFunction } from '@element-plus/utils'\nimport { CHECKED_CHANGE_EVENT } from '../transfer-panel'\nimport { usePropsAlias } from './use-props-alias'\n\nimport type { SetupContext } from 'vue'\nimport type { CheckboxValueType } from '@element-plus/components/checkbox'\nimport type { TransferDataItem, TransferKey } from '../transfer'\nimport type {\n  TransferPanelEmits,\n  TransferPanelProps,\n  TransferPanelState,\n} from '../transfer-panel'\n\nexport const useCheck = <T extends TransferDataItem = TransferDataItem>(\n  props: Required<\n    Pick<\n      TransferPanelProps<T>,\n      'data' | 'format' | 'defaultChecked' | 'props' // 'props' needed by usePropsAlias\n    >\n  > & { filterMethod: TransferPanelProps<T>['filterMethod'] },\n  panelState: TransferPanelState,\n  emit: SetupContext<TransferPanelEmits>['emit']\n) => {\n  const propsAlias = usePropsAlias(props)\n\n  const filteredData = computed(() => {\n    return props.data.filter((item) => {\n      if (isFunction(props.filterMethod)) {\n        return props.filterMethod(panelState.query, item)\n      } else {\n        const label = String(\n          item[propsAlias.value.label] || item[propsAlias.value.key]\n        )\n        return label.toLowerCase().includes(panelState.query.toLowerCase())\n      }\n    })\n  })\n\n  const checkableData = computed(() =>\n    filteredData.value.filter((item) => !item[propsAlias.value.disabled])\n  )\n\n  const checkedSummary = computed(() => {\n    const checkedLength = panelState.checked.length\n    const dataLength = props.data.length\n    const { noChecked, hasChecked } = props.format\n\n    if (noChecked && hasChecked) {\n      return checkedLength > 0\n        ? hasChecked\n            .replace(/\\${checked}/g, checkedLength.toString())\n            .replace(/\\${total}/g, dataLength.toString())\n        : noChecked.replace(/\\${total}/g, dataLength.toString())\n    } else {\n      return `${checkedLength}/${dataLength}`\n    }\n  })\n\n  const isIndeterminate = computed(() => {\n    const checkedLength = panelState.checked.length\n    return checkedLength > 0 && checkedLength < checkableData.value.length\n  })\n\n  const updateAllChecked = () => {\n    const checkableDataKeys = checkableData.value.map(\n      (item) => item[propsAlias.value.key]\n    )\n    panelState.allChecked =\n      checkableDataKeys.length > 0 &&\n      checkableDataKeys.every((item) => panelState.checked.includes(item))\n  }\n\n  const handleAllCheckedChange = (value: CheckboxValueType) => {\n    panelState.checked = value\n      ? checkableData.value.map((item) => item[propsAlias.value.key])\n      : []\n  }\n\n  watch(\n    () => panelState.checked,\n    (val, oldVal) => {\n      updateAllChecked()\n\n      if (panelState.checkChangeByUser) {\n        const movedKeys = val\n          .concat(oldVal)\n          .filter((v) => !val.includes(v) || !oldVal.includes(v))\n        emit(CHECKED_CHANGE_EVENT, val, movedKeys)\n      } else {\n        emit(CHECKED_CHANGE_EVENT, val)\n        panelState.checkChangeByUser = true\n      }\n    }\n  )\n\n  watch(checkableData, () => {\n    updateAllChecked()\n  })\n\n  watch(\n    () => props.data,\n    () => {\n      const checked: TransferKey[] = []\n      const filteredDataKeys = filteredData.value.map(\n        (item) => item[propsAlias.value.key]\n      )\n      panelState.checked.forEach((item) => {\n        if (filteredDataKeys.includes(item)) {\n          checked.push(item)\n        }\n      })\n      panelState.checkChangeByUser = false\n      panelState.checked = checked\n    }\n  )\n\n  watch(\n    () => props.defaultChecked,\n    (val, oldVal) => {\n      if (\n        oldVal &&\n        val.length === oldVal.length &&\n        val.every((item) => oldVal.includes(item))\n      )\n        return\n\n      const checked: TransferKey[] = []\n      const checkableDataKeys = checkableData.value.map(\n        (item) => item[propsAlias.value.key]\n      )\n\n      val.forEach((item) => {\n        if (checkableDataKeys.includes(item)) {\n          checked.push(item)\n        }\n      })\n      panelState.checkChangeByUser = false\n      panelState.checked = checked\n    },\n    {\n      immediate: true,\n    }\n  )\n\n  return {\n    filteredData,\n    checkableData,\n    checkedSummary,\n    isIndeterminate,\n    updateAllChecked,\n    handleAllCheckedChange,\n  }\n}\n"],"mappings":";;;;;;;AAcA,MAAa,YACX,OAMA,YACA,SACG;CACH,MAAM,aAAaA,wBAAAA,cAAc,MAAM;CAEvC,MAAM,gBAAA,GAAA,IAAA,gBAA8B;EAClC,OAAO,MAAM,KAAK,QAAQ,SAAS;GACjC,KAAA,GAAA,YAAA,YAAe,MAAM,aAAa,EAChC,OAAO,MAAM,aAAa,WAAW,OAAO,KAAK;QAKjD,OAHc,OACZ,KAAK,WAAW,MAAM,UAAU,KAAK,WAAW,MAAM,KAE5C,CAAC,aAAa,CAAC,SAAS,WAAW,MAAM,aAAa,CAAC;IAErE;GACF;CAEF,MAAM,iBAAA,GAAA,IAAA,gBACJ,aAAa,MAAM,QAAQ,SAAS,CAAC,KAAK,WAAW,MAAM,UAAU,CACtE;CAED,MAAM,kBAAA,GAAA,IAAA,gBAAgC;EACpC,MAAM,gBAAgB,WAAW,QAAQ;EACzC,MAAM,aAAa,MAAM,KAAK;EAC9B,MAAM,EAAE,WAAW,eAAe,MAAM;EAExC,IAAI,aAAa,YACf,OAAO,gBAAgB,IACnB,WACG,QAAQ,gBAAgB,cAAc,UAAU,CAAC,CACjD,QAAQ,cAAc,WAAW,UAAU,CAAC,GAC/C,UAAU,QAAQ,cAAc,WAAW,UAAU,CAAC;OAE1D,OAAO,GAAG,cAAc,GAAG;GAE7B;CAEF,MAAM,mBAAA,GAAA,IAAA,gBAAiC;EACrC,MAAM,gBAAgB,WAAW,QAAQ;EACzC,OAAO,gBAAgB,KAAK,gBAAgB,cAAc,MAAM;GAChE;CAEF,MAAM,yBAAyB;EAC7B,MAAM,oBAAoB,cAAc,MAAM,KAC3C,SAAS,KAAK,WAAW,MAAM,KACjC;EACD,WAAW,aACT,kBAAkB,SAAS,KAC3B,kBAAkB,OAAO,SAAS,WAAW,QAAQ,SAAS,KAAK,CAAC;;CAGxE,MAAM,0BAA0B,UAA6B;EAC3D,WAAW,UAAU,QACjB,cAAc,MAAM,KAAK,SAAS,KAAK,WAAW,MAAM,KAAK,GAC7D,EAAE;;CAGR,CAAA,GAAA,IAAA,aACQ,WAAW,UAChB,KAAK,WAAW;EACf,kBAAkB;EAElB,IAAI,WAAW,mBAIb,KAAKC,uBAAAA,sBAAsB,KAHT,IACf,OAAO,OAAO,CACd,QAAQ,MAAM,CAAC,IAAI,SAAS,EAAE,IAAI,CAAC,OAAO,SAAS,EAAE,CACf,CAAC;OACrC;GACL,KAAKA,uBAAAA,sBAAsB,IAAI;GAC/B,WAAW,oBAAoB;;GAGpC;CAED,CAAA,GAAA,IAAA,OAAM,qBAAqB;EACzB,kBAAkB;GAClB;CAEF,CAAA,GAAA,IAAA,aACQ,MAAM,YACN;EACJ,MAAM,UAAyB,EAAE;EACjC,MAAM,mBAAmB,aAAa,MAAM,KACzC,SAAS,KAAK,WAAW,MAAM,KACjC;EACD,WAAW,QAAQ,SAAS,SAAS;GACnC,IAAI,iBAAiB,SAAS,KAAK,EACjC,QAAQ,KAAK,KAAK;IAEpB;EACF,WAAW,oBAAoB;EAC/B,WAAW,UAAU;GAExB;CAED,CAAA,GAAA,IAAA,aACQ,MAAM,iBACX,KAAK,WAAW;EACf,IACE,UACA,IAAI,WAAW,OAAO,UACtB,IAAI,OAAO,SAAS,OAAO,SAAS,KAAK,CAAC,EAE1C;EAEF,MAAM,UAAyB,EAAE;EACjC,MAAM,oBAAoB,cAAc,MAAM,KAC3C,SAAS,KAAK,WAAW,MAAM,KACjC;EAED,IAAI,SAAS,SAAS;GACpB,IAAI,kBAAkB,SAAS,KAAK,EAClC,QAAQ,KAAK,KAAK;IAEpB;EACF,WAAW,oBAAoB;EAC/B,WAAW,UAAU;IAEvB,EACE,WAAW,MACZ,CACF;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"use-check.js","names":["usePropsAlias","CHECKED_CHANGE_EVENT"],"sources":["../../../../../../../packages/components/transfer/src/composables/use-check.ts"],"sourcesContent":["import { computed, ref, watch } from 'vue'\nimport { isFunction } from '@element-plus/utils'\nimport { useElementSize } from '@vueuse/core'\nimport { CHECKED_CHANGE_EVENT } from '../transfer-panel'\nimport { usePropsAlias } from './use-props-alias'\n\nimport type { SetupContext } from 'vue'\nimport type {\n  CheckboxGroupInstance,\n  CheckboxValueType,\n} from '@element-plus/components/checkbox'\nimport type { TransferDataItem, TransferKey } from '../transfer'\nimport type {\n  TransferPanelEmits,\n  TransferPanelProps,\n  TransferPanelState,\n} from '../transfer-panel'\nimport type { FixedSizeListInstance } from '@element-plus/components/virtual-list'\n\nexport const useCheck = <T extends TransferDataItem = TransferDataItem>(\n  props: Required<\n    Pick<\n      TransferPanelProps<T>,\n      'data' | 'format' | 'defaultChecked' | 'props' | 'virtualScroll' // 'props' needed by usePropsAlias\n    >\n  > & { filterMethod: TransferPanelProps<T>['filterMethod'] },\n  panelState: TransferPanelState,\n  emit: SetupContext<TransferPanelEmits>['emit']\n) => {\n  const propsAlias = usePropsAlias(props)\n\n  const filteredData = computed(() => {\n    return props.data.filter((item) => {\n      if (isFunction(props.filterMethod)) {\n        return props.filterMethod(panelState.query, item)\n      } else {\n        const label = String(\n          item[propsAlias.value.label] || item[propsAlias.value.key]\n        )\n        return label.toLowerCase().includes(panelState.query.toLowerCase())\n      }\n    })\n  })\n\n  const checkableData = computed(() =>\n    filteredData.value.filter((item) => !item[propsAlias.value.disabled])\n  )\n\n  const checkedSummary = computed(() => {\n    const checkedLength = panelState.checked.length\n    const dataLength = props.data.length\n    const { noChecked, hasChecked } = props.format\n\n    if (noChecked && hasChecked) {\n      return checkedLength > 0\n        ? hasChecked\n            .replace(/\\${checked}/g, checkedLength.toString())\n            .replace(/\\${total}/g, dataLength.toString())\n        : noChecked.replace(/\\${total}/g, dataLength.toString())\n    } else {\n      return `${checkedLength}/${dataLength}`\n    }\n  })\n\n  const isIndeterminate = computed(() => {\n    const checkedLength = panelState.checked.length\n    return checkedLength > 0 && checkedLength < checkableData.value.length\n  })\n\n  const updateAllChecked = () => {\n    const checkableDataKeys = checkableData.value.map(\n      (item) => item[propsAlias.value.key]\n    )\n    panelState.allChecked =\n      checkableDataKeys.length > 0 &&\n      checkableDataKeys.every((item) => panelState.checked.includes(item))\n  }\n\n  const handleAllCheckedChange = (value: CheckboxValueType) => {\n    panelState.checked = value\n      ? checkableData.value.map((item) => item[propsAlias.value.key])\n      : []\n  }\n\n  const checkboxGroupRef = ref<CheckboxGroupInstance>()\n  const { height: virtualListHeight } = useElementSize(\n    computed(() => checkboxGroupRef.value?.$el)\n  )\n\n  const virtualListRef = ref<FixedSizeListInstance>()\n\n  watch(\n    () => panelState.checked,\n    (val, oldVal) => {\n      updateAllChecked()\n\n      if (panelState.checkChangeByUser) {\n        const movedKeys = val\n          .concat(oldVal)\n          .filter((v) => !val.includes(v) || !oldVal.includes(v))\n        emit(CHECKED_CHANGE_EVENT, val, movedKeys)\n      } else {\n        emit(CHECKED_CHANGE_EVENT, val)\n        panelState.checkChangeByUser = true\n      }\n    }\n  )\n\n  watch(checkableData, () => {\n    updateAllChecked()\n  })\n\n  watch(\n    () => props.data,\n    () => {\n      const checked: TransferKey[] = []\n      const filteredDataKeys = filteredData.value.map(\n        (item) => item[propsAlias.value.key]\n      )\n      panelState.checked.forEach((item) => {\n        if (filteredDataKeys.includes(item)) {\n          checked.push(item)\n        }\n      })\n      panelState.checkChangeByUser = false\n      panelState.checked = checked\n    }\n  )\n\n  watch(\n    () => props.defaultChecked,\n    (val, oldVal) => {\n      if (\n        oldVal &&\n        val.length === oldVal.length &&\n        val.every((item) => oldVal.includes(item))\n      )\n        return\n\n      const checked: TransferKey[] = []\n      const checkableDataKeys = checkableData.value.map(\n        (item) => item[propsAlias.value.key]\n      )\n\n      val.forEach((item) => {\n        if (checkableDataKeys.includes(item)) {\n          checked.push(item)\n        }\n      })\n      panelState.checkChangeByUser = false\n      panelState.checked = checked\n    },\n    {\n      immediate: true,\n    }\n  )\n\n  watch(\n    () => panelState.query,\n    () => {\n      if (!props.virtualScroll) {\n        return\n      }\n      virtualListRef.value?.scrollToItem(0)\n    },\n    { flush: 'post' }\n  )\n\n  return {\n    filteredData,\n    checkableData,\n    checkedSummary,\n    virtualListRef,\n    isIndeterminate,\n    checkboxGroupRef,\n    virtualListHeight,\n    updateAllChecked,\n    handleAllCheckedChange,\n  }\n}\n"],"mappings":"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"}

package/lib/components/transfer/src/transfer-panel.d.ts

@@ -24,6 +24,8 @@ interface TransferPanelProps<T extends TransferDataItem = TransferDataItem> {
   filterMethod?: (query: string, item: T) => boolean;
   defaultChecked?: TransferKey[];
   props?: TransferPropsAlias;
+  virtualScroll?: boolean;
+  itemSize?: number;
 }
 /**
  * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.
@@ -52,6 +54,8 @@ declare const transferPanelProps: {
     readonly key: "key";
     readonly disabled: "disabled";
   }>, boolean>;
+  readonly virtualScroll: BooleanConstructor;
+  readonly itemSize: EpPropFinalized<NumberConstructor, unknown, unknown, 30, boolean>;
 };
 /**
  * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.

package/lib/components/transfer/src/transfer-panel.js

@@ -15,7 +15,9 @@ const transferPanelProps = require_runtime.buildProps({
 	format: require_transfer.transferProps.format,
 	filterMethod: require_transfer.transferProps.filterMethod,
 	defaultChecked: require_transfer.transferProps.leftDefaultChecked,
-	props: require_transfer.transferProps.props
+	props: require_transfer.transferProps.props,
+	virtualScroll: require_transfer.transferProps.virtualScroll,
+	itemSize: require_transfer.transferProps.itemSize
 });
 const transferPanelEmits = { [CHECKED_CHANGE_EVENT]: require_transfer.transferCheckedChangeFn };
 //#endregion

package/lib/components/transfer/src/transfer-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-panel.js","names":["buildProps","transferProps","definePropType","transferCheckedChangeFn"],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { transferCheckedChangeFn, transferProps } from './transfer'\n\nimport type { ComponentInstance, ExtractPublicPropTypes, VNode } from 'vue'\nimport type { ComponentExposed } from 'vue-component-type-helpers'\nimport type {\n  TransferDataItem,\n  TransferFormat,\n  TransferKey,\n  TransferPropsAlias,\n} from './transfer'\nimport type TransferPanel from './transfer-panel.vue'\n\nexport interface TransferPanelState {\n  checked: TransferKey[]\n  allChecked: boolean\n  query: string\n  checkChangeByUser: boolean\n}\n\nexport const CHECKED_CHANGE_EVENT = 'checked-change'\n\nexport interface TransferPanelProps<\n  T extends TransferDataItem = TransferDataItem,\n> {\n  data?: T[]\n  optionRender?: (option: T) => VNode | VNode[]\n  placeholder?: string\n  title?: string\n  filterable?: boolean\n  format?: TransferFormat\n  filterMethod?: (query: string, item: T) => boolean\n  defaultChecked?: TransferKey[]\n  props?: TransferPropsAlias\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.\n */\nexport const transferPanelProps = buildProps({\n  data: transferProps.data,\n  optionRender: {\n    type: definePropType<(option: TransferDataItem) => VNode | VNode[]>(\n      Function\n    ),\n  },\n  placeholder: String,\n  title: String,\n  filterable: Boolean,\n  format: transferProps.format,\n  filterMethod: transferProps.filterMethod,\n  defaultChecked: transferProps.leftDefaultChecked,\n  props: transferProps.props,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.\n */\nexport type TransferPanelPropsPublic = ExtractPublicPropTypes<\n  typeof transferPanelProps\n>\n\nexport const transferPanelEmits = {\n  [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn,\n}\nexport type TransferPanelEmits = typeof transferPanelEmits\n\nexport type TransferPanelInstance = ComponentInstance<typeof TransferPanel> &\n  ComponentExposed<typeof TransferPanel>\n"],"mappings":";;;;AAoBA,MAAa,uBAAuB;;;;AAmBpC,MAAa,qBAAqBA,gBAAAA,WAAW;CAC3C,MAAMC,iBAAAA,cAAc;CACpB,cAAc,EACZ,MAAMC,gBAAAA,eACJ,SACD,EACF;CACD,aAAa;CACb,OAAO;CACP,YAAY;CACZ,QAAQD,iBAAAA,cAAc;CACtB,cAAcA,iBAAAA,cAAc;CAC5B,gBAAgBA,iBAAAA,cAAc;CAC9B,OAAOA,iBAAAA,cAAc;CACtB,CAAU;AASX,MAAa,qBAAqB,GAC/B,uBAAuBE,iBAAAA,yBACzB"}
+{"version":3,"file":"transfer-panel.js","names":["buildProps","transferProps","definePropType","transferCheckedChangeFn"],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { transferCheckedChangeFn, transferProps } from './transfer'\n\nimport type { ComponentInstance, ExtractPublicPropTypes, VNode } from 'vue'\nimport type { ComponentExposed } from 'vue-component-type-helpers'\nimport type {\n  TransferDataItem,\n  TransferFormat,\n  TransferKey,\n  TransferPropsAlias,\n} from './transfer'\nimport type TransferPanel from './transfer-panel.vue'\n\nexport interface TransferPanelState {\n  checked: TransferKey[]\n  allChecked: boolean\n  query: string\n  checkChangeByUser: boolean\n}\n\nexport const CHECKED_CHANGE_EVENT = 'checked-change'\n\nexport interface TransferPanelProps<\n  T extends TransferDataItem = TransferDataItem,\n> {\n  data?: T[]\n  optionRender?: (option: T) => VNode | VNode[]\n  placeholder?: string\n  title?: string\n  filterable?: boolean\n  format?: TransferFormat\n  filterMethod?: (query: string, item: T) => boolean\n  defaultChecked?: TransferKey[]\n  props?: TransferPropsAlias\n  virtualScroll?: boolean\n  itemSize?: number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.\n */\nexport const transferPanelProps = buildProps({\n  data: transferProps.data,\n  optionRender: {\n    type: definePropType<(option: TransferDataItem) => VNode | VNode[]>(\n      Function\n    ),\n  },\n  placeholder: String,\n  title: String,\n  filterable: Boolean,\n  format: transferProps.format,\n  filterMethod: transferProps.filterMethod,\n  defaultChecked: transferProps.leftDefaultChecked,\n  props: transferProps.props,\n  virtualScroll: transferProps.virtualScroll,\n  itemSize: transferProps.itemSize,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.\n */\nexport type TransferPanelPropsPublic = ExtractPublicPropTypes<\n  typeof transferPanelProps\n>\n\nexport const transferPanelEmits = {\n  [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn,\n}\nexport type TransferPanelEmits = typeof transferPanelEmits\n\nexport type TransferPanelInstance = ComponentInstance<typeof TransferPanel> &\n  ComponentExposed<typeof TransferPanel>\n"],"mappings":";;;;AAoBA,MAAa,uBAAuB;;;;AAqBpC,MAAa,qBAAqBA,gBAAAA,WAAW;CAC3C,MAAMC,iBAAAA,cAAc;CACpB,cAAc,EACZ,MAAMC,gBAAAA,eACJ,SACD,EACF;CACD,aAAa;CACb,OAAO;CACP,YAAY;CACZ,QAAQD,iBAAAA,cAAc;CACtB,cAAcA,iBAAAA,cAAc;CAC5B,gBAAgBA,iBAAAA,cAAc;CAC9B,OAAOA,iBAAAA,cAAc;CACrB,eAAeA,iBAAAA,cAAc;CAC7B,UAAUA,iBAAAA,cAAc;CACzB,CAAU;AASX,MAAa,qBAAqB,GAC/B,uBAAuBE,iBAAAA,yBACzB"}

package/lib/components/transfer/src/transfer-panel.vue.d.ts

@@ -20,7 +20,7 @@ declare const __VLS_export: <T extends TransferDataItem = TransferDataItem>(__VL
   };
   emit: (event: "checked-change", value: TransferKey[], movedKeys?: TransferKey[] | undefined) => void;
 }>) => _$vue.VNode & {
-  __ctx?: Awaited<typeof __VLS_setup>;
+  __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};