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

package/dist/overlay/Drawer.d.ts

@@ -0,0 +1,186 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { ContainerSizes } from '../layout/Container';
+import { type ResizeHandleProps } from '../layout/ResizeHandle';
+import { type DetachedOverlayHandle, type DetachedOverlayOptions } from './detached';
+import { type ModalProps } from './ModalCore';
+/** 抽屉从哪一侧滑入；start / end 是逻辑方向，从右到左排版下左右互换 */
+export interface DrawerSides {
+    /** 起始边（从左到右排版时是左侧）：导航菜单 */
+    start: unknown;
+    /** 结束边（默认，从左到右排版时是右侧）：详情、筛选、表单 */
+    end: unknown;
+    /** 顶部 */
+    top: unknown;
+    /** 底部：手机上的操作面板 */
+    bottom: unknown;
+}
+/** 抽屉的外观选项；可以用 createUi / Provider 的 defaults.Drawer 统一改默认值 */
+export interface DrawerOptions {
+    /** 宽度（左右两侧）档位，与 Container 相同，默认 xs（30rem）；上下两侧时高度由内容决定，最多到视口高度 */
+    size?: keyof ContainerSizes;
+    /**
+     * 靠正文的一边可以拖动调整宽度（也能聚焦后用 ← / →，双击回到初始宽度），能一直拖到只剩一窄条、
+     * 让出后面的页面；只用于左右两侧
+     * @default true
+     */
+    resizable?: boolean;
+}
+/** 未声明的属性落到 dialog 上 */
+export interface DrawerProps extends ModalProps, DrawerOptions {
+    /** 从哪一侧滑入，默认 end */
+    side?: keyof DrawerSides;
+    /** 宽度（px，左右两侧）：写了就不按 size 的档位；父级写 _width={x} 记住拖动后的宽度 */
+    _width?: number | null;
+    /**
+     * 拖动时的最小宽度（px）：默认只留一窄条（几乎关上，还能拖回来）；比内容窄时内容被裁掉，不挤成一列
+     * @default 48
+     */
+    minWidth?: number;
+    /** 宽度调整手柄的部件属性 */
+    propsResizeHandle?: Partial<ResizeHandleProps>;
+}
+/**
+ * 抽屉的配方：部件同 ModalCore（base 并进了 modalPartStyles）；root 是 dialog 元素（去掉居中、按所在一侧定位与滑入），
+ * 能拖动调整宽度时标题行、说明、正文、页脚保持最小宽度
+ */
+export declare const drawerRecipe: css.Recipe<"body" | "bodyContent" | "close" | "description" | "footer" | "header" | "root" | "title", {
+    readonly side: {
+        readonly start: {
+            readonly root: {
+                readonly insetBlock: 0;
+                readonly width: "_full";
+                readonly height: "100dvh";
+                readonly overflow: "hidden";
+                readonly insetInlineStart: 0;
+                readonly insetInlineEnd: "auto";
+                readonly borderInlineStartWidth: 0;
+                readonly translate: {
+                    readonly default: "-100% 0";
+                    readonly ':dir(rtl)': "100% 0";
+                    readonly ':modal': {
+                        readonly default: "none";
+                        readonly '@starting-style': {
+                            readonly default: "-100% 0";
+                            readonly ':dir(rtl)': "100% 0";
+                        };
+                    };
+                };
+            };
+        };
+        readonly end: {
+            readonly root: {
+                readonly insetBlock: 0;
+                readonly width: "_full";
+                readonly height: "100dvh";
+                readonly overflow: "hidden";
+                readonly insetInlineStart: "auto";
+                readonly insetInlineEnd: 0;
+                readonly borderInlineEndWidth: 0;
+                readonly translate: {
+                    readonly default: "100% 0";
+                    readonly ':dir(rtl)': "-100% 0";
+                    readonly ':modal': {
+                        readonly default: "none";
+                        readonly '@starting-style': {
+                            readonly default: "100% 0";
+                            readonly ':dir(rtl)': "-100% 0";
+                        };
+                    };
+                };
+            };
+        };
+        readonly top: {
+            readonly root: {
+                readonly insetInline: 0;
+                readonly width: "100vw";
+                readonly height: "auto";
+                readonly top: 0;
+                readonly bottom: "auto";
+                readonly borderBlockStartWidth: 0;
+                readonly translate: {
+                    readonly default: "0 -100%";
+                    readonly ':modal': {
+                        readonly default: "none";
+                        readonly '@starting-style': "0 -100%";
+                    };
+                };
+            };
+        };
+        readonly bottom: {
+            readonly root: {
+                readonly insetInline: 0;
+                readonly width: "100vw";
+                readonly height: "auto";
+                readonly top: "auto";
+                readonly bottom: 0;
+                readonly borderBlockEndWidth: 0;
+                readonly translate: {
+                    readonly default: "0 100%";
+                    readonly ':modal': {
+                        readonly default: "none";
+                        readonly '@starting-style': "0 100%";
+                    };
+                };
+            };
+        };
+    };
+    readonly size: {
+        readonly xs: {
+            readonly root: {
+                readonly maxWidth: `min(${string}, 100vw)`;
+            };
+        };
+        readonly sm: {
+            readonly root: {
+                readonly maxWidth: `min(${string}, 100vw)`;
+            };
+        };
+        readonly md: {
+            readonly root: {
+                readonly maxWidth: `min(${string}, 100vw)`;
+            };
+        };
+        readonly lg: {
+            readonly root: {
+                readonly maxWidth: `min(${string}, 100vw)`;
+            };
+        };
+        readonly xl: {
+            readonly root: {
+                readonly maxWidth: `min(${string}, 100vw)`;
+            };
+        };
+    };
+    readonly resizable: {
+        readonly true: {
+            readonly header: {
+                readonly minWidth: "min(20rem, 100vw - 3rem)";
+            };
+            readonly description: {
+                readonly minWidth: "min(20rem, 100vw - 3rem)";
+            };
+            readonly body: {
+                readonly minWidth: "min(20rem, 100vw - 3rem)";
+            };
+            readonly footer: {
+                readonly minWidth: "min(20rem, 100vw - 3rem)";
+            };
+        };
+    };
+}>;
+/** 抽屉的部件（createUi / Provider 的 styles.Drawer 按它定制） */
+export type DrawerPart = (typeof drawerRecipe.parts)[number];
+/** 抽屉：贴着视口一侧滑入的模态面板 */
+export declare const Drawer: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DrawerProps>;
+/** useDrawer 返回的：open 打开一个抽屉 */
+export interface DrawerApi {
+    /** 打开抽屉：属性同 Drawer（open 由句柄管理），content 是正文；返回句柄 */
+    open(options: DetachedOverlayOptions<DrawerProps>): DetachedOverlayHandle<DrawerProps>;
+}
+/**
+ * 命令式抽屉：在组件 setup 里调用，用法同 useDialog。从表格的一行打开详情、编辑时不必在页面里放一个 Drawer 再管 open：
+ *
+ *   const drawer = useDrawer();
+ *   drawer.open({ title: `订单 ${row.id}`, size: 'md', content: (handle) => <OrderForm id={row.id} onSaved={handle.close} /> });
+ */
+export declare function useDrawer(): DrawerApi;

