完全跑通1.0版本

This commit is contained in:
2026-05-26 12:56:03 +08:00
parent 2ece5174a7
commit 93c714a93b
11557 changed files with 1648225 additions and 36 deletions

View File

@@ -0,0 +1,15 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import { TourContentEmits, TourContentProps, TourContentPropsPublic, tourContentEmits, tourContentProps, tourPlacements, tourStrategies } from "./src/content.js";
import { TourBtnProps, TourGap, TourMask } from "./src/types.js";
import { TourEmits, TourInstance, TourProps, TourPropsPublic, tourEmits, tourProps } from "./src/tour.js";
import _default from "./src/tour.vue.js";
import { TourStepEmits, TourStepProps, TourStepPropsPublic, tourStepEmits, tourStepProps } from "./src/step.js";
import _default$1 from "./src/step.vue.js";
//#region ../../packages/components/tour/index.d.ts
declare const ElTour: SFCWithInstall<typeof _default> & {
TourStep: typeof _default$1;
};
declare const ElTourStep: SFCWithInstall<typeof _default$1>;
//#endregion
export { ElTour, ElTour as default, ElTourStep, type TourBtnProps, TourContentEmits, TourContentProps, TourContentPropsPublic, TourEmits, type TourGap, TourInstance, type TourMask, TourProps, TourPropsPublic, TourStepEmits, TourStepProps, TourStepPropsPublic, tourContentEmits, tourContentProps, tourEmits, tourPlacements, tourProps, tourStepEmits, tourStepProps, tourStrategies };

View File

@@ -0,0 +1,27 @@
Object.defineProperties(exports, {
__esModule: { value: true },
[Symbol.toStringTag]: { value: "Module" }
});
const require_install = require("../../utils/vue/install.js");
const require_content = require("./src/content.js");
const require_tour = require("./src/tour.js");
const require_tour$1 = require("./src/tour2.js");
const require_step = require("./src/step.js");
const require_step$1 = require("./src/step2.js");
//#region ../../packages/components/tour/index.ts
const ElTour = require_install.withInstall(require_tour$1.default, { TourStep: require_step$1.default });
const ElTourStep = require_install.withNoopInstall(require_step$1.default);
//#endregion
exports.ElTour = ElTour;
exports.default = ElTour;
exports.ElTourStep = ElTourStep;
exports.tourContentEmits = require_content.tourContentEmits;
exports.tourContentProps = require_content.tourContentProps;
exports.tourEmits = require_tour.tourEmits;
exports.tourPlacements = require_content.tourPlacements;
exports.tourProps = require_tour.tourProps;
exports.tourStepEmits = require_step.tourStepEmits;
exports.tourStepProps = require_step.tourStepProps;
exports.tourStrategies = require_content.tourStrategies;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","Tour","withNoopInstall","TourStep"],"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"],"mappings":";;;;;;;;;;;AAMA,MAAa,SAETA,gBAAAA,YAAYC,eAAAA,SAAM,EACpB,UAAA,eAAA,SACD,CAAC;AACF,MAAa,aACXC,gBAAAA,gBAAgBC,eAAAA,QAAS"}

View File

@@ -0,0 +1,54 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import { ExtractPublicPropTypes } from "vue";
import { Placement, Strategy, VirtualElement } from "@floating-ui/dom";
//#region ../../packages/components/tour/src/content.d.ts
declare const tourStrategies: readonly ["absolute", "fixed"];
declare const tourPlacements: readonly ["top-start", "top-end", "top", "bottom-start", "bottom-end", "bottom", "left-start", "left-end", "left", "right-start", "right-end", "right"];
interface TourContentProps {
/**
* @description position of the guide card relative to the target element
*/
placement?: Placement;
/**
* @description the reference dom
*/
reference?: HTMLElement | VirtualElement | null;
/**
* @description position strategy of the content
*/
strategy?: Strategy;
/**
* @description offset of the arrow
*/
offset?: number;
/**
* @description whether to show the arrow
*/
showArrow?: boolean;
/**
* @description content's zIndex
*/
zIndex?: number;
}
/**
* @deprecated Removed after 3.0.0, Use `TourContentProps` instead.
*/
declare const tourContentProps: {
placement: 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)) | null)[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
reference: EpPropFinalized<(new (...args: any[]) => HTMLElement | VirtualElement) | (() => HTMLElement | VirtualElement | null) | (((new (...args: any[]) => HTMLElement | VirtualElement) | (() => HTMLElement | VirtualElement | null)) | null)[], unknown, unknown, null, boolean>;
strategy: EpPropFinalized<(new (...args: any[]) => "fixed" | "absolute") | (() => Strategy) | (((new (...args: any[]) => "fixed" | "absolute") | (() => Strategy)) | null)[], "fixed" | "absolute", unknown, string, boolean>;
offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: BooleanConstructor;
zIndex: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `TourContentProps` instead.
*/
type TourContentPropsPublic = ExtractPublicPropTypes<typeof tourContentProps>;
declare const tourContentEmits: {
close: () => boolean;
};
type TourContentEmits = typeof tourContentEmits;
//#endregion
export { TourContentEmits, TourContentProps, TourContentPropsPublic, tourContentEmits, tourContentProps, tourPlacements, tourStrategies };

View File

@@ -0,0 +1,72 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_runtime = require("../../../utils/vue/props/runtime.js");
//#region ../../packages/components/tour/src/content.ts
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"
];
/**
* @deprecated Removed after 3.0.0, Use `TourContentProps` instead.
*/
const tourContentProps = require_runtime.buildProps({
/**
* @description position of the guide card relative to the target element
*/
placement: {
type: require_runtime.definePropType(String),
values: tourPlacements,
default: "bottom"
},
/**
* @description the reference dom
*/
reference: {
type: require_runtime.definePropType(Object),
default: null
},
/**
* @description position strategy of the content
*/
strategy: {
type: require_runtime.definePropType(String),
values: tourStrategies,
default: "absolute"
},
/**
* @description offset of the arrow
*/
offset: {
type: Number,
default: 10
},
/**
* @description whether to show the arrow
*/
showArrow: Boolean,
/**
* @description content's zIndex
*/
zIndex: {
type: Number,
default: 2001
}
});
const tourContentEmits = { close: () => true };
//#endregion
exports.tourContentEmits = tourContentEmits;
exports.tourContentProps = tourContentProps;
exports.tourPlacements = tourPlacements;
exports.tourStrategies = tourStrategies;
//# sourceMappingURL=content.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"content.js","names":["buildProps","definePropType"],"sources":["../../../../../../packages/components/tour/src/content.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { 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 interface TourContentProps {\n /**\n * @description position of the guide card relative to the target element\n */\n placement?: Placement\n /**\n * @description the reference dom\n */\n reference?: HTMLElement | VirtualElement | null\n /**\n * @description position strategy of the content\n */\n strategy?: Strategy\n /**\n * @description offset of the arrow\n */\n offset?: number\n /**\n * @description whether to show the arrow\n */\n showArrow?: boolean\n /**\n * @description content's zIndex\n */\n zIndex?: number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TourContentProps` instead.\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\n/**\n * @deprecated Removed after 3.0.0, Use `TourContentProps` instead.\n */\nexport type TourContentPropsPublic = ExtractPublicPropTypes<\n typeof tourContentProps\n>\n\nexport const tourContentEmits = {\n close: () => true,\n}\nexport type TourContentEmits = typeof tourContentEmits\n"],"mappings":";;;AAKA,MAAa,iBAAiB,CAAC,YAAY,QAAQ;AAEnD,MAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;AAgCD,MAAa,mBAAmBA,gBAAAA,WAAW;;;;CAIzC,WAAW;EACT,MAAMC,gBAAAA,eAA0B,OAAO;EACvC,QAAQ;EACR,SAAS;EACV;;;;CAID,WAAW;EACT,MAAMA,gBAAAA,eAAoD,OAAO;EACjE,SAAS;EACV;;;;CAID,UAAU;EACR,MAAMA,gBAAAA,eAAyB,OAAO;EACtC,QAAQ;EACR,SAAS;EACV;;;;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;;;;CAID,WAAW;;;;CAIX,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CACF,CAAC;AASF,MAAa,mBAAmB,EAC9B,aAAa,MACd"}

