@zerodep-dev/vue-tsx-pro-mobile 0.0.0-stage → 0.4.0

package/dist/overlay/ActionSheet.js

@@ -0,0 +1,164 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, hasContent, mergeAttrs, mergePartProps, mergeProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Loading } from "../feedback/Loading.js";
+import { Popup } from "./Popup.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, childrenProp, childrenStable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+//#region src/overlay/ActionSheet.tsx
+/** 一个操作项 */
+/** 关闭的原因 */
+/** 未声明的属性落到面板（弹出层的 div）上 */
+/** ActionSheet 的样式：header、title、description、action、各色调、actionDescription、gap、cancel */
+var actionSheetStyles = css.create({
+	header: {
+		paddingBlock: "1em",
+		paddingInline: "_lg",
+		textAlign: "center",
+		borderBlockEndWidth: "_hairline",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_border"
+	},
+	title: {
+		fontSize: "_lg",
+		fontWeight: "_semibold",
+		lineHeight: "_tight",
+		color: "_text"
+	},
+	description: {
+		marginBlockStart: "0.4em",
+		fontSize: "_sm",
+		color: "_textMuted"
+	},
+	action: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "100%",
+		minHeight: "3.5em",
+		paddingBlock: "0.7em",
+		paddingInline: "_lg",
+		margin: 0,
+		borderWidth: 0,
+		backgroundColor: {
+			default: "_surface",
+			":active:not([data-disabled]):not([data-loading])": "_fillActive"
+		},
+		color: "_text",
+		fontFamily: "inherit",
+		fontSize: "_lg",
+		lineHeight: "1.4",
+		textAlign: "center",
+		cursor: {
+			default: "pointer",
+			"[data-disabled]": "not-allowed"
+		},
+		opacity: {
+			default: 1,
+			"[data-disabled]": "_disabled"
+		},
+		transitionProperty: "background-color",
+		transitionDuration: "_xs"
+	},
+	accent: { color: "_accentText" },
+	danger: { color: "_dangerText" },
+	name: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.4em"
+	},
+	actionDescription: {
+		marginBlockStart: "0.2em",
+		fontSize: "_xs",
+		color: "_textMuted"
+	},
+	gap: {
+		height: "0.5em",
+		backgroundColor: "_background"
+	}
+});
+/** 动作面板（弹出层 > 标题 + 操作项 + 取消） */
+var ActionSheet = /*#__PURE__*/ _component((_props, _ctx) => {
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const actions = readonlyProp(_props, "actions", () => []);
+	const title = readonlyProp(_props, "title");
+	const description = readonlyProp(_props, "description");
+	const showCancel = readonlyProp(_props, "showCancel", true);
+	const cancelText = readonlyProp(_props, "cancelText");
+	const closeOnSelect = readonlyProp(_props, "closeOnSelect", true);
+	const closeOnOverlay = readonlyProp(_props, "closeOnOverlay", true);
+	const onSelect = readonlyProp(_props, "onSelect");
+	const onCancel = readonlyProp(_props, "onCancel");
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const children = childrenProp(_props);
+	const propsPopup = readonlyProp(_props, "propsPopup");
+	const propsAction = readonlyProp(_props, "propsAction");
+	const propsCancel = readonlyProp(_props, "propsCancel");
+	const rest = restProps(_props, _ctx, false);
+	const config = useConfig();
+	const close = (reason) => {
+		open.value = false;
+		onOpenChange.value?.(false, { reason });
+	};
+	const cancel = (reason) => {
+		onCancel.value?.();
+		close(reason);
+	};
+	const select = (action, index) => {
+		if (action.disabled || action.loading) return;
+		onSelect.value?.(action, index);
+		if (closeOnSelect.value) close("select");
+	};
+	return () => createVNode(Popup, mergeJsxProps(mergePartProps({
+		_open: open.value,
+		position: "bottom",
+		round: true,
+		closeOnOverlay: closeOnOverlay.value,
+		onOpenChange: (next, { reason }) => !next && reason === "overlay" && cancel("overlay")
+	}, mergeProps(rest, propsPopup.value)), { "key": "__site0" }), {
+		default: () => [
+			(hasContent(title.value) || hasContent(description.value)) && createVNode("div", mergeAttrs({ sx: actionSheetStyles.header }), [hasContent(title.value) && createVNode("div", mergeAttrs({ sx: actionSheetStyles.title }), [title.value]), hasContent(description.value) && createVNode("div", mergeAttrs({ sx: actionSheetStyles.description }), [description.value])]),
+			hasContent(children.value) ? children.value : actions.value.map((action, index) => createVNode("button", mergeAttrs({ sx: [actionSheetStyles.action, css.select(() => action.tone && actionSheetStyles[action.tone])] }, propsAction.value, {
+				type: "button",
+				"aria-disabled": action.disabled ? "true" : void 0,
+				"aria-busy": action.loading ? "true" : void 0,
+				onClick: () => select(action, index),
+				...dataAttrs({
+					"data-disabled": action.disabled,
+					"data-loading": action.loading
+				})
+			}), [action.loading ? createVNode(Loading, { "size": 20 }, null) : createVNode("span", mergeAttrs({ sx: actionSheetStyles.name }), [action.icon && createVNode(Icon, { "icon": action.icon }, null), action.name]), hasContent(action.description) && !action.loading && createVNode("span", mergeAttrs({ sx: actionSheetStyles.actionDescription }), [action.description])])),
+			showCancel.value && [createVNode("div", mergeAttrs({ sx: actionSheetStyles.gap }), null), createVNode("button", mergeAttrs({ sx: actionSheetStyles.action }, propsCancel.value, {
+				type: "button",
+				onClick: () => cancel("cancel")
+			}), [cancelText.value ?? config.lang.cancel])]
+		],
+		$stable: childrenStable()
+	});
+}, {
+	name: "ActionSheet",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"actions",
+		"title",
+		"description",
+		"showCancel",
+		"cancelText",
+		"closeOnSelect",
+		"closeOnOverlay",
+		"onSelect",
+		"onCancel",
+		"onOpenChange",
+		"propsPopup",
+		"propsAction",
+		"propsCancel"
+	]
+});
+//#endregion
+export { ActionSheet, actionSheetStyles };
+
+//# sourceMappingURL=ActionSheet.js.map

