feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+16
View File
@@ -0,0 +1,16 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { TourContentEmits, TourContentProps, TourContentPropsPublic, tourContentEmits, tourContentProps, tourPlacements, tourStrategies } from "./src/content.js";
import { TourBtnProps, TourGap, TourMask } from "./src/types.js";
import { TourEmits, TourInstance, TourProps, TourPropsPublic, tourEmits, tourProps } from "./src/tour.js";
import { _default } from "./src/tour.vue.js";
import { TourStepEmits, TourStepProps, TourStepPropsPublic, tourStepEmits, tourStepProps } from "./src/step.js";
import { _default as _default$1 } from "./src/step.vue.js";
//#region ../../packages/components/tour/index.d.ts
declare const ElTour: SFCWithInstall<typeof _default> & {
TourStep: typeof _default$1;
};
declare const ElTourStep: SFCWithInstall<typeof _default$1>;
//#endregion
export { ElTour, ElTour as default, ElTourStep, type TourBtnProps, TourContentEmits, TourContentProps, TourContentPropsPublic, TourEmits, type TourGap, TourInstance, type TourMask, TourProps, TourPropsPublic, TourStepEmits, TourStepProps, TourStepPropsPublic, tourContentEmits, tourContentProps, tourEmits, tourPlacements, tourProps, tourStepEmits, tourStepProps, tourStrategies };
+14
View File
@@ -0,0 +1,14 @@
import { withInstall, withNoopInstall } from "../../utils/vue/install.mjs";
import { tourContentEmits, tourContentProps, tourPlacements, tourStrategies } from "./src/content.mjs";
import { tourEmits, tourProps } from "./src/tour.mjs";
import tour_default from "./src/tour2.mjs";
import { tourStepEmits, tourStepProps } from "./src/step.mjs";
import step_default from "./src/step2.mjs";
//#region ../../packages/components/tour/index.ts
const ElTour = withInstall(tour_default, { TourStep: step_default });
const ElTourStep = withNoopInstall(step_default);
//#endregion
export { ElTour, ElTour as default, ElTourStep, tourContentEmits, tourContentProps, tourEmits, tourPlacements, tourProps, tourStepEmits, tourStepProps, tourStrategies };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["Tour","TourStep"],"sources":["../../../../../packages/components/tour/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Tour from './src/tour.vue'\nimport TourStep from './src/step.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElTour: SFCWithInstall<typeof Tour> & {\n TourStep: typeof TourStep\n} = withInstall(Tour, {\n TourStep,\n})\nexport const ElTourStep: SFCWithInstall<typeof TourStep> =\n withNoopInstall(TourStep)\nexport default ElTour\n\nexport * from './src/tour'\nexport * from './src/step'\nexport * from './src/content'\nexport type { TourMask, TourGap, TourBtnProps } from './src/types'\n"],"mappings":";;;;;;;;AAMA,MAAa,SAET,YAAYA,cAAM,EACpB,wBACD,CAAC;AACF,MAAa,aACX,gBAAgBC,aAAS"}
+55
View File
@@ -0,0 +1,55 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { ExtractPublicPropTypes } from "vue";
import { Placement, Strategy, VirtualElement } from "@floating-ui/dom";
//#region ../../packages/components/tour/src/content.d.ts
declare const tourStrategies: readonly ["absolute", "fixed"];
declare const tourPlacements: readonly ["top-start", "top-end", "top", "bottom-start", "bottom-end", "bottom", "left-start", "left-end", "left", "right-start", "right-end", "right"];
interface TourContentProps {
/**
* @description position of the guide card relative to the target element
*/
placement?: Placement;
/**
* @description the reference dom
*/
reference?: HTMLElement | VirtualElement | null;
/**
* @description position strategy of the content
*/
strategy?: Strategy;
/**
* @description offset of the arrow
*/
offset?: number;
/**
* @description whether to show the arrow
*/
showArrow?: boolean;
/**
* @description content's zIndex
*/
zIndex?: number;
}
/**
* @deprecated Removed after 3.0.0, Use `TourContentProps` instead.
*/
declare const tourContentProps: {
placement: EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
reference: EpPropFinalized<(new (...args: any[]) => HTMLElement | VirtualElement) | (() => HTMLElement | VirtualElement | null) | (((new (...args: any[]) => HTMLElement | VirtualElement) | (() => HTMLElement | VirtualElement | null)) | null)[], unknown, unknown, null, boolean>;
strategy: EpPropFinalized<(new (...args: any[]) => "fixed" | "absolute") | (() => Strategy) | (((new (...args: any[]) => "fixed" | "absolute") | (() => Strategy)) | null)[], "fixed" | "absolute", unknown, string, boolean>;
offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: BooleanConstructor;
zIndex: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `TourContentProps` instead.
*/
type TourContentPropsPublic = ExtractPublicPropTypes<typeof tourContentProps>;
declare const tourContentEmits: {
close: () => boolean;
};
type TourContentEmits = typeof tourContentEmits;
//#endregion
export { TourContentEmits, TourContentProps, TourContentPropsPublic, tourContentEmits, tourContentProps, tourPlacements, tourStrategies };
+51
View File
@@ -0,0 +1,51 @@
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
//#region ../../packages/components/tour/src/content.ts
const tourStrategies = ["absolute", "fixed"];
const tourPlacements = [
"top-start",
"top-end",
"top",
"bottom-start",
"bottom-end",
"bottom",
"left-start",
"left-end",
"left",
"right-start",
"right-end",
"right"
];
/**
* @deprecated Removed after 3.0.0, Use `TourContentProps` instead.
*/
const tourContentProps = buildProps({
placement: {
type: definePropType(String),
values: tourPlacements,
default: "bottom"
},
reference: {
type: definePropType(Object),
default: null
},
strategy: {
type: definePropType(String),
values: tourStrategies,
default: "absolute"
},
offset: {
type: Number,
default: 10
},
showArrow: Boolean,
zIndex: {
type: Number,
default: 2001
}
});
const tourContentEmits = { close: () => true };
//#endregion
export { tourContentEmits, tourContentProps, tourPlacements, tourStrategies };
//# sourceMappingURL=content.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"content.mjs","names":[],"sources":["../../../../../../packages/components/tour/src/content.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { Placement, Strategy, VirtualElement } from '@floating-ui/dom'\n\nexport const tourStrategies = ['absolute', 'fixed'] as const\n\nexport const tourPlacements = [\n 'top-start',\n 'top-end',\n 'top',\n 'bottom-start',\n 'bottom-end',\n 'bottom',\n 'left-start',\n 'left-end',\n 'left',\n 'right-start',\n 'right-end',\n 'right',\n] as const\n\nexport interface TourContentProps {\n /**\n * @description position of the guide card relative to the target element\n */\n placement?: Placement\n /**\n * @description the reference dom\n */\n reference?: HTMLElement | VirtualElement | null\n /**\n * @description position strategy of the content\n */\n strategy?: Strategy\n /**\n * @description offset of the arrow\n */\n offset?: number\n /**\n * @description whether to show the arrow\n */\n showArrow?: boolean\n /**\n * @description content's zIndex\n */\n zIndex?: number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TourContentProps` instead.\n */\nexport const tourContentProps = buildProps({\n /**\n * @description position of the guide card relative to the target element\n */\n placement: {\n type: definePropType<Placement>(String),\n values: tourPlacements,\n default: 'bottom',\n },\n /**\n * @description the reference dom\n */\n reference: {\n type: definePropType<HTMLElement | VirtualElement | null>(Object),\n default: null,\n },\n /**\n * @description position strategy of the content\n */\n strategy: {\n type: definePropType<Strategy>(String),\n values: tourStrategies,\n default: 'absolute',\n },\n /**\n * @description offset of the arrow\n */\n offset: {\n type: Number,\n default: 10,\n },\n /**\n * @description whether to show the arrow\n */\n showArrow: Boolean,\n /**\n * @description content's zIndex\n */\n zIndex: {\n type: Number,\n default: 2001,\n },\n})\n\n/**\n * @deprecated Removed after 3.0.0, Use `TourContentProps` instead.\n */\nexport type TourContentPropsPublic = ExtractPublicPropTypes<\n typeof tourContentProps\n>\n\nexport const tourContentEmits = {\n close: () => true,\n}\nexport type TourContentEmits = typeof tourContentEmits\n"],"mappings":";;;AAKA,MAAa,iBAAiB,CAAC,YAAY,QAAQ;AAEnD,MAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;AAgCD,MAAa,mBAAmB,WAAW;CAIzC,WAAW;EACT,MAAM,eAA0B,OAAO;EACvC,QAAQ;EACR,SAAS;EACV;CAID,WAAW;EACT,MAAM,eAAoD,OAAO;EACjE,SAAS;EACV;CAID,UAAU;EACR,MAAM,eAAyB,OAAO;EACtC,QAAQ;EACR,SAAS;EACV;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CAID,WAAW;CAIX,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CACF,CAAC;AASF,MAAa,mBAAmB,EAC9B,aAAa,MACd"}
@@ -0,0 +1,65 @@
import focus_trap_default from "../../focus-trap/index.mjs";
import { tourContentEmits, tourContentProps } from "./content.mjs";
import { tourKey, useFloating } from "./helper.mjs";
import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toRef, unref, watch, withCtx } from "vue";
//#region ../../packages/components/tour/src/content.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = ["data-side"];
var content_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElTourContent",
__name: "content",
props: tourContentProps,
emits: tourContentEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const placement = ref(props.placement);
const strategy = ref(props.strategy);
const contentRef = ref(null);
const arrowRef = ref(null);
watch(() => props.placement, () => {
placement.value = props.placement;
});
const { contentStyle, arrowStyle } = useFloating(toRef(props, "reference"), contentRef, arrowRef, placement, strategy, toRef(props, "offset"), toRef(props, "zIndex"), toRef(props, "showArrow"));
const side = computed(() => {
return placement.value.split("-")[0];
});
const { ns } = inject(tourKey);
const onCloseRequested = () => {
emit("close");
};
const onFocusoutPrevented = (event) => {
if (event.detail.focusReason === "pointer") event.preventDefault();
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "contentRef",
ref: contentRef,
style: normalizeStyle(unref(contentStyle)),
class: normalizeClass(unref(ns).e("content")),
"data-side": side.value,
tabindex: "-1"
}, [createVNode(unref(focus_trap_default), {
loop: "",
trapped: "",
"focus-start-el": "container",
"focus-trap-el": contentRef.value || void 0,
onReleaseRequested: onCloseRequested,
onFocusoutPrevented
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 8, ["focus-trap-el"]), __props.showArrow ? (openBlock(), createElementBlock("span", {
key: 0,
ref_key: "arrowRef",
ref: arrowRef,
style: normalizeStyle(unref(arrowStyle)),
class: normalizeClass(unref(ns).e("arrow"))
}, null, 6)) : createCommentVNode("v-if", true)], 14, _hoisted_1);
};
}
});
//#endregion
export { content_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=content.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"content.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/tour/src/content.vue"],"sourcesContent":["<template>\n <div\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"ns.e('content')\"\n :data-side=\"side\"\n tabindex=\"-1\"\n >\n <el-focus-trap\n loop\n trapped\n focus-start-el=\"container\"\n :focus-trap-el=\"contentRef || undefined\"\n @release-requested=\"onCloseRequested\"\n @focusout-prevented=\"onFocusoutPrevented\"\n >\n <slot />\n </el-focus-trap>\n <span\n v-if=\"showArrow\"\n ref=\"arrowRef\"\n :style=\"arrowStyle\"\n :class=\"ns.e('arrow')\"\n />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, watch } from 'vue'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport { tourContentEmits } from './content'\nimport { tourKey, useFloating } from './helper'\n\nimport type { TourContentProps } from './content'\n\ndefineOptions({\n name: 'ElTourContent',\n})\n\nconst props = withDefaults(defineProps<TourContentProps>(), {\n placement: 'bottom',\n reference: null,\n strategy: 'absolute',\n offset: 10,\n zIndex: 2001,\n})\nconst emit = defineEmits(tourContentEmits)\n\nconst placement = ref(props.placement)\nconst strategy = ref(props.strategy)\nconst contentRef = ref<HTMLElement | null>(null)\nconst arrowRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.placement,\n () => {\n placement.value = props.placement\n }\n)\n\nconst { contentStyle, arrowStyle } = useFloating(\n toRef(props, 'reference'),\n contentRef,\n arrowRef,\n placement,\n strategy,\n toRef(props, 'offset'),\n toRef(props, 'zIndex'),\n toRef(props, 'showArrow')\n)\n\nconst side = computed(() => {\n return placement.value.split('-')[0]\n})\n\nconst { ns } = inject(tourKey)!\n\nconst onCloseRequested = () => {\n emit('close')\n}\n\nconst onFocusoutPrevented = (event: CustomEvent) => {\n if (event.detail.focusReason === 'pointer') {\n event.preventDefault()\n }\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;EAuCA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAEb,MAAM,YAAY,IAAI,MAAM,UAAS;EACrC,MAAM,WAAW,IAAI,MAAM,SAAQ;EACnC,MAAM,aAAa,IAAwB,KAAI;EAC/C,MAAM,WAAW,IAAwB,KAAI;AAE7C,cACQ,MAAM,iBACN;AACJ,aAAU,QAAQ,MAAM;IAE5B;EAEA,MAAM,EAAE,cAAc,eAAe,YACnC,MAAM,OAAO,YAAY,EACzB,YACA,UACA,WACA,UACA,MAAM,OAAO,SAAS,EACtB,MAAM,OAAO,SAAS,EACtB,MAAM,OAAO,YAAW,CAC1B;EAEA,MAAM,OAAO,eAAe;AAC1B,UAAO,UAAU,MAAM,MAAM,IAAI,CAAC;IACnC;EAED,MAAM,EAAE,OAAO,OAAO,QAAQ;EAE9B,MAAM,yBAAyB;AAC7B,QAAK,QAAO;;EAGd,MAAM,uBAAuB,UAAuB;AAClD,OAAI,MAAM,OAAO,gBAAgB,UAC/B,OAAM,gBAAe;;;uBAlFvB,mBAuBM,OAAA;aAtBA;IAAJ,KAAI;IACH,OAAK,eAAE,MAAA,aAAY,CAAA;IACnB,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,UAAA,CAAA;IACX,aAAW,KAAA;IACZ,UAAS;OAET,YASgB,MAAA,mBAAA,EAAA;IARd,MAAA;IACA,SAAA;IACA,kBAAe;IACd,iBAAe,WAAA,SAAc;IAC7B,oBAAmB;IACC;;2BAEb,CAAR,WAAQ,KAAA,QAAA,UAAA;;6BAGF,QAAA,0BADR,mBAKE,QAAA;;aAHI;IAAJ,KAAI;IACH,OAAK,eAAE,MAAA,WAAU,CAAA;IACjB,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,QAAA,CAAA"}
@@ -0,0 +1,8 @@
import content_vue_vue_type_script_setup_true_lang_default from "./content.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/tour/src/content.vue
var content_default = content_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { content_default as default };
//# sourceMappingURL=content2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"content2.mjs","names":[],"sources":["../../../../../../packages/components/tour/src/content.vue"],"sourcesContent":["<template>\n <div\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"ns.e('content')\"\n :data-side=\"side\"\n tabindex=\"-1\"\n >\n <el-focus-trap\n loop\n trapped\n focus-start-el=\"container\"\n :focus-trap-el=\"contentRef || undefined\"\n @release-requested=\"onCloseRequested\"\n @focusout-prevented=\"onFocusoutPrevented\"\n >\n <slot />\n </el-focus-trap>\n <span\n v-if=\"showArrow\"\n ref=\"arrowRef\"\n :style=\"arrowStyle\"\n :class=\"ns.e('arrow')\"\n />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, watch } from 'vue'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport { tourContentEmits } from './content'\nimport { tourKey, useFloating } from './helper'\n\nimport type { TourContentProps } from './content'\n\ndefineOptions({\n name: 'ElTourContent',\n})\n\nconst props = withDefaults(defineProps<TourContentProps>(), {\n placement: 'bottom',\n reference: null,\n strategy: 'absolute',\n offset: 10,\n zIndex: 2001,\n})\nconst emit = defineEmits(tourContentEmits)\n\nconst placement = ref(props.placement)\nconst strategy = ref(props.strategy)\nconst contentRef = ref<HTMLElement | null>(null)\nconst arrowRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.placement,\n () => {\n placement.value = props.placement\n }\n)\n\nconst { contentStyle, arrowStyle } = useFloating(\n toRef(props, 'reference'),\n contentRef,\n arrowRef,\n placement,\n strategy,\n toRef(props, 'offset'),\n toRef(props, 'zIndex'),\n toRef(props, 'showArrow')\n)\n\nconst side = computed(() => {\n return placement.value.split('-')[0]\n})\n\nconst { ns } = inject(tourKey)!\n\nconst onCloseRequested = () => {\n emit('close')\n}\n\nconst onFocusoutPrevented = (event: CustomEvent) => {\n if (event.detail.focusReason === 'pointer') {\n event.preventDefault()\n }\n}\n</script>\n"],"mappings":""}
+173
View File
@@ -0,0 +1,173 @@
import { isClient } from "../../../utils/browser.mjs";
import { isArray, isFunction, isString } from "../../../utils/types.mjs";
import { keysOf } from "../../../utils/objects.mjs";
import { computed, onBeforeUnmount, onMounted, ref, unref, watch, watchEffect } from "vue";
import { arrow, autoUpdate, computePosition, detectOverflow, flip, offset, shift } from "@floating-ui/dom";
//#region ../../packages/components/tour/src/helper.ts
const useTarget = (target, open, gap, mergedMask, scrollIntoViewOptions) => {
const posInfo = ref(null);
const getTargetEl = () => {
let targetEl;
if (isString(target.value)) targetEl = document.querySelector(target.value);
else if (isFunction(target.value)) targetEl = target.value();
else targetEl = target.value;
return targetEl;
};
const updatePosInfo = () => {
const targetEl = getTargetEl();
if (!targetEl || !open.value) {
posInfo.value = null;
return;
}
if (!isInViewPort(targetEl)) targetEl.scrollIntoView(scrollIntoViewOptions.value);
const { left, top, width, height } = targetEl.getBoundingClientRect();
posInfo.value = {
left,
top,
width,
height,
radius: 0
};
};
onMounted(() => {
watch([open, target], () => {
updatePosInfo();
}, { immediate: true });
window.addEventListener("resize", updatePosInfo);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", updatePosInfo);
});
const getGapOffset = (index) => (isArray(gap.value.offset) ? gap.value.offset[index] : gap.value.offset) ?? 6;
const mergedPosInfo = computed(() => {
if (!posInfo.value) return posInfo.value;
const gapOffsetX = getGapOffset(0);
const gapOffsetY = getGapOffset(1);
const gapRadius = gap.value?.radius || 2;
return {
left: posInfo.value.left - gapOffsetX,
top: posInfo.value.top - gapOffsetY,
width: posInfo.value.width + gapOffsetX * 2,
height: posInfo.value.height + gapOffsetY * 2,
radius: gapRadius
};
});
return {
mergedPosInfo,
triggerTarget: computed(() => {
const targetEl = getTargetEl();
if (!mergedMask.value || !targetEl || !window.DOMRect) return targetEl || void 0;
return { getBoundingClientRect() {
return window.DOMRect.fromRect({
width: mergedPosInfo.value?.width || 0,
height: mergedPosInfo.value?.height || 0,
x: mergedPosInfo.value?.left || 0,
y: mergedPosInfo.value?.top || 0
});
} };
})
};
};
const tourKey = Symbol("ElTour");
function isInViewPort(element) {
const viewWidth = window.innerWidth || document.documentElement.clientWidth;
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
const { top, right, bottom, left } = element.getBoundingClientRect();
return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
}
const useFloating = (referenceRef, contentRef, arrowRef, placement, strategy, offset$1, zIndex, showArrow) => {
const x = ref();
const y = ref();
const middlewareData = ref({});
const states = {
x,
y,
placement,
strategy,
middlewareData
};
const middleware = computed(() => {
const _middleware = [
offset(unref(offset$1)),
flip(),
shift(),
overflowMiddleware()
];
if (unref(showArrow) && unref(arrowRef)) _middleware.push(arrow({ element: unref(arrowRef) }));
return _middleware;
});
const update = async () => {
if (!isClient) return;
const referenceEl = unref(referenceRef);
const contentEl = unref(contentRef);
if (!referenceEl || !contentEl) return;
const data = await computePosition(referenceEl, contentEl, {
placement: unref(placement),
strategy: unref(strategy),
middleware: unref(middleware)
});
keysOf(states).forEach((key) => {
states[key].value = data[key];
});
};
const contentStyle = computed(() => {
if (!unref(referenceRef)) return {
position: "fixed",
top: "50%",
left: "50%",
transform: "translate3d(-50%, -50%, 0)",
maxWidth: "100vw",
zIndex: unref(zIndex)
};
const { overflow } = unref(middlewareData);
return {
position: unref(strategy),
zIndex: unref(zIndex),
top: unref(y) != null ? `${unref(y)}px` : "",
left: unref(x) != null ? `${unref(x)}px` : "",
maxWidth: overflow?.maxWidth ? `${overflow?.maxWidth}px` : ""
};
});
const arrowStyle = computed(() => {
if (!unref(showArrow)) return {};
const { arrow } = unref(middlewareData);
return {
left: arrow?.x != null ? `${arrow?.x}px` : "",
top: arrow?.y != null ? `${arrow?.y}px` : ""
};
});
let cleanup;
onMounted(() => {
const referenceEl = unref(referenceRef);
const contentEl = unref(contentRef);
if (referenceEl && contentEl) cleanup = autoUpdate(referenceEl, contentEl, update);
watchEffect(() => {
update();
});
});
onBeforeUnmount(() => {
cleanup && cleanup();
});
return {
update,
contentStyle,
arrowStyle
};
};
const overflowMiddleware = () => {
return {
name: "overflow",
async fn(state) {
const overflow = await detectOverflow(state);
let overWidth = 0;
if (overflow.left > 0) overWidth = overflow.left;
if (overflow.right > 0) overWidth = overflow.right;
return { data: { maxWidth: state.rects.floating.width - overWidth } };
}
};
};
//#endregion
export { tourKey, useFloating, useTarget };
//# sourceMappingURL=helper.mjs.map
File diff suppressed because one or more lines are too long
+26
View File
@@ -0,0 +1,26 @@
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
//#region ../../packages/components/tour/src/mask.ts
/**
* @deprecated Removed after 3.0.0, Use `MaskProps` instead.
*/
const maskProps = buildProps({
zIndex: {
type: Number,
default: 1001
},
visible: Boolean,
fill: {
type: String,
default: "rgba(0,0,0,0.5)"
},
pos: { type: definePropType(Object) },
targetAreaClickable: {
type: Boolean,
default: true
}
});
//#endregion
export { maskProps };
//# sourceMappingURL=mask.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"mask.mjs","names":[],"sources":["../../../../../../packages/components/tour/src/mask.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { PosInfo } from './types'\n\nexport interface MaskProps {\n /**\n * @description mask's zIndex\n */\n zIndex?: number\n /**\n * @description whether to show the mask\n */\n visible?: boolean\n /**\n * @description mask's fill\n */\n fill?: string\n /***\n * @description mask's transparent space position\n */\n pos?: PosInfo | null\n /**\n * @description whether the target element can be clickable, when using mask\n */\n targetAreaClickable?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `MaskProps` instead.\n */\nexport const maskProps = buildProps({\n /**\n * @description mask's zIndex\n */\n zIndex: {\n type: Number,\n default: 1001,\n },\n /**\n * @description whether to show the mask\n */\n visible: Boolean,\n /**\n * @description mask's fill\n */\n fill: {\n type: String,\n default: 'rgba(0,0,0,0.5)',\n },\n /***\n * @description mask's transparent space position\n */\n pos: {\n type: definePropType<PosInfo | null>(Object),\n },\n /**\n * @description whether the target element can be clickable, when using mask\n */\n targetAreaClickable: {\n type: Boolean,\n default: true,\n },\n})\n\n/**\n * @deprecated Removed after 3.0.0, Use `MaskProps` instead.\n */\nexport type MaskPropsPublic = ExtractPublicPropTypes<typeof maskProps>\n"],"mappings":";;;;;;AA+BA,MAAa,YAAY,WAAW;CAIlC,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CAID,SAAS;CAIT,MAAM;EACJ,MAAM;EACN,SAAS;EACV;CAID,KAAK,EACH,MAAM,eAA+B,OAAO,EAC7C;CAID,qBAAqB;EACnB,MAAM;EACN,SAAS;EACV;CACF,CAAC"}
@@ -0,0 +1,72 @@
import { useLockscreen } from "../../../hooks/use-lockscreen/index.mjs";
import { maskProps } from "./mask.mjs";
import { tourKey } from "./helper.mjs";
import { useWindowSize } from "@vueuse/core";
import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, toRef, unref } from "vue";
//#region ../../packages/components/tour/src/mask.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = { style: {
width: "100%",
height: "100%"
} };
const _hoisted_2 = ["d"];
var mask_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElTourMask",
inheritAttrs: false,
__name: "mask",
props: maskProps,
setup(__props) {
const props = __props;
const { ns } = inject(tourKey);
const radius = computed(() => props.pos?.radius ?? 2);
const roundInfo = computed(() => {
const v = radius.value;
const baseInfo = `a${v},${v} 0 0 1`;
return {
topRight: `${baseInfo} ${v},${v}`,
bottomRight: `${baseInfo} ${-v},${v}`,
bottomLeft: `${baseInfo} ${-v},${-v}`,
topLeft: `${baseInfo} ${v},${-v}`
};
});
const { width: windowWidth, height: windowHeight } = useWindowSize();
const path = computed(() => {
const width = windowWidth.value;
const height = windowHeight.value;
const info = roundInfo.value;
const _path = `M${width},0 L0,0 L0,${height} L${width},${height} L${width},0 Z`;
const _radius = radius.value;
return props.pos ? `${_path} M${props.pos.left + _radius},${props.pos.top} h${props.pos.width - _radius * 2} ${info.topRight} v${props.pos.height - _radius * 2} ${info.bottomRight} h${-props.pos.width + _radius * 2} ${info.bottomLeft} v${-props.pos.height + _radius * 2} ${info.topLeft} z` : _path;
});
const maskStyle = computed(() => ({
position: "fixed",
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: props.zIndex,
pointerEvents: props.pos && props.targetAreaClickable ? "none" : "auto"
}));
const pathStyle = computed(() => ({
fill: props.fill,
pointerEvents: "auto",
cursor: "auto"
}));
useLockscreen(toRef(props, "visible"), { ns });
return (_ctx, _cache) => {
return __props.visible ? (openBlock(), createElementBlock("div", mergeProps({
key: 0,
class: unref(ns).e("mask"),
style: maskStyle.value
}, _ctx.$attrs), [(openBlock(), createElementBlock("svg", _hoisted_1, [createElementVNode("path", {
class: normalizeClass(unref(ns).e("hollow")),
style: normalizeStyle(pathStyle.value),
d: path.value
}, null, 14, _hoisted_2)]))], 16)) : createCommentVNode("v-if", true);
};
}
});
//#endregion
export { mask_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=mask.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"mask.vue_vue_type_script_setup_true_lang.mjs","names":["$attrs"],"sources":["../../../../../../packages/components/tour/src/mask.vue"],"sourcesContent":["<template>\n <div v-if=\"visible\" :class=\"ns.e('mask')\" :style=\"maskStyle\" v-bind=\"$attrs\">\n <svg\n :style=\"{\n width: '100%',\n height: '100%',\n }\"\n >\n <path :class=\"ns.e('hollow')\" :style=\"pathStyle\" :d=\"path\" />\n </svg>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, toRef } from 'vue'\nimport { useLockscreen } from '@element-plus/hooks'\nimport { useWindowSize } from '@vueuse/core'\nimport { tourKey } from './helper'\n\nimport type { CSSProperties } from 'vue'\nimport type { MaskProps } from './mask'\n\ndefineOptions({\n name: 'ElTourMask',\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MaskProps>(), {\n zIndex: 1001,\n fill: 'rgba(0,0,0,0.5)',\n targetAreaClickable: true,\n})\n\nconst { ns } = inject(tourKey)!\nconst radius = computed(() => props.pos?.radius ?? 2)\nconst roundInfo = computed(() => {\n const v = radius.value\n const baseInfo = `a${v},${v} 0 0 1`\n return {\n topRight: `${baseInfo} ${v},${v}`,\n bottomRight: `${baseInfo} ${-v},${v}`,\n bottomLeft: `${baseInfo} ${-v},${-v}`,\n topLeft: `${baseInfo} ${v},${-v}`,\n }\n})\n\nconst { width: windowWidth, height: windowHeight } = useWindowSize()\n\nconst path = computed(() => {\n const width = windowWidth.value\n const height = windowHeight.value\n const info = roundInfo.value\n const _path = `M${width},0 L0,0 L0,${height} L${width},${height} L${width},0 Z`\n const _radius = radius.value\n return props.pos\n ? `${_path} M${props.pos.left + _radius},${props.pos.top} h${\n props.pos.width - _radius * 2\n } ${info.topRight} v${props.pos.height - _radius * 2} ${\n info.bottomRight\n } h${-props.pos.width + _radius * 2} ${info.bottomLeft} v${\n -props.pos.height + _radius * 2\n } ${info.topLeft} z`\n : _path\n})\n\nconst maskStyle = computed<CSSProperties>(() => ({\n position: 'fixed',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n zIndex: props.zIndex,\n pointerEvents: props.pos && props.targetAreaClickable ? 'none' : 'auto',\n}))\n\nconst pathStyle = computed<CSSProperties>(() => ({\n fill: props.fill,\n pointerEvents: 'auto',\n cursor: 'auto',\n}))\n\nuseLockscreen(toRef(props, 'visible'), {\n ns,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EAMd,MAAM,EAAE,OAAO,OAAO,QAAQ;EAC9B,MAAM,SAAS,eAAe,MAAM,KAAK,UAAU,EAAC;EACpD,MAAM,YAAY,eAAe;GAC/B,MAAM,IAAI,OAAO;GACjB,MAAM,WAAW,IAAI,EAAE,GAAG,EAAE;AAC5B,UAAO;IACL,UAAU,GAAG,SAAS,GAAG,EAAE,GAAG;IAC9B,aAAa,GAAG,SAAS,GAAG,CAAC,EAAE,GAAG;IAClC,YAAY,GAAG,SAAS,GAAG,CAAC,EAAE,GAAG,CAAC;IAClC,SAAS,GAAG,SAAS,GAAG,EAAE,GAAG,CAAC;IAChC;IACD;EAED,MAAM,EAAE,OAAO,aAAa,QAAQ,iBAAiB,eAAc;EAEnE,MAAM,OAAO,eAAe;GAC1B,MAAM,QAAQ,YAAY;GAC1B,MAAM,SAAS,aAAa;GAC5B,MAAM,OAAO,UAAU;GACvB,MAAM,QAAQ,IAAI,MAAM,aAAa,OAAO,IAAI,MAAM,GAAG,OAAO,IAAI,MAAM;GAC1E,MAAM,UAAU,OAAO;AACvB,UAAO,MAAM,MACT,GAAG,MAAM,IAAI,MAAM,IAAI,OAAO,QAAQ,GAAG,MAAM,IAAI,IAAI,IACrD,MAAM,IAAI,QAAQ,UAAU,EAC7B,GAAG,KAAK,SAAS,IAAI,MAAM,IAAI,SAAS,UAAU,EAAE,GACnD,KAAK,YACN,IAAI,CAAC,MAAM,IAAI,QAAQ,UAAU,EAAE,GAAG,KAAK,WAAW,IACrD,CAAC,MAAM,IAAI,SAAS,UAAU,EAC/B,GAAG,KAAK,QAAQ,MACjB;IACL;EAED,MAAM,YAAY,gBAA+B;GAC/C,UAAU;GACV,MAAM;GACN,OAAO;GACP,KAAK;GACL,QAAQ;GACR,QAAQ,MAAM;GACd,eAAe,MAAM,OAAO,MAAM,sBAAsB,SAAS;GAClE,EAAC;EAEF,MAAM,YAAY,gBAA+B;GAC/C,MAAM,MAAM;GACZ,eAAe;GACf,QAAQ;GACT,EAAC;AAEF,gBAAc,MAAM,OAAO,UAAU,EAAE,EACrC,IACD,CAAA;;UAlFY,QAAA,wBAAX,mBASM,OATN,WASM;;IATe,OAAO,MAAA,GAAE,CAAC,EAAC,OAAA;IAAW,OAAO,UAAA;MAAmBA,KAAAA,OAAM,EAAA,eACzE,mBAOM,OAPN,YAOM,CADJ,mBAA6D,QAAA;IAAtD,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,SAAA,CAAA;IAAa,OAAK,eAAE,UAAA,MAAS;IAAG,GAAG,KAAA"}
+8
View File
@@ -0,0 +1,8 @@
import mask_vue_vue_type_script_setup_true_lang_default from "./mask.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/tour/src/mask.vue
var mask_default = mask_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { mask_default as default };
//# sourceMappingURL=mask2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"mask2.mjs","names":[],"sources":["../../../../../../packages/components/tour/src/mask.vue"],"sourcesContent":["<template>\n <div v-if=\"visible\" :class=\"ns.e('mask')\" :style=\"maskStyle\" v-bind=\"$attrs\">\n <svg\n :style=\"{\n width: '100%',\n height: '100%',\n }\"\n >\n <path :class=\"ns.e('hollow')\" :style=\"pathStyle\" :d=\"path\" />\n </svg>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, toRef } from 'vue'\nimport { useLockscreen } from '@element-plus/hooks'\nimport { useWindowSize } from '@vueuse/core'\nimport { tourKey } from './helper'\n\nimport type { CSSProperties } from 'vue'\nimport type { MaskProps } from './mask'\n\ndefineOptions({\n name: 'ElTourMask',\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MaskProps>(), {\n zIndex: 1001,\n fill: 'rgba(0,0,0,0.5)',\n targetAreaClickable: true,\n})\n\nconst { ns } = inject(tourKey)!\nconst radius = computed(() => props.pos?.radius ?? 2)\nconst roundInfo = computed(() => {\n const v = radius.value\n const baseInfo = `a${v},${v} 0 0 1`\n return {\n topRight: `${baseInfo} ${v},${v}`,\n bottomRight: `${baseInfo} ${-v},${v}`,\n bottomLeft: `${baseInfo} ${-v},${-v}`,\n topLeft: `${baseInfo} ${v},${-v}`,\n }\n})\n\nconst { width: windowWidth, height: windowHeight } = useWindowSize()\n\nconst path = computed(() => {\n const width = windowWidth.value\n const height = windowHeight.value\n const info = roundInfo.value\n const _path = `M${width},0 L0,0 L0,${height} L${width},${height} L${width},0 Z`\n const _radius = radius.value\n return props.pos\n ? `${_path} M${props.pos.left + _radius},${props.pos.top} h${\n props.pos.width - _radius * 2\n } ${info.topRight} v${props.pos.height - _radius * 2} ${\n info.bottomRight\n } h${-props.pos.width + _radius * 2} ${info.bottomLeft} v${\n -props.pos.height + _radius * 2\n } ${info.topLeft} z`\n : _path\n})\n\nconst maskStyle = computed<CSSProperties>(() => ({\n position: 'fixed',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n zIndex: props.zIndex,\n pointerEvents: props.pos && props.targetAreaClickable ? 'none' : 'auto',\n}))\n\nconst pathStyle = computed<CSSProperties>(() => ({\n fill: props.fill,\n pointerEvents: 'auto',\n cursor: 'auto',\n}))\n\nuseLockscreen(toRef(props, 'visible'), {\n ns,\n})\n</script>\n"],"mappings":""}
+128
View File
@@ -0,0 +1,128 @@
import { IconPropType } from "../../../utils/vue/icon.js";
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { TourContentProps } from "./content.js";
import { TourBtnProps, TourMask } from "./types.js";
import * as vue from "vue";
import { CSSProperties, ExtractPublicPropTypes } from "vue";
import * as _floating_ui_dom0 from "@floating-ui/dom";
//#region ../../packages/components/tour/src/step.d.ts
interface TourStepProps {
/**
* @description get the element the guide card points to. empty makes it show in center of screen
*/
target?: string | HTMLElement | (() => HTMLElement | null) | null;
/**
* @description the title of the tour content
*/
title?: string;
/**
* @description description
*/
description?: string;
/**
* @description whether to show a close button
*/
showClose?: boolean;
/**
* @description custom close icon, default is Close
*/
closeIcon?: IconPropType;
/**
* @description whether to show the arrow
*/
showArrow?: boolean;
/**
* @description position of the guide card relative to the target element
*/
placement?: TourContentProps['placement'];
/**
* @description whether to enable masking, change mask style and fill color by pass custom props
*/
mask?: TourMask;
/**
* @description custom style for content
*/
contentStyle?: CSSProperties;
/**
* @description properties of the previous button
*/
prevButtonProps?: TourBtnProps;
/**
* @description properties of the Next button
*/
nextButtonProps?: TourBtnProps;
/**
* @description support pass custom scrollIntoView options
*/
scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
/**
* @description type, affects the background color and text color
*/
type?: 'default' | 'primary';
}
/**
* @deprecated Removed after 3.0.0, Use `TourStepProps` instead.
*/
declare const tourStepProps: {
target: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null) | (((new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
title: StringConstructor;
description: StringConstructor;
showClose: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
closeIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
placement: EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _floating_ui_dom0.Placement) | (((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _floating_ui_dom0.Placement)) | null)[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
mask: EpPropFinalized<(new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask) | (((new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask)) | null)[], unknown, unknown, undefined, boolean>;
contentStyle: {
readonly type: vue.PropType<CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
prevButtonProps: {
readonly type: vue.PropType<TourBtnProps>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
nextButtonProps: {
readonly type: vue.PropType<TourBtnProps>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | (((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions)) | null)[], unknown, unknown, undefined, boolean>;
type: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | (((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary")) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
/**
* @deprecated Removed after 3.0.0, Use `TourStepProps` instead.
*/
type TourStepPropsPublic = ExtractPublicPropTypes<typeof tourStepProps>;
declare const tourStepEmits: {
close: () => boolean;
};
type TourStepEmits = typeof tourStepEmits;
//#endregion
export { TourStepEmits, TourStepProps, TourStepPropsPublic, tourStepEmits, tourStepProps };
+44
View File
@@ -0,0 +1,44 @@
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
import { iconPropType } from "../../../utils/vue/icon.mjs";
import { tourContentProps } from "./content.mjs";
//#region ../../packages/components/tour/src/step.ts
/**
* @deprecated Removed after 3.0.0, Use `TourStepProps` instead.
*/
const tourStepProps = buildProps({
target: { type: definePropType([
String,
Object,
Function
]) },
title: String,
description: String,
showClose: {
type: Boolean,
default: void 0
},
closeIcon: { type: iconPropType },
showArrow: {
type: Boolean,
default: void 0
},
placement: tourContentProps.placement,
mask: {
type: definePropType([Boolean, Object]),
default: void 0
},
contentStyle: { type: definePropType([Object]) },
prevButtonProps: { type: definePropType(Object) },
nextButtonProps: { type: definePropType(Object) },
scrollIntoViewOptions: {
type: definePropType([Boolean, Object]),
default: void 0
},
type: { type: definePropType(String) }
});
const tourStepEmits = { close: () => true };
//#endregion
export { tourStepEmits, tourStepProps };
//# sourceMappingURL=step.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"step.mjs","names":[],"sources":["../../../../../../packages/components/tour/src/step.ts"],"sourcesContent":["import { buildProps, definePropType, iconPropType } from '@element-plus/utils'\nimport { tourContentProps } from './content'\n\nimport type { CSSProperties, ExtractPublicPropTypes } from 'vue'\nimport type { IconPropType } from '@element-plus/utils'\nimport type { TourBtnProps, TourMask } from './types'\nimport type { TourContentProps } from './content'\n\nexport interface TourStepProps {\n /**\n * @description get the element the guide card points to. empty makes it show in center of screen\n */\n target?: string | HTMLElement | (() => HTMLElement | null) | null\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?: boolean\n /**\n * @description custom close icon, default is Close\n */\n closeIcon?: IconPropType\n /**\n * @description whether to show the arrow\n */\n showArrow?: boolean\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?: TourMask\n /**\n * @description custom style for content\n */\n contentStyle?: CSSProperties\n /**\n * @description properties of the previous button\n */\n prevButtonProps?: TourBtnProps\n /**\n * @description properties of the Next button\n */\n nextButtonProps?: TourBtnProps\n /**\n * @description support pass custom scrollIntoView options\n */\n scrollIntoViewOptions?: boolean | ScrollIntoViewOptions\n /**\n * @description type, affects the background color and text color\n */\n type?: 'default' | 'primary'\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TourStepProps` instead.\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\n/**\n * @deprecated Removed after 3.0.0, Use `TourStepProps` instead.\n */\nexport type TourStepPropsPublic = ExtractPublicPropTypes<typeof tourStepProps>\n\nexport const tourStepEmits = {\n close: () => true,\n}\nexport type TourStepEmits = typeof tourStepEmits\n"],"mappings":";;;;;;;;AAkEA,MAAa,gBAAgB,WAAW;CAItC,QAAQ,EACN,MAAM,eAEJ;EAAC;EAAQ;EAAQ;EAAS,CAAC,EAC9B;CAID,OAAO;CAIP,aAAa;CAIb,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,WAAW,EACT,MAAM,cACP;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,WAAW,iBAAiB;CAI5B,MAAM;EACJ,MAAM,eAAyB,CAAC,SAAS,OAAO,CAAC;EACjD,SAAS;EACV;CAID,cAAc,EACZ,MAAM,eAA8B,CAAC,OAAO,CAAC,EAC9C;CAID,iBAAiB,EACf,MAAM,eAA6B,OAAO,EAC3C;CAID,iBAAiB,EACf,MAAM,eAA6B,OAAO,EAC3C;CAID,uBAAuB;EACrB,MAAM,eAAgD,CAAC,SAAS,OAAO,CAAC;EACxE,SAAS;EACV;CAID,MAAM,EACJ,MAAM,eAAsC,OAAO,EACpD;CACF,CAAC;AAOF,MAAa,gBAAgB,EAC3B,aAAa,MACd"}
@@ -0,0 +1,32 @@
import { TourMask } from "./types.js";
import { TourStepProps } from "./step.js";
import * as vue from "vue";
import * as _floating_ui_dom0 from "@floating-ui/dom";
//#region ../../packages/components/tour/src/step.vue.d.ts
declare var __VLS_12: {}, __VLS_14: {};
type __VLS_Slots = {} & {
header?: (props: typeof __VLS_12) => any;
} & {
default?: (props: typeof __VLS_14) => any;
};
declare const __VLS_base: vue.DefineComponent<TourStepProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
close: () => void;
}, string, vue.PublicProps, Readonly<TourStepProps> & Readonly<{
onClose?: (() => any) | undefined;
}>, {
placement: _floating_ui_dom0.Placement;
showArrow: boolean;
mask: TourMask;
showClose: boolean;
scrollIntoViewOptions: boolean | ScrollIntoViewOptions;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,121 @@
import { EVENT_CODE } from "../../../constants/aria.mjs";
import { getEventCode } from "../../../utils/dom/event.mjs";
import { CloseComponents } from "../../../utils/vue/icon.mjs";
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { ElIcon } from "../../icon/index.mjs";
import { ElButton } from "../../button/index.mjs";
import { tourKey } from "./helper.mjs";
import { tourStepEmits, tourStepProps } from "./step.mjs";
import { omit } from "lodash-unified";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, onBeforeUnmount, onMounted, openBlock, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx } from "vue";
//#region ../../packages/components/tour/src/step.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = ["aria-label"];
var step_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElTourStep",
__name: "step",
props: tourStepProps,
emits: tourStepEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const { Close } = CloseComponents;
const { t } = useLocale();
const { currentStep, current, total, showClose, closeIcon, mergedType, ns, slots: tourSlots, updateModelValue, onClose: tourOnClose, onFinish: tourOnFinish, onChange } = inject(tourKey);
watch(props, (val) => {
currentStep.value = val;
}, { immediate: true });
const mergedShowClose = computed(() => props.showClose ?? showClose.value);
const mergedCloseIcon = computed(() => props.closeIcon ?? closeIcon.value ?? Close);
const filterButtonProps = (btnProps) => {
if (!btnProps) return;
return omit(btnProps, ["children", "onClick"]);
};
const onPrev = () => {
current.value -= 1;
if (props.prevButtonProps?.onClick) props.prevButtonProps?.onClick();
onChange();
};
const onNext = () => {
if (current.value >= total.value - 1) onFinish();
else current.value += 1;
if (props.nextButtonProps?.onClick) props.nextButtonProps.onClick();
onChange();
};
const onFinish = () => {
onClose();
tourOnFinish();
};
const onClose = () => {
updateModelValue(false);
tourOnClose();
emit("close");
};
const handleKeydown = (e) => {
if (e.target?.isContentEditable) return;
switch (getEventCode(e)) {
case EVENT_CODE.left:
e.preventDefault();
current.value > 0 && onPrev();
break;
case EVENT_CODE.right:
e.preventDefault();
onNext();
break;
}
};
onMounted(() => {
window.addEventListener("keydown", handleKeydown);
});
onBeforeUnmount(() => {
window.removeEventListener("keydown", handleKeydown);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
mergedShowClose.value ? (openBlock(), createElementBlock("button", {
key: 0,
"aria-label": unref(t)("el.tour.close"),
class: normalizeClass(unref(ns).e("closebtn")),
type: "button",
onClick: onClose
}, [createVNode(unref(ElIcon), { class: normalizeClass(unref(ns).e("close")) }, {
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(mergedCloseIcon.value)))]),
_: 1
}, 8, ["class"])], 10, _hoisted_1)) : createCommentVNode("v-if", true),
createElementVNode("header", { class: normalizeClass([unref(ns).e("header"), { "show-close": unref(showClose) }]) }, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("span", {
role: "heading",
class: normalizeClass(unref(ns).e("title"))
}, toDisplayString(__props.title), 3)])], 2),
createElementVNode("div", { class: normalizeClass(unref(ns).e("body")) }, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("span", null, toDisplayString(__props.description), 1)])], 2),
createElementVNode("footer", { class: normalizeClass(unref(ns).e("footer")) }, [createElementVNode("div", { class: normalizeClass(unref(ns).b("indicators")) }, [unref(tourSlots).indicators ? (openBlock(), createBlock(resolveDynamicComponent(unref(tourSlots).indicators), {
key: 0,
current: unref(current),
total: unref(total)
}, null, 8, ["current", "total"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(total), (item, index) => {
return openBlock(), createElementBlock("span", {
key: item,
class: normalizeClass([unref(ns).b("indicator"), unref(ns).is("active", index === unref(current))])
}, null, 2);
}), 128))], 2), createElementVNode("div", { class: normalizeClass(unref(ns).b("buttons")) }, [unref(current) > 0 ? (openBlock(), createBlock(unref(ElButton), mergeProps({
key: 0,
size: "small",
type: unref(mergedType)
}, filterButtonProps(__props.prevButtonProps), { onClick: onPrev }), {
default: withCtx(() => [createTextVNode(toDisplayString(__props.prevButtonProps?.children ?? unref(t)("el.tour.previous")), 1)]),
_: 1
}, 16, ["type"])) : createCommentVNode("v-if", true), unref(current) <= unref(total) - 1 ? (openBlock(), createBlock(unref(ElButton), mergeProps({
key: 1,
size: "small",
type: unref(mergedType) === "primary" ? "default" : "primary"
}, filterButtonProps(__props.nextButtonProps), { onClick: onNext }), {
default: withCtx(() => [createTextVNode(toDisplayString(__props.nextButtonProps?.children ?? (unref(current) === unref(total) - 1 ? unref(t)("el.tour.finish") : unref(t)("el.tour.next"))), 1)]),
_: 1
}, 16, ["type"])) : createCommentVNode("v-if", true)], 2)], 2)
], 64);
};
}
});
//#endregion
export { step_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=step.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
+8
View File
@@ -0,0 +1,8 @@
import step_vue_vue_type_script_setup_true_lang_default from "./step.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/tour/src/step.vue
var step_default = step_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { step_default as default };
//# sourceMappingURL=step2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"step2.mjs","names":[],"sources":["../../../../../../packages/components/tour/src/step.vue"],"sourcesContent":["<template>\n <button\n v-if=\"mergedShowClose\"\n :aria-label=\"t('el.tour.close')\"\n :class=\"ns.e('closebtn')\"\n type=\"button\"\n @click=\"onClose\"\n >\n <el-icon :class=\"ns.e('close')\">\n <component :is=\"mergedCloseIcon\" />\n </el-icon>\n </button>\n <header :class=\"[ns.e('header'), { 'show-close': showClose }]\">\n <slot name=\"header\">\n <span role=\"heading\" :class=\"ns.e('title')\">\n {{ title }}\n </span>\n </slot>\n </header>\n <div :class=\"ns.e('body')\">\n <slot>\n <span>{{ description }}</span>\n </slot>\n </div>\n <footer :class=\"ns.e('footer')\">\n <div :class=\"ns.b('indicators')\">\n <component\n :is=\"tourSlots.indicators\"\n v-if=\"tourSlots.indicators\"\n :current=\"current\"\n :total=\"total\"\n />\n <template v-else>\n <span\n v-for=\"(item, index) in total\"\n :key=\"item\"\n :class=\"[ns.b('indicator'), ns.is('active', index === current)]\"\n />\n </template>\n </div>\n <div :class=\"ns.b('buttons')\">\n <el-button\n v-if=\"current > 0\"\n size=\"small\"\n :type=\"mergedType\"\n v-bind=\"filterButtonProps(prevButtonProps)\"\n @click=\"onPrev\"\n >\n {{ prevButtonProps?.children ?? t('el.tour.previous') }}\n </el-button>\n <el-button\n v-if=\"current <= total - 1\"\n size=\"small\"\n :type=\"mergedType === 'primary' ? 'default' : 'primary'\"\n v-bind=\"filterButtonProps(nextButtonProps)\"\n @click=\"onNext\"\n >\n {{\n nextButtonProps?.children ??\n (current === total - 1 ? t('el.tour.finish') : t('el.tour.next'))\n }}\n </el-button>\n </div>\n </footer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, onMounted, watch } from 'vue'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { omit } from 'lodash-unified'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CloseComponents, getEventCode } from '@element-plus/utils'\nimport { useLocale } from '@element-plus/hooks'\nimport { tourStepEmits } from './step'\nimport { tourKey } from './helper'\n\nimport type { TourBtnProps } from './types'\nimport type { TourStepProps } from './step'\n\ndefineOptions({\n name: 'ElTourStep',\n})\n\nconst props = withDefaults(defineProps<TourStepProps>(), {\n showClose: undefined,\n showArrow: undefined,\n placement: 'bottom',\n mask: undefined,\n scrollIntoViewOptions: undefined,\n})\nconst emit = defineEmits(tourStepEmits)\n\nconst { Close } = CloseComponents\n\nconst { t } = useLocale()\n\nconst {\n currentStep,\n current,\n total,\n showClose,\n closeIcon,\n mergedType,\n ns,\n slots: tourSlots,\n updateModelValue,\n onClose: tourOnClose,\n onFinish: tourOnFinish,\n onChange,\n} = inject(tourKey)!\n\nwatch(\n props,\n (val) => {\n currentStep.value = val\n },\n {\n immediate: true,\n }\n)\n\nconst mergedShowClose = computed(() => props.showClose ?? showClose.value)\nconst mergedCloseIcon = computed(\n () => props.closeIcon ?? closeIcon.value ?? Close\n)\n\nconst filterButtonProps = (btnProps?: TourBtnProps) => {\n if (!btnProps) return\n return omit(btnProps, ['children', 'onClick'])\n}\n\nconst onPrev = () => {\n current.value -= 1\n if (props.prevButtonProps?.onClick) {\n props.prevButtonProps?.onClick()\n }\n onChange()\n}\n\nconst onNext = () => {\n if (current.value >= total.value - 1) {\n onFinish()\n } else {\n current.value += 1\n }\n if (props.nextButtonProps?.onClick) {\n props.nextButtonProps.onClick()\n }\n onChange()\n}\n\nconst onFinish = () => {\n onClose()\n tourOnFinish()\n}\n\nconst onClose = () => {\n updateModelValue(false)\n tourOnClose()\n emit('close')\n}\n\nconst handleKeydown = (e: KeyboardEvent) => {\n const target = e.target as HTMLElement | null\n if (target?.isContentEditable) return\n const code = getEventCode(e)\n\n switch (code) {\n case EVENT_CODE.left:\n e.preventDefault()\n current.value > 0 && onPrev()\n break\n case EVENT_CODE.right:\n e.preventDefault()\n onNext()\n break\n }\n}\n\nonMounted(() => {\n window.addEventListener('keydown', handleKeydown)\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('keydown', handleKeydown)\n})\n</script>\n"],"mappings":""}
+41
View File
@@ -0,0 +1,41 @@
import { isArray } from "../../../utils/types.mjs";
import { flattedChildren } from "../../../utils/vue/vnode.mjs";
import { defineComponent } from "vue";
//#region ../../packages/components/tour/src/steps.ts
var steps_default = defineComponent({
name: "ElTourSteps",
props: { current: {
type: Number,
default: 0
} },
emits: ["update-total"],
setup(props, { slots, emit }) {
let cacheTotal = 0;
return () => {
const children = slots.default?.();
const result = [];
let total = 0;
function filterSteps(children) {
if (!isArray(children)) return;
children.forEach((item) => {
if ((item?.type || {})?.name === "ElTourStep") {
result.push(item);
total += 1;
}
});
}
if (children.length) filterSteps(flattedChildren(children[0]?.children));
if (cacheTotal !== total) {
cacheTotal = total;
emit("update-total", total);
}
if (result.length) return result[props.current];
return null;
};
}
});
//#endregion
export { steps_default as default };
//# sourceMappingURL=steps.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"steps.mjs","names":[],"sources":["../../../../../../packages/components/tour/src/steps.ts"],"sourcesContent":["import { defineComponent } from 'vue'\nimport { flattedChildren, isArray } from '@element-plus/utils'\n\nimport type { FlattenVNodes } from '@element-plus/utils'\nimport type { Component, VNode } from 'vue'\n\nexport default defineComponent({\n name: 'ElTourSteps',\n props: {\n current: {\n type: Number,\n default: 0,\n },\n },\n emits: ['update-total'],\n setup(props, { slots, emit }) {\n let cacheTotal = 0\n\n return () => {\n const children = slots.default?.()!\n const result: VNode[] = []\n let total = 0\n\n function filterSteps(children?: FlattenVNodes) {\n if (!isArray(children)) return\n ;(children as VNode[]).forEach((item) => {\n const name = ((item?.type || {}) as Component)?.name\n\n if (name === 'ElTourStep') {\n result.push(item)\n total += 1\n }\n })\n }\n\n if (children.length) {\n filterSteps(flattedChildren(children![0]?.children))\n }\n\n if (cacheTotal !== total) {\n cacheTotal = total\n emit('update-total', total)\n }\n\n if (result.length) {\n return result[props.current]\n }\n return null\n }\n },\n})\n"],"mappings":";;;;;AAMA,oBAAe,gBAAgB;CAC7B,MAAM;CACN,OAAO,EACL,SAAS;EACP,MAAM;EACN,SAAS;EACV,EACF;CACD,OAAO,CAAC,eAAe;CACvB,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,IAAI,aAAa;AAEjB,eAAa;GACX,MAAM,WAAW,MAAM,WAAW;GAClC,MAAM,SAAkB,EAAE;GAC1B,IAAI,QAAQ;GAEZ,SAAS,YAAY,UAA0B;AAC7C,QAAI,CAAC,QAAQ,SAAS,CAAE;AACvB,IAAC,SAAqB,SAAS,SAAS;AAGvC,UAFe,MAAM,QAAQ,EAAE,GAAiB,SAEnC,cAAc;AACzB,aAAO,KAAK,KAAK;AACjB,eAAS;;MAEX;;AAGJ,OAAI,SAAS,OACX,aAAY,gBAAgB,SAAU,IAAI,SAAS,CAAC;AAGtD,OAAI,eAAe,OAAO;AACxB,iBAAa;AACb,SAAK,gBAAgB,MAAM;;AAG7B,OAAI,OAAO,OACT,QAAO,OAAO,MAAM;AAEtB,UAAO;;;CAGZ,CAAC"}
+139
View File
@@ -0,0 +1,139 @@
import { IconPropType } from "../../../utils/vue/icon.js";
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { TourContentProps } from "./content.js";
import { TourGap, TourMask } from "./types.js";
import { _default } from "./tour.vue.js";
import * as vue from "vue";
import { CSSProperties, ExtractPublicPropTypes } from "vue";
import * as _floating_ui_dom0 from "@floating-ui/dom";
//#region ../../packages/components/tour/src/tour.d.ts
interface TourProps {
/**
* @description open tour
*/
modelValue?: boolean;
/**
* @description what is the current step
*/
current?: number;
/**
* @description whether to show the arrow
*/
showArrow?: boolean;
/**
* @description whether to show a close button
*/
showClose?: boolean;
/**
* @description custom close icon
*/
closeIcon?: IconPropType;
/**
* @description position of the guide card relative to the target element
*/
placement?: TourContentProps['placement'];
/**
* @description custom style for content
*/
contentStyle?: CSSProperties;
/**
* @description whether to enable masking, change mask style and fill color by pass custom props
*/
mask?: TourMask;
/**
* @description transparent gap between mask and target
*/
gap?: TourGap;
/**
* @description tour's zIndex
*/
zIndex?: number;
/**
* @description support pass custom scrollIntoView options
*/
scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
/**
* @description type, affects the background color and text color
*/
type?: 'default' | 'primary';
/**
* @description which element the TourContent appends to
*/
appendTo?: string | HTMLElement;
/**
* @description whether the Tour can be closed by pressing ESC
*/
closeOnPressEscape?: boolean;
/**
* @description whether the target element can be clickable, when using mask
*/
targetAreaClickable?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `TourProps` instead.
*/
declare const tourProps: {
modelValue: BooleanConstructor;
current: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
showClose: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
closeIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
placement: EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _floating_ui_dom0.Placement) | (((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _floating_ui_dom0.Placement)) | null)[], "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
contentStyle: {
readonly type: vue.PropType<CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
mask: EpPropFinalized<(new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask) | (((new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask)) | null)[], unknown, unknown, boolean, boolean>;
gap: EpPropFinalized<(new (...args: any[]) => TourGap) | (() => TourGap) | (((new (...args: any[]) => TourGap) | (() => TourGap)) | null)[], unknown, unknown, () => {
offset: number;
radius: number;
}, boolean>;
zIndex: {
readonly type: vue.PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | (((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions)) | null)[], unknown, unknown, () => {
block: string;
}, boolean>;
type: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | (((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary")) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
appendTo: EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown, string, boolean>;
closeOnPressEscape: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
targetAreaClickable: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `TourProps` instead.
*/
type TourPropsPublic = ExtractPublicPropTypes<typeof tourProps>;
type TourInstance = InstanceType<typeof _default> & unknown;
declare const tourEmits: {
"update:modelValue": (value: boolean) => boolean;
"update:current": (current: number) => boolean;
close: (current: number) => boolean;
finish: () => boolean;
change: (current: number) => boolean;
};
type TourEmits = typeof tourEmits;
//#endregion
export { TourEmits, TourInstance, TourProps, TourPropsPublic, tourEmits, tourProps };
+69
View File
@@ -0,0 +1,69 @@
import { UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
import { isBoolean, isNumber } from "../../../utils/types.mjs";
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
import { iconPropType } from "../../../utils/vue/icon.mjs";
import { teleportProps } from "../../teleport/src/teleport.mjs";
import { tourContentProps } from "./content.mjs";
//#region ../../packages/components/tour/src/tour.ts
/**
* @deprecated Removed after 3.0.0, Use `TourProps` instead.
*/
const tourProps = buildProps({
modelValue: Boolean,
current: {
type: Number,
default: 0
},
showArrow: {
type: Boolean,
default: true
},
showClose: {
type: Boolean,
default: true
},
closeIcon: { type: iconPropType },
placement: tourContentProps.placement,
contentStyle: { type: definePropType([Object]) },
mask: {
type: definePropType([Boolean, Object]),
default: true
},
gap: {
type: definePropType(Object),
default: () => ({
offset: 6,
radius: 2
})
},
zIndex: { type: Number },
scrollIntoViewOptions: {
type: definePropType([Boolean, Object]),
default: () => ({ block: "center" })
},
type: { type: definePropType(String) },
appendTo: {
type: teleportProps.to.type,
default: "body"
},
closeOnPressEscape: {
type: Boolean,
default: true
},
targetAreaClickable: {
type: Boolean,
default: true
}
});
const tourEmits = {
[UPDATE_MODEL_EVENT]: (value) => isBoolean(value),
["update:current"]: (current) => isNumber(current),
close: (current) => isNumber(current),
finish: () => true,
change: (current) => isNumber(current)
};
//#endregion
export { tourEmits, tourProps };
//# sourceMappingURL=tour.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,49 @@
import { TourGap, TourMask } from "./types.js";
import { TourProps } from "./tour.js";
import "../../../index.js";
import * as vue from "vue";
import * as _floating_ui_dom0 from "@floating-ui/dom";
//#region ../../packages/components/tour/src/tour.vue.d.ts
declare var __VLS_28: {}, __VLS_30: {
current: number;
total: number;
};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_28) => any;
} & {
indicators?: (props: typeof __VLS_30) => any;
};
declare const __VLS_base: vue.DefineComponent<TourProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
change: (current: number) => void;
close: (current: number) => void;
"update:modelValue": (value: boolean) => void;
finish: () => void;
"update:current": (current: number) => void;
}, string, vue.PublicProps, Readonly<TourProps> & Readonly<{
onChange?: ((current: number) => any) | undefined;
onClose?: ((current: number) => any) | undefined;
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
onFinish?: (() => any) | undefined;
"onUpdate:current"?: ((current: number) => any) | undefined;
}>, {
appendTo: string | HTMLElement;
placement: _floating_ui_dom0.Placement;
showArrow: boolean;
gap: TourGap;
mask: TourMask;
closeOnPressEscape: boolean;
showClose: boolean;
scrollIntoViewOptions: boolean | ScrollIntoViewOptions;
current: number;
targetAreaClickable: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,129 @@
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
import { isBoolean } from "../../../utils/types.mjs";
import { ElTeleport } from "../../teleport/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { useZIndex } from "../../../hooks/use-z-index/index.mjs";
import { tourEmits, tourProps } from "./tour.mjs";
import { tourKey, useTarget } from "./helper.mjs";
import mask_default from "./mask2.mjs";
import content_default from "./content2.mjs";
import steps_default from "./steps.mjs";
import { useVModel } from "@vueuse/core";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, provide, ref, renderSlot, toRef, unref, useSlots, watch, withCtx } from "vue";
//#region ../../packages/components/tour/src/tour.vue?vue&type=script&setup=true&lang.ts
var tour_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElTour",
inheritAttrs: false,
__name: "tour",
props: tourProps,
emits: tourEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const ns = useNamespace("tour");
const total = ref(0);
const currentStep = ref();
const current = useVModel(props, "current", emit, { passive: true });
const currentTarget = computed(() => currentStep.value?.target);
const kls = computed(() => [ns.b(), mergedType.value === "primary" ? ns.m("primary") : ""]);
const mergedPlacement = computed(() => currentStep.value?.placement || props.placement);
const mergedContentStyle = computed(() => currentStep.value?.contentStyle ?? props.contentStyle);
const mergedMask = computed(() => currentStep.value?.mask ?? props.mask);
const mergedShowMask = computed(() => !!mergedMask.value && props.modelValue);
const mergedMaskStyle = computed(() => isBoolean(mergedMask.value) ? void 0 : mergedMask.value);
const mergedShowArrow = computed(() => !!currentTarget.value && (currentStep.value?.showArrow ?? props.showArrow));
const mergedScrollIntoViewOptions = computed(() => currentStep.value?.scrollIntoViewOptions ?? props.scrollIntoViewOptions);
const mergedType = computed(() => currentStep.value?.type ?? props.type);
const { nextZIndex } = useZIndex();
const nowZIndex = nextZIndex();
const mergedZIndex = computed(() => props.zIndex ?? nowZIndex);
const { mergedPosInfo: pos, triggerTarget } = useTarget(currentTarget, toRef(props, "modelValue"), toRef(props, "gap"), mergedMask, mergedScrollIntoViewOptions);
watch(() => props.modelValue, (val) => {
if (!val) current.value = 0;
});
const onEscClose = () => {
if (props.closeOnPressEscape) {
emit(UPDATE_MODEL_EVENT, false);
emit("close", current.value);
}
};
const onUpdateTotal = (val) => {
total.value = val;
};
const slots = useSlots();
provide(tourKey, {
currentStep,
current,
total,
showClose: toRef(props, "showClose"),
closeIcon: toRef(props, "closeIcon"),
mergedType,
ns,
slots,
updateModelValue(modelValue) {
emit(UPDATE_MODEL_EVENT, modelValue);
},
onClose() {
emit("close", current.value);
},
onFinish() {
emit("finish");
},
onChange() {
emit(CHANGE_EVENT, current.value);
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createVNode(unref(ElTeleport), { to: __props.appendTo }, {
default: withCtx(() => [createElementVNode("div", mergeProps({ class: kls.value }, _ctx.$attrs), [createVNode(mask_default, {
visible: mergedShowMask.value,
fill: mergedMaskStyle.value?.color,
style: normalizeStyle(mergedMaskStyle.value?.style),
pos: unref(pos),
"z-index": mergedZIndex.value,
"target-area-clickable": __props.targetAreaClickable
}, null, 8, [
"visible",
"fill",
"style",
"pos",
"z-index",
"target-area-clickable"
]), __props.modelValue ? (openBlock(), createBlock(content_default, {
key: unref(current),
reference: unref(triggerTarget),
placement: mergedPlacement.value,
"show-arrow": mergedShowArrow.value,
"z-index": mergedZIndex.value,
style: normalizeStyle(mergedContentStyle.value),
onClose: onEscClose
}, {
default: withCtx(() => [createVNode(unref(steps_default), {
current: unref(current),
onUpdateTotal
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 8, ["current"])]),
_: 3
}, 8, [
"reference",
"placement",
"show-arrow",
"z-index",
"style"
])) : createCommentVNode("v-if", true)], 16)]),
_: 3
}, 8, ["to"]),
createCommentVNode(" just for IDE "),
createCommentVNode("v-if", true)
], 64);
};
}
});
//#endregion
export { tour_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=tour.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
+8
View File
@@ -0,0 +1,8 @@
import tour_vue_vue_type_script_setup_true_lang_default from "./tour.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/tour/src/tour.vue
var tour_default = tour_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { tour_default as default };
//# sourceMappingURL=tour2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"tour2.mjs","names":[],"sources":["../../../../../../packages/components/tour/src/tour.vue"],"sourcesContent":["<template>\n <el-teleport :to=\"appendTo\">\n <div :class=\"kls\" v-bind=\"$attrs\">\n <el-tour-mask\n :visible=\"mergedShowMask\"\n :fill=\"mergedMaskStyle?.color\"\n :style=\"mergedMaskStyle?.style\"\n :pos=\"pos\"\n :z-index=\"mergedZIndex\"\n :target-area-clickable=\"targetAreaClickable\"\n />\n <el-tour-content\n v-if=\"modelValue\"\n :key=\"current\"\n :reference=\"triggerTarget\"\n :placement=\"mergedPlacement\"\n :show-arrow=\"mergedShowArrow\"\n :z-index=\"mergedZIndex\"\n :style=\"mergedContentStyle\"\n @close=\"onEscClose\"\n >\n <el-tour-steps :current=\"current\" @update-total=\"onUpdateTotal\">\n <slot />\n </el-tour-steps>\n </el-tour-content>\n </div>\n </el-teleport>\n <!-- just for IDE -->\n <slot v-if=\"false\" name=\"indicators\" :current=\"current + 1\" :total=\"total\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, toRef, useSlots, watch } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { useNamespace, useZIndex } from '@element-plus/hooks'\nimport { isBoolean } from '@element-plus/utils'\nimport ElTeleport from '@element-plus/components/teleport'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport ElTourMask from './mask.vue'\nimport ElTourContent from './content.vue'\nimport ElTourSteps from './steps'\nimport { tourEmits } from './tour'\nimport { tourKey, useTarget } from './helper'\n\nimport type { TourStepProps } from './step'\nimport type { TourProps } from './tour'\n\ndefineOptions({\n name: 'ElTour',\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TourProps>(), {\n current: 0,\n showArrow: true,\n showClose: true,\n placement: 'bottom',\n mask: true,\n gap: () => ({ offset: 6, radius: 2 }),\n scrollIntoViewOptions: () => ({ block: 'center' }),\n appendTo: 'body',\n closeOnPressEscape: true,\n targetAreaClickable: true,\n})\nconst emit = defineEmits(tourEmits)\n\nconst ns = useNamespace('tour')\nconst total = ref(0)\nconst currentStep = ref<TourStepProps>()\n\nconst current = useVModel(props, 'current', emit, {\n passive: true,\n})\n\nconst currentTarget = computed(() => currentStep.value?.target)\n\nconst kls = computed(() => [\n ns.b(),\n mergedType.value === 'primary' ? ns.m('primary') : '',\n])\n\nconst mergedPlacement = computed(\n () => currentStep.value?.placement || props.placement\n)\n\nconst mergedContentStyle = computed(\n () => currentStep.value?.contentStyle ?? props.contentStyle\n)\n\nconst mergedMask = computed(() => currentStep.value?.mask ?? props.mask)\nconst mergedShowMask = computed(() => !!mergedMask.value && props.modelValue)\nconst mergedMaskStyle = computed(() =>\n isBoolean(mergedMask.value) ? undefined : mergedMask.value\n)\n\nconst mergedShowArrow = computed(\n () =>\n !!currentTarget.value && (currentStep.value?.showArrow ?? props.showArrow)\n)\n\nconst mergedScrollIntoViewOptions = computed(\n () => currentStep.value?.scrollIntoViewOptions ?? props.scrollIntoViewOptions\n)\nconst mergedType = computed(() => currentStep.value?.type ?? props.type)\n\nconst { nextZIndex } = useZIndex()\nconst nowZIndex = nextZIndex()\nconst mergedZIndex = computed(() => props.zIndex ?? nowZIndex)\n\nconst { mergedPosInfo: pos, triggerTarget } = useTarget(\n currentTarget,\n toRef(props, 'modelValue'),\n toRef(props, 'gap'),\n mergedMask,\n mergedScrollIntoViewOptions\n)\n\nwatch(\n () => props.modelValue,\n (val) => {\n if (!val) {\n current.value = 0\n }\n }\n)\n\nconst onEscClose = () => {\n if (props.closeOnPressEscape) {\n emit(UPDATE_MODEL_EVENT, false)\n emit('close', current.value)\n }\n}\n\nconst onUpdateTotal = (val: number) => {\n total.value = val\n}\n\nconst slots = useSlots()\n\nprovide(tourKey, {\n currentStep,\n current,\n total,\n showClose: toRef(props, 'showClose'),\n closeIcon: toRef(props, 'closeIcon'),\n mergedType,\n ns,\n slots,\n updateModelValue(modelValue) {\n emit(UPDATE_MODEL_EVENT, modelValue)\n },\n onClose() {\n emit('close', current.value)\n },\n onFinish() {\n emit('finish')\n },\n onChange() {\n emit(CHANGE_EVENT, current.value)\n },\n})\n</script>\n"],"mappings":""}
+19
View File
@@ -0,0 +1,19 @@
import { ButtonProps } from "../../button/src/button.js";
import "../../button/index.js";
import { CSSProperties, VNode } from "vue";
//#region ../../packages/components/tour/src/types.d.ts
type TourMask = boolean | {
style?: CSSProperties;
color?: string;
};
interface TourGap {
offset?: number | [number, number];
radius?: number;
}
type TourBtnProps = {
children?: VNode | string;
onClick?: () => void;
} & Partial<ButtonProps> & Record<string, any>;
//#endregion
export { TourBtnProps, TourGap, TourMask };
+3
View File
@@ -0,0 +1,3 @@
import "../../base/style/css.mjs";
import "../../button/style/css.mjs";
import "element-plus/theme-chalk/el-tour.css";
@@ -0,0 +1,3 @@
import "../../base/style/index.mjs";
import "../../button/style/index.mjs";
import "element-plus/theme-chalk/src/tour.scss";