View File

@@ -0,0 +1,29 @@
import { TourContentProps } from "./content.js";
import * as _$vue from "vue";
import * as _$_floating_ui_dom0 from "@floating-ui/dom";
//#region ../../packages/components/tour/src/content.vue.d.ts
declare var __VLS_10: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_10) => any;
};
declare const __VLS_base: _$vue.DefineComponent<TourContentProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
close: () => void;
}, string, _$vue.PublicProps, Readonly<TourContentProps> & Readonly<{
onClose?: (() => any) | undefined;
}>, {
zIndex: number;
offset: number;
placement: _$_floating_ui_dom0.Placement;
strategy: _$_floating_ui_dom0.Strategy;
reference: HTMLElement | _$_floating_ui_dom0.VirtualElement | null;
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default as default };

View File

@@ -0,0 +1,65 @@
require("../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../focus-trap/index.js");
const require_content = require("./content.js");
const require_helper = require("./helper.js");
let vue = require("vue");
//#region ../../packages/components/tour/src/content.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = ["data-side"];
var content_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElTourContent",
__name: "content",
props: require_content.tourContentProps,
emits: require_content.tourContentEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const placement = (0, vue.ref)(props.placement);
const strategy = (0, vue.ref)(props.strategy);
const contentRef = (0, vue.ref)(null);
const arrowRef = (0, vue.ref)(null);
(0, vue.watch)(() => props.placement, () => {
placement.value = props.placement;
});
const { contentStyle, arrowStyle } = require_helper.useFloating((0, vue.toRef)(props, "reference"), contentRef, arrowRef, placement, strategy, (0, vue.toRef)(props, "offset"), (0, vue.toRef)(props, "zIndex"), (0, vue.toRef)(props, "showArrow"));
const side = (0, vue.computed)(() => {
return placement.value.split("-")[0];
});
const { ns } = (0, vue.inject)(require_helper.tourKey);
const onCloseRequested = () => {
emit("close");
};
const onFocusoutPrevented = (event) => {
if (event.detail.focusReason === "pointer") event.preventDefault();
};
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
ref_key: "contentRef",
ref: contentRef,
style: (0, vue.normalizeStyle)((0, vue.unref)(contentStyle)),
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("content")),
"data-side": side.value,
tabindex: "-1"
}, [(0, vue.createVNode)((0, vue.unref)(require_index.default), {
loop: "",
trapped: "",
"focus-start-el": "container",
"focus-trap-el": contentRef.value || void 0,
onReleaseRequested: onCloseRequested,
onFocusoutPrevented
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 8, ["focus-trap-el"]), __props.showArrow ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
key: 0,
ref_key: "arrowRef",
ref: arrowRef,
style: (0, vue.normalizeStyle)((0, vue.unref)(arrowStyle)),
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("arrow"))
}, null, 6)) : (0, vue.createCommentVNode)("v-if", true)], 14, _hoisted_1);
};
}
});
//#endregion
exports.default = content_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=content.vue_vue_type_script_setup_true_lang.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"content.vue_vue_type_script_setup_true_lang.js","names":[],"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 lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, watch } from 'vue'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport { tourContentEmits } from './content'\nimport { tourKey, useFloating } from './helper'\n\nimport type { TourContentProps } from './content'\n\ndefineOptions({\n name: 'ElTourContent',\n})\n\nconst props = withDefaults(defineProps<TourContentProps>(), {\n placement: 'bottom',\n reference: null,\n strategy: 'absolute',\n offset: 10,\n zIndex: 2001,\n})\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"],"mappings":";;;;;;;;;;;;;EAuCA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAEb,MAAM,aAAA,GAAA,IAAA,KAAgB,MAAM,UAAS;EACrC,MAAM,YAAA,GAAA,IAAA,KAAe,MAAM,SAAQ;EACnC,MAAM,cAAA,GAAA,IAAA,KAAqC,KAAI;EAC/C,MAAM,YAAA,GAAA,IAAA,KAAmC,KAAI;EAE7C,CAAA,GAAA,IAAA,aACQ,MAAM,iBACN;GACJ,UAAU,QAAQ,MAAM;IAE5B;EAEA,MAAM,EAAE,cAAc,eAAe,eAAA,aAAA,GAAA,IAAA,OAC7B,OAAO,YAAY,EACzB,YACA,UACA,WACA,WAAA,GAAA,IAAA,OACM,OAAO,SAAS,GAAA,GAAA,IAAA,OAChB,OAAO,SAAS,GAAA,GAAA,IAAA,OAChB,OAAO,YAAW,CAC1B;EAEA,MAAM,QAAA,GAAA,IAAA,gBAAsB;GAC1B,OAAO,UAAU,MAAM,MAAM,IAAI,CAAC;IACnC;EAED,MAAM,EAAE,QAAA,GAAA,IAAA,QAAc,eAAA,QAAQ;EAE9B,MAAM,yBAAyB;GAC7B,KAAK,QAAO;;EAGd,MAAM,uBAAuB,UAAuB;GAClD,IAAI,MAAM,OAAO,gBAAgB,WAC/B,MAAM,gBAAe;;;4DA3DjB,OAAA;aAtBA;IAAJ,KAAI;IACH,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,aAAY,CAAA;IACnB,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,UAAA,CAAA;IACX,aAAW,KAAA;IACZ,UAAS;2CAWO,cAAA,QAAA,EAAA;IARd,MAAA;IACA,SAAA;IACA,kBAAe;IACd,iBAAe,WAAA,SAAc,KAAA;IAC7B,oBAAmB;IACC;;oCAEb,EAAA,GAAA,IAAA,YAAA,KAAA,QAAA,UAAA,CAAA,CAAA;;6BAGF,QAAA,cAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAIN,QAAA;;aAHI;IAAJ,KAAI;IACH,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,WAAU,CAAA;IACjB,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,QAAA,CAAA"}

View File

@@ -0,0 +1,10 @@
Object.defineProperties(exports, {
__esModule: { value: true },
[Symbol.toStringTag]: { value: "Module" }
});
//#region ../../packages/components/tour/src/content.vue
var content_default = require("./content.vue_vue_type_script_setup_true_lang.js").default;
//#endregion
exports.default = content_default;
//# sourceMappingURL=content2.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"content2.js","names":[],"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 lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, watch } from 'vue'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport { tourContentEmits } from './content'\nimport { tourKey, useFloating } from './helper'\n\nimport type { TourContentProps } from './content'\n\ndefineOptions({\n name: 'ElTourContent',\n})\n\nconst props = withDefaults(defineProps<TourContentProps>(), {\n placement: 'bottom',\n reference: null,\n strategy: 'absolute',\n offset: 10,\n zIndex: 2001,\n})\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"],"mappings":""}

