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';

28
node_modules/element-plus/lib/components/tour/index.js generated vendored Normal file
View File

@@ -0,0 +1,28 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tour$1 = require('./src/tour.js');
var step$1 = require('./src/step2.js');
var tour = require('./src/tour2.js');
var step = require('./src/step.js');
var content = require('./src/content.js');
var install = require('../../utils/vue/install.js');
const ElTour = install.withInstall(tour$1["default"], {
TourStep: step$1["default"]
});
const ElTourStep = install.withNoopInstall(step$1["default"]);
exports.tourEmits = tour.tourEmits;
exports.tourProps = tour.tourProps;
exports.tourStepEmits = step.tourStepEmits;
exports.tourStepProps = step.tourStepProps;
exports.tourContentEmits = content.tourContentEmits;
exports.tourContentProps = content.tourContentProps;
exports.tourPlacements = content.tourPlacements;
exports.tourStrategies = content.tourStrategies;
exports.ElTour = ElTour;
exports.ElTourStep = ElTourStep;
exports["default"] = ElTour;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","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":["withInstall","Tour","TourStep","withNoopInstall"],"mappings":";;;;;;;;;;;AAGY,MAAC,MAAM,GAAGA,mBAAW,CAACC,iBAAI,EAAE;AACxC,YAAEC,iBAAQ;AACV,CAAC,EAAE;AACS,MAAC,UAAU,GAAGC,uBAAe,CAACD,iBAAQ;;;;;;;;;;;;;;"}

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,55 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var runtime = require('../../../utils/vue/props/runtime.js');
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 = runtime.buildProps({
placement: {
type: runtime.definePropType(String),
values: tourPlacements,
default: "bottom"
},
reference: {
type: runtime.definePropType(Object),
default: null
},
strategy: {
type: runtime.definePropType(String),
values: tourStrategies,
default: "absolute"
},
offset: {
type: Number,
default: 10
},
showArrow: Boolean,
zIndex: {
type: Number,
default: 2001
}
});
const tourContentEmits = {
close: () => true
};
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","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":["buildProps","definePropType"],"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,GAAGA,kBAAU,CAAC;AAC3C,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,sBAAc,CAAC,MAAM,CAAC;AAChC,IAAI,MAAM,EAAE,cAAc;AAC1B,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAEA,sBAAc,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,76 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var focusTrap = require('../../focus-trap/src/focus-trap.js');
var content = require('./content.js');
var helper = require('./helper.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
const __default__ = vue.defineComponent({
name: "ElTourContent"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: content.tourContentProps,
emits: content.tourContentEmits,
setup(__props, { emit }) {
const props = __props;
const placement = vue.ref(props.placement);
const strategy = vue.ref(props.strategy);
const contentRef = vue.ref(null);
const arrowRef = vue.ref(null);
vue.watch(() => props.placement, () => {
placement.value = props.placement;
});
const { contentStyle, arrowStyle } = helper.useFloating(vue.toRef(props, "reference"), contentRef, arrowRef, placement, strategy, vue.toRef(props, "offset"), vue.toRef(props, "zIndex"), vue.toRef(props, "showArrow"));
const side = vue.computed(() => {
return placement.value.split("-")[0];
});
const { ns } = vue.inject(helper.tourKey);
const onCloseRequested = () => {
emit("close");
};
const onFocusoutPrevented = (event) => {
if (event.detail.focusReason === "pointer") {
event.preventDefault();
}
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "contentRef",
ref: contentRef,
style: vue.normalizeStyle(vue.unref(contentStyle)),
class: vue.normalizeClass(vue.unref(ns).e("content")),
"data-side": vue.unref(side),
tabindex: "-1"
}, [
vue.createVNode(vue.unref(focusTrap["default"]), {
loop: "",
trapped: "",
"focus-start-el": "container",
"focus-trap-el": contentRef.value || void 0,
onReleaseRequested: onCloseRequested,
onFocusoutPrevented
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["focus-trap-el"]),
_ctx.showArrow ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
ref_key: "arrowRef",
ref: arrowRef,
style: vue.normalizeStyle(vue.unref(arrowStyle)),
class: vue.normalizeClass(vue.unref(ns).e("arrow"))
}, null, 6)) : vue.createCommentVNode("v-if", true)
], 14, ["data-side"]);
};
}
});
var ElTourContent = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "content.vue"]]);
exports["default"] = ElTourContent;
//# sourceMappingURL=content2.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"content2.js","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":["ref","watch","useFloating","toRef","computed","inject","tourKey","_openBlock","_createElementBlock","_unref","_normalizeClass","_createVNode","ElFocusTrap"],"mappings":";;;;;;;;;;uCAiCc,CAAA;AAAA,EACZ,IAAM,EAAA,eAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAM,MAAA,SAAA,GAAYA,OAAI,CAAA,KAAA,CAAM,SAAS,CAAA,CAAA;AACrC,IAAM,MAAA,QAAA,GAAWA,OAAI,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AACnC,IAAM,MAAA,UAAA,GAAaA,QAAwB,IAAI,CAAA,CAAA;AAC/C,IAAM,MAAA,QAAA,GAAWA,QAAwB,IAAI,CAAA,CAAA;AAE7C,IAAAC,SAAA,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,GAAAC,kBAAA,CAAAC,SAAA,CAAA,KAAA,EAAA,WAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAAA,SAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAAA,SAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAAA,SAAA,CAAA,KAAA,EAAA,WAAA,CAAA,CAAA,CAAA;AAAA,IAC1B,MAAA,IAAA,GAAAC,YAAA,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,OAAOC,UAAW,CAAAC,cAAA,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,OAAOC,aAAU,EAAA,EAAAC,sBAAkB,CAAA,KAAA,EAAA;AAAA,QACpC,OAAA,EAAA,YAAA;AAED,QAAA,GAAQ,EAAA,UAAO;AAEf,QAAA,yBAA+B,CAAAC,SAAA,CAAA,YAAA,CAAA,CAAA;AAC7B,QAAA,KAAY,EAAAC,kBAAA,CAAAD,SAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA;AAAA,QACd,WAAA,EAAAA,SAAA,CAAA,IAAA,CAAA;AAEA,QAAM,QAAA,EAAA,IAAA;AACJ,OAAI,EAAA;AACF,QAAAE,eAAqB,CAAAF,SAAA,CAAAG,oBAAA,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,214 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var dom = require('@floating-ui/dom');
var shared = require('@vue/shared');
var core = require('@vueuse/core');
var objects = require('../../../utils/objects.js');
const useTarget = (target, open, gap, mergedMask, scrollIntoViewOptions) => {
const posInfo = vue.ref(null);
const getTargetEl = () => {
let targetEl;
if (shared.isString(target.value)) {
targetEl = document.querySelector(target.value);
} else if (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
};
};
vue.onMounted(() => {
vue.watch([open, target], () => {
updatePosInfo();
}, {
immediate: true
});
window.addEventListener("resize", updatePosInfo);
});
vue.onBeforeUnmount(() => {
window.removeEventListener("resize", updatePosInfo);
});
const getGapOffset = (index) => {
var _a;
return (_a = shared.isArray(gap.value.offset) ? gap.value.offset[index] : gap.value.offset) != null ? _a : 6;
};
const mergedPosInfo = vue.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 = vue.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, zIndex, showArrow) => {
const x = vue.ref();
const y = vue.ref();
const middlewareData = vue.ref({});
const states = {
x,
y,
placement,
strategy,
middlewareData
};
const middleware = vue.computed(() => {
const _middleware = [
dom.offset(vue.unref(offset)),
dom.flip(),
dom.shift(),
overflowMiddleware()
];
if (vue.unref(showArrow) && vue.unref(arrowRef)) {
_middleware.push(dom.arrow({
element: vue.unref(arrowRef)
}));
}
return _middleware;
});
const update = async () => {
if (!core.isClient)
return;
const referenceEl = vue.unref(referenceRef);
const contentEl = vue.unref(contentRef);
if (!referenceEl || !contentEl)
return;
const data = await dom.computePosition(referenceEl, contentEl, {
placement: vue.unref(placement),
strategy: vue.unref(strategy),
middleware: vue.unref(middleware)
});
objects.keysOf(states).forEach((key) => {
states[key].value = data[key];
});
};
const contentStyle = vue.computed(() => {
if (!vue.unref(referenceRef)) {
return {
position: "fixed",
top: "50%",
left: "50%",
transform: "translate3d(-50%, -50%, 0)",
maxWidth: "100vw",
zIndex: vue.unref(zIndex)
};
}
const { overflow } = vue.unref(middlewareData);
return {
position: vue.unref(strategy),
zIndex: vue.unref(zIndex),
top: vue.unref(y) != null ? `${vue.unref(y)}px` : "",
left: vue.unref(x) != null ? `${vue.unref(x)}px` : "",
maxWidth: (overflow == null ? void 0 : overflow.maxWidth) ? `${overflow == null ? void 0 : overflow.maxWidth}px` : ""
};
});
const arrowStyle = vue.computed(() => {
if (!vue.unref(showArrow))
return {};
const { arrow: arrow2 } = vue.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;
vue.onMounted(() => {
const referenceEl = vue.unref(referenceRef);
const contentEl = vue.unref(contentRef);
if (referenceEl && contentEl) {
cleanup = dom.autoUpdate(referenceEl, contentEl, update);
}
vue.watchEffect(() => {
update();
});
});
vue.onBeforeUnmount(() => {
cleanup && cleanup();
});
return {
update,
contentStyle,
arrowStyle
};
};
const overflowMiddleware = () => {
return {
name: "overflow",
async fn(state) {
const overflow = await dom.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
}
};
}
};
};
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,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,27 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var runtime = require('../../../utils/vue/props/runtime.js');
const maskProps = runtime.buildProps({
zIndex: {
type: Number,
default: 1001
},
visible: Boolean,
fill: {
type: String,
default: "rgba(0,0,0,0.5)"
},
pos: {
type: runtime.definePropType(Object)
},
targetAreaClickable: {
type: Boolean,
default: true
}
});
exports.maskProps = maskProps;
//# sourceMappingURL=mask.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"mask.js","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":["buildProps","definePropType"],"mappings":";;;;;;AACY,MAAC,SAAS,GAAGA,kBAAU,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,EAAEC,sBAAc,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,85 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
var mask = require('./mask.js');
var helper = require('./helper.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-lockscreen/index.js');
const __default__ = vue.defineComponent({
name: "ElTourMask",
inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: mask.maskProps,
setup(__props) {
const props = __props;
const { ns } = vue.inject(helper.tourKey);
const radius = vue.computed(() => {
var _a, _b;
return (_b = (_a = props.pos) == null ? void 0 : _a.radius) != null ? _b : 2;
});
const roundInfo = 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 } = core.useWindowSize();
const path = 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 = vue.computed(() => ({
position: "fixed",
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: props.zIndex,
pointerEvents: props.pos && props.targetAreaClickable ? "none" : "auto"
}));
const pathStyle = vue.computed(() => ({
fill: props.fill,
pointerEvents: "auto",
cursor: "auto"
}));
index.useLockscreen(vue.toRef(props, "visible"), {
ns
});
return (_ctx, _cache) => {
return _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
key: 0,
class: vue.unref(ns).e("mask"),
style: vue.unref(maskStyle)
}, _ctx.$attrs), [
(vue.openBlock(), vue.createElementBlock("svg", { style: {
width: "100%",
height: "100%"
} }, [
vue.createElementVNode("path", {
class: vue.normalizeClass(vue.unref(ns).e("hollow")),
style: vue.normalizeStyle(vue.unref(pathStyle)),
d: vue.unref(path)
}, null, 14, ["d"])
]))
], 16)) : vue.createCommentVNode("v-if", true);
};
}
});
var ElTourMask = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "mask.vue"]]);
exports["default"] = ElTourMask;
//# sourceMappingURL=mask2.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"mask2.js","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":["inject","tourKey","computed","useWindowSize"],"mappings":";;;;;;;;;;;uCAsBc,CAAA;AAAA,EACZ,IAAM,EAAA,YAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA,CAAA;;;;;;AAIA,IAAA,MAAM,EAAE,EAAA,EAAO,GAAAA,UAAA,CAAOC,cAAO,CAAA,CAAA;AAC7B,IAAA,MAAM,SAASC,YAAS,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,GAAAA,YAAA,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,GAAAC,kBAAA,EAAA,CAAA;AAC5B,IAAA,MAAA,mBAAuB,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,GAAAD,YAAA,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,GAAAA,YAAA,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,54 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var content = require('./content.js');
var runtime = require('../../../utils/vue/props/runtime.js');
var icon = require('../../../utils/vue/icon.js');
const tourStepProps = runtime.buildProps({
target: {
type: runtime.definePropType([String, Object, Function])
},
title: String,
description: String,
showClose: {
type: Boolean,
default: void 0
},
closeIcon: {
type: icon.iconPropType
},
showArrow: {
type: Boolean,
default: void 0
},
placement: content.tourContentProps.placement,
mask: {
type: runtime.definePropType([Boolean, Object]),
default: void 0
},
contentStyle: {
type: runtime.definePropType([Object])
},
prevButtonProps: {
type: runtime.definePropType(Object)
},
nextButtonProps: {
type: runtime.definePropType(Object)
},
scrollIntoViewOptions: {
type: runtime.definePropType([Boolean, Object]),
default: void 0
},
type: {
type: runtime.definePropType(String)
}
});
const tourStepEmits = {
close: () => true
};
exports.tourStepEmits = tourStepEmits;
exports.tourStepProps = tourStepProps;
//# sourceMappingURL=step.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"step.js","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":["buildProps","definePropType","iconPropType","tourContentProps"],"mappings":";;;;;;;;AAEY,MAAC,aAAa,GAAGA,kBAAU,CAAC;AACxC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEC,sBAAc,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,EAAEC,iBAAY;AACtB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,SAAS,EAAEC,wBAAgB,CAAC,SAAS;AACvC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEF,sBAAc,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC3C,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAEA,sBAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAClC,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,qBAAqB,EAAE;AACzB,IAAI,IAAI,EAAEA,sBAAc,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC3C,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEA,sBAAc,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,198 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var index$2 = require('../../button/index.js');
var index$1 = require('../../icon/index.js');
var step = require('./step.js');
var helper = require('./helper.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-locale/index.js');
var icon = require('../../../utils/vue/icon.js');
var aria = require('../../../constants/aria.js');
const __default__ = vue.defineComponent({
name: "ElTourStep"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: step.tourStepProps,
emits: step.tourStepEmits,
setup(__props, { emit }) {
const props = __props;
const { Close } = icon.CloseComponents;
const { t } = index.useLocale();
const {
currentStep,
current,
total,
showClose,
closeIcon,
mergedType,
ns,
slots: tourSlots,
updateModelValue,
onClose: tourOnClose,
onFinish: tourOnFinish,
onChange
} = vue.inject(helper.tourKey);
vue.watch(props, (val) => {
currentStep.value = val;
}, {
immediate: true
});
const mergedShowClose = vue.computed(() => {
var _a;
return (_a = props.showClose) != null ? _a : showClose.value;
});
const mergedCloseIcon = vue.computed(() => {
var _a, _b;
return (_b = (_a = props.closeIcon) != null ? _a : closeIcon.value) != null ? _b : Close;
});
const filterButtonProps = (btnProps) => {
if (!btnProps)
return;
return lodashUnified.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 = {
[aria.EVENT_CODE.left]: () => current.value > 0 && onPrev(),
[aria.EVENT_CODE.right]: onNext
};
const action = actions[e.code];
if (action) {
e.preventDefault();
action();
}
};
vue.onMounted(() => {
window.addEventListener("keydown", handleKeydown);
});
vue.onBeforeUnmount(() => {
window.removeEventListener("keydown", handleKeydown);
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
vue.unref(mergedShowClose) ? (vue.openBlock(), vue.createElementBlock("button", {
key: 0,
"aria-label": vue.unref(t)("el.tour.close"),
class: vue.normalizeClass(vue.unref(ns).e("closebtn")),
type: "button",
onClick: onClose
}, [
vue.createVNode(vue.unref(index$1.ElIcon), {
class: vue.normalizeClass(vue.unref(ns).e("close"))
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(mergedCloseIcon))))
]),
_: 1
}, 8, ["class"])
], 10, ["aria-label"])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("header", {
class: vue.normalizeClass([vue.unref(ns).e("header"), { "show-close": vue.unref(showClose) }])
}, [
vue.renderSlot(_ctx.$slots, "header", {}, () => [
vue.createElementVNode("span", {
role: "heading",
class: vue.normalizeClass(vue.unref(ns).e("title"))
}, vue.toDisplayString(_ctx.title), 3)
])
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("body"))
}, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.description), 1)
])
], 2),
vue.createElementVNode("footer", {
class: vue.normalizeClass(vue.unref(ns).e("footer"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).b("indicators"))
}, [
vue.unref(tourSlots).indicators ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tourSlots).indicators), {
key: 0,
current: vue.unref(current),
total: vue.unref(total)
}, null, 8, ["current", "total"])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(vue.unref(total), (item, index) => {
return vue.openBlock(), vue.createElementBlock("span", {
key: item,
class: vue.normalizeClass([vue.unref(ns).b("indicator"), index === vue.unref(current) ? "is-active" : ""])
}, null, 2);
}), 128))
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).b("buttons"))
}, [
vue.unref(current) > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ElButton), vue.mergeProps({
key: 0,
size: "small",
type: vue.unref(mergedType)
}, filterButtonProps(_ctx.prevButtonProps), { onClick: onPrev }), {
default: vue.withCtx(() => {
var _a, _b;
return [
vue.createTextVNode(vue.toDisplayString((_b = (_a = _ctx.prevButtonProps) == null ? void 0 : _a.children) != null ? _b : vue.unref(t)("el.tour.previous")), 1)
];
}),
_: 1
}, 16, ["type"])) : vue.createCommentVNode("v-if", true),
vue.unref(current) <= vue.unref(total) - 1 ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ElButton), vue.mergeProps({
key: 1,
size: "small",
type: vue.unref(mergedType) === "primary" ? "default" : "primary"
}, filterButtonProps(_ctx.nextButtonProps), { onClick: onNext }), {
default: vue.withCtx(() => {
var _a, _b;
return [
vue.createTextVNode(vue.toDisplayString((_b = (_a = _ctx.nextButtonProps) == null ? void 0 : _a.children) != null ? _b : vue.unref(current) === vue.unref(total) - 1 ? vue.unref(t)("el.tour.finish") : vue.unref(t)("el.tour.next")), 1)
];
}),
_: 1
}, 16, ["type"])) : vue.createCommentVNode("v-if", true)
], 2)
], 2)
], 64);
};
}
});
var TourStep = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "step.vue"]]);
exports["default"] = TourStep;
//# sourceMappingURL=step2.js.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,53 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var vnode = require('../../../utils/vue/vnode.js');
var shared = require('@vue/shared');
var ElTourSteps = vue.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 (!shared.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(vnode.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;
};
}
});
exports["default"] = ElTourSteps;
//# sourceMappingURL=steps.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"steps.js","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":["defineComponent","isArray","flattedChildren"],"mappings":";;;;;;;;AAEA,kBAAeA,mBAAe,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,CAACC,cAAO,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,CAACC,qBAAe,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,163 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
var index$2 = require('../../teleport/index.js');
var mask = require('./mask2.js');
var content = require('./content2.js');
var steps = require('./steps.js');
var tour = require('./tour2.js');
var helper = require('./helper.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var types = require('../../../utils/types.js');
var index$1 = require('../../../hooks/use-z-index/index.js');
var event = require('../../../constants/event.js');
const __default__ = vue.defineComponent({
name: "ElTour"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: tour.tourProps,
emits: tour.tourEmits,
setup(__props, { emit }) {
const props = __props;
const ns = index.useNamespace("tour");
const total = vue.ref(0);
const currentStep = vue.ref();
const current = core.useVModel(props, "current", emit, {
passive: true
});
const currentTarget = vue.computed(() => {
var _a;
return (_a = currentStep.value) == null ? void 0 : _a.target;
});
const kls = vue.computed(() => [
ns.b(),
mergedType.value === "primary" ? ns.m("primary") : ""
]);
const mergedPlacement = vue.computed(() => {
var _a;
return ((_a = currentStep.value) == null ? void 0 : _a.placement) || props.placement;
});
const mergedContentStyle = vue.computed(() => {
var _a, _b;
return (_b = (_a = currentStep.value) == null ? void 0 : _a.contentStyle) != null ? _b : props.contentStyle;
});
const mergedMask = vue.computed(() => {
var _a, _b;
return (_b = (_a = currentStep.value) == null ? void 0 : _a.mask) != null ? _b : props.mask;
});
const mergedShowMask = vue.computed(() => !!mergedMask.value && props.modelValue);
const mergedMaskStyle = vue.computed(() => types.isBoolean(mergedMask.value) ? void 0 : mergedMask.value);
const mergedShowArrow = vue.computed(() => {
var _a, _b;
return !!currentTarget.value && ((_b = (_a = currentStep.value) == null ? void 0 : _a.showArrow) != null ? _b : props.showArrow);
});
const mergedScrollIntoViewOptions = vue.computed(() => {
var _a, _b;
return (_b = (_a = currentStep.value) == null ? void 0 : _a.scrollIntoViewOptions) != null ? _b : props.scrollIntoViewOptions;
});
const mergedType = vue.computed(() => {
var _a, _b;
return (_b = (_a = currentStep.value) == null ? void 0 : _a.type) != null ? _b : props.type;
});
const { nextZIndex } = index$1.useZIndex();
const nowZIndex = nextZIndex();
const mergedZIndex = vue.computed(() => {
var _a;
return (_a = props.zIndex) != null ? _a : nowZIndex;
});
const { mergedPosInfo: pos, triggerTarget } = helper.useTarget(currentTarget, vue.toRef(props, "modelValue"), vue.toRef(props, "gap"), mergedMask, mergedScrollIntoViewOptions);
vue.watch(() => props.modelValue, (val) => {
if (!val) {
current.value = 0;
}
});
const onEscClose = () => {
if (props.closeOnPressEscape) {
emit(event.UPDATE_MODEL_EVENT, false);
emit("close", current.value);
}
};
const onUpdateTotal = (val) => {
total.value = val;
};
const slots = vue.useSlots();
vue.provide(helper.tourKey, {
currentStep,
current,
total,
showClose: vue.toRef(props, "showClose"),
closeIcon: vue.toRef(props, "closeIcon"),
mergedType,
ns,
slots,
updateModelValue(modelValue) {
emit(event.UPDATE_MODEL_EVENT, modelValue);
},
onClose() {
emit("close", current.value);
},
onFinish() {
emit("finish");
},
onChange() {
emit(event.CHANGE_EVENT, current.value);
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
vue.createVNode(vue.unref(index$2.ElTeleport), { to: _ctx.appendTo }, {
default: vue.withCtx(() => {
var _a, _b;
return [
vue.createElementVNode("div", vue.mergeProps({ class: vue.unref(kls) }, _ctx.$attrs), [
vue.createVNode(mask["default"], {
visible: vue.unref(mergedShowMask),
fill: (_a = vue.unref(mergedMaskStyle)) == null ? void 0 : _a.color,
style: vue.normalizeStyle((_b = vue.unref(mergedMaskStyle)) == null ? void 0 : _b.style),
pos: vue.unref(pos),
"z-index": vue.unref(mergedZIndex),
"target-area-clickable": _ctx.targetAreaClickable
}, null, 8, ["visible", "fill", "style", "pos", "z-index", "target-area-clickable"]),
_ctx.modelValue ? (vue.openBlock(), vue.createBlock(content["default"], {
key: vue.unref(current),
reference: vue.unref(triggerTarget),
placement: vue.unref(mergedPlacement),
"show-arrow": vue.unref(mergedShowArrow),
"z-index": vue.unref(mergedZIndex),
style: vue.normalizeStyle(vue.unref(mergedContentStyle)),
onClose: onEscClose
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(steps["default"]), {
current: vue.unref(current),
onUpdateTotal
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["current"])
]),
_: 3
}, 8, ["reference", "placement", "show-arrow", "z-index", "style"])) : vue.createCommentVNode("v-if", true)
], 16)
];
}),
_: 3
}, 8, ["to"]),
vue.createCommentVNode(" just for IDE "),
vue.createCommentVNode("v-if", true)
], 64);
};
}
});
var Tour = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "tour.vue"]]);
exports["default"] = Tour;
//# sourceMappingURL=tour.js.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,79 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var content = require('./content.js');
var runtime = require('../../../utils/vue/props/runtime.js');
var icon = require('../../../utils/vue/icon.js');
var teleport = require('../../teleport/src/teleport.js');
var event = require('../../../constants/event.js');
var types = require('../../../utils/types.js');
const tourProps = runtime.buildProps({
modelValue: Boolean,
current: {
type: Number,
default: 0
},
showArrow: {
type: Boolean,
default: true
},
showClose: {
type: Boolean,
default: true
},
closeIcon: {
type: icon.iconPropType
},
placement: content.tourContentProps.placement,
contentStyle: {
type: runtime.definePropType([Object])
},
mask: {
type: runtime.definePropType([Boolean, Object]),
default: true
},
gap: {
type: runtime.definePropType(Object),
default: () => ({
offset: 6,
radius: 2
})
},
zIndex: {
type: Number
},
scrollIntoViewOptions: {
type: runtime.definePropType([Boolean, Object]),
default: () => ({
block: "center"
})
},
type: {
type: runtime.definePropType(String)
},
appendTo: {
type: teleport.teleportProps.to.type,
default: "body"
},
closeOnPressEscape: {
type: Boolean,
default: true
},
targetAreaClickable: {
type: Boolean,
default: true
}
});
const tourEmits = {
[event.UPDATE_MODEL_EVENT]: (value) => types.isBoolean(value),
["update:current"]: (current) => types.isNumber(current),
close: (current) => types.isNumber(current),
finish: () => true,
change: (current) => types.isNumber(current)
};
exports.tourEmits = tourEmits;
exports.tourProps = tourProps;
//# sourceMappingURL=tour2.js.map

File diff suppressed because one or more lines are too long

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,3 @@
'use strict';
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.js","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,7 @@
'use strict';
require('../../base/style/css.js');
require('../../button/style/css.js');
require('element-plus/theme-chalk/el-tour.css');
//# sourceMappingURL=css.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.js","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,7 @@
'use strict';
require('../../base/style/index.js');
require('../../button/style/index.js');
require('element-plus/theme-chalk/src/tour.scss');
//# sourceMappingURL=index.js.map

View File

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