This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,12 @@
import Tour from './src/tour.vue';
import TourStep from './src/step.vue';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElTour: SFCWithInstall<typeof Tour> & {
TourStep: typeof TourStep;
};
export declare const ElTourStep: SFCWithInstall<typeof TourStep>;
export default ElTour;
export * from './src/tour';
export * from './src/step';
export * from './src/content';
export type { TourMask, TourGap, TourBtnProps } from './src/types';

14
node_modules/element-plus/es/components/tour/index.mjs generated vendored Normal file
View File

@@ -0,0 +1,14 @@
import Tour from './src/tour.mjs';
import TourStep from './src/step2.mjs';
export { tourEmits, tourProps } from './src/tour2.mjs';
export { tourStepEmits, tourStepProps } from './src/step.mjs';
export { tourContentEmits, tourContentProps, tourPlacements, tourStrategies } from './src/content.mjs';
import { withInstall, withNoopInstall } from '../../utils/vue/install.mjs';
const ElTour = withInstall(Tour, {
TourStep
});
const ElTourStep = withNoopInstall(TourStep);
export { ElTour, ElTourStep, ElTour as default };
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/tour/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Tour from './src/tour.vue'\nimport TourStep from './src/step.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElTour: SFCWithInstall<typeof Tour> & {\n TourStep: typeof TourStep\n} = withInstall(Tour, {\n TourStep,\n})\nexport const ElTourStep: SFCWithInstall<typeof TourStep> =\n withNoopInstall(TourStep)\nexport default ElTour\n\nexport * from './src/tour'\nexport * from './src/step'\nexport * from './src/content'\nexport type { TourMask, TourGap, TourBtnProps } from './src/types'\n"],"names":[],"mappings":";;;;;;;AAGY,MAAC,MAAM,GAAG,WAAW,CAAC,IAAI,EAAE;AACxC,EAAE,QAAQ;AACV,CAAC,EAAE;AACS,MAAC,UAAU,GAAG,eAAe,CAAC,QAAQ;;;;"}

View File

@@ -0,0 +1,18 @@
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
import type { Placement, Strategy, VirtualElement } from '@floating-ui/dom';
export declare const tourStrategies: readonly ["absolute", "fixed"];
export declare const tourPlacements: readonly ["top-start", "top-end", "top", "bottom-start", "bottom-end", "bottom", "left-start", "left-end", "left", "right-start", "right-end", "right"];
export declare const tourContentProps: {
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
reference: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => HTMLElement | VirtualElement) | (() => HTMLElement | VirtualElement | null) | ((new (...args: any[]) => HTMLElement | VirtualElement) | (() => HTMLElement | VirtualElement | null))[], unknown, unknown, null, boolean>;
strategy: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "fixed" | "absolute") | (() => Strategy) | ((new (...args: any[]) => "fixed" | "absolute") | (() => Strategy))[], "fixed" | "absolute", unknown, string, boolean>;
offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: BooleanConstructor;
zIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
};
export type TourContentProps = ExtractPropTypes<typeof tourContentProps>;
export type TourContentPropsPublic = __ExtractPublicPropTypes<typeof tourContentProps>;
export declare const tourContentEmits: {
close: () => boolean;
};
export type TourContentEmits = typeof tourContentEmits;

View File

@@ -0,0 +1,48 @@
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
const tourStrategies = ["absolute", "fixed"];
const tourPlacements = [
"top-start",
"top-end",
"top",
"bottom-start",
"bottom-end",
"bottom",
"left-start",
"left-end",
"left",
"right-start",
"right-end",
"right"
];
const tourContentProps = buildProps({
placement: {
type: definePropType(String),
values: tourPlacements,
default: "bottom"
},
reference: {
type: definePropType(Object),
default: null
},
strategy: {
type: definePropType(String),
values: tourStrategies,
default: "absolute"
},
offset: {
type: Number,
default: 10
},
showArrow: Boolean,
zIndex: {
type: Number,
default: 2001
}
});
const tourContentEmits = {
close: () => true
};
export { tourContentEmits, tourContentProps, tourPlacements, tourStrategies };
//# sourceMappingURL=content.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"content.mjs","sources":["../../../../../../packages/components/tour/src/content.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type { Placement, Strategy, VirtualElement } from '@floating-ui/dom'\n\nexport const tourStrategies = ['absolute', 'fixed'] as const\n\nexport const tourPlacements = [\n 'top-start',\n 'top-end',\n 'top',\n 'bottom-start',\n 'bottom-end',\n 'bottom',\n 'left-start',\n 'left-end',\n 'left',\n 'right-start',\n 'right-end',\n 'right',\n] as const\n\nexport const tourContentProps = buildProps({\n /**\n * @description position of the guide card relative to the target element\n */\n placement: {\n type: definePropType<Placement>(String),\n values: tourPlacements,\n default: 'bottom',\n },\n /**\n * @description the reference dom\n */\n reference: {\n type: definePropType<HTMLElement | VirtualElement | null>(Object),\n default: null,\n },\n /**\n * @description position strategy of the content\n */\n strategy: {\n type: definePropType<Strategy>(String),\n values: tourStrategies,\n default: 'absolute',\n },\n /**\n * @description offset of the arrow\n */\n offset: {\n type: Number,\n default: 10,\n },\n /**\n * @description whether to show the arrow\n */\n showArrow: Boolean,\n /**\n * @description content's zIndex\n */\n zIndex: {\n type: Number,\n default: 2001,\n },\n})\n\nexport type TourContentProps = ExtractPropTypes<typeof tourContentProps>\nexport type TourContentPropsPublic = __ExtractPublicPropTypes<\n typeof tourContentProps\n>\n\nexport const tourContentEmits = {\n close: () => true,\n}\nexport type TourContentEmits = typeof tourContentEmits\n"],"names":[],"mappings":";;AACY,MAAC,cAAc,GAAG,CAAC,UAAU,EAAE,OAAO,EAAE;AACxC,MAAC,cAAc,GAAG;AAC9B,EAAE,WAAW;AACb,EAAE,SAAS;AACX,EAAE,KAAK;AACP,EAAE,cAAc;AAChB,EAAE,YAAY;AACd,EAAE,QAAQ;AACV,EAAE,YAAY;AACd,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,aAAa;AACf,EAAE,WAAW;AACb,EAAE,OAAO;AACT,EAAE;AACU,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,MAAM,EAAE,cAAc;AAC1B,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,MAAM,EAAE,cAAc;AAC1B,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB;;;;"}

View File

