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

package/dist/overlay/Lightbox.js

@@ -0,0 +1,374 @@
+import { clamp } from "../utils/data/number.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { transitions } from "../utils/style/transitions.js";
+import { IconButton } from "../base/IconButton.js";
+import { openModalDialog } from "../utils/dom/overlay.js";
+import { IconLinkButton } from "../base/IconLinkButton.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { usePanZoom } from "../utils/dom/pan-zoom.js";
+import { createTextVNode, createVNode, mergeProps, nextTick, onBeforeUnmount, ref, shallowRef } 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 { ChevronLeft, ChevronRight, Download, RotateCcw, RotateCw, Undo2, X, ZoomIn, ZoomOut } from "@lucide/icons";
+//#region src/overlay/Lightbox.tsx
+/**
+* 图片预览（全屏的模态 dialog）：深色背景上看大图——缩放、拖动、旋转、还原、下载，几张图时左右切换。
+* Image 的 preview 打开它（同一个 ImageGroup 里的图共用一个），也可以单独用。参考 Ant Design Image 的预览、Element Plus 的 image-viewer。
+*
+*   <Lightbox _open={viewing} _index={at} items={[{ src: '/photos/1.jpg', alt: '支架正面' }, …]} />
+*
+* - 平移与缩放建在 usePanZoom 上：拖动平移，滚轮、触控板、捏合以指针为中心缩放，双击放大 / 还原；
+*   打开或换一张时整张图放进视口（不超过原大）。旋转以 90° 为一档，转完重新放进视口。
+* - 键盘：← / → 上一张、下一张，+ / − 缩放，0 还原，R 向右旋转，Esc 关闭；焦点在工具栏与图片区之间循环（模态）。
+* - 读屏：dialog 的名称是“图片预览”，图片区是 role="img"、名称是图片的 alt；换一张时念出“第 2 张，共 5 张”。
+*
+* 部件：Root（dialog）、Toolbar（div）、Counter（span）、Viewport（div）、Image（img）、Previous、Next（IconButton）、Caption（div）。
+*/
+/** 一张图 */
+/** 打开、关联由组件管理；未声明的属性落到 dialog 上 */
+/** Lightbox 的样式：root、toolbar、counter、viewport、content、image、side、previous、next、caption、button */
+var lightboxStyles = css.create({
+	root: {
+		boxSizing: "border-box",
+		width: "100vw",
+		height: "100dvh",
+		maxWidth: "none",
+		maxHeight: "none",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		display: {
+			default: "none",
+			":modal": "flex"
+		},
+		flexDirection: "column",
+		backgroundColor: "rgb(0 0 0 / 0.86)",
+		color: "white",
+		colorScheme: "dark"
+	},
+	toolbar: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		gap: "_xs",
+		paddingBlock: "_sm",
+		paddingInline: "_md",
+		flexShrink: 0
+	},
+	counter: {
+		marginInlineEnd: "auto",
+		fontVariantNumeric: "tabular-nums",
+		fontSize: "_sm",
+		opacity: .8
+	},
+	zoom: {
+		minWidth: "3.5em",
+		textAlign: "center",
+		fontSize: "_sm",
+		fontVariantNumeric: "tabular-nums"
+	},
+	viewport: {
+		position: "relative",
+		flexGrow: 1,
+		minHeight: 0,
+		overflow: "hidden",
+		cursor: {
+			default: "grab",
+			":active": "grabbing"
+		},
+		outline: "none"
+	},
+	content: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		transformOrigin: "0 0"
+	},
+	image: {
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		maxWidth: "none",
+		userSelect: "none",
+		pointerEvents: "none"
+	},
+	smooth: {
+		transitionProperty: "transform",
+		transitionDuration: "_md"
+	},
+	side: {
+		position: "absolute",
+		top: "50%",
+		translate: "0 -50%",
+		zIndex: 1
+	},
+	previous: { insetInlineStart: "_md" },
+	next: { insetInlineEnd: "_md" },
+	caption: {
+		flexShrink: 0,
+		paddingBlock: "_md",
+		paddingInline: "_xl",
+		textAlign: "center",
+		fontSize: "_sm",
+		opacity: .9
+	},
+	button: {
+		color: "white",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "rgb(255 255 255 / 0.12)"
+		}
+	}
+});
+/** Lightbox 的动态样式：平移缩放、框的大小、图片的大小与旋转 */
+var lightboxDynamicStyles = css.create({
+	transform: (transform) => ({ transform }),
+	box: (width, height) => ({
+		width: `${width}px`,
+		height: `${height}px`
+	}),
+	image: (width, height, degrees) => ({
+		width: `${width}px`,
+		height: `${height}px`,
+		transform: `translate(-50%, -50%) rotate(${degrees}deg)`
+	})
+});
+/** 图片预览：全屏 dialog，缩放、拖动、旋转、左右切换 */
+var Lightbox = /*#__PURE__*/ _component((_props, _ctx) => {
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const items = readonlyProp(_props, "items");
+	const index = bindable(_props, "_index", () => 0, _ctx.emit);
+	const loop = readonlyProp(_props, "loop", false);
+	const propsButton = readonlyProp(_props, "propsButton");
+	const propsViewport = readonlyProp(_props, "propsViewport");
+	const propsCaption = readonlyProp(_props, "propsCaption");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	let dialog = shallowRef(null);
+	let viewport = shallowRef(null);
+	let natural = ref(null);
+	let rotation = ref(0);
+	let release;
+	let closing;
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	const current = () => items.value[clamp(index.value, 0, Math.max(0, items.value.length - 1))];
+	/** 旋转之后图片占的框 */
+	const box = () => {
+		if (!natural.value) return {
+			width: 0,
+			height: 0
+		};
+		return rotation.value % 180 !== 0 ? {
+			width: natural.value.height,
+			height: natural.value.width
+		} : {
+			width: natural.value.width,
+			height: natural.value.height
+		};
+	};
+	const view = usePanZoom({
+		viewport: () => viewport.value,
+		min: .05,
+		max: 8,
+		bounds: () => natural.value ? box() : void 0,
+		initial: () => ({
+			x: 0,
+			y: 0,
+			scale: 1
+		})
+	});
+	/** 整张图放进视口（不超过原大）：打开、换一张、旋转之后 */
+	function fitImage() {
+		if (!natural.value) return;
+		view.fit(box(), 24);
+	}
+	function go(step) {
+		if (items.value.length < 2) return;
+		const next = index.value + step;
+		if (next < 0 || next >= items.value.length) {
+			if (!loop.value) return;
+			index.value = (next + items.value.length) % items.value.length;
+		} else index.value = next;
+	}
+	function rotate(step) {
+		rotation.value = (rotation.value + step * 90 + 360) % 360;
+		nextTick(fitImage);
+	}
+	function reset() {
+		rotation.value = 0;
+		nextTick(fitImage);
+	}
+	function onLoad(event) {
+		const image = event.currentTarget;
+		natural.value = {
+			width: image.naturalWidth,
+			height: image.naturalHeight
+		};
+		nextTick(fitImage);
+	}
+	function onKeydown(event) {
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+			const rtl = dialog.value ? getComputedStyle(dialog.value).direction === "rtl" : false;
+			go(event.key === "ArrowRight" !== rtl ? 1 : -1);
+			event.preventDefault();
+		} else if (event.key === "r" || event.key === "R") {
+			rotate(1);
+			event.preventDefault();
+		}
+	}
+	function close() {
+		closing = "close";
+		dialog.value?.close();
+	}
+	function onClose() {
+		release?.();
+		release = void 0;
+		const reason = closing ?? "escape";
+		closing = void 0;
+		setOpen(false, reason);
+	}
+	effect(() => {
+		current()?.src;
+		natural.value = null;
+		rotation.value = 0;
+	});
+	effect(() => {
+		if (open.value && dialog.value && !dialog.value.open) {
+			release = openModalDialog(dialog.value);
+			nextTick(() => viewport.value?.focus());
+		} else if (!open.value && dialog.value?.open) dialog.value.close();
+	});
+	effect(() => {
+		if (!open.value) return;
+		for (const step of [-1, 1]) {
+			const neighbour = items.value[index.value + step];
+			if (neighbour) new Image().src = neighbour.src;
+		}
+	});
+	onBeforeUnmount(() => release?.());
+	const button = (props) => mergePartProps({
+		icon: X,
+		variant: "ghost",
+		tone: "neutral",
+		sx: lightboxStyles.button,
+		"aria-label": ""
+	}, propsButton.value, props);
+	return () => {
+		const item = current();
+		const total = items.value.length;
+		const { width, height } = box();
+		const canDownload = item && item.download !== false;
+		return createVNode("dialog", mergeAttrs({ sx: [lightboxStyles.root, transitions.backdrop] }, rest, {
+			ref: dialog,
+			"aria-label": lang.lightboxLabel,
+			onClose,
+			onKeydown
+		}), [
+			createVNode("div", css.attrs(lightboxStyles.toolbar), [
+				createVNode("span", mergeProps(css.attrs(lightboxStyles.counter), { "aria-live": "polite" }), [total > 1 ? lang.lightboxCounter(index.value + 1, total) : ""]),
+				createVNode(IconButton, button({
+					icon: ZoomOut,
+					"aria-label": lang.lightboxZoomOut,
+					onClick: () => view.zoomOut()
+				}), null),
+				createVNode("span", mergeProps(css.attrs(lightboxStyles.zoom), { "aria-hidden": "true" }), [Math.round(view.scale * 100), createTextVNode("%")]),
+				createVNode(IconButton, button({
+					icon: ZoomIn,
+					"aria-label": lang.lightboxZoomIn,
+					onClick: () => view.zoomIn()
+				}), null),
+				createVNode(IconButton, button({
+					icon: RotateCcw,
+					"aria-label": lang.lightboxRotateLeft,
+					onClick: () => rotate(-1)
+				}), null),
+				createVNode(IconButton, button({
+					icon: RotateCw,
+					"aria-label": lang.lightboxRotateRight,
+					onClick: () => rotate(1)
+				}), null),
+				createVNode(IconButton, button({
+					icon: Undo2,
+					"aria-label": lang.lightboxReset,
+					onClick: reset
+				}), null),
+				canDownload && createVNode(IconLinkButton, mergePartProps({
+					icon: Download,
+					variant: "ghost",
+					tone: "neutral",
+					sx: lightboxStyles.button,
+					"aria-label": lang.lightboxDownload,
+					href: item.src
+				}, { download: item.download ?? "" }), null),
+				createVNode(IconButton, button({
+					icon: X,
+					"aria-label": lang.close,
+					onClick: close
+				}), null)
+			]),
+			createVNode("div", mergeAttrs({ sx: lightboxStyles.viewport }, propsViewport.value, {
+				...view.viewportProps,
+				ref: viewport,
+				tabindex: 0,
+				role: "img",
+				"aria-label": item?.alt
+			}), [item && createVNode("div", css.attrs(lightboxStyles.content, css.select(() => !view.interacting && lightboxStyles.smooth, true), css.bind(lightboxDynamicStyles.transform, () => [view.transform], true), css.bind(lightboxDynamicStyles.box, () => [width, height])), [createVNode("img", mergeProps({
+				"key": item.src,
+				"src": item.src,
+				"alt": "",
+				"draggable": false,
+				"onLoad": onLoad
+			}, css.attrs(lightboxStyles.image, natural.value && css.bind(lightboxDynamicStyles.image, () => [
+				natural.value.width,
+				natural.value.height,
+				rotation.value
+			], true))), null)])]),
+			total > 1 && (loop.value || index.value > 0) && createVNode(IconButton, button({
+				icon: ChevronLeft,
+				propsIcon: { flipInRtl: true },
+				radius: "full",
+				sx: [
+					lightboxStyles.button,
+					lightboxStyles.side,
+					lightboxStyles.previous
+				],
+				"aria-label": lang.lightboxPrevious,
+				onClick: () => go(-1)
+			}), null),
+			total > 1 && (loop.value || index.value < total - 1) && createVNode(IconButton, button({
+				icon: ChevronRight,
+				propsIcon: { flipInRtl: true },
+				radius: "full",
+				sx: [
+					lightboxStyles.button,
+					lightboxStyles.side,
+					lightboxStyles.next
+				],
+				"aria-label": lang.lightboxNext,
+				onClick: () => go(1)
+			}), null),
+			item?.caption != null && createVNode("div", mergeAttrs({ sx: lightboxStyles.caption }, propsCaption.value), [item.caption])
+		]);
+	};
+}, {
+	name: "Lightbox",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"items",
+		"_index",
+		"onUpdate:_index",
+		"loop",
+		"propsButton",
+		"propsViewport",
+		"propsCaption"
+	]
+});
+//#endregion
+export { Lightbox, lightboxDynamicStyles, lightboxStyles };
+
+//# sourceMappingURL=Lightbox.js.map

