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

package/dist/display/Timeline.js

@@ -0,0 +1,257 @@
+import { useLang } from "../config/context.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { Icon } from "../base/Icon.js";
+import { Spinner } from "../base/Spinner.js";
+import { Button } from "../base/Button.js";
+import { FlexOrderedList } from "../layout/Flex.js";
+import { Avatar, initials } from "./Avatar.js";
+import { Collapsible } from "./Collapsible.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronDown, ChevronUp } from "@lucide/icons";
+//#region src/display/Timeline.tsx
+/** 时间线上的一项 */
+/** 未声明的属性落到 ol 上 */
+/** Timeline 的样式：root、item、marker、line、content、title、time、description 等 */
+var timelineStyles = css.create({
+	root: { containerType: "inline-size" },
+	item: {
+		display: "grid",
+		gridTemplateColumns: "minmax(1.5em, auto) 1fr",
+		columnGap: "_md"
+	},
+	itemAlternate: { gridTemplateColumns: {
+		default: "1fr minmax(1.5em, auto) 1fr",
+		"@container (max-width: 32em)": "minmax(1.5em, auto) 1fr"
+	} },
+	rail: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center"
+	},
+	marker: {
+		boxSizing: "border-box",
+		flexShrink: 0,
+		width: "0.75em",
+		height: "0.75em",
+		marginBlock: "0.375em",
+		borderRadius: "_full",
+		backgroundColor: "currentColor"
+	},
+	markerIcon: {
+		display: "grid",
+		placeItems: "center",
+		width: "1.5em",
+		height: "1.5em",
+		marginBlock: 0,
+		backgroundColor: "_surface",
+		borderWidth: "_sm",
+		borderStyle: "solid",
+		borderColor: "currentColor"
+	},
+	pending: { marginBlock: "0.25em" },
+	line: {
+		flexGrow: 1,
+		width: "_borderWidths.sm",
+		minHeight: "1em",
+		backgroundColor: "_borderMuted"
+	},
+	content: {
+		minWidth: 0,
+		paddingBlockEnd: "_lg",
+		display: "grid",
+		gap: "_xs"
+	},
+	contentEnd: {
+		gridColumn: {
+			default: "1",
+			"@container (max-width: 32em)": "2"
+		},
+		gridRow: "1",
+		textAlign: {
+			default: "end",
+			"@container (max-width: 32em)": "start"
+		}
+	},
+	title: {
+		fontWeight: "_semibold",
+		color: "_text"
+	},
+	meta: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		columnGap: "_sm",
+		rowGap: "_xs",
+		fontSize: "_sm",
+		color: "_textMuted"
+	},
+	actor: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_xs",
+		color: "_text"
+	},
+	avatar: {
+		width: "1.75em",
+		height: "1.75em"
+	},
+	time: {
+		fontSize: "_sm",
+		color: "_textMuted"
+	},
+	timeOpposite: {
+		paddingBlockStart: "0.125em",
+		display: {
+			default: "block",
+			"@container (max-width: 32em)": "none"
+		}
+	},
+	timeInline: { display: {
+		default: "none",
+		"@container (max-width: 32em)": "block"
+	} },
+	description: { color: "_text" },
+	detailsToggle: { justifySelf: "start" },
+	detailsContent: { paddingBlockStart: "_xs" },
+	toggleLine: {
+		flexGrow: 1,
+		minHeight: "2em",
+		borderInlineStartWidth: "_sm",
+		borderInlineStartStyle: "dashed",
+		borderInlineStartColor: "_borderMuted"
+	},
+	toggleContent: { paddingBlockEnd: "_lg" }
+});
+/** Timeline 的样式：节点的色调 */
+var timelineToneStyles = css.create({
+	neutral: { color: "_borderStrong" },
+	accent: { color: "_accent" },
+	info: { color: "_infoText" },
+	success: { color: "_successText" },
+	warning: { color: "_warningText" },
+	danger: { color: "_dangerText" }
+});
+/** 时间线：节点 + 内容，节点之间连线 */
+var Timeline = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const items = readonlyProp(_props, "items");
+	const pending = readonlyProp(_props, "pending");
+	const alternate = readonlyProp(_props, "alternate", false);
+	const size = readonlyProp(_props, "size");
+	const reverse = readonlyProp(_props, "reverse", false);
+	const maxVisible = readonlyProp(_props, "maxVisible");
+	const expanded = bindable(_props, "_expanded", () => false, _ctx.emit);
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsRail = readonlyProp(_props, "propsRail");
+	const propsMarker = readonlyProp(_props, "propsMarker");
+	const propsLine = readonlyProp(_props, "propsLine");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsMeta = readonlyProp(_props, "propsMeta");
+	const propsTime = readonlyProp(_props, "propsTime");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsDetails = readonlyProp(_props, "propsDetails");
+	const propsToggle = readonlyProp(_props, "propsToggle");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	/** 收起的那几项所在的位置：节点列一段虚线，内容是展开、收起的按钮 */
+	const toggle = (hidden) => createVNode("li", mergeProps({ "key": "toggle" }, css.attrs(timelineStyles.item)), [createVNode("div", mergeAttrs({ sx: timelineStyles.rail }, propsRail.value), [createVNode("span", mergeProps(css.attrs(timelineStyles.toggleLine), { "aria-hidden": "true" }), null)]), createVNode("div", css.attrs(timelineStyles.toggleContent), [createVNode(Button, mergePartProps({
+		variant: "link",
+		size: "sm",
+		iconEnd: expanded.value ? ChevronUp : ChevronDown
+	}, propsToggle.value, {
+		"aria-expanded": expanded.value,
+		onClick: () => expanded.value = !expanded.value
+	}), { default: () => [expanded.value ? lang.timelineShowLess : lang.timelineShowMore(hidden)] })])]);
+	return () => {
+		const hidden = maxVisible.value !== void 0 && items.value.length > maxVisible.value ? items.value.length - maxVisible.value : 0;
+		const chronological = [...hidden > 0 && !expanded.value ? items.value.slice(hidden) : items.value, ...hasContent(pending.value) ? [{
+			key: "pending",
+			title: pending.value,
+			pending: true
+		}] : []];
+		const all = reverse.value ? chronological.toReversed() : chronological;
+		const toggleAtEnd = hidden > 0 && reverse.value;
+		return createVNode(FlexOrderedList, mergeProps(mergePartProps({
+			direction: "column",
+			sx: [timelineStyles.root, size.value && fontSizeStyles[size.value]]
+		}, rest), {
+			"data-alternate": alternate.value || void 0,
+			"reversed": reverse.value || void 0
+		}), { default: () => [
+			hidden > 0 && !reverse.value && toggle(hidden),
+			all.map((item, index) => {
+				const own = typeof propsItem.value === "function" ? propsItem.value(item, index) : propsItem.value;
+				const last = index === all.length - 1 && !toggleAtEnd;
+				const end = alternate.value && index % 2 === 1;
+				const time = (sx) => hasContent(item.time) ? createVNode("time", mergeAttrs({ sx: [timelineStyles.time, sx] }, propsTime.value, { datetime: item.dateTime }), [item.time]) : alternate.value && createVNode("span", css.attrs(sx), null);
+				const inlineTime = alternate.value ? hasContent(item.time) && time(timelineStyles.timeInline) : time(null);
+				const marker = item.pending ? createVNode(Spinner, { "sx": _cache[0] || (_cache[0] = [timelineStyles.pending, timelineToneStyles.accent]) }, null) : createVNode("span", mergeAttrs({ sx: [
+					timelineStyles.marker,
+					item.icon && timelineStyles.markerIcon,
+					css.select(() => timelineToneStyles[item.tone ?? "neutral"])
+				] }, propsMarker.value, { "aria-hidden": true }), [item.icon && createVNode(Icon, { "icon": item.icon }, null)]);
+				return createVNode("li", mergeProps({ "key": item.key ?? index }, mergeAttrs({ sx: [timelineStyles.item, alternate.value && timelineStyles.itemAlternate] }, own), {
+					"data-state": item.pending ? "pending" : void 0,
+					"aria-busy": item.pending || void 0
+				}), [
+					alternate.value && !end && time(timelineStyles.timeOpposite),
+					createVNode("div", mergeAttrs({ sx: timelineStyles.rail }, propsRail.value), [marker, !last && createVNode("span", mergeAttrs({ sx: timelineStyles.line }, propsLine.value, { "aria-hidden": true }), null)]),
+					createVNode("div", mergeAttrs({ sx: [timelineStyles.content, end && timelineStyles.contentEnd] }, propsContent.value), [
+						createVNode("div", mergeAttrs({ sx: timelineStyles.title }, propsTitle.value), [item.title]),
+						hasContent(item.actor) ? createVNode("div", mergeAttrs({ sx: timelineStyles.meta }, propsMeta.value), [createVNode("span", css.attrs(timelineStyles.actor), [(item.avatar || typeof item.actor === "string") && createVNode(Avatar, {
+							"src": item.avatar,
+							"fallback": typeof item.actor === "string" ? initials(item.actor) : void 0,
+							"sx": timelineStyles.avatar
+						}, null), item.actor]), inlineTime]) : inlineTime,
+						hasContent(item.description) && createVNode("div", mergeAttrs({ sx: timelineStyles.description }, propsDescription.value), [item.description]),
+						hasContent(item.details) && createVNode(Collapsible, mergeProps(mergePartProps({
+							lazy: true,
+							propsContent: { sx: timelineStyles.detailsContent }
+						}, propsDetails.value), { "trigger": _cache[1] || (_cache[1] = (props) => createVNode(Button, mergeProps({
+							"variant": "link",
+							"size": "sm",
+							"iconEnd": props["aria-expanded"] ? ChevronUp : ChevronDown,
+							"sx": timelineStyles.detailsToggle
+						}, props), {
+							default: () => [lang.timelineDetails],
+							$stable: true
+						})) }), { default: () => [item.details] })
+					]),
+					end && time(timelineStyles.timeOpposite)
+				]);
+			}),
+			toggleAtEnd && toggle(hidden)
+		] });
+	};
+}, {
+	name: "Timeline",
+	props: [
+		"items",
+		"pending",
+		"alternate",
+		"size",
+		"reverse",
+		"maxVisible",
+		"_expanded",
+		"onUpdate:_expanded",
+		"propsItem",
+		"propsRail",
+		"propsMarker",
+		"propsLine",
+		"propsContent",
+		"propsTitle",
+		"propsMeta",
+		"propsTime",
+		"propsDescription",
+		"propsDetails",
+		"propsToggle"
+	]
+});
+//#endregion
+export { Timeline, timelineStyles, timelineToneStyles };
+
+//# sourceMappingURL=Timeline.js.map