package/dist/overlay/ActionSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionSheet.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","_vtp_childrenStable"],"sources":["../../src/overlay/ActionSheet.tsx"],"sourcesContent":["/**\n * 动作面板：从底部弹出的一列操作（标题、操作项、隔开的取消），用来让用户从几个操作里选一个。\n *\n *   <ActionSheet\n *     _open={show}\n *     title=\"分享到\"\n *     actions={[{ name: '微信' }, { name: '朋友圈' }, { name: '删除', tone: 'danger' }]}\n *     onSelect={(action, index) => …}\n *   />\n *\n * 选了之后默认关闭；有 children 时显示自定义内容，不渲染操作项。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { Loading } from '../feedback/Loading';\nimport {\n  dataAttrs,\n  hasContent,\n  mergeAttrs,\n  mergePartProps,\n  mergeProps,\n  type PartProps,\n} from '../utils/props';\nimport { Popup, type PopupProps } from './Popup';\n\n/** 一个操作项 */\nexport interface ActionSheetAction {\n  /** 名称 */\n  name: VNodeChild;\n  /** 名称下的说明 */\n  description?: VNodeChild;\n  /** 名称前的图标 */\n  icon?: IconData;\n  /** 色调：删除这类操作用 danger */\n  tone?: 'accent' | 'danger';\n  /** 禁用 */\n  disabled?: boolean;\n  /** 加载中：显示转圈，不能选 */\n  loading?: boolean;\n}\n\n/** 关闭的原因 */\nexport type ActionSheetCloseReason = 'select' | 'cancel' | 'overlay';\n\n/** 未声明的属性落到面板（弹出层的 div）上 */\nexport interface ActionSheetProps extends Omit<PartProps<'div', 'role'>, 'title' | 'onSelect'> {\n  /** 是否打开；双向绑定写 `_open={x}` */\n  _open?: boolean;\n  /** 操作项 */\n  actions?: ActionSheetAction[];\n  /** 标题 */\n  title?: VNodeChild;\n  /** 标题下的说明 */\n  description?: VNodeChild;\n  /**\n   * 显示取消\n   * @default true\n   */\n  showCancel?: boolean;\n  /** 取消的文字；不给时用语言包的\"取消\" */\n  cancelText?: VNodeChild;\n  /**\n   * 选了之后关闭\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * 点遮罩关闭（等于取消）\n   * @default true\n   */\n  closeOnOverlay?: boolean;\n  /** 选了一项 */\n  onSelect?: (action: ActionSheetAction, index: number) => void;\n  /** 点了取消（或点遮罩关闭） */\n  onCancel?: () => void;\n  /** 关闭时带原因 */\n  onOpenChange?: (open: boolean, details: { reason: ActionSheetCloseReason }) => void;\n  /** 自定义内容（代替操作项） */\n  children?: VNodeChild;\n  /** 弹出层的部件属性 */\n  propsPopup?: Partial<PopupProps>;\n  /** 每个操作项（button）的部件属性 */\n  propsAction?: PartProps<'button'>;\n  /** 取消（button）的部件属性 */\n  propsCancel?: PartProps<'button'>;\n}\n\n/** ActionSheet 的样式：header、title、description、action、各色调、actionDescription、gap、cancel */\nexport const actionSheetStyles = css.create({\n  header: {\n    paddingBlock: '1em',\n    paddingInline: '_lg',\n    textAlign: 'center',\n    borderBlockEndWidth: '_hairline',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n  },\n  title: { fontSize: '_lg', fontWeight: '_semibold', lineHeight: '_tight', color: '_text' },\n  description: { marginBlockStart: '0.4em', fontSize: '_sm', color: '_textMuted' },\n  action: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '100%',\n    minHeight: '3.5em',\n    paddingBlock: '0.7em',\n    paddingInline: '_lg',\n    margin: 0,\n    borderWidth: 0,\n    backgroundColor: {\n      default: '_surface',\n      ':active:not([data-disabled]):not([data-loading])': '_fillActive',\n    },\n    color: '_text',\n    fontFamily: 'inherit',\n    fontSize: '_lg',\n    lineHeight: '1.4',\n    textAlign: 'center',\n    cursor: { default: 'pointer', '[data-disabled]': 'not-allowed' },\n    opacity: { default: 1, '[data-disabled]': '_disabled' },\n    transitionProperty: 'background-color',\n    transitionDuration: '_xs',\n  },\n  accent: { color: '_accentText' },\n  danger: { color: '_dangerText' },\n  name: { display: 'inline-flex', alignItems: 'center', gap: '0.4em' },\n  actionDescription: { marginBlockStart: '0.2em', fontSize: '_xs', color: '_textMuted' },\n  gap: { height: '0.5em', backgroundColor: '_background' },\n});\n\n/** 动作面板（弹出层 > 标题 + 操作项 + 取消） */\nexport const ActionSheet = _component(\n  ({\n    _open: open = _bindable(false),\n    actions = [],\n    title,\n    description,\n    showCancel = true,\n    cancelText,\n    closeOnSelect = true,\n    closeOnOverlay = true,\n    onSelect,\n    onCancel,\n    onOpenChange,\n    children,\n    propsPopup,\n    propsAction,\n    propsCancel,\n    ...rest\n  }: ActionSheetProps) => {\n    const config = useConfig();\n    const close = (reason: ActionSheetCloseReason) => {\n      open = false;\n      onOpenChange?.(false, { reason });\n    };\n    const cancel = (reason: 'cancel' | 'overlay') => {\n      onCancel?.();\n      close(reason);\n    };\n    const select = (action: ActionSheetAction, index: number) => {\n      if (action.disabled || action.loading) return;\n      onSelect?.(action, index);\n      if (closeOnSelect) close('select');\n    };\n    return () => (\n      <Popup\n        {...mergePartProps<PopupProps>(\n          {\n            _open: open,\n            position: 'bottom',\n            round: true,\n            closeOnOverlay,\n            onOpenChange: (next, { reason }) => !next && reason === 'overlay' && cancel('overlay'),\n          },\n          mergeProps<PopupProps>(rest as Partial<PopupProps>, propsPopup) as Partial<PopupProps>,\n        )}\n      >\n        {(hasContent(title) || hasContent(description)) && (\n          <div {...mergeAttrs<'div'>({ sx: actionSheetStyles.header })}>\n            {hasContent(title) && (\n              <div {...mergeAttrs<'div'>({ sx: actionSheetStyles.title })}>{title}</div>\n            )}\n            {hasContent(description) && (\n              <div {...mergeAttrs<'div'>({ sx: actionSheetStyles.description })}>{description}</div>\n            )}\n          </div>\n        )}\n        {hasContent(children)\n          ? children\n          : actions.map((action, index) => (\n              <button\n                {...mergeAttrs<'button'>(\n                  { sx: [actionSheetStyles.action, action.tone && actionSheetStyles[action.tone]] },\n                  propsAction,\n                  {\n                    type: 'button',\n                    'aria-disabled': action.disabled ? 'true' : undefined,\n                    'aria-busy': action.loading ? 'true' : undefined,\n                    onClick: () => select(action, index),\n                    ...dataAttrs({\n                      'data-disabled': action.disabled,\n                      'data-loading': action.loading,\n                    }),\n                  },\n                )}\n              >\n                {action.loading ? (\n                  <Loading size={20} />\n                ) : (\n                  <span {...mergeAttrs<'span'>({ sx: actionSheetStyles.name })}>\n                    {action.icon && <Icon icon={action.icon} />}\n                    {action.name}\n                  </span>\n                )}\n                {hasContent(action.description) && !action.loading && (\n                  <span {...mergeAttrs<'span'>({ sx: actionSheetStyles.actionDescription })}>\n                    {action.description}\n                  </span>\n                )}\n              </button>\n            ))}\n        {showCancel && [\n          <div {...mergeAttrs<'div'>({ sx: actionSheetStyles.gap })} />,\n          <button\n            {...mergeAttrs<'button'>({ sx: actionSheetStyles.action }, propsCancel, {\n              type: 'button',\n              onClick: () => cancel('cancel'),\n            })}\n          >\n            {cancelText ?? config.lang.cancel}\n          </button>,\n        ]}\n      </Popup>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/overlay/Overlay.d.ts

@@ -0,0 +1,35 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到遮罩（div）上 */
+export interface OverlayProps extends PartProps<'div'> {
+    /** 是否显示；双向绑定写 `_open={x}` */
+    _open?: boolean;
+    /**
+     * 点遮罩关闭
+     * @default true
+     */
+    closeOnClick?: boolean;
+    /**
+     * 打开时锁住页面滚动
+     * @default true
+     */
+    lockScroll?: boolean;
+    /**
+     * 渲染到宿主的浮层根；弹出层自己已经 Teleport 时传 false
+     * @default true
+     */
+    teleport?: boolean;
+    /** 点了遮罩（关闭之前） */
+    onClick?: (event: Event) => void;
+    /** 遮罩里居中显示的内容 */
+    children?: VNodeChild;
+}
+/** Overlay 的样式：root */
+export declare const overlayStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** 在打开期间锁住页面滚动 */
+export declare function useLockScroll(locked: () => boolean): void;
+/** 遮罩（div，渲染到浮层根） */
+export declare const Overlay: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<OverlayProps>;

package/dist/overlay/Overlay.js

@@ -0,0 +1,85 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { useHost } from "../utils/host.js";
+import { usePresence } from "../utils/presence.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Teleport, createVNode, isVNode, onBeforeUnmount, watch } from "vue";
+//#region src/overlay/Overlay.tsx
+/** 未声明的属性落到遮罩（div）上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Overlay 的样式：root */
+var overlayStyles = css.create({ root: {
+	position: "fixed",
+	inset: 0,
+	zIndex: 2e3,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	backgroundColor: "_overlay",
+	opacity: {
+		default: 0,
+		"[data-state=\"open\"]": 1
+	},
+	transitionProperty: "opacity",
+	transitionDuration: "_lg",
+	transitionTimingFunction: "_standard"
+} });
+/** 在打开期间锁住页面滚动 */
+function useLockScroll(locked) {
+	const host = useHost();
+	let release;
+	const update = (next) => {
+		if (next && !release) release = host.lockScroll();
+		else if (!next && release) {
+			release();
+			release = void 0;
+		}
+	};
+	watch(locked, update, { immediate: true });
+	onBeforeUnmount(() => update(false));
+}
+/** 遮罩（div，渲染到浮层根） */
+var Overlay = /*#__PURE__*/ _component((_props, _ctx) => {
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const closeOnClick = readonlyProp(_props, "closeOnClick", true);
+	const lockScroll = readonlyProp(_props, "lockScroll", true);
+	const teleport = readonlyProp(_props, "teleport", true);
+	const onClick = readonlyProp(_props, "onClick");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const host = useHost();
+	const config = useConfig();
+	const presence = usePresence(() => open.value);
+	useLockScroll(() => open.value && lockScroll.value);
+	return () => {
+		if (!presence.mounted) return null;
+		const mask = createVNode("div", mergeAttrs({ sx: [config.rootSx, overlayStyles.root] }, rest, {
+			onClick: (event) => {
+				onClick.value?.(event);
+				if (closeOnClick.value && !event.defaultPrevented) open.value = false;
+			},
+			...dataAttrs({
+				"data-state": presence.visible ? "open" : "closed",
+				"data-scroll-lock": true
+			})
+		}), [children.value]);
+		return teleport.value ? createVNode(Teleport, { "to": host.overlayRoot() }, _isSlot(mask) ? mask : { default: () => [mask] }) : mask;
+	};
+}, {
+	name: "Overlay",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"closeOnClick",
+		"lockScroll",
+		"teleport",
+		"onClick"
+	]
+});
+//#endregion
+export { Overlay, overlayStyles, useLockScroll };
+
+//# sourceMappingURL=Overlay.js.map

package/dist/overlay/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["/**\n * 遮罩：盖住整个页面的半透明层，弹出层、对话框在它上面。打开时锁住页面滚动，点了默认关闭。\n *\n *   <Overlay _open={show} />\n *   <Overlay _open={loading} closeOnClick={false}><Loading … /></Overlay>\n *\n * 渲染到宿主的浮层根（H5 是 body，小程序是页面根节点下的浮层节点），进出场是淡入淡出。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Teleport, onBeforeUnmount, watch, type VNodeChild } from 'vue';\nimport { useConfig } from '../config/context';\nimport { useHost } from '../utils/host';\nimport { usePresence } from '../utils/presence';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到遮罩（div）上 */\nexport interface OverlayProps extends PartProps<'div'> {\n  /** 是否显示；双向绑定写 `_open={x}` */\n  _open?: boolean;\n  /**\n   * 点遮罩关闭\n   * @default true\n   */\n  closeOnClick?: boolean;\n  /**\n   * 打开时锁住页面滚动\n   * @default true\n   */\n  lockScroll?: boolean;\n  /**\n   * 渲染到宿主的浮层根；弹出层自己已经 Teleport 时传 false\n   * @default true\n   */\n  teleport?: boolean;\n  /** 点了遮罩（关闭之前） */\n  onClick?: (event: Event) => void;\n  /** 遮罩里居中显示的内容 */\n  children?: VNodeChild;\n}\n\n/** Overlay 的样式：root */\nexport const overlayStyles = css.create({\n  root: {\n    position: 'fixed',\n    inset: 0,\n    zIndex: 2000,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: '_overlay',\n    opacity: { default: 0, '[data-state=\"open\"]': 1 },\n    transitionProperty: 'opacity',\n    transitionDuration: '_lg',\n    transitionTimingFunction: '_standard',\n  },\n});\n\n/** 在打开期间锁住页面滚动 */\nexport function useLockScroll(locked: () => boolean) {\n  const host = useHost();\n  let release: (() => void) | undefined;\n  const update = (next: boolean) => {\n    if (next && !release) release = host.lockScroll();\n    else if (!next && release) {\n      release();\n      release = undefined;\n    }\n  };\n  watch(locked, update, { immediate: true });\n  onBeforeUnmount(() => update(false));\n}\n\n/** 遮罩（div，渲染到浮层根） */\nexport const Overlay = _component(\n  ({\n    _open: open = _bindable(false),\n    closeOnClick = true,\n    lockScroll = true,\n    teleport = true,\n    onClick,\n    children,\n    ...rest\n  }: OverlayProps) => {\n    const host = useHost();\n    const config = useConfig();\n    const presence = usePresence(() => open);\n    useLockScroll(() => open && lockScroll);\n    return () => {\n      if (!presence.mounted) return null;\n      const mask = (\n        <div\n          {...mergeAttrs<'div'>({ sx: [config.rootSx, overlayStyles.root] }, rest, {\n            onClick: (event: Event) => {\n              onClick?.(event);\n              if (closeOnClick && !event.defaultPrevented) open = false;\n            },\n            ...dataAttrs({\n              'data-state': presence.visible ? 'open' : 'closed',\n              // 小程序里遮罩 catch 掉 touchmove，挡住下面页面的滚动\n              'data-scroll-lock': true,\n            }),\n          })}\n        >\n          {children}\n        </div>\n      );\n      return teleport ? <Teleport to={host.overlayRoot() as never}>{mask}</Teleport> : mask;\n    };\n  },\n);\n"],"mappings":";;;;;;;;;AAgBA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AA0BA,IAAa,gBAAgB,IAAI,OAAO,EACtC,MAAM;CACJ,UAAU;CACV,OAAO;CACP,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,iBAAiB;CACjB,SAAS;EAAE,SAAS;EAAG,yBAAuB;CAAE;CAChD,oBAAoB;CACpB,oBAAoB;CACpB,0BAA0B;AAC5B,EACF,CAAC;;AAGD,SAAgB,cAAc,QAAuB;CACnD,MAAM,OAAO,QAAQ;CACrB,IAAI;CACJ,MAAM,UAAU,SAAkB;EAChC,IAAI,QAAQ,CAAC,SAAS,UAAU,KAAK,WAAW;OAC3C,IAAI,CAAC,QAAQ,SAAS;GACzB,QAAQ;GACR,UAAU,KAAA;EACZ;CACF;CACA,MAAM,QAAQ,QAAQ,EAAE,WAAW,KAAK,CAAC;CACzC,sBAAsB,OAAO,KAAK,CAAC;AACrC;;AAGA,IAAa,UAAU,0BACrB,QAAA,SAQoB;CAAA,MAAA,OAAAC,SAAA,QAAA,eAPM,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,gBACd,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,cACN,IAAI;CAAA,MAAA,WAAAA,aAAA,QAAA,YACN,IAAI;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAGZ,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,UAAU;CACzB,MAAM,WAAW,kBAAY,KAAA,KAAU;CACvC,oBAAoB,KAAA,SAAA,WAAA,KAAkB;CACtC,aAAa;EACX,IAAI,CAAC,SAAS,SAAS,OAAO;EAC9B,MAAM,OAAIC,YAAA,OAEF,WAAkB,EAAE,IAAI,CAAC,OAAO,QAAQ,cAAc,IAAI,EAAE,GAAG,MAAM;GACvE,UAAU,UAAiB;IACzB,QAAA,QAAU,KAAK;IACf,IAAI,aAAA,SAAgB,CAAC,MAAM,kBAAkB,KAAA,QAAO;GACtD;GACA,GAAG,UAAU;IACX,cAAc,SAAS,UAAU,SAAS;IAE1C,oBAAoB;GACtB,CAAC;EACH,CAAC,GAAC,CAAA,SAAA,KAAA,CAAA;EAKN,OAAO,SAAA,QAAAA,YAAA,UAAA,EAAA,MAAyB,KAAK,YAAY,EAAC,GAAA,QAAY,IAAI,IAAJ,OAAI,EAAA,eAAA,CAAJ,IAAI,EAAA,CAAA,IAAe;CACnF;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/overlay/Popup.d.ts

@@ -0,0 +1,76 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type OverlayProps } from './Overlay';
+/** 弹出的位置 */
+export interface PopupPositions {
+    /** 屏幕中间，缩放淡入 */
+    center: unknown;
+    /** 从底部滑入 */
+    bottom: unknown;
+    /** 从顶部滑入 */
+    top: unknown;
+    /** 从起始边（左）滑入，占满高度 */
+    left: unknown;
+    /** 从结束边（右）滑入，占满高度 */
+    right: unknown;
+}
+/** 关闭的原因 */
+export type PopupCloseReason = 'overlay' | 'close';
+/** 角色与模态由组件管理 */
+export type PopupManaged = 'role' | 'aria-modal';
+/** 未声明的属性落到面板（div）上 */
+export interface PopupProps extends PartProps<'div', PopupManaged> {
+    /** 是否打开；双向绑定写 `_open={x}` */
+    _open?: boolean;
+    /**
+     * 位置
+     * @default 'center'
+     */
+    position?: keyof PopupPositions;
+    /** 圆角（底部弹出时只有上面两个角） */
+    round?: boolean;
+    /** 右上角显示关闭按钮 */
+    closeable?: boolean;
+    /**
+     * 显示遮罩
+     * @default true
+     */
+    overlay?: boolean;
+    /**
+     * 点遮罩关闭
+     * @default true
+     */
+    closeOnOverlay?: boolean;
+    /**
+     * 底部弹出时留出安全区（全面屏底部的横条）
+     * @default true
+     */
+    safeArea?: boolean;
+    /** 打开或关闭；关闭时带原因（点遮罩、点关闭按钮） */
+    onOpenChange?: (open: boolean, details: {
+        reason: PopupCloseReason;
+    }) => void;
+    /** 面板的内容 */
+    children?: VNodeChild;
+    /** 遮罩的部件属性 */
+    propsOverlay?: Partial<OverlayProps>;
+    /** 关闭按钮的部件属性 */
+    propsClose?: PartProps<'button'>;
+}
+/** Popup 的样式：panel、各位置、round、safeArea、close */
+export declare const popupStyles: Readonly<{
+    bottom: css.CompiledStyles;
+    center: css.CompiledStyles;
+    close: css.CompiledStyles;
+    left: css.CompiledStyles;
+    panel: css.CompiledStyles;
+    right: css.CompiledStyles;
+    roundBottom: css.CompiledStyles;
+    roundCenter: css.CompiledStyles;
+    roundTop: css.CompiledStyles;
+    safeArea: css.CompiledStyles;
+    top: css.CompiledStyles;
+}>;
+/** 弹出层（遮罩 + 面板 div[role=dialog]，渲染到浮层根） */
+export declare const Popup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PopupProps>;

package/dist/overlay/Popup.js

@@ -0,0 +1,191 @@
+import { t } from "../theme/tokens.js";
+import { useConfig } from "../config/context.js";
+import { dataAttrs, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { useHost } from "../utils/host.js";
+import { usePresence } from "../utils/presence.js";
+import { Overlay } from "./Overlay.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Teleport, createVNode } from "vue";
+import { X } from "@lucide/icons";
+//#region src/overlay/Popup.tsx
+/**
+* 弹出层：从底部（或顶部、两侧）滑入，或在中间弹出的面板，下面有遮罩。动作面板、选择器、对话框都建在它上面。
+*
+*   <Popup _open={show} position="bottom" round>…</Popup>
+*   <Popup _open={show} closeable onOpenChange={(open, { reason }) => …}>…</Popup>
+*
+* 点遮罩、点右上角的关闭按钮会关闭（onOpenChange 带原因）；底部弹出时留出安全区。
+*/
+/** 弹出的位置 */
+/** 关闭的原因 */
+/** 角色与模态由组件管理 */
+/** 未声明的属性落到面板（div）上 */
+/** Popup 的样式：panel、各位置、round、safeArea、close */
+var popupStyles = css.create({
+	panel: {
+		boxSizing: "border-box",
+		position: "fixed",
+		zIndex: 2e3,
+		maxHeight: "100%",
+		overflowY: "auto",
+		backgroundColor: "_surface",
+		color: "_text",
+		transitionProperty: "transform, opacity",
+		transitionDuration: "_lg",
+		transitionTimingFunction: {
+			default: "_exit",
+			"[data-state=\"open\"]": "_enter"
+		}
+	},
+	center: {
+		insetBlockStart: "50%",
+		insetInlineStart: "50%",
+		width: "max-content",
+		maxWidth: `calc(100% - ${t.space.xxl})`,
+		transform: {
+			default: "translate(-50%, -50%) scale(0.9)",
+			"[data-state=\"open\"]": "translate(-50%, -50%) scale(1)"
+		},
+		opacity: {
+			default: 0,
+			"[data-state=\"open\"]": 1
+		}
+	},
+	bottom: {
+		insetInline: 0,
+		insetBlockEnd: 0,
+		maxHeight: "80%",
+		transform: {
+			default: "translateY(100%)",
+			"[data-state=\"open\"]": "none"
+		}
+	},
+	top: {
+		insetInline: 0,
+		insetBlockStart: 0,
+		maxHeight: "80%",
+		transform: {
+			default: "translateY(-100%)",
+			"[data-state=\"open\"]": "none"
+		}
+	},
+	left: {
+		insetBlock: 0,
+		insetInlineStart: 0,
+		width: "80%",
+		transform: {
+			default: "translateX(-100%)",
+			"[data-state=\"open\"]": "none"
+		}
+	},
+	right: {
+		insetBlock: 0,
+		insetInlineEnd: 0,
+		width: "80%",
+		transform: {
+			default: "translateX(100%)",
+			"[data-state=\"open\"]": "none"
+		}
+	},
+	roundCenter: { borderRadius: "_xl" },
+	roundBottom: {
+		borderStartStartRadius: "_xl",
+		borderStartEndRadius: "_xl"
+	},
+	roundTop: {
+		borderEndStartRadius: "_xl",
+		borderEndEndRadius: "_xl"
+	},
+	safeArea: { paddingBlockEnd: "env(safe-area-inset-bottom)" },
+	close: {
+		position: "absolute",
+		insetBlockStart: "_md",
+		insetInlineEnd: "_md",
+		zIndex: 1,
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "2em",
+		height: "2em",
+		padding: 0,
+		borderWidth: 0,
+		borderRadius: "_full",
+		backgroundColor: {
+			default: "transparent",
+			":active": "_fill"
+		},
+		color: "_textMuted",
+		fontSize: "_xl",
+		cursor: "pointer"
+	}
+});
+/** 弹出层（遮罩 + 面板 div[role=dialog]，渲染到浮层根） */
+var Popup = /*#__PURE__*/ _component((_props, _ctx) => {
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const position = readonlyProp(_props, "position", "center");
+	const round = readonlyProp(_props, "round", false);
+	const closeable = readonlyProp(_props, "closeable", false);
+	const overlay = readonlyProp(_props, "overlay", true);
+	const closeOnOverlay = readonlyProp(_props, "closeOnOverlay", true);
+	const safeArea = readonlyProp(_props, "safeArea", true);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const children = childrenProp(_props);
+	const propsOverlay = readonlyProp(_props, "propsOverlay");
+	const propsClose = readonlyProp(_props, "propsClose");
+	const rest = restProps(_props, _ctx, false);
+	const host = useHost();
+	const config = useConfig();
+	const presence = usePresence(() => open.value);
+	const close = (reason) => {
+		open.value = false;
+		onOpenChange.value?.(false, { reason });
+	};
+	return () => {
+		if (!presence.mounted) return null;
+		const rounded = round.value && (position.value === "center" ? popupStyles.roundCenter : position.value === "bottom" ? popupStyles.roundBottom : position.value === "top" && popupStyles.roundTop);
+		return createVNode(Teleport, { "to": host.overlayRoot() }, { default: () => [overlay.value && createVNode(Overlay, mergePartProps({
+			_open: open.value,
+			teleport: false,
+			closeOnClick: false,
+			onClick: () => closeOnOverlay.value && close("overlay")
+		}, propsOverlay.value), null), createVNode("div", mergeAttrs({ sx: [
+			config.rootSx,
+			popupStyles.panel,
+			popupStyles[position.value],
+			rounded,
+			safeArea.value && position.value === "bottom" && popupStyles.safeArea
+		] }, rest, {
+			role: "dialog",
+			"aria-modal": overlay.value ? "true" : void 0,
+			...dataAttrs({
+				"data-state": presence.visible ? "open" : "closed",
+				"data-position": position.value
+			})
+		}), [closeable.value && createVNode("button", mergeAttrs({ sx: popupStyles.close }, propsClose.value, {
+			type: "button",
+			"aria-label": config.lang.close,
+			onClick: () => close("close")
+		}), [createVNode(Icon, mergePartProps({ icon: X }, void 0), null)]), children.value])] });
+	};
+}, {
+	name: "Popup",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"position",
+		"round",
+		"closeable",
+		"overlay",
+		"closeOnOverlay",
+		"safeArea",
+		"onOpenChange",
+		"propsOverlay",
+		"propsClose"
+	]
+});
+//#endregion
+export { Popup, popupStyles };
+
+//# sourceMappingURL=Popup.js.map

package/dist/overlay/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/overlay/Popup.tsx"],"sourcesContent":["/**\n * 弹出层：从底部（或顶部、两侧）滑入，或在中间弹出的面板，下面有遮罩。动作面板、选择器、对话框都建在它上面。\n *\n *   <Popup _open={show} position=\"bottom\" round>…</Popup>\n *   <Popup _open={show} closeable onOpenChange={(open, { reason }) => …}>…</Popup>\n *\n * 点遮罩、点右上角的关闭按钮会关闭（onOpenChange 带原因）；底部弹出时留出安全区。\n */\nimport { X } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Teleport, type VNodeChild } from 'vue';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { t } from '../theme/tokens';\nimport { useHost } from '../utils/host';\nimport { usePresence } from '../utils/presence';\nimport { dataAttrs, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { Overlay, type OverlayProps } from './Overlay';\n\n/** 弹出的位置 */\nexport interface PopupPositions {\n  /** 屏幕中间，缩放淡入 */\n  center: unknown;\n  /** 从底部滑入 */\n  bottom: unknown;\n  /** 从顶部滑入 */\n  top: unknown;\n  /** 从起始边（左）滑入，占满高度 */\n  left: unknown;\n  /** 从结束边（右）滑入，占满高度 */\n  right: unknown;\n}\n\n/** 关闭的原因 */\nexport type PopupCloseReason = 'overlay' | 'close';\n\n/** 角色与模态由组件管理 */\nexport type PopupManaged = 'role' | 'aria-modal';\n\n/** 未声明的属性落到面板（div）上 */\nexport interface PopupProps extends PartProps<'div', PopupManaged> {\n  /** 是否打开；双向绑定写 `_open={x}` */\n  _open?: boolean;\n  /**\n   * 位置\n   * @default 'center'\n   */\n  position?: keyof PopupPositions;\n  /** 圆角（底部弹出时只有上面两个角） */\n  round?: boolean;\n  /** 右上角显示关闭按钮 */\n  closeable?: boolean;\n  /**\n   * 显示遮罩\n   * @default true\n   */\n  overlay?: boolean;\n  /**\n   * 点遮罩关闭\n   * @default true\n   */\n  closeOnOverlay?: boolean;\n  /**\n   * 底部弹出时留出安全区（全面屏底部的横条）\n   * @default true\n   */\n  safeArea?: boolean;\n  /** 打开或关闭；关闭时带原因（点遮罩、点关闭按钮） */\n  onOpenChange?: (open: boolean, details: { reason: PopupCloseReason }) => void;\n  /** 面板的内容 */\n  children?: VNodeChild;\n  /** 遮罩的部件属性 */\n  propsOverlay?: Partial<OverlayProps>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: PartProps<'button'>;\n}\n\n/** Popup 的样式：panel、各位置、round、safeArea、close */\nexport const popupStyles = css.create({\n  panel: {\n    boxSizing: 'border-box',\n    position: 'fixed',\n    zIndex: 2000,\n    maxHeight: '100%',\n    overflowY: 'auto',\n    backgroundColor: '_surface',\n    color: '_text',\n    transitionProperty: 'transform, opacity',\n    transitionDuration: '_lg',\n    transitionTimingFunction: { default: '_exit', '[data-state=\"open\"]': '_enter' },\n  },\n  center: {\n    insetBlockStart: '50%',\n    insetInlineStart: '50%',\n    width: 'max-content',\n    maxWidth: `calc(100% - ${t.space.xxl})`,\n    transform: {\n      default: 'translate(-50%, -50%) scale(0.9)',\n      '[data-state=\"open\"]': 'translate(-50%, -50%) scale(1)',\n    },\n    opacity: { default: 0, '[data-state=\"open\"]': 1 },\n  },\n  bottom: {\n    insetInline: 0,\n    insetBlockEnd: 0,\n    maxHeight: '80%',\n    transform: { default: 'translateY(100%)', '[data-state=\"open\"]': 'none' },\n  },\n  top: {\n    insetInline: 0,\n    insetBlockStart: 0,\n    maxHeight: '80%',\n    transform: { default: 'translateY(-100%)', '[data-state=\"open\"]': 'none' },\n  },\n  left: {\n    insetBlock: 0,\n    insetInlineStart: 0,\n    width: '80%',\n    transform: { default: 'translateX(-100%)', '[data-state=\"open\"]': 'none' },\n  },\n  right: {\n    insetBlock: 0,\n    insetInlineEnd: 0,\n    width: '80%',\n    transform: { default: 'translateX(100%)', '[data-state=\"open\"]': 'none' },\n  },\n  roundCenter: { borderRadius: '_xl' },\n  roundBottom: { borderStartStartRadius: '_xl', borderStartEndRadius: '_xl' },\n  roundTop: { borderEndStartRadius: '_xl', borderEndEndRadius: '_xl' },\n  safeArea: { paddingBlockEnd: 'env(safe-area-inset-bottom)' },\n  close: {\n    position: 'absolute',\n    insetBlockStart: '_md',\n    insetInlineEnd: '_md',\n    zIndex: 1,\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '2em',\n    height: '2em',\n    padding: 0,\n    borderWidth: 0,\n    borderRadius: '_full',\n    backgroundColor: { default: 'transparent', ':active': '_fill' },\n    color: '_textMuted',\n    fontSize: '_xl',\n    cursor: 'pointer',\n  },\n});\n\n/** 弹出层（遮罩 + 面板 div[role=dialog]，渲染到浮层根） */\nexport const Popup = _component(\n  ({\n    _open: open = _bindable(false),\n    position = 'center',\n    round = false,\n    closeable = false,\n    overlay = true,\n    closeOnOverlay = true,\n    safeArea = true,\n    onOpenChange,\n    children,\n    propsOverlay,\n    propsClose,\n    ...rest\n  }: PopupProps) => {\n    const host = useHost();\n    const config = useConfig();\n    const presence = usePresence(() => open);\n    const close = (reason: PopupCloseReason) => {\n      open = false;\n      onOpenChange?.(false, { reason });\n    };\n    return () => {\n      if (!presence.mounted) return null;\n      const rounded =\n        round &&\n        (position === 'center'\n          ? popupStyles.roundCenter\n          : position === 'bottom'\n            ? popupStyles.roundBottom\n            : position === 'top' && popupStyles.roundTop);\n      return (\n        <Teleport to={host.overlayRoot() as never}>\n          {overlay && (\n            <Overlay\n              {...mergePartProps<OverlayProps>(\n                {\n                  _open: open,\n                  teleport: false,\n                  closeOnClick: false,\n                  onClick: () => closeOnOverlay && close('overlay'),\n                },\n                propsOverlay,\n              )}\n            />\n          )}\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  config.rootSx,\n                  popupStyles.panel,\n                  popupStyles[position],\n                  rounded,\n                  safeArea && position === 'bottom' && popupStyles.safeArea,\n                ],\n              },\n              rest,\n              {\n                role: 'dialog',\n                'aria-modal': overlay ? 'true' : undefined,\n                ...dataAttrs({\n                  'data-state': presence.visible ? 'open' : 'closed',\n                  'data-position': position,\n                }),\n              },\n            )}\n          >\n            {closeable && (\n              <button\n                {...mergeAttrs<'button'>({ sx: popupStyles.close }, propsClose, {\n                  type: 'button',\n                  'aria-label': config.lang.close,\n                  onClick: () => close('close'),\n                })}\n              >\n                <Icon {...mergePartProps<IconProps>({ icon: X }, undefined)} />\n              </button>\n            )}\n            {children}\n          </div>\n        </Teleport>\n      );\n    };\n  },\n);\n"],"mappings":"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"}