View File

@@ -0,0 +1,42 @@
import { UseNamespaceReturn } from "../../../hooks/use-namespace/index.js";
import { TourGap, TourMask } from "./types.js";
import { TourStepProps } from "./step.js";
import * as _$vue from "vue";
import { CSSProperties, Component, InjectionKey, Ref, SetupContext } from "vue";
import { Placement, Strategy, VirtualElement } from "@floating-ui/dom";
//#region ../../packages/components/tour/src/helper.d.ts
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: _$vue.ComputedRef<{
left: number;
top: number;
width: number;
height: number;
radius: number;
} | null>;
triggerTarget: _$vue.ComputedRef<HTMLElement | {
getBoundingClientRect(): DOMRect;
} | undefined>;
};
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;
}
declare const tourKey: InjectionKey<TourContext>;
declare const useFloating: (referenceRef: Ref<HTMLElement | VirtualElement | null>, contentRef: Ref<HTMLElement | null>, arrowRef: Ref<HTMLElement | null>, placement: Ref<Placement | undefined>, strategy: Ref<Strategy>, offset: Ref<number>, zIndex: Ref<number>, showArrow: Ref<boolean>) => {
update: () => Promise<void>;
contentStyle: _$vue.ComputedRef<CSSProperties>;
arrowStyle: _$vue.ComputedRef<CSSProperties>;
};
//#endregion
export { TourContext, tourKey, useFloating, useTarget };

View File

