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

package/dist/display/Checklist.js

@@ -0,0 +1,260 @@
+import { useLang } from "../config/context.js";
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { Icon } from "../base/Icon.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { Progress } from "../feedback/Progress.js";
+import { createVNode, mergeProps, useId } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Ban, CircleAlert, CircleCheck, CircleDashed, CircleMinus } from "@lucide/icons";
+//#region src/display/Checklist.tsx
+/**
+* 完成清单：一组要做完的事，每项的状态（完成、待办、超时、不适用、受阻）与它的上下文——怎么做、谁负责、哪天、证据、去处理。
+* 里程碑与交付证据、结项材料、上线检查、新用户的引导任务。参考 Shopify Polaris 的 Setup guide、GitHub 的任务列表。
+*
+*   <Checklist
+*     title="结项材料"
+*     summary
+*     items={[
+*       { label: '验收报告', status: 'done', date: '10-12', evidence: <Link href={url}>验证报告.pdf</Link> },
+*       { label: '财务复核意见', status: 'overdue', owner: '财务部', date: '计划 10-20', action: <Button>催办</Button> },
+*       { label: '合同签订记录', description: '谈定价格与生效日期，采购经理签字', owner: '采购部' },
+*     ]}
+*   />
+*   <Checklist layout="inline" items={…} />                    一行排开、放不下换行（详情行、卡片的一角）
+*   <Checklist layout="icons" aria-label="里程碑" items={…} />  只有一排状态图标（表格的格子里），读屏念每一项
+*   <Checklist items={tasks} onCheckedChange={(item, done) => save(item.key, done)} />   可以勾选（上线检查、引导任务）
+*
+* summary 在上面显示“已完成 2 / 3”与进度条（不适用的不算）。没完成的名称是次要色，不适用的划掉；
+* 超时的日期用危险色。每项的状态写在给读屏的文字里。
+*
+* 部件：Root（div）、Summary（汇总行）、List（ul）、Item（li，可以按项计算）、Status（状态图标，可勾选时是按钮）、Label、Meta。
+*/
+/** 一项的状态 */
+/** 清单的一项 */
+/** 清单的排法 */
+/** 未声明的属性落到外层元素上（list 是 div，inline 是 ul，icons 是 span） */
+/** Checklist 的样式 */
+var checklistStyles = css.create({
+	root: {
+		display: "grid",
+		gap: "_sm"
+	},
+	summary: {
+		display: "grid",
+		gridTemplateColumns: "auto 1fr",
+		alignItems: "center",
+		gap: "_md",
+		fontSize: "_sm",
+		color: "_textMuted"
+	},
+	list: {
+		display: "grid",
+		margin: 0,
+		padding: 0,
+		listStyle: "none"
+	},
+	item: {
+		display: "grid",
+		gridTemplateColumns: "auto minmax(0, 1fr) auto",
+		columnGap: "_sm",
+		alignItems: "start",
+		paddingBlock: "_xs"
+	},
+	status: {
+		display: "flex",
+		alignItems: "center",
+		minHeight: "1lh",
+		fontSize: "1.125em"
+	},
+	toggle: {
+		display: "inline-flex",
+		padding: 0,
+		margin: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: "inherit",
+		font: "inherit",
+		borderRadius: "_full",
+		cursor: {
+			default: "pointer",
+			":disabled": "default"
+		}
+	},
+	body: {
+		display: "grid",
+		gap: "2px",
+		minWidth: 0
+	},
+	label: {
+		color: "_text",
+		overflowWrap: "anywhere"
+	},
+	labelPending: { color: "_textMuted" },
+	labelSkipped: {
+		color: "_textMuted",
+		textDecorationLine: "line-through"
+	},
+	description: {
+		fontSize: "_sm",
+		color: "_textMuted"
+	},
+	meta: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		columnGap: "_sm",
+		rowGap: "2px",
+		fontSize: "_sm",
+		color: "_textMuted"
+	},
+	late: { color: "_dangerText" },
+	action: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_xs"
+	},
+	inline: {
+		display: "flex",
+		flexWrap: "wrap",
+		columnGap: "_lg",
+		rowGap: "_xs",
+		margin: 0,
+		padding: 0,
+		listStyle: "none"
+	},
+	inlineItem: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_xs",
+		whiteSpace: "nowrap"
+	},
+	icons: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "2px"
+	}
+});
+/** 各状态的图标与颜色 */
+var checklistStatusStyles = css.create({
+	done: { color: "_successText" },
+	todo: { color: "_textMuted" },
+	overdue: { color: "_dangerText" },
+	blocked: { color: "_warningText" },
+	skipped: { color: "_textMuted" }
+});
+var statusIcons = {
+	done: CircleCheck,
+	todo: CircleDashed,
+	overdue: CircleAlert,
+	blocked: Ban,
+	skipped: CircleMinus
+};
+var keyOf = (item, index) => item.key ?? (typeof item.label === "string" ? item.label : String(index));
+var statusOf = (item) => item.status ?? "todo";
+/** 完成清单 */
+var Checklist = /*#__PURE__*/ _component((_props, _ctx) => {
+	const items = readonlyProp(_props, "items");
+	const layout = readonlyProp(_props, "layout", "list");
+	const summary = readonlyProp(_props, "summary", false);
+	const size = readonlyProp(_props, "size");
+	const onCheckedChange = readonlyProp(_props, "onCheckedChange");
+	const propsItem = readonlyProp(_props, "propsItem");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const id = useId();
+	const statusIcon = (item) => {
+		const status = statusOf(item);
+		return createVNode(Icon, {
+			"icon": statusIcons[status],
+			"sx": checklistStatusStyles[status]
+		}, null);
+	};
+	/** 状态：可以勾选时是复选按钮（名称是这一项的名称），否则是图标加给读屏的状态文字 */
+	const status = (item, labelId) => {
+		const state = statusOf(item);
+		if (!onCheckedChange.value) return createVNode("span", css.attrs(checklistStyles.status), [statusIcon(item), createVNode(VisuallyHidden, null, { default: () => [lang.checklistStatus[state]] })]);
+		const done = state === "done";
+		return createVNode("span", css.attrs(checklistStyles.status), [createVNode("button", mergeProps({
+			"type": "button",
+			"role": "checkbox",
+			"aria-checked": done,
+			"aria-labelledby": labelId,
+			"aria-describedby": `${labelId}-status`,
+			"disabled": state === "skipped" || state === "blocked",
+			"onClick": () => onCheckedChange.value(item, !done)
+		}, css.attrs(checklistStyles.toggle, focusRingStyles.visible)), [statusIcon(item)]), createVNode(VisuallyHidden, { "id": `${labelId}-status` }, { default: () => [lang.checklistStatus[state]] })]);
+	};
+	const labelSx = (item) => {
+		const state = statusOf(item);
+		return [checklistStyles.label, state === "skipped" ? checklistStyles.labelSkipped : state !== "done" && checklistStyles.labelPending];
+	};
+	/** 读屏念的整组：名称与状态（icons 排法） */
+	const iconsLabel = () => lang.checklistIconsLabel(items.value.map((item) => lang.checklistItemState(typeof item.label === "string" ? item.label : "", lang.checklistStatus[statusOf(item)])));
+	const counted = () => items.value.filter((item) => statusOf(item) !== "skipped");
+	const doneCount = () => counted().filter((item) => statusOf(item) === "done").length;
+	return () => {
+		if (layout.value === "icons") {
+			const label = iconsLabel();
+			return createVNode("span", mergeAttrs({ sx: [checklistStyles.icons, size.value && fontSizeStyles[size.value]] }, rest, {
+				role: "img",
+				"aria-label": label,
+				title: label
+			}), [items.value.map((item, index) => createVNode("span", { "key": keyOf(item, index) }, [statusIcon(item)]))]);
+		}
+		if (layout.value === "inline") return createVNode("ul", mergeAttrs({ sx: [checklistStyles.inline, size.value && fontSizeStyles[size.value]] }, rest), [items.value.map((item, index) => {
+			const labelId = `${id}-${index}`;
+			return createVNode("li", mergeProps({ "key": keyOf(item, index) }, css.attrs(checklistStyles.inlineItem)), [
+				status(item, labelId),
+				createVNode("span", mergeProps({ "id": labelId }, css.attrs(labelSx(item))), [item.label]),
+				hasContent(item.date) && createVNode("span", css.attrs(checklistStyles.meta, statusOf(item) === "overdue" && checklistStyles.late), [item.date]),
+				item.evidence
+			]);
+		})]);
+		const total = counted().length;
+		return createVNode("div", mergeAttrs({ sx: [checklistStyles.root, size.value && fontSizeStyles[size.value]] }, rest), [summary.value && total > 0 && createVNode("div", css.attrs(checklistStyles.summary), [createVNode("span", null, [lang.checklistSummary(doneCount(), total)]), createVNode(Progress, {
+			"value": doneCount(),
+			"max": total,
+			"size": "xs",
+			"tone": doneCount() === total ? "success" : "accent",
+			"aria-label": lang.checklistSummary(doneCount(), total)
+		}, null)]), createVNode("ul", css.attrs(checklistStyles.list), [items.value.map((item, index) => {
+			const own = typeof propsItem.value === "function" ? propsItem.value(item) : propsItem.value;
+			const labelId = `${id}-${index}`;
+			const meta = [
+				item.owner,
+				item.date,
+				item.evidence
+			].some(hasContent);
+			return createVNode("li", mergeProps({ "key": keyOf(item, index) }, mergeAttrs({ sx: checklistStyles.item }, own), { "data-status": statusOf(item) }), [
+				status(item, labelId),
+				createVNode("div", css.attrs(checklistStyles.body), [
+					createVNode("span", mergeProps({ "id": labelId }, css.attrs(labelSx(item))), [item.label]),
+					hasContent(item.description) && createVNode("span", css.attrs(checklistStyles.description), [item.description]),
+					meta && createVNode("span", css.attrs(checklistStyles.meta), [
+						hasContent(item.owner) && createVNode("span", null, [item.owner]),
+						hasContent(item.date) && createVNode("span", css.attrs(statusOf(item) === "overdue" && checklistStyles.late), [item.date]),
+						item.evidence
+					])
+				]),
+				hasContent(item.action) ? createVNode("div", css.attrs(checklistStyles.action), [item.action]) : createVNode("span", null, null)
+			]);
+		})])]);
+	};
+}, {
+	name: "Checklist",
+	props: [
+		"items",
+		"layout",
+		"summary",
+		"size",
+		"onCheckedChange",
+		"propsItem"
+	]
+});
+//#endregion
+export { Checklist, checklistStatusStyles, checklistStyles };
+
+//# sourceMappingURL=Checklist.js.map

