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

package/dist/theme/tokens.js

@@ -0,0 +1,312 @@
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/theme/tokens.ts
+/**
+* 移动端主题 tokens：组件里的颜色、字体、间距、圆角、阴影、动效都只从这里取，不写裸值。
+* 每组一个 defineVars，变量名是 `--vtm-组名-token`；这里的取值即亮色主题，暗色主题见 dark.ts。
+*
+* 用法同桌面组件库：值整个就是一个 token 时写字符串 '_md'、'_space.md'，文件末尾的 defineTokens 登记各组；
+* 值里夹着 token（计算、多值）时在模板字符串里用 `t`：`` transition: `opacity ${t.durations.md} ${t.easings.standard}` ``。
+*
+* 取舍：
+*   - 配色取自 Radix Colors（与桌面组件库同一套色板，风格一致）：slate 中性色、indigo 品牌色、red 危险、green 成功、amber 警告、blue 信息；
+*     移动端的页面底色比表面深一档（分组列表、卡片浮在灰底上，同 iOS 的分组背景）
+*   - 尺寸、间距、圆角用 em，随组件字号等比缩放；边框宽度用 px（含 0.5px 的细线）
+*   - 字号按 375 宽的设计稿：正文 14、标题 16–18；控件高度由组件按档位给（按钮 24 / 32 / 44 / 50）
+*   - 组名与桌面组件库相同，样式里的短写写法一致；token 短写是全局登记的，同一页面里不要混用两套组件库（MOBILE.md）
+*/
+/** 颜色：slate 中性色、indigo 品牌色、red 危险、green 成功、amber 警告、blue 信息 */
+var colors = css.defineVars("vtm-colors", {
+	/** 页面底色：分组列表、卡片下面的灰底。slate 3：亮色 `#f0f0f3`，暗色 slate 1 `#111113` */
+	background: "#f0f0f3",
+	/** 单元格、卡片、弹出层的表面。亮色白色，暗色 slate 2 `#18191b` */
+	surface: "#ffffff",
+	/** 表面里再分一层：搜索框、步进器、标签的底。slate 2：亮色 `#f9f9fb`，暗色 slate 3 `#212225` */
+	surfaceMuted: "#f9f9fb",
+	/** 填充：弱按钮、开关关闭态、骨架。slate 3：亮色 `#f0f0f3`，暗色 slate 4 `#272a2d` */
+	fill: "#f0f0f3",
+	/** 按下时的底色：单元格、菜单项按住。slate 4：亮色 `#e8e8ec`，暗色 slate 5 `#2e3135` */
+	fillActive: "#e8e8ec",
+	/** 主要文字。slate 12：亮色 `#1c2024`，暗色 `#edeef0` */
+	text: "#1c2024",
+	/** 次要文字、说明、图标。slate 11：亮色 `#60646c`，暗色 `#b0b4ba` */
+	textMuted: "#60646c",
+	/** 占位文字。slate 10：亮色 `#80838d`，暗色 `#777b84` */
+	textPlaceholder: "#80838d",
+	/** 不可用的文字。slate 8：亮色 `#b9bbc6`，暗色 `#5a6169` */
+	textDisabled: "#b9bbc6",
+	/** 分隔线、单元格之间的细线。slate 6：亮色 `#d9d9e0`，暗色 `#363a3f` */
+	border: "#d9d9e0",
+	/** 输入框、描边按钮的边框。slate 7：亮色 `#cdced6`，暗色 `#43484e` */
+	borderStrong: "#cdced6",
+	/** 品牌色：主要按钮、选中、开关打开。indigo 9 `#3e63dd` */
+	accent: "#3e63dd",
+	/** 品牌色按下。indigo 10：亮色 `#3358d4`，暗色 `#3758d4` */
+	accentActive: "#3358d4",
+	/** 品牌色上的文字。白色 */
+	accentContrast: "#ffffff",
+	/** 品牌色的文字（链接、浅色按钮的字）。indigo 11：亮色 `#3a5bc7`，暗色 `#9eb1ff` */
+	accentText: "#3a5bc7",
+	/** 品牌色的浅底。indigo 3：亮色 `#edf2fe`，暗色 `#182449` */
+	accentSoft: "#edf2fe",
+	/** 品牌色的浅底按下。indigo 4：亮色 `#e1e9ff`，暗色 `#1d2e62` */
+	accentSoftActive: "#e1e9ff",
+	/** 品牌色的边框。indigo 7：亮色 `#abbdf9`，暗色 `#3a4f97` */
+	accentBorder: "#abbdf9",
+	/** 危险：删除、错误。red 9：亮色 `#ce2c31`，暗色 `#b54548` */
+	danger: "#ce2c31",
+	/** 危险按下。red 10：亮色 `#b8272c`，暗色 `#a33b3e` */
+	dangerActive: "#b8272c",
+	/** 危险色上的文字。白色 */
+	dangerContrast: "#ffffff",
+	/** 危险的文字。red 11：亮色 `#b8272c`，暗色 `#ff9592` */
+	dangerText: "#b8272c",
+	/** 危险的浅底。red 3：亮色 `#feebec`，暗色 `#3b1219` */
+	dangerSoft: "#feebec",
+	/** 危险的浅底按下。red 4：亮色 `#ffdbdc`，暗色 `#500f1c` */
+	dangerSoftActive: "#ffdbdc",
+	/** 危险的边框。red 7：亮色 `#f4a9aa`，暗色 `#8c333a` */
+	dangerBorder: "#f4a9aa",
+	/** 成功。green 9：亮色 `#008751`，暗色 `#30a46c` */
+	success: "#008751",
+	/** 成功按下。亮色 `#007143`，暗色 `#52af7d` */
+	successActive: "#007143",
+	/** 成功色上的文字。亮色白色，暗色 slate 1 */
+	successContrast: "#ffffff",
+	/** 成功的文字。green 11：亮色 `#193b2d`，暗色 `#3dd68c` */
+	successText: "#193b2d",
+	/** 成功的浅底。green 3：亮色 `#e6f6eb`，暗色 `#132d21` */
+	successSoft: "#e6f6eb",
+	/** 成功的浅底按下。green 4：亮色 `#d6f1df`，暗色 `#113b29` */
+	successSoftActive: "#d6f1df",
+	/** 成功的边框。green 7：亮色 `#8eceaa`，暗色 `#28684a` */
+	successBorder: "#8eceaa",
+	/** 警告。amber 9 `#ffc53d` */
+	warning: "#ffc53d",
+	/** 警告按下。amber 10 `#ffcd5f` */
+	warningActive: "#ffcd5f",
+	/** 警告色上的文字（深色）。亮色 `#4f3422`，暗色 slate 1 */
+	warningContrast: "#4f3422",
+	/** 警告的文字。amber 11：亮色 `#4f3422`，暗色 `#ffca16` */
+	warningText: "#4f3422",
+	/** 警告的浅底。amber 3：亮色 `#fff7c2`，暗色 `#302008` */
+	warningSoft: "#fff7c2",
+	/** 警告的浅底按下。amber 4：亮色 `#ffee9c`，暗色 `#3f2700` */
+	warningSoftActive: "#ffee9c",
+	/** 警告的边框。amber 7：亮色 `#e9c162`，暗色 `#714f19` */
+	warningBorder: "#e9c162",
+	/** 信息。blue 9：亮色 `#0073e0`，暗色 `#0090ff` */
+	info: "#0073e0",
+	/** 信息按下。亮色 `#0060bd`，暗色 `#3d9fff` */
+	infoActive: "#0060bd",
+	/** 信息色上的文字。亮色白色，暗色 slate 1 */
+	infoContrast: "#ffffff",
+	/** 信息的文字。blue 11：亮色 `#113264`，暗色 `#70b8ff` */
+	infoText: "#113264",
+	/** 信息的浅底。blue 3：亮色 `#e6f4fe`，暗色 `#0d2847` */
+	infoSoft: "#e6f4fe",
+	/** 信息的浅底按下。blue 4：亮色 `#d5efff`，暗色 `#003362` */
+	infoSoftActive: "#d5efff",
+	/** 信息的边框。blue 7：亮色 `#8ec8f6`，暗色 `#205d9e` */
+	infoBorder: "#8ec8f6",
+	/** 反色表面：轻提示（Toast）、气泡。亮色 slate 12 `#1c2024`，暗色 slate 12 `#edeef0` */
+	inverseSurface: "#1c2024",
+	/** 反色表面上的文字 */
+	inverseText: "#fcfcfd",
+	/** 遮罩：弹出层、对话框下面的半透明黑。亮色 0.5，暗色 0.7 */
+	overlay: "rgba(0, 0, 0, 0.5)",
+	/** 焦点环（H5 的键盘焦点） */
+	focusRing: "#3e63dd"
+});
+/** 字体族：系统字体优先，数字用等宽数字（组件里 fontVariantNumeric: 'tabular-nums'） */
+var fonts = css.defineVars("vtm-fonts", {
+	/** 正文与标题 */
+	sans: "system-ui, -apple-system, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", sans-serif",
+	/** 代码、验证码这类等宽内容 */
+	mono: "ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace"
+});
+/** 字号（375 宽的设计稿）：组件根元素的字号决定内部尺寸（em） */
+var fontSizes = css.defineVars("vtm-font-sizes", {
+	/** 辅助说明、标签、角标 `12px` */
+	xs: "12px",
+	/** 次要正文、小按钮 `13px` */
+	sm: "13px",
+	/** 正文、单元格 `14px` */
+	md: "14px",
+	/** 按钮、导航栏标题、强调正文 `16px` */
+	lg: "16px",
+	/** 弹窗标题 `18px` */
+	xl: "18px",
+	/** 页面标题 `20px` */
+	xxl: "20px",
+	/** 数值、结果页标题 `24px` */
+	xxxl: "24px"
+});
+/** 字重 */
+var fontWeights = css.defineVars("vtm-font-weights", {
+	/** 常规 `400` */
+	normal: "400",
+	/** 中等：按钮、标签页 `500` */
+	medium: "500",
+	/** 半粗：标题 `600` */
+	semibold: "600",
+	/** 粗：数值 `700` */
+	bold: "700"
+});
+/** 行高（不带单位） */
+var lineHeights = css.defineVars("vtm-line-heights", {
+	/** 单行控件 `1` */
+	none: "1",
+	/** 标题 `1.25` */
+	tight: "1.25",
+	/** 正文 `1.5` */
+	normal: "1.5",
+	/** 长段落 `1.75` */
+	relaxed: "1.75"
+});
+/** 字距 */
+var letterSpacings = css.defineVars("vtm-letter-spacings", {
+	/** 默认 `0` */
+	normal: "0",
+	/** 大号数字、标题略收 `-0.01em` */
+	tight: "-0.01em",
+	/** 全大写的小字略放 `0.02em` */
+	wide: "0.02em"
+});
+/** 间距（em，随字号缩放） */
+var space = css.defineVars("vtm-space", {
+	/** 没有间距 `0` */
+	none: "0",
+	/** 极小：图标与文字之间 `0.25em` */
+	xs: "0.25em",
+	/** 小：紧凑的内边距 `0.5em` */
+	sm: "0.5em",
+	/** 中：常用的间隔 `0.75em` */
+	md: "0.75em",
+	/** 大：单元格的左右内边距 `1em` */
+	lg: "1em",
+	/** 很大：分组之间 `1.5em` */
+	xl: "1.5em",
+	/** 特大：页面区块之间 `2em` */
+	xxl: "2em"
+});
+/** 尺寸 */
+var sizes = css.defineVars("vtm-sizes", {
+	/** 单行控件（输入框、单元格）的最小高度 `2.75em`（14px 字号时 38.5px，16px 时 44px） */
+	control: "2.75em",
+	/** 触控目标的最小尺寸 `44px`（iOS 人机界面指南） */
+	touchTarget: "44px",
+	/** 占满容器 `100%` */
+	full: "100%"
+});
+/** 圆角（em） */
+var radii = css.defineVars("vtm-radii", {
+	/** 直角 `0` */
+	none: "0",
+	/** 极小：角标、复选框 `0.125em` */
+	xs: "0.125em",
+	/** 小：标签、小按钮 `0.25em` */
+	sm: "0.25em",
+	/** 中：按钮、输入框 `0.5em` */
+	md: "0.5em",
+	/** 大：卡片、分组 `0.75em` */
+	lg: "0.75em",
+	/** 很大：弹出层、对话框 `1em` */
+	xl: "1em",
+	/** 全圆：胶囊按钮、头像 `9999px` */
+	full: "9999px"
+});
+/** 边框宽度（px） */
+var borderWidths = css.defineVars("vtm-border-widths", {
+	/** 没有边框 `0` */
+	none: "0",
+	/** 细线：单元格分隔线（高分屏上的半像素） `0.5px` */
+	hairline: "0.5px",
+	/** 常规边框 `1px` */
+	xs: "1px",
+	/** 焦点环、选中描边 `2px` */
+	sm: "2px"
+});
+/** 阴影：亮色主题用，暗色主题靠表面的层级区分 */
+var shadows = css.defineVars("vtm-shadows", {
+	/** 没有阴影 */
+	none: "none",
+	/** 卡片 */
+	sm: "0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px -2px rgba(0, 0, 0, 0.08)",
+	/** 悬浮按钮、吸顶的栏 */
+	md: "0 4px 16px -4px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.08)",
+	/** 弹出层、对话框 */
+	lg: "0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.1)"
+});
+var reduce = "@media (prefers-reduced-motion: reduce)";
+/** 动效时长；系统开了"减少动态效果"时为 0 */
+var durations = css.defineVars("vtm-durations", {
+	/** 没有过渡 `0ms` */
+	none: "0ms",
+	/** 按压反馈 `100ms` */
+	xs: {
+		default: "100ms",
+		[reduce]: "0ms"
+	},
+	/** 颜色、开关 `160ms` */
+	sm: {
+		default: "160ms",
+		[reduce]: "0ms"
+	},
+	/** 展开收起、提示进出 `240ms` */
+	md: {
+		default: "240ms",
+		[reduce]: "0ms"
+	},
+	/** 弹出层滑入滑出 `300ms` */
+	lg: {
+		default: "300ms",
+		[reduce]: "0ms"
+	}
+});
+/** 缓动 */
+var easings = css.defineVars("vtm-easings", {
+	/** 一般的过渡 */
+	standard: "cubic-bezier(0.2, 0, 0, 1)",
+	/** 进场：快出慢停 */
+	enter: "cubic-bezier(0.05, 0.7, 0.1, 1)",
+	/** 离场：慢起快走 */
+	exit: "cubic-bezier(0.3, 0, 0.8, 0.15)"
+});
+/** 不透明度 */
+var opacities = css.defineVars("vtm-opacities", {
+	/** 不可用 `0.5` */
+	disabled: "0.5",
+	/** 按下时叠在内容上的暗层（实底按钮） `0.1` */
+	pressed: "0.1"
+});
+/** SVG 描边宽度（图标） */
+var strokeWidths = css.defineVars("vtm-stroke-widths", {
+	/** 细 `1.5` */
+	sm: "1.5",
+	/** 常规 `2` */
+	md: "2",
+	/** 粗 `2.5` */
+	lg: "2.5"
+});
+/** 各组 token 的变量引用，用在模板字符串里：`` `max(${t.sizes.control}, ${t.sizes.touchTarget})` `` */
+var t = css.defineTokens({
+	colors,
+	fonts,
+	fontSizes,
+	fontWeights,
+	lineHeights,
+	letterSpacings,
+	space,
+	sizes,
+	radii,
+	borderWidths,
+	shadows,
+	durations,
+	easings,
+	opacities,
+	strokeWidths
+});
+//#endregion
+export { borderWidths, colors, durations, easings, fontSizes, fontWeights, fonts, letterSpacings, lineHeights, opacities, radii, shadows, sizes, space, strokeWidths, t };
+
+//# sourceMappingURL=tokens.js.map