package/dist/overlay/Drawer.js

@@ -0,0 +1,214 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { useDefaults } from "../config/defaults.js";
+import { useRecipe } from "../config/styles.js";
+import { ResizeHandle } from "../layout/ResizeHandle.js";
+import { useDetachedOverlay } from "./detached.js";
+import { ModalCore, modalPartStyles } from "./ModalCore.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/overlay/Drawer.tsx
+/** 抽屉从哪一侧滑入；start / end 是逻辑方向，从右到左排版下左右互换 */
+/** 抽屉的外观选项；可以用 createUi / Provider 的 defaults.Drawer 统一改默认值 */
+/** 未声明的属性落到 dialog 上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* 抽屉的配方：部件同 ModalCore（base 并进了 modalPartStyles）；root 是 dialog 元素（去掉居中、按所在一侧定位与滑入），
+* 能拖动调整宽度时标题行、说明、正文、页脚保持最小宽度
+*/
+var drawerRecipe = css.recipe({
+	name: "Drawer",
+	parts: [
+		"root",
+		"header",
+		"title",
+		"close",
+		"description",
+		"body",
+		"bodyContent",
+		"footer"
+	],
+	base: {
+		...modalPartStyles,
+		root: {
+			...modalPartStyles.root,
+			margin: 0,
+			maxWidth: "100vw",
+			maxHeight: "100dvh",
+			borderRadius: 0,
+			transition: {
+				default: `translate ${t.durations.md} ${t.easings.exit}, display ${t.durations.md} allow-discrete, overlay ${t.durations.md} allow-discrete`,
+				":modal": `translate ${t.durations.lg} ${t.easings.enter}, display ${t.durations.lg} allow-discrete, overlay ${t.durations.lg} allow-discrete`
+			}
+		}
+	},
+	variants: {
+		side: {
+			start: { root: {
+				insetBlock: 0,
+				width: "_full",
+				height: "100dvh",
+				overflow: "hidden",
+				insetInlineStart: 0,
+				insetInlineEnd: "auto",
+				borderInlineStartWidth: 0,
+				translate: {
+					default: "-100% 0",
+					":dir(rtl)": "100% 0",
+					":modal": {
+						default: "none",
+						"@starting-style": {
+							default: "-100% 0",
+							":dir(rtl)": "100% 0"
+						}
+					}
+				}
+			} },
+			end: { root: {
+				insetBlock: 0,
+				width: "_full",
+				height: "100dvh",
+				overflow: "hidden",
+				insetInlineStart: "auto",
+				insetInlineEnd: 0,
+				borderInlineEndWidth: 0,
+				translate: {
+					default: "100% 0",
+					":dir(rtl)": "-100% 0",
+					":modal": {
+						default: "none",
+						"@starting-style": {
+							default: "100% 0",
+							":dir(rtl)": "-100% 0"
+						}
+					}
+				}
+			} },
+			top: { root: {
+				insetInline: 0,
+				width: "100vw",
+				height: "auto",
+				top: 0,
+				bottom: "auto",
+				borderBlockStartWidth: 0,
+				translate: {
+					default: "0 -100%",
+					":modal": {
+						default: "none",
+						"@starting-style": "0 -100%"
+					}
+				}
+			} },
+			bottom: { root: {
+				insetInline: 0,
+				width: "100vw",
+				height: "auto",
+				top: "auto",
+				bottom: 0,
+				borderBlockEndWidth: 0,
+				translate: {
+					default: "0 100%",
+					":modal": {
+						default: "none",
+						"@starting-style": "0 100%"
+					}
+				}
+			} }
+		},
+		size: {
+			xs: { root: { maxWidth: `min(${t.sizes.xs}, 100vw)` } },
+			sm: { root: { maxWidth: `min(${t.sizes.sm}, 100vw)` } },
+			md: { root: { maxWidth: `min(${t.sizes.md}, 100vw)` } },
+			lg: { root: { maxWidth: `min(${t.sizes.lg}, 100vw)` } },
+			xl: { root: { maxWidth: `min(${t.sizes.xl}, 100vw)` } }
+		},
+		resizable: { true: {
+			header: { minWidth: "min(20rem, 100vw - 3rem)" },
+			description: { minWidth: "min(20rem, 100vw - 3rem)" },
+			body: { minWidth: "min(20rem, 100vw - 3rem)" },
+			footer: { minWidth: "min(20rem, 100vw - 3rem)" }
+		} }
+	}
+});
+/** 抽屉的部件（createUi / Provider 的 styles.Drawer 按它定制） */
+/** 抽屉：贴着视口一侧滑入的模态面板 */
+var Drawer = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const side = readonlyProp(_props, "side", "end");
+	const size = readonlyProp(_props, "size");
+	const width = bindable(_props, "_width", () => null, _ctx.emit);
+	const resizable = readonlyProp(_props, "resizable");
+	const minWidth = readonlyProp(_props, "minWidth", 48);
+	const propsResizeHandle = readonlyProp(_props, "propsResizeHandle");
+	const rest = restProps(_props, _ctx, true);
+	const appearance = useDefaults("Drawer", () => ({
+		size: size.value,
+		resizable: resizable.value
+	}), {
+		size: "xs",
+		resizable: true
+	});
+	const messages = useLang();
+	const recipe = useRecipe(drawerRecipe);
+	const initialWidth = untrack(() => width.value);
+	return () => {
+		const inline = side.value === "start" || side.value === "end";
+		const resizing = inline && appearance().resizable;
+		const s = recipe({
+			side: side.value,
+			size: inline && width.value == null ? appearance().size : void 0,
+			resizable: resizing
+		});
+		return createVNode(ModalCore, mergeProps(rest, {
+			"_open": open.value,
+			"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+			"parts": s,
+			"style": inline && width.value != null ? { width: `${width.value}px` } : void 0,
+			"data-side": side.value,
+			"edge": resizing && createVNode(ResizeHandle, mergeProps({
+				"aria-label": messages.drawerResize,
+				"minWidth": minWidth.value,
+				"maxWidth": typeof window === "undefined" ? void 0 : window.innerWidth - 48,
+				"defaultWidth": initialWidth ?? void 0
+			}, propsResizeHandle.value, {
+				"edge": side.value === "end" ? "start" : "end",
+				"width": width.value ?? void 0,
+				"onWidthChange": _cache[1] || (_cache[1] = (next) => width.value = next)
+			}), null)
+		}), null);
+	};
+}, {
+	name: "Drawer",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"side",
+		"size",
+		"_width",
+		"onUpdate:_width",
+		"resizable",
+		"minWidth",
+		"propsResizeHandle"
+	]
+});
+/** useDrawer 返回的：open 打开一个抽屉 */
+/**
+* 命令式抽屉：在组件 setup 里调用，用法同 useDialog。从表格的一行打开详情、编辑时不必在页面里放一个 Drawer 再管 open：
+*
+*   const drawer = useDrawer();
+*   drawer.open({ title: `订单 ${row.id}`, size: 'md', content: (handle) => <OrderForm id={row.id} onSaved={handle.close} /> });
+*/
+function useDrawer() {
+	return { open: useDetachedOverlay((props, host, children) => createVNode(Drawer, mergeProps(props, {
+		"_open": host.open,
+		"onUpdate:_open": ($event) => host.open = $event
+	}), _isSlot(children) ? children : { default: () => [children] })) };
+}
+//#endregion
+export { Drawer, drawerRecipe, useDrawer };
+
+//# sourceMappingURL=Drawer.js.map