@@ -0,0 +1,176 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../../_virtual/_rolldown/runtime.js");
const require_objects = require("../../../utils/objects.js");
let vue = require("vue");
let _floating_ui_dom = require("@floating-ui/dom");
let _vue_shared = require("@vue/shared");
let _vueuse_core = require("@vueuse/core");
//#region ../../packages/components/tour/src/helper.ts
const useTarget = (target, open, gap, mergedMask, scrollIntoViewOptions) => {
const posInfo = (0, vue.ref)(null);
const getTargetEl = () => {
let targetEl;
if ((0, _vue_shared.isString)(target.value)) targetEl = document.querySelector(target.value);
else if ((0, _vue_shared.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
};
};
(0, vue.onMounted)(() => {
(0, vue.watch)([open, target], () => {
updatePosInfo();
}, { immediate: true });
window.addEventListener("resize", updatePosInfo);
});
(0, vue.onBeforeUnmount)(() => {
window.removeEventListener("resize", updatePosInfo);
});
const getGapOffset = (index) => ((0, _vue_shared.isArray)(gap.value.offset) ? gap.value.offset[index] : gap.value.offset) ?? 6;
const mergedPosInfo = (0, vue.computed)(() => {
if (!posInfo.value) return posInfo.value;
const gapOffsetX = getGapOffset(0);
const gapOffsetY = getGapOffset(1);
const gapRadius = gap.value?.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
};
});
return {
mergedPosInfo,
triggerTarget: (0, vue.computed)(() => {
const targetEl = getTargetEl();
if (!mergedMask.value || !targetEl || !window.DOMRect) return targetEl || void 0;
return { getBoundingClientRect() {
return window.DOMRect.fromRect({
width: mergedPosInfo.value?.width || 0,
height: mergedPosInfo.value?.height || 0,
x: mergedPosInfo.value?.left || 0,
y: mergedPosInfo.value?.top || 0
});
} };
})
};
};
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, zIndex, showArrow) => {
const x = (0, vue.ref)();
const y = (0, vue.ref)();
const middlewareData = (0, vue.ref)({});
const states = {
x,
y,
placement,
strategy,
middlewareData
};
const middleware = (0, vue.computed)(() => {
const _middleware = [
(0, _floating_ui_dom.offset)((0, vue.unref)(offset)),
(0, _floating_ui_dom.flip)(),
(0, _floating_ui_dom.shift)(),
overflowMiddleware()
];
if ((0, vue.unref)(showArrow) && (0, vue.unref)(arrowRef)) _middleware.push((0, _floating_ui_dom.arrow)({ element: (0, vue.unref)(arrowRef) }));
return _middleware;
});
const update = async () => {
if (!_vueuse_core.isClient) return;
const referenceEl = (0, vue.unref)(referenceRef);
const contentEl = (0, vue.unref)(contentRef);
if (!referenceEl || !contentEl) return;
const data = await (0, _floating_ui_dom.computePosition)(referenceEl, contentEl, {
placement: (0, vue.unref)(placement),
strategy: (0, vue.unref)(strategy),
middleware: (0, vue.unref)(middleware)
});
require_objects.keysOf(states).forEach((key) => {
states[key].value = data[key];
});
};
const contentStyle = (0, vue.computed)(() => {
if (!(0, vue.unref)(referenceRef)) return {
position: "fixed",
top: "50%",
left: "50%",
transform: "translate3d(-50%, -50%, 0)",
maxWidth: "100vw",
zIndex: (0, vue.unref)(zIndex)
};
const { overflow } = (0, vue.unref)(middlewareData);
return {
position: (0, vue.unref)(strategy),
zIndex: (0, vue.unref)(zIndex),
top: (0, vue.unref)(y) != null ? `${(0, vue.unref)(y)}px` : "",
left: (0, vue.unref)(x) != null ? `${(0, vue.unref)(x)}px` : "",
maxWidth: overflow?.maxWidth ? `${overflow?.maxWidth}px` : ""
};
});
const arrowStyle = (0, vue.computed)(() => {
if (!(0, vue.unref)(showArrow)) return {};
const { arrow } = (0, vue.unref)(middlewareData);
return {
left: arrow?.x != null ? `${arrow?.x}px` : "",
top: arrow?.y != null ? `${arrow?.y}px` : ""
};
});
let cleanup;
(0, vue.onMounted)(() => {
const referenceEl = (0, vue.unref)(referenceRef);
const contentEl = (0, vue.unref)(contentRef);
if (referenceEl && contentEl) cleanup = (0, _floating_ui_dom.autoUpdate)(referenceEl, contentEl, update);
(0, vue.watchEffect)(() => {
update();
});
});
(0, vue.onBeforeUnmount)(() => {
cleanup && cleanup();
});
return {
update,
contentStyle,
arrowStyle
};
};
const overflowMiddleware = () => {
return {
name: "overflow",
async fn(state) {
const overflow = await (0, _floating_ui_dom.detectOverflow)(state);
let overWidth = 0;
if (overflow.left > 0) overWidth = overflow.left;
if (overflow.right > 0) overWidth = overflow.right;
return { data: { maxWidth: state.rects.floating.width - overWidth } };
}
};
};
//#endregion
exports.tourKey = tourKey;
exports.useFloating = useFloating;
exports.useTarget = useTarget;
//# sourceMappingURL=helper.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,49 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { PosInfo } from "./types.js";
import * as _$vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/tour/src/mask.d.ts
interface MaskProps {
/**
* @description mask's zIndex
*/
zIndex?: number;
/**
* @description whether to show the mask
*/
visible?: boolean;
/**
* @description mask's fill
*/
fill?: string;
/***
* @description mask's transparent space position
*/
pos?: PosInfo | null;
/**
* @description whether the target element can be clickable, when using mask
*/
targetAreaClickable?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `MaskProps` instead.
*/
declare const maskProps: {
zIndex: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
visible: BooleanConstructor;
fill: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
pos: {
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => PosInfo) | (() => PosInfo | null) | (((new (...args: any[]) => PosInfo) | (() => PosInfo | null)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
targetAreaClickable: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `MaskProps` instead.
*/
type MaskPropsPublic = ExtractPublicPropTypes<typeof maskProps>;
//#endregion
export { MaskProps, MaskPropsPublic, maskProps };

View File

@@ -0,0 +1,41 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_runtime = require("../../../utils/vue/props/runtime.js");
//#region ../../packages/components/tour/src/mask.ts
/**
* @deprecated Removed after 3.0.0, Use `MaskProps` instead.
*/
const maskProps = require_runtime.buildProps({
/**
* @description mask's zIndex
*/
zIndex: {
type: Number,
default: 1001
},
/**
* @description whether to show the mask
*/
visible: Boolean,
/**
* @description mask's fill
*/
fill: {
type: String,
default: "rgba(0,0,0,0.5)"
},
/***
* @description mask's transparent space position
*/
pos: { type: require_runtime.definePropType(Object) },
/**
* @description whether the target element can be clickable, when using mask
*/
targetAreaClickable: {
type: Boolean,
default: true
}
});
//#endregion
exports.maskProps = maskProps;
//# sourceMappingURL=mask.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"mask.js","names":["buildProps","definePropType"],"sources":["../../../../../../packages/components/tour/src/mask.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { PosInfo } from './types'\n\nexport interface MaskProps {\n /**\n * @description mask's zIndex\n */\n zIndex?: number\n /**\n * @description whether to show the mask\n */\n visible?: boolean\n /**\n * @description mask's fill\n */\n fill?: string\n /***\n * @description mask's transparent space position\n */\n pos?: PosInfo | null\n /**\n * @description whether the target element can be clickable, when using mask\n */\n targetAreaClickable?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `MaskProps` instead.\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\n/**\n * @deprecated Removed after 3.0.0, Use `MaskProps` instead.\n */\nexport type MaskPropsPublic = ExtractPublicPropTypes<typeof maskProps>\n"],"mappings":";;;;;;AA+BA,MAAa,YAAYA,gBAAAA,WAAW;;;;CAIlC,QAAQ;EACN,MAAM;EACN,SAAS;EACV;;;;CAID,SAAS;;;;CAIT,MAAM;EACJ,MAAM;EACN,SAAS;EACV;;;;CAID,KAAK,EACH,MAAMC,gBAAAA,eAA+B,OAAO,EAC7C;;;;CAID,qBAAqB;EACnB,MAAM;EACN,SAAS;EACV;CACF,CAAC"}

View File

@@ -0,0 +1,12 @@
import { MaskProps } from "./mask.js";
import * as _$vue from "vue";
//#region ../../packages/components/tour/src/mask.vue.d.ts
declare const __VLS_export: _$vue.DefineComponent<MaskProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<MaskProps> & Readonly<{}>, {
fill: string;
zIndex: number;
targetAreaClickable: boolean;
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
declare const _default: typeof __VLS_export;
//#endregion
export { _default as default };

View File

@@ -0,0 +1,72 @@
require("../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../hooks/use-lockscreen/index.js");
const require_mask = require("./mask.js");
const require_helper = require("./helper.js");
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
//#region ../../packages/components/tour/src/mask.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = { style: {
width: "100%",
height: "100%"
} };
const _hoisted_2 = ["d"];
var mask_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElTourMask",
inheritAttrs: false,
__name: "mask",
props: require_mask.maskProps,
setup(__props) {
const props = __props;
const { ns } = (0, vue.inject)(require_helper.tourKey);
const radius = (0, vue.computed)(() => props.pos?.radius ?? 2);
const roundInfo = (0, vue.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 } = (0, _vueuse_core.useWindowSize)();
const path = (0, vue.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 = (0, vue.computed)(() => ({
position: "fixed",
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: props.zIndex,
pointerEvents: props.pos && props.targetAreaClickable ? "none" : "auto"
}));
const pathStyle = (0, vue.computed)(() => ({
fill: props.fill,
pointerEvents: "auto",
cursor: "auto"
}));
require_index.useLockscreen((0, vue.toRef)(props, "visible"), { ns });
return (_ctx, _cache) => {
return __props.visible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
key: 0,
class: (0, vue.unref)(ns).e("mask"),
style: maskStyle.value
}, _ctx.$attrs), [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1, [(0, vue.createElementVNode)("path", {
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("hollow")),
style: (0, vue.normalizeStyle)(pathStyle.value),
d: path.value
}, null, 14, _hoisted_2)]))], 16)) : (0, vue.createCommentVNode)("v-if", true);
};
}
});
//#endregion
exports.default = mask_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=mask.vue_vue_type_script_setup_true_lang.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"mask.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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 lang=\"ts\" setup>\nimport { computed, inject, toRef } from 'vue'\nimport { useLockscreen } from '@element-plus/hooks'\nimport { useWindowSize } from '@vueuse/core'\nimport { tourKey } from './helper'\n\nimport type { CSSProperties } from 'vue'\nimport type { MaskProps } from './mask'\n\ndefineOptions({\n name: 'ElTourMask',\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MaskProps>(), {\n zIndex: 1001,\n fill: 'rgba(0,0,0,0.5)',\n targetAreaClickable: true,\n})\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"],"mappings":";;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EAMd,MAAM,EAAE,QAAA,GAAA,IAAA,QAAc,eAAA,QAAQ;EAC9B,MAAM,UAAA,GAAA,IAAA,gBAAwB,MAAM,KAAK,UAAU,EAAC;EACpD,MAAM,aAAA,GAAA,IAAA,gBAA2B;GAC/B,MAAM,IAAI,OAAO;GACjB,MAAM,WAAW,IAAI,EAAE,GAAG,EAAE;GAC5B,OAAO;IACL,UAAU,GAAG,SAAS,GAAG,EAAE,GAAG;IAC9B,aAAa,GAAG,SAAS,GAAG,CAAC,EAAE,GAAG;IAClC,YAAY,GAAG,SAAS,GAAG,CAAC,EAAE,GAAG,CAAC;IAClC,SAAS,GAAG,SAAS,GAAG,EAAE,GAAG,CAAC;IAChC;IACD;EAED,MAAM,EAAE,OAAO,aAAa,QAAQ,kBAAA,GAAA,aAAA,gBAA+B;EAEnE,MAAM,QAAA,GAAA,IAAA,gBAAsB;GAC1B,MAAM,QAAQ,YAAY;GAC1B,MAAM,SAAS,aAAa;GAC5B,MAAM,OAAO,UAAU;GACvB,MAAM,QAAQ,IAAI,MAAM,aAAa,OAAO,IAAI,MAAM,GAAG,OAAO,IAAI,MAAM;GAC1E,MAAM,UAAU,OAAO;GACvB,OAAO,MAAM,MACT,GAAG,MAAM,IAAI,MAAM,IAAI,OAAO,QAAQ,GAAG,MAAM,IAAI,IAAI,IACrD,MAAM,IAAI,QAAQ,UAAU,EAC7B,GAAG,KAAK,SAAS,IAAI,MAAM,IAAI,SAAS,UAAU,EAAE,GACnD,KAAK,YACN,IAAI,CAAC,MAAM,IAAI,QAAQ,UAAU,EAAE,GAAG,KAAK,WAAW,IACrD,CAAC,MAAM,IAAI,SAAS,UAAU,EAC/B,GAAG,KAAK,QAAQ,MACjB;IACL;EAED,MAAM,aAAA,GAAA,IAAA,iBAA2C;GAC/C,UAAU;GACV,MAAM;GACN,OAAO;GACP,KAAK;GACL,QAAQ;GACR,QAAQ,MAAM;GACd,eAAe,MAAM,OAAO,MAAM,sBAAsB,SAAS;GAClE,EAAC;EAEF,MAAM,aAAA,GAAA,IAAA,iBAA2C;GAC/C,MAAM,MAAM;GACZ,eAAe;GACf,QAAQ;GACT,EAAC;EAEF,cAAA,eAAA,GAAA,IAAA,OAAoB,OAAO,UAAU,EAAE,EACrC,IACD,CAAA;;UAlFY,QAAA,YAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBASL,QAAA,GAAA,IAAA,YAAA;;IATe,QAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,OAAA;IAAW,OAAO,UAAA;MAAmBA,KAAAA,OAAM,EAAA,GAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAQnE,OAPN,YAOM,EAAA,GAAA,IAAA,oBADyD,QAAA;IAAtD,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,SAAA,CAAA;IAAa,QAAA,GAAA,IAAA,gBAAO,UAAA,MAAS;IAAG,GAAG,KAAA"}