@@ -0,0 +1,36 @@
declare function __VLS_template(): {
default?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
reference: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => HTMLElement | import("@floating-ui/dom").VirtualElement) | (() => HTMLElement | import("@floating-ui/dom").VirtualElement | null) | ((new (...args: any[]) => HTMLElement | import("@floating-ui/dom").VirtualElement) | (() => HTMLElement | import("@floating-ui/dom").VirtualElement | null))[], unknown, unknown, null, boolean>;
strategy: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "fixed" | "absolute") | (() => import("@floating-ui/core").Strategy) | ((new (...args: any[]) => "fixed" | "absolute") | (() => import("@floating-ui/core").Strategy))[], "fixed" | "absolute", unknown, string, boolean>;
offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: BooleanConstructor;
zIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
close: () => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
reference: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => HTMLElement | import("@floating-ui/dom").VirtualElement) | (() => HTMLElement | import("@floating-ui/dom").VirtualElement | null) | ((new (...args: any[]) => HTMLElement | import("@floating-ui/dom").VirtualElement) | (() => HTMLElement | import("@floating-ui/dom").VirtualElement | null))[], unknown, unknown, null, boolean>;
strategy: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "fixed" | "absolute") | (() => import("@floating-ui/core").Strategy) | ((new (...args: any[]) => "fixed" | "absolute") | (() => import("@floating-ui/core").Strategy))[], "fixed" | "absolute", unknown, string, boolean>;
offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: BooleanConstructor;
zIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
}>> & {
onClose?: (() => any) | undefined;
}, {
zIndex: number;
offset: number;
placement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown>;
strategy: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "fixed" | "absolute") | (() => import("@floating-ui/core").Strategy) | ((new (...args: any[]) => "fixed" | "absolute") | (() => import("@floating-ui/core").Strategy))[], "fixed" | "absolute", unknown>;
reference: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => HTMLElement | import("@floating-ui/dom").VirtualElement) | (() => HTMLElement | import("@floating-ui/dom").VirtualElement | null) | ((new (...args: any[]) => HTMLElement | import("@floating-ui/dom").VirtualElement) | (() => HTMLElement | import("@floating-ui/dom").VirtualElement | null))[], unknown, unknown>;
showArrow: boolean;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,72 @@
import { defineComponent, ref, watch, toRef, computed, inject, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, renderSlot, createCommentVNode } from 'vue';
import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
import { tourContentProps, tourContentEmits } from './content.mjs';
import { useFloating, tourKey } from './helper.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
const __default__ = defineComponent({
name: "ElTourContent"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: tourContentProps,
emits: tourContentEmits,
setup(__props, { emit }) {
const props = __props;
const placement = ref(props.placement);
const strategy = ref(props.strategy);
const contentRef = ref(null);
const arrowRef = ref(null);
watch(() => props.placement, () => {
placement.value = props.placement;
});
const { contentStyle, arrowStyle } = useFloating(toRef(props, "reference"), contentRef, arrowRef, placement, strategy, toRef(props, "offset"), toRef(props, "zIndex"), toRef(props, "showArrow"));
const side = computed(() => {
return placement.value.split("-")[0];
});
const { ns } = inject(tourKey);
const onCloseRequested = () => {
emit("close");
};
const onFocusoutPrevented = (event) => {
if (event.detail.focusReason === "pointer") {
event.preventDefault();
}
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "contentRef",
ref: contentRef,
style: normalizeStyle(unref(contentStyle)),
class: normalizeClass(unref(ns).e("content")),
"data-side": unref(side),
tabindex: "-1"
}, [
createVNode(unref(ElFocusTrap), {
loop: "",
trapped: "",
"focus-start-el": "container",
"focus-trap-el": contentRef.value || void 0,
onReleaseRequested: onCloseRequested,
onFocusoutPrevented
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["focus-trap-el"]),
_ctx.showArrow ? (openBlock(), createElementBlock("span", {
key: 0,
ref_key: "arrowRef",
ref: arrowRef,
style: normalizeStyle(unref(arrowStyle)),
class: normalizeClass(unref(ns).e("arrow"))
}, null, 6)) : createCommentVNode("v-if", true)
], 14, ["data-side"]);
};
}
});
var ElTourContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "content.vue"]]);
export { ElTourContent as default };
//# sourceMappingURL=content2.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"content2.mjs","sources":["../../../../../../packages/components/tour/src/content.vue"],"sourcesContent":["<template>\n <div\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"ns.e('content')\"\n :data-side=\"side\"\n tabindex=\"-1\"\n >\n <el-focus-trap\n loop\n trapped\n focus-start-el=\"container\"\n :focus-trap-el=\"contentRef || undefined\"\n @release-requested=\"onCloseRequested\"\n @focusout-prevented=\"onFocusoutPrevented\"\n >\n <slot />\n </el-focus-trap>\n <span\n v-if=\"showArrow\"\n ref=\"arrowRef\"\n :style=\"arrowStyle\"\n :class=\"ns.e('arrow')\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, inject, ref, toRef, watch } from 'vue'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport { tourContentEmits, tourContentProps } from './content'\nimport { tourKey, useFloating } from './helper'\n\ndefineOptions({\n name: 'ElTourContent',\n})\n\nconst props = defineProps(tourContentProps)\nconst emit = defineEmits(tourContentEmits)\n\nconst placement = ref(props.placement)\nconst strategy = ref(props.strategy)\nconst contentRef = ref<HTMLElement | null>(null)\nconst arrowRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.placement,\n () => {\n placement.value = props.placement\n }\n)\n\nconst { contentStyle, arrowStyle } = useFloating(\n toRef(props, 'reference'),\n contentRef,\n arrowRef,\n placement,\n strategy,\n toRef(props, 'offset'),\n toRef(props, 'zIndex'),\n toRef(props, 'showArrow')\n)\n\nconst side = computed(() => {\n return placement.value.split('-')[0]\n})\n\nconst { ns } = inject(tourKey)!\n\nconst onCloseRequested = () => {\n emit('close')\n}\n\nconst onFocusoutPrevented = (event: CustomEvent) => {\n if (event.detail.focusReason === 'pointer') {\n event.preventDefault()\n }\n}\n</script>\n"],"names":["_openBlock","_createElementBlock","_unref","_normalizeClass","_createVNode"],"mappings":";;;;;;mCAiCc,CAAA;AAAA,EACZ,IAAM,EAAA,eAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAM,MAAA,SAAA,GAAY,GAAI,CAAA,KAAA,CAAM,SAAS,CAAA,CAAA;AACrC,IAAM,MAAA,QAAA,GAAW,GAAI,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AACnC,IAAM,MAAA,UAAA,GAAa,IAAwB,IAAI,CAAA,CAAA;AAC/C,IAAM,MAAA,QAAA,GAAW,IAAwB,IAAI,CAAA,CAAA;AAE7C,IAAA,KAAA,CAAA,MAAA,KAAA,CAAA,SAAA,EAAA,MAAA;AAAA,MACE,SAAY,CAAA,KAAA,GAAA,KAAA,CAAA,SAAA,CAAA;AAAA,KAAA,CACZ,CAAM;AACJ,IAAA,MAAA,EAAA,cAAkB,UAAM,EAAA,GAAA,WAAA,CAAA,KAAA,CAAA,KAAA,EAAA,WAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,KAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,KAAA,CAAA,KAAA,EAAA,WAAA,CAAA,CAAA,CAAA;AAAA,IAC1B,MAAA,IAAA,GAAA,QAAA,CAAA,MAAA;AAAA,MACF,OAAA,SAAA,CAAA,KAAA,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEA,KAAM,CAAA,CAAA;AAA+B,IACnC,MAAA,EAAM,OAAO,MAAW,CAAA,OAAA,CAAA,CAAA;AAAA,IACxB,MAAA,gBAAA,GAAA,MAAA;AAAA,MACA,IAAA,CAAA,OAAA,CAAA,CAAA;AAAA,KACA,CAAA;AAAA,IACA,MAAA,mBAAA,GAAA,CAAA,KAAA,KAAA;AAAA,MACA,IAAA,YAAqB,CAAA,WAAA,KAAA,SAAA,EAAA;AAAA,QACrB,oBAAqB,EAAA,CAAA;AAAA,OACrB;AAAwB,KAC1B,CAAA;AAEA,IAAM,OAAA,CAAA,IAAA,aAAsB;AAC1B,MAAA,OAAOA,SAAU,EAAA,EAAAC,kBAAkB,CAAA,KAAA,EAAA;AAAA,QACpC,OAAA,EAAA,YAAA;AAED,QAAA,GAAQ,EAAA,UAAO;AAEf,QAAA,qBAA+B,CAAAC,KAAA,CAAA,YAAA,CAAA,CAAA;AAC7B,QAAA,KAAY,EAAAC,cAAA,CAAAD,KAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA;AAAA,QACd,WAAA,EAAAA,KAAA,CAAA,IAAA,CAAA;AAEA,QAAM,QAAA,EAAA,IAAA;AACJ,OAAI,EAAA;AACF,QAAAE,WAAqB,CAAAF,KAAA,CAAA,WAAA,CAAA,EAAA;AAAA,UACvB,IAAA,EAAA,EAAA;AAAA,UACF,OAAA,EAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,37 @@
import type { CSSProperties, Component, InjectionKey, Ref, SetupContext } from 'vue';
import type { UseNamespaceReturn } from 'element-plus/es/hooks';
import type { TourGap, TourMask } from './types';
import type { Placement, Strategy, VirtualElement } from '@floating-ui/dom';
import type { TourStepProps } from './step';
export declare const useTarget: (target: Ref<string | HTMLElement | (() => HTMLElement | null) | null | undefined>, open: Ref<boolean>, gap: Ref<TourGap>, mergedMask: Ref<TourMask>, scrollIntoViewOptions: Ref<boolean | ScrollIntoViewOptions>) => {
mergedPosInfo: import("vue").ComputedRef<{
left: number;
top: number;
width: number;
height: number;
radius: number;
} | null>;
triggerTarget: import("vue").ComputedRef<HTMLElement | {
getBoundingClientRect(): DOMRect;
} | undefined>;
};
export interface TourContext {
currentStep: Ref<TourStepProps | undefined>;
current: Ref<number>;
total: Ref<number>;
showClose: Ref<boolean>;
closeIcon: Ref<string | Component | undefined>;
mergedType: Ref<'default' | 'primary' | undefined>;
ns: UseNamespaceReturn;
slots: SetupContext['slots'];
updateModelValue(modelValue: boolean): void;
onClose(): void;
onFinish(): void;
onChange(): void;
}
export declare const tourKey: InjectionKey<TourContext>;
export 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>) => {
update: () => Promise<void>;
contentStyle: import("vue").ComputedRef<CSSProperties>;
arrowStyle: import("vue").ComputedRef<CSSProperties>;
};