package/dist/overlay/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/overlay/Drawer.tsx"],"sourcesContent":["/**\n * 抽屉：贴着视口一侧滑入的模态面板。内核见 Modal.tsx（与 Dialog、AlertDialog 共用）。\n *\n *   <Drawer _open={filtering} side=\"end\" title=\"筛选\">…</Drawer>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { ContainerSizes } from '../layout/Container';\nimport { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { ResizeHandle, type ResizeHandleProps } from '../layout/ResizeHandle';\nimport {\n  useDetachedOverlay,\n  type DetachedOverlayHandle,\n  type DetachedOverlayOptions,\n} from './detached';\nimport { ModalCore, modalPartStyles, type ModalProps } from './ModalCore';\nimport { t } from '../config/theme/tokens';\n\n/** 抽屉从哪一侧滑入；start / end 是逻辑方向，从右到左排版下左右互换 */\nexport interface DrawerSides {\n  /** 起始边（从左到右排版时是左侧）：导航菜单 */\n  start: unknown;\n  /** 结束边（默认，从左到右排版时是右侧）：详情、筛选、表单 */\n  end: unknown;\n  /** 顶部 */\n  top: unknown;\n  /** 底部：手机上的操作面板 */\n  bottom: unknown;\n}\n\n/** 抽屉的外观选项；可以用 createUi / Provider 的 defaults.Drawer 统一改默认值 */\nexport interface DrawerOptions {\n  /** 宽度（左右两侧）档位，与 Container 相同，默认 xs（30rem）；上下两侧时高度由内容决定，最多到视口高度 */\n  size?: keyof ContainerSizes;\n  /**\n   * 靠正文的一边可以拖动调整宽度（也能聚焦后用 ← / →，双击回到初始宽度），能一直拖到只剩一窄条、\n   * 让出后面的页面；只用于左右两侧\n   * @default true\n   */\n  resizable?: boolean;\n}\n\n/** 未声明的属性落到 dialog 上 */\nexport interface DrawerProps extends ModalProps, DrawerOptions {\n  /** 从哪一侧滑入，默认 end */\n  side?: keyof DrawerSides;\n  /** 宽度（px，左右两侧）：写了就不按 size 的档位；父级写 _width={x} 记住拖动后的宽度 */\n  _width?: number | null;\n  /**\n   * 拖动时的最小宽度（px）：默认只留一窄条（几乎关上，还能拖回来）；比内容窄时内容被裁掉，不挤成一列\n   * @default 48\n   */\n  minWidth?: number;\n  /** 宽度调整手柄的部件属性 */\n  propsResizeHandle?: Partial<ResizeHandleProps>;\n}\n\n/**\n * 抽屉的配方：部件同 ModalCore（base 并进了 modalPartStyles）；root 是 dialog 元素（去掉居中、按所在一侧定位与滑入），\n * 能拖动调整宽度时标题行、说明、正文、页脚保持最小宽度\n */\nexport const drawerRecipe = css.recipe({\n  name: 'Drawer',\n  parts: ['root', 'header', 'title', 'close', 'description', 'body', 'bodyContent', 'footer'],\n  base: {\n    ...modalPartStyles,\n    root: {\n      ...modalPartStyles.root,\n      margin: 0,\n      // 给了 width 时宽度写在行内，最多到视口宽\n      maxWidth: '100vw',\n      maxHeight: '100dvh',\n      borderRadius: 0,\n      // 进场从所在一侧滑入（@starting-style），离场滑回去（allow-discrete，离场过渡目前只有 Chromium）；\n      // “减少动态效果”时时长为 0。打开时 translate 是 none 而不是 0 0：否则抽屉会成为 fixed 子元素\n      // （移进来的 Toaster）的包含块；关闭时不显示，移到所在一侧之外没有这个问题\n      transition: {\n        default: `translate ${t.durations.md} ${t.easings.exit}, display ${t.durations.md} allow-discrete, overlay ${t.durations.md} allow-discrete`,\n        ':modal': `translate ${t.durations.lg} ${t.easings.enter}, display ${t.durations.lg} allow-discrete, overlay ${t.durations.lg} allow-discrete`,\n      },\n    },\n  },\n  variants: {\n    // 左右两侧占满视口高度、宽度看档位，上下两侧占满视口宽度、高度由内容决定。\n    // 位置用逻辑属性，从右到左排版自动换边；translate 是物理方向，用 :dir() 区分\n    side: {\n      start: {\n        root: {\n          insetBlock: 0,\n          width: '_full',\n          height: '100dvh',\n          overflow: 'hidden',\n          insetInlineStart: 0,\n          insetInlineEnd: 'auto',\n          borderInlineStartWidth: 0,\n          translate: {\n            default: '-100% 0',\n            ':dir(rtl)': '100% 0',\n            ':modal': {\n              default: 'none',\n              '@starting-style': { default: '-100% 0', ':dir(rtl)': '100% 0' },\n            },\n          },\n        },\n      },\n      end: {\n        root: {\n          insetBlock: 0,\n          width: '_full',\n          height: '100dvh',\n          overflow: 'hidden',\n          insetInlineStart: 'auto',\n          insetInlineEnd: 0,\n          borderInlineEndWidth: 0,\n          translate: {\n            default: '100% 0',\n            ':dir(rtl)': '-100% 0',\n            ':modal': {\n              default: 'none',\n              '@starting-style': { default: '100% 0', ':dir(rtl)': '-100% 0' },\n            },\n          },\n        },\n      },\n      top: {\n        root: {\n          insetInline: 0,\n          width: '100vw',\n          height: 'auto',\n          top: 0,\n          bottom: 'auto',\n          borderBlockStartWidth: 0,\n          translate: {\n            default: '0 -100%',\n            ':modal': { default: 'none', '@starting-style': '0 -100%' },\n          },\n        },\n      },\n      bottom: {\n        root: {\n          insetInline: 0,\n          width: '100vw',\n          height: 'auto',\n          top: 'auto',\n          bottom: 0,\n          borderBlockEndWidth: 0,\n          translate: {\n            default: '0 100%',\n            ':modal': { default: 'none', '@starting-style': '0 100%' },\n          },\n        },\n      },\n    },\n    // 左右两侧、没给 width 时的宽度档位\n    size: {\n      xs: { root: { maxWidth: `min(${t.sizes.xs}, 100vw)` } },\n      sm: { root: { maxWidth: `min(${t.sizes.sm}, 100vw)` } },\n      md: { root: { maxWidth: `min(${t.sizes.md}, 100vw)` } },\n      lg: { root: { maxWidth: `min(${t.sizes.lg}, 100vw)` } },\n      xl: { root: { maxWidth: `min(${t.sizes.xl}, 100vw)` } },\n    },\n    // 能拖动调整宽度（左右两侧）：拖窄以后内容保持能读的最小宽度，多出来的被面板裁掉\n    resizable: {\n      true: {\n        header: { minWidth: 'min(20rem, 100vw - 3rem)' },\n        description: { minWidth: 'min(20rem, 100vw - 3rem)' },\n        body: { minWidth: 'min(20rem, 100vw - 3rem)' },\n        footer: { minWidth: 'min(20rem, 100vw - 3rem)' },\n      },\n    },\n  },\n});\n\n/** 抽屉的部件（createUi / Provider 的 styles.Drawer 按它定制） */\nexport type DrawerPart = (typeof drawerRecipe.parts)[number];\n\n/** 抽屉：贴着视口一侧滑入的模态面板 */\nexport const Drawer = _component(\n  ({\n    _open: open = _bindable(false),\n    side = 'end',\n    size,\n    _width: width = _bindable<number | null>(null),\n    resizable,\n    minWidth = 48,\n    propsResizeHandle,\n    ...rest\n  }: DrawerProps) => {\n    const appearance = useDefaults('Drawer', () => ({ size, resizable }), {\n      size: 'xs',\n      resizable: true,\n    });\n    const messages = useLang();\n    const recipe = useRecipe(drawerRecipe);\n    // 双击回到打开时的宽度\n    const initialWidth = _untrack(width);\n    return () => {\n      const inline = side === 'start' || side === 'end';\n      const resizing = inline && appearance().resizable;\n      const s = recipe({\n        side,\n        size: inline && width == null ? appearance().size : undefined,\n        resizable: resizing,\n      });\n      return (\n        <ModalCore\n          {...rest}\n          _open={open}\n          parts={s}\n          style={inline && width != null ? { width: `${width}px` } : undefined}\n          data-side={side}\n          edge={\n            resizing && (\n              <ResizeHandle\n                aria-label={messages.drawerResize}\n                minWidth={minWidth}\n                maxWidth={typeof window === 'undefined' ? undefined : window.innerWidth - 48}\n                defaultWidth={initialWidth ?? undefined}\n                {...propsResizeHandle}\n                edge={side === 'end' ? 'start' : 'end'}\n                width={width ?? undefined}\n                onWidthChange={(next: number) => (width = next)}\n              />\n            )\n          }\n        />\n      );\n    };\n  },\n);\n\n/** useDrawer 返回的：open 打开一个抽屉 */\nexport interface DrawerApi {\n  /** 打开抽屉：属性同 Drawer（open 由句柄管理），content 是正文；返回句柄 */\n  open(options: DetachedOverlayOptions<DrawerProps>): DetachedOverlayHandle<DrawerProps>;\n}\n\n/**\n * 命令式抽屉：在组件 setup 里调用，用法同 useDialog。从表格的一行打开详情、编辑时不必在页面里放一个 Drawer 再管 open：\n *\n *   const drawer = useDrawer();\n *   drawer.open({ title: `订单 ${row.id}`, size: 'md', content: (handle) => <OrderForm id={row.id} onSaved={handle.close} /> });\n */\nexport function useDrawer(): DrawerApi {\n  const open = useDetachedOverlay<DrawerProps>((props, host, children) => (\n    <Drawer {...props} _open={host.open}>\n      {children}\n    </Drawer>\n  ));\n  return { open };\n}\n"],"mappings":"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"}

package/dist/overlay/HoverCard.d.ts

@@ -0,0 +1,48 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type FloatingOptions, type FloatingPlacement } from '../utils/dom/floating';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type LazyContentOptions } from '../utils/motion/presence';
+import { type PartProps } from '../utils/props';
+/** 交给触发器的属性：展开到触发元素上（`{...props}`） */
+export interface HoverCardTriggerProps {
+    /** 取得触发器元素：定位的参照 */
+    ref: (element: unknown) => void;
+    /** 指针进入：等 delay 后打开 */
+    onPointerenter: (event: PointerEvent) => void;
+    /** 指针离开：稍后关闭（可以移到卡片上） */
+    onPointerleave: (event: PointerEvent) => void;
+    /** 按下（点击）触发器时关闭 */
+    onPointerdown: (event: PointerEvent) => void;
+    /** 键盘聚焦时立即打开 */
+    onFocus: (event: FocusEvent) => void;
+    /** 焦点离开（不是移进卡片）时关闭 */
+    onBlur: (event: FocusEvent) => void;
+}
+/** 未声明的属性落到卡片的 div 上 */
+export interface HoverCardProps extends PartProps<'div', 'id' | 'popover'>, Pick<FloatingOptions, 'offset'>, LazyContentOptions, OpenChangeProps {
+    /** 是否打开：父级可以写 _open={x} 控制或得知 */
+    _open?: boolean;
+    /** 弹出位置，默认 bottom；空间不够时自动翻转 */
+    placement?: FloatingPlacement;
+    /** 指针停留多久后打开（毫秒），默认 700 */
+    delay?: number;
+    /** 指针离开多久后关闭（毫秒），默认 300 */
+    closeDelay?: number;
+    /** 不打开（触发器照常渲染） */
+    disabled?: boolean;
+    /** 显示指向触发器的箭头 */
+    arrow?: boolean;
+    /** 触发器：`(props) => <Link {...props} … />` */
+    trigger: (props: HoverCardTriggerProps) => VNodeChild;
+    /** 箭头的部件属性 */
+    propsArrow?: PartProps<'span'>;
+    /** 卡片内容 */
+    children?: VNodeChild;
+}
+/** HoverCard 的样式：panel */
+export declare const hoverCardStyles: Readonly<{
+    panel: css.CompiledStyles;
+}>;
+/** 悬停卡片：悬停或键盘聚焦时在触发器旁边显示富内容 */
+export declare const HoverCard: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<HoverCardProps>;

package/dist/overlay/HoverCard.js

@@ -0,0 +1,86 @@
+import { mergeAttrs } from "../utils/props.js";
+import { transitions } from "../utils/style/transitions.js";
+import { useLazyContent } from "../utils/motion/presence.js";
+import { floatingStyles } from "../utils/dom/floating.js";
+import { createHoverGroup } from "../utils/dom/hover-intent.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { useHoverLayer } from "../utils/dom/hover-layer.js";
+import { Fragment, createVNode, mergeProps } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/overlay/HoverCard.tsx
+/** 交给触发器的属性：展开到触发元素上（`{...props}`） */
+/** 未声明的属性落到卡片的 div 上 */
+/** HoverCard 的样式：panel */
+var hoverCardStyles = css.create({ panel: {
+	padding: "_md",
+	maxWidth: "min(22em, calc(100vw - 2em))"
+} });
+/** 所有悬停卡片一组：同一时间只开一个 */
+var hoverCards = createHoverGroup();
+/** 悬停卡片：悬停或键盘聚焦时在触发器旁边显示富内容 */
+var HoverCard = /*#__PURE__*/ _component((_props, _ctx) => {
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const placement = readonlyProp(_props, "placement", "bottom");
+	const offset = readonlyProp(_props, "offset");
+	const delay = readonlyProp(_props, "delay", 700);
+	const closeDelay = readonlyProp(_props, "closeDelay", 300);
+	const disabled = readonlyProp(_props, "disabled", false);
+	const arrow = readonlyProp(_props, "arrow", false);
+	const trigger = readonlyProp(_props, "trigger");
+	const propsArrow = readonlyProp(_props, "propsArrow");
+	const lazy = readonlyProp(_props, "lazy", true);
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const showContent = useLazyContent(() => open.value, () => lazy.value);
+	const layer = useHoverLayer(hoverCards, () => ({
+		open: open.value,
+		disabled: disabled.value,
+		placement: placement.value,
+		offset: offset.value,
+		delay: delay.value,
+		closeDelay: closeDelay.value
+	}), openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value));
+	return () => createVNode(Fragment, null, [trigger.value({
+		ref: layer.anchorRef,
+		...layer.hover.trigger,
+		onBlur: (event) => {
+			if (!layer.contains(event.relatedTarget)) layer.hover.closeNow("focus", event);
+		}
+	}), createVNode("div", mergeProps(mergeAttrs({ sx: [
+		floatingStyles.anchored,
+		floatingStyles.surface,
+		hoverCardStyles.panel,
+		transitions.scale,
+		arrow.value && floatingStyles.withArrow
+	] }, rest, {
+		ref: layer.panelRef,
+		id: layer.id,
+		popover: "manual",
+		...layer.hover.panel,
+		onFocusout: (event) => {
+			if (!layer.contains(event.relatedTarget)) layer.hover.closeNow("focus", event);
+		}
+	}), { "data-state": open.value && !disabled.value ? "open" : "closed" }), [showContent() && children.value, arrow.value && createVNode("span", layer.arrowProps(propsArrow.value), null)])]);
+}, {
+	name: "HoverCard",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"placement",
+		"offset",
+		"delay",
+		"closeDelay",
+		"disabled",
+		"arrow",
+		"trigger",
+		"propsArrow",
+		"lazy"
+	]
+});
+//#endregion
+export { HoverCard, hoverCardStyles };
+
+//# sourceMappingURL=HoverCard.js.map