View File

@@ -0,0 +1,10 @@
Object.defineProperties(exports, {
__esModule: { value: true },
[Symbol.toStringTag]: { value: "Module" }
});
//#region ../../packages/components/tour/src/mask.vue
var mask_default = require("./mask.vue_vue_type_script_setup_true_lang.js").default;
//#endregion
exports.default = mask_default;
//# sourceMappingURL=mask2.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"mask2.js","names":[],"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 lang=\"ts\" setup>\nimport { computed, inject, toRef } from 'vue'\nimport { useLockscreen } from '@element-plus/hooks'\nimport { useWindowSize } from '@vueuse/core'\nimport { tourKey } from './helper'\n\nimport type { CSSProperties } from 'vue'\nimport type { MaskProps } from './mask'\n\ndefineOptions({\n name: 'ElTourMask',\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MaskProps>(), {\n zIndex: 1001,\n fill: 'rgba(0,0,0,0.5)',\n targetAreaClickable: true,\n})\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"],"mappings":""}

View File

@@ -0,0 +1,127 @@
import { IconPropType } from "../../../utils/vue/icon.js";
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { TourContentProps } from "./content.js";
import { TourBtnProps, TourMask } from "./types.js";
import * as _$vue from "vue";
import { CSSProperties, ExtractPublicPropTypes } from "vue";
import * as _$_floating_ui_dom0 from "@floating-ui/dom";
//#region ../../packages/components/tour/src/step.d.ts
interface TourStepProps {
/**
* @description get the element the guide card points to. empty makes it show in center of screen
*/
target?: string | HTMLElement | (() => HTMLElement | null) | null;
/**
* @description the title of the tour content
*/
title?: string;
/**
* @description description
*/
description?: string;
/**
* @description whether to show a close button
*/
showClose?: boolean;
/**
* @description custom close icon, default is Close
*/
closeIcon?: IconPropType;
/**
* @description whether to show the arrow
*/
showArrow?: boolean;
/**
* @description position of the guide card relative to the target element
*/
placement?: TourContentProps['placement'];
/**
* @description whether to enable masking, change mask style and fill color by pass custom props
*/
mask?: TourMask;
/**
* @description custom style for content
*/
contentStyle?: CSSProperties;
/**
* @description properties of the previous button
*/
prevButtonProps?: TourBtnProps;
/**
* @description properties of the Next button
*/
nextButtonProps?: TourBtnProps;
/**
* @description support pass custom scrollIntoView options
*/
scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
/**
* @description type, affects the background color and text color
*/
type?: 'default' | 'primary';
}
/**
* @deprecated Removed after 3.0.0, Use `TourStepProps` instead.
*/
declare const tourStepProps: {
target: {
readonly type: _$vue.PropType<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)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
title: StringConstructor;
description: StringConstructor;
showClose: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
closeIcon: {
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
placement: EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement) | (((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement)) | null)[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
mask: EpPropFinalized<(new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask) | (((new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask)) | null)[], unknown, unknown, undefined, boolean>;
contentStyle: {
readonly type: _$vue.PropType<CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
prevButtonProps: {
readonly type: _$vue.PropType<TourBtnProps>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
nextButtonProps: {
readonly type: _$vue.PropType<TourBtnProps>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | (((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions)) | null)[], unknown, unknown, undefined, boolean>;
type: {
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | (((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary")) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
/**
* @deprecated Removed after 3.0.0, Use `TourStepProps` instead.
*/
type TourStepPropsPublic = ExtractPublicPropTypes<typeof tourStepProps>;
declare const tourStepEmits: {
close: () => boolean;
};
type TourStepEmits = typeof tourStepEmits;
//#endregion
export { TourStepEmits, TourStepProps, TourStepPropsPublic, tourStepEmits, tourStepProps };

View File

@@ -0,0 +1,84 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_runtime = require("../../../utils/vue/props/runtime.js");
const require_icon = require("../../../utils/vue/icon.js");
const require_content = require("./content.js");
//#region ../../packages/components/tour/src/step.ts
/**
* @deprecated Removed after 3.0.0, Use `TourStepProps` instead.
*/
const tourStepProps = require_runtime.buildProps({
/**
* @description get the element the guide card points to. empty makes it show in center of screen
*/
target: { type: require_runtime.definePropType([
String,
Object,
Function
]) },
/**
* @description the title of the tour content
*/
title: String,
/**
* @description description
*/
description: String,
/**
* @description whether to show a close button
*/
showClose: {
type: Boolean,
default: void 0
},
/**
* @description custom close icon, default is Close
*/
closeIcon: { type: require_icon.iconPropType },
/**
* @description whether to show the arrow
*/
showArrow: {
type: Boolean,
default: void 0
},
/**
* @description position of the guide card relative to the target element
*/
placement: require_content.tourContentProps.placement,
/**
* @description whether to enable masking, change mask style and fill color by pass custom props
*/
mask: {
type: require_runtime.definePropType([Boolean, Object]),
default: void 0
},
/**
* @description custom style for content
*/
contentStyle: { type: require_runtime.definePropType([Object]) },
/**
* @description properties of the previous button
*/
prevButtonProps: { type: require_runtime.definePropType(Object) },
/**
* @description properties of the Next button
*/
nextButtonProps: { type: require_runtime.definePropType(Object) },
/**
* @description support pass custom scrollIntoView options
*/
scrollIntoViewOptions: {
type: require_runtime.definePropType([Boolean, Object]),
default: void 0
},
/**
* @description type, affects the background color and text color
*/
type: { type: require_runtime.definePropType(String) }
});
const tourStepEmits = { close: () => true };
//#endregion
exports.tourStepEmits = tourStepEmits;
exports.tourStepProps = tourStepProps;
//# sourceMappingURL=step.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,32 @@
import { TourMask } from "./types.js";
import { TourStepProps } from "./step.js";
import * as _$vue from "vue";
import * as _$_floating_ui_dom0 from "@floating-ui/dom";
//#region ../../packages/components/tour/src/step.vue.d.ts
declare var __VLS_12: {}, __VLS_14: {};
type __VLS_Slots = {} & {
header?: (props: typeof __VLS_12) => any;
} & {
default?: (props: typeof __VLS_14) => any;
};
declare const __VLS_base: _$vue.DefineComponent<TourStepProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
close: () => void;
}, string, _$vue.PublicProps, Readonly<TourStepProps> & Readonly<{
onClose?: (() => any) | undefined;
}>, {
placement: _$_floating_ui_dom0.Placement;
showArrow: boolean;
mask: TourMask;
showClose: boolean;
scrollIntoViewOptions: boolean | ScrollIntoViewOptions;
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default as default };

View File

@@ -0,0 +1,121 @@
require("../../../_virtual/_rolldown/runtime.js");
const require_aria = require("../../../constants/aria.js");
const require_event = require("../../../utils/dom/event.js");
const require_icon = require("../../../utils/vue/icon.js");
const require_index = require("../../../hooks/use-locale/index.js");
const require_index$1 = require("../../icon/index.js");
const require_index$2 = require("../../button/index.js");
const require_helper = require("./helper.js");
const require_step = require("./step.js");
let lodash_unified = require("lodash-unified");
let vue = require("vue");
//#region ../../packages/components/tour/src/step.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = ["aria-label"];
var step_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElTourStep",
__name: "step",
props: require_step.tourStepProps,
emits: require_step.tourStepEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const { Close } = require_icon.CloseComponents;
const { t } = require_index.useLocale();
const { currentStep, current, total, showClose, closeIcon, mergedType, ns, slots: tourSlots, updateModelValue, onClose: tourOnClose, onFinish: tourOnFinish, onChange } = (0, vue.inject)(require_helper.tourKey);
(0, vue.watch)(props, (val) => {
currentStep.value = val;
}, { immediate: true });
const mergedShowClose = (0, vue.computed)(() => props.showClose ?? showClose.value);
const mergedCloseIcon = (0, vue.computed)(() => props.closeIcon ?? closeIcon.value ?? Close);
const filterButtonProps = (btnProps) => {
if (!btnProps) return;
return (0, lodash_unified.omit)(btnProps, ["children", "onClick"]);
};
const onPrev = () => {
current.value -= 1;
if (props.prevButtonProps?.onClick) props.prevButtonProps?.onClick();
onChange();
};
const onNext = () => {
if (current.value >= total.value - 1) onFinish();
else current.value += 1;
if (props.nextButtonProps?.onClick) props.nextButtonProps.onClick();
onChange();
};
const onFinish = () => {
onClose();
tourOnFinish();
};
const onClose = () => {
updateModelValue(false);
tourOnClose();
emit("close");
};
const handleKeydown = (e) => {
if (e.target?.isContentEditable) return;
switch (require_event.getEventCode(e)) {
case require_aria.EVENT_CODE.left:
e.preventDefault();
current.value > 0 && onPrev();
break;
case require_aria.EVENT_CODE.right:
e.preventDefault();
onNext();
break;
}
};
(0, vue.onMounted)(() => {
window.addEventListener("keydown", handleKeydown);
});
(0, vue.onBeforeUnmount)(() => {
window.removeEventListener("keydown", handleKeydown);
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
mergedShowClose.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
key: 0,
"aria-label": (0, vue.unref)(t)("el.tour.close"),
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("closebtn")),
type: "button",
onClick: onClose
}, [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("close")) }, {
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(mergedCloseIcon.value)))]),
_: 1
}, 8, ["class"])], 10, _hoisted_1)) : (0, vue.createCommentVNode)("v-if", true),
(0, vue.createElementVNode)("header", { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("header"), { "show-close": (0, vue.unref)(showClose) }]) }, [(0, vue.renderSlot)(_ctx.$slots, "header", {}, () => [(0, vue.createElementVNode)("span", {
role: "heading",
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("title"))
}, (0, vue.toDisplayString)(__props.title), 3)])], 2),
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("body")) }, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(__props.description), 1)])], 2),
(0, vue.createElementVNode)("footer", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("footer")) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).b("indicators")) }, [(0, vue.unref)(tourSlots).indicators ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tourSlots).indicators), {
key: 0,
current: (0, vue.unref)(current),
total: (0, vue.unref)(total)
}, null, 8, ["current", "total"])) : ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)((0, vue.unref)(total), (item, index) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
key: item,
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).b("indicator"), (0, vue.unref)(ns).is("active", index === (0, vue.unref)(current))])
}, null, 2);
}), 128))], 2), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).b("buttons")) }, [(0, vue.unref)(current) > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$2.ElButton), (0, vue.mergeProps)({
key: 0,
size: "small",
type: (0, vue.unref)(mergedType)
}, filterButtonProps(__props.prevButtonProps), { onClick: onPrev }), {
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.prevButtonProps?.children ?? (0, vue.unref)(t)("el.tour.previous")), 1)]),
_: 1
}, 16, ["type"])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.unref)(current) <= (0, vue.unref)(total) - 1 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$2.ElButton), (0, vue.mergeProps)({
key: 1,
size: "small",
type: (0, vue.unref)(mergedType) === "primary" ? "default" : "primary"
}, filterButtonProps(__props.nextButtonProps), { onClick: onNext }), {
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.nextButtonProps?.children ?? ((0, vue.unref)(current) === (0, vue.unref)(total) - 1 ? (0, vue.unref)(t)("el.tour.finish") : (0, vue.unref)(t)("el.tour.next"))), 1)]),
_: 1
}, 16, ["type"])) : (0, vue.createCommentVNode)("v-if", true)], 2)], 2)
], 64);
};
}
});
//#endregion
exports.default = step_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=step.vue_vue_type_script_setup_true_lang.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,10 @@
Object.defineProperties(exports, {
__esModule: { value: true },
[Symbol.toStringTag]: { value: "Module" }
});
//#region ../../packages/components/tour/src/step.vue
var step_default = require("./step.vue_vue_type_script_setup_true_lang.js").default;
//#endregion
exports.default = step_default;
//# sourceMappingURL=step2.js.map

