@v-c/tour 0.0.1

package/dist/hooks/useTarget.cjs

@@ -0,0 +1,74 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_util = require("../util.cjs");
+let vue = require("vue");
+function isValidNumber(val) {
+	return typeof val === "number" && !Number.isNaN(val);
+}
+function useTarget(target, open, gap, scrollIntoViewOptions, inlineMode, placeholderRef) {
+	const targetElement = (0, vue.shallowRef)(null);
+	const syncTargetElement = () => {
+		targetElement.value = (typeof target.value === "function" ? target.value() : target.value) || null;
+	};
+	(0, vue.watch)(target, () => {
+		syncTargetElement();
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	const posInfo = (0, vue.shallowRef)(null);
+	const updatePos = () => {
+		if (targetElement.value) {
+			if (!inlineMode?.value && !require_util.isInViewPort(targetElement.value) && open.value) targetElement.value?.scrollIntoView(scrollIntoViewOptions.value);
+			const { left, top, width, height } = targetElement.value.getBoundingClientRect();
+			const nextPosInfo = {
+				left,
+				top,
+				width,
+				height,
+				radius: 0
+			};
+			if (inlineMode?.value) {
+				const parentRect = placeholderRef?.value?.parentElement?.getBoundingClientRect?.();
+				if (parentRect) {
+					nextPosInfo.left -= parentRect.left;
+					nextPosInfo.top -= parentRect.top;
+				}
+			}
+			const origin = posInfo.value;
+			if (JSON.stringify(origin) !== JSON.stringify(nextPosInfo)) posInfo.value = nextPosInfo;
+		} else posInfo.value = null;
+	};
+	(0, vue.onMounted)(() => {
+		syncTargetElement();
+		updatePos();
+	});
+	const getGapOffset = (index) => (Array.isArray(gap?.value?.offset) ? gap?.value?.offset[index] : gap?.value?.offset) ?? 6;
+	(0, vue.watch)([targetElement, open], async (_n, _o, onCleanup) => {
+		await (0, vue.nextTick)();
+		updatePos();
+		window.addEventListener("resize", updatePos);
+		window.addEventListener("scroll", updatePos);
+		onCleanup(() => {
+			window.removeEventListener("resize", updatePos);
+			window.removeEventListener("scroll", updatePos);
+		});
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	return [(0, vue.computed)(() => {
+		if (!posInfo.value) return posInfo.value;
+		const gapOffsetX = getGapOffset(0);
+		const gapOffsetY = getGapOffset(1);
+		const gapRadius = isValidNumber(gap?.value?.radius) ? 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
+		};
+	}), targetElement];
+}
+exports.default = useTarget;

package/dist/hooks/useTarget.d.ts

@@ -0,0 +1,20 @@
+import { Ref } from 'vue';
+import { TourStepInfo } from '../interface.ts';
+export interface Gap {
+    offset?: number | [number, number];
+    radius?: number;
+}
+export interface PosInfo {
+    left: number;
+    top: number;
+    height: number;
+    width: number;
+    radius: number;
+}
+export default function useTarget(target: Ref<TourStepInfo['target']>, open: Ref<boolean>, gap?: Ref<Gap | undefined>, scrollIntoViewOptions?: Ref<boolean | ScrollIntoViewOptions>, inlineMode?: Ref<boolean>, placeholderRef?: Ref<HTMLDivElement | null>): readonly [import('vue').ComputedRef<{
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    radius: number | undefined;
+} | null>, import('vue').ShallowRef<HTMLElement | null, HTMLElement | null>];

package/dist/hooks/useTarget.js

@@ -0,0 +1,72 @@
+import { isInViewPort } from "../util.js";
+import { computed, nextTick, onMounted, shallowRef, watch } from "vue";
+function isValidNumber(val) {
+	return typeof val === "number" && !Number.isNaN(val);
+}
+function useTarget(target, open, gap, scrollIntoViewOptions, inlineMode, placeholderRef) {
+	const targetElement = shallowRef(null);
+	const syncTargetElement = () => {
+		targetElement.value = (typeof target.value === "function" ? target.value() : target.value) || null;
+	};
+	watch(target, () => {
+		syncTargetElement();
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	const posInfo = shallowRef(null);
+	const updatePos = () => {
+		if (targetElement.value) {
+			if (!inlineMode?.value && !isInViewPort(targetElement.value) && open.value) targetElement.value?.scrollIntoView(scrollIntoViewOptions.value);
+			const { left, top, width, height } = targetElement.value.getBoundingClientRect();
+			const nextPosInfo = {
+				left,
+				top,
+				width,
+				height,
+				radius: 0
+			};
+			if (inlineMode?.value) {
+				const parentRect = placeholderRef?.value?.parentElement?.getBoundingClientRect?.();
+				if (parentRect) {
+					nextPosInfo.left -= parentRect.left;
+					nextPosInfo.top -= parentRect.top;
+				}
+			}
+			const origin = posInfo.value;
+			if (JSON.stringify(origin) !== JSON.stringify(nextPosInfo)) posInfo.value = nextPosInfo;
+		} else posInfo.value = null;
+	};
+	onMounted(() => {
+		syncTargetElement();
+		updatePos();
+	});
+	const getGapOffset = (index) => (Array.isArray(gap?.value?.offset) ? gap?.value?.offset[index] : gap?.value?.offset) ?? 6;
+	watch([targetElement, open], async (_n, _o, onCleanup) => {
+		await nextTick();
+		updatePos();
+		window.addEventListener("resize", updatePos);
+		window.addEventListener("scroll", updatePos);
+		onCleanup(() => {
+			window.removeEventListener("resize", updatePos);
+			window.removeEventListener("scroll", updatePos);
+		});
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	return [computed(() => {
+		if (!posInfo.value) return posInfo.value;
+		const gapOffsetX = getGapOffset(0);
+		const gapOffsetY = getGapOffset(1);
+		const gapRadius = isValidNumber(gap?.value?.radius) ? 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
+		};
+	}), targetElement];
+}
+export { useTarget as default };

package/dist/index.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_Tour = require("./Tour.cjs");
+var src_default = require_Tour.default;
+exports.default = src_default;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Tour } from './Tour';
+export type { TourProps, TourStepInfo, TourStepProps } from './interface';
+export default Tour;

package/dist/index.js

@@ -0,0 +1,3 @@
+import Tour_default from "./Tour.js";
+var src_default = Tour_default;
+export { src_default as default };

package/dist/interface.d.ts

@@ -0,0 +1,81 @@
+import { TriggerProps } from '@v-c/trigger';
+import { VueNode } from '@v-c/util/dist/type';
+import { AriaAttributes, CSSProperties, Ref } from 'vue';
+import { Gap } from './hooks/useTarget.ts';
+import { PlacementType } from './placements';
+import { DefaultPanelProps } from './TourStep/DefaultPanel.tsx';
+export type SemanticName = 'section' | 'footer' | 'actions' | 'header' | 'title' | 'description' | 'mask';
+export type HTMLAriaDataAttributes = AriaAttributes & {
+    [key: `data-${string}`]: unknown;
+    role?: string;
+};
+export interface TourStepInfo {
+    arrow?: boolean | {
+        pointAtCenter: boolean;
+    };
+    target?: Ref<HTMLElement | null | undefined> | HTMLElement | null | (() => HTMLElement | null | undefined);
+    title: VueNode;
+    description?: VueNode;
+    placement?: PlacementType;
+    className?: string;
+    style?: CSSProperties;
+    mask?: boolean | {
+        style?: CSSProperties;
+        color?: string;
+    };
+    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
+    closeIcon?: VueNode;
+    closable?: boolean | ({
+        closeIcon?: VueNode;
+    } & HTMLAriaDataAttributes);
+}
+export interface TourStepProps extends TourStepInfo {
+    prefixCls?: string;
+    total?: number;
+    current?: number;
+    onClose?: () => void;
+    onFinish?: () => void;
+    renderPanel?: (step: DefaultPanelProps, current: number) => VueNode;
+    onPrev?: () => void;
+    onNext?: () => void;
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, CSSProperties>>;
+}
+export interface TourProps extends Pick<TriggerProps, 'onPopupAlign'> {
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, CSSProperties>>;
+    className?: string;
+    style?: CSSProperties;
+    steps?: TourStepInfo[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    defaultCurrent?: number;
+    current?: number;
+    onChange?: (current: number) => void;
+    onClose?: (current: number) => void;
+    onFinish?: () => void;
+    closeIcon?: TourStepProps['closeIcon'];
+    closable?: TourStepProps['closable'];
+    mask?: boolean | {
+        style?: CSSProperties;
+        color?: string;
+    };
+    arrow?: boolean | {
+        pointAtCenter: boolean;
+    };
+    rootClassName?: string;
+    placement?: PlacementType;
+    prefixCls?: string;
+    renderPanel?: (props: DefaultPanelProps, current: number) => VueNode;
+    gap?: Gap;
+    animated?: boolean | {
+        placeholder: boolean;
+    };
+    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
+    zIndex?: number;
+    getPopupContainer?: TriggerProps['getPopupContainer'] | false;
+    builtinPlacements?: TriggerProps['builtinPlacements'] | ((config?: {
+        arrowPointAtCenter?: boolean;
+    }) => TriggerProps['builtinPlacements']);
+    disabledInteraction?: boolean;
+}

package/dist/placements.cjs

@@ -0,0 +1,65 @@
+var targetOffset = [0, 0];
+var basePlacements = {
+	left: {
+		points: ["cr", "cl"],
+		offset: [-8, 0]
+	},
+	right: {
+		points: ["cl", "cr"],
+		offset: [8, 0]
+	},
+	top: {
+		points: ["bc", "tc"],
+		offset: [0, -8]
+	},
+	bottom: {
+		points: ["tc", "bc"],
+		offset: [0, 8]
+	},
+	topLeft: {
+		points: ["bl", "tl"],
+		offset: [0, -8]
+	},
+	leftTop: {
+		points: ["tr", "tl"],
+		offset: [-8, 0]
+	},
+	topRight: {
+		points: ["br", "tr"],
+		offset: [0, -8]
+	},
+	rightTop: {
+		points: ["tl", "tr"],
+		offset: [8, 0]
+	},
+	bottomRight: {
+		points: ["tr", "br"],
+		offset: [0, 8]
+	},
+	rightBottom: {
+		points: ["bl", "br"],
+		offset: [8, 0]
+	},
+	bottomLeft: {
+		points: ["tl", "bl"],
+		offset: [0, 8]
+	},
+	leftBottom: {
+		points: ["br", "bl"],
+		offset: [-8, 0]
+	}
+};
+function getPlacements(arrowPointAtCenter = false) {
+	const placements$1 = {};
+	Object.keys(basePlacements).forEach((key) => {
+		placements$1[key] = {
+			...basePlacements[key],
+			autoArrow: arrowPointAtCenter,
+			targetOffset
+		};
+	});
+	return placements$1;
+}
+const placements = getPlacements();
+exports.getPlacements = getPlacements;
+exports.placements = placements;

package/dist/placements.d.ts

@@ -0,0 +1,4 @@
+import { BuildInPlacements } from '@v-c/trigger';
+export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
+export declare function getPlacements(arrowPointAtCenter?: boolean): BuildInPlacements;
+export declare const placements: BuildInPlacements;

package/dist/placements.js

@@ -0,0 +1,64 @@
+var targetOffset = [0, 0];
+var basePlacements = {
+	left: {
+		points: ["cr", "cl"],
+		offset: [-8, 0]
+	},
+	right: {
+		points: ["cl", "cr"],
+		offset: [8, 0]
+	},
+	top: {
+		points: ["bc", "tc"],
+		offset: [0, -8]
+	},
+	bottom: {
+		points: ["tc", "bc"],
+		offset: [0, 8]
+	},
+	topLeft: {
+		points: ["bl", "tl"],
+		offset: [0, -8]
+	},
+	leftTop: {
+		points: ["tr", "tl"],
+		offset: [-8, 0]
+	},
+	topRight: {
+		points: ["br", "tr"],
+		offset: [0, -8]
+	},
+	rightTop: {
+		points: ["tl", "tr"],
+		offset: [8, 0]
+	},
+	bottomRight: {
+		points: ["tr", "br"],
+		offset: [0, 8]
+	},
+	rightBottom: {
+		points: ["bl", "br"],
+		offset: [8, 0]
+	},
+	bottomLeft: {
+		points: ["tl", "bl"],
+		offset: [0, 8]
+	},
+	leftBottom: {
+		points: ["br", "bl"],
+		offset: [-8, 0]
+	}
+};
+function getPlacements(arrowPointAtCenter = false) {
+	const placements$1 = {};
+	Object.keys(basePlacements).forEach((key) => {
+		placements$1[key] = {
+			...basePlacements[key],
+			autoArrow: arrowPointAtCenter,
+			targetOffset
+		};
+	});
+	return placements$1;
+}
+const placements = getPlacements();
+export { getPlacements, placements };

package/dist/util.cjs

@@ -0,0 +1,11 @@
+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;
+}
+function getPlacement(targetElement, placement, stepPlacement) {
+	return stepPlacement ?? placement ?? (targetElement === null ? "center" : "bottom");
+}
+exports.getPlacement = getPlacement;
+exports.isInViewPort = isInViewPort;

package/dist/util.d.ts

@@ -0,0 +1,3 @@
+import { PlacementType } from './placements';
+export declare function isInViewPort(element: HTMLElement): boolean;
+export declare function getPlacement(targetElement?: HTMLElement | null, placement?: PlacementType, stepPlacement?: PlacementType): PlacementType;

package/dist/util.js

@@ -0,0 +1,10 @@
+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;
+}
+function getPlacement(targetElement, placement, stepPlacement) {
+	return stepPlacement ?? placement ?? (targetElement === null ? "center" : "bottom");
+}
+export { getPlacement, isInViewPort };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@v-c/tour",
+  "type": "module",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "tour",
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "tour"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/trigger": "0.0.14",
+    "@v-c/util": "0.0.13",
+    "@v-c/portal": "0.0.5"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest",
+    "prepublish": "pnpm build",
+    "bump": "bumpp --release patch"
+  }
+}