@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/overlay/Tour.js

@@ -0,0 +1,309 @@
+import { clamp } from "../utils/data/number.js";
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Button } from "../base/Button.js";
+import { isRtl } from "../utils/dom/direction.js";
+import { openModalDialog } from "../utils/dom/overlay.js";
+import { H2 } from "../base/Heading.js";
+import { Text as Text$1 } from "../base/Text.js";
+import { Flex } from "../layout/Flex.js";
+import { anchorFloating, floatingStyles } from "../utils/dom/floating.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { isEditable } from "../utils/dom/hotkeys.js";
+import { createVNode, mergeProps, nextTick, onBeforeUnmount, ref, shallowRef, useId } from "vue";
+import { _component, bindable, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { autoUpdate } from "@floating-ui/dom";
+//#region src/overlay/Tour.tsx
+/** 引导的一步 */
+/** 打开、无障碍关联由组件管理；未声明的属性落到 dialog 上 */
+/** Tour 的样式：root、spotlight、dimmed、panel、cover、title、content、footer、progress */
+var tourStyles = css.create({
+	root: {
+		position: "fixed",
+		inset: 0,
+		width: "100%",
+		height: "100%",
+		maxWidth: "none",
+		maxHeight: "none",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		overflow: "hidden",
+		"::backdrop": { backgroundColor: "transparent" }
+	},
+	spotlight: {
+		position: "fixed",
+		borderRadius: "_md",
+		boxShadow: `0 0 0 100vmax ${t.colors.overlay}`,
+		pointerEvents: "none",
+		transition: `left ${t.durations.md} ${t.easings.standard}, top ${t.durations.md} ${t.easings.standard}, width ${t.durations.md} ${t.easings.standard}, height ${t.durations.md} ${t.easings.standard}`
+	},
+	dimmed: {
+		inset: 0,
+		borderRadius: 0,
+		backgroundColor: "_overlay",
+		boxShadow: "none"
+	},
+	panel: {
+		display: "grid",
+		gap: "_sm",
+		width: "min(22rem, calc(100vw - 2rem))",
+		padding: "_lg",
+		lineHeight: "_normal"
+	},
+	centered: {
+		left: "50%",
+		top: "50%",
+		transform: "translate(-50%, -50%)"
+	},
+	cover: {
+		display: "grid",
+		overflow: "hidden",
+		marginBlockStart: `calc(-1 * ${t.space.lg})`,
+		marginInline: `calc(-1 * ${t.space.lg})`,
+		marginBlockEnd: "_xs",
+		borderStartStartRadius: "inherit",
+		borderStartEndRadius: "inherit"
+	},
+	title: { margin: 0 },
+	content: { color: "_textMuted" },
+	footer: { marginBlockStart: "_xs" },
+	progress: { marginInlineEnd: "auto" }
+});
+/** Tour 的样式：rect（镂空的位置与大小） */
+var tourDynamicStyles = css.create({ rect: (left, top, width, height) => ({
+	left,
+	top,
+	width,
+	height
+}) });
+/** 读出这一步的目标元素 */
+function resolveTarget(target) {
+	if (!target) return null;
+	if (typeof target === "string") return document.querySelector(target);
+	if (typeof target === "function") return target() ?? null;
+	return target;
+}
+/** 新手引导：遮罩镂空高亮目标，卡片说明，一步一步往下走 */
+var Tour = /*#__PURE__*/ _component((_props, _ctx) => {
+	const steps = readonlyProp(_props, "steps");
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const current = bindable(_props, "_current", () => 0, _ctx.emit);
+	const padding = readonlyProp(_props, "padding", 6);
+	const onFinish = readonlyProp(_props, "onFinish");
+	const propsSpotlight = readonlyProp(_props, "propsSpotlight");
+	const propsPanel = readonlyProp(_props, "propsPanel");
+	const propsCover = readonlyProp(_props, "propsCover");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const propsFooter = readonlyProp(_props, "propsFooter");
+	const propsProgress = readonlyProp(_props, "propsProgress");
+	const propsSkip = readonlyProp(_props, "propsSkip");
+	const propsPrevious = readonlyProp(_props, "propsPrevious");
+	const propsNext = readonlyProp(_props, "propsNext");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const id = useId();
+	const titleId = `${id}-title`;
+	const contentId = `${id}-content`;
+	let dialog = shallowRef(null);
+	let panel = shallowRef(null);
+	let rect = ref(null);
+	let release;
+	let stopFollow;
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	let closing;
+	const step = () => steps.value[clamp(current.value, 0, steps.value.length - 1)];
+	const last = () => current.value >= steps.value.length - 1;
+	function show() {
+		if (!dialog.value || dialog.value.open) return;
+		release = openModalDialog(dialog.value);
+	}
+	/** 跟随这一步的目标：滚到视口中间，之后镂空与卡片随滚动、缩放、大小变化更新 */
+	async function follow() {
+		stopFollow?.();
+		stopFollow = void 0;
+		await nextTick();
+		const target = resolveTarget(step()?.target);
+		if (!panel.value) return;
+		if (!target) {
+			rect.value = null;
+			Object.assign(panel.value.style, {
+				left: "",
+				top: "",
+				visibility: "",
+				transformOrigin: ""
+			});
+			panel.value.focus({ preventScroll: true });
+			return;
+		}
+		target.scrollIntoView({
+			block: "center",
+			inline: "nearest"
+		});
+		const anchored = anchorFloating(target, panel.value, {
+			placement: step()?.placement ?? "bottom",
+			offset: padding.value + 8,
+			crossAxisFallback: true
+		});
+		const stopSpotlight = autoUpdate(target, panel.value, () => {
+			const box = target.getBoundingClientRect();
+			rect.value = {
+				left: box.left - padding.value,
+				top: box.top - padding.value,
+				width: box.width + padding.value * 2,
+				height: box.height + padding.value * 2
+			};
+		});
+		stopFollow = () => {
+			anchored.stop();
+			stopSpotlight();
+		};
+		await anchored.ready;
+		panel.value.focus({ preventScroll: true });
+	}
+	function close(reason, event) {
+		closing = {
+			reason,
+			event
+		};
+		dialog.value?.close();
+	}
+	function onClose() {
+		stopFollow?.();
+		stopFollow = void 0;
+		release?.();
+		release = void 0;
+		const { reason, event } = closing ?? { reason: "escape" };
+		closing = void 0;
+		setOpen(false, reason, event);
+	}
+	function next(event) {
+		if (!last()) {
+			current.value++;
+			return;
+		}
+		close("confirm", event);
+		onFinish.value?.();
+	}
+	/** → / ← 切换步骤（从右到左排版时反过来）；焦点在可编辑的元素里时留给它，下一步按钮不可用时不前进 */
+	function onKeydown(event) {
+		if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
+		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		if (isEditable(event.target)) return;
+		const forward = event.key === "ArrowRight" !== (panel.value !== null && isRtl(panel.value));
+		if (forward && !propsNext.value?.disabled) next(event);
+		else if (!forward && current.value > 0) current.value--;
+		else return;
+		event.preventDefault();
+	}
+	effect(() => {
+		if (open.value) show();
+		else if (dialog.value?.open) dialog.value.close();
+	});
+	effect(() => {
+		current.value;
+		if (open.value) follow();
+	});
+	onBeforeUnmount(() => {
+		stopFollow?.();
+		release?.();
+	});
+	return () => {
+		const currentStep = step();
+		return createVNode("dialog", mergeProps(mergeAttrs({ sx: tourStyles.root }, rest, {
+			ref: dialog,
+			"aria-labelledby": titleId,
+			"aria-describedby": currentStep?.content != null ? contentId : void 0,
+			onClose,
+			onKeydown
+		}), { "data-step": current.value }), [createVNode("div", mergeAttrs({ sx: [tourStyles.spotlight, rect.value ? css.bind(tourDynamicStyles.rect, () => [
+			rect.value.left,
+			rect.value.top,
+			rect.value.width,
+			rect.value.height
+		], true) : tourStyles.dimmed] }, propsSpotlight.value, { "aria-hidden": true }), null), currentStep && createVNode("div", mergeAttrs({ sx: [
+			floatingStyles.anchored,
+			floatingStyles.surface,
+			tourStyles.panel,
+			css.select(() => !rect.value && tourStyles.centered, true)
+		] }, propsPanel.value, {
+			ref: panel,
+			tabindex: -1
+		}), [
+			currentStep.cover != null && createVNode("div", mergeAttrs({ sx: tourStyles.cover }, propsCover.value), [currentStep.cover]),
+			createVNode(H2, mergePartProps({
+				size: "md",
+				sx: tourStyles.title
+			}, propsTitle.value, { id: titleId }), { default: () => [currentStep.title] }),
+			currentStep.content != null && createVNode("div", mergeAttrs({ sx: tourStyles.content }, propsContent.value, { id: contentId }), [currentStep.content]),
+			createVNode(Flex, mergeProps(mergePartProps({
+				align: "center",
+				gap: "sm",
+				wrap: true,
+				sx: tourStyles.footer
+			}, propsFooter.value), { "key": "__site4" }), {
+				default: () => [
+					createVNode(Text$1, mergeProps(mergePartProps({
+						size: "sm",
+						tone: "muted",
+						sx: tourStyles.progress
+					}, propsProgress.value), { "key": "__site0" }), {
+						default: () => [lang.tourProgress(current.value + 1, steps.value.length)],
+						$stable: true
+					}),
+					!last() && createVNode(Button, mergeProps(mergePartProps({
+						variant: "ghost",
+						tone: "neutral",
+						size: "sm"
+					}, propsSkip.value, { onClick: (event) => close("close", event) }), { "key": "__site1" }), {
+						default: () => [lang.tourSkip],
+						$stable: true
+					}),
+					current.value > 0 && createVNode(Button, mergeProps(mergePartProps({
+						variant: "outline",
+						size: "sm"
+					}, propsPrevious.value, { onClick: () => current.value-- }), { "key": "__site2" }), {
+						default: () => [lang.tourPrevious],
+						$stable: true
+					}),
+					createVNode(Button, mergeProps(mergePartProps({ size: "sm" }, propsNext.value, { onClick: next }), { "key": "__site3" }), {
+						default: () => [last() ? lang.tourFinish : lang.tourNext],
+						$stable: true
+					})
+				],
+				$stable: true
+			})
+		])]);
+	};
+}, {
+	props: [
+		"steps",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"_current",
+		"onUpdate:_current",
+		"padding",
+		"onFinish",
+		"propsSpotlight",
+		"propsPanel",
+		"propsCover",
+		"propsTitle",
+		"propsContent",
+		"propsFooter",
+		"propsProgress",
+		"propsSkip",
+		"propsPrevious",
+		"propsNext"
+	],
+	name: "Tour"
+});
+//#endregion
+export { Tour, tourDynamicStyles, tourStyles };
+
+//# sourceMappingURL=Tour.js.map

package/dist/overlay/Tour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","Text"],"sources":["../../src/overlay/Tour.tsx"],"sourcesContent":["/**\n * 新手引导（原生模态 dialog）：一步一步高亮页面上的元素并说明。遮罩盖住整页，目标处镂空；步骤卡片贴着目标显示。\n *\n *   <Tour\n *     _open={touring}\n *     _current={step}\n *     steps={[\n *       { target: '#search', title: '搜索', content: '按名称或编号查找订单' },\n *       { target: () => exportButton, title: '导出', content: '导出为 Excel', placement: 'left' },\n *       { title: '就这些', content: '随时可以在帮助菜单里重新查看' },   // 没有目标：卡片居中\n *     ]}\n *   />\n *\n * - 模态：背景 inert、Esc 关闭、焦点在卡片里循环，关闭后焦点回到打开前的位置（同 Dialog，见 Modal.tsx）；\n * - 目标：选择器、元素或返回元素的函数；切换步骤时滚动到视口中间，滚动、缩放、目标大小变化时镂空与卡片跟着动；\n *   找不到目标时卡片居中、整页遮罩；\n * - 卡片：封面（可选的插图）、标题（dialog 的名称）、内容（描述）、步数、上一步 / 下一步（最后一步是“完成”）、跳过；\n * - 键盘：→ / ← 下一步 / 上一步（从右到左排版时反过来；焦点在输入框里时不处理），Esc 关闭；\n * - open、current 可受控；点“完成”时调用 onFinish，跳过或 Esc 时只关闭。\n *\n * 部件：Root（dialog，整屏透明）、Spotlight（镂空）、Panel（卡片）、Cover（封面）、Title、Content、Footer、\n * Progress（步数）、Skip（跳过）、Previous（上一步）、Next（下一步 / 完成）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { autoUpdate } from '@floating-ui/dom';\nimport { nextTick, onBeforeUnmount, useId, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { H2, type HeadingProps } from '../base/Heading';\nimport { Text, type TextProps } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { clamp } from '../utils/data/number';\nimport { isRtl } from '../utils/dom/direction';\nimport { isEditable } from '../utils/dom/hotkeys';\nimport { anchorFloating, floatingStyles, type FloatingPlacement } from '../utils/dom/floating';\nimport {\n  openSetter,\n  type OpenChangeDetails,\n  type OpenChangeProps,\n  type OpenChangeReasons,\n} from '../utils/dom/open-change';\nimport { openModalDialog } from '../utils/dom/overlay';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 引导的一步 */\nexport interface TourStep {\n  /** 高亮的目标：选择器、元素或返回元素的函数；不写（或找不到）时卡片居中 */\n  target?: string | HTMLElement | (() => HTMLElement | null | undefined);\n  /** 标题 */\n  title: VNodeChild;\n  /** 说明 */\n  content?: VNodeChild;\n  /** 标题上方的封面：插图、截图、短视频 */\n  cover?: VNodeChild;\n  /** 卡片在目标的哪一侧，默认 bottom；空间不够时翻转 */\n  placement?: FloatingPlacement;\n}\n\n/** 打开、无障碍关联由组件管理；未声明的属性落到 dialog 上 */\nexport interface TourProps\n  extends PartProps<'dialog', 'open' | 'aria-labelledby' | 'aria-describedby'>, OpenChangeProps {\n  /** 各步 */\n  steps: readonly TourStep[];\n  /** 是否显示：父级写 _open={x} */\n  _open?: boolean;\n  /** 当前第几步，从 0 开始：父级写 _current={n} */\n  _current?: number;\n  /** 镂空比目标大出多少（px），默认 6 */\n  padding?: number;\n  /** 点了最后一步的“完成” */\n  onFinish?: () => void;\n  /** 镂空的部件属性 */\n  propsSpotlight?: PartProps<'div'>;\n  /** 卡片的部件属性 */\n  propsPanel?: PartProps<'div'>;\n  /** 封面的部件属性 */\n  propsCover?: PartProps<'div'>;\n  /** 标题（dialog 的名称）的部件属性 */\n  propsTitle?: Omit<Partial<HeadingProps>, 'id'>;\n  /** 说明（dialog 的描述）的部件属性 */\n  propsContent?: PartProps<'div', 'id'>;\n  /** 底部一行（步数与按钮）的部件属性 */\n  propsFooter?: Partial<FlexProps>;\n  /** 步数（第几步 / 共几步）的部件属性 */\n  propsProgress?: Partial<TextProps>;\n  /** 跳过按钮的部件属性；点击由组件管理 */\n  propsSkip?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 上一步按钮的部件属性；点击由组件管理 */\n  propsPrevious?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 下一步（最后一步是完成）按钮的部件属性；点击由组件管理，可以设 disabled（完成某个操作后才能继续） */\n  propsNext?: Omit<Partial<ButtonProps>, 'onClick'>;\n}\n\n/** Tour 的样式：root、spotlight、dimmed、panel、cover、title、content、footer、progress */\nexport const tourStyles = css.create({\n  // 整屏透明的 dialog：遮罩由镂空的阴影画，原生 ::backdrop 不用\n  root: {\n    position: 'fixed',\n    inset: 0,\n    width: '100%',\n    height: '100%',\n    maxWidth: 'none',\n    maxHeight: 'none',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    overflow: 'hidden',\n    '::backdrop': { backgroundColor: 'transparent' },\n  },\n  // 一个盒子画成镂空：外面一圈巨大的阴影就是遮罩\n  spotlight: {\n    position: 'fixed',\n    borderRadius: '_md',\n    boxShadow: `0 0 0 100vmax ${t.colors.overlay}`,\n    pointerEvents: 'none',\n    transition: `left ${t.durations.md} ${t.easings.standard}, top ${t.durations.md} ${t.easings.standard}, width ${t.durations.md} ${t.easings.standard}, height ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 没有目标：整页遮罩\n  dimmed: { inset: 0, borderRadius: 0, backgroundColor: '_overlay', boxShadow: 'none' },\n  panel: {\n    display: 'grid',\n    gap: '_sm',\n    width: 'min(22rem, calc(100vw - 2rem))',\n    padding: '_lg',\n    lineHeight: '_normal',\n  },\n  centered: { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' },\n  // 封面贴着卡片的上、左、右边（盖住内边距），圆角随卡片\n  cover: {\n    display: 'grid',\n    overflow: 'hidden',\n    marginBlockStart: `calc(-1 * ${t.space.lg})`,\n    marginInline: `calc(-1 * ${t.space.lg})`,\n    marginBlockEnd: '_xs',\n    borderStartStartRadius: 'inherit',\n    borderStartEndRadius: 'inherit',\n  },\n  title: { margin: 0 },\n  content: { color: '_textMuted' },\n  footer: { marginBlockStart: '_xs' },\n  progress: { marginInlineEnd: 'auto' },\n});\n\n// 镂空的位置是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Tour 的样式：rect（镂空的位置与大小） */\nexport const tourDynamicStyles = css.create({\n  rect: (left: number, top: number, width: number, height: number) => ({\n    left,\n    top,\n    width,\n    height,\n  }),\n});\n\n/** 读出这一步的目标元素 */\nfunction resolveTarget(target: TourStep['target']): HTMLElement | null {\n  if (!target) return null;\n  if (typeof target === 'string') return document.querySelector<HTMLElement>(target);\n  if (typeof target === 'function') return target() ?? null;\n  return target;\n}\n\n/** 新手引导：遮罩镂空高亮目标，卡片说明，一步一步往下走 */\nexport const Tour = _component(\n  ({\n    steps,\n    _open: open = _bindable(false),\n    onOpenChange,\n    _current: current = _bindable(0),\n    padding = 6,\n    onFinish,\n    propsSpotlight,\n    propsPanel,\n    propsCover,\n    propsTitle,\n    propsContent,\n    propsFooter,\n    propsProgress,\n    propsSkip,\n    propsPrevious,\n    propsNext,\n    ...rest\n  }: TourProps) => {\n    const lang = useLang();\n    const id = useId();\n    const titleId = `${id}-title`;\n    const contentId = `${id}-content`;\n    let dialog = _state.raw<HTMLDialogElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    // 镂空的位置；没有目标时为 null（整页遮罩、卡片居中）\n    let rect = _state<{ left: number; top: number; width: number; height: number } | null>(null);\n    let release: (() => void) | undefined;\n    let stopFollow: (() => void) | undefined;\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    // 这次关闭的原因：跳过是 close、完成是 confirm，没记下的是 Esc\n    let closing: OpenChangeDetails | undefined;\n\n    const step = () => steps[clamp(current, 0, steps.length - 1)];\n    const last = () => current >= steps.length - 1;\n\n    // 与对话框同一套模态行为（含锁定页面滚动：引导期间页面不跟着滚，目标由引导自己滚进视口）\n    function show() {\n      if (!dialog || dialog.open) return;\n      release = openModalDialog(dialog);\n    }\n\n    /** 跟随这一步的目标：滚到视口中间，之后镂空与卡片随滚动、缩放、大小变化更新 */\n    async function follow() {\n      stopFollow?.();\n      stopFollow = undefined;\n      await nextTick();\n      const target = resolveTarget(step()?.target);\n      if (!panel) return;\n      if (!target) {\n        rect = null;\n        // 上一步定位时写的内联位置清掉，卡片回到居中\n        Object.assign(panel.style, { left: '', top: '', visibility: '', transformOrigin: '' });\n        panel.focus({ preventScroll: true });\n        return;\n      }\n      target.scrollIntoView({ block: 'center', inline: 'nearest' });\n      const anchored = anchorFloating(target, panel, {\n        placement: step()?.placement ?? 'bottom',\n        offset: padding + 8,\n        crossAxisFallback: true,\n      });\n      const stopSpotlight = autoUpdate(target, panel, () => {\n        const box = target.getBoundingClientRect();\n        rect = {\n          left: box.left - padding,\n          top: box.top - padding,\n          width: box.width + padding * 2,\n          height: box.height + padding * 2,\n        };\n      });\n      stopFollow = () => {\n        anchored.stop();\n        stopSpotlight();\n      };\n      await anchored.ready;\n      panel.focus({ preventScroll: true });\n    }\n\n    function close(reason: keyof OpenChangeReasons, event?: Event) {\n      closing = { reason, event };\n      dialog?.close();\n    }\n\n    // 不论以什么方式关闭（Esc、跳过、完成、open 改为 false），都会触发原生 close 事件\n    function onClose() {\n      stopFollow?.();\n      stopFollow = undefined;\n      release?.();\n      release = undefined;\n      const { reason, event } = closing ?? { reason: 'escape' };\n      closing = undefined;\n      setOpen(false, reason, event);\n    }\n\n    function next(event?: Event) {\n      if (!last()) {\n        current++;\n        return;\n      }\n      close('confirm', event);\n      onFinish?.();\n    }\n\n    /** → / ← 切换步骤（从右到左排版时反过来）；焦点在可编辑的元素里时留给它，下一步按钮不可用时不前进 */\n    function onKeydown(event: KeyboardEvent) {\n      if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;\n      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;\n      if (isEditable(event.target)) return;\n      const forward = (event.key === 'ArrowRight') !== (panel !== null && isRtl(panel));\n      if (forward && !propsNext?.disabled) next(event);\n      else if (!forward && current > 0) current--;\n      else return;\n      event.preventDefault();\n    }\n\n    _effect(() => {\n      if (open) show();\n      else if (dialog?.open) dialog.close();\n    });\n    // 打开、换步骤时重新跟随目标\n    _effect(() => {\n      void current;\n      if (open) void follow();\n    });\n    onBeforeUnmount(() => {\n      stopFollow?.();\n      release?.();\n    });\n\n    return () => {\n      const currentStep = step();\n      return (\n        <dialog\n          {...mergeAttrs<'dialog'>({ sx: tourStyles.root }, rest, {\n            ref: _toRef(dialog),\n            'aria-labelledby': titleId,\n            'aria-describedby': currentStep?.content != null ? contentId : undefined,\n            onClose,\n            onKeydown,\n          })}\n          data-step={current}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  tourStyles.spotlight,\n                  rect\n                    ? tourDynamicStyles.rect(rect.left, rect.top, rect.width, rect.height)\n                    : tourStyles.dimmed,\n                ],\n              },\n              propsSpotlight,\n              { 'aria-hidden': true },\n            )}\n          />\n          {currentStep && (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    floatingStyles.anchored,\n                    floatingStyles.surface,\n                    tourStyles.panel,\n                    !rect && tourStyles.centered,\n                  ],\n                },\n                propsPanel,\n                { ref: _toRef(panel), tabindex: -1 },\n              )}\n            >\n              {currentStep.cover != null && (\n                <div {...mergeAttrs<'div'>({ sx: tourStyles.cover }, propsCover)}>\n                  {currentStep.cover}\n                </div>\n              )}\n              <H2\n                {...mergePartProps<HeadingProps>({ size: 'md', sx: tourStyles.title }, propsTitle, {\n                  id: titleId,\n                })}\n              >\n                {currentStep.title}\n              </H2>\n              {currentStep.content != null && (\n                <div\n                  {...mergeAttrs<'div'>({ sx: tourStyles.content }, propsContent, {\n                    id: contentId,\n                  })}\n                >\n                  {currentStep.content}\n                </div>\n              )}\n              <Flex\n                {...mergePartProps<FlexProps>(\n                  { align: 'center', gap: 'sm', wrap: true, sx: tourStyles.footer },\n                  propsFooter,\n                )}\n              >\n                <Text\n                  {...mergePartProps<TextProps>(\n                    { size: 'sm', tone: 'muted', sx: tourStyles.progress },\n                    propsProgress,\n                  )}\n                >\n                  {lang.tourProgress(current + 1, steps.length)}\n                </Text>\n                {!last() && (\n                  <Button\n                    {...mergePartProps<ButtonProps>(\n                      { variant: 'ghost', tone: 'neutral', size: 'sm' },\n                      propsSkip,\n                      { onClick: (event: MouseEvent) => close('close', event) },\n                    )}\n                  >\n                    {lang.tourSkip}\n                  </Button>\n                )}\n                {current > 0 && (\n                  <Button\n                    {...mergePartProps<ButtonProps>(\n                      { variant: 'outline', size: 'sm' },\n                      propsPrevious,\n                      { onClick: () => current-- },\n                    )}\n                  >\n                    {lang.tourPrevious}\n                  </Button>\n                )}\n                <Button\n                  {...mergePartProps<ButtonProps>({ size: 'sm' }, propsNext, { onClick: next })}\n                >\n                  {last() ? lang.tourFinish : lang.tourNext}\n                </Button>\n              </Flex>\n            </div>\n          )}\n        </dialog>\n      );\n    };\n  },\n  { name: 'Tour' },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgGA,IAAa,aAAa,IAAI,OAAO;CAEnC,MAAM;EACJ,UAAU;EACV,OAAO;EACP,OAAO;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EACX,QAAQ;EACR,SAAS;EACT,aAAa;EACb,iBAAiB;EACjB,UAAU;EACV,cAAc,EAAE,iBAAiB,cAAc;CACjD;CAEA,WAAW;EACT,UAAU;EACV,cAAc;EACd,WAAW,iBAAiB,EAAE,OAAO;EACrC,eAAe;EACf,YAAY,QAAQ,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,QAAS,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,WAAY,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAC9L;CAEA,QAAQ;EAAE,OAAO;EAAG,cAAc;EAAG,iBAAiB;EAAY,WAAW;CAAO;CACpF,OAAO;EACL,SAAS;EACT,KAAK;EACL,OAAO;EACP,SAAS;EACT,YAAY;CACd;CACA,UAAU;EAAE,MAAM;EAAO,KAAK;EAAO,WAAW;CAAwB;CAExE,OAAO;EACL,SAAS;EACT,UAAU;EACV,kBAAkB,aAAa,EAAE,MAAM,GAAE;EACzC,cAAc,aAAa,EAAE,MAAM,GAAE;EACrC,gBAAgB;EAChB,wBAAwB;EACxB,sBAAsB;CACxB;CACA,OAAO,EAAE,QAAQ,EAAE;CACnB,SAAS,EAAE,OAAO,aAAa;CAC/B,QAAQ,EAAE,kBAAkB,MAAM;CAClC,UAAU,EAAE,iBAAiB,OAAO;AACtC,CAAC;;AAID,IAAa,oBAAoB,IAAI,OAAO,EAC1C,OAAO,MAAc,KAAa,OAAe,YAAoB;CACnE;CACA;CACA;CACA;AACF,GACF,CAAC;;AAGD,SAAS,cAAc,QAAgD;CACrE,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,OAAO,WAAW,UAAU,OAAO,SAAS,cAA2B,MAAM;CACjF,IAAI,OAAO,WAAW,YAAY,OAAO,OAAO,KAAK;CACrD,OAAO;AACT;;AAGA,IAAa,OAAO,0BAClB,QAAA,SAkBiB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAC,SAAA,QAAA,eAhBS,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAD,aAAA,QAAA,cAAA;CAAA,MAAA,UAAAC,SAAA,QAAA,kBAEC,GAAC,KAAA,IAAA;CAAA,MAAA,UAAAD,aAAA,QAAA,WACrB,CAAC;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAYR,OAAIE,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,KAAK,MAAM;CACjB,MAAM,UAAU,GAAG,GAAE;CACrB,MAAM,YAAY,GAAG,GAAE;CACvB,IAAI,SAAMC,WAAwC,IAAI;CACtD,IAAI,QAAKA,WAAkC,IAAI;CAE/C,IAAI,OAAIC,IAA+E,IAAI;CAC3F,IAAI;CACJ,IAAI;CACJ,MAAM,UAAU,iBACd,KAAA,QACC,SAAU,KAAA,QAAO,YAClB,aAAA,KACF;CAEA,IAAI;CAEJ,MAAM,aAAa,MAAA,MAAM,MAAK,QAAA,OAAU,GAAG,MAAA,MAAM,SAAS,CAAC;CAC3D,MAAM,aAAa,QAAA,SAAW,MAAA,MAAM,SAAS;CAG7C,SAAS,OAAO;EACd,IAAI,CAAA,OAAA,SAAW,OAAA,MAAO,MAAM;EAC5B,UAAU,gBAAe,OAAA,KAAO;CAClC;;CAGA,eAAe,SAAS;EACtB,aAAa;EACb,aAAa,KAAA;EACb,MAAM,SAAS;EACf,MAAM,SAAS,cAAc,KAAK,CAAC,EAAE,MAAM;EAC3C,IAAI,CAAA,MAAA,OAAQ;EACZ,IAAI,CAAC,QAAQ;GACX,KAAA,QAAO;GAEP,OAAO,OAAO,MAAA,MAAM,OAAO;IAAE,MAAM;IAAI,KAAK;IAAI,YAAY;IAAI,iBAAiB;GAAG,CAAC;GACrF,MAAA,MAAM,MAAM,EAAE,eAAe,KAAK,CAAC;GACnC;EACF;EACA,OAAO,eAAe;GAAE,OAAO;GAAU,QAAQ;EAAU,CAAC;EAC5D,MAAM,WAAW,eAAe,QAAM,MAAA,OAAS;GAC7C,WAAW,KAAK,CAAC,EAAE,aAAa;GAChC,QAAQ,QAAA,QAAU;GAClB,mBAAmB;EACrB,CAAC;EACD,MAAM,gBAAgB,WAAW,QAAM,MAAA,aAAe;GACpD,MAAM,MAAM,OAAO,sBAAsB;GACzC,KAAA,QAAO;IACL,MAAM,IAAI,OAAI,QAAA;IACd,KAAK,IAAI,MAAG,QAAA;IACZ,OAAO,IAAI,QAAQ,QAAA,QAAU;IAC7B,QAAQ,IAAI,SAAS,QAAA,QAAU;GACjC;EACF,CAAC;EACD,mBAAmB;GACjB,SAAS,KAAK;GACd,cAAc;EAChB;EACA,MAAM,SAAS;EACf,MAAA,MAAM,MAAM,EAAE,eAAe,KAAK,CAAC;CACrC;CAEA,SAAS,MAAM,QAAiC,OAAe;EAC7D,UAAU;GAAE;GAAQ;EAAM;EAC1B,OAAA,OAAQ,MAAM;CAChB;CAGA,SAAS,UAAU;EACjB,aAAa;EACb,aAAa,KAAA;EACb,UAAU;EACV,UAAU,KAAA;EACV,MAAM,EAAE,QAAQ,UAAU,WAAW,EAAE,QAAQ,SAAS;EACxD,UAAU,KAAA;EACV,QAAQ,OAAO,QAAQ,KAAK;CAC9B;CAEA,SAAS,KAAK,OAAe;EAC3B,IAAI,CAAC,KAAK,GAAG;GACX,QAAA;GACA;EACF;EACA,MAAM,WAAW,KAAK;EACtB,SAAA,QAAW;CACb;;CAGA,SAAS,UAAU,OAAsB;EACvC,IAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,aAAa;EAC7D,IAAI,MAAM,UAAU,MAAM,WAAW,MAAM,WAAW,MAAM,UAAU;EACtE,IAAI,WAAW,MAAM,MAAM,GAAG;EAC9B,MAAM,UAAW,MAAM,QAAQ,kBAAmB,MAAA,UAAU,QAAQ,MAAK,MAAA,KAAM;EAC/E,IAAI,WAAW,CAAC,UAAA,OAAW,UAAU,KAAK,KAAK;OAC1C,IAAI,CAAC,WAAW,QAAA,QAAU,GAAG,QAAA;OAC7B;EACL,MAAM,eAAe;CACvB;CAEA,aAAc;EACZ,IAAA,KAAA,OAAU,KAAK;OACV,IAAI,OAAA,OAAQ,MAAM,OAAA,MAAO,MAAM;CACtC,CAAC;CAED,aAAc;EACZ,QAAA;EACA,IAAA,KAAA,OAAU,OAAY;CACxB,CAAC;CACD,sBAAsB;EACpB,aAAa;EACb,UAAU;CACZ,CAAC;CAED,aAAa;EACX,MAAM,cAAc,KAAK;EACzB,OAAAC,YAAA,UAAAC,WAEQ,WAAqB,EAAE,IAAI,WAAW,KAAK,GAAG,MAAM;GACtD,KAAG;GACH,mBAAmB;GACnB,oBAAoB,aAAa,WAAW,OAAO,YAAY,KAAA;GAC/D;GACA;EACF,CAAC,GAAC,EAAA,aAAA,QAAA,MAAA,CAAA,GAAA,CAAAD,YAAA,OAII,WACF,EACE,IAAI,CACF,WAAW,WACX,KAAA,QAAA,IAAA,KACI,kBAAkB,YAAI;GAAC,KAAA,MAAK;GAAM,KAAA,MAAK;GAAK,KAAA,MAAK;GAAO,KAAA,MAAK;EAAM,GAAA,IAAA,IACnE,WAAW,MAAM,EAEzB,GAAC,eAAA,OAED,EAAE,eAAe,KAAK,CACxB,GAAC,IAAA,GAEF,eAAWA,YAAA,OAEJ,WACF,EACE,IAAI;GACF,eAAe;GACf,eAAe;GACf,WAAW;GAAK,IAAA,aAChB,CAAA,KAAA,SAAS,WAAW,UAAQ,IAAA;EAAA,EAEhC,GAAC,WAAA,OAED;GAAE,KAAG;GAAiB,UAAU;EAAG,CACrC,GAAC;GAEA,YAAY,SAAS,QAAIA,YAAA,OACf,WAAkB,EAAE,IAAI,WAAW,MAAM,GAAC,WAAA,KAAY,GAAC,CAC7D,YAAY,KAAK,CAAA;GAErBA,YAAA,IAEK,eAA6B;IAAE,MAAM;IAAM,IAAI,WAAW;GAAM,GAAC,WAAA,OAAc,EACjF,IAAI,QACN,CAAC,GAAC,EAAA,eAAA,CAED,YAAY,KAAK,EAAA,CAAA;GAEnB,YAAY,WAAW,QAAIA,YAAA,OAEpB,WAAkB,EAAE,IAAI,WAAW,QAAQ,GAAC,aAAA,OAAgB,EAC9D,IAAI,UACN,CAAC,GAAC,CAED,YAAY,OAAO,CAAA;GAEvBA,YAAA,MAAAC,WAEK,eACF;IAAE,OAAO;IAAU,KAAK;IAAM,MAAM;IAAM,IAAI,WAAW;GAAO,GAAC,YAAA,KAEnE,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA;KAAAD,YAAAE,QAAAD,WAGK,eACF;MAAE,MAAM;MAAM,MAAM;MAAS,IAAI,WAAW;KAAS,GAAC,cAAA,KAExD,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;MAAA,eAAA,CAEA,KAAK,aAAa,QAAA,QAAU,GAAG,MAAA,MAAM,MAAM,CAAC;MAAA,SAAA;KAAA,CAAA;KAE9C,CAAC,KAAK,KAACD,YAAA,QAAAC,WAEA,eACF;MAAE,SAAS;MAAS,MAAM;MAAW,MAAM;KAAK,GAAC,UAAA,OAEjD,EAAE,UAAU,UAAsB,MAAM,SAAS,KAAK,EAAE,CAC1D,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;MAAA,eAAA,CAEA,KAAK,QAAQ;MAAA,SAAA;KAAA,CAAA;KAGjB,QAAA,QAAU,KAACD,YAAA,QAAAC,WAEJ,eACF;MAAE,SAAS;MAAW,MAAM;KAAK,GAAC,cAAA,OAElC,EAAE,eAAe,QAAA,QAAU,CAC7B,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;MAAA,eAAA,CAEA,KAAK,YAAY;MAAA,SAAA;KAAA,CAAA;KAErBD,YAAA,QAAAC,WAEK,eAA4B,EAAE,MAAM,KAAK,GAAC,UAAA,OAAa,EAAE,SAAS,KAAK,CAAC,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;MAAA,eAAA,CAE5E,KAAK,IAAI,KAAK,aAAa,KAAK,QAAQ;MAAA,SAAA;KAAA,CAAA;IAAA;IAAA,SAAA;GAAA,CAAA;EAAA,CAAA,CAIhD,CAAA;CAGP;AACF,GACA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;CAAE,MAAM;AAAO,CACjB"}

package/dist/overlay/detached.d.ts

@@ -0,0 +1,40 @@
+import { type VNodeChild } from 'vue';
+import type { OpenChangeProps, OpenChangeReasons } from '../utils/dom/open-change';
+/** 交给对话框内容的控制：开着没有、关上了 */
+export interface DetachedDialogHost {
+    /** 对话框开着：对话框写 _open={host.open}，改成 false 就关上 */
+    open: boolean;
+    /** 对话框关上了（原生 close 事件里调用）：等离场过渡播完卸载 */
+    closed: () => void;
+}
+/** 在 setup 里调用，返回 mount(content)：把对话框渲染到组件树之外 */
+export declare function useDetachedDialog(): (content: (host: DetachedDialogHost) => VNodeChild) => void;
+/** 命令式浮层（useDialog、useDrawer）的选项：浮层的属性（_open 由句柄管理），content 是正文 */
+export type DetachedOverlayOptions<P> = Omit<P, '_open' | 'children'> & {
+    /** 正文；给函数时拿到句柄，正文里的按钮可以自己关上、改标题 */
+    content?: VNodeChild | ((handle: DetachedOverlayHandle<P>) => VNodeChild);
+};
+/** useDialog().open、useDrawer().open 返回的句柄；方法不依赖 this，可以直接传出去（onSaved={handle.close}） */
+export interface DetachedOverlayHandle<P> {
+    /** 关上（onOpenChange 的原因是 imperative）；已经关上时什么也不做 */
+    readonly close: () => void;
+    /** 改属性（标题、宽度、确认按钮的文字、正文……），没写的保持不变 */
+    readonly update: (patch: Partial<DetachedOverlayOptions<P>>) => void;
+    /** 关上之后 resolve，得到关上的原因：确认是 confirm，Esc、遮罩、关闭按钮、close() 各是 escape、outside、close、imperative */
+    readonly closed: Promise<keyof OpenChangeReasons>;
+}
+/** 原生 dialog 的 close 事件 */
+type DialogCloseEvent = Event & {
+    currentTarget: HTMLDialogElement;
+};
+/** 浮层要支持的：onOpenChange 报告原因，onClose 落到原生 dialog 上 */
+interface DetachedOverlayProps extends OpenChangeProps {
+    onClose?: (event: DialogCloseEvent) => void;
+}
+/**
+ * 命令式浮层：在 setup 里调用，返回 open(options)。renderOverlay 把属性、开关与正文交给具体的浮层（Dialog、Drawer）：
+ *
+ *   useDetachedOverlay<DialogProps>((props, host, children) => <Dialog {...props} _open={host.open}>{children}</Dialog>);
+ */
+export declare function useDetachedOverlay<P extends DetachedOverlayProps>(renderOverlay: (props: Omit<P, '_open' | 'children'>, host: DetachedDialogHost, children: VNodeChild) => VNodeChild): (options: DetachedOverlayOptions<P>) => DetachedOverlayHandle<P>;
+export {};

package/dist/overlay/detached.js

@@ -0,0 +1,109 @@
+import { ConfigContext, useConfig } from "../config/context.js";
+import { afterTransitions } from "../utils/style/transitions.js";
+import { ConfigScope } from "../config/Provider.js";
+import { createVNode, getCurrentInstance, h, isVNode, ref, render, shallowRef } from "vue";
+import { _component } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/overlay/detached.tsx
+/**
+* 命令式的对话框（useConfirm、useFormDialog、useDialog、useDrawer）共用的挂载：对话框渲染到 body 末尾、组件树之外，
+* 沿用调用处的配置（主题、语言、默认值，经 ConfigScope）与应用上下文（全局组件）；关上后等离场过渡播完再卸载。
+*
+*   const mount = useDetachedDialog();          // setup 里
+*   mount((host) => <Dialog _open={host.open} onClose={host.closed}>…</Dialog>);
+*
+* useDetachedOverlay 在它上面加一层句柄（close、update、closed），useDialog、useDrawer 用它。
+*/
+/** 交给对话框内容的控制：开着没有、关上了 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** 在 setup 里调用，返回 mount(content)：把对话框渲染到组件树之外 */
+function useDetachedDialog() {
+	const config = useConfig();
+	const appContext = getCurrentInstance()?.appContext ?? null;
+	return (content) => {
+		const container = document.createElement("div");
+		document.body.append(container);
+		function unmount() {
+			const dialog = container.querySelector("dialog");
+			(dialog ? afterTransitions(dialog) : Promise.resolve()).then(() => {
+				render(null, container);
+				container.remove();
+			});
+		}
+		const vnode = h(/* @__PURE__ */ _component(() => {
+			ConfigContext.provide(config);
+			let open = ref(true);
+			const host = {
+				get open() {
+					return open.value;
+				},
+				set open(value) {
+					open.value = value;
+				},
+				closed: unmount
+			};
+			return () => {
+				let _slot;
+				return createVNode(ConfigScope, null, _isSlot(_slot = content(host)) ? _slot : { default: () => [_slot] });
+			};
+		}, { name: "DetachedDialog" }));
+		vnode.appContext = appContext;
+		render(vnode, container);
+	};
+}
+/** 命令式浮层（useDialog、useDrawer）的选项：浮层的属性（_open 由句柄管理），content 是正文 */
+/** useDialog().open、useDrawer().open 返回的句柄；方法不依赖 this，可以直接传出去（onSaved={handle.close}） */
+/** 原生 dialog 的 close 事件 */
+/** 浮层要支持的：onOpenChange 报告原因，onClose 落到原生 dialog 上 */
+/**
+* 命令式浮层：在 setup 里调用，返回 open(options)。renderOverlay 把属性、开关与正文交给具体的浮层（Dialog、Drawer）：
+*
+*   useDetachedOverlay<DialogProps>((props, host, children) => <Dialog {...props} _open={host.open}>{children}</Dialog>);
+*/
+function useDetachedOverlay(renderOverlay) {
+	const mount = useDetachedDialog();
+	return (options) => {
+		const state = shallowRef(options);
+		let host;
+		let reason = "imperative";
+		let resolveClosed;
+		const handle = {
+			close: () => {
+				if (!host?.open) return;
+				reason = "imperative";
+				host.open = false;
+				state.value.onOpenChange?.(false, { reason });
+			},
+			update: (patch) => {
+				state.value = {
+					...state.value,
+					...patch
+				};
+			},
+			closed: new Promise((resolve) => resolveClosed = resolve)
+		};
+		mount((current) => {
+			host = current;
+			const { content, onOpenChange, onClose, ...props } = state.value;
+			return renderOverlay({
+				...props,
+				onOpenChange: (open, details) => {
+					if (!open) reason = details.reason;
+					onOpenChange?.(open, details);
+				},
+				onClose: (event) => {
+					onClose?.(event);
+					queueMicrotask(() => resolveClosed(reason));
+					current.closed();
+				}
+			}, current, typeof content === "function" ? content(handle) : content);
+		});
+		options.onOpenChange?.(true, { reason: "imperative" });
+		return handle;
+	};
+}
+//#endregion
+export { useDetachedDialog, useDetachedOverlay };
+
+//# sourceMappingURL=detached.js.map

package/dist/overlay/detached.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detached.js","names":["_isVNode","_vue_ref","_createVNode"],"sources":["../../src/overlay/detached.tsx"],"sourcesContent":["/**\n * 命令式的对话框（useConfirm、useFormDialog、useDialog、useDrawer）共用的挂载：对话框渲染到 body 末尾、组件树之外，\n * 沿用调用处的配置（主题、语言、默认值，经 ConfigScope）与应用上下文（全局组件）；关上后等离场过渡播完再卸载。\n *\n *   const mount = useDetachedDialog();          // setup 里\n *   mount((host) => <Dialog _open={host.open} onClose={host.closed}>…</Dialog>);\n *\n * useDetachedOverlay 在它上面加一层句柄（close、update、closed），useDialog、useDrawer 用它。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { getCurrentInstance, h, render, shallowRef, type VNodeChild } from 'vue';\nimport { ConfigContext, useConfig } from '../config/context';\nimport { ConfigScope } from '../config/Provider';\nimport type { OpenChangeProps, OpenChangeReasons } from '../utils/dom/open-change';\nimport { afterTransitions } from '../utils/style/transitions';\n\n/** 交给对话框内容的控制：开着没有、关上了 */\nexport interface DetachedDialogHost {\n  /** 对话框开着：对话框写 _open={host.open}，改成 false 就关上 */\n  open: boolean;\n  /** 对话框关上了（原生 close 事件里调用）：等离场过渡播完卸载 */\n  closed: () => void;\n}\n\n/** 在 setup 里调用，返回 mount(content)：把对话框渲染到组件树之外 */\nexport function useDetachedDialog(): (content: (host: DetachedDialogHost) => VNodeChild) => void {\n  // 在 setup 里记下配置与应用上下文：对话框挂在组件树之外，要靠它们拿到主题、语言、全局组件\n  const config = useConfig();\n  const appContext = getCurrentInstance()?.appContext ?? null;\n\n  return (content) => {\n    const container = document.createElement('div');\n    document.body.append(container);\n\n    function unmount() {\n      const dialog = container.querySelector('dialog');\n      void (dialog ? afterTransitions(dialog) : Promise.resolve()).then(() => {\n        render(null, container);\n        container.remove();\n      });\n    }\n\n    const Host = _component(\n      () => {\n        ConfigContext.provide(config);\n        let open = _state(true);\n        const host: DetachedDialogHost = {\n          get open() {\n            return open;\n          },\n          set open(value) {\n            open = value;\n          },\n          closed: unmount,\n        };\n        return () => <ConfigScope>{content(host)}</ConfigScope>;\n      },\n      { name: 'DetachedDialog' },\n    );\n\n    const vnode = h(Host);\n    vnode.appContext = appContext;\n    render(vnode, container);\n  };\n}\n\n/** 命令式浮层（useDialog、useDrawer）的选项：浮层的属性（_open 由句柄管理），content 是正文 */\nexport type DetachedOverlayOptions<P> = Omit<P, '_open' | 'children'> & {\n  /** 正文；给函数时拿到句柄，正文里的按钮可以自己关上、改标题 */\n  content?: VNodeChild | ((handle: DetachedOverlayHandle<P>) => VNodeChild);\n};\n\n/** useDialog().open、useDrawer().open 返回的句柄；方法不依赖 this，可以直接传出去（onSaved={handle.close}） */\nexport interface DetachedOverlayHandle<P> {\n  /** 关上（onOpenChange 的原因是 imperative）；已经关上时什么也不做 */\n  readonly close: () => void;\n  /** 改属性（标题、宽度、确认按钮的文字、正文……），没写的保持不变 */\n  readonly update: (patch: Partial<DetachedOverlayOptions<P>>) => void;\n  /** 关上之后 resolve，得到关上的原因：确认是 confirm，Esc、遮罩、关闭按钮、close() 各是 escape、outside、close、imperative */\n  readonly closed: Promise<keyof OpenChangeReasons>;\n}\n\n/** 原生 dialog 的 close 事件 */\ntype DialogCloseEvent = Event & { currentTarget: HTMLDialogElement };\n\n/** 浮层要支持的：onOpenChange 报告原因，onClose 落到原生 dialog 上 */\ninterface DetachedOverlayProps extends OpenChangeProps {\n  onClose?: (event: DialogCloseEvent) => void;\n}\n\n/**\n * 命令式浮层：在 setup 里调用，返回 open(options)。renderOverlay 把属性、开关与正文交给具体的浮层（Dialog、Drawer）：\n *\n *   useDetachedOverlay<DialogProps>((props, host, children) => <Dialog {...props} _open={host.open}>{children}</Dialog>);\n */\nexport function useDetachedOverlay<P extends DetachedOverlayProps>(\n  renderOverlay: (\n    props: Omit<P, '_open' | 'children'>,\n    host: DetachedDialogHost,\n    children: VNodeChild,\n  ) => VNodeChild,\n): (options: DetachedOverlayOptions<P>) => DetachedOverlayHandle<P> {\n  const mount = useDetachedDialog();\n  return (options) => {\n    const state = shallowRef(options);\n    let host: DetachedDialogHost | undefined;\n    let reason: keyof OpenChangeReasons = 'imperative';\n    let resolveClosed!: (reason: keyof OpenChangeReasons) => void;\n    const handle: DetachedOverlayHandle<P> = {\n      close: () => {\n        if (!host?.open) return;\n        reason = 'imperative';\n        host.open = false;\n        state.value.onOpenChange?.(false, { reason });\n      },\n      update: (patch) => {\n        state.value = { ...state.value, ...patch };\n      },\n      closed: new Promise((resolve) => (resolveClosed = resolve)),\n    };\n    mount((current) => {\n      host = current;\n      const { content, onOpenChange, onClose, ...props } = state.value;\n      const overlayProps = {\n        ...props,\n        onOpenChange: (open, details) => {\n          if (!open) reason = details.reason;\n          onOpenChange?.(open, details);\n        },\n        onClose: (event: DialogCloseEvent) => {\n          onClose?.(event);\n          // 原生 close 事件先到这里、后到浮层自己（它在那里报告原因）：等它报告完再 resolve\n          queueMicrotask(() => resolveClosed(reason));\n          current.closed();\n        },\n      } as Omit<P, '_open' | 'children'> & DetachedOverlayProps;\n      return renderOverlay(\n        overlayProps,\n        current,\n        typeof content === 'function' ? content(handle) : content,\n      );\n    });\n    options.onOpenChange?.(true, { reason: 'imperative' });\n    return handle;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AASA,SAAgB,oBAAiF;CAE/F,MAAM,SAAS,UAAU;CACzB,MAAM,aAAa,mBAAmB,CAAC,EAAE,cAAc;CAEvD,QAAQ,YAAY;EAClB,MAAM,YAAY,SAAS,cAAc,KAAK;EAC9C,SAAS,KAAK,OAAO,SAAS;EAE9B,SAAS,UAAU;GACjB,MAAM,SAAS,UAAU,cAAc,QAAQ;GAC/C,CAAM,SAAS,iBAAiB,MAAM,IAAI,QAAQ,QAAQ,EAAA,CAAG,WAAW;IACtE,OAAO,MAAM,SAAS;IACtB,UAAU,OAAO;GACnB,CAAC;EACH;EAoBA,MAAM,QAAQ,EAlBD,iCACL;GACJ,cAAc,QAAQ,MAAM;GAC5B,IAAI,OAAIC,IAAU,IAAI;GACtB,MAAM,OAA2B;IAC/B,IAAI,OAAO;KACT,OAAA,KAAA;IACF;IACA,IAAI,KAAK,OAAO;KACd,KAAA,QAAO;IACT;IACA,QAAQ;GACV;GACA,aAAO;IAAA,IAAA;IAAA,OAAAC,YAAA,aAAA,MAAA,QAAA,QAAoB,QAAQ,IAAI,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;GAAA;EAC1C,GACA,EAAE,MAAM,iBAAiB,CAGX,CAAI;EACpB,MAAM,aAAa;EACnB,OAAO,OAAO,SAAS;CACzB;AACF;;;;;;;;;;AA+BA,SAAgB,mBACd,eAKkE;CAClE,MAAM,QAAQ,kBAAkB;CAChC,QAAQ,YAAY;EAClB,MAAM,QAAQ,WAAW,OAAO;EAChC,IAAI;EACJ,IAAI,SAAkC;EACtC,IAAI;EACJ,MAAM,SAAmC;GACvC,aAAa;IACX,IAAI,CAAC,MAAM,MAAM;IACjB,SAAS;IACT,KAAK,OAAO;IACZ,MAAM,MAAM,eAAe,OAAO,EAAE,OAAO,CAAC;GAC9C;GACA,SAAS,UAAU;IACjB,MAAM,QAAQ;KAAE,GAAG,MAAM;KAAO,GAAG;IAAM;GAC3C;GACA,QAAQ,IAAI,SAAS,YAAa,gBAAgB,OAAQ;EAC5D;EACA,OAAO,YAAY;GACjB,OAAO;GACP,MAAM,EAAE,SAAS,cAAc,SAAS,GAAG,UAAU,MAAM;GAc3D,OAAO,cACL;IAbA,GAAG;IACH,eAAe,MAAM,YAAY;KAC/B,IAAI,CAAC,MAAM,SAAS,QAAQ;KAC5B,eAAe,MAAM,OAAO;IAC9B;IACA,UAAU,UAA4B;KACpC,UAAU,KAAK;KAEf,qBAAqB,cAAc,MAAM,CAAC;KAC1C,QAAQ,OAAO;IACjB;GAGA,GACA,SACA,OAAO,YAAY,aAAa,QAAQ,MAAM,IAAI,OACpD;EACF,CAAC;EACD,QAAQ,eAAe,MAAM,EAAE,QAAQ,aAAa,CAAC;EACrD,OAAO;CACT;AACF"}

package/dist/patterns/ActionBar.d.ts

@@ -0,0 +1,29 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到外层 div 上 */
+export interface ActionBarProps extends PartProps<'div'> {
+    /** 起始边的内容：未保存的改动、已选几项、校验汇总 */
+    start?: VNodeChild;
+    /**
+     * 贴在滚动区域的底边，默认 true；false 时是普通的一行（如对话框里已经固定的底栏）
+     * @default true
+     */
+    sticky?: boolean;
+    /** 起始边内容的部件属性 */
+    propsStart?: PartProps<'div'>;
+    /** 按钮区的部件属性 */
+    propsActions?: PartProps<'div'>;
+    /** 按钮：靠结束边排开 */
+    children?: VNodeChild;
+}
+/** ActionBar 的样式：root、sticky、stuck、start、actions */
+export declare const actionBarStyles: Readonly<{
+    actions: css.CompiledStyles;
+    root: css.CompiledStyles;
+    start: css.CompiledStyles;
+    sticky: css.CompiledStyles;
+    stuck: css.CompiledStyles;
+}>;
+/** 吸底的操作栏：起始边的说明、结束边的按钮；盖着下面的内容时带阴影 */
+export declare const ActionBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ActionBarProps>;

package/dist/patterns/ActionBar.js

@@ -0,0 +1,75 @@
+import { t } from "../config/theme/tokens.js";
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { useIntersectionObserver } from "../utils/dom/intersection.js";
+import { createVNode, mergeProps, ref, shallowRef } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/patterns/ActionBar.tsx
+/** 未声明的属性落到外层 div 上 */
+/** ActionBar 的样式：root、sticky、stuck、start、actions */
+var actionBarStyles = css.create({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: "_md",
+		paddingBlock: "_md",
+		paddingInline: "_lg",
+		borderBlockStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_borderMuted",
+		backgroundColor: "_surface",
+		transition: `box-shadow ${t.durations.md} ${t.easings.standard}`
+	},
+	sticky: {
+		position: "sticky",
+		insetBlockEnd: `calc(-1 * ${t.borderWidths.xs})`,
+		zIndex: 1
+	},
+	stuck: {
+		boxShadow: "_md",
+		borderBlockStartColor: "_border"
+	},
+	start: {
+		flexGrow: 1,
+		minWidth: 0,
+		color: "_textMuted",
+		fontSize: "0.93em"
+	},
+	actions: {
+		display: "flex",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: "_sm",
+		marginInlineStart: "auto"
+	}
+});
+/** 吸底的操作栏：起始边的说明、结束边的按钮；盖着下面的内容时带阴影 */
+var ActionBar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const start = readonlyProp(_props, "start");
+	const sticky = readonlyProp(_props, "sticky", true);
+	const propsStart = readonlyProp(_props, "propsStart");
+	const propsActions = readonlyProp(_props, "propsActions");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	let root = shallowRef(null);
+	let stuck = ref(false);
+	useIntersectionObserver(() => sticky.value ? root.value : null, ([entry]) => stuck.value = !!entry && entry.isIntersecting && entry.intersectionRatio < 1, () => ({ threshold: [0, 1] }));
+	return () => createVNode("div", mergeProps(mergeAttrs({ sx: [
+		actionBarStyles.root,
+		sticky.value && actionBarStyles.sticky,
+		sticky.value && stuck.value && actionBarStyles.stuck
+	] }, rest, { ref: root }), { "data-stuck": sticky.value && stuck.value || void 0 }), [hasContent(start.value) && createVNode("div", mergeAttrs({ sx: actionBarStyles.start }, propsStart.value), [start.value]), createVNode("div", mergeAttrs({ sx: actionBarStyles.actions }, propsActions.value), [children.value])]);
+}, {
+	name: "ActionBar",
+	props: [
+		"start",
+		"sticky",
+		"propsStart",
+		"propsActions"
+	]
+});
+//#endregion
+export { ActionBar, actionBarStyles };
+
+//# sourceMappingURL=ActionBar.js.map

package/dist/patterns/ActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/patterns/ActionBar.tsx"],"sourcesContent":["/**\n * 吸底的操作栏（div）：长表单、详情页底部的“取消 / 保存草稿 / 提交”，滚动时一直贴在滚动区域的底边，不用滚到底才能提交。\n *\n *   <ActionBar start={form.dirty ? '有未保存的改动' : undefined}>\n *     <Button variant=\"ghost\" tone=\"neutral\">取消</Button>\n *     <Button type=\"submit\" loading={form.submitting}>提交</Button>\n *   </ActionBar>\n *\n * 放在要跟着滚动的内容的最后（表单里、卡片里、页面主区里都行）：position: sticky 贴着最近的滚动容器的底边。\n * 下面还有被盖住的内容时（贴在底边、还没滚到它原本的位置）带阴影、data-stuck，提示还能往下滚；滚到底时与内容平齐。\n * start 是起始边的说明（未保存的改动、校验汇总），children 是结束边的按钮。\n *\n * 部件：Root（div）、Start（div）、Actions（div）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useIntersectionObserver } from '../utils/dom/intersection';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ActionBarProps extends PartProps<'div'> {\n  /** 起始边的内容：未保存的改动、已选几项、校验汇总 */\n  start?: VNodeChild;\n  /**\n   * 贴在滚动区域的底边，默认 true；false 时是普通的一行（如对话框里已经固定的底栏）\n   * @default true\n   */\n  sticky?: boolean;\n  /** 起始边内容的部件属性 */\n  propsStart?: PartProps<'div'>;\n  /** 按钮区的部件属性 */\n  propsActions?: PartProps<'div'>;\n  /** 按钮：靠结束边排开 */\n  children?: VNodeChild;\n}\n\n/** ActionBar 的样式：root、sticky、stuck、start、actions */\nexport const actionBarStyles = css.create({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '_md',\n    paddingBlock: '_md',\n    paddingInline: '_lg',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    backgroundColor: '_surface',\n    transition: `box-shadow ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 往下多出一条线宽：贴着底边时有 1px 在滚动区域外，交叉比例小于 1，据此判断“盖着下面的内容”\n  sticky: { position: 'sticky', insetBlockEnd: `calc(-1 * ${t.borderWidths.xs})`, zIndex: 1 },\n  // 盖着下面的内容：阴影提示还能往下滚\n  stuck: { boxShadow: '_md', borderBlockStartColor: '_border' },\n  // 说明文字比所在文字小一档（0.93em ≈ 默认字号下的 sm）\n  start: { flexGrow: 1, minWidth: 0, color: '_textMuted', fontSize: '0.93em' },\n  actions: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '_sm',\n    marginInlineStart: 'auto',\n  },\n});\n\n/** 吸底的操作栏：起始边的说明、结束边的按钮；盖着下面的内容时带阴影 */\nexport const ActionBar = _component(\n  ({ start, sticky = true, propsStart, propsActions, children, ...rest }: ActionBarProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    let stuck = _state(false);\n\n    // 贴着底边时栏有一条线宽露在滚动区域外（见 sticky 样式）：没有完整可见就是盖着下面的内容\n    useIntersectionObserver(\n      () => (sticky ? root : null),\n      ([entry]) => (stuck = !!entry && entry.isIntersecting && entry.intersectionRatio < 1),\n      () => ({ threshold: [0, 1] }),\n    );\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              actionBarStyles.root,\n              sticky && actionBarStyles.sticky,\n              sticky && stuck && actionBarStyles.stuck,\n            ],\n          },\n          rest,\n          { ref: _toRef(root) },\n        )}\n        data-stuck={(sticky && stuck) || undefined}\n      >\n        {hasContent(start) && (\n          <div {...mergeAttrs<'div'>({ sx: actionBarStyles.start }, propsStart)}>{start}</div>\n        )}\n        <div {...mergeAttrs<'div'>({ sx: actionBarStyles.actions }, propsActions)}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAuCA,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,cAAc;EACd,eAAe;EACf,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;EACvB,iBAAiB;EACjB,YAAY,cAAc,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACxD;CAEA,QAAQ;EAAE,UAAU;EAAU,eAAe,aAAa,EAAE,aAAa,GAAE;EAAK,QAAQ;CAAE;CAE1F,OAAO;EAAE,WAAW;EAAO,uBAAuB;CAAU;CAE5D,OAAO;EAAE,UAAU;EAAG,UAAU;EAAG,OAAO;EAAc,UAAU;CAAS;CAC3E,SAAS;EACP,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,mBAAmB;CACrB;AACF,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAA2F;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAAxE,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAyC,OAAIC,UAAA,QAAA,MAAA,KAAA;CAClE,IAAI,OAAIC,WAAkC,IAAI;CAC9C,IAAI,QAAKC,IAAU,KAAK;CAGxB,8BACS,OAAA,QAAA,KAAA,QAAgB,OACtB,CAAC,WAAY,MAAA,QAAQ,CAAC,CAAC,SAAS,MAAM,kBAAkB,MAAM,oBAAoB,UAC5E,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,EAC7B;CAEA,aAAOC,YAAA,OAAAC,WAEC,WACF,EACE,IAAI;EACF,gBAAgB;EAChB,OAAA,SAAU,gBAAgB;EAC1B,OAAA,SAAA,MAAA,SAAmB,gBAAgB;CAAK,EAE5C,GACA,MACA,EAAE,KAAG,KAAe,CACtB,GAAC,EAAA,cACY,OAAA,SAAA,MAAA,SAAoB,KAAA,EAAS,CAAA,GAAA,CAEzC,WAAU,MAAA,KAAM,KAACD,YAAA,OACP,WAAkB,EAAE,IAAI,gBAAgB,MAAM,GAAC,WAAA,KAAY,GAAC,CAAA,MAAA,KAAA,CAAA,GACtEA,YAAA,OACQ,WAAkB,EAAE,IAAI,gBAAgB,QAAQ,GAAC,aAAA,KAAc,GAAC,CAAA,SAAA,KAAA,CAAA,CAAA,CAAA;AAG/E,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}