View File

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

View File

@@ -0,0 +1,23 @@
import * as _$vue from "vue";
import { VNode } from "vue";
//#region ../../packages/components/tour/src/steps.d.ts
declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
current: {
type: NumberConstructor;
default: number;
};
}>, () => VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, "update-total"[], "update-total", _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
current: {
type: NumberConstructor;
default: number;
};
}>> & Readonly<{
"onUpdate-total"?: ((...args: any[]) => any) | undefined;
}>, {
current: number;
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default as default };

View File

@@ -0,0 +1,45 @@
Object.defineProperties(exports, {
__esModule: { value: true },
[Symbol.toStringTag]: { value: "Module" }
});
require("../../../_virtual/_rolldown/runtime.js");
const require_vnode = require("../../../utils/vue/vnode.js");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/tour/src/steps.ts
var steps_default = (0, vue.defineComponent)({
name: "ElTourSteps",
props: { current: {
type: Number,
default: 0
} },
emits: ["update-total"],
setup(props, { slots, emit }) {
let cacheTotal = 0;
return () => {
const children = slots.default?.();
const result = [];
let total = 0;
function filterSteps(children) {
if (!(0, _vue_shared.isArray)(children)) return;
children.forEach((item) => {
if ((item?.type || {})?.name === "ElTourStep") {
result.push(item);
total += 1;
}
});
}
if (children.length) filterSteps(require_vnode.flattedChildren(children[0]?.children));
if (cacheTotal !== total) {
cacheTotal = total;
emit("update-total", total);
}
if (result.length) return result[props.current];
return null;
};
}
});
//#endregion
exports.default = steps_default;
//# sourceMappingURL=steps.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"steps.js","names":["flattedChildren"],"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"],"mappings":";;;;;;;;;AAMA,IAAA,iBAAA,GAAA,IAAA,iBAA+B;CAC7B,MAAM;CACN,OAAO,EACL,SAAS;EACP,MAAM;EACN,SAAS;EACV,EACF;CACD,OAAO,CAAC,eAAe;CACvB,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,IAAI,aAAa;EAEjB,aAAa;GACX,MAAM,WAAW,MAAM,WAAW;GAClC,MAAM,SAAkB,EAAE;GAC1B,IAAI,QAAQ;GAEZ,SAAS,YAAY,UAA0B;IAC7C,IAAI,EAAA,GAAA,YAAA,SAAS,SAAS,EAAE;IACvB,SAAsB,SAAS,SAAS;KAGvC,KAFe,MAAM,QAAQ,EAAE,GAAiB,SAEnC,cAAc;MACzB,OAAO,KAAK,KAAK;MACjB,SAAS;;MAEX;;GAGJ,IAAI,SAAS,QACX,YAAYA,cAAAA,gBAAgB,SAAU,IAAI,SAAS,CAAC;GAGtD,IAAI,eAAe,OAAO;IACxB,aAAa;IACb,KAAK,gBAAgB,MAAM;;GAG7B,IAAI,OAAO,QACT,OAAO,OAAO,MAAM;GAEtB,OAAO;;;CAGZ,CAAC"}