package/dist/display/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Timeline.tsx"],"sourcesContent":["/**\n * 时间线（ol）：按时间排列的事件（订单进度、操作记录、版本历史）。每项一个节点（圆点或图标，带色调）+ 标题、时间、说明，\n * 节点之间连一条线；可以左右交替排布；还在进行中时最后一项显示加载指示（pending）。参考 Ant Design Timeline。\n *\n *   <Timeline\n *     items={[\n *       { title: '已下单', time: '10-18 09:12' },\n *       { title: '已发货', time: '10-18 15:40', tone: 'success', icon: Truck },\n *     ]}\n *     pending=\"正在派送\"\n *   />\n *\n * items 按时间先后给；reverse 时新的在前（操作记录、流转记录常这样看），进行中的一项也在最前。\n * 流程的流转记录每条事件一项：actor 是处理人，处理结果按种类换 icon 与 tone。\n *\n * 操作记录：项写 actor（操作人，可以带 avatar 头像）显示在时间前面；description 里可以放 FieldCompare 列出改了哪些字段；\n * 长的内容（完整的字段对比、附件、原文）放 details，项里一个“查看详情”的按钮点开才显示。\n * 记录多时写 maxVisible：只显示最新的几项，其余收起在“展开其余 N 条”后面（按钮在旧的那一端，展开后变成“收起”）。\n *\n * 语义是有序列表；时间用 <time>（给了 dateTime 时写上机器可读的时间）。\n * 部件：Root（ol）、Item（li）、Rail（节点与连接线所在的列）、Marker、Line（连接线）、Content、Title、Meta（操作人与时间）、\n * Time、Description、Details（Collapsible）、Toggle（展开其余各项的按钮）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { ChevronDown, ChevronUp } from '@lucide/icons';\nimport type { VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon, type IconData } from '../base/Icon';\nimport { Spinner } from '../base/Spinner';\nimport { useLang } from '../config/context';\nimport { Avatar, initials } from './Avatar';\nimport { Collapsible, type CollapsibleProps } from './Collapsible';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { FlexOrderedList, type FlexProps } from '../layout/Flex';\n\n/** 时间线上的一项 */\nexport interface TimelineItem {\n  /** 唯一的 key；不写时用位置 */\n  key?: string;\n  /** 标题 */\n  title: VNodeChild;\n  /** 时间（显示的文字） */\n  time?: VNodeChild;\n  /** 机器可读的时间（ISO 8601），写到 <time datetime> 上 */\n  dateTime?: string;\n  /** 说明：一段文字，或字段差异（FieldCompare layout=\"list\"）这类内容 */\n  description?: VNodeChild;\n  /** 操作人：显示在时间前面 */\n  actor?: VNodeChild;\n  /** 操作人的头像地址；actor 是文字时没有图片也显示首字母 */\n  avatar?: string;\n  /** 收起的详情：项里一个“查看详情”的按钮，点开才显示 */\n  details?: VNodeChild;\n  /** 节点的图标；不写时是圆点 */\n  icon?: IconData;\n  /** 节点的色调，默认 neutral */\n  tone?: StatusTone;\n}\n\n/** 未声明的属性落到 ol 上 */\nexport interface TimelineProps extends PartProps<'ol'> {\n  /** 各项，按时间先后（旧的在前） */\n  items: readonly TimelineItem[];\n  /** 还在进行中：最后多一项，节点是加载指示，内容是它 */\n  pending?: VNodeChild;\n  /** 新的在前：倒过来显示（进行中的一项也在最前），ol 带 reversed */\n  reverse?: boolean;\n  /** 左右交替排布（时间在对侧）；窄的容器里仍是单侧 */\n  alternate?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** 最多显示几项（不算进行中的一项）：只显示最新的这几项，其余收起在“展开其余 N 条”后面 */\n  maxVisible?: number;\n  /** 收起的各项展开了没有（可绑定） */\n  _expanded?: boolean;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: TimelineItem, index: number) => PartProps<'li'>);\n  /** 节点与连接线所在的列的部件属性 */\n  propsRail?: PartProps<'div'>;\n  /** 节点的部件属性 */\n  propsMarker?: PartProps<'span'>;\n  /** 连接线的部件属性 */\n  propsLine?: PartProps<'span'>;\n  /** 内容（标题、时间、说明）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 操作人与时间那一行的部件属性 */\n  propsMeta?: PartProps<'div'>;\n  /** 时间的部件属性 */\n  propsTime?: PartProps<'time', 'datetime'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'div'>;\n  /** 详情（Collapsible）的部件属性 */\n  propsDetails?: Partial<CollapsibleProps>;\n  /** 展开其余各项的按钮的部件属性 */\n  propsToggle?: Partial<ButtonProps>;\n}\n\n/** Timeline 的样式：root、item、marker、line、content、title、time、description 等 */\nexport const timelineStyles = css.create({\n  // 竖排、去掉编号由 FlexOrderedList 给；交替排布按容器宽度切换\n  root: { containerType: 'inline-size' },\n  // 节点一列、内容一列；交替时三列：左内容、节点、右内容。\n  // 每项是独立的 grid，节点列至少有图标节点那么宽，圆点、图标、加载指示混排时各项才对得齐\n  item: { display: 'grid', gridTemplateColumns: 'minmax(1.5em, auto) 1fr', columnGap: '_md' },\n  itemAlternate: {\n    gridTemplateColumns: {\n      default: '1fr minmax(1.5em, auto) 1fr',\n      '@container (max-width: 32em)': 'minmax(1.5em, auto) 1fr',\n    },\n  },\n  rail: { display: 'flex', flexDirection: 'column', alignItems: 'center' },\n  marker: {\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    width: '0.75em',\n    height: '0.75em',\n    marginBlock: '0.375em',\n    borderRadius: '_full',\n    backgroundColor: 'currentColor',\n  },\n  // 有图标时节点大一些，图标描边用色调\n  markerIcon: {\n    display: 'grid',\n    placeItems: 'center',\n    width: '1.5em',\n    height: '1.5em',\n    marginBlock: 0,\n    backgroundColor: '_surface',\n    borderWidth: '_sm',\n    borderStyle: 'solid',\n    borderColor: 'currentColor',\n  },\n  pending: { marginBlock: '0.25em' },\n  // 连到下一项的线；最后一项没有\n  line: {\n    flexGrow: 1,\n    width: '_borderWidths.sm',\n    minHeight: '1em',\n    backgroundColor: '_borderMuted',\n  },\n  content: { minWidth: 0, paddingBlockEnd: '_lg', display: 'grid', gap: '_xs' },\n  // 交替排布时偶数项的内容在节点左侧、靠右对齐\n  contentEnd: {\n    gridColumn: { default: '1', '@container (max-width: 32em)': '2' },\n    gridRow: '1',\n    textAlign: { default: 'end', '@container (max-width: 32em)': 'start' },\n  },\n  title: { fontWeight: '_semibold', color: '_text' },\n  // 操作人与时间：一行，放不下时换行\n  meta: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  actor: { display: 'inline-flex', alignItems: 'center', gap: '_xs', color: '_text' },\n  avatar: { width: '1.75em', height: '1.75em' },\n  time: { fontSize: '_sm', color: '_textMuted' },\n  // 交替排布时时间放在对侧（它自己占一格）；窄的容器里不占格，改在内容里显示\n  timeOpposite: {\n    paddingBlockStart: '0.125em',\n    display: { default: 'block', '@container (max-width: 32em)': 'none' },\n  },\n  timeInline: { display: { default: 'none', '@container (max-width: 32em)': 'block' } },\n  description: { color: '_text' },\n  // 详情按钮像链接，靠起始边；展开的内容与上面隔开一点\n  detailsToggle: { justifySelf: 'start' },\n  detailsContent: { paddingBlockStart: '_xs' },\n  // 收起的那几项的位置：节点列是一段虚线，内容是按钮\n  toggleLine: {\n    flexGrow: 1,\n    minHeight: '2em',\n    borderInlineStartWidth: '_sm',\n    borderInlineStartStyle: 'dashed',\n    borderInlineStartColor: '_borderMuted',\n  },\n  toggleContent: { paddingBlockEnd: '_lg' },\n});\n\n/** Timeline 的样式：节点的色调 */\nexport const timelineToneStyles = css.create({\n  neutral: { color: '_borderStrong' },\n  accent: { color: '_accent' },\n  info: { color: '_infoText' },\n  success: { color: '_successText' },\n  warning: { color: '_warningText' },\n  danger: { color: '_dangerText' },\n});\n\n/** 时间线：节点 + 内容，节点之间连线 */\nexport const Timeline = _component(\n  ({\n    items,\n    pending,\n    alternate = false,\n    size,\n    reverse = false,\n    maxVisible,\n    _expanded: expanded = _bindable(false),\n    propsItem,\n    propsRail,\n    propsMarker,\n    propsLine,\n    propsContent,\n    propsTitle,\n    propsMeta,\n    propsTime,\n    propsDescription,\n    propsDetails,\n    propsToggle,\n    ...rest\n  }: TimelineProps) => {\n    const lang = useLang();\n\n    /** 收起的那几项所在的位置：节点列一段虚线，内容是展开、收起的按钮 */\n    const toggle = (hidden: number) => (\n      <li key=\"toggle\" {...css.attrs(timelineStyles.item)}>\n        <div {...mergeAttrs<'div'>({ sx: timelineStyles.rail }, propsRail)}>\n          <span {...css.attrs(timelineStyles.toggleLine)} aria-hidden=\"true\" />\n        </div>\n        <div {...css.attrs(timelineStyles.toggleContent)}>\n          <Button\n            {...mergePartProps<ButtonProps>(\n              {\n                variant: 'link',\n                size: 'sm',\n                iconEnd: expanded ? ChevronUp : ChevronDown,\n              },\n              propsToggle,\n              { 'aria-expanded': expanded, onClick: () => (expanded = !expanded) },\n            )}\n          >\n            {expanded ? lang.timelineShowLess : lang.timelineShowMore(hidden)}\n          </Button>\n        </div>\n      </li>\n    );\n\n    return () => {\n      const hidden =\n        maxVisible !== undefined && items.length > maxVisible ? items.length - maxVisible : 0;\n      const chronological: (TimelineItem & { pending?: true })[] = [\n        ...(hidden > 0 && !expanded ? items.slice(hidden) : items),\n        ...(hasContent(pending)\n          ? [{ key: 'pending', title: pending, pending: true as const }]\n          : []),\n      ];\n      const all = reverse ? chronological.toReversed() : chronological;\n      // 按钮在旧的那一端：倒序时在最后，最后一项仍连线到它\n      const toggleAtEnd = hidden > 0 && reverse;\n      return (\n        <FlexOrderedList\n          {...mergePartProps<FlexProps<'ol'>>(\n            { direction: 'column', sx: [timelineStyles.root, size && fontSizeStyles[size]] },\n            rest,\n          )}\n          data-alternate={alternate || undefined}\n          reversed={reverse || undefined}\n        >\n          {hidden > 0 && !reverse && toggle(hidden)}\n          {all.map((item, index) => {\n            const own = typeof propsItem === 'function' ? propsItem(item, index) : propsItem;\n            const last = index === all.length - 1 && !toggleAtEnd;\n            const end = alternate && index % 2 === 1;\n            // 交替排布时时间放在对侧，占一格（没有时间也占，保持三列对齐）；窄的容器里改在内容里显示\n            const time = (sx: SxStyles) =>\n              hasContent(item.time) ? (\n                <time\n                  {...mergeAttrs<'time'>({ sx: [timelineStyles.time, sx] }, propsTime, {\n                    datetime: item.dateTime,\n                  })}\n                >\n                  {item.time}\n                </time>\n              ) : (\n                alternate && <span {...css.attrs(sx)} />\n              );\n            // 内容里的时间：交替排布时只在窄的容器里显示（宽时在对侧）\n            const inlineTime = alternate\n              ? hasContent(item.time) && time(timelineStyles.timeInline)\n              : time(null);\n            const marker = item.pending ? (\n              <Spinner sx={[timelineStyles.pending, timelineToneStyles.accent]} />\n            ) : (\n              <span\n                {...mergeAttrs<'span'>(\n                  {\n                    sx: [\n                      timelineStyles.marker,\n                      item.icon && timelineStyles.markerIcon,\n                      timelineToneStyles[item.tone ?? 'neutral'],\n                    ],\n                  },\n                  propsMarker,\n                  { 'aria-hidden': true },\n                )}\n              >\n                {item.icon && <Icon icon={item.icon} />}\n              </span>\n            );\n            return (\n              <li\n                key={item.key ?? index}\n                {...mergeAttrs<'li'>(\n                  { sx: [timelineStyles.item, alternate && timelineStyles.itemAlternate] },\n                  own,\n                )}\n                data-state={item.pending ? 'pending' : undefined}\n                aria-busy={item.pending || undefined}\n              >\n                {/* 交替排布：奇数项左侧放时间，偶数项右侧放时间 */}\n                {alternate && !end && time(timelineStyles.timeOpposite)}\n                <div {...mergeAttrs<'div'>({ sx: timelineStyles.rail }, propsRail)}>\n                  {marker}\n                  {!last && (\n                    <span\n                      {...mergeAttrs<'span'>({ sx: timelineStyles.line }, propsLine, {\n                        'aria-hidden': true,\n                      })}\n                    />\n                  )}\n                </div>\n                <div\n                  {...mergeAttrs<'div'>(\n                    { sx: [timelineStyles.content, end && timelineStyles.contentEnd] },\n                    propsContent,\n                  )}\n                >\n                  <div {...mergeAttrs<'div'>({ sx: timelineStyles.title }, propsTitle)}>\n                    {item.title}\n                  </div>\n                  {hasContent(item.actor) ? (\n                    <div {...mergeAttrs<'div'>({ sx: timelineStyles.meta }, propsMeta)}>\n                      <span {...css.attrs(timelineStyles.actor)}>\n                        {(item.avatar || typeof item.actor === 'string') && (\n                          <Avatar\n                            src={item.avatar}\n                            fallback={\n                              typeof item.actor === 'string' ? initials(item.actor) : undefined\n                            }\n                            sx={timelineStyles.avatar}\n                          />\n                        )}\n                        {item.actor}\n                      </span>\n                      {inlineTime}\n                    </div>\n                  ) : (\n                    inlineTime\n                  )}\n                  {hasContent(item.description) && (\n                    <div\n                      {...mergeAttrs<'div'>({ sx: timelineStyles.description }, propsDescription)}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                  {hasContent(item.details) && (\n                    <Collapsible\n                      {...mergePartProps<Partial<CollapsibleProps>>(\n                        { lazy: true, propsContent: { sx: timelineStyles.detailsContent } },\n                        propsDetails,\n                      )}\n                      trigger={(props) => (\n                        <Button\n                          variant=\"link\"\n                          size=\"sm\"\n                          iconEnd={props['aria-expanded'] ? ChevronUp : ChevronDown}\n                          sx={timelineStyles.detailsToggle}\n                          {...props}\n                        >\n                          {lang.timelineDetails}\n                        </Button>\n                      )}\n                    >\n                      {item.details}\n                    </Collapsible>\n                  )}\n                </div>\n                {end && time(timelineStyles.timeOpposite)}\n              </li>\n            );\n          })}\n          {toggleAtEnd && toggle(hidden)}\n        </FlexOrderedList>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Tree.d.ts

@@ -0,0 +1,132 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconData } from '../base/Icon';
+import { type EmptyProps } from '../feedback/Empty';
+import { type SkeletonShapeProps } from '../feedback/Skeleton';
+import { type SelectionModes } from '../utils/data/selection';
+import { type CheckState, type TreeMoveTarget } from '../utils/data/tree';
+import { type PartProps } from '../utils/props';
+import { type ScrollAreaProps } from '../layout/ScrollArea';
+/** 节点的渲染状态 */
+export interface TreeItemRenderState {
+    /** 层级，第一层为 0 */
+    depth: number;
+    /** 展开着 */
+    expanded: boolean;
+    /** 已选 */
+    selected: boolean;
+    /** 勾选状态（checkable 时） */
+    checked: CheckState;
+    /** 键盘所在的当前项 */
+    active: boolean;
+}
+/** 一次移动：把 key 移到 target（交给 moveNode） */
+export interface TreeMove<T> {
+    /** 移动的节点的 key */
+    key: string;
+    /** 移动的节点 */
+    node: T;
+    /** 放到哪个节点下的第几位（按移走之后的同级算） */
+    target: TreeMoveTarget;
+}
+/** 未声明的属性落到 div（role="tree"）上；aria-label 或 aria-labelledby 是树的名称 */
+export interface TreeProps<T> extends PartProps<'div', 'role'> {
+    /** 第一层的节点 */
+    items: readonly T[];
+    /** 节点的 key，整棵树里唯一 */
+    getKey: (node: T) => string;
+    /** 节点的文字：默认显示它，类型搜索也按它 */
+    getLabel: (node: T) => string;
+    /** 子节点；叶子或还没加载时返回 undefined / 空数组 */
+    getChildren: (node: T) => readonly T[] | undefined;
+    /** 有没有子节点（懒加载时子节点还没取回来也要能展开）；不写时看 getChildren 是否非空 */
+    hasChildren?: (node: T) => boolean;
+    /** 展开一个还没有子节点的节点时调用：取回子节点并放进数据里；返回 Promise 时显示加载中 */
+    loadChildren?: (node: T) => Promise<unknown> | void;
+    /** 子节点加载失败（loadChildren 的 Promise 被拒绝）：节点收回去，再展开会重试；不写时在控制台报错 */
+    onLoadError?: (error: unknown, node: T) => void;
+    /** 节点不可用：可以经过、展开，不能选中、勾选 */
+    isDisabled?: (node: T) => boolean;
+    /** 文字前的图标，可以按展开状态换（文件夹开 / 合） */
+    getIcon?: (node: T, expanded: boolean) => IconData | undefined;
+    /** 展开的节点：父级写 _expanded={keys} */
+    _expanded?: string[];
+    /** 选择方式；不写时不能选中 */
+    selectionMode?: keyof SelectionModes;
+    /** 选中的节点：父级写 _selected={keys} */
+    _selected?: string[];
+    /** 每项前显示勾选框，默认父子联动 */
+    checkable?: boolean;
+    /** 勾选父子不联动：每个节点各自勾选（权限树里“只给这一级”） */
+    checkStrictly?: boolean;
+    /** 勾上的节点（联动时含勾上的父节点与子孙）：父级写 _checked={keys} */
+    _checked?: string[];
+    /** 正在取节点：还没有节点时显示骨架行，树带 aria-busy */
+    loading?: boolean;
+    /** 没有节点时显示的内容；默认是 Empty（文案取语言包） */
+    empty?: VNodeChild;
+    /** 每一层缩进多少（em），默认 1.25 */
+    indent?: number;
+    /** 每项的估计高度（px），默认 32；渲染后以实际高度为准 */
+    estimateSize?: number;
+    /**
+     * 搜索过滤：字符串时按节点文字匹配（忽略大小写与重音，或 createUi 的 textMatcher），函数时自己判断。
+     * 留下匹配的节点与它们的祖先并展开祖先，匹配的节点文字加粗；只看已加载的节点。清空后回到原来的展开状态
+     */
+    filter?: string | ((node: T) => boolean);
+    /**
+     * 拖动节点改变层级与顺序：放下（或 Alt + 方向键）时报告移动，用 moveNode 生成新数据交回 items；不写时不能拖。
+     * 指针拖动只用鼠标、笔（触摸时照常滚动）
+     */
+    onMove?: (move: TreeMove<T>) => void;
+    /** 能不能放到这里（如文件不能放进文件里）；不写时都能放（放进自己和自己的子孙里除外） */
+    canDrop?: (node: T, target: TreeMoveTarget) => boolean;
+    /** 自定义文字部分的内容 */
+    renderItem?: (node: T, state: TreeItemRenderState) => VNodeChild;
+    /** 每一项的部件属性，可以按节点计算 */
+    propsItem?: PartProps<'div', 'role' | 'id'> | ((node: T, state: TreeItemRenderState) => PartProps<'div'>);
+    /** 每一行（虚拟滚动定位的容器，包着 treeitem）的部件属性 */
+    propsRow?: PartProps<'div', 'role'>;
+    /** 展开箭头的部件属性（只是外观，键盘与读屏走 treeitem） */
+    propsToggle?: PartProps<'span', 'aria-hidden'>;
+    /** 勾选框的部件属性（只是外观，状态在 treeitem 的 aria-checked 上） */
+    propsCheckbox?: PartProps<'span', 'aria-hidden'>;
+    /** 文字的部件属性 */
+    propsLabel?: PartProps<'span'>;
+    /** 默认空状态（Empty）的部件属性 */
+    propsEmpty?: Partial<EmptyProps>;
+    /** 加载中的骨架行的部件属性 */
+    propsSkeleton?: SkeletonShapeProps;
+    /** 外层滚动区域（ScrollArea）的部件属性：放进弹出层、弹性布局时给它 sx；树元素本身是它的视口 */
+    propsScrollArea?: Partial<Omit<ScrollAreaProps, 'propsViewport'>>;
+}
+/** Tree 的样式：root、sizer、row、item、toggle、checkbox、label 等 */
+export declare const treeStyles: Readonly<{
+    checkMark: css.CompiledStyles;
+    checkbox: css.CompiledStyles;
+    chevronOpen: css.CompiledStyles;
+    dragging: css.CompiledStyles;
+    dropAfter: css.CompiledStyles;
+    dropBefore: css.CompiledStyles;
+    dropInside: css.CompiledStyles;
+    dropLine: css.CompiledStyles;
+    hidden: css.CompiledStyles;
+    item: css.CompiledStyles;
+    matched: css.CompiledStyles;
+    positioned: css.CompiledStyles;
+    root: css.CompiledStyles;
+    row: css.CompiledStyles;
+    sizer: css.CompiledStyles;
+    skeleton: css.CompiledStyles;
+    toggle: css.CompiledStyles;
+}>;
+/** Tree 的样式：indent（缩进）、y、height */
+export declare const treeDynamicStyles: Readonly<{
+    readonly indent: (em: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly y: (px: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly height: (px: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly width: (value: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly lineStart: (em: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 树：可展开的层级列表，单选 / 多选、父子联动的勾选、懒加载、方向键导航、虚拟滚动 */
+export declare const Tree: <T>(props: TreeProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;