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

package/dist/display/Badge.js

@@ -0,0 +1,108 @@
+import { t } from "../theme/tokens.js";
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+//#region src/display/Badge.tsx
+/** 未声明的属性落到外层（span）上 */
+/** Badge 的样式：root、badge、corner、dot、各色调 */
+var badgeStyles = css.create({
+	root: {
+		position: "relative",
+		display: "inline-flex",
+		verticalAlign: "middle"
+	},
+	badge: {
+		boxSizing: "border-box",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		minWidth: "1.4em",
+		height: "1.4em",
+		paddingInline: "0.35em",
+		borderRadius: "_full",
+		fontSize: "_xs",
+		fontWeight: "_medium",
+		lineHeight: "_none",
+		fontVariantNumeric: "tabular-nums",
+		whiteSpace: "nowrap",
+		boxShadow: `0 0 0 1px ${t.colors.surface}`
+	},
+	corner: {
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineEnd: 0,
+		transform: "translate(50%, -50%)",
+		transformOrigin: "100% 0",
+		zIndex: 1
+	},
+	dot: {
+		minWidth: "8px",
+		width: "8px",
+		height: "8px",
+		padding: 0
+	},
+	danger: {
+		color: "_dangerContrast",
+		backgroundColor: "_danger"
+	},
+	accent: {
+		color: "_accentContrast",
+		backgroundColor: "_accent"
+	},
+	success: {
+		color: "_successContrast",
+		backgroundColor: "_success"
+	},
+	warning: {
+		color: "_warningContrast",
+		backgroundColor: "_warning"
+	},
+	neutral: {
+		color: "_inverseText",
+		backgroundColor: "_inverseSurface"
+	}
+});
+/** 徽标（span > 内容 + 徽标） */
+var Badge = /*#__PURE__*/ _component((_props, _ctx) => {
+	const content = readonlyProp(_props, "content");
+	const max = readonlyProp(_props, "max");
+	const dot = readonlyProp(_props, "dot", false);
+	const showZero = readonlyProp(_props, "showZero", false);
+	const tone = readonlyProp(_props, "tone", "danger");
+	const offset = readonlyProp(_props, "offset");
+	const children = childrenProp(_props);
+	const propsBadge = readonlyProp(_props, "propsBadge");
+	const rest = restProps(_props, _ctx, false);
+	return () => {
+		const text = typeof content.value === "number" && max.value != null && content.value > max.value ? `${max.value}+` : content.value;
+		const visible = dot.value || content.value != null && content.value !== "" && (content.value !== 0 || showZero.value);
+		const attached = hasContent(children.value);
+		const badge = visible && createVNode("span", mergeAttrs({ sx: [
+			badgeStyles.badge,
+			badgeStyles[tone.value],
+			attached && badgeStyles.corner,
+			dot.value && badgeStyles.dot
+		] }, propsBadge.value, { style: offset.value && {
+			marginInlineEnd: `${-offset.value[0]}px`,
+			marginBlockStart: `${offset.value[1]}px`
+		} }), [dot.value ? null : text]);
+		if (!attached) return badge || null;
+		return createVNode("span", mergeAttrs({ sx: badgeStyles.root }, rest), [children.value, badge]);
+	};
+}, {
+	name: "Badge",
+	props: [
+		"content",
+		"max",
+		"dot",
+		"showZero",
+		"tone",
+		"offset",
+		"propsBadge"
+	]
+});
+//#endregion
+export { Badge, badgeStyles };
+
+//# sourceMappingURL=Badge.js.map