package/dist/overlay/Lightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_createTextVNode"],"sources":["../../src/overlay/Lightbox.tsx"],"sourcesContent":["/**\n * 图片预览（全屏的模态 dialog）：深色背景上看大图——缩放、拖动、旋转、还原、下载，几张图时左右切换。\n * Image 的 preview 打开它（同一个 ImageGroup 里的图共用一个），也可以单独用。参考 Ant Design Image 的预览、Element Plus 的 image-viewer。\n *\n *   <Lightbox _open={viewing} _index={at} items={[{ src: '/photos/1.jpg', alt: '支架正面' }, …]} />\n *\n * - 平移与缩放建在 usePanZoom 上：拖动平移，滚轮、触控板、捏合以指针为中心缩放，双击放大 / 还原；\n *   打开或换一张时整张图放进视口（不超过原大）。旋转以 90° 为一档，转完重新放进视口。\n * - 键盘：← / → 上一张、下一张，+ / − 缩放，0 还原，R 向右旋转，Esc 关闭；焦点在工具栏与图片区之间循环（模态）。\n * - 读屏：dialog 的名称是“图片预览”，图片区是 role=\"img\"、名称是图片的 alt；换一张时念出“第 2 张，共 5 张”。\n *\n * 部件：Root（dialog）、Toolbar（div）、Counter（span）、Viewport（div）、Image（img）、Previous、Next（IconButton）、Caption（div）。\n */\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Download,\n  RotateCcw,\n  RotateCw,\n  Undo2,\n  X,\n  ZoomIn,\n  ZoomOut,\n} from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, onBeforeUnmount, type VNodeChild } from 'vue';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { IconLinkButton, type IconLinkButtonProps } from '../base/IconLinkButton';\nimport { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { openSetter, type OpenChangeProps, type OpenChangeReasons } from '../utils/dom/open-change';\nimport { openModalDialog } from '../utils/dom/overlay';\nimport { usePanZoom } from '../utils/dom/pan-zoom';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { transitions } from '../utils/style/transitions';\n\n/** 一张图 */\nexport interface LightboxItem {\n  /** 大图的地址 */\n  src: string;\n  /** 图片的说明（读屏念它） */\n  alt: string;\n  /** 图片下方的说明文字 */\n  caption?: VNodeChild;\n  /** 下载时的文件名；false 不显示下载按钮 */\n  download?: string | false;\n}\n\n/** 打开、关联由组件管理；未声明的属性落到 dialog 上 */\nexport interface LightboxProps\n  extends PartProps<'dialog', 'open' | 'aria-label' | 'aria-labelledby'>, OpenChangeProps {\n  /** 是否打开：父级写 _open={x}；Esc、关闭按钮会关上并写回 */\n  _open?: boolean;\n  /** 图片 */\n  items: readonly LightboxItem[];\n  /** 当前第几张，从 0 开始：父级可以写 _index={x} */\n  _index?: number;\n  /** 到头之后从另一头继续，默认 false */\n  loop?: boolean;\n  /** 工具栏按钮的部件属性 */\n  propsButton?: Partial<IconButtonProps>;\n  /** 图片区（视口）的部件属性 */\n  propsViewport?: PartProps<'div'>;\n  /** 说明文字的部件属性 */\n  propsCaption?: PartProps<'div'>;\n}\n\n/** Lightbox 的样式：root、toolbar、counter、viewport、content、image、side、previous、next、caption、button */\nexport const lightboxStyles = css.create({\n  root: {\n    // 占满视口：原生 dialog 默认有最大宽高与边框\n    boxSizing: 'border-box',\n    width: '100vw',\n    height: '100dvh',\n    maxWidth: 'none',\n    maxHeight: 'none',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    display: { default: 'none', ':modal': 'flex' },\n    flexDirection: 'column',\n    // 图片预览总是深色背景：不跟主题变（看图片本身的颜色）\n    backgroundColor: 'rgb(0 0 0 / 0.86)',\n    color: 'white',\n    colorScheme: 'dark',\n  },\n  toolbar: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    gap: '_xs',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    flexShrink: 0,\n  },\n  counter: {\n    marginInlineEnd: 'auto',\n    fontVariantNumeric: 'tabular-nums',\n    fontSize: '_sm',\n    opacity: 0.8,\n  },\n  zoom: {\n    minWidth: '3.5em',\n    textAlign: 'center',\n    fontSize: '_sm',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  viewport: {\n    position: 'relative',\n    flexGrow: 1,\n    minHeight: 0,\n    overflow: 'hidden',\n    cursor: { default: 'grab', ':active': 'grabbing' },\n    outline: 'none',\n  },\n  // 平移与缩放作用在它上面（transform-origin 左上角）；它的大小是旋转之后图片占的框\n  content: { position: 'absolute', top: 0, left: 0, transformOrigin: '0 0' },\n  // 图片以框的中心旋转\n  image: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    maxWidth: 'none',\n    userSelect: 'none',\n    pointerEvents: 'none',\n  },\n  smooth: { transitionProperty: 'transform', transitionDuration: '_md' },\n  side: {\n    position: 'absolute',\n    top: '50%',\n    translate: '0 -50%',\n    zIndex: 1,\n  },\n  previous: { insetInlineStart: '_md' },\n  next: { insetInlineEnd: '_md' },\n  caption: {\n    flexShrink: 0,\n    paddingBlock: '_md',\n    paddingInline: '_xl',\n    textAlign: 'center',\n    fontSize: '_sm',\n    opacity: 0.9,\n  },\n  // 深色背景上的按钮：文字白色，悬停时浅一点的底\n  button: {\n    color: 'white',\n    backgroundColor: { default: 'transparent', ':hover': 'rgb(255 255 255 / 0.12)' },\n  },\n});\n\n/** Lightbox 的动态样式：平移缩放、框的大小、图片的大小与旋转 */\nexport const lightboxDynamicStyles = css.create({\n  transform: (transform: string) => ({ transform }),\n  box: (width: number, height: number) => ({ width: `${width}px`, height: `${height}px` }),\n  image: (width: number, height: number, degrees: number) => ({\n    width: `${width}px`,\n    height: `${height}px`,\n    transform: `translate(-50%, -50%) rotate(${degrees}deg)`,\n  }),\n});\n\n/** 图片预览：全屏 dialog，缩放、拖动、旋转、左右切换 */\nexport const Lightbox = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    items,\n    _index: index = _bindable(0),\n    loop = false,\n    propsButton,\n    propsViewport,\n    propsCaption,\n    ...rest\n  }: LightboxProps) => {\n    const lang = useLang();\n    let dialog = _state.raw<HTMLDialogElement | null>(null);\n    let viewport = _state.raw<HTMLElement | null>(null);\n    // 当前图片的原始大小（加载后知道）与旋转（0、90、180、270）\n    let natural = _state<{ width: number; height: number } | null>(null);\n    let rotation = _state(0);\n    let release: (() => void) | undefined;\n    let closing: keyof OpenChangeReasons | undefined;\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    const current = () => items[clamp(index, 0, Math.max(0, items.length - 1))];\n    /** 旋转之后图片占的框 */\n    const box = () => {\n      if (!natural) return { width: 0, height: 0 };\n      const sideways = rotation % 180 !== 0;\n      return sideways\n        ? { width: natural.height, height: natural.width }\n        : { width: natural.width, height: natural.height };\n    };\n\n    const view = usePanZoom({\n      viewport: () => viewport,\n      min: 0.05,\n      max: 8,\n      bounds: () => (natural ? box() : undefined),\n      initial: () => ({ x: 0, y: 0, scale: 1 }),\n    });\n\n    /** 整张图放进视口（不超过原大）：打开、换一张、旋转之后 */\n    function fitImage() {\n      if (!natural) return;\n      view.fit(box(), 24);\n    }\n\n    function go(step: 1 | -1) {\n      if (items.length < 2) return;\n      const next = index + step;\n      if (next < 0 || next >= items.length) {\n        if (!loop) return;\n        index = (next + items.length) % items.length;\n      } else index = next;\n    }\n\n    function rotate(step: 1 | -1) {\n      rotation = (rotation + step * 90 + 360) % 360;\n      void nextTick(fitImage);\n    }\n\n    function reset() {\n      rotation = 0;\n      void nextTick(fitImage);\n    }\n\n    function onLoad(event: Event) {\n      const image = event.currentTarget as HTMLImageElement;\n      natural = { width: image.naturalWidth, height: image.naturalHeight };\n      void nextTick(fitImage);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (event.altKey || event.ctrlKey || event.metaKey) return;\n      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n        // 从右到左排版时左右对调\n        const rtl = dialog ? getComputedStyle(dialog).direction === 'rtl' : false;\n        go((event.key === 'ArrowRight') !== rtl ? 1 : -1);\n        event.preventDefault();\n      } else if (event.key === 'r' || event.key === 'R') {\n        rotate(1);\n        event.preventDefault();\n      }\n    }\n\n    function close() {\n      closing = 'close';\n      dialog?.close();\n    }\n\n    // 不论怎么关上（Esc、关闭按钮、open 改成 false），原生 close 事件都会来\n    function onClose() {\n      release?.();\n      release = undefined;\n      const reason = closing ?? 'escape';\n      closing = undefined;\n      setOpen(false, reason);\n    }\n\n    // 换一张：原图大小重新量，方向回正\n    _effect(() => {\n      void current()?.src;\n      natural = null;\n      rotation = 0;\n    });\n    _effect(() => {\n      if (open && dialog && !dialog.open) {\n        release = openModalDialog(dialog);\n        void nextTick(() => viewport?.focus());\n      } else if (!open && dialog?.open) dialog.close();\n    });\n    // 预先加载前后两张：切换时不闪\n    _effect(() => {\n      if (!open) return;\n      for (const step of [-1, 1]) {\n        const neighbour = items[index + step];\n        if (neighbour) new Image().src = neighbour.src;\n      }\n    });\n    onBeforeUnmount(() => release?.());\n\n    const button = (props: Partial<IconButtonProps>) =>\n      mergePartProps<IconButtonProps>(\n        {\n          icon: X,\n          variant: 'ghost',\n          tone: 'neutral',\n          sx: lightboxStyles.button,\n          'aria-label': '',\n        },\n        propsButton,\n        props,\n      );\n\n    return () => {\n      const item = current();\n      const total = items.length;\n      const { width, height } = box();\n      const canDownload = item && item.download !== false;\n      return (\n        <dialog\n          {...mergeAttrs<'dialog'>({ sx: [lightboxStyles.root, transitions.backdrop] }, rest, {\n            ref: _toRef(dialog),\n            'aria-label': lang.lightboxLabel,\n            onClose,\n            onKeydown,\n          })}\n        >\n          <div {...css.attrs(lightboxStyles.toolbar)}>\n            <span {...css.attrs(lightboxStyles.counter)} aria-live=\"polite\">\n              {total > 1 ? lang.lightboxCounter(index + 1, total) : ''}\n            </span>\n            <IconButton\n              {...button({\n                icon: ZoomOut,\n                'aria-label': lang.lightboxZoomOut,\n                onClick: () => view.zoomOut(),\n              })}\n            />\n            <span {...css.attrs(lightboxStyles.zoom)} aria-hidden=\"true\">\n              {Math.round(view.scale * 100)}%\n            </span>\n            <IconButton\n              {...button({\n                icon: ZoomIn,\n                'aria-label': lang.lightboxZoomIn,\n                onClick: () => view.zoomIn(),\n              })}\n            />\n            <IconButton\n              {...button({\n                icon: RotateCcw,\n                'aria-label': lang.lightboxRotateLeft,\n                onClick: () => rotate(-1),\n              })}\n            />\n            <IconButton\n              {...button({\n                icon: RotateCw,\n                'aria-label': lang.lightboxRotateRight,\n                onClick: () => rotate(1),\n              })}\n            />\n            <IconButton\n              {...button({ icon: Undo2, 'aria-label': lang.lightboxReset, onClick: reset })}\n            />\n            {canDownload && (\n              <IconLinkButton\n                {...mergePartProps<IconLinkButtonProps>(\n                  {\n                    icon: Download,\n                    variant: 'ghost',\n                    tone: 'neutral',\n                    sx: lightboxStyles.button,\n                    'aria-label': lang.lightboxDownload,\n                    href: item.src,\n                  },\n                  // 下载而不是打开：download 是文件名，空字符串时用地址里的名字\n                  { download: item.download ?? '' } as Partial<IconLinkButtonProps>,\n                )}\n              />\n            )}\n            <IconButton\n              {...button({\n                icon: X,\n                'aria-label': lang.close,\n                onClick: close,\n              })}\n            />\n          </div>\n          <div\n            {...mergeAttrs<'div'>({ sx: lightboxStyles.viewport }, propsViewport, {\n              ...view.viewportProps,\n              ref: _toRef(viewport),\n              tabindex: 0,\n              role: 'img',\n              'aria-label': item?.alt,\n            })}\n          >\n            {item && (\n              <div\n                {...css.attrs(\n                  lightboxStyles.content,\n                  !view.interacting && lightboxStyles.smooth,\n                  lightboxDynamicStyles.transform(view.transform),\n                  lightboxDynamicStyles.box(width, height),\n                )}\n              >\n                <img\n                  key={item.src}\n                  src={item.src}\n                  alt=\"\"\n                  draggable={false}\n                  onLoad={onLoad}\n                  {...css.attrs(\n                    lightboxStyles.image,\n                    natural && lightboxDynamicStyles.image(natural.width, natural.height, rotation),\n                  )}\n                />\n              </div>\n            )}\n          </div>\n          {total > 1 && (loop || index > 0) && (\n            <IconButton\n              {...button({\n                icon: ChevronLeft,\n                propsIcon: { flipInRtl: true },\n                radius: 'full',\n                sx: [lightboxStyles.button, lightboxStyles.side, lightboxStyles.previous],\n                'aria-label': lang.lightboxPrevious,\n                onClick: () => go(-1),\n              })}\n            />\n          )}\n          {total > 1 && (loop || index < total - 1) && (\n            <IconButton\n              {...button({\n                icon: ChevronRight,\n                propsIcon: { flipInRtl: true },\n                radius: 'full',\n                sx: [lightboxStyles.button, lightboxStyles.side, lightboxStyles.next],\n                'aria-label': lang.lightboxNext,\n                onClick: () => go(1),\n              })}\n            />\n          )}\n          {item?.caption != null && (\n            <div {...mergeAttrs<'div'>({ sx: lightboxStyles.caption }, propsCaption)}>\n              {item.caption}\n            </div>\n          )}\n        </dialog>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/overlay/Menu.d.ts

@@ -0,0 +1,218 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconData, type IconProps } from '../base/Icon';
+import { type TextProps } from '../base/Text';
+import { type FloatingOptions, type FloatingPlacement } from '../utils/dom/floating';
+import { type LazyContentOptions } from '../utils/motion/presence';
+import { type PartProps, type TriggerProps } from '../utils/props';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type TextSize } from '../utils/style/typography';
+/** Menu 交给菜单项的状态 */
+export interface MenuState {
+    /** 波纹；不写时沿用配置 */
+    readonly ripple: boolean | undefined;
+    /** 执行了一项：关闭菜单（onOpenChange 的原因是 select），焦点回到触发器 */
+    close(event?: Event): void;
+}
+/** Menu 的上下文：自定义菜单项用 useMenuItem 读取 */
+export declare const MenuContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<MenuState>;
+/** MenuRadioGroup 交给组内单选项的状态 */
+export interface MenuRadioGroupState {
+    /** 选中的值 */
+    readonly value: string | undefined;
+    /** 选中一个值 */
+    select(value: string): void;
+}
+/** MenuRadioGroup 的上下文 */
+export declare const MenuRadioGroupContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<MenuRadioGroupState>;
+/** 交给触发器的属性：展开到按钮上（`{...props}`） */
+export interface MenuTriggerProps extends TriggerProps {
+    /** 菜单以触发器的文字作为名称（aria-labelledby） */
+    id: string;
+    /** 取得触发器元素：定位的参照、关闭后焦点回到这里 */
+    ref: (element: unknown) => void;
+    /** ↓ / ↑ 打开并聚焦第一项 / 最后一项 */
+    onKeydown: (event: KeyboardEvent) => void;
+    /** 告诉读屏这个按钮会打开菜单 */
+    'aria-haspopup': 'menu';
+}
+/** 未声明的属性落到菜单（role="menu" 的 div）上 */
+export interface MenuProps extends PartProps<'div', 'id' | 'popover' | 'role'>, Pick<FloatingOptions, 'offset'>, LazyContentOptions, OpenChangeProps {
+    /** 是否打开：父级可以写 _open={x}；Esc、点击外部、执行菜单项都会关闭并写回 */
+    _open?: boolean;
+    /** 弹出位置，默认 bottom-start；空间不够时自动翻转 */
+    placement?: FloatingPlacement;
+    /** 字号档位，菜单项随之缩放；不写时继承上下文字号 */
+    size?: TextSize;
+    /** 菜单项按下时的波纹；不写时沿用 createUi / Provider 的 ripple */
+    ripple?: boolean;
+    /** 触发器：`(props) => <Button {...props}>操作</Button>`；ContextMenu 不用触发器时返回 null */
+    trigger: (props: MenuTriggerProps) => VNodeChild;
+    /** 从视口里这个点弹出（右键菜单的指针位置），不以触发器为锚点；关闭后焦点由使用方安排 */
+    point?: {
+        x: number;
+        y: number;
+    };
+    /** 菜单项：MenuItem、MenuLinkItem、MenuCheckboxItem、MenuRadioGroup、MenuGroup、MenuSub、Separator */
+    children?: VNodeChild;
+}
+/** Menu 的样式：panel、content、label、indicator、hidden、shortcut、groupLabel */
+export declare const menuStyles: Readonly<{
+    content: css.CompiledStyles;
+    description: css.CompiledStyles;
+    groupLabel: css.CompiledStyles;
+    hidden: css.CompiledStyles;
+    indicator: css.CompiledStyles;
+    label: css.CompiledStyles;
+    panel: css.CompiledStyles;
+    shortcut: css.CompiledStyles;
+    text: css.CompiledStyles;
+}>;
+/** 菜单：触发器 + 弹出的一列菜单项 */
+export declare const Menu: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MenuProps>;
+/** 菜单项内容（图标、文字、快捷键）的选项，各种菜单项共有 */
+export interface MenuItemContentProps {
+    /** 文字前的图标 */
+    icon?: IconData;
+    /**
+     * 快捷键：`'Mod+D'`（Mod 在 macOS 上是 ⌘，其他系统是 Ctrl，写法见 useHotkeys）。右侧显示成当前系统的写法；
+     * MenuItem、MenuCheckboxItem、MenuRadioItem 在菜单挂载期间注册它（菜单不必打开），按下时执行这一项；
+     * 读屏从菜单项的 aria-keyshortcuts 得知快捷键
+     */
+    shortcut?: string;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 文字层的部件属性 */
+    propsLabel?: PartProps<'span'>;
+    /** 快捷键提示的部件属性 */
+    propsShortcut?: Partial<TextProps>;
+    /** 文字下方的说明（第二行，弱化）：读屏把它当作这一项的描述（aria-describedby），不算进名称 */
+    description?: VNodeChild;
+    /** 说明的部件属性 */
+    propsDescription?: Partial<TextProps>;
+    children?: VNodeChild;
+}
+/** 复选、单选项的标记：占一列，没勾选时只占位，各项文字对齐 */
+export interface MenuItemMark {
+    /** 勾选时显示的图标 */
+    icon: IconData;
+    /** 是否勾选 */
+    checked: boolean;
+    /** 标记图标的部件属性 */
+    props?: Partial<IconProps>;
+}
+/** 有说明的菜单项：文字与说明各自的 id（名称只取文字，说明作为描述） */
+export interface MenuItemContentIds {
+    /** 文字的 id：菜单项的 aria-labelledby */
+    label: string;
+    /** 说明的 id：菜单项的 aria-describedby */
+    description: string;
+}
+/** 菜单项文字与说明的 id；在菜单项的 setup 里调用 */
+export declare function useMenuItemContentIds(): MenuItemContentIds;
+/** 有说明时菜单项的名称只取文字、说明作为描述；没有说明时名称就是全部内容 */
+export declare function menuItemDescribedBy(description: VNodeChild | undefined, ids: MenuItemContentIds): {
+    'aria-labelledby'?: undefined;
+    'aria-describedby'?: undefined;
+} | {
+    'aria-labelledby': string;
+    'aria-describedby': string;
+};
+/** 菜单项的内容：标记 + 图标 + 文字（与说明）+ 快捷键 */
+export declare function menuItemContent({ icon, shortcut, description, propsIcon, propsLabel, propsShortcut, propsDescription, children, }: MenuItemContentProps, mark?: MenuItemMark, ids?: MenuItemContentIds): VNodeChild;
+/** 菜单项的色调：菜单里只区分普通操作与破坏性操作，其余状态色会让一列选项显得像警报 */
+export type MenuItemTone = 'neutral' | 'danger';
+/** 菜单项的外观：幽灵按钮，内容靠起始边排列 */
+export declare function menuItemSx(tone: MenuItemTone, disabled: boolean): SxStyles;
+/** 菜单项共用的：所在的菜单、按下的波纹（链接项用；按钮项由 ButtonBase 给出）、执行后关闭菜单 */
+export declare function useMenuItem(): {
+    menu: MenuState;
+    ripple: import("..").RippleHandlers;
+    close: (event?: Event) => void;
+};
+/** 按钮类菜单项共有的属性；未声明的属性落到 button 上 */
+export interface MenuButtonItemProps extends PartProps<'button', 'role' | 'type' | 'disabled' | 'aria-checked' | 'onSelect'>, MenuItemContentProps {
+    /** 不可用：跳过方向键移动，不能执行 */
+    disabled?: boolean;
+    /** 执行后是否关闭菜单 */
+    closeOnSelect?: boolean;
+}
+/** 未声明的属性落到 button（role="menuitem"）上 */
+export interface MenuItemProps extends MenuButtonItemProps {
+    /** 色调：删除等破坏性操作用 danger，默认 neutral */
+    tone?: MenuItemTone;
+    /** 执行（点击、Enter、空格）时调用；默认随后关闭菜单 */
+    onAction?: () => void;
+}
+/** 普通菜单项：执行一个操作 */
+export declare const MenuItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MenuItemProps>;
+/** 未声明的属性落到 a（role="menuitem"）上 */
+export interface MenuLinkItemProps extends PartProps<'a', 'role' | 'aria-disabled'>, MenuItemContentProps {
+    /** 地址：站内链接经路由适配跳转，新标签页打开等照常交给浏览器 */
+    href: string;
+    /** 不可用：去掉 href，跳过方向键移动 */
+    disabled?: boolean;
+}
+/** 链接菜单项（a）：跳转到一个地址，随后关闭菜单 */
+export declare const MenuLinkItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MenuLinkItemProps>;
+/** 未声明的属性落到 button（role="menuitemcheckbox"）上 */
+export interface MenuCheckboxItemProps extends MenuButtonItemProps {
+    /** 是否勾选：父级写 _checked={x} */
+    _checked?: boolean;
+    /** 勾选标记的部件属性 */
+    propsIndicator?: Partial<IconProps>;
+}
+/** 复选菜单项：切换一个开关；默认执行后不关闭菜单 */
+export declare const MenuCheckboxItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MenuCheckboxItemProps>;
+/** 未声明的属性落到分组的 div（role="group"）上 */
+export interface MenuGroupProps extends PartProps<'div', 'role'> {
+    /** 分组的标题（显示在组内第一行，同时是分组的名称） */
+    label?: VNodeChild;
+    /** 标题的部件属性 */
+    propsLabel?: Partial<TextProps>;
+    children?: VNodeChild;
+}
+/** 菜单里的一组项，带可选的标题 */
+export declare const MenuGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MenuGroupProps>;
+/** 未声明的属性落到分组的 div（role="group"）上 */
+export interface MenuRadioGroupProps extends MenuGroupProps {
+    /** 选中项的值：父级写 _value={x} */
+    _value?: string;
+}
+/** 一组单选菜单项：同一时间只选中一项 */
+export declare const MenuRadioGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MenuRadioGroupProps>;
+/** 未声明的属性落到 button（role="menuitemradio"）上 */
+export interface MenuRadioItemProps extends MenuButtonItemProps {
+    /** 这一项的值 */
+    value: string;
+    /** 选中标记的部件属性 */
+    propsIndicator?: Partial<IconProps>;
+}
+/** 单选菜单项：放在 MenuRadioGroup 里；默认执行后关闭菜单 */
+export declare const MenuRadioItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MenuRadioItemProps>;
+/** 未声明的属性落到打开子菜单的 button（role="menuitem"）上 */
+export interface MenuSubProps extends PartProps<'button', 'role' | 'type' | 'disabled' | 'aria-haspopup' | 'aria-expanded' | 'aria-controls'>, Omit<MenuItemContentProps, 'shortcut' | 'propsShortcut' | 'children'>, OpenChangeProps {
+    /** 这一项的文字 */
+    label: VNodeChild;
+    /** 不可用：不能打开子菜单 */
+    disabled?: boolean;
+    /** 子菜单是否打开：父级可以写 _open={x} */
+    _open?: boolean;
+    /** 子菜单（role="menu" 的 div）的部件属性 */
+    propsPanel?: PartProps<'div', 'id' | 'popover' | 'role'>;
+    /** 右侧箭头的部件属性 */
+    propsChevron?: Partial<IconProps>;
+    /** 子菜单里的项 */
+    children?: VNodeChild;
+}
+/**
+ * 子菜单：菜单里的一项，打开另一列菜单（WAI-ARIA 的子菜单）。→（从右到左排版时 ←）、Enter、空格打开并聚焦第一项，
+ * 子菜单里 ←（→）或 Esc 关闭并回到这一项；指针停一会儿打开，朝子菜单斜着移动时经过别的项也不关（安全三角）。
+ * 子菜单里执行一项后，整串菜单都关闭。
+ *
+ *   <MenuSub label="分享" icon={Share}>
+ *     <MenuItem onAction={copyLink}>复制链接</MenuItem>
+ *   </MenuSub>
+ */
+export declare const MenuSub: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MenuSubProps>;