package/dist/theme/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/theme/tokens.ts"],"sourcesContent":["/**\n * 移动端主题 tokens：组件里的颜色、字体、间距、圆角、阴影、动效都只从这里取，不写裸值。\n * 每组一个 defineVars，变量名是 `--vtm-组名-token`；这里的取值即亮色主题，暗色主题见 dark.ts。\n *\n * 用法同桌面组件库：值整个就是一个 token 时写字符串 '_md'、'_space.md'，文件末尾的 defineTokens 登记各组；\n * 值里夹着 token（计算、多值）时在模板字符串里用 `t`：`` transition: `opacity ${t.durations.md} ${t.easings.standard}` ``。\n *\n * 取舍：\n *   - 配色取自 Radix Colors（与桌面组件库同一套色板，风格一致）：slate 中性色、indigo 品牌色、red 危险、green 成功、amber 警告、blue 信息；\n *     移动端的页面底色比表面深一档（分组列表、卡片浮在灰底上，同 iOS 的分组背景）\n *   - 尺寸、间距、圆角用 em，随组件字号等比缩放；边框宽度用 px（含 0.5px 的细线）\n *   - 字号按 375 宽的设计稿：正文 14、标题 16–18；控件高度由组件按档位给（按钮 24 / 32 / 44 / 50）\n *   - 组名与桌面组件库相同，样式里的短写写法一致；token 短写是全局登记的，同一页面里不要混用两套组件库（MOBILE.md）\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\n\n/** 颜色：slate 中性色、indigo 品牌色、red 危险、green 成功、amber 警告、blue 信息 */\nexport const colors = css.defineVars('vtm-colors', {\n  // ───────── 背景与表面 ─────────\n\n  /** 页面底色：分组列表、卡片下面的灰底。slate 3：亮色 `#f0f0f3`，暗色 slate 1 `#111113` */\n  background: '#f0f0f3',\n  /** 单元格、卡片、弹出层的表面。亮色白色，暗色 slate 2 `#18191b` */\n  surface: '#ffffff',\n  /** 表面里再分一层：搜索框、步进器、标签的底。slate 2：亮色 `#f9f9fb`，暗色 slate 3 `#212225` */\n  surfaceMuted: '#f9f9fb',\n\n  // ───────── 中性填充 ─────────\n\n  /** 填充：弱按钮、开关关闭态、骨架。slate 3：亮色 `#f0f0f3`，暗色 slate 4 `#272a2d` */\n  fill: '#f0f0f3',\n  /** 按下时的底色：单元格、菜单项按住。slate 4：亮色 `#e8e8ec`，暗色 slate 5 `#2e3135` */\n  fillActive: '#e8e8ec',\n\n  // ───────── 文字 ─────────\n\n  /** 主要文字。slate 12：亮色 `#1c2024`，暗色 `#edeef0` */\n  text: '#1c2024',\n  /** 次要文字、说明、图标。slate 11：亮色 `#60646c`，暗色 `#b0b4ba` */\n  textMuted: '#60646c',\n  /** 占位文字。slate 10：亮色 `#80838d`，暗色 `#777b84` */\n  textPlaceholder: '#80838d',\n  /** 不可用的文字。slate 8：亮色 `#b9bbc6`，暗色 `#5a6169` */\n  textDisabled: '#b9bbc6',\n\n  // ───────── 边框 ─────────\n\n  /** 分隔线、单元格之间的细线。slate 6：亮色 `#d9d9e0`，暗色 `#363a3f` */\n  border: '#d9d9e0',\n  /** 输入框、描边按钮的边框。slate 7：亮色 `#cdced6`，暗色 `#43484e` */\n  borderStrong: '#cdced6',\n\n  // ───────── 品牌色 ─────────\n\n  /** 品牌色：主要按钮、选中、开关打开。indigo 9 `#3e63dd` */\n  accent: '#3e63dd',\n  /** 品牌色按下。indigo 10：亮色 `#3358d4`，暗色 `#3758d4` */\n  accentActive: '#3358d4',\n  /** 品牌色上的文字。白色 */\n  accentContrast: '#ffffff',\n  /** 品牌色的文字（链接、浅色按钮的字）。indigo 11：亮色 `#3a5bc7`，暗色 `#9eb1ff` */\n  accentText: '#3a5bc7',\n  /** 品牌色的浅底。indigo 3：亮色 `#edf2fe`，暗色 `#182449` */\n  accentSoft: '#edf2fe',\n  /** 品牌色的浅底按下。indigo 4：亮色 `#e1e9ff`，暗色 `#1d2e62` */\n  accentSoftActive: '#e1e9ff',\n  /** 品牌色的边框。indigo 7：亮色 `#abbdf9`，暗色 `#3a4f97` */\n  accentBorder: '#abbdf9',\n\n  // ───────── 状态色：危险 ─────────\n\n  /** 危险：删除、错误。red 9：亮色 `#ce2c31`，暗色 `#b54548` */\n  danger: '#ce2c31',\n  /** 危险按下。red 10：亮色 `#b8272c`，暗色 `#a33b3e` */\n  dangerActive: '#b8272c',\n  /** 危险色上的文字。白色 */\n  dangerContrast: '#ffffff',\n  /** 危险的文字。red 11：亮色 `#b8272c`，暗色 `#ff9592` */\n  dangerText: '#b8272c',\n  /** 危险的浅底。red 3：亮色 `#feebec`，暗色 `#3b1219` */\n  dangerSoft: '#feebec',\n  /** 危险的浅底按下。red 4：亮色 `#ffdbdc`，暗色 `#500f1c` */\n  dangerSoftActive: '#ffdbdc',\n  /** 危险的边框。red 7：亮色 `#f4a9aa`，暗色 `#8c333a` */\n  dangerBorder: '#f4a9aa',\n\n  // ───────── 状态色：成功 ─────────\n\n  /** 成功。green 9：亮色 `#008751`，暗色 `#30a46c` */\n  success: '#008751',\n  /** 成功按下。亮色 `#007143`，暗色 `#52af7d` */\n  successActive: '#007143',\n  /** 成功色上的文字。亮色白色，暗色 slate 1 */\n  successContrast: '#ffffff',\n  /** 成功的文字。green 11：亮色 `#193b2d`，暗色 `#3dd68c` */\n  successText: '#193b2d',\n  /** 成功的浅底。green 3：亮色 `#e6f6eb`，暗色 `#132d21` */\n  successSoft: '#e6f6eb',\n  /** 成功的浅底按下。green 4：亮色 `#d6f1df`，暗色 `#113b29` */\n  successSoftActive: '#d6f1df',\n  /** 成功的边框。green 7：亮色 `#8eceaa`，暗色 `#28684a` */\n  successBorder: '#8eceaa',\n\n  // ───────── 状态色：警告 ─────────\n\n  /** 警告。amber 9 `#ffc53d` */\n  warning: '#ffc53d',\n  /** 警告按下。amber 10 `#ffcd5f` */\n  warningActive: '#ffcd5f',\n  /** 警告色上的文字（深色）。亮色 `#4f3422`，暗色 slate 1 */\n  warningContrast: '#4f3422',\n  /** 警告的文字。amber 11：亮色 `#4f3422`，暗色 `#ffca16` */\n  warningText: '#4f3422',\n  /** 警告的浅底。amber 3：亮色 `#fff7c2`，暗色 `#302008` */\n  warningSoft: '#fff7c2',\n  /** 警告的浅底按下。amber 4：亮色 `#ffee9c`，暗色 `#3f2700` */\n  warningSoftActive: '#ffee9c',\n  /** 警告的边框。amber 7：亮色 `#e9c162`，暗色 `#714f19` */\n  warningBorder: '#e9c162',\n\n  // ───────── 状态色：信息 ─────────\n\n  /** 信息。blue 9：亮色 `#0073e0`，暗色 `#0090ff` */\n  info: '#0073e0',\n  /** 信息按下。亮色 `#0060bd`，暗色 `#3d9fff` */\n  infoActive: '#0060bd',\n  /** 信息色上的文字。亮色白色，暗色 slate 1 */\n  infoContrast: '#ffffff',\n  /** 信息的文字。blue 11：亮色 `#113264`，暗色 `#70b8ff` */\n  infoText: '#113264',\n  /** 信息的浅底。blue 3：亮色 `#e6f4fe`，暗色 `#0d2847` */\n  infoSoft: '#e6f4fe',\n  /** 信息的浅底按下。blue 4：亮色 `#d5efff`，暗色 `#003362` */\n  infoSoftActive: '#d5efff',\n  /** 信息的边框。blue 7：亮色 `#8ec8f6`，暗色 `#205d9e` */\n  infoBorder: '#8ec8f6',\n\n  // ───────── 其他 ─────────\n\n  /** 反色表面：轻提示（Toast）、气泡。亮色 slate 12 `#1c2024`，暗色 slate 12 `#edeef0` */\n  inverseSurface: '#1c2024',\n  /** 反色表面上的文字 */\n  inverseText: '#fcfcfd',\n  /** 遮罩：弹出层、对话框下面的半透明黑。亮色 0.5，暗色 0.7 */\n  overlay: 'rgba(0, 0, 0, 0.5)',\n  /** 焦点环（H5 的键盘焦点） */\n  focusRing: '#3e63dd',\n});\n\n/** 字体族：系统字体优先，数字用等宽数字（组件里 fontVariantNumeric: 'tabular-nums'） */\nexport const fonts = css.defineVars('vtm-fonts', {\n  /** 正文与标题 */\n  sans: 'system-ui, -apple-system, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", sans-serif',\n  /** 代码、验证码这类等宽内容 */\n  mono: 'ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace',\n});\n\n/** 字号（375 宽的设计稿）：组件根元素的字号决定内部尺寸（em） */\nexport const fontSizes = css.defineVars('vtm-font-sizes', {\n  /** 辅助说明、标签、角标 `12px` */\n  xs: '12px',\n  /** 次要正文、小按钮 `13px` */\n  sm: '13px',\n  /** 正文、单元格 `14px` */\n  md: '14px',\n  /** 按钮、导航栏标题、强调正文 `16px` */\n  lg: '16px',\n  /** 弹窗标题 `18px` */\n  xl: '18px',\n  /** 页面标题 `20px` */\n  xxl: '20px',\n  /** 数值、结果页标题 `24px` */\n  xxxl: '24px',\n});\n\n/** 字重 */\nexport const fontWeights = css.defineVars('vtm-font-weights', {\n  /** 常规 `400` */\n  normal: '400',\n  /** 中等：按钮、标签页 `500` */\n  medium: '500',\n  /** 半粗：标题 `600` */\n  semibold: '600',\n  /** 粗：数值 `700` */\n  bold: '700',\n});\n\n/** 行高（不带单位） */\nexport const lineHeights = css.defineVars('vtm-line-heights', {\n  /** 单行控件 `1` */\n  none: '1',\n  /** 标题 `1.25` */\n  tight: '1.25',\n  /** 正文 `1.5` */\n  normal: '1.5',\n  /** 长段落 `1.75` */\n  relaxed: '1.75',\n});\n\n/** 字距 */\nexport const letterSpacings = css.defineVars('vtm-letter-spacings', {\n  /** 默认 `0` */\n  normal: '0',\n  /** 大号数字、标题略收 `-0.01em` */\n  tight: '-0.01em',\n  /** 全大写的小字略放 `0.02em` */\n  wide: '0.02em',\n});\n\n/** 间距（em，随字号缩放） */\nexport const space = css.defineVars('vtm-space', {\n  /** 没有间距 `0` */\n  none: '0',\n  /** 极小：图标与文字之间 `0.25em` */\n  xs: '0.25em',\n  /** 小：紧凑的内边距 `0.5em` */\n  sm: '0.5em',\n  /** 中：常用的间隔 `0.75em` */\n  md: '0.75em',\n  /** 大：单元格的左右内边距 `1em` */\n  lg: '1em',\n  /** 很大：分组之间 `1.5em` */\n  xl: '1.5em',\n  /** 特大：页面区块之间 `2em` */\n  xxl: '2em',\n});\n\n/** 尺寸 */\nexport const sizes = css.defineVars('vtm-sizes', {\n  /** 单行控件（输入框、单元格）的最小高度 `2.75em`（14px 字号时 38.5px，16px 时 44px） */\n  control: '2.75em',\n  /** 触控目标的最小尺寸 `44px`（iOS 人机界面指南） */\n  touchTarget: '44px',\n  /** 占满容器 `100%` */\n  full: '100%',\n});\n\n/** 圆角（em） */\nexport const radii = css.defineVars('vtm-radii', {\n  /** 直角 `0` */\n  none: '0',\n  /** 极小：角标、复选框 `0.125em` */\n  xs: '0.125em',\n  /** 小：标签、小按钮 `0.25em` */\n  sm: '0.25em',\n  /** 中：按钮、输入框 `0.5em` */\n  md: '0.5em',\n  /** 大：卡片、分组 `0.75em` */\n  lg: '0.75em',\n  /** 很大：弹出层、对话框 `1em` */\n  xl: '1em',\n  /** 全圆：胶囊按钮、头像 `9999px` */\n  full: '9999px',\n});\n\n/** 边框宽度（px） */\nexport const borderWidths = css.defineVars('vtm-border-widths', {\n  /** 没有边框 `0` */\n  none: '0',\n  /** 细线：单元格分隔线（高分屏上的半像素） `0.5px` */\n  hairline: '0.5px',\n  /** 常规边框 `1px` */\n  xs: '1px',\n  /** 焦点环、选中描边 `2px` */\n  sm: '2px',\n});\n\n/** 阴影：亮色主题用，暗色主题靠表面的层级区分 */\nexport const shadows = css.defineVars('vtm-shadows', {\n  /** 没有阴影 */\n  none: 'none',\n  /** 卡片 */\n  sm: '0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px -2px rgba(0, 0, 0, 0.08)',\n  /** 悬浮按钮、吸顶的栏 */\n  md: '0 4px 16px -4px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.08)',\n  /** 弹出层、对话框 */\n  lg: '0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.1)',\n});\n\nconst reduce = '@media (prefers-reduced-motion: reduce)';\n\n/** 动效时长；系统开了\"减少动态效果\"时为 0 */\nexport const durations = css.defineVars('vtm-durations', {\n  /** 没有过渡 `0ms` */\n  none: '0ms',\n  /** 按压反馈 `100ms` */\n  xs: { default: '100ms', [reduce]: '0ms' },\n  /** 颜色、开关 `160ms` */\n  sm: { default: '160ms', [reduce]: '0ms' },\n  /** 展开收起、提示进出 `240ms` */\n  md: { default: '240ms', [reduce]: '0ms' },\n  /** 弹出层滑入滑出 `300ms` */\n  lg: { default: '300ms', [reduce]: '0ms' },\n});\n\n/** 缓动 */\nexport const easings = css.defineVars('vtm-easings', {\n  /** 一般的过渡 */\n  standard: 'cubic-bezier(0.2, 0, 0, 1)',\n  /** 进场：快出慢停 */\n  enter: 'cubic-bezier(0.05, 0.7, 0.1, 1)',\n  /** 离场：慢起快走 */\n  exit: 'cubic-bezier(0.3, 0, 0.8, 0.15)',\n});\n\n/** 不透明度 */\nexport const opacities = css.defineVars('vtm-opacities', {\n  /** 不可用 `0.5` */\n  disabled: '0.5',\n  /** 按下时叠在内容上的暗层（实底按钮） `0.1` */\n  pressed: '0.1',\n});\n\n/** SVG 描边宽度（图标） */\nexport const strokeWidths = css.defineVars('vtm-stroke-widths', {\n  /** 细 `1.5` */\n  sm: '1.5',\n  /** 常规 `2` */\n  md: '2',\n  /** 粗 `2.5` */\n  lg: '2.5',\n});\n\n/** 各组 token 的变量引用，用在模板字符串里：`` `max(${t.sizes.control}, ${t.sizes.touchTarget})` `` */\nexport const t = css.defineTokens({\n  colors,\n  fonts,\n  fontSizes,\n  fontWeights,\n  lineHeights,\n  letterSpacings,\n  space,\n  sizes,\n  radii,\n  borderWidths,\n  shadows,\n  durations,\n  easings,\n  opacities,\n  strokeWidths,\n});\n"],"mappings":"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"}

package/dist/utils/host.d.ts

@@ -0,0 +1,97 @@
+/**
+ * 宿主约定（MOBILE.md §5）：组件要用的平台能力都从这里取，不直接碰 DOM 与 window——
+ * H5 用这里的 Web 实现；小程序由渲染运行时（@zerodep-dev/vue-tsx-pro-mini）在每个页面的应用上 provide 自己的实现。
+ * 两边约定同一个全局 Symbol，互不导入。
+ *
+ *   const host = useHost();
+ *   const rect = await host.measure(element);
+ *   const unlock = host.lockScroll();
+ */
+import { type InjectionKey } from 'vue';
+import type { HostPermissions, HostStorage, LoginOptions, LoginResult, PaymentOrder, PaymentResult, PhoneNumberResult, PrivacyReply, SubscribeState } from '../capability/types';
+/** 元素的位置与大小（视口坐标，px） */
+export interface HostRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/** 窗口信息 */
+export interface HostWindow {
+    /** 可用宽度（px） */
+    width: number;
+    /** 可用高度（px） */
+    height: number;
+}
+/** 选到的图片 */
+export interface ChosenImage {
+    /** 能直接作为 img src 的地址（H5 是 blob: 地址，小程序是临时文件路径） */
+    url: string;
+    /** 字节数 */
+    size: number;
+    /** H5 里的 File，上传时用；小程序里没有 */
+    file?: File;
+}
+/** 平台能力 */
+export interface Host {
+    /** 平台：web 是浏览器，app 是原生应用里的 WebView（Capacitor，见 capacitor/），wx 是微信小程序，my 是支付宝小程序 */
+    readonly platform: 'web' | 'app' | 'wx' | 'my';
+    /** 量元素（模板 ref 拿到的节点）的位置大小；量不到时 null。小程序里只能异步取 */
+    measure(element: unknown): Promise<HostRect | null>;
+    /** 窗口的宽高 */
+    window(): HostWindow;
+    /** 页面滚动到某个位置 */
+    scrollTo(top: number, options?: {
+        smooth?: boolean;
+    }): void;
+    /** 页面当前的滚动位置（px） */
+    scrollTop(): number;
+    /** 监听页面滚动，返回取消函数 */
+    onScroll(listener: (top: number) => void): () => void;
+    /**
+     * 等这一轮的改动画到屏幕上再回调，返回取消函数。进场动画要先画出关闭的样子，再换成打开的样子，过渡才会播。
+     * H5 是两次 requestAnimationFrame；小程序是这一轮 setData 生效之后（逻辑层没有屏幕刷新的回调）
+     */
+    nextFrame(callback: () => void): () => void;
+    /** 锁住页面滚动（弹出层打开时），返回解锁函数；可叠加，最后一个解锁时恢复 */
+    lockScroll(): () => void;
+    /** 浮层根：弹出层、轻提示 Teleport 到这里 */
+    overlayRoot(): unknown;
+    /** 短震动反馈；不支持时什么也不做 */
+    vibrate(): void;
+    /** 写剪贴板 */
+    copy(text: string): Promise<void>;
+    /** 选图片 */
+    chooseImages(options: {
+        count: number;
+    }): Promise<ChosenImage[]>;
+    /** 设备权限：位置、相机、麦克风、相册、蓝牙（组件里用 usePermission） */
+    readonly permissions: HostPermissions;
+    /** 本地存储（组件里用 useStorage） */
+    readonly storage: HostStorage;
+    /** 登录凭证，交给后端换会话；H5 没有平台登录，由应用经 ConfigProvider 的 host 给出实现 */
+    login(options?: LoginOptions): Promise<LoginResult>;
+    /** 调起收银台；参数是后端下单的结果 */
+    pay(order: PaymentOrder): Promise<PaymentResult>;
+    /** 订阅消息：一次最多 3 个模板，要在用户点按的回调里调用 */
+    subscribe(templateIds: string[]): Promise<Record<string, SubscribeState>>;
+    /** 手机号按钮（Button 的 openType）的结果换成交给后端的凭证 */
+    phoneNumber(detail: unknown): Promise<PhoneNumberResult>;
+    /** 平台要求用户先同意隐私协议时通知（只有微信），返回取消函数；回复后平台才继续执行被拦下的接口 */
+    onPrivacyRequest(listener: (reply: PrivacyReply) => void): () => void;
+    /** 打开小程序的隐私协议页 */
+    openPrivacyContract(): Promise<void>;
+    /**
+     * 页面的主题变了（最外层 ConfigProvider 通知）：原生应用里状态栏的文字颜色跟着换。
+     * H5 与小程序不用做什么（小程序的导航栏颜色写在 app.json），可以不实现
+     */
+    themeChanged?(theme: 'light' | 'dark' | 'system'): void;
+}
+/** 注入键：全局 Symbol，小程序运行时用同一个键 provide，不必导入这个模块 */
+export declare const HOST_KEY: InjectionKey<Host>;
+/** 浏览器里的实现 */
+export declare const webHost: Host;
+/** 小程序（没有 DOM，节点画在模板里）；H5 与原生应用的 WebView 都是浏览器环境 */
+export declare const isMiniProgram: (host: Host) => boolean;
+/** 当前应用的平台能力：小程序页面里是运行时 provide 的，其余是浏览器的实现 */
+export declare function useHost(): Host;

package/dist/utils/host.js

@@ -0,0 +1,98 @@
+import { webCapabilities } from "../capability/web.js";
+import { inject } from "vue";
+//#region src/utils/host.ts
+/**
+* 宿主约定（MOBILE.md §5）：组件要用的平台能力都从这里取，不直接碰 DOM 与 window——
+* H5 用这里的 Web 实现；小程序由渲染运行时（@zerodep-dev/vue-tsx-pro-mini）在每个页面的应用上 provide 自己的实现。
+* 两边约定同一个全局 Symbol，互不导入。
+*
+*   const host = useHost();
+*   const rect = await host.measure(element);
+*   const unlock = host.lockScroll();
+*/
+/** 注入键：全局 Symbol，小程序运行时用同一个键 provide，不必导入这个模块 */
+var HOST_KEY = Symbol.for("vue-tsx-pro.host");
+var locks = 0;
+var restoreOverflow = "";
+/** 浏览器里的实现 */
+var webHost = {
+	platform: "web",
+	async measure(element) {
+		if (!(element instanceof Element)) return null;
+		const { top, left, width, height } = element.getBoundingClientRect();
+		return {
+			top,
+			left,
+			width,
+			height
+		};
+	},
+	window: () => ({
+		width: window.innerWidth,
+		height: window.innerHeight
+	}),
+	scrollTo(top, options) {
+		window.scrollTo({
+			top,
+			behavior: options?.smooth ? "smooth" : "auto"
+		});
+	},
+	scrollTop: () => window.scrollY,
+	onScroll(listener) {
+		const handle = () => listener(window.scrollY);
+		window.addEventListener("scroll", handle, { passive: true });
+		return () => window.removeEventListener("scroll", handle);
+	},
+	nextFrame(callback) {
+		let inner = 0;
+		const outer = requestAnimationFrame(() => inner = requestAnimationFrame(callback));
+		return () => {
+			cancelAnimationFrame(outer);
+			cancelAnimationFrame(inner);
+		};
+	},
+	lockScroll() {
+		if (locks++ === 0) {
+			restoreOverflow = document.body.style.overflow;
+			document.body.style.overflow = "hidden";
+		}
+		let released = false;
+		return () => {
+			if (released) return;
+			released = true;
+			if (--locks === 0) document.body.style.overflow = restoreOverflow;
+		};
+	},
+	overlayRoot: () => document.body,
+	vibrate() {
+		navigator.vibrate?.(10);
+	},
+	copy: (text) => navigator.clipboard.writeText(text),
+	chooseImages({ count }) {
+		return new Promise((resolve) => {
+			const input = document.createElement("input");
+			input.type = "file";
+			input.accept = "image/*";
+			input.multiple = count > 1;
+			input.onchange = () => {
+				resolve([...input.files ?? []].slice(0, count).map((file) => ({
+					url: URL.createObjectURL(file),
+					size: file.size,
+					file
+				})));
+			};
+			input.click();
+		});
+	},
+	...webCapabilities
+};
+/** 小程序（没有 DOM，节点画在模板里）；H5 与原生应用的 WebView 都是浏览器环境 */
+var isMiniProgram = (host) => host.platform === "wx" || host.platform === "my";
+/** 当前应用的平台能力：小程序页面里是运行时 provide 的，其余是浏览器的实现 */
+function useHost() {
+	return inject(HOST_KEY, webHost);
+}
+//#endregion
+export { HOST_KEY, isMiniProgram, useHost, webHost };
+
+//# sourceMappingURL=host.js.map

package/dist/utils/host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.js","names":[],"sources":["../../src/utils/host.ts"],"sourcesContent":["/**\n * 宿主约定（MOBILE.md §5）：组件要用的平台能力都从这里取，不直接碰 DOM 与 window——\n * H5 用这里的 Web 实现；小程序由渲染运行时（@zerodep-dev/vue-tsx-pro-mini）在每个页面的应用上 provide 自己的实现。\n * 两边约定同一个全局 Symbol，互不导入。\n *\n *   const host = useHost();\n *   const rect = await host.measure(element);\n *   const unlock = host.lockScroll();\n */\nimport { inject, type InjectionKey } from 'vue';\nimport type {\n  HostPermissions,\n  HostStorage,\n  LoginOptions,\n  LoginResult,\n  PaymentOrder,\n  PaymentResult,\n  PhoneNumberResult,\n  PrivacyReply,\n  SubscribeState,\n} from '../capability/types';\nimport { webCapabilities } from '../capability/web';\n\n/** 元素的位置与大小（视口坐标，px） */\nexport interface HostRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\n/** 窗口信息 */\nexport interface HostWindow {\n  /** 可用宽度（px） */\n  width: number;\n  /** 可用高度（px） */\n  height: number;\n}\n\n/** 选到的图片 */\nexport interface ChosenImage {\n  /** 能直接作为 img src 的地址（H5 是 blob: 地址，小程序是临时文件路径） */\n  url: string;\n  /** 字节数 */\n  size: number;\n  /** H5 里的 File，上传时用；小程序里没有 */\n  file?: File;\n}\n\n/** 平台能力 */\nexport interface Host {\n  /** 平台：web 是浏览器，app 是原生应用里的 WebView（Capacitor，见 capacitor/），wx 是微信小程序，my 是支付宝小程序 */\n  readonly platform: 'web' | 'app' | 'wx' | 'my';\n  /** 量元素（模板 ref 拿到的节点）的位置大小；量不到时 null。小程序里只能异步取 */\n  measure(element: unknown): Promise<HostRect | null>;\n  /** 窗口的宽高 */\n  window(): HostWindow;\n  /** 页面滚动到某个位置 */\n  scrollTo(top: number, options?: { smooth?: boolean }): void;\n  /** 页面当前的滚动位置（px） */\n  scrollTop(): number;\n  /** 监听页面滚动，返回取消函数 */\n  onScroll(listener: (top: number) => void): () => void;\n  /**\n   * 等这一轮的改动画到屏幕上再回调，返回取消函数。进场动画要先画出关闭的样子，再换成打开的样子，过渡才会播。\n   * H5 是两次 requestAnimationFrame；小程序是这一轮 setData 生效之后（逻辑层没有屏幕刷新的回调）\n   */\n  nextFrame(callback: () => void): () => void;\n  /** 锁住页面滚动（弹出层打开时），返回解锁函数；可叠加，最后一个解锁时恢复 */\n  lockScroll(): () => void;\n  /** 浮层根：弹出层、轻提示 Teleport 到这里 */\n  overlayRoot(): unknown;\n  /** 短震动反馈；不支持时什么也不做 */\n  vibrate(): void;\n  /** 写剪贴板 */\n  copy(text: string): Promise<void>;\n  /** 选图片 */\n  chooseImages(options: { count: number }): Promise<ChosenImage[]>;\n  /** 设备权限：位置、相机、麦克风、相册、蓝牙（组件里用 usePermission） */\n  readonly permissions: HostPermissions;\n  /** 本地存储（组件里用 useStorage） */\n  readonly storage: HostStorage;\n  /** 登录凭证，交给后端换会话；H5 没有平台登录，由应用经 ConfigProvider 的 host 给出实现 */\n  login(options?: LoginOptions): Promise<LoginResult>;\n  /** 调起收银台；参数是后端下单的结果 */\n  pay(order: PaymentOrder): Promise<PaymentResult>;\n  /** 订阅消息：一次最多 3 个模板，要在用户点按的回调里调用 */\n  subscribe(templateIds: string[]): Promise<Record<string, SubscribeState>>;\n  /** 手机号按钮（Button 的 openType）的结果换成交给后端的凭证 */\n  phoneNumber(detail: unknown): Promise<PhoneNumberResult>;\n  /** 平台要求用户先同意隐私协议时通知（只有微信），返回取消函数；回复后平台才继续执行被拦下的接口 */\n  onPrivacyRequest(listener: (reply: PrivacyReply) => void): () => void;\n  /** 打开小程序的隐私协议页 */\n  openPrivacyContract(): Promise<void>;\n  /**\n   * 页面的主题变了（最外层 ConfigProvider 通知）：原生应用里状态栏的文字颜色跟着换。\n   * H5 与小程序不用做什么（小程序的导航栏颜色写在 app.json），可以不实现\n   */\n  themeChanged?(theme: 'light' | 'dark' | 'system'): void;\n}\n\n/** 注入键：全局 Symbol，小程序运行时用同一个键 provide，不必导入这个模块 */\nexport const HOST_KEY: InjectionKey<Host> = Symbol.for('vue-tsx-pro.host') as InjectionKey<Host>;\n\nlet locks = 0;\nlet restoreOverflow = '';\n\n/** 浏览器里的实现 */\nexport const webHost: Host = {\n  platform: 'web',\n  async measure(element) {\n    if (!(element instanceof Element)) return null;\n    const { top, left, width, height } = element.getBoundingClientRect();\n    return { top, left, width, height };\n  },\n  window: () => ({ width: window.innerWidth, height: window.innerHeight }),\n  scrollTo(top, options) {\n    window.scrollTo({ top, behavior: options?.smooth ? 'smooth' : 'auto' });\n  },\n  scrollTop: () => window.scrollY,\n  onScroll(listener) {\n    const handle = () => listener(window.scrollY);\n    window.addEventListener('scroll', handle, { passive: true });\n    return () => window.removeEventListener('scroll', handle);\n  },\n  nextFrame(callback) {\n    // 第一次在绘制前，第二次时上一帧已经画好\n    let inner = 0;\n    const outer = requestAnimationFrame(() => (inner = requestAnimationFrame(callback)));\n    return () => {\n      cancelAnimationFrame(outer);\n      cancelAnimationFrame(inner);\n    };\n  },\n  lockScroll() {\n    if (locks++ === 0) {\n      restoreOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n    let released = false;\n    return () => {\n      if (released) return;\n      released = true;\n      if (--locks === 0) document.body.style.overflow = restoreOverflow;\n    };\n  },\n  overlayRoot: () => document.body,\n  vibrate() {\n    navigator.vibrate?.(10);\n  },\n  copy: (text) => navigator.clipboard.writeText(text),\n  chooseImages({ count }) {\n    return new Promise((resolve) => {\n      const input = document.createElement('input');\n      input.type = 'file';\n      input.accept = 'image/*';\n      input.multiple = count > 1;\n      input.onchange = () => {\n        const files = [...(input.files ?? [])].slice(0, count);\n        resolve(files.map((file) => ({ url: URL.createObjectURL(file), size: file.size, file })));\n      };\n      input.click();\n    });\n  },\n  ...webCapabilities,\n};\n\n/** 小程序（没有 DOM，节点画在模板里）；H5 与原生应用的 WebView 都是浏览器环境 */\nexport const isMiniProgram = (host: Host): boolean =>\n  host.platform === 'wx' || host.platform === 'my';\n\n/** 当前应用的平台能力：小程序页面里是运行时 provide 的，其余是浏览器的实现 */\nexport function useHost(): Host {\n  return inject(HOST_KEY, webHost);\n}\n"],"mappings":";;;;;;;;;;;;;AAsGA,IAAa,WAA+B,OAAO,IAAI,kBAAkB;AAEzE,IAAI,QAAQ;AACZ,IAAI,kBAAkB;;AAGtB,IAAa,UAAgB;CAC3B,UAAU;CACV,MAAM,QAAQ,SAAS;EACrB,IAAI,EAAE,mBAAmB,UAAU,OAAO;EAC1C,MAAM,EAAE,KAAK,MAAM,OAAO,WAAW,QAAQ,sBAAsB;EACnE,OAAO;GAAE;GAAK;GAAM;GAAO;EAAO;CACpC;CACA,eAAe;EAAE,OAAO,OAAO;EAAY,QAAQ,OAAO;CAAY;CACtE,SAAS,KAAK,SAAS;EACrB,OAAO,SAAS;GAAE;GAAK,UAAU,SAAS,SAAS,WAAW;EAAO,CAAC;CACxE;CACA,iBAAiB,OAAO;CACxB,SAAS,UAAU;EACjB,MAAM,eAAe,SAAS,OAAO,OAAO;EAC5C,OAAO,iBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;EAC3D,aAAa,OAAO,oBAAoB,UAAU,MAAM;CAC1D;CACA,UAAU,UAAU;EAElB,IAAI,QAAQ;EACZ,MAAM,QAAQ,4BAA6B,QAAQ,sBAAsB,QAAQ,CAAE;EACnF,aAAa;GACX,qBAAqB,KAAK;GAC1B,qBAAqB,KAAK;EAC5B;CACF;CACA,aAAa;EACX,IAAI,YAAY,GAAG;GACjB,kBAAkB,SAAS,KAAK,MAAM;GACtC,SAAS,KAAK,MAAM,WAAW;EACjC;EACA,IAAI,WAAW;EACf,aAAa;GACX,IAAI,UAAU;GACd,WAAW;GACX,IAAI,EAAE,UAAU,GAAG,SAAS,KAAK,MAAM,WAAW;EACpD;CACF;CACA,mBAAmB,SAAS;CAC5B,UAAU;EACR,UAAU,UAAU,EAAE;CACxB;CACA,OAAO,SAAS,UAAU,UAAU,UAAU,IAAI;CAClD,aAAa,EAAE,SAAS;EACtB,OAAO,IAAI,SAAS,YAAY;GAC9B,MAAM,QAAQ,SAAS,cAAc,OAAO;GAC5C,MAAM,OAAO;GACb,MAAM,SAAS;GACf,MAAM,WAAW,QAAQ;GACzB,MAAM,iBAAiB;IAErB,QADc,CAAC,GAAI,MAAM,SAAS,CAAC,CAAE,CAAC,CAAC,MAAM,GAAG,KACxC,CAAA,CAAM,KAAK,UAAU;KAAE,KAAK,IAAI,gBAAgB,IAAI;KAAG,MAAM,KAAK;KAAM;IAAK,EAAE,CAAC;GAC1F;GACA,MAAM,MAAM;EACd,CAAC;CACH;CACA,GAAG;AACL;;AAGA,IAAa,iBAAiB,SAC5B,KAAK,aAAa,QAAQ,KAAK,aAAa;;AAG9C,SAAgB,UAAgB;CAC9B,OAAO,OAAO,UAAU,OAAO;AACjC"}

package/dist/utils/presence.d.ts

@@ -0,0 +1,11 @@
+/** 弹层的过渡时长（ms），与 token 的 durations.lg 一致 */
+export declare const OVERLAY_DURATION = 300;
+/** 进出场的状态 */
+export interface Presence {
+    /** 要不要渲染：关闭后等过渡播完才变成 false */
+    readonly mounted: boolean;
+    /** 是不是打开的样子：挂上并画出来之后才变成 true */
+    readonly visible: boolean;
+}
+/** 跟着 open 安排挂载与显示；duration 是离场过渡的时长（ms） */
+export declare function usePresence(open: () => boolean, duration?: number): Presence;

package/dist/utils/presence.js

@@ -0,0 +1,34 @@
+import { useHost } from "./host.js";
+import { onBeforeUnmount, shallowRef, watch } from "vue";
+/** 跟着 open 安排挂载与显示；duration 是离场过渡的时长（ms） */
+function usePresence(open, duration = 300) {
+	const host = useHost();
+	const mounted = shallowRef(false);
+	const visible = shallowRef(false);
+	let cancel = () => {};
+	const update = (next) => {
+		cancel();
+		if (next) {
+			mounted.value = true;
+			cancel = host.nextFrame(() => visible.value = true);
+		} else {
+			visible.value = false;
+			const timer = setTimeout(() => mounted.value = false, duration);
+			cancel = () => clearTimeout(timer);
+		}
+	};
+	watch(open, update, { immediate: true });
+	onBeforeUnmount(() => cancel());
+	return {
+		get mounted() {
+			return mounted.value;
+		},
+		get visible() {
+			return visible.value;
+		}
+	};
+}
+//#endregion
+export { usePresence };
+
+//# sourceMappingURL=presence.js.map

package/dist/utils/presence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presence.js","names":[],"sources":["../../src/utils/presence.ts"],"sourcesContent":["/**\n * 进出场：弹层先以关闭的样子挂上，等它画到屏幕上（宿主的 nextFrame）再换成打开的样子，样式里的过渡（transition）就会播；\n * 关闭时先换回关闭的样子，等过渡播完再卸载。不用 Vue 的 <Transition>：它在运行时 DOM 里，小程序的渲染器用不了。\n *\n *   const presence = usePresence(() => open, DURATION);\n *   return () => presence.mounted && <div data-state={presence.visible ? 'open' : 'closed'} …/>;\n */\nimport { onBeforeUnmount, shallowRef, watch } from 'vue';\nimport { useHost } from './host';\n\n/** 弹层的过渡时长（ms），与 token 的 durations.lg 一致 */\nexport const OVERLAY_DURATION = 300;\n\n/** 进出场的状态 */\nexport interface Presence {\n  /** 要不要渲染：关闭后等过渡播完才变成 false */\n  readonly mounted: boolean;\n  /** 是不是打开的样子：挂上并画出来之后才变成 true */\n  readonly visible: boolean;\n}\n\n/** 跟着 open 安排挂载与显示；duration 是离场过渡的时长（ms） */\nexport function usePresence(open: () => boolean, duration = OVERLAY_DURATION): Presence {\n  const host = useHost();\n  const mounted = shallowRef(false);\n  const visible = shallowRef(false);\n  let cancel = () => {};\n  const update = (next: boolean) => {\n    cancel();\n    if (next) {\n      mounted.value = true;\n      cancel = host.nextFrame(() => (visible.value = true));\n    } else {\n      visible.value = false;\n      const timer = setTimeout(() => (mounted.value = false), duration);\n      cancel = () => clearTimeout(timer);\n    }\n  };\n  watch(open, update, { immediate: true });\n  onBeforeUnmount(() => cancel());\n  return {\n    get mounted() {\n      return mounted.value;\n    },\n    get visible() {\n      return visible.value;\n    },\n  };\n}\n"],"mappings":";;;AAsBA,SAAgB,YAAY,MAAqB,WAAA,KAAuC;CACtF,MAAM,OAAO,QAAQ;CACrB,MAAM,UAAU,WAAW,KAAK;CAChC,MAAM,UAAU,WAAW,KAAK;CAChC,IAAI,eAAe,CAAC;CACpB,MAAM,UAAU,SAAkB;EAChC,OAAO;EACP,IAAI,MAAM;GACR,QAAQ,QAAQ;GAChB,SAAS,KAAK,gBAAiB,QAAQ,QAAQ,IAAK;EACtD,OAAO;GACL,QAAQ,QAAQ;GAChB,MAAM,QAAQ,iBAAkB,QAAQ,QAAQ,OAAQ,QAAQ;GAChE,eAAe,aAAa,KAAK;EACnC;CACF;CACA,MAAM,MAAM,QAAQ,EAAE,WAAW,KAAK,CAAC;CACvC,sBAAsB,OAAO,CAAC;CAC9B,OAAO;EACL,IAAI,UAAU;GACZ,OAAO,QAAQ;EACjB;EACA,IAAI,UAAU;GACZ,OAAO,QAAQ;EACjB;CACF;AACF"}