package/dist/display/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/display/Badge.tsx"],"sourcesContent":["/**\n * 徽标：右上角的数字或红点，挂在图标、头像、按钮上；也可以单独用。\n *\n *   <Badge content={5}><Icon icon={Bell} /></Badge>\n *   <Badge content={120} max={99}><Avatar … /></Badge>   显示 99+\n *   <Badge dot><Icon icon={MessageCircle} /></Badge>\n *   <Badge content=\"新\" tone=\"success\" />                 单独使用\n *\n * 内容是 0 时默认不显示（showZero 显示）。\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 { t } from '../theme/tokens';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到外层（span）上 */\nexport interface BadgeProps extends PartProps<'span'> {\n  /** 数字或文字 */\n  content?: number | string;\n  /** 数字超过它时显示 `max+` */\n  max?: number;\n  /** 只显示一个小红点 */\n  dot?: boolean;\n  /** 内容是 0 时也显示 */\n  showZero?: boolean;\n  /**\n   * 色调\n   * @default 'danger'\n   */\n  tone?: 'danger' | 'accent' | 'success' | 'warning' | 'neutral';\n  /** 相对右上角的偏移（px）：[向右, 向下] */\n  offset?: readonly [number, number];\n  /** 被标记的内容；没有时徽标单独显示（行内） */\n  children?: VNodeChild;\n  /** 徽标本身的部件属性 */\n  propsBadge?: PartProps<'span'>;\n}\n\n/** Badge 的样式：root、badge、corner、dot、各色调 */\nexport const badgeStyles = css.create({\n  root: { position: 'relative', display: 'inline-flex', verticalAlign: 'middle' },\n  badge: {\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '1.4em',\n    height: '1.4em',\n    paddingInline: '0.35em',\n    borderRadius: '_full',\n    fontSize: '_xs',\n    fontWeight: '_medium',\n    lineHeight: '_none',\n    fontVariantNumeric: 'tabular-nums',\n    whiteSpace: 'nowrap',\n    // 白边把徽标从下面的图标、头像上分出来\n    boxShadow: `0 0 0 1px ${t.colors.surface}`,\n  },\n  corner: {\n    position: 'absolute',\n    insetBlockStart: 0,\n    insetInlineEnd: 0,\n    transform: 'translate(50%, -50%)',\n    transformOrigin: '100% 0',\n    zIndex: 1,\n  },\n  dot: { minWidth: '8px', width: '8px', height: '8px', padding: 0 },\n  danger: { color: '_dangerContrast', backgroundColor: '_danger' },\n  accent: { color: '_accentContrast', backgroundColor: '_accent' },\n  success: { color: '_successContrast', backgroundColor: '_success' },\n  warning: { color: '_warningContrast', backgroundColor: '_warning' },\n  neutral: { color: '_inverseText', backgroundColor: '_inverseSurface' },\n});\n\n/** 徽标（span > 内容 + 徽标） */\nexport const Badge = _component(\n  ({\n    content,\n    max,\n    dot = false,\n    showZero = false,\n    tone = 'danger',\n    offset,\n    children,\n    propsBadge,\n    ...rest\n  }: BadgeProps) =>\n    () => {\n      const text =\n        typeof content === 'number' && max != null && content > max ? `${max}+` : content;\n      const visible = dot || (content != null && content !== '' && (content !== 0 || showZero));\n      const attached = hasContent(children);\n      const badge = visible && (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              sx: [\n                badgeStyles.badge,\n                badgeStyles[tone],\n                attached && badgeStyles.corner,\n                dot && badgeStyles.dot,\n              ],\n            },\n            propsBadge,\n            {\n              style: offset && {\n                marginInlineEnd: `${-offset[0]}px`,\n                marginBlockStart: `${offset[1]}px`,\n              },\n            },\n          )}\n        >\n          {dot ? null : text}\n        </span>\n      );\n      if (!attached) return badge || null;\n      return (\n        <span {...mergeAttrs<'span'>({ sx: badgeStyles.root }, rest)}>\n          {children}\n          {badge}\n        </span>\n      );\n    },\n);\n"],"mappings":";;;;;;;;AAwCA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;EAAE,UAAU;EAAY,SAAS;EAAe,eAAe;CAAS;CAC9E,OAAO;EACL,WAAW;EACX,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,QAAQ;EACR,eAAe;EACf,cAAc;EACd,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,oBAAoB;EACpB,YAAY;EAEZ,WAAW,aAAa,EAAE,OAAO;CACnC;CACA,QAAQ;EACN,UAAU;EACV,iBAAiB;EACjB,gBAAgB;EAChB,WAAW;EACX,iBAAiB;EACjB,QAAQ;CACV;CACA,KAAK;EAAE,UAAU;EAAO,OAAO;EAAO,QAAQ;EAAO,SAAS;CAAE;CAChE,QAAQ;EAAE,OAAO;EAAmB,iBAAiB;CAAU;CAC/D,QAAQ;EAAE,OAAO;EAAmB,iBAAiB;CAAU;CAC/D,SAAS;EAAE,OAAO;EAAoB,iBAAiB;CAAW;CAClE,SAAS;EAAE,OAAO;EAAoB,iBAAiB;CAAW;CAClE,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAkB;AACvE,CAAC;;AAGD,IAAa,QAAQ,0BACnB,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,OAGQ,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,YACA,KAAK;CAAA,MAAA,OAAAA,aAAA,QAAA,QACT,QAAQ;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,aAAAD,aAAA,QAAA,YAAA;CAAA,MAIZ,OAAIE,UAAA,QAAA,MAAA,KAAA;CAAA,aAED;EACJ,MAAM,OACJ,OAAA,QAAA,UAAmB,YAAY,IAAA,SAAO,QAAQ,QAAA,QAAA,IAAA,QAAgB,GAAA,IAAA,MAAA,KAAS,QAAA;EACzE,MAAM,UAAU,IAAA,SAAQ,QAAA,SAAW,QAAQ,QAAA,UAAY,OAAO,QAAA,UAAY,KAAC,SAAA;EAC3E,MAAM,WAAW,WAAU,SAAA,KAAS;EACpC,MAAM,QAAQ,WAAOC,YAAA,QAEb,WACF,EACE,IAAI;GACF,YAAY;GACZ,YAAW,KAAA;GACX,YAAY,YAAY;GACxB,IAAA,SAAO,YAAY;EAAG,EAE1B,GAAC,WAAA,OAED,EACE,OAAO,OAAA,SAAU;GACf,iBAAiB,GAAG,CAAC,OAAA,MAAO,GAAE;GAC9B,kBAAkB,GAAG,OAAA,MAAO,GAAE;EAChC,EACF,CACF,GAAC,CAEA,IAAA,QAAM,OAAO,IAAI,CAAA;EAGtB,IAAI,CAAC,UAAU,OAAO,SAAS;EAC/B,OAAAA,YAAA,QACY,WAAmB,EAAE,IAAI,YAAY,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,OAEzD,KAAK,CAAA;CAGZ;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/display/Cell.d.ts

@@ -0,0 +1,92 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconData, type IconProps } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+/** 箭头的方向 */
+export interface CellArrows {
+    /** 向右：进入下一页 */
+    right: unknown;
+    /** 向下：展开 */
+    down: unknown;
+    /** 向上：收起 */
+    up: unknown;
+}
+/** 未声明的属性落到根元素（div）上；title 是标题内容，不是元素的 title 属性 */
+export interface CellProps extends PartProps<'div', 'role' | 'title'> {
+    /** 标题 */
+    title?: VNodeChild;
+    /** 标题下的说明 */
+    description?: VNodeChild;
+    /** 右边的值；也可以写在 children 里 */
+    value?: VNodeChild;
+    /** 标题前的图标 */
+    icon?: IconData;
+    /** 右边的箭头：true 是向右，也可以给方向 */
+    arrow?: boolean | keyof CellArrows;
+    /** 可点击：按下有反馈；有 onClick 或 arrow 时自动是可点击的 */
+    clickable?: boolean;
+    /** 标题前加红色星号（必填） */
+    required?: boolean;
+    /** 内容垂直居中（默认顶端对齐，说明多行时标题与值仍在第一行） */
+    center?: boolean;
+    /**
+     * 尺寸：lg 用在大号的列表项
+     * @default 'md'
+     */
+    size?: 'md' | 'lg';
+    /** 不画下面的细线 */
+    noDivider?: boolean;
+    /** 右边的值（与 value 二选一） */
+    children?: VNodeChild;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 标题与说明那一栏的部件属性 */
+    propsBody?: PartProps<'div'>;
+    /** 标题的部件属性 */
+    propsTitle?: PartProps<'div'>;
+    /** 说明的部件属性 */
+    propsDescription?: PartProps<'div'>;
+    /** 值的部件属性 */
+    propsValue?: PartProps<'div'>;
+    /** 箭头的部件属性 */
+    propsArrow?: Partial<IconProps>;
+}
+/** Cell 的样式：root、clickable、center、lg、icon、body、title、required、description、value、arrow */
+export declare const cellStyles: Readonly<{
+    arrow: css.CompiledStyles;
+    body: css.CompiledStyles;
+    center: css.CompiledStyles;
+    clickable: css.CompiledStyles;
+    description: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    lg: css.CompiledStyles;
+    required: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** 单元格（div）：可点击时 role="button" */
+export declare const Cell: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CellProps>;
+/** 未声明的属性落到根元素（div）上；title 是分组标题，不是元素的 title 属性 */
+export interface CellGroupProps extends PartProps<'div', 'title'> {
+    /** 分组标题，在卡片上方 */
+    title?: VNodeChild;
+    /** 卡片样式：左右留边、圆角，浮在页面的灰底上 */
+    inset?: boolean;
+    /** 单元格 */
+    children?: VNodeChild;
+    /** 标题的部件属性 */
+    propsTitle?: PartProps<'div'>;
+    /** 包着单元格的那一层的部件属性 */
+    propsBody?: PartProps<'div'>;
+}
+/** CellGroup 的样式：root、title、insetTitle、body、insetBody */
+export declare const cellGroupStyles: Readonly<{
+    body: css.CompiledStyles;
+    insetBody: css.CompiledStyles;
+    insetTitle: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 单元格分组（div > 标题 + 单元格） */
+export declare const CellGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CellGroupProps>;

package/dist/display/Cell.js

@@ -0,0 +1,204 @@
+import { dataAttrs, hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { dividerImage, dividerLayout } from "../theme/divider.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createTextVNode, createVNode } from "vue";
+import { ChevronDown, ChevronRight, ChevronUp } from "@lucide/icons";
+//#region src/display/Cell.tsx
+/**
+* 单元格与单元格分组：列表、设置页、表单的一行——左边标题（可带图标与说明），右边值，可带箭头、可点击。
+*
+*   <CellGroup title="账户" inset>
+*     <Cell title="昵称" value="莱恩" arrow onClick={edit} />
+*     <Cell title="手机号" description="用于登录与找回密码" value="138****0000" />
+*   </CellGroup>
+*
+* 单元格之间的细线从左边内边距处开始，最后一个不画；inset 的分组是浮在灰底上的圆角卡片。
+*/
+/** 箭头的方向 */
+/** 未声明的属性落到根元素（div）上；title 是标题内容，不是元素的 title 属性 */
+/** Cell 的样式：root、clickable、center、lg、icon、body、title、required、description、value、arrow */
+var cellStyles = css.create({
+	root: {
+		boxSizing: "border-box",
+		position: "relative",
+		display: "flex",
+		alignItems: "flex-start",
+		gap: "_md",
+		width: "100%",
+		minHeight: "_control",
+		paddingBlock: "0.7em",
+		paddingInline: "_lg",
+		fontSize: "_md",
+		lineHeight: "1.5",
+		color: "_text",
+		backgroundColor: "_surface",
+		backgroundImage: {
+			default: dividerImage,
+			":last-child": "none",
+			"[data-no-divider]": "none"
+		},
+		...dividerLayout
+	},
+	clickable: {
+		cursor: "pointer",
+		userSelect: "none",
+		backgroundColor: {
+			default: "_surface",
+			":active": "_fillActive"
+		},
+		transitionProperty: "background-color",
+		transitionDuration: "_xs"
+	},
+	center: { alignItems: "center" },
+	lg: {
+		minHeight: "3.5em",
+		paddingBlock: "0.9em",
+		fontSize: "_lg"
+	},
+	icon: {
+		fontSize: "1.15em",
+		marginBlockStart: "0.15em",
+		color: "_text"
+	},
+	body: {
+		flex: "1 1 auto",
+		minWidth: 0
+	},
+	title: { overflowWrap: "anywhere" },
+	required: {
+		color: "_dangerText",
+		marginInlineEnd: "0.15em"
+	},
+	description: {
+		marginBlockStart: "0.15em",
+		fontSize: "_xs",
+		color: "_textMuted"
+	},
+	value: {
+		flex: "0 1 auto",
+		maxWidth: "60%",
+		color: "_textMuted",
+		textAlign: "end",
+		overflowWrap: "anywhere"
+	},
+	arrow: {
+		fontSize: "1.1em",
+		marginBlockStart: "0.2em",
+		marginInlineStart: "-0.25em",
+		color: "_textPlaceholder"
+	}
+});
+var ARROWS = {
+	right: ChevronRight,
+	down: ChevronDown,
+	up: ChevronUp
+};
+/** 单元格（div）：可点击时 role="button" */
+var Cell = /*#__PURE__*/ _component((_props, _ctx) => {
+	const title = readonlyProp(_props, "title");
+	const description = readonlyProp(_props, "description");
+	const value = readonlyProp(_props, "value");
+	const icon = readonlyProp(_props, "icon");
+	const arrow = readonlyProp(_props, "arrow", false);
+	const clickable = readonlyProp(_props, "clickable");
+	const required = readonlyProp(_props, "required", false);
+	const center = readonlyProp(_props, "center", false);
+	const size = readonlyProp(_props, "size", "md");
+	const noDivider = readonlyProp(_props, "noDivider", false);
+	const children = childrenProp(_props);
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsValue = readonlyProp(_props, "propsValue");
+	const propsArrow = readonlyProp(_props, "propsArrow");
+	const rest = restProps(_props, _ctx, false);
+	return () => {
+		const pressable = clickable.value ?? (arrow.value !== false || rest.onClick != null);
+		const content = hasContent(value.value) ? value.value : children.value;
+		return createVNode("div", mergeAttrs({ sx: [
+			cellStyles.root,
+			pressable && cellStyles.clickable,
+			center.value && cellStyles.center,
+			size.value === "lg" && cellStyles.lg
+		] }, rest, {
+			role: pressable ? "button" : void 0,
+			...dataAttrs({ "data-no-divider": noDivider.value || void 0 })
+		}), [
+			icon.value && createVNode(Icon, mergePartProps({
+				icon: icon.value,
+				sx: cellStyles.icon
+			}, propsIcon.value), null),
+			(hasContent(title.value) || hasContent(description.value)) && createVNode("div", mergeAttrs({ sx: cellStyles.body }, propsBody.value), [hasContent(title.value) && createVNode("div", mergeAttrs({ sx: cellStyles.title }, propsTitle.value), [required.value && createVNode("span", mergeAttrs({ sx: cellStyles.required }, void 0, { "aria-hidden": "true" }), [createTextVNode("*")]), title.value]), hasContent(description.value) && createVNode("div", mergeAttrs({ sx: cellStyles.description }, propsDescription.value), [description.value])]),
+			hasContent(content) && createVNode("div", mergeAttrs({ sx: cellStyles.value }, propsValue.value), [content]),
+			arrow.value !== false && createVNode(Icon, mergePartProps({
+				icon: ARROWS[arrow.value === true ? "right" : arrow.value],
+				sx: cellStyles.arrow
+			}, propsArrow.value), null)
+		]);
+	};
+}, {
+	name: "Cell",
+	props: [
+		"title",
+		"description",
+		"value",
+		"icon",
+		"arrow",
+		"clickable",
+		"required",
+		"center",
+		"size",
+		"noDivider",
+		"propsIcon",
+		"propsBody",
+		"propsTitle",
+		"propsDescription",
+		"propsValue",
+		"propsArrow"
+	]
+});
+/** 未声明的属性落到根元素（div）上；title 是分组标题，不是元素的 title 属性 */
+/** CellGroup 的样式：root、title、insetTitle、body、insetBody */
+var cellGroupStyles = css.create({
+	root: { boxSizing: "border-box" },
+	title: {
+		paddingInline: "_lg",
+		paddingBlockStart: "_lg",
+		paddingBlockEnd: "_sm",
+		fontSize: "_sm",
+		lineHeight: "1.4",
+		color: "_textMuted"
+	},
+	insetTitle: { paddingInline: "1.75em" },
+	body: { backgroundColor: "_surface" },
+	insetBody: {
+		marginInline: "_lg",
+		borderRadius: "_lg",
+		overflow: "hidden"
+	}
+});
+/** 单元格分组（div > 标题 + 单元格） */
+var CellGroup = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const title = readonlyProp(_props2, "title");
+	const inset = readonlyProp(_props2, "inset", false);
+	const children = childrenProp(_props2);
+	const propsTitle = readonlyProp(_props2, "propsTitle");
+	const propsBody = readonlyProp(_props2, "propsBody");
+	const rest = restProps(_props2, _ctx2, false);
+	return () => createVNode("div", mergeAttrs({ sx: cellGroupStyles.root }, rest), [hasContent(title.value) && createVNode("div", mergeAttrs({ sx: [cellGroupStyles.title, inset.value && cellGroupStyles.insetTitle] }, propsTitle.value), [title.value]), createVNode("div", mergeAttrs({ sx: [cellGroupStyles.body, inset.value && cellGroupStyles.insetBody] }, propsBody.value), [children.value])]);
+}, {
+	name: "CellGroup",
+	props: [
+		"title",
+		"inset",
+		"propsTitle",
+		"propsBody"
+	]
+});
+//#endregion
+export { Cell, CellGroup, cellGroupStyles, cellStyles };
+
+//# sourceMappingURL=Cell.js.map

package/dist/display/Cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_createTextVNode"],"sources":["../../src/display/Cell.tsx"],"sourcesContent":["/**\n * 单元格与单元格分组：列表、设置页、表单的一行——左边标题（可带图标与说明），右边值，可带箭头、可点击。\n *\n *   <CellGroup title=\"账户\" inset>\n *     <Cell title=\"昵称\" value=\"莱恩\" arrow onClick={edit} />\n *     <Cell title=\"手机号\" description=\"用于登录与找回密码\" value=\"138****0000\" />\n *   </CellGroup>\n *\n * 单元格之间的细线从左边内边距处开始，最后一个不画；inset 的分组是浮在灰底上的圆角卡片。\n */\nimport { ChevronDown, ChevronRight, ChevronUp } from '@lucide/icons';\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, type IconProps } from '../base/Icon';\nimport { dividerImage, dividerLayout } from '../theme/divider';\nimport { dataAttrs, hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\n\n/** 箭头的方向 */\nexport interface CellArrows {\n  /** 向右：进入下一页 */\n  right: unknown;\n  /** 向下：展开 */\n  down: unknown;\n  /** 向上：收起 */\n  up: unknown;\n}\n\n/** 未声明的属性落到根元素（div）上；title 是标题内容，不是元素的 title 属性 */\nexport interface CellProps extends PartProps<'div', 'role' | 'title'> {\n  /** 标题 */\n  title?: VNodeChild;\n  /** 标题下的说明 */\n  description?: VNodeChild;\n  /** 右边的值；也可以写在 children 里 */\n  value?: VNodeChild;\n  /** 标题前的图标 */\n  icon?: IconData;\n  /** 右边的箭头：true 是向右，也可以给方向 */\n  arrow?: boolean | keyof CellArrows;\n  /** 可点击：按下有反馈；有 onClick 或 arrow 时自动是可点击的 */\n  clickable?: boolean;\n  /** 标题前加红色星号（必填） */\n  required?: boolean;\n  /** 内容垂直居中（默认顶端对齐，说明多行时标题与值仍在第一行） */\n  center?: boolean;\n  /**\n   * 尺寸：lg 用在大号的列表项\n   * @default 'md'\n   */\n  size?: 'md' | 'lg';\n  /** 不画下面的细线 */\n  noDivider?: boolean;\n  /** 右边的值（与 value 二选一） */\n  children?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 标题与说明那一栏的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'div'>;\n  /** 值的部件属性 */\n  propsValue?: PartProps<'div'>;\n  /** 箭头的部件属性 */\n  propsArrow?: Partial<IconProps>;\n}\n\n/** Cell 的样式：root、clickable、center、lg、icon、body、title、required、description、value、arrow */\nexport const cellStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: '_md',\n    width: '100%',\n    minHeight: '_control',\n    paddingBlock: '0.7em',\n    paddingInline: '_lg',\n    fontSize: '_md',\n    lineHeight: '1.5',\n    color: '_text',\n    backgroundColor: '_surface',\n    // 细线：从左边内边距处画到右边，最后一个不画（不用伪元素：小程序把样式展开成行内样式，伪元素进不去）\n    backgroundImage: {\n      default: dividerImage,\n      ':last-child': 'none',\n      '[data-no-divider]': 'none',\n    },\n    ...dividerLayout,\n  },\n  clickable: {\n    cursor: 'pointer',\n    userSelect: 'none',\n    backgroundColor: { default: '_surface', ':active': '_fillActive' },\n    transitionProperty: 'background-color',\n    transitionDuration: '_xs',\n  },\n  center: { alignItems: 'center' },\n  lg: { minHeight: '3.5em', paddingBlock: '0.9em', fontSize: '_lg' },\n  icon: { fontSize: '1.15em', marginBlockStart: '0.15em', color: '_text' },\n  body: { flex: '1 1 auto', minWidth: 0 },\n  title: { overflowWrap: 'anywhere' },\n  required: { color: '_dangerText', marginInlineEnd: '0.15em' },\n  description: { marginBlockStart: '0.15em', fontSize: '_xs', color: '_textMuted' },\n  value: {\n    flex: '0 1 auto',\n    maxWidth: '60%',\n    color: '_textMuted',\n    textAlign: 'end',\n    overflowWrap: 'anywhere',\n  },\n  arrow: {\n    fontSize: '1.1em',\n    marginBlockStart: '0.2em',\n    marginInlineStart: '-0.25em',\n    color: '_textPlaceholder',\n  },\n});\n\nconst ARROWS = { right: ChevronRight, down: ChevronDown, up: ChevronUp } as const;\n\n/** 单元格（div）：可点击时 role=\"button\" */\nexport const Cell = _component(\n  ({\n    title,\n    description,\n    value,\n    icon,\n    arrow = false,\n    clickable,\n    required = false,\n    center = false,\n    size = 'md',\n    noDivider = false,\n    children,\n    propsIcon,\n    propsBody,\n    propsTitle,\n    propsDescription,\n    propsValue,\n    propsArrow,\n    ...rest\n  }: CellProps) =>\n    () => {\n      const pressable = clickable ?? (arrow !== false || rest.onClick != null);\n      const content = hasContent(value) ? value : children;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                cellStyles.root,\n                pressable && cellStyles.clickable,\n                center && cellStyles.center,\n                size === 'lg' && cellStyles.lg,\n              ],\n            },\n            rest,\n            {\n              role: pressable ? 'button' : undefined,\n              ...dataAttrs({ 'data-no-divider': noDivider || undefined }),\n            },\n          )}\n        >\n          {icon && (\n            <Icon {...mergePartProps<IconProps>({ icon, sx: cellStyles.icon }, propsIcon)} />\n          )}\n          {(hasContent(title) || hasContent(description)) && (\n            <div {...mergeAttrs<'div'>({ sx: cellStyles.body }, propsBody)}>\n              {hasContent(title) && (\n                <div {...mergeAttrs<'div'>({ sx: cellStyles.title }, propsTitle)}>\n                  {required && (\n                    <span\n                      {...mergeAttrs<'span'>({ sx: cellStyles.required }, undefined, {\n                        'aria-hidden': 'true',\n                      })}\n                    >\n                      *\n                    </span>\n                  )}\n                  {title}\n                </div>\n              )}\n              {hasContent(description) && (\n                <div {...mergeAttrs<'div'>({ sx: cellStyles.description }, propsDescription)}>\n                  {description}\n                </div>\n              )}\n            </div>\n          )}\n          {hasContent(content) && (\n            <div {...mergeAttrs<'div'>({ sx: cellStyles.value }, propsValue)}>{content}</div>\n          )}\n          {arrow !== false && (\n            <Icon\n              {...mergePartProps<IconProps>(\n                { icon: ARROWS[arrow === true ? 'right' : arrow], sx: cellStyles.arrow },\n                propsArrow,\n              )}\n            />\n          )}\n        </div>\n      );\n    },\n);\n\n/** 未声明的属性落到根元素（div）上；title 是分组标题，不是元素的 title 属性 */\nexport interface CellGroupProps extends PartProps<'div', 'title'> {\n  /** 分组标题，在卡片上方 */\n  title?: VNodeChild;\n  /** 卡片样式：左右留边、圆角，浮在页面的灰底上 */\n  inset?: boolean;\n  /** 单元格 */\n  children?: VNodeChild;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 包着单元格的那一层的部件属性 */\n  propsBody?: PartProps<'div'>;\n}\n\n/** CellGroup 的样式：root、title、insetTitle、body、insetBody */\nexport const cellGroupStyles = css.create({\n  root: { boxSizing: 'border-box' },\n  title: {\n    paddingInline: '_lg',\n    paddingBlockStart: '_lg',\n    paddingBlockEnd: '_sm',\n    fontSize: '_sm',\n    lineHeight: '1.4',\n    color: '_textMuted',\n  },\n  insetTitle: { paddingInline: '1.75em' },\n  body: { backgroundColor: '_surface' },\n  insetBody: { marginInline: '_lg', borderRadius: '_lg', overflow: 'hidden' },\n});\n\n/** 单元格分组（div > 标题 + 单元格） */\nexport const CellGroup = _component(\n  ({ title, inset = false, children, propsTitle, propsBody, ...rest }: CellGroupProps) =>\n    () => (\n      <div {...mergeAttrs<'div'>({ sx: cellGroupStyles.root }, rest)}>\n        {hasContent(title) && (\n          <div\n            {...mergeAttrs<'div'>(\n              { sx: [cellGroupStyles.title, inset && cellGroupStyles.insetTitle] },\n              propsTitle,\n            )}\n          >\n            {title}\n          </div>\n        )}\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [cellGroupStyles.body, inset && cellGroupStyles.insetBody] },\n            propsBody,\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    ),\n);\n"],"mappings":"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"}

package/dist/display/Collapse.d.ts

@@ -0,0 +1,47 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到根元素（div）上 */
+export interface CollapseProps extends Omit<PartProps<'div'>, 'onChange'> {
+    /** 展开的项；双向绑定写 `_value={x}`。手风琴模式下是一个名字（或 null），否则是名字的数组 */
+    _value?: string[] | string | null;
+    /** 手风琴：同时只展开一个 */
+    accordion?: boolean;
+    /** 展开的项变了 */
+    onChange?: (value: string[] | string | null) => void;
+    /** 各个 CollapseItem */
+    children?: VNodeChild;
+}
+/** Collapse 的样式：root、header、title、arrow、panel、content */
+export declare const collapseStyles: Readonly<{
+    arrow: css.CompiledStyles;
+    clip: css.CompiledStyles;
+    content: css.CompiledStyles;
+    header: css.CompiledStyles;
+    item: css.CompiledStyles;
+    panel: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** 折叠面板（div > 各项） */
+export declare const Collapse: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CollapseProps>;
+/** 未声明的属性落到这一项的根元素（div）上 */
+export interface CollapseItemProps extends PartProps<'div', 'title'> {
+    /** 名字：展开的状态按它记 */
+    name: string;
+    /** 标题 */
+    title: VNodeChild;
+    /** 标题右边的值 */
+    value?: VNodeChild;
+    /** 不能展开 */
+    disabled?: boolean;
+    /** 展开的内容 */
+    children?: VNodeChild;
+    /** 标题栏（button）的部件属性 */
+    propsHeader?: PartProps<'button'>;
+    /** 内容的部件属性 */
+    propsContent?: PartProps<'div'>;
+}
+/** 折叠面板的一项（div > 标题栏 button[aria-expanded] + 内容） */
+export declare const CollapseItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CollapseItemProps>;

package/dist/display/Collapse.js

@@ -0,0 +1,173 @@
+import { dataAttrs, hasContent, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { dividerImage, dividerLayout } from "../theme/divider.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, childrenProp, createContext, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+import { ChevronDown } from "@lucide/icons";
+//#region src/display/Collapse.tsx
+/**
+* 折叠面板：一组可展开、收起的段落（常见问题、订单详情的分组）；手风琴模式下同时只展开一个。
+*
+*   <Collapse _value={open}>
+*     <CollapseItem name="ship" title="多久发货？">付款后 48 小时内发货。</CollapseItem>
+*     <CollapseItem name="refund" title="怎么退款？">…</CollapseItem>
+*   </Collapse>
+*   <Collapse _value={current} accordion>…</Collapse>
+*
+* 展开收起的高度动画用网格行（0fr ↔ 1fr），不用量内容的高度，小程序里也一样。
+*/
+/** 面板提供给各项的 */
+var CollapseContext = createContext("Collapse");
+/** 未声明的属性落到根元素（div）上 */
+/** Collapse 的样式：root、header、title、arrow、panel、content */
+var collapseStyles = css.create({
+	root: { backgroundColor: "_surface" },
+	item: {
+		backgroundImage: {
+			default: dividerImage,
+			":last-child": "none"
+		},
+		...dividerLayout
+	},
+	header: {
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "center",
+		gap: "_md",
+		width: "100%",
+		minHeight: "_control",
+		margin: 0,
+		paddingBlock: "0.7em",
+		paddingInline: "_lg",
+		borderWidth: 0,
+		backgroundColor: {
+			default: "transparent",
+			":active:not([disabled])": "_fillActive"
+		},
+		color: {
+			default: "_text",
+			"[disabled]": "_textDisabled"
+		},
+		fontFamily: "inherit",
+		fontSize: "_md",
+		lineHeight: "1.5",
+		textAlign: "start",
+		cursor: {
+			default: "pointer",
+			"[disabled]": "not-allowed"
+		}
+	},
+	title: {
+		flex: "1 1 auto",
+		minWidth: 0,
+		overflowWrap: "anywhere"
+	},
+	value: {
+		flex: "none",
+		color: "_textMuted"
+	},
+	arrow: {
+		flex: "none",
+		color: "_textPlaceholder",
+		transform: {
+			default: "none",
+			"[data-open]": "rotate(180deg)"
+		},
+		transitionProperty: "transform",
+		transitionDuration: "_md"
+	},
+	panel: {
+		display: "grid",
+		gridTemplateRows: {
+			default: "0fr",
+			"[data-open]": "1fr"
+		},
+		transitionProperty: "grid-template-rows",
+		transitionDuration: "_md",
+		transitionTimingFunction: "_standard"
+	},
+	clip: {
+		overflow: "hidden",
+		minHeight: 0
+	},
+	content: {
+		paddingBlock: "0.25em 1em",
+		paddingInline: "_lg",
+		fontSize: "_sm",
+		lineHeight: "1.6",
+		color: "_textMuted"
+	}
+});
+/** 折叠面板（div > 各项） */
+var Collapse = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => [], _ctx.emit);
+	const accordion = readonlyProp(_props, "accordion", false);
+	const onChange = readonlyProp(_props, "onChange");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	CollapseContext.provide({
+		isOpen: (name) => Array.isArray(value.value) ? value.value.includes(name) : value.value === name,
+		toggle(name) {
+			if (accordion.value) value.value = value.value === name ? null : name;
+			else {
+				const list = Array.isArray(value.value) ? value.value : [];
+				value.value = list.includes(name) ? list.filter((item) => item !== name) : [...list, name];
+			}
+			onChange.value?.(value.value);
+		}
+	});
+	return () => createVNode("div", mergeAttrs({ sx: collapseStyles.root }, rest), [children.value]);
+}, {
+	name: "Collapse",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"accordion",
+		"onChange"
+	]
+});
+/** 未声明的属性落到这一项的根元素（div）上 */
+/** 折叠面板的一项（div > 标题栏 button[aria-expanded] + 内容） */
+var CollapseItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const name = readonlyProp(_props2, "name");
+	const title = readonlyProp(_props2, "title");
+	const value = readonlyProp(_props2, "value");
+	const disabled = readonlyProp(_props2, "disabled", false);
+	const children = childrenProp(_props2);
+	const propsHeader = readonlyProp(_props2, "propsHeader");
+	const propsContent = readonlyProp(_props2, "propsContent");
+	const rest = restProps(_props2, _ctx2, false);
+	const collapse = CollapseContext.inject();
+	return () => {
+		const open = collapse.isOpen(name.value);
+		const state = dataAttrs({ "data-open": open });
+		return createVNode("div", mergeAttrs({ sx: collapseStyles.item }, rest, state), [createVNode("button", mergeAttrs({ sx: collapseStyles.header }, propsHeader.value, {
+			type: "button",
+			disabled: disabled.value,
+			"aria-expanded": open ? "true" : "false",
+			onClick: () => collapse.toggle(name.value)
+		}), [
+			createVNode("span", mergeAttrs({ sx: collapseStyles.title }), [title.value]),
+			hasContent(value.value) && createVNode("span", mergeAttrs({ sx: collapseStyles.value }), [value.value]),
+			createVNode(Icon, mergeJsxProps({
+				"icon": ChevronDown,
+				"sx": collapseStyles.arrow
+			}, state), null)
+		]), createVNode("div", mergeAttrs({ sx: collapseStyles.panel }, state), [createVNode("div", mergeAttrs({ sx: collapseStyles.clip }), [createVNode("div", mergeAttrs({ sx: collapseStyles.content }, propsContent.value), [children.value])])])]);
+	};
+}, {
+	name: "CollapseItem",
+	props: [
+		"name",
+		"title",
+		"value",
+		"disabled",
+		"propsHeader",
+		"propsContent"
+	]
+});
+//#endregion
+export { Collapse, CollapseItem, collapseStyles };
+
+//# sourceMappingURL=Collapse.js.map