package/dist/display/Checklist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checklist.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Checklist.tsx"],"sourcesContent":["/**\n * 完成清单：一组要做完的事，每项的状态（完成、待办、超时、不适用、受阻）与它的上下文——怎么做、谁负责、哪天、证据、去处理。\n * 里程碑与交付证据、结项材料、上线检查、新用户的引导任务。参考 Shopify Polaris 的 Setup guide、GitHub 的任务列表。\n *\n *   <Checklist\n *     title=\"结项材料\"\n *     summary\n *     items={[\n *       { label: '验收报告', status: 'done', date: '10-12', evidence: <Link href={url}>验证报告.pdf</Link> },\n *       { label: '财务复核意见', status: 'overdue', owner: '财务部', date: '计划 10-20', action: <Button>催办</Button> },\n *       { label: '合同签订记录', description: '谈定价格与生效日期，采购经理签字', owner: '采购部' },\n *     ]}\n *   />\n *   <Checklist layout=\"inline\" items={…} />                    一行排开、放不下换行（详情行、卡片的一角）\n *   <Checklist layout=\"icons\" aria-label=\"里程碑\" items={…} />  只有一排状态图标（表格的格子里），读屏念每一项\n *   <Checklist items={tasks} onCheckedChange={(item, done) => save(item.key, done)} />   可以勾选（上线检查、引导任务）\n *\n * summary 在上面显示“已完成 2 / 3”与进度条（不适用的不算）。没完成的名称是次要色，不适用的划掉；\n * 超时的日期用危险色。每项的状态写在给读屏的文字里。\n *\n * 部件：Root（div）、Summary（汇总行）、List（ul）、Item（li，可以按项计算）、Status（状态图标，可勾选时是按钮）、Label、Meta。\n */\nimport { Ban, CircleAlert, CircleCheck, CircleDashed, CircleMinus } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Icon, type IconData } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { Progress } from '../feedback/Progress';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 一项的状态 */\nexport interface ChecklistStatuses {\n  /** 完成 */\n  done: unknown;\n  /** 待办（默认） */\n  todo: unknown;\n  /** 超时：过了计划日期还没完成 */\n  overdue: unknown;\n  /** 受阻：等别人、缺前提 */\n  blocked: unknown;\n  /** 不适用：这一次不用做，不算进进度 */\n  skipped: unknown;\n}\n\n/** 清单的一项 */\nexport interface ChecklistItem {\n  /** 唯一的 key；不写时用 label（label 是文字时）或位置 */\n  key?: string;\n  /** 名称 */\n  label: VNodeChild;\n  /** 状态，默认 todo */\n  status?: keyof ChecklistStatuses;\n  /** 说明：怎么做、要什么材料、缺的由谁出具 */\n  description?: VNodeChild;\n  /** 负责人（谁处理、谁出具） */\n  owner?: VNodeChild;\n  /** 日期：完成的日期，或计划日期（超时时用危险色） */\n  date?: VNodeChild;\n  /** 证据：附件、报告的链接 */\n  evidence?: VNodeChild;\n  /** 操作：上传证据、去处理、催办（结束边） */\n  action?: VNodeChild;\n}\n\n/** 清单的排法 */\nexport interface ChecklistLayouts {\n  /** 一项一行（默认）：状态、名称与说明、负责人 · 日期 · 证据，操作在结束边 */\n  list: unknown;\n  /** 一行排开、放不下换行：状态、名称、日期、证据 */\n  inline: unknown;\n  /** 只有一排状态图标：表格的格子里；悬停与读屏有每一项的说明 */\n  icons: unknown;\n}\n\n/** 未声明的属性落到外层元素上（list 是 div，inline 是 ul，icons 是 span） */\nexport interface ChecklistProps extends PartProps<'div'> {\n  /** 各项 */\n  items: readonly ChecklistItem[];\n  /**\n   * 排法\n   * @default 'list'\n   */\n  layout?: keyof ChecklistLayouts;\n  /** 上面显示“已完成 2 / 3”与进度条（list 排法） */\n  summary?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** 可以勾选：状态图标变成复选按钮，点了报告新的完成状态（不适用、受阻的不能勾） */\n  onCheckedChange?: (item: ChecklistItem, done: boolean) => void;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: ChecklistItem) => PartProps<'li'>);\n}\n\n/** Checklist 的样式 */\nexport const checklistStyles = css.create({\n  root: { display: 'grid', gap: '_sm' },\n  summary: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    alignItems: 'center',\n    gap: '_md',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  list: { display: 'grid', margin: 0, padding: 0, listStyle: 'none' },\n  // 状态一列、内容一列、操作一列；状态贴着名称那一行\n  item: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'start',\n    paddingBlock: '_xs',\n  },\n  status: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '1lh',\n    fontSize: '1.125em',\n  },\n  // 可以勾选时的按钮：只有图标，去掉按钮的外观\n  toggle: {\n    display: 'inline-flex',\n    padding: 0,\n    margin: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'inherit',\n    font: 'inherit',\n    borderRadius: '_full',\n    cursor: { default: 'pointer', ':disabled': 'default' },\n  },\n  body: { display: 'grid', gap: '2px', minWidth: 0 },\n  label: { color: '_text', overflowWrap: 'anywhere' },\n  labelPending: { color: '_textMuted' },\n  labelSkipped: { color: '_textMuted', textDecorationLine: 'line-through' },\n  description: { fontSize: '_sm', color: '_textMuted' },\n  meta: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '2px',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  late: { color: '_dangerText' },\n  action: { display: 'flex', alignItems: 'center', gap: '_xs' },\n  inline: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    columnGap: '_lg',\n    rowGap: '_xs',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  inlineItem: { display: 'inline-flex', alignItems: 'center', gap: '_xs', whiteSpace: 'nowrap' },\n  icons: { display: 'inline-flex', alignItems: 'center', gap: '2px' },\n});\n\n/** 各状态的图标与颜色 */\nexport const checklistStatusStyles = css.create({\n  done: { color: '_successText' },\n  todo: { color: '_textMuted' },\n  overdue: { color: '_dangerText' },\n  blocked: { color: '_warningText' },\n  skipped: { color: '_textMuted' },\n});\n\nconst statusIcons: Record<keyof ChecklistStatuses, IconData> = {\n  done: CircleCheck,\n  todo: CircleDashed,\n  overdue: CircleAlert,\n  blocked: Ban,\n  skipped: CircleMinus,\n};\n\nconst keyOf = (item: ChecklistItem, index: number) =>\n  item.key ?? (typeof item.label === 'string' ? item.label : String(index));\n\nconst statusOf = (item: ChecklistItem): keyof ChecklistStatuses => item.status ?? 'todo';\n\n/** 完成清单 */\nexport const Checklist = _component(\n  ({\n    items,\n    layout = 'list',\n    summary = false,\n    size,\n    onCheckedChange,\n    propsItem,\n    ...rest\n  }: ChecklistProps) => {\n    const lang = useLang();\n    const id = useId();\n\n    const statusIcon = (item: ChecklistItem) => {\n      const status = statusOf(item);\n      return <Icon icon={statusIcons[status]} sx={checklistStatusStyles[status]} />;\n    };\n\n    /** 状态：可以勾选时是复选按钮（名称是这一项的名称），否则是图标加给读屏的状态文字 */\n    const status = (item: ChecklistItem, labelId: string) => {\n      const state = statusOf(item);\n      if (!onCheckedChange)\n        return (\n          <span {...css.attrs(checklistStyles.status)}>\n            {statusIcon(item)}\n            <VisuallyHidden>{lang.checklistStatus[state]}</VisuallyHidden>\n          </span>\n        );\n      const done = state === 'done';\n      return (\n        <span {...css.attrs(checklistStyles.status)}>\n          <button\n            type=\"button\"\n            role=\"checkbox\"\n            aria-checked={done}\n            aria-labelledby={labelId}\n            aria-describedby={`${labelId}-status`}\n            disabled={state === 'skipped' || state === 'blocked'}\n            onClick={() => onCheckedChange(item, !done)}\n            {...css.attrs(checklistStyles.toggle, focusRingStyles.visible)}\n          >\n            {statusIcon(item)}\n          </button>\n          <VisuallyHidden id={`${labelId}-status`}>{lang.checklistStatus[state]}</VisuallyHidden>\n        </span>\n      );\n    };\n\n    const labelSx = (item: ChecklistItem) => {\n      const state = statusOf(item);\n      return [\n        checklistStyles.label,\n        state === 'skipped'\n          ? checklistStyles.labelSkipped\n          : state !== 'done' && checklistStyles.labelPending,\n      ];\n    };\n\n    /** 读屏念的整组：名称与状态（icons 排法） */\n    const iconsLabel = () =>\n      lang.checklistIconsLabel(\n        items.map((item) =>\n          lang.checklistItemState(\n            typeof item.label === 'string' ? item.label : '',\n            lang.checklistStatus[statusOf(item)],\n          ),\n        ),\n      );\n\n    const counted = () => items.filter((item) => statusOf(item) !== 'skipped');\n    const doneCount = () => counted().filter((item) => statusOf(item) === 'done').length;\n\n    return () => {\n      if (layout === 'icons') {\n        const label = iconsLabel();\n        return (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [checklistStyles.icons, size && fontSizeStyles[size]] },\n              rest as PartProps<'span'>,\n              { role: 'img', 'aria-label': label, title: label },\n            )}\n          >\n            {items.map((item, index) => (\n              <span key={keyOf(item, index)}>{statusIcon(item)}</span>\n            ))}\n          </span>\n        );\n      }\n\n      if (layout === 'inline')\n        return (\n          <ul\n            {...mergeAttrs<'ul'>(\n              { sx: [checklistStyles.inline, size && fontSizeStyles[size]] },\n              rest as PartProps<'ul'>,\n            )}\n          >\n            {items.map((item, index) => {\n              const labelId = `${id}-${index}`;\n              return (\n                <li key={keyOf(item, index)} {...css.attrs(checklistStyles.inlineItem)}>\n                  {status(item, labelId)}\n                  <span id={labelId} {...css.attrs(labelSx(item))}>\n                    {item.label}\n                  </span>\n                  {hasContent(item.date) && (\n                    <span\n                      {...css.attrs(\n                        checklistStyles.meta,\n                        statusOf(item) === 'overdue' && checklistStyles.late,\n                      )}\n                    >\n                      {item.date}\n                    </span>\n                  )}\n                  {item.evidence}\n                </li>\n              );\n            })}\n          </ul>\n        );\n\n      const total = counted().length;\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: [checklistStyles.root, size && fontSizeStyles[size]] }, rest)}\n        >\n          {summary && total > 0 && (\n            <div {...css.attrs(checklistStyles.summary)}>\n              <span>{lang.checklistSummary(doneCount(), total)}</span>\n              <Progress\n                value={doneCount()}\n                max={total}\n                size=\"xs\"\n                tone={doneCount() === total ? 'success' : 'accent'}\n                aria-label={lang.checklistSummary(doneCount(), total)}\n              />\n            </div>\n          )}\n          <ul {...css.attrs(checklistStyles.list)}>\n            {items.map((item, index) => {\n              const own = typeof propsItem === 'function' ? propsItem(item) : propsItem;\n              const labelId = `${id}-${index}`;\n              const meta = [item.owner, item.date, item.evidence].some(hasContent);\n              return (\n                <li\n                  key={keyOf(item, index)}\n                  {...mergeAttrs<'li'>({ sx: checklistStyles.item }, own)}\n                  data-status={statusOf(item)}\n                >\n                  {status(item, labelId)}\n                  <div {...css.attrs(checklistStyles.body)}>\n                    <span id={labelId} {...css.attrs(labelSx(item))}>\n                      {item.label}\n                    </span>\n                    {hasContent(item.description) && (\n                      <span {...css.attrs(checklistStyles.description)}>{item.description}</span>\n                    )}\n                    {meta && (\n                      <span {...css.attrs(checklistStyles.meta)}>\n                        {hasContent(item.owner) && <span>{item.owner}</span>}\n                        {hasContent(item.date) && (\n                          <span\n                            {...css.attrs(statusOf(item) === 'overdue' && checklistStyles.late)}\n                          >\n                            {item.date}\n                          </span>\n                        )}\n                        {item.evidence}\n                      </span>\n                    )}\n                  </div>\n                  {hasContent(item.action) ? (\n                    <div {...css.attrs(checklistStyles.action)}>{item.action}</div>\n                  ) : (\n                    <span />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Collapse.d.ts

@@ -0,0 +1,24 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到外层的 div 上；要分区语义时在外面包 section */
+export interface CollapseProps extends PartProps<'div', 'hidden' | 'inert'> {
+    /** 是否展开：父级写 _open={x}；页内搜索命中收起的内容时自动展开并写回 */
+    _open?: boolean;
+    children?: VNodeChild;
+    /** 内容层：外层负责高度过渡，内容层裁掉溢出 */
+    propsContent?: PartProps<'div'>;
+    /**
+     * 第一次展开时才渲染内容，之后收起也保留（内容很重、多数人不会展开时用）。
+     * 代价：还没展开过的内容页内搜索找不到
+     */
+    lazy?: boolean;
+}
+/** Collapse 的样式：root、open、content */
+export declare const collapseStyles: Readonly<{
+    content: css.CompiledStyles;
+    open: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 展开收起的内容区（div），带高度过渡；收起后可被页内搜索找到并自动展开 */
+export declare const Collapse: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CollapseProps>;

package/dist/display/Collapse.js

@@ -0,0 +1,65 @@
+import { t } from "../config/theme/tokens.js";
+import { mergeAttrs } from "../utils/props.js";
+import { afterTransitions } from "../utils/style/transitions.js";
+import { useLazyContent } from "../utils/motion/presence.js";
+import { createVNode, mergeProps, ref, shallowRef } from "vue";
+import { _component, bindable, childrenProp, effect, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/display/Collapse.tsx
+/** 未声明的属性落到外层的 div 上；要分区语义时在外面包 section */
+var supportsUntilFound = typeof HTMLElement !== "undefined" && "onbeforematch" in HTMLElement.prototype;
+/** Collapse 的样式：root、open、content */
+var collapseStyles = css.create({
+	root: {
+		display: "grid",
+		gridTemplateRows: "0fr",
+		transition: `grid-template-rows ${t.durations.md} ${t.easings.standard}`
+	},
+	open: { gridTemplateRows: "1fr" },
+	content: {
+		minHeight: 0,
+		overflow: "hidden"
+	}
+});
+/** 展开收起的内容区（div），带高度过渡；收起后可被页内搜索找到并自动展开 */
+var Collapse = /*#__PURE__*/ _component((_props, _ctx) => {
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const children = childrenProp(_props);
+	const propsContent = readonlyProp(_props, "propsContent");
+	const lazy = readonlyProp(_props, "lazy", false);
+	const rest = restProps(_props, _ctx, false);
+	let root = shallowRef(null);
+	let collapsed = ref(untrack(() => !open.value));
+	const showContent = useLazyContent(() => open.value, () => lazy.value);
+	effect(() => {
+		if (open.value) {
+			collapsed.value = false;
+			return;
+		}
+		if (untrack(() => collapsed.value)) return;
+		let cancelled = false;
+		afterTransitions(root.value).then(() => {
+			if (!cancelled) collapsed.value = true;
+		});
+		return () => cancelled = true;
+	});
+	return () => createVNode("div", mergeProps(mergeAttrs({ sx: collapseStyles.root }, rest, {
+		sx: open.value && collapseStyles.open,
+		ref: root,
+		hidden: collapsed.value && supportsUntilFound ? "until-found" : void 0,
+		inert: collapsed.value && !supportsUntilFound ? true : void 0,
+		onBeforematch: () => open.value = true
+	}), { "data-state": open.value ? "open" : "closed" }), [createVNode("div", mergeAttrs({ sx: collapseStyles.content }, propsContent.value), [showContent() && children.value])]);
+}, {
+	name: "Collapse",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"propsContent",
+		"lazy"
+	]
+});
+//#endregion
+export { Collapse, collapseStyles };
+
+//# sourceMappingURL=Collapse.js.map

package/dist/display/Collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","names":["_vtp_bindable","_vtp_childrenProp","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/display/Collapse.tsx"],"sourcesContent":["/**\n * 展开收起的内容区，带高度过渡。触发器另外写，或者用 Collapsible。\n *\n *   <Collapse _open={open}>内容</Collapse>\n *\n * 高度过渡用 grid-template-rows 0fr ↔ 1fr，各浏览器都能动画（interpolate-size 只有 Chromium）。\n * 收起并且过渡结束后：\n *   - 支持 hidden=\"until-found\" 的浏览器加上它：页内搜索、锚点命中时浏览器自动展开，这里把 open 写回\n *   - 不支持的（Safari）加 inert：收起的内容不能被 Tab 聚焦，读屏也读不到\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLazyContent } from '../utils/motion/presence';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { afterTransitions } from '../utils/style/transitions';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到外层的 div 上；要分区语义时在外面包 section */\nexport interface CollapseProps extends PartProps<'div', 'hidden' | 'inert'> {\n  /** 是否展开：父级写 _open={x}；页内搜索命中收起的内容时自动展开并写回 */\n  _open?: boolean;\n  children?: VNodeChild;\n  /** 内容层：外层负责高度过渡，内容层裁掉溢出 */\n  propsContent?: PartProps<'div'>;\n  /**\n   * 第一次展开时才渲染内容，之后收起也保留（内容很重、多数人不会展开时用）。\n   * 代价：还没展开过的内容页内搜索找不到\n   */\n  lazy?: boolean;\n}\n\nconst supportsUntilFound =\n  typeof HTMLElement !== 'undefined' && 'onbeforematch' in HTMLElement.prototype;\n\n/** Collapse 的样式：root、open、content */\nexport const collapseStyles = css.create({\n  root: {\n    display: 'grid',\n    gridTemplateRows: '0fr',\n    transition: `grid-template-rows ${t.durations.md} ${t.easings.standard}`,\n  },\n  open: { gridTemplateRows: '1fr' },\n  // 网格项默认的最小高度是内容高度，要设为 0 才能收到 0fr\n  content: { minHeight: 0, overflow: 'hidden' },\n});\n\n/** 展开收起的内容区（div），带高度过渡；收起后可被页内搜索找到并自动展开 */\nexport const Collapse = _component(\n  ({\n    _open: open = _bindable(false),\n    children,\n    propsContent,\n    lazy = false,\n    ...rest\n  }: CollapseProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    // 完全收起（过渡已结束）：这时才隐藏内容，收起的过程中内容仍要可见\n    let collapsed = _state(_untrack(!open));\n    const showContent = useLazyContent(\n      () => open,\n      () => lazy,\n    );\n\n    _effect(() => {\n      if (open) {\n        collapsed = false;\n        return;\n      }\n      // 一开始就是收起的：没有过渡要等。不然每个收起的 Collapse 挂载时都要对整棵内容 getAnimations，\n      // 一页十来个收起的源码就是十来次样式计算\n      if (_untrack(collapsed)) return;\n      let cancelled = false;\n      void afterTransitions(root!).then(() => {\n        if (!cancelled) collapsed = true;\n      });\n      return () => (cancelled = true);\n    });\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: collapseStyles.root }, rest, {\n          sx: open && collapseStyles.open,\n          ref: _toRef(root),\n          hidden: collapsed && supportsUntilFound ? 'until-found' : undefined,\n          inert: collapsed && !supportsUntilFound ? true : undefined,\n          onBeforematch: () => (open = true),\n        })}\n        data-state={open ? 'open' : 'closed'}\n      >\n        <div {...mergeAttrs<'div'>({ sx: collapseStyles.content }, propsContent)}>\n          {showContent() && children}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAgCA,IAAM,qBACJ,OAAO,gBAAgB,eAAe,mBAAmB,YAAY;;AAGvE,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EACJ,SAAS;EACT,kBAAkB;EAClB,YAAY,sBAAsB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAChE;CACA,MAAM,EAAE,kBAAkB,MAAM;CAEhC,SAAS;EAAE,WAAW;EAAG,UAAU;CAAS;AAC9C,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAMqB;CAAA,MAAA,OAAAA,SAAA,QAAA,eALK,OAAK,KAAA,IAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAGtB,KAAK;CAAA,MACT,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,IAAI,OAAIC,WAAkC,IAAI;CAE9C,IAAI,YAASC,IAAAC,cAAmB,CAAA,KAAA,KAAK,CAAA;CACrC,MAAM,cAAc,qBAClB,KAAA,aACA,KAAA,KACF;CAEA,aAAc;EACZ,IAAA,KAAA,OAAU;GACR,UAAA,QAAY;GACZ;EACF;EAGA,IAAAA,cAAA,UAAA,KAAA,GAAyB;EACzB,IAAI,YAAY;EAChB,iBAAqB,KAAA,KAAM,CAAC,CAAC,WAAW;GACtC,IAAI,CAAC,WAAW,UAAA,QAAY;EAC9B,CAAC;EACD,aAAc,YAAY;CAC5B,CAAC;CAED,aAAOC,YAAA,OAAAC,WAEC,WAAkB,EAAE,IAAI,eAAe,KAAK,GAAG,MAAM;EACvD,IAAI,KAAA,SAAQ,eAAe;EAC3B,KAAG;EACH,QAAQ,UAAA,SAAa,qBAAqB,gBAAgB,KAAA;EAC1D,OAAO,UAAA,SAAa,CAAC,qBAAqB,OAAO,KAAA;EACjD,qBAAsB,KAAA,QAAO;CAC/B,CAAC,GAAC,EAAA,cACU,KAAA,QAAO,SAAS,SAAQ,CAAA,GAAA,CAAAD,YAAA,OAE3B,WAAkB,EAAE,IAAI,eAAe,QAAQ,GAAC,aAAA,KAAc,GAAC,CACrE,YAAY,KAAC,SAAA,KAAY,CAAA,CAAA,CAAA;AAIlC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/Collapsible.d.ts

@@ -0,0 +1,12 @@
+import { type VNodeChild } from 'vue';
+import type { TriggerProps } from '../utils/props';
+import { type CollapseProps } from './Collapse';
+/** 未声明的属性落到 Collapse 上 */
+export interface CollapsibleProps extends CollapseProps {
+    /** 触发器：`(props) => <Button {...props}>更多</Button>`，props 带 aria-expanded 与 aria-controls */
+    trigger: (props: TriggerProps) => VNodeChild;
+    /** 不可用：触发器带上 disabled，点击不切换（open 仍可由父级控制） */
+    disabled?: boolean;
+}
+/** 触发器 + 展开收起的内容区（Disclosure 模式），触发器自动带上 aria-expanded 与 aria-controls */
+export declare const Collapsible: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CollapsibleProps>;

package/dist/display/Collapsible.js

@@ -0,0 +1,41 @@
+import { Collapse } from "./Collapse.js";
+import { Fragment, computed, createVNode, mergeProps, useId } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/display/Collapsible.tsx
+/** 未声明的属性落到 Collapse 上 */
+/** 触发器 + 展开收起的内容区（Disclosure 模式），触发器自动带上 aria-expanded 与 aria-controls */
+var Collapsible = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const trigger = readonlyProp(_props, "trigger");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const id = readonlyProp(_props, "id");
+	const rest = restProps(_props, _ctx, true);
+	const generatedId = useId();
+	const contentId = computed(() => id.value ?? generatedId);
+	return () => createVNode(Fragment, null, [trigger.value({
+		onClick: () => {
+			if (!disabled.value) open.value = !open.value;
+		},
+		"aria-expanded": open.value,
+		"aria-controls": contentId.value,
+		disabled: disabled.value || void 0
+	}), createVNode(Collapse, mergeProps(rest, {
+		"id": contentId.value,
+		"_open": open.value,
+		"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+	}), null)]);
+}, {
+	name: "Collapsible",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"trigger",
+		"disabled",
+		"id"
+	]
+});
+//#endregion
+export { Collapsible };
+
+//# sourceMappingURL=Collapsible.js.map

package/dist/display/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/display/Collapsible.tsx"],"sourcesContent":["/**\n * 可展开收起的区域：触发器 + Collapse（WAI-ARIA 的 Disclosure 模式）。Accordion 的每一项也建在 Collapse 上。\n *\n *   <Collapsible trigger={(props) => <Button {...props}>高级选项</Button>}>…</Collapsible>\n *\n * 触发器用渲染函数而不是原生 <summary>：<summary> 必须是 <details> 的第一个子元素，触发器不能放在别处。\n * 键盘操作由触发器元素自己提供（按钮的 Enter、空格）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { useId, type VNodeChild } from 'vue';\nimport type { TriggerProps } from '../utils/props';\nimport { Collapse, type CollapseProps } from './Collapse';\n\n/** 未声明的属性落到 Collapse 上 */\nexport interface CollapsibleProps extends CollapseProps {\n  /** 触发器：`(props) => <Button {...props}>更多</Button>`，props 带 aria-expanded 与 aria-controls */\n  trigger: (props: TriggerProps) => VNodeChild;\n  /** 不可用：触发器带上 disabled，点击不切换（open 仍可由父级控制） */\n  disabled?: boolean;\n}\n\n/** 触发器 + 展开收起的内容区（Disclosure 模式），触发器自动带上 aria-expanded 与 aria-controls */\nexport const Collapsible = _component(\n  ({\n    _open: open = _bindable(false),\n    trigger,\n    disabled = false,\n    id,\n    ...rest\n  }: CollapsibleProps) => {\n    const generatedId = useId();\n    const contentId = _derived(id ?? generatedId);\n\n    return () => (\n      <>\n        {trigger({\n          onClick: () => {\n            if (!disabled) open = !open;\n          },\n          'aria-expanded': open,\n          'aria-controls': contentId,\n          disabled: disabled || undefined,\n        })}\n        <Collapse {...rest} id={contentId} _open={open} />\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;AAsBA,IAAa,cAAc,0BACzB,QAAA,SAMwB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,SAAA,QAAA,eALE,OAAK,KAAA,IAAA;CAAA,MAAA,UAAAC,aAAA,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAElB,KAAK;CAAA,MAAA,KAAAA,aAAA,QAAA,IAAA;CAAA,MAEb,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,cAAc,MAAM;CAC1B,MAAM,YAASC,eAAY,GAAA,SAAM,WAAW;CAE5C,aAAOC,YAAAC,UAAA,MAAA,CAEF,QAAA,MAAQ;EACP,eAAe;GACb,IAAI,CAAA,SAAA,OAAW,KAAA,QAAO,CAAA,KAAA;EACxB;EACA,iBAAe,KAAA;EACf,iBAAe,UAAA;EACf,UAAU,SAAA,SAAY,KAAA;CACxB,CAAC,GAACD,YAAA,UAAAE,WACY,MAAI;EAAA,MAAA,UAAA;EAAA,SAAA,KAAA;EAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAA,QAAA;CAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAGxB,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/Descriptions.d.ts

@@ -0,0 +1,88 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type CopyButtonProps } from '../base/CopyButton';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+/** 描述列表里的一项 */
+export interface DescriptionItem {
+    /** 唯一的 key；不写时用 label（label 是文字时） */
+    key?: string;
+    /** 名称 */
+    label: VNodeChild;
+    /** 值 */
+    value: VNodeChild;
+    /** 占几列，默认 1；超过栏数时按栏数 */
+    span?: number;
+    /** 值后面放复制按钮 */
+    copyable?: boolean;
+    /** 复制的文字；不写时是值的文字（值是文字或数字时） */
+    copyText?: string;
+}
+/** 标签与值的排列 */
+export interface DescriptionsLayouts {
+    /** 横排（默认）：标签在左、值在右 */
+    horizontal: unknown;
+    /** 竖排：标签在上、值在下 */
+    vertical: unknown;
+    /** 行内：各项一行排开、放不下换行（页头里的编号、团队、主办这类关键信息）；columns 不起作用 */
+    inline: unknown;
+}
+/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */
+export interface DescriptionsProps extends PartProps<'div', 'title'> {
+    /** 各项 */
+    items: readonly DescriptionItem[];
+    /** 标题 */
+    title?: VNodeChild;
+    /** 分几栏，默认 1；'auto' 时按容器的宽度定（见 minItemWidth、maxColumns） */
+    columns?: number | 'auto';
+    /** columns 为 'auto' 时每栏的最小宽度（px），默认 240 */
+    minItemWidth?: number;
+    /** columns 为 'auto' 时最多几栏，默认 4 */
+    maxColumns?: number;
+    /** 标签与值的排列，默认 horizontal */
+    layout?: keyof DescriptionsLayouts;
+    /** 带边框（表格样式）：标签有底色，各项之间有分隔线 */
+    bordered?: boolean;
+    /** 字号档位；不写时继承 */
+    size?: TextSize;
+    /** 标题的部件属性 */
+    propsTitle?: PartProps<'div'>;
+    /** 列表（dl）的部件属性 */
+    propsList?: PartProps<'dl'>;
+    /** 每一项（div）的部件属性，可以按项计算 */
+    propsItem?: PartProps<'div'> | ((item: DescriptionItem, index: number) => PartProps<'div'>);
+    /** 名称（dt）的部件属性 */
+    propsLabel?: PartProps<'dt'>;
+    /** 值（dd）的部件属性 */
+    propsValue?: PartProps<'dd'>;
+    /** 复制按钮的部件属性 */
+    propsCopy?: Partial<CopyButtonProps>;
+}
+/** Descriptions 的样式：root、title、list、item、label、value 与各排列、边框 */
+export declare const descriptionsStyles: Readonly<{
+    cellBordered: css.CompiledStyles;
+    copy: css.CompiledStyles;
+    item: css.CompiledStyles;
+    itemBordered: css.CompiledStyles;
+    itemHorizontal: css.CompiledStyles;
+    itemInline: css.CompiledStyles;
+    itemVertical: css.CompiledStyles;
+    label: css.CompiledStyles;
+    labelBordered: css.CompiledStyles;
+    list: css.CompiledStyles;
+    listBordered: css.CompiledStyles;
+    listInline: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+    value: css.CompiledStyles;
+    valueCopyable: css.CompiledStyles;
+}>;
+/** Descriptions 的样式：columns（栏数）、span（跨几栏） */
+export declare const descriptionsGridStyles: Readonly<{
+    readonly columns: (count: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly span: (count: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly autoColumns: (count: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly autoSpan: (count: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 描述列表：键值对，可分栏、可跨列 */
+export declare const Descriptions: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DescriptionsProps>;