View File

@@ -0,0 +1,208 @@
import { ref, onMounted, watch, onBeforeUnmount, computed, unref, watchEffect } from 'vue';
import { offset, flip, shift, detectOverflow, arrow, computePosition, autoUpdate } from '@floating-ui/dom';
import { isArray, isString, isFunction } from '@vue/shared';
import { isClient } from '@vueuse/core';
import { keysOf } from '../../../utils/objects.mjs';
const useTarget = (target, open, gap, mergedMask, scrollIntoViewOptions) => {
const posInfo = ref(null);
const getTargetEl = () => {
let targetEl;
if (isString(target.value)) {
targetEl = document.querySelector(target.value);
} else if (isFunction(target.value)) {
targetEl = target.value();
} else {
targetEl = target.value;
}
return targetEl;
};
const updatePosInfo = () => {
const targetEl = getTargetEl();
if (!targetEl || !open.value) {
posInfo.value = null;
return;
}
if (!isInViewPort(targetEl)) {
targetEl.scrollIntoView(scrollIntoViewOptions.value);
}
const { left, top, width, height } = targetEl.getBoundingClientRect();
posInfo.value = {
left,
top,
width,
height,
radius: 0
};
};
onMounted(() => {
watch([open, target], () => {
updatePosInfo();
}, {
immediate: true
});
window.addEventListener("resize", updatePosInfo);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", updatePosInfo);
});
const getGapOffset = (index) => {
var _a;
return (_a = isArray(gap.value.offset) ? gap.value.offset[index] : gap.value.offset) != null ? _a : 6;
};
const mergedPosInfo = computed(() => {
var _a;
if (!posInfo.value)
return posInfo.value;
const gapOffsetX = getGapOffset(0);
const gapOffsetY = getGapOffset(1);
const gapRadius = ((_a = gap.value) == null ? void 0 : _a.radius) || 2;
return {
left: posInfo.value.left - gapOffsetX,
top: posInfo.value.top - gapOffsetY,
width: posInfo.value.width + gapOffsetX * 2,
height: posInfo.value.height + gapOffsetY * 2,
radius: gapRadius
};
});
const triggerTarget = computed(() => {
const targetEl = getTargetEl();
if (!mergedMask.value || !targetEl || !window.DOMRect) {
return targetEl || void 0;
}
return {
getBoundingClientRect() {
var _a, _b, _c, _d;
return window.DOMRect.fromRect({
width: ((_a = mergedPosInfo.value) == null ? void 0 : _a.width) || 0,
height: ((_b = mergedPosInfo.value) == null ? void 0 : _b.height) || 0,
x: ((_c = mergedPosInfo.value) == null ? void 0 : _c.left) || 0,
y: ((_d = mergedPosInfo.value) == null ? void 0 : _d.top) || 0
});
}
};
});
return {
mergedPosInfo,
triggerTarget
};
};
const tourKey = Symbol("ElTour");
function isInViewPort(element) {
const viewWidth = window.innerWidth || document.documentElement.clientWidth;
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
const { top, right, bottom, left } = element.getBoundingClientRect();
return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
}
const useFloating = (referenceRef, contentRef, arrowRef, placement, strategy, offset$1, zIndex, showArrow) => {
const x = ref();
const y = ref();
const middlewareData = ref({});
const states = {
x,
y,
placement,
strategy,
middlewareData
};
const middleware = computed(() => {
const _middleware = [
offset(unref(offset$1)),
flip(),
shift(),
overflowMiddleware()
];
if (unref(showArrow) && unref(arrowRef)) {
_middleware.push(arrow({
element: unref(arrowRef)
}));
}
return _middleware;
});
const update = async () => {
if (!isClient)
return;
const referenceEl = unref(referenceRef);
const contentEl = unref(contentRef);
if (!referenceEl || !contentEl)
return;
const data = await computePosition(referenceEl, contentEl, {
placement: unref(placement),
strategy: unref(strategy),
middleware: unref(middleware)
});
keysOf(states).forEach((key) => {
states[key].value = data[key];
});
};
const contentStyle = computed(() => {
if (!unref(referenceRef)) {
return {
position: "fixed",
top: "50%",
left: "50%",
transform: "translate3d(-50%, -50%, 0)",
maxWidth: "100vw",
zIndex: unref(zIndex)
};
}
const { overflow } = unref(middlewareData);
return {
position: unref(strategy),
zIndex: unref(zIndex),
top: unref(y) != null ? `${unref(y)}px` : "",
left: unref(x) != null ? `${unref(x)}px` : "",
maxWidth: (overflow == null ? void 0 : overflow.maxWidth) ? `${overflow == null ? void 0 : overflow.maxWidth}px` : ""
};
});
const arrowStyle = computed(() => {
if (!unref(showArrow))
return {};
const { arrow: arrow2 } = unref(middlewareData);
return {
left: (arrow2 == null ? void 0 : arrow2.x) != null ? `${arrow2 == null ? void 0 : arrow2.x}px` : "",
top: (arrow2 == null ? void 0 : arrow2.y) != null ? `${arrow2 == null ? void 0 : arrow2.y}px` : ""
};
});
let cleanup;
onMounted(() => {
const referenceEl = unref(referenceRef);
const contentEl = unref(contentRef);
if (referenceEl && contentEl) {
cleanup = autoUpdate(referenceEl, contentEl, update);
}
watchEffect(() => {
update();
});
});
onBeforeUnmount(() => {
cleanup && cleanup();
});
return {
update,
contentStyle,
arrowStyle
};
};
const overflowMiddleware = () => {
return {
name: "overflow",
async fn(state) {
const overflow = await detectOverflow(state);
let overWidth = 0;
if (overflow.left > 0)
overWidth = overflow.left;
if (overflow.right > 0)
overWidth = overflow.right;
const floatingWidth = state.rects.floating.width;
return {
data: {
maxWidth: floatingWidth - overWidth
}
};
}
};
};
export { tourKey, useFloating, useTarget };
//# sourceMappingURL=helper.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,16 @@
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
import type { PosInfo } from './types';
export declare const maskProps: {
zIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
visible: BooleanConstructor;
fill: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
pos: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => PosInfo) | (() => PosInfo | null) | ((new (...args: any[]) => PosInfo) | (() => PosInfo | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
targetAreaClickable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
};
export type MaskProps = ExtractPropTypes<typeof maskProps>;
export type MaskPropsPublic = __ExtractPublicPropTypes<typeof maskProps>;

View File

@@ -0,0 +1,23 @@
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
const maskProps = buildProps({
zIndex: {
type: Number,
default: 1001
},
visible: Boolean,
fill: {
type: String,
default: "rgba(0,0,0,0.5)"
},
pos: {
type: definePropType(Object)
},
targetAreaClickable: {
type: Boolean,
default: true
}
});
export { maskProps };
//# sourceMappingURL=mask.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"mask.mjs","sources":["../../../../../../packages/components/tour/src/mask.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type { PosInfo } from './types'\n\nexport const maskProps = buildProps({\n /**\n * @description mask's zIndex\n */\n zIndex: {\n type: Number,\n default: 1001,\n },\n /**\n * @description whether to show the mask\n */\n visible: Boolean,\n /**\n * @description mask's fill\n */\n fill: {\n type: String,\n default: 'rgba(0,0,0,0.5)',\n },\n /***\n * @description mask's transparent space position\n */\n pos: {\n type: definePropType<PosInfo | null>(Object),\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\nexport type MaskProps = ExtractPropTypes<typeof maskProps>\nexport type MaskPropsPublic = __ExtractPublicPropTypes<typeof maskProps>\n"],"names":[],"mappings":";;AACY,MAAC,SAAS,GAAG,UAAU,CAAC;AACpC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,iBAAiB;AAC9B,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,mBAAmB,EAAE;AACvB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC;;;;"}

View File

@@ -0,0 +1,29 @@
declare const _default: import("vue").DefineComponent<{
zIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
visible: BooleanConstructor;
fill: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
pos: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("./types").PosInfo) | (() => import("./types").PosInfo | null) | ((new (...args: any[]) => import("./types").PosInfo) | (() => import("./types").PosInfo | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
targetAreaClickable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
zIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
visible: BooleanConstructor;
fill: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
pos: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("./types").PosInfo) | (() => import("./types").PosInfo | null) | ((new (...args: any[]) => import("./types").PosInfo) | (() => import("./types").PosInfo | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
targetAreaClickable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
}>>, {
fill: string;
zIndex: number;
visible: boolean;
targetAreaClickable: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
}>;
export default _default;

View File

@@ -0,0 +1,81 @@
import { defineComponent, inject, computed, toRef, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode } from 'vue';
import { useWindowSize } from '@vueuse/core';
import { maskProps } from './mask.mjs';
import { tourKey } from './helper.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useLockscreen } from '../../../hooks/use-lockscreen/index.mjs';
const __default__ = defineComponent({
name: "ElTourMask",
inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: maskProps,
setup(__props) {
const props = __props;
const { ns } = inject(tourKey);
const radius = computed(() => {
var _a, _b;
return (_b = (_a = props.pos) == null ? void 0 : _a.radius) != null ? _b : 2;
});
const roundInfo = computed(() => {
const v = radius.value;
const baseInfo = `a${v},${v} 0 0 1`;
return {
topRight: `${baseInfo} ${v},${v}`,
bottomRight: `${baseInfo} ${-v},${v}`,
bottomLeft: `${baseInfo} ${-v},${-v}`,
topLeft: `${baseInfo} ${v},${-v}`
};
});
const { width: windowWidth, height: windowHeight } = useWindowSize();
const path = computed(() => {
const width = windowWidth.value;
const height = windowHeight.value;
const info = roundInfo.value;
const _path = `M${width},0 L0,0 L0,${height} L${width},${height} L${width},0 Z`;
const _radius = radius.value;
return props.pos ? `${_path} M${props.pos.left + _radius},${props.pos.top} h${props.pos.width - _radius * 2} ${info.topRight} v${props.pos.height - _radius * 2} ${info.bottomRight} h${-props.pos.width + _radius * 2} ${info.bottomLeft} v${-props.pos.height + _radius * 2} ${info.topLeft} z` : _path;
});
const maskStyle = computed(() => ({
position: "fixed",
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: props.zIndex,
pointerEvents: props.pos && props.targetAreaClickable ? "none" : "auto"
}));
const pathStyle = computed(() => ({
fill: props.fill,
pointerEvents: "auto",
cursor: "auto"
}));
useLockscreen(toRef(props, "visible"), {
ns
});
return (_ctx, _cache) => {
return _ctx.visible ? (openBlock(), createElementBlock("div", mergeProps({
key: 0,
class: unref(ns).e("mask"),
style: unref(maskStyle)
}, _ctx.$attrs), [
(openBlock(), createElementBlock("svg", { style: {
width: "100%",
height: "100%"
} }, [
createElementVNode("path", {
class: normalizeClass(unref(ns).e("hollow")),
style: normalizeStyle(unref(pathStyle)),
d: unref(path)
}, null, 14, ["d"])
]))
], 16)) : createCommentVNode("v-if", true);
};
}
});
var ElTourMask = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "mask.vue"]]);
export { ElTourMask as default };
//# sourceMappingURL=mask2.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"mask2.mjs","sources":["../../../../../../packages/components/tour/src/mask.vue"],"sourcesContent":["<template>\n <div v-if=\"visible\" :class=\"ns.e('mask')\" :style=\"maskStyle\" v-bind=\"$attrs\">\n <svg\n :style=\"{\n width: '100%',\n height: '100%',\n }\"\n >\n <path :class=\"ns.e('hollow')\" :style=\"pathStyle\" :d=\"path\" />\n </svg>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, inject, toRef } from 'vue'\nimport { useLockscreen } from '@element-plus/hooks'\nimport { useWindowSize } from '@vueuse/core'\nimport { maskProps } from './mask'\nimport { tourKey } from './helper'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElTourMask',\n inheritAttrs: false,\n})\n\nconst props = defineProps(maskProps)\n\nconst { ns } = inject(tourKey)!\nconst radius = computed(() => props.pos?.radius ?? 2)\nconst roundInfo = computed(() => {\n const v = radius.value\n const baseInfo = `a${v},${v} 0 0 1`\n return {\n topRight: `${baseInfo} ${v},${v}`,\n bottomRight: `${baseInfo} ${-v},${v}`,\n bottomLeft: `${baseInfo} ${-v},${-v}`,\n topLeft: `${baseInfo} ${v},${-v}`,\n }\n})\n\nconst { width: windowWidth, height: windowHeight } = useWindowSize()\n\nconst path = computed(() => {\n const width = windowWidth.value\n const height = windowHeight.value\n const info = roundInfo.value\n const _path = `M${width},0 L0,0 L0,${height} L${width},${height} L${width},0 Z`\n const _radius = radius.value\n return props.pos\n ? `${_path} M${props.pos.left + _radius},${props.pos.top} h${\n props.pos.width - _radius * 2\n } ${info.topRight} v${props.pos.height - _radius * 2} ${\n info.bottomRight\n } h${-props.pos.width + _radius * 2} ${info.bottomLeft} v${\n -props.pos.height + _radius * 2\n } ${info.topLeft} z`\n : _path\n})\n\nconst maskStyle = computed<CSSProperties>(() => ({\n position: 'fixed',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n zIndex: props.zIndex,\n pointerEvents: props.pos && props.targetAreaClickable ? 'none' : 'auto',\n}))\n\nconst pathStyle = computed<CSSProperties>(() => ({\n fill: props.fill,\n pointerEvents: 'auto',\n cursor: 'auto',\n}))\n\nuseLockscreen(toRef(props, 'visible'), {\n ns,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;mCAsBc,CAAA;AAAA,EACZ,IAAM,EAAA,YAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA,CAAA;;;;;;AAIA,IAAA,MAAM,EAAE,EAAA,EAAO,GAAA,MAAA,CAAO,OAAO,CAAA,CAAA;AAC7B,IAAA,MAAM,SAAS,QAAS,CAAA,MAAM;AAC9B,MAAM,IAAA,EAAA,EAAA,EAAA,CAAA;AACJ,MAAA,UAAU,GAAO,CAAA,EAAA,GAAA,KAAA,CAAA,GAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,KAAA,IAAA,GAAA,EAAA,GAAA,CAAA,CAAA;AACjB,KAAA,CAAA,CAAA;AACA,IAAO,MAAA,SAAA,GAAA,QAAA,CAAA,MAAA;AAAA,MAAA,gBACQ,CAAA,KAAA,CAAQ;AAAU,MAAA,iBACf,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,EAAQ,UAAU;AAAC,MACnC,OAAA;AAAmC,QACnC,UAAY,CAAA,EAAA,YAAa,CAAA,CAAA,CAAA,EAAK,CAAC,CAAA,CAAA;AAAA,QACjC,WAAA,EAAA,CAAA,EAAA,QAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AAAA,QACD,UAAA,EAAA,CAAA,EAAA,QAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA;AAED,QAAA,OAAe,EAAA,CAAA,EAAA,QAAA,CAAA,CAAA,EAAa,CAAQ,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA;AAEpC,OAAM,CAAA;AACJ,KAAA,CAAA,CAAA;AACA,IAAA,MAAA,EAAM,kBAAsB,EAAA,MAAA,EAAA,YAAA,EAAA,GAAA,aAAA,EAAA,CAAA;AAC5B,IAAA,MAAA,eAAuB,CAAA,MAAA;AACvB,MAAM,MAAA,KAAA,GAAQ,WAAuB,CAAA,KAAA,CAAA;AACrC,MAAA,MAAM,qBAAiB,CAAA,KAAA,CAAA;AACvB,MAAO,MAAA,IAAA,GAAM,SACN,CAAA;AAOH,MACL,MAAA,KAAA,GAAA,CAAA,CAAA,EAAA,KAAA,CAAA,WAAA,EAAA,MAAA,CAAA,EAAA,EAAA,KAAA,CAAA,CAAA,EAAA,MAAA,CAAA,EAAA,EAAA,KAAA,CAAA,IAAA,CAAA,CAAA;AAED,MAAM,MAAA,OAAA,GAAY,YAA+B,CAAA;AAAA,MAC/C,OAAU,KAAA,CAAA,GAAA,GAAA,CAAA,EAAA,KAAA,CAAA,EAAA,EAAA,KAAA,CAAA,GAAA,CAAA,IAAA,GAAA,OAAA,CAAA,CAAA,EAAA,KAAA,CAAA,GAAA,CAAA,GAAA,CAAA,EAAA,EAAA,KAAA,CAAA,GAAA,CAAA,KAAA,GAAA,OAAA,GAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,QAAA,CAAA,EAAA,EAAA,KAAA,CAAA,GAAA,CAAA,MAAA,GAAA,OAAA,GAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,WAAA,CAAA,EAAA,EAAA,CAAA,KAAA,CAAA,GAAA,CAAA,KAAA,GAAA,OAAA,GAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,UAAA,CAAA,EAAA,EAAA,CAAA,KAAA,CAAA,GAAA,CAAA,MAAA,GAAA,OAAA,GAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,OAAA,CAAA,EAAA,CAAA,GAAA,KAAA,CAAA;AAAA,KAAA,CACV,CAAM;AAAA,IAAA,MACC,SAAA,GAAA,QAAA,CAAA,OAAA;AAAA,MACP,QAAK,EAAA,OAAA;AAAA,MACL,IAAQ,EAAA,CAAA;AAAA,MACR,QAAQ;AAAM,MACd,GAAe,EAAA,CAAA;AAAkD,MACjE,MAAA,EAAA,CAAA;AAEF,MAAM,MAAA,EAAA,KAAA,CAAA;AAA2C,MAC/C,aAAY,EAAA,KAAA,CAAA,GAAA,IAAA,KAAA,CAAA,mBAAA,GAAA,MAAA,GAAA,MAAA;AAAA,KAAA,CACZ,CAAe,CAAA;AAAA,IAAA,MACP,SAAA,GAAA,QAAA,CAAA,OAAA;AAAA,MACR,IAAA,EAAA,KAAA,CAAA,IAAA;AAEF,MAAc,aAAA,EAAA,MAAa;AAAY,MACrC,MAAA,EAAA,MAAA;AAAA,KACD,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,59 @@
import type { CSSProperties, ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
import type { TourBtnProps, TourMask } from './types';
export declare const tourStepProps: {
target: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null) | ((new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
title: StringConstructor;
description: StringConstructor;
showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
mask: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask) | ((new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask))[], unknown, unknown, undefined, boolean>;
contentStyle: {
readonly type: import("vue").PropType<CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
prevButtonProps: {
readonly type: import("vue").PropType<TourBtnProps>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
nextButtonProps: {
readonly type: import("vue").PropType<TourBtnProps>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | ((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions))[], unknown, unknown, undefined, boolean>;
type: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | ((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary"))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
export type TourStepProps = ExtractPropTypes<typeof tourStepProps>;
export type TourStepPropsPublic = __ExtractPublicPropTypes<typeof tourStepProps>;
export declare const tourStepEmits: {
close: () => boolean;
};
export type TourStepEmits = typeof tourStepEmits;

View File

@@ -0,0 +1,49 @@
import { tourContentProps } from './content.mjs';
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
import { iconPropType } from '../../../utils/vue/icon.mjs';
const tourStepProps = buildProps({
target: {
type: definePropType([String, Object, Function])
},
title: String,
description: String,
showClose: {
type: Boolean,
default: void 0
},
closeIcon: {
type: iconPropType
},
showArrow: {
type: Boolean,
default: void 0
},
placement: tourContentProps.placement,
mask: {
type: definePropType([Boolean, Object]),
default: void 0
},
contentStyle: {
type: definePropType([Object])
},
prevButtonProps: {
type: definePropType(Object)
},
nextButtonProps: {
type: definePropType(Object)
},
scrollIntoViewOptions: {
type: definePropType([Boolean, Object]),
default: void 0
},
type: {
type: definePropType(String)
}
});
const tourStepEmits = {
close: () => true
};
export { tourStepEmits, tourStepProps };
//# sourceMappingURL=step.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"step.mjs","sources":["../../../../../../packages/components/tour/src/step.ts"],"sourcesContent":["import { buildProps, definePropType, iconPropType } from '@element-plus/utils'\nimport { tourContentProps } from './content'\n\nimport type {\n CSSProperties,\n ExtractPropTypes,\n __ExtractPublicPropTypes,\n} from 'vue'\nimport type { TourBtnProps, TourMask } from './types'\n\nexport const tourStepProps = buildProps({\n /**\n * @description get the element the guide card points to. empty makes it show in center of screen\n */\n target: {\n type: definePropType<\n string | HTMLElement | (() => HTMLElement | null) | null\n >([String, Object, Function]),\n },\n /**\n * @description the title of the tour content\n */\n title: String,\n /**\n * @description description\n */\n description: String,\n /**\n * @description whether to show a close button\n */\n showClose: {\n type: Boolean,\n default: undefined,\n },\n /**\n * @description custom close icon, default is Close\n */\n closeIcon: {\n type: iconPropType,\n },\n /**\n * @description whether to show the arrow\n */\n showArrow: {\n type: Boolean,\n default: undefined,\n },\n /**\n * @description position of the guide card relative to the target element\n */\n placement: tourContentProps.placement,\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: undefined,\n },\n /**\n * @description custom style for content\n */\n contentStyle: {\n type: definePropType<CSSProperties>([Object]),\n },\n /**\n * @description properties of the previous button\n */\n prevButtonProps: {\n type: definePropType<TourBtnProps>(Object),\n },\n /**\n * @description properties of the Next button\n */\n nextButtonProps: {\n type: definePropType<TourBtnProps>(Object),\n },\n /**\n * @description support pass custom scrollIntoView options\n */\n scrollIntoViewOptions: {\n type: definePropType<boolean | ScrollIntoViewOptions>([Boolean, Object]),\n default: undefined,\n },\n /**\n * @description type, affects the background color and text color\n */\n type: {\n type: definePropType<'default' | 'primary'>(String),\n },\n})\n\nexport type TourStepProps = ExtractPropTypes<typeof tourStepProps>\nexport type TourStepPropsPublic = __ExtractPublicPropTypes<typeof tourStepProps>\n\nexport const tourStepEmits = {\n close: () => true,\n}\nexport type TourStepEmits = typeof tourStepEmits\n"],"names":[],"mappings":";;;;AAEY,MAAC,aAAa,GAAG,UAAU,CAAC;AACxC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AACpD,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,WAAW,EAAE,MAAM;AACrB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,YAAY;AACtB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,SAAS,EAAE,gBAAgB,CAAC,SAAS;AACvC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC3C,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAClC,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,qBAAqB,EAAE;AACzB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC3C,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,CAAC,EAAE;AACS,MAAC,aAAa,GAAG;AAC7B,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB;;;;"}

View File

@@ -0,0 +1,123 @@
import type { TourBtnProps } from './types';
declare function __VLS_template(): {
header?(_: {}): any;
default?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
target: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null) | ((new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
title: StringConstructor;
description: StringConstructor;
showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
mask: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | {
style?: import("vue").CSSProperties;
color?: string;
}) | (() => import("./types").TourMask) | ((new (...args: any[]) => boolean | {
style?: import("vue").CSSProperties;
color?: string;
}) | (() => import("./types").TourMask))[], unknown, unknown, undefined, boolean>;
contentStyle: {
readonly type: import("vue").PropType<import("vue").CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
prevButtonProps: {
readonly type: import("vue").PropType<TourBtnProps>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
nextButtonProps: {
readonly type: import("vue").PropType<TourBtnProps>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | ((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions))[], unknown, unknown, undefined, boolean>;
type: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | ((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary"))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
close: () => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
target: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null) | ((new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
title: StringConstructor;
description: StringConstructor;
showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
mask: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | {
style?: import("vue").CSSProperties;
color?: string;
}) | (() => import("./types").TourMask) | ((new (...args: any[]) => boolean | {
style?: import("vue").CSSProperties;
color?: string;
}) | (() => import("./types").TourMask))[], unknown, unknown, undefined, boolean>;
contentStyle: {
readonly type: import("vue").PropType<import("vue").CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
prevButtonProps: {
readonly type: import("vue").PropType<TourBtnProps>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
nextButtonProps: {
readonly type: import("vue").PropType<TourBtnProps>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | ((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions))[], unknown, unknown, undefined, boolean>;
type: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | ((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary"))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & {
onClose?: (() => any) | undefined;
}, {
mask: import("./types").TourMask;
placement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown>;
scrollIntoViewOptions: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | ((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions))[], unknown, unknown>;
showArrow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
showClose: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,194 @@
import { defineComponent, inject, watch, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, unref, normalizeClass, createVNode, withCtx, createBlock, resolveDynamicComponent, createCommentVNode, createElementVNode, renderSlot, toDisplayString, renderList, mergeProps, createTextVNode } from 'vue';
import { omit } from 'lodash-unified';
import { ElButton } from '../../button/index.mjs';
import { ElIcon } from '../../icon/index.mjs';
import { tourStepProps, tourStepEmits } from './step.mjs';
import { tourKey } from './helper.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { CloseComponents } from '../../../utils/vue/icon.mjs';
import { EVENT_CODE } from '../../../constants/aria.mjs';
const __default__ = defineComponent({
name: "ElTourStep"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: tourStepProps,
emits: tourStepEmits,
setup(__props, { emit }) {
const props = __props;
const { Close } = CloseComponents;
const { t } = useLocale();
const {
currentStep,
current,
total,
showClose,
closeIcon,
mergedType,
ns,
slots: tourSlots,
updateModelValue,
onClose: tourOnClose,
onFinish: tourOnFinish,
onChange
} = inject(tourKey);
watch(props, (val) => {
currentStep.value = val;
}, {
immediate: true
});
const mergedShowClose = computed(() => {
var _a;
return (_a = props.showClose) != null ? _a : showClose.value;
});
const mergedCloseIcon = computed(() => {
var _a, _b;
return (_b = (_a = props.closeIcon) != null ? _a : closeIcon.value) != null ? _b : Close;
});
const filterButtonProps = (btnProps) => {
if (!btnProps)
return;
return omit(btnProps, ["children", "onClick"]);
};
const onPrev = () => {
var _a, _b;
current.value -= 1;
if ((_a = props.prevButtonProps) == null ? void 0 : _a.onClick) {
(_b = props.prevButtonProps) == null ? void 0 : _b.onClick();
}
onChange();
};
const onNext = () => {
var _a;
if (current.value >= total.value - 1) {
onFinish();
} else {
current.value += 1;
}
if ((_a = props.nextButtonProps) == null ? void 0 : _a.onClick) {
props.nextButtonProps.onClick();
}
onChange();
};
const onFinish = () => {
onClose();
tourOnFinish();
};
const onClose = () => {
updateModelValue(false);
tourOnClose();
emit("close");
};
const handleKeydown = (e) => {
const target = e.target;
if (target == null ? void 0 : target.isContentEditable)
return;
const actions = {
[EVENT_CODE.left]: () => current.value > 0 && onPrev(),
[EVENT_CODE.right]: onNext
};
const action = actions[e.code];
if (action) {
e.preventDefault();
action();
}
};
onMounted(() => {
window.addEventListener("keydown", handleKeydown);
});
onBeforeUnmount(() => {
window.removeEventListener("keydown", handleKeydown);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
unref(mergedShowClose) ? (openBlock(), createElementBlock("button", {
key: 0,
"aria-label": unref(t)("el.tour.close"),
class: normalizeClass(unref(ns).e("closebtn")),
type: "button",
onClick: onClose
}, [
createVNode(unref(ElIcon), {
class: normalizeClass(unref(ns).e("close"))
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(unref(mergedCloseIcon))))
]),
_: 1
}, 8, ["class"])
], 10, ["aria-label"])) : createCommentVNode("v-if", true),
createElementVNode("header", {
class: normalizeClass([unref(ns).e("header"), { "show-close": unref(showClose) }])
}, [
renderSlot(_ctx.$slots, "header", {}, () => [
createElementVNode("span", {
role: "heading",
class: normalizeClass(unref(ns).e("title"))
}, toDisplayString(_ctx.title), 3)
])
], 2),
createElementVNode("div", {
class: normalizeClass(unref(ns).e("body"))
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createElementVNode("span", null, toDisplayString(_ctx.description), 1)
])
], 2),
createElementVNode("footer", {
class: normalizeClass(unref(ns).e("footer"))
}, [
createElementVNode("div", {
class: normalizeClass(unref(ns).b("indicators"))
}, [
unref(tourSlots).indicators ? (openBlock(), createBlock(resolveDynamicComponent(unref(tourSlots).indicators), {
key: 0,
current: unref(current),
total: unref(total)
}, null, 8, ["current", "total"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(total), (item, index) => {
return openBlock(), createElementBlock("span", {
key: item,
class: normalizeClass([unref(ns).b("indicator"), index === unref(current) ? "is-active" : ""])
}, null, 2);
}), 128))
], 2),
createElementVNode("div", {
class: normalizeClass(unref(ns).b("buttons"))
}, [
unref(current) > 0 ? (openBlock(), createBlock(unref(ElButton), mergeProps({
key: 0,
size: "small",
type: unref(mergedType)
}, filterButtonProps(_ctx.prevButtonProps), { onClick: onPrev }), {
default: withCtx(() => {
var _a, _b;
return [
createTextVNode(toDisplayString((_b = (_a = _ctx.prevButtonProps) == null ? void 0 : _a.children) != null ? _b : unref(t)("el.tour.previous")), 1)
];
}),
_: 1
}, 16, ["type"])) : createCommentVNode("v-if", true),
unref(current) <= unref(total) - 1 ? (openBlock(), createBlock(unref(ElButton), mergeProps({
key: 1,
size: "small",
type: unref(mergedType) === "primary" ? "default" : "primary"
}, filterButtonProps(_ctx.nextButtonProps), { onClick: onNext }), {
default: withCtx(() => {
var _a, _b;
return [
createTextVNode(toDisplayString((_b = (_a = _ctx.nextButtonProps) == null ? void 0 : _a.children) != null ? _b : unref(current) === unref(total) - 1 ? unref(t)("el.tour.finish") : unref(t)("el.tour.next")), 1)
];
}),
_: 1
}, 16, ["type"])) : createCommentVNode("v-if", true)
], 2)
], 2)
], 64);
};
}
});
var TourStep = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "step.vue"]]);
export { TourStep as default };
//# sourceMappingURL=step2.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,19 @@
import type { VNode } from 'vue';
declare const _default: import("vue").DefineComponent<{
current: {
type: NumberConstructor;
default: number;
};
}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update-total"[], "update-total", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
current: {
type: NumberConstructor;
default: number;
};
}>> & {
"onUpdate-total"?: ((...args: any[]) => any) | undefined;
}, {
current: number;
}>;
export default _default;

View File

@@ -0,0 +1,49 @@
import { defineComponent } from 'vue';
import { flattedChildren } from '../../../utils/vue/vnode.mjs';
import { isArray } from '@vue/shared';
var ElTourSteps = defineComponent({
name: "ElTourSteps",
props: {
current: {
type: Number,
default: 0
}
},
emits: ["update-total"],
setup(props, { slots, emit }) {
let cacheTotal = 0;
return () => {
var _a, _b;
const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
const result = [];
let total = 0;
function filterSteps(children2) {
if (!isArray(children2))
return;
children2.forEach((item) => {
var _a2;
const name = (_a2 = (item == null ? void 0 : item.type) || {}) == null ? void 0 : _a2.name;
if (name === "ElTourStep") {
result.push(item);
total += 1;
}
});
}
if (children.length) {
filterSteps(flattedChildren((_b = children[0]) == null ? void 0 : _b.children));
}
if (cacheTotal !== total) {
cacheTotal = total;
emit("update-total", total);
}
if (result.length) {
return result[props.current];
}
return null;
};
}
});
export { ElTourSteps as default };
//# sourceMappingURL=steps.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"steps.mjs","sources":["../../../../../../packages/components/tour/src/steps.ts"],"sourcesContent":["import { defineComponent } from 'vue'\nimport { flattedChildren, isArray } from '@element-plus/utils'\n\nimport type { FlattenVNodes } from '@element-plus/utils'\nimport type { Component, VNode } from 'vue'\n\nexport default defineComponent({\n name: 'ElTourSteps',\n props: {\n current: {\n type: Number,\n default: 0,\n },\n },\n emits: ['update-total'],\n setup(props, { slots, emit }) {\n let cacheTotal = 0\n\n return () => {\n const children = slots.default?.()!\n const result: VNode[] = []\n let total = 0\n\n function filterSteps(children?: FlattenVNodes) {\n if (!isArray(children)) return\n ;(children as VNode[]).forEach((item) => {\n const name = ((item?.type || {}) as Component)?.name\n\n if (name === 'ElTourStep') {\n result.push(item)\n total += 1\n }\n })\n }\n\n if (children.length) {\n filterSteps(flattedChildren(children![0]?.children))\n }\n\n if (cacheTotal !== total) {\n cacheTotal = total\n emit('update-total', total)\n }\n\n if (result.length) {\n return result[props.current]\n }\n return null\n }\n },\n})\n"],"names":[],"mappings":";;;;AAEA,kBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,aAAa;AACrB,EAAE,KAAK,EAAE;AACT,IAAI,OAAO,EAAE;AACb,MAAM,IAAI,EAAE,MAAM;AAClB,MAAM,OAAO,EAAE,CAAC;AAChB,KAAK;AACL,GAAG;AACH,EAAE,KAAK,EAAE,CAAC,cAAc,CAAC;AACzB,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;AAChC,IAAI,IAAI,UAAU,GAAG,CAAC,CAAC;AACvB,IAAI,OAAO,MAAM;AACjB,MAAM,IAAI,EAAE,EAAE,EAAE,CAAC;AACjB,MAAM,MAAM,QAAQ,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC9E,MAAM,MAAM,MAAM,GAAG,EAAE,CAAC;AACxB,MAAM,IAAI,KAAK,GAAG,CAAC,CAAC;AACpB,MAAM,SAAS,WAAW,CAAC,SAAS,EAAE;AACtC,QAAQ,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/B,UAAU,OAAO;AACjB,QAAQ,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK;AACpC,UAAU,IAAI,GAAG,CAAC;AAClB,UAAU,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,KAAK,EAAE,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC;AACrG,UAAU,IAAI,IAAI,KAAK,YAAY,EAAE;AACrC,YAAY,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9B,YAAY,KAAK,IAAI,CAAC,CAAC;AACvB,WAAW;AACX,SAAS,CAAC,CAAC;AACX,OAAO;AACP,MAAM,IAAI,QAAQ,CAAC,MAAM,EAAE;AAC3B,QAAQ,WAAW,CAAC,eAAe,CAAC,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AACxF,OAAO;AACP,MAAM,IAAI,UAAU,KAAK,KAAK,EAAE;AAChC,QAAQ,UAAU,GAAG,KAAK,CAAC;AAC3B,QAAQ,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;AACpC,OAAO;AACP,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE;AACzB,QAAQ,OAAO,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACrC,OAAO;AACP,MAAM,OAAO,IAAI,CAAC;AAClB,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;"}

View File

@@ -0,0 +1,62 @@
import type { CSSProperties, ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
import type Tour from './tour.vue';
import type { TourGap, TourMask } from './types';
export declare const tourProps: {
modelValue: BooleanConstructor;
current: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
contentStyle: {
readonly type: import("vue").PropType<CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
mask: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask) | ((new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask))[], unknown, unknown, boolean, boolean>;
gap: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => TourGap) | (() => TourGap) | ((new (...args: any[]) => TourGap) | (() => TourGap))[], unknown, unknown, () => {
offset: number;
radius: number;
}, boolean>;
zIndex: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | ((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions))[], unknown, unknown, () => {
block: string;
}, boolean>;
type: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | ((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary"))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
appendTo: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown, string, boolean>;
closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
targetAreaClickable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
};
export type TourProps = ExtractPropTypes<typeof tourProps>;
export type TourPropsPublic = __ExtractPublicPropTypes<typeof tourProps>;
export type TourInstance = InstanceType<typeof Tour> & unknown;
export declare const tourEmits: {
"update:modelValue": (value: boolean) => boolean;
"update:current": (current: number) => boolean;
close: (current: number) => boolean;
finish: () => boolean;
change: (current: number) => boolean;
};
export type TourEmits = typeof tourEmits;

View File

@@ -0,0 +1,159 @@
import { defineComponent, ref, computed, toRef, watch, useSlots, provide, openBlock, createElementBlock, Fragment, createVNode, unref, withCtx, createElementVNode, mergeProps, normalizeStyle, createBlock, renderSlot, createCommentVNode } from 'vue';
import { useVModel } from '@vueuse/core';
import { ElTeleport } from '../../teleport/index.mjs';
import ElTourMask from './mask2.mjs';
import ElTourContent from './content2.mjs';
import ElTourSteps from './steps.mjs';
import { tourProps, tourEmits } from './tour2.mjs';
import { useTarget, tourKey } from './helper.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { isBoolean } from '../../../utils/types.mjs';
import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
const __default__ = defineComponent({
name: "ElTour"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: tourProps,
emits: tourEmits,
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("tour");
const total = ref(0);
const currentStep = ref();
const current = useVModel(props, "current", emit, {
passive: true
});
const currentTarget = computed(() => {
var _a;
return (_a = currentStep.value) == null ? void 0 : _a.target;
});
const kls = computed(() => [
ns.b(),
mergedType.value === "primary" ? ns.m("primary") : ""
]);
const mergedPlacement = computed(() => {
var _a;
return ((_a = currentStep.value) == null ? void 0 : _a.placement) || props.placement;
});
const mergedContentStyle = computed(() => {
var _a, _b;
return (_b = (_a = currentStep.value) == null ? void 0 : _a.contentStyle) != null ? _b : props.contentStyle;
});
const mergedMask = computed(() => {
var _a, _b;
return (_b = (_a = currentStep.value) == null ? void 0 : _a.mask) != null ? _b : props.mask;
});
const mergedShowMask = computed(() => !!mergedMask.value && props.modelValue);
const mergedMaskStyle = computed(() => isBoolean(mergedMask.value) ? void 0 : mergedMask.value);
const mergedShowArrow = computed(() => {
var _a, _b;
return !!currentTarget.value && ((_b = (_a = currentStep.value) == null ? void 0 : _a.showArrow) != null ? _b : props.showArrow);
});
const mergedScrollIntoViewOptions = computed(() => {
var _a, _b;
return (_b = (_a = currentStep.value) == null ? void 0 : _a.scrollIntoViewOptions) != null ? _b : props.scrollIntoViewOptions;
});
const mergedType = computed(() => {
var _a, _b;
return (_b = (_a = currentStep.value) == null ? void 0 : _a.type) != null ? _b : props.type;
});
const { nextZIndex } = useZIndex();
const nowZIndex = nextZIndex();
const mergedZIndex = computed(() => {
var _a;
return (_a = props.zIndex) != null ? _a : nowZIndex;
});
const { mergedPosInfo: pos, triggerTarget } = useTarget(currentTarget, toRef(props, "modelValue"), toRef(props, "gap"), mergedMask, mergedScrollIntoViewOptions);
watch(() => props.modelValue, (val) => {
if (!val) {
current.value = 0;
}
});
const onEscClose = () => {
if (props.closeOnPressEscape) {
emit(UPDATE_MODEL_EVENT, false);
emit("close", current.value);
}
};
const onUpdateTotal = (val) => {
total.value = val;
};
const slots = useSlots();
provide(tourKey, {
currentStep,
current,
total,
showClose: toRef(props, "showClose"),
closeIcon: toRef(props, "closeIcon"),
mergedType,
ns,
slots,
updateModelValue(modelValue) {
emit(UPDATE_MODEL_EVENT, modelValue);
},
onClose() {
emit("close", current.value);
},
onFinish() {
emit("finish");
},
onChange() {
emit(CHANGE_EVENT, current.value);
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createVNode(unref(ElTeleport), { to: _ctx.appendTo }, {
default: withCtx(() => {
var _a, _b;
return [
createElementVNode("div", mergeProps({ class: unref(kls) }, _ctx.$attrs), [
createVNode(ElTourMask, {
visible: unref(mergedShowMask),
fill: (_a = unref(mergedMaskStyle)) == null ? void 0 : _a.color,
style: normalizeStyle((_b = unref(mergedMaskStyle)) == null ? void 0 : _b.style),
pos: unref(pos),
"z-index": unref(mergedZIndex),
"target-area-clickable": _ctx.targetAreaClickable
}, null, 8, ["visible", "fill", "style", "pos", "z-index", "target-area-clickable"]),
_ctx.modelValue ? (openBlock(), createBlock(ElTourContent, {
key: unref(current),
reference: unref(triggerTarget),
placement: unref(mergedPlacement),
"show-arrow": unref(mergedShowArrow),
"z-index": unref(mergedZIndex),
style: normalizeStyle(unref(mergedContentStyle)),
onClose: onEscClose
}, {
default: withCtx(() => [
createVNode(unref(ElTourSteps), {
current: unref(current),
onUpdateTotal
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["current"])
]),
_: 3
}, 8, ["reference", "placement", "show-arrow", "z-index", "style"])) : createCommentVNode("v-if", true)
], 16)
];
}),
_: 3
}, 8, ["to"]),
createCommentVNode(" just for IDE "),
createCommentVNode("v-if", true)
], 64);
};
}
});
var Tour = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "tour.vue"]]);
export { Tour as default };
//# sourceMappingURL=tour.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,133 @@
declare function __VLS_template(): {
default?(_: {}): any;
indicators?(_: {
current: number;
total: number;
}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
modelValue: BooleanConstructor;
current: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
contentStyle: {
readonly type: import("vue").PropType<import("vue").CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
mask: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | {
style?: import("vue").CSSProperties;
color?: string;
}) | (() => import("element-plus").TourMask) | ((new (...args: any[]) => boolean | {
style?: import("vue").CSSProperties;
color?: string;
}) | (() => import("element-plus").TourMask))[], unknown, unknown, boolean, boolean>;
gap: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus").TourGap) | (() => import("element-plus").TourGap) | ((new (...args: any[]) => import("element-plus").TourGap) | (() => import("element-plus").TourGap))[], unknown, unknown, () => {
offset: number;
radius: number;
}, boolean>;
zIndex: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | ((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions))[], unknown, unknown, () => {
block: string;
}, boolean>;
type: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | ((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary"))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
appendTo: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown, string, boolean>;
closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
targetAreaClickable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:modelValue": (value: boolean) => void;
change: (current: number) => void;
close: (current: number) => void;
finish: () => void;
"update:current": (current: number) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
modelValue: BooleanConstructor;
current: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
contentStyle: {
readonly type: import("vue").PropType<import("vue").CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
mask: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | {
style?: import("vue").CSSProperties;
color?: string;
}) | (() => import("element-plus").TourMask) | ((new (...args: any[]) => boolean | {
style?: import("vue").CSSProperties;
color?: string;
}) | (() => import("element-plus").TourMask))[], unknown, unknown, boolean, boolean>;
gap: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus").TourGap) | (() => import("element-plus").TourGap) | ((new (...args: any[]) => import("element-plus").TourGap) | (() => import("element-plus").TourGap))[], unknown, unknown, () => {
offset: number;
radius: number;
}, boolean>;
zIndex: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | ((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions))[], unknown, unknown, () => {
block: string;
}, boolean>;
type: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | ((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary"))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
appendTo: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown, string, boolean>;
closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
targetAreaClickable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
}>> & {
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
onChange?: ((current: number) => any) | undefined;
onClose?: ((current: number) => any) | undefined;
onFinish?: (() => any) | undefined;
"onUpdate:current"?: ((current: number) => any) | undefined;
}, {
mask: import("element-plus").TourMask;
gap: import("element-plus").TourGap;
modelValue: boolean;
placement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/core").Placement))[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown>;
scrollIntoViewOptions: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | ((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions))[], unknown, unknown>;
appendTo: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown>;
showArrow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
showClose: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
closeOnPressEscape: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
current: number;
targetAreaClickable: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,74 @@
import { tourContentProps } from './content.mjs';
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
import { iconPropType } from '../../../utils/vue/icon.mjs';
import { teleportProps } from '../../teleport/src/teleport.mjs';
import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
import { isBoolean, isNumber } from '../../../utils/types.mjs';
const tourProps = buildProps({
modelValue: Boolean,
current: {
type: Number,
default: 0
},
showArrow: {
type: Boolean,
default: true
},
showClose: {
type: Boolean,
default: true
},
closeIcon: {
type: iconPropType
},
placement: tourContentProps.placement,
contentStyle: {
type: definePropType([Object])
},
mask: {
type: definePropType([Boolean, Object]),
default: true
},
gap: {
type: definePropType(Object),
default: () => ({
offset: 6,
radius: 2
})
},
zIndex: {
type: Number
},
scrollIntoViewOptions: {
type: definePropType([Boolean, Object]),
default: () => ({
block: "center"
})
},
type: {
type: definePropType(String)
},
appendTo: {
type: teleportProps.to.type,
default: "body"
},
closeOnPressEscape: {
type: Boolean,
default: true
},
targetAreaClickable: {
type: Boolean,
default: true
}
});
const tourEmits = {
[UPDATE_MODEL_EVENT]: (value) => isBoolean(value),
["update:current"]: (current) => isNumber(current),
close: (current) => isNumber(current),
finish: () => true,
change: (current) => isNumber(current)
};
export { tourEmits, tourProps };
//# sourceMappingURL=tour2.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"tour2.mjs","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 { teleportProps } from '@element-plus/components/teleport'\nimport { tourContentProps } from './content'\n\nimport type {\n CSSProperties,\n ExtractPropTypes,\n __ExtractPublicPropTypes,\n} from 'vue'\nimport type Tour from './tour.vue'\nimport type { TourGap, TourMask } from './types'\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: teleportProps.to.type,\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\nexport type TourProps = ExtractPropTypes<typeof tourProps>\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"],"names":[],"mappings":";;;;;;;AAUY,MAAC,SAAS,GAAG,UAAU,CAAC;AACpC,EAAE,UAAU,EAAE,OAAO;AACrB,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,YAAY;AACtB,GAAG;AACH,EAAE,SAAS,EAAE,gBAAgB,CAAC,SAAS;AACvC,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAClC,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC3C,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,OAAO;AACpB,MAAM,MAAM,EAAE,CAAC;AACf,MAAM,MAAM,EAAE,CAAC;AACf,KAAK,CAAC;AACN,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,qBAAqB,EAAE;AACzB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC3C,IAAI,OAAO,EAAE,OAAO;AACpB,MAAM,KAAK,EAAE,QAAQ;AACrB,KAAK,CAAC;AACN,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,aAAa,CAAC,EAAE,CAAC,IAAI;AAC/B,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,mBAAmB,EAAE;AACvB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,SAAS,GAAG;AACzB,EAAE,CAAC,kBAAkB,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,KAAK,CAAC;AACnD,EAAE,CAAC,gBAAgB,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC;AACpD,EAAE,KAAK,EAAE,CAAC,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC;AACvC,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,MAAM,EAAE,CAAC,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC;AACxC;;;;"}

View File

@@ -0,0 +1,21 @@
import type { CSSProperties, VNode } from 'vue';
import type { ButtonProps } from 'element-plus/es/components/button';
export type TourMask = boolean | {
style?: CSSProperties;
color?: string;
};
export interface TourGap {
offset?: number | [number, number];
radius?: number;
}
export type TourBtnProps = {
children?: VNode | string;
onClick?: () => void;
} & Partial<ButtonProps> & Record<string, any>;
export interface PosInfo {
left: number;
top: number;
height: number;
width: number;
radius: number;
}

View File

@@ -0,0 +1,2 @@
//# sourceMappingURL=types.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,3 @@
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/button/style/css';
import 'element-plus/theme-chalk/el-tour.css';

View File

@@ -0,0 +1,4 @@
import '../../base/style/css.mjs';
import '../../button/style/css.mjs';
import 'element-plus/theme-chalk/el-tour.css';
//# sourceMappingURL=css.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

View File

@@ -0,0 +1,3 @@
import 'element-plus/es/components/base/style';
import 'element-plus/es/components/button/style';
import 'element-plus/theme-chalk/src/tour.scss';

View File

@@ -0,0 +1,4 @@
import '../../base/style/index.mjs';
import '../../button/style/index.mjs';
import 'element-plus/theme-chalk/src/tour.scss';
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}