View File

@@ -0,0 +1,138 @@
import { IconPropType } from "../../../utils/vue/icon.js";
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { TourContentProps } from "./content.js";
import { TourGap, TourMask } from "./types.js";
import _default from "./tour.vue.js";
import * as _$vue from "vue";
import { CSSProperties, ExtractPublicPropTypes } from "vue";
import * as _$_floating_ui_dom0 from "@floating-ui/dom";
//#region ../../packages/components/tour/src/tour.d.ts
interface TourProps {
/**
* @description open tour
*/
modelValue?: boolean;
/**
* @description what is the current step
*/
current?: number;
/**
* @description whether to show the arrow
*/
showArrow?: boolean;
/**
* @description whether to show a close button
*/
showClose?: boolean;
/**
* @description custom close icon
*/
closeIcon?: IconPropType;
/**
* @description position of the guide card relative to the target element
*/
placement?: TourContentProps['placement'];
/**
* @description custom style for content
*/
contentStyle?: CSSProperties;
/**
* @description whether to enable masking, change mask style and fill color by pass custom props
*/
mask?: TourMask;
/**
* @description transparent gap between mask and target
*/
gap?: TourGap;
/**
* @description tour's zIndex
*/
zIndex?: number;
/**
* @description support pass custom scrollIntoView options
*/
scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
/**
* @description type, affects the background color and text color
*/
type?: 'default' | 'primary';
/**
* @description which element the TourContent appends to
*/
appendTo?: string | HTMLElement;
/**
* @description whether the Tour can be closed by pressing ESC
*/
closeOnPressEscape?: boolean;
/**
* @description whether the target element can be clickable, when using mask
*/
targetAreaClickable?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `TourProps` instead.
*/
declare const tourProps: {
modelValue: BooleanConstructor;
current: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
showClose: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
closeIcon: {
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
placement: EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement) | (((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement)) | null)[], "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: _$vue.PropType<CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
mask: EpPropFinalized<(new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask) | (((new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask)) | null)[], unknown, unknown, boolean, boolean>;
gap: EpPropFinalized<(new (...args: any[]) => TourGap) | (() => TourGap) | (((new (...args: any[]) => TourGap) | (() => TourGap)) | null)[], unknown, unknown, () => {
offset: number;
radius: number;
}, boolean>;
zIndex: {
readonly type: _$vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | (((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions)) | null)[], unknown, unknown, () => {
block: string;
}, boolean>;
type: {
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | (((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary")) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
appendTo: EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown, string, boolean>;
closeOnPressEscape: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
targetAreaClickable: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `TourProps` instead.
*/
type TourPropsPublic = ExtractPublicPropTypes<typeof tourProps>;
type TourInstance = InstanceType<typeof _default> & unknown;
declare const tourEmits: {
"update:modelValue": (value: boolean) => boolean;
"update:current": (current: number) => boolean;
close: (current: number) => boolean;
finish: () => boolean;
change: (current: number) => boolean;
};
type TourEmits = typeof tourEmits;
//#endregion
export { TourEmits, TourInstance, TourProps, TourPropsPublic, tourEmits, tourProps };

View File

@@ -0,0 +1,114 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_event = require("../../../constants/event.js");
const require_types = require("../../../utils/types.js");
const require_runtime = require("../../../utils/vue/props/runtime.js");
const require_icon = require("../../../utils/vue/icon.js");
const require_content = require("./content.js");
//#region ../../packages/components/tour/src/tour.ts
/**
* @deprecated Removed after 3.0.0, Use `TourProps` instead.
*/
const tourProps = require_runtime.buildProps({
/**
* @description open tour
*/
modelValue: Boolean,
/**
* @description what is the current step
*/
current: {
type: Number,
default: 0
},
/**
* @description whether to show the arrow
*/
showArrow: {
type: Boolean,
default: true
},
/**
* @description whether to show a close button
*/
showClose: {
type: Boolean,
default: true
},
/**
* @description custom close icon
*/
closeIcon: { type: require_icon.iconPropType },
/**
* @description position of the guide card relative to the target element
*/
placement: require_content.tourContentProps.placement,
/**
* @description custom style for content
*/
contentStyle: { type: require_runtime.definePropType([Object]) },
/**
* @description whether to enable masking, change mask style and fill color by pass custom props
*/
mask: {
type: require_runtime.definePropType([Boolean, Object]),
default: true
},
/**
* @description transparent gap between mask and target
*/
gap: {
type: require_runtime.definePropType(Object),
default: () => ({
offset: 6,
radius: 2
})
},
/**
* @description tour's zIndex
*/
zIndex: { type: Number },
/**
* @description support pass custom scrollIntoView options
*/
scrollIntoViewOptions: {
type: require_runtime.definePropType([Boolean, Object]),
default: () => ({ block: "center" })
},
/**
* @description type, affects the background color and text color
*/
type: { type: require_runtime.definePropType(String) },
/**
* @description which element the TourContent appends to
*/
appendTo: {
type: require_runtime.definePropType([String, Object]),
default: "body"
},
/**
* @description whether the Tour can be closed by pressing ESC
*/
closeOnPressEscape: {
type: Boolean,
default: true
},
/**
* @description whether the target element can be clickable, when using mask
*/
targetAreaClickable: {
type: Boolean,
default: true
}
});
const tourEmits = {
[require_event.UPDATE_MODEL_EVENT]: (value) => require_types.isBoolean(value),
["update:current"]: (current) => require_types.isNumber(current),
close: (current) => require_types.isNumber(current),
finish: () => true,
change: (current) => require_types.isNumber(current)
};
//#endregion
exports.tourEmits = tourEmits;
exports.tourProps = tourProps;
//# sourceMappingURL=tour.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,48 @@
import { TourGap, TourMask } from "./types.js";
import { TourProps } from "./tour.js";
import * as _$vue from "vue";
import * as _$_floating_ui_dom0 from "@floating-ui/dom";
//#region ../../packages/components/tour/src/tour.vue.d.ts
declare var __VLS_28: {}, __VLS_30: {
current: number;
total: number;
};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_28) => any;
} & {
indicators?: (props: typeof __VLS_30) => any;
};
declare const __VLS_base: _$vue.DefineComponent<TourProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
close: (current: number) => void;
finish: () => void;
change: (current: number) => void;
"update:modelValue": (value: boolean) => void;
"update:current": (current: number) => void;
}, string, _$vue.PublicProps, Readonly<TourProps> & Readonly<{
onClose?: ((current: number) => any) | undefined;
onFinish?: (() => any) | undefined;
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
onChange?: ((current: number) => any) | undefined;
"onUpdate:current"?: ((current: number) => any) | undefined;
}>, {
appendTo: string | HTMLElement;
placement: _$_floating_ui_dom0.Placement;
showArrow: boolean;
gap: TourGap;
mask: TourMask;
closeOnPressEscape: boolean;
showClose: boolean;
scrollIntoViewOptions: boolean | ScrollIntoViewOptions;
current: number;
targetAreaClickable: boolean;
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default as default };

View File

@@ -0,0 +1,125 @@
require("../../../_virtual/_rolldown/runtime.js");
const require_event = require("../../../constants/event.js");
const require_types = require("../../../utils/types.js");
const require_index = require("../../../hooks/use-namespace/index.js");
const require_index$1 = require("../../../hooks/use-z-index/index.js");
const require_tour = require("./tour.js");
const require_helper = require("./helper.js");
const require_mask = require("./mask2.js");
const require_content = require("./content2.js");
const require_steps = require("./steps.js");
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
//#region ../../packages/components/tour/src/tour.vue?vue&type=script&setup=true&lang.ts
var tour_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElTour",
inheritAttrs: false,
__name: "tour",
props: require_tour.tourProps,
emits: require_tour.tourEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const ns = require_index.useNamespace("tour");
const total = (0, vue.ref)(0);
const currentStep = (0, vue.ref)();
const current = (0, _vueuse_core.useVModel)(props, "current", emit, { passive: true });
const currentTarget = (0, vue.computed)(() => currentStep.value?.target);
const kls = (0, vue.computed)(() => [ns.b(), mergedType.value === "primary" ? ns.m("primary") : ""]);
const mergedPlacement = (0, vue.computed)(() => currentStep.value?.placement || props.placement);
const mergedContentStyle = (0, vue.computed)(() => currentStep.value?.contentStyle ?? props.contentStyle);
const mergedMask = (0, vue.computed)(() => currentStep.value?.mask ?? props.mask);
const mergedShowMask = (0, vue.computed)(() => !!mergedMask.value && props.modelValue);
const mergedMaskStyle = (0, vue.computed)(() => require_types.isBoolean(mergedMask.value) ? void 0 : mergedMask.value);
const mergedShowArrow = (0, vue.computed)(() => !!currentTarget.value && (currentStep.value?.showArrow ?? props.showArrow));
const mergedScrollIntoViewOptions = (0, vue.computed)(() => currentStep.value?.scrollIntoViewOptions ?? props.scrollIntoViewOptions);
const mergedType = (0, vue.computed)(() => currentStep.value?.type ?? props.type);
const { nextZIndex } = require_index$1.useZIndex();
const nowZIndex = nextZIndex();
const mergedZIndex = (0, vue.computed)(() => props.zIndex ?? nowZIndex);
const { mergedPosInfo: pos, triggerTarget } = require_helper.useTarget(currentTarget, (0, vue.toRef)(props, "modelValue"), (0, vue.toRef)(props, "gap"), mergedMask, mergedScrollIntoViewOptions);
(0, vue.watch)(() => props.modelValue, (val) => {
if (!val) current.value = 0;
});
const onEscClose = () => {
if (props.closeOnPressEscape) {
emit(require_event.UPDATE_MODEL_EVENT, false);
emit("close", current.value);
}
};
const onUpdateTotal = (val) => {
total.value = val;
};
const slots = (0, vue.useSlots)();
(0, vue.provide)(require_helper.tourKey, {
currentStep,
current,
total,
showClose: (0, vue.toRef)(props, "showClose"),
closeIcon: (0, vue.toRef)(props, "closeIcon"),
mergedType,
ns,
slots,
updateModelValue(modelValue) {
emit(require_event.UPDATE_MODEL_EVENT, modelValue);
},
onClose() {
emit("close", current.value);
},
onFinish() {
emit("finish");
},
onChange() {
emit(require_event.CHANGE_EVENT, current.value);
}
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, { to: __props.appendTo }, [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({ class: kls.value }, _ctx.$attrs), [(0, vue.createVNode)(require_mask.default, {
visible: mergedShowMask.value,
fill: mergedMaskStyle.value?.color,
style: (0, vue.normalizeStyle)(mergedMaskStyle.value?.style),
pos: (0, vue.unref)(pos),
"z-index": mergedZIndex.value,
"target-area-clickable": __props.targetAreaClickable
}, null, 8, [
"visible",
"fill",
"style",
"pos",
"z-index",
"target-area-clickable"
]), __props.modelValue ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_content.default, {
key: (0, vue.unref)(current),
reference: (0, vue.unref)(triggerTarget),
placement: mergedPlacement.value,
"show-arrow": mergedShowArrow.value,
"z-index": mergedZIndex.value,
style: (0, vue.normalizeStyle)(mergedContentStyle.value),
onClose: onEscClose
}, {
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_steps.default), {
current: (0, vue.unref)(current),
onUpdateTotal
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 8, ["current"])]),
_: 3
}, 8, [
"reference",
"placement",
"show-arrow",
"z-index",
"style"
])) : (0, vue.createCommentVNode)("v-if", true)], 16)], 8, ["to"])),
(0, vue.createCommentVNode)(" just for IDE "),
(0, vue.createCommentVNode)("v-if", true)
], 64);
};
}
});
//#endregion
exports.default = tour_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=tour.vue_vue_type_script_setup_true_lang.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,10 @@
Object.defineProperties(exports, {
__esModule: { value: true },
[Symbol.toStringTag]: { value: "Module" }
});
//#region ../../packages/components/tour/src/tour.vue
var tour_default = require("./tour.vue_vue_type_script_setup_true_lang.js").default;
//#endregion
exports.default = tour_default;
//# sourceMappingURL=tour2.js.map

View File

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

View File

@@ -0,0 +1,25 @@
import { ButtonProps } from "../../button/src/button.js";
import { CSSProperties, VNode } from "vue";
//#region ../../packages/components/tour/src/types.d.ts
type TourMask = boolean | {
style?: CSSProperties;
color?: string;
};
interface TourGap {
offset?: number | [number, number];
radius?: number;
}
type TourBtnProps = {
children?: VNode | string;
onClick?: () => void;
} & Partial<ButtonProps> & Record<string, any>;
interface PosInfo {
left: number;
top: number;
height: number;
width: number;
radius: number;
}
//#endregion
export { PosInfo, TourBtnProps, TourGap, TourMask };

View File

@@ -0,0 +1 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });

View File

@@ -0,0 +1,4 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../base/style/css.js");
require("../../button/style/css.js");
require("element-plus/theme-chalk/el-tour.css");

View File

@@ -0,0 +1,4 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../base/style/index.js");
require("../../button/style/index.js");
require("element-plus/theme-chalk/src/tour.scss");