package/dist/overlay/HoverCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/overlay/HoverCard.tsx"],"sourcesContent":["/**\n * 悬停卡片：指针停在触发器（通常是链接、用户名）上、或用键盘聚焦它时，弹出一张富内容卡片（用户资料、链接预览）。\n * 开关时机同 Tooltip（useHoverIntent：停留后打开、可以移到卡片上、同组只开一个、刚关掉一个时下一个直接打开），\n * 定位同 Popover（floating-ui，可选箭头）。参考 Radix HoverCard。\n *\n *   <HoverCard trigger={(props) => <Link {...props} href=\"/u/ada\">@ada</Link>}>\n *     <Avatar name=\"Ada Lovelace\" /> …\n *   </HoverCard>\n *\n * 卡片只是预览：里面的信息要在别处也能拿到（触屏没有悬停）。卡片里可以有链接、按钮：\n * 键盘聚焦触发器打开后按 Tab 进入卡片，焦点离开触发器与卡片时关闭；Esc 关闭。\n * 用 popover=\"manual\" 渲染在顶层，不会关掉正打开的菜单或弹出框。开关、定位、Esc 见 useHoverLayer（与 Tooltip 共用）。\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 {\n  floatingStyles,\n  type FloatingOptions,\n  type FloatingPlacement,\n} from '../utils/dom/floating';\nimport { createHoverGroup } from '../utils/dom/hover-intent';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { useHoverLayer } from '../utils/dom/hover-layer';\nimport { useLazyContent, type LazyContentOptions } from '../utils/motion/presence';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { transitions } from '../utils/style/transitions';\n\n/** 交给触发器的属性：展开到触发元素上（`{...props}`） */\nexport interface HoverCardTriggerProps {\n  /** 取得触发器元素：定位的参照 */\n  ref: (element: unknown) => void;\n  /** 指针进入：等 delay 后打开 */\n  onPointerenter: (event: PointerEvent) => void;\n  /** 指针离开：稍后关闭（可以移到卡片上） */\n  onPointerleave: (event: PointerEvent) => void;\n  /** 按下（点击）触发器时关闭 */\n  onPointerdown: (event: PointerEvent) => void;\n  /** 键盘聚焦时立即打开 */\n  onFocus: (event: FocusEvent) => void;\n  /** 焦点离开（不是移进卡片）时关闭 */\n  onBlur: (event: FocusEvent) => void;\n}\n\n/** 未声明的属性落到卡片的 div 上 */\nexport interface HoverCardProps\n  extends\n    PartProps<'div', 'id' | 'popover'>,\n    Pick<FloatingOptions, 'offset'>,\n    LazyContentOptions,\n    OpenChangeProps {\n  /** 是否打开：父级可以写 _open={x} 控制或得知 */\n  _open?: boolean;\n  /** 弹出位置，默认 bottom；空间不够时自动翻转 */\n  placement?: FloatingPlacement;\n  /** 指针停留多久后打开（毫秒），默认 700 */\n  delay?: number;\n  /** 指针离开多久后关闭（毫秒），默认 300 */\n  closeDelay?: number;\n  /** 不打开（触发器照常渲染） */\n  disabled?: boolean;\n  /** 显示指向触发器的箭头 */\n  arrow?: boolean;\n  /** 触发器：`(props) => <Link {...props} … />` */\n  trigger: (props: HoverCardTriggerProps) => VNodeChild;\n  /** 箭头的部件属性 */\n  propsArrow?: PartProps<'span'>;\n  /** 卡片内容 */\n  children?: VNodeChild;\n}\n\n/** HoverCard 的样式：panel */\nexport const hoverCardStyles = css.create({\n  panel: { padding: '_md', maxWidth: 'min(22em, calc(100vw - 2em))' },\n});\n\n/** 所有悬停卡片一组：同一时间只开一个 */\nconst hoverCards = createHoverGroup();\n\n/** 悬停卡片：悬停或键盘聚焦时在触发器旁边显示富内容 */\nexport const HoverCard = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'bottom',\n    offset,\n    delay = 700,\n    closeDelay = 300,\n    disabled = false,\n    arrow = false,\n    trigger,\n    propsArrow,\n    lazy = true,\n    children,\n    ...rest\n  }: HoverCardProps) => {\n    const showContent = useLazyContent(\n      () => open,\n      () => lazy,\n    );\n    const layer = useHoverLayer(\n      hoverCards,\n      () => ({ open, disabled, placement, offset, delay, closeDelay }),\n      openSetter(\n        () => open,\n        (next) => (open = next),\n        () => onOpenChange,\n      ),\n    );\n\n    return () => (\n      <>\n        {trigger({\n          ref: layer.anchorRef,\n          ...layer.hover.trigger,\n          // Tab 进卡片（下一个可聚焦元素）时不关\n          onBlur: (event: FocusEvent) => {\n            if (!layer.contains(event.relatedTarget)) layer.hover.closeNow('focus', event);\n          },\n        })}\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                floatingStyles.anchored,\n                floatingStyles.surface,\n                hoverCardStyles.panel,\n                transitions.scale,\n                arrow && floatingStyles.withArrow,\n              ],\n            },\n            rest,\n            {\n              ref: layer.panelRef,\n              id: layer.id,\n              popover: 'manual',\n              ...layer.hover.panel,\n              onFocusout: (event: FocusEvent) => {\n                if (!layer.contains(event.relatedTarget)) layer.hover.closeNow('focus', event);\n              },\n            },\n          )}\n          data-state={open && !disabled ? 'open' : 'closed'}\n        >\n          {showContent() && children}\n          {arrow && <span {...layer.arrowProps(propsArrow)} />}\n        </div>\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAwEA,IAAa,kBAAkB,IAAI,OAAO,EACxC,OAAO;CAAE,SAAS;CAAO,UAAU;AAA+B,EACpE,CAAC;;AAGD,IAAM,aAAa,iBAAiB;;AAGpC,IAAa,YAAY,0BACvB,QAAA,SAcsB;CAAA,MAAA,OAAAA,SAAA,QAAA,eAbI,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAEjB,QAAQ;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAEZ,GAAG;CAAA,MAAA,aAAAA,aAAA,QAAA,cACE,GAAG;CAAA,MAAA,WAAAA,aAAA,QAAA,YACL,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,SACR,KAAK;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAGN,IAAI;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAER,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,cAAc,qBAClB,KAAA,aACA,KAAA,KACF;CACA,MAAM,QAAQ,cACZ,mBACO;EAAE,MAAI,KAAA;EAAE,UAAQ,SAAA;EAAE,WAAS,UAAA;EAAE,QAAM,OAAA;EAAE,OAAK,MAAA;EAAE,YAAU,WAAA;CAAC,IAC9D,iBACE,KAAA,QACC,SAAU,KAAA,QAAO,YAClB,aAAA,KACF,CACF;CAEA,aAAOC,YAAAC,UAAA,MAAA,CAEF,QAAA,MAAQ;EACP,KAAK,MAAM;EACX,GAAG,MAAM,MAAM;EAEf,SAAS,UAAsB;GAC7B,IAAI,CAAC,MAAM,SAAS,MAAM,aAAa,GAAG,MAAM,MAAM,SAAS,SAAS,KAAK;EAC/E;CACF,CAAC,GAACD,YAAA,OAAAE,WAEI,WACF,EACE,IAAI;EACF,eAAe;EACf,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,MAAA,SAAS,eAAe;CAAS,EAErC,GACA,MACA;EACE,KAAK,MAAM;EACX,IAAI,MAAM;EACV,SAAS;EACT,GAAG,MAAM,MAAM;EACf,aAAa,UAAsB;GACjC,IAAI,CAAC,MAAM,SAAS,MAAM,aAAa,GAAG,MAAM,MAAM,SAAS,SAAS,KAAK;EAC/E;CACF,CACF,GAAC,EAAA,cACW,KAAA,SAAQ,CAAA,SAAA,QAAY,SAAS,SAAQ,CAAA,GAAA,CAEhD,YAAY,KAAC,SAAA,OACb,MAAA,SAAAF,YAAA,QAAmB,MAAM,WAAU,WAAA,KAAW,GAAC,IAAA,CAAI,CAAA,CAAA,CAAA;AAI5D,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/overlay/Lightbox.d.ts

@@ -0,0 +1,57 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconButtonProps } from '../base/IconButton';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PartProps } from '../utils/props';
+/** 一张图 */
+export interface LightboxItem {
+    /** 大图的地址 */
+    src: string;
+    /** 图片的说明（读屏念它） */
+    alt: string;
+    /** 图片下方的说明文字 */
+    caption?: VNodeChild;
+    /** 下载时的文件名；false 不显示下载按钮 */
+    download?: string | false;
+}
+/** 打开、关联由组件管理；未声明的属性落到 dialog 上 */
+export interface LightboxProps extends PartProps<'dialog', 'open' | 'aria-label' | 'aria-labelledby'>, OpenChangeProps {
+    /** 是否打开：父级写 _open={x}；Esc、关闭按钮会关上并写回 */
+    _open?: boolean;
+    /** 图片 */
+    items: readonly LightboxItem[];
+    /** 当前第几张，从 0 开始：父级可以写 _index={x} */
+    _index?: number;
+    /** 到头之后从另一头继续，默认 false */
+    loop?: boolean;
+    /** 工具栏按钮的部件属性 */
+    propsButton?: Partial<IconButtonProps>;
+    /** 图片区（视口）的部件属性 */
+    propsViewport?: PartProps<'div'>;
+    /** 说明文字的部件属性 */
+    propsCaption?: PartProps<'div'>;
+}
+/** Lightbox 的样式：root、toolbar、counter、viewport、content、image、side、previous、next、caption、button */
+export declare const lightboxStyles: Readonly<{
+    button: css.CompiledStyles;
+    caption: css.CompiledStyles;
+    content: css.CompiledStyles;
+    counter: css.CompiledStyles;
+    image: css.CompiledStyles;
+    next: css.CompiledStyles;
+    previous: css.CompiledStyles;
+    root: css.CompiledStyles;
+    side: css.CompiledStyles;
+    smooth: css.CompiledStyles;
+    toolbar: css.CompiledStyles;
+    viewport: css.CompiledStyles;
+    zoom: css.CompiledStyles;
+}>;
+/** Lightbox 的动态样式：平移缩放、框的大小、图片的大小与旋转 */
+export declare const lightboxDynamicStyles: Readonly<{
+    readonly transform: (transform: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly box: (width: number, height: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly image: (width: number, height: number, degrees: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 图片预览：全屏 dialog，缩放、拖动、旋转、左右切换 */
+export declare const Lightbox: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<LightboxProps>;