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

package/dist/display/Descriptions.js

@@ -0,0 +1,185 @@
+import { clamp } from "../utils/data/number.js";
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { useResizeObserver } from "../utils/dom/resize.js";
+import { CopyButton } from "../base/CopyButton.js";
+import { plainText } from "../utils/data/text.js";
+import { createVNode, mergeProps, ref, shallowRef } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/display/Descriptions.tsx
+/** 描述列表里的一项 */
+/** 标签与值的排列 */
+/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */
+/** Descriptions 的样式：root、title、list、item、label、value 与各排列、边框 */
+var descriptionsStyles = css.create({
+	root: {
+		containerType: "inline-size",
+		display: "grid",
+		gap: "_md"
+	},
+	title: {
+		fontWeight: "_semibold",
+		fontSize: "_md"
+	},
+	list: {
+		display: "grid",
+		columnGap: "_xl",
+		rowGap: "_md",
+		margin: 0
+	},
+	listBordered: {
+		columnGap: 0,
+		rowGap: 0,
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		borderRadius: "_md",
+		overflow: "hidden"
+	},
+	item: { minWidth: 0 },
+	itemHorizontal: {
+		display: "flex",
+		gap: "_md",
+		alignItems: "baseline"
+	},
+	itemVertical: {
+		display: "grid",
+		gap: "_xs"
+	},
+	listInline: {
+		display: "flex",
+		flexWrap: "wrap",
+		columnGap: "_xl",
+		rowGap: "_xs"
+	},
+	itemInline: {
+		display: "flex",
+		gap: "_xs",
+		alignItems: "baseline"
+	},
+	itemBordered: {
+		alignItems: "stretch",
+		gap: 0,
+		marginBlockStart: `calc(-1 * ${t.borderWidths.xs})`,
+		marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,
+		borderBlockStartWidth: "_xs",
+		borderInlineStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderInlineStartStyle: "solid",
+		borderColor: "_borderMuted"
+	},
+	label: {
+		flexShrink: 0,
+		margin: 0,
+		color: "_textMuted"
+	},
+	cellBordered: {
+		paddingBlock: "_sm",
+		paddingInline: "_md"
+	},
+	labelBordered: {
+		backgroundColor: "_fill",
+		minWidth: "8em"
+	},
+	value: {
+		minWidth: 0,
+		margin: 0,
+		color: "_text",
+		overflowWrap: "anywhere"
+	},
+	valueCopyable: {
+		display: "flex",
+		alignItems: "baseline",
+		gap: "_xs"
+	},
+	copy: {
+		flexShrink: 0,
+		marginBlock: "-0.25em"
+	}
+});
+/** Descriptions 的样式：columns（栏数）、span（跨几栏） */
+var descriptionsGridStyles = css.create({
+	columns: (count) => ({ gridTemplateColumns: {
+		default: `repeat(${count}, minmax(0, 1fr))`,
+		"@container (max-width: 32em)": "1fr"
+	} }),
+	span: (count) => ({ gridColumn: {
+		default: `span ${count}`,
+		"@container (max-width: 32em)": "auto"
+	} }),
+	autoColumns: (count) => ({ gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }),
+	autoSpan: (count) => ({ gridColumn: `span ${count}` })
+});
+/** 描述列表：键值对，可分栏、可跨列 */
+var Descriptions = /*#__PURE__*/ _component((_props, _ctx) => {
+	const items = readonlyProp(_props, "items");
+	const title = readonlyProp(_props, "title");
+	const columns = readonlyProp(_props, "columns", 1);
+	const minItemWidth = readonlyProp(_props, "minItemWidth", 240);
+	const maxColumns = readonlyProp(_props, "maxColumns", 4);
+	const layout = readonlyProp(_props, "layout", "horizontal");
+	const bordered = readonlyProp(_props, "bordered", false);
+	const size = readonlyProp(_props, "size");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsList = readonlyProp(_props, "propsList");
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const propsValue = readonlyProp(_props, "propsValue");
+	const propsCopy = readonlyProp(_props, "propsCopy");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	let list = shallowRef(null);
+	let width = ref(0);
+	useResizeObserver(() => list.value, ([entry]) => width.value = entry?.contentRect.width ?? 0);
+	const auto = () => columns.value === "auto";
+	const count = () => auto() ? clamp(Math.floor(width.value / minItemWidth.value), 1, maxColumns.value) : columns.value;
+	/** 复制的文字：copyText，否则值是文字或数字时就是它 */
+	const copyTextOf = (item) => item.copyText ?? (typeof item.value === "string" || typeof item.value === "number" ? String(item.value) : "");
+	return () => createVNode("div", mergeProps(mergeAttrs({ sx: [descriptionsStyles.root, size.value && fontSizeStyles[size.value]] }, rest), { "data-layout": layout.value }), [hasContent(title.value) && createVNode("div", mergeAttrs({ sx: descriptionsStyles.title }, propsTitle.value), [title.value]), createVNode("dl", mergeAttrs({ sx: [
+		descriptionsStyles.list,
+		layout.value === "inline" ? descriptionsStyles.listInline : auto() ? css.bind(descriptionsGridStyles.autoColumns, () => [count()], true) : css.bind(descriptionsGridStyles.columns, () => [count()], true),
+		bordered.value && descriptionsStyles.listBordered
+	] }, propsList.value, { ref: list }), [items.value.map((item, index) => {
+		const own = typeof propsItem.value === "function" ? propsItem.value(item, index) : propsItem.value;
+		const span = clamp(item.span ?? 1, 1, count());
+		return createVNode("div", mergeProps({ "key": item.key ?? (typeof item.label === "string" ? item.label : index) }, mergeAttrs({ sx: [
+			layout.value === "vertical" ? descriptionsStyles.itemVertical : layout.value === "inline" ? descriptionsStyles.itemInline : descriptionsStyles.itemHorizontal,
+			bordered.value && descriptionsStyles.itemBordered,
+			descriptionsStyles.item,
+			layout.value !== "inline" && span > 1 && (auto() ? css.bind(descriptionsGridStyles.autoSpan, () => [span]) : css.bind(descriptionsGridStyles.span, () => [span]))
+		] }, own)), [createVNode("dt", mergeAttrs({ sx: [descriptionsStyles.label, bordered.value && [descriptionsStyles.cellBordered, descriptionsStyles.labelBordered]] }, propsLabel.value), [item.label]), createVNode("dd", mergeAttrs({ sx: [
+			descriptionsStyles.value,
+			bordered.value && descriptionsStyles.cellBordered,
+			item.copyable && descriptionsStyles.valueCopyable
+		] }, propsValue.value), [item.value, item.copyable && createVNode(CopyButton, mergeProps(mergePartProps({
+			size: "xs",
+			sx: descriptionsStyles.copy,
+			"aria-label": lang.descriptionsCopy(plainText(item.label) ?? lang.copy)
+		}, propsCopy.value), { "value": () => copyTextOf(item) }), null)])]);
+	})])]);
+}, {
+	name: "Descriptions",
+	props: [
+		"items",
+		"title",
+		"columns",
+		"minItemWidth",
+		"maxColumns",
+		"layout",
+		"bordered",
+		"size",
+		"propsTitle",
+		"propsList",
+		"propsItem",
+		"propsLabel",
+		"propsValue",
+		"propsCopy"
+	]
+});
+//#endregion
+export { Descriptions, descriptionsGridStyles, descriptionsStyles };
+
+//# sourceMappingURL=Descriptions.js.map

package/dist/display/Descriptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Descriptions.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Descriptions.tsx"],"sourcesContent":["/**\n * 描述列表（div > dl）：键值对的详情（订单信息、用户资料），可分栏、可跨列，标签在左（横排）或在上（竖排）。\n * 语义是 dl > div > dt + dd（HTML 允许用 div 给 dt / dd 分组），读屏按“名称、值”念。参考 Ant Design Descriptions。\n *\n *   <Descriptions\n *     title=\"订单信息\"\n *     columns={3}\n *     items={[\n *       { label: '订单号', value: 'A-1024' },\n *       { label: '状态', value: <Badge tone=\"success\">已发货</Badge> },\n *       { label: '收货地址', value: address, span: 3 },\n *     ]}\n *   />\n *\n * 容器变窄（不到 32em）时自动排成一列（容器查询）。columns=\"auto\" 时按容器的宽度自己定栏数：每栏不窄于 minItemWidth，\n * 最多 maxColumns 栏（同一份详情放在抽屉、整页里各自合适）；跨列（span）按算出的栏数封顶。\n * 项写 copyable 时值后面有复制按钮（编号、单号、地址这类要复制去别处的），复制的文字默认是值的文字，可以用 copyText 指定。\n *\n * 部件：Root（div）、Title、List（dl）、Item（div）、Label（dt）、Value（dd）、Copy（CopyButton）。\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 { clamp } from '../utils/data/number';\nimport { CopyButton, type CopyButtonProps } from '../base/CopyButton';\nimport { useLang } from '../config/context';\nimport { plainText } from '../utils/data/text';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 描述列表里的一项 */\nexport interface DescriptionItem {\n  /** 唯一的 key；不写时用 label（label 是文字时） */\n  key?: string;\n  /** 名称 */\n  label: VNodeChild;\n  /** 值 */\n  value: VNodeChild;\n  /** 占几列，默认 1；超过栏数时按栏数 */\n  span?: number;\n  /** 值后面放复制按钮 */\n  copyable?: boolean;\n  /** 复制的文字；不写时是值的文字（值是文字或数字时） */\n  copyText?: string;\n}\n\n/** 标签与值的排列 */\nexport interface DescriptionsLayouts {\n  /** 横排（默认）：标签在左、值在右 */\n  horizontal: unknown;\n  /** 竖排：标签在上、值在下 */\n  vertical: unknown;\n  /** 行内：各项一行排开、放不下换行（页头里的编号、团队、主办这类关键信息）；columns 不起作用 */\n  inline: unknown;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface DescriptionsProps extends PartProps<'div', 'title'> {\n  /** 各项 */\n  items: readonly DescriptionItem[];\n  /** 标题 */\n  title?: VNodeChild;\n  /** 分几栏，默认 1；'auto' 时按容器的宽度定（见 minItemWidth、maxColumns） */\n  columns?: number | 'auto';\n  /** columns 为 'auto' 时每栏的最小宽度（px），默认 240 */\n  minItemWidth?: number;\n  /** columns 为 'auto' 时最多几栏，默认 4 */\n  maxColumns?: number;\n  /** 标签与值的排列，默认 horizontal */\n  layout?: keyof DescriptionsLayouts;\n  /** 带边框（表格样式）：标签有底色，各项之间有分隔线 */\n  bordered?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 列表（dl）的部件属性 */\n  propsList?: PartProps<'dl'>;\n  /** 每一项（div）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'div'> | ((item: DescriptionItem, index: number) => PartProps<'div'>);\n  /** 名称（dt）的部件属性 */\n  propsLabel?: PartProps<'dt'>;\n  /** 值（dd）的部件属性 */\n  propsValue?: PartProps<'dd'>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n}\n\n/** Descriptions 的样式：root、title、list、item、label、value 与各排列、边框 */\nexport const descriptionsStyles = css.create({\n  // 容器查询的容器：dl 按它的宽度决定要不要排成一列\n  root: { containerType: 'inline-size', display: 'grid', gap: '_md' },\n  title: { fontWeight: '_semibold', fontSize: '_md' },\n  list: {\n    display: 'grid',\n    columnGap: '_xl',\n    rowGap: '_md',\n    margin: 0,\n  },\n  // 用长写：长写优先于简写（引擎把简写排在前面），gap: 0 压不住 list 的 columnGap / rowGap\n  listBordered: {\n    columnGap: 0,\n    rowGap: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    overflow: 'hidden',\n  },\n  item: { minWidth: 0 },\n  itemHorizontal: { display: 'flex', gap: '_md', alignItems: 'baseline' },\n  itemVertical: { display: 'grid', gap: '_xs' },\n  // 行内：dl 改成换行的一行，项内标签与值挨着\n  listInline: { display: 'flex', flexWrap: 'wrap', columnGap: '_xl', rowGap: '_xs' },\n  itemInline: { display: 'flex', gap: '_xs', alignItems: 'baseline' },\n  itemBordered: {\n    alignItems: 'stretch',\n    gap: 0,\n    // 每格的上、起始边画线，外框由 dl 画；第一行、第一列的线被 dl 的边框盖住\n    marginBlockStart: `calc(-1 * ${t.borderWidths.xs})`,\n    marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,\n    borderBlockStartWidth: '_xs',\n    borderInlineStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderInlineStartStyle: 'solid',\n    borderColor: '_borderMuted',\n  },\n  label: { flexShrink: 0, margin: 0, color: '_textMuted' },\n  cellBordered: { paddingBlock: '_sm', paddingInline: '_md' },\n  // 暗色主题的 surfaceMuted 与 surface 同色，标签格要在两种模式下都看得出来\n  labelBordered: { backgroundColor: '_fill', minWidth: '8em' },\n  value: { minWidth: 0, margin: 0, color: '_text', overflowWrap: 'anywhere' },\n  // 有复制按钮的值：按钮紧跟在文字后面，文字换行时按钮在第一行\n  valueCopyable: { display: 'flex', alignItems: 'baseline', gap: '_xs' },\n  copy: { flexShrink: 0, marginBlock: '-0.25em' },\n});\n\n// 栏数与跨度是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Descriptions 的样式：columns（栏数）、span（跨几栏） */\nexport const descriptionsGridStyles = css.create({\n  // 容器不到 32em 时排成一列\n  columns: (count: number) => ({\n    gridTemplateColumns: {\n      default: `repeat(${count}, minmax(0, 1fr))`,\n      '@container (max-width: 32em)': '1fr',\n    },\n  }),\n  span: (count: number) => ({\n    gridColumn: { default: `span ${count}`, '@container (max-width: 32em)': 'auto' },\n  }),\n  // columns=\"auto\"：栏数已经按宽度算好，不再用容器查询\n  autoColumns: (count: number) => ({ gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }),\n  autoSpan: (count: number) => ({ gridColumn: `span ${count}` }),\n});\n\n/** 描述列表：键值对，可分栏、可跨列 */\nexport const Descriptions = _component(\n  ({\n    items,\n    title,\n    columns = 1,\n    minItemWidth = 240,\n    maxColumns = 4,\n    layout = 'horizontal',\n    bordered = false,\n    size,\n    propsTitle,\n    propsList,\n    propsItem,\n    propsLabel,\n    propsValue,\n    propsCopy,\n    ...rest\n  }: DescriptionsProps) => {\n    const lang = useLang();\n    let list = _state.raw<HTMLElement | null>(null);\n    // columns=\"auto\"：按列表的宽度算栏数\n    let width = _state(0);\n    useResizeObserver(\n      () => list,\n      ([entry]) => (width = entry?.contentRect.width ?? 0),\n    );\n    const auto = () => columns === 'auto';\n    const count = () =>\n      auto() ? clamp(Math.floor(width / minItemWidth), 1, maxColumns) : (columns as number);\n\n    /** 复制的文字：copyText，否则值是文字或数字时就是它 */\n    const copyTextOf = (item: DescriptionItem) =>\n      item.copyText ??\n      (typeof item.value === 'string' || typeof item.value === 'number' ? String(item.value) : '');\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [descriptionsStyles.root, size && fontSizeStyles[size]] },\n          rest,\n        )}\n        data-layout={layout}\n      >\n        {hasContent(title) && (\n          <div {...mergeAttrs<'div'>({ sx: descriptionsStyles.title }, propsTitle)}>{title}</div>\n        )}\n        <dl\n          {...mergeAttrs<'dl'>(\n            {\n              sx: [\n                descriptionsStyles.list,\n                layout === 'inline'\n                  ? descriptionsStyles.listInline\n                  : auto()\n                    ? descriptionsGridStyles.autoColumns(count())\n                    : descriptionsGridStyles.columns(count()),\n                bordered && descriptionsStyles.listBordered,\n              ],\n            },\n            propsList,\n            { ref: _toRef(list) },\n          )}\n        >\n          {items.map((item, index) => {\n            const own = typeof propsItem === 'function' ? propsItem(item, index) : propsItem;\n            const span = clamp(item.span ?? 1, 1, count());\n            return (\n              <div\n                key={item.key ?? (typeof item.label === 'string' ? item.label : index)}\n                {...mergeAttrs<'div'>(\n                  {\n                    sx: [\n                      layout === 'vertical'\n                        ? descriptionsStyles.itemVertical\n                        : layout === 'inline'\n                          ? descriptionsStyles.itemInline\n                          : descriptionsStyles.itemHorizontal,\n                      bordered && descriptionsStyles.itemBordered,\n                      descriptionsStyles.item,\n                      layout !== 'inline' &&\n                        span > 1 &&\n                        (auto()\n                          ? descriptionsGridStyles.autoSpan(span)\n                          : descriptionsGridStyles.span(span)),\n                    ],\n                  },\n                  own,\n                )}\n              >\n                <dt\n                  {...mergeAttrs<'dt'>(\n                    {\n                      sx: [\n                        descriptionsStyles.label,\n                        bordered && [\n                          descriptionsStyles.cellBordered,\n                          descriptionsStyles.labelBordered,\n                        ],\n                      ],\n                    },\n                    propsLabel,\n                  )}\n                >\n                  {item.label}\n                </dt>\n                <dd\n                  {...mergeAttrs<'dd'>(\n                    {\n                      sx: [\n                        descriptionsStyles.value,\n                        bordered && descriptionsStyles.cellBordered,\n                        item.copyable && descriptionsStyles.valueCopyable,\n                      ],\n                    },\n                    propsValue,\n                  )}\n                >\n                  {item.value}\n                  {item.copyable && (\n                    <CopyButton\n                      {...mergePartProps<Partial<CopyButtonProps>>(\n                        {\n                          size: 'xs',\n                          sx: descriptionsStyles.copy,\n                          'aria-label': lang.descriptionsCopy(plainText(item.label) ?? lang.copy),\n                        },\n                        propsCopy,\n                      )}\n                      value={() => copyTextOf(item)}\n                    />\n                  )}\n                </dd>\n              </div>\n            );\n          })}\n        </dl>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/display/Ellipsis.d.ts

@@ -0,0 +1,29 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到外层 span 上 */
+export interface EllipsisProps extends PartProps<'span'> {
+    /** 最多几行，默认 1 */
+    lines?: number;
+    /** 截断时后面放“展开”按钮，展开后显示全部 */
+    expandable?: boolean;
+    /** 是否展开：父级可以写 _expanded={x} */
+    _expanded?: boolean;
+    /** 截断时悬停、聚焦显示的提示，默认是 children；false 不提示（expandable 时默认不提示） */
+    tooltip?: VNodeChild | false;
+    /** 截断的那段文字的部件属性 */
+    propsText?: PartProps<'span'>;
+    /** 展开按钮的部件属性 */
+    propsToggle?: PartProps<'button'>;
+    /** 文字 */
+    children?: VNodeChild;
+}
+/** Ellipsis 的样式：root、multiline、text、toggle */
+export declare const ellipsisStyles: Readonly<{
+    multiline: css.CompiledStyles;
+    root: css.CompiledStyles;
+    text: css.CompiledStyles;
+    toggle: css.CompiledStyles;
+}>;
+/** 截断的文字：真的截断了才有提示或展开按钮 */
+export declare const Ellipsis: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<EllipsisProps>;

package/dist/display/Ellipsis.js

@@ -0,0 +1,111 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { lineClampStyles, textStyles } from "../utils/style/typography.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { batchLayout } from "../utils/dom/layout-batch.js";
+import { useResizeObserver } from "../utils/dom/resize.js";
+import { Tooltip } from "../overlay/Tooltip.js";
+import { createVNode, mergeProps, onMounted, onUpdated, ref, shallowRef } from "vue";
+import { _component, bindable, childrenProp, childrenStable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/display/Ellipsis.tsx
+/** 未声明的属性落到外层 span 上 */
+/** Ellipsis 的样式：root、multiline、text、toggle */
+var ellipsisStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "baseline",
+		gap: "_xs",
+		minWidth: 0,
+		maxWidth: "100%"
+	},
+	multiline: {
+		display: "flex",
+		alignItems: "flex-end"
+	},
+	text: {
+		minWidth: 0,
+		borderRadius: "_xs"
+	},
+	toggle: {
+		flexShrink: 0,
+		padding: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: "_accentText",
+		font: "inherit",
+		cursor: "pointer",
+		whiteSpace: "nowrap",
+		textDecorationLine: {
+			default: "none",
+			":hover": "underline"
+		}
+	}
+});
+/** 截断的文字：真的截断了才有提示或展开按钮 */
+var Ellipsis = /*#__PURE__*/ _component((_props, _ctx) => {
+	const lines = readonlyProp(_props, "lines", 1);
+	const expandable = readonlyProp(_props, "expandable", false);
+	const expanded = bindable(_props, "_expanded", () => false, _ctx.emit);
+	const tooltip = readonlyProp(_props, "tooltip");
+	const propsText = readonlyProp(_props, "propsText");
+	const propsToggle = readonlyProp(_props, "propsToggle");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	let text = shallowRef(null);
+	let truncated = ref(false);
+	function measure() {
+		batchLayout(() => {
+			const element = text.value;
+			if (!element || expanded.value) return;
+			const over = lines.value > 1 ? element.scrollHeight > element.clientHeight + 1 : element.scrollWidth > element.clientWidth + 1;
+			return () => truncated.value = over;
+		});
+	}
+	useResizeObserver(() => text.value, measure);
+	onMounted(measure);
+	onUpdated(measure);
+	return () => {
+		const clamped = !expanded.value;
+		const showTooltip = truncated.value && clamped && tooltip.value !== false && (tooltip.value !== void 0 || !expandable.value);
+		const body = (props = {}) => createVNode("span", mergeAttrs({ sx: [
+			ellipsisStyles.text,
+			clamped && (lines.value > 1 ? [textStyles.clamp, lineClampStyles.lines(lines.value)] : textStyles.truncate),
+			showTooltip && focusRingStyles.visible
+		] }, propsText.value, {
+			ref: text,
+			tabindex: showTooltip ? 0 : void 0,
+			...props
+		}), [children.value]);
+		return createVNode("span", mergeProps(mergeAttrs({ sx: [ellipsisStyles.root, lines.value > 1 && ellipsisStyles.multiline] }, rest), {
+			"data-truncated": truncated.value || void 0,
+			"data-expanded": expanded.value || void 0
+		}), [showTooltip ? createVNode(Tooltip, {
+			"trigger": (props) => body(props),
+			"key": "__site0"
+		}, {
+			default: () => [tooltip.value ?? children.value],
+			$stable: childrenStable()
+		}) : body(), expandable.value && (truncated.value || expanded.value) && createVNode("button", mergeAttrs({ sx: ellipsisStyles.toggle }, propsToggle.value, {
+			type: "button",
+			"aria-expanded": expanded.value,
+			onClick: () => expanded.value = !expanded.value
+		}), [expanded.value ? lang.ellipsisCollapse : lang.ellipsisExpand])]);
+	};
+}, {
+	name: "Ellipsis",
+	props: [
+		"lines",
+		"expandable",
+		"_expanded",
+		"onUpdate:_expanded",
+		"tooltip",
+		"propsText",
+		"propsToggle"
+	]
+});
+//#endregion
+export { Ellipsis, ellipsisStyles };
+
+//# sourceMappingURL=Ellipsis.js.map

package/dist/display/Ellipsis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ellipsis.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_vtp_childrenStable"],"sources":["../../src/display/Ellipsis.tsx"],"sourcesContent":["/**\n * 截断的文字：超出一行（或 lines 行）时省略，真的被截断了才给出看全文的办法——悬停或聚焦时的提示，或展开按钮。\n * 表格里的长名称、卡片里的描述、列表里的备注。\n *\n *   <Ellipsis>杭州远山精密机械有限公司（萧山二厂）</Ellipsis>             一行，截断时悬停看全文\n *   <Ellipsis lines={3} expandable>{description}</Ellipsis>              三行，截断时后面有“展开”\n *\n * 是否截断由 ResizeObserver 量出（内容或宽度变了重新量），没截断时就是普通文字：不能聚焦、没有提示、没有按钮。\n * 截断时文字能用 Tab 聚焦（键盘用户也能看全文），提示的内容默认是 children，tooltip 可以换成别的；\n * expandable 时展开后显示全部，再点“收起”。部件：Root（span）、Text（span，截断的那段）、Toggle（展开按钮）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted, onUpdated, type VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { Tooltip } from '../overlay/Tooltip';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { batchLayout } from '../utils/dom/layout-batch';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { lineClampStyles, textStyles } from '../utils/style/typography';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface EllipsisProps extends PartProps<'span'> {\n  /** 最多几行，默认 1 */\n  lines?: number;\n  /** 截断时后面放“展开”按钮，展开后显示全部 */\n  expandable?: boolean;\n  /** 是否展开：父级可以写 _expanded={x} */\n  _expanded?: boolean;\n  /** 截断时悬停、聚焦显示的提示，默认是 children；false 不提示（expandable 时默认不提示） */\n  tooltip?: VNodeChild | false;\n  /** 截断的那段文字的部件属性 */\n  propsText?: PartProps<'span'>;\n  /** 展开按钮的部件属性 */\n  propsToggle?: PartProps<'button'>;\n  /** 文字 */\n  children?: VNodeChild;\n}\n\n/** Ellipsis 的样式：root、multiline、text、toggle */\nexport const ellipsisStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'baseline',\n    gap: '_xs',\n    minWidth: 0,\n    maxWidth: '100%',\n  },\n  // 多行时块级：段落里的描述\n  multiline: { display: 'flex', alignItems: 'flex-end' },\n  text: { minWidth: 0, borderRadius: '_xs' },\n  // 展开按钮：链接样式，不换行\n  toggle: {\n    flexShrink: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: '_accentText',\n    font: 'inherit',\n    cursor: 'pointer',\n    whiteSpace: 'nowrap',\n    textDecorationLine: { default: 'none', ':hover': 'underline' },\n  },\n});\n\n/** 截断的文字：真的截断了才有提示或展开按钮 */\nexport const Ellipsis = _component(\n  ({\n    lines = 1,\n    expandable = false,\n    _expanded: expanded = _bindable(false),\n    tooltip,\n    propsText,\n    propsToggle,\n    children,\n    ...rest\n  }: EllipsisProps) => {\n    const lang = useLang();\n    let text = _state.raw<HTMLElement | null>(null);\n    let truncated = _state(false);\n\n    function measure() {\n      batchLayout(() => {\n        const element = text;\n        if (!element || expanded) return;\n        // 多行比高度、单行比宽度；差 1px 以内是小数取整\n        const over =\n          lines > 1\n            ? element.scrollHeight > element.clientHeight + 1\n            : element.scrollWidth > element.clientWidth + 1;\n        return () => (truncated = over);\n      });\n    }\n    useResizeObserver(() => text, measure);\n    // 挂载后量一次；每次重新渲染（内容、行数、展开变了）后再量：截断后的大小可能不变，ResizeObserver 不会通知。\n    // 不 watch children：在渲染函数外读 children 会调用插槽，Vue 会警告且不跟踪依赖\n    onMounted(measure);\n    onUpdated(measure);\n\n    return () => {\n      const clamped = !expanded;\n      const showTooltip =\n        truncated && clamped && tooltip !== false && (tooltip !== undefined || !expandable);\n      const body = (props: Record<string, unknown> = {}) => (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              sx: [\n                ellipsisStyles.text,\n                clamped &&\n                  (lines > 1\n                    ? [textStyles.clamp, lineClampStyles.lines(lines)]\n                    : textStyles.truncate),\n                showTooltip && focusRingStyles.visible,\n              ],\n            },\n            propsText,\n            {\n              ref: _toRef(text),\n              // 截断时能聚焦：键盘用户也能看到提示里的全文\n              tabindex: showTooltip ? 0 : undefined,\n              ...props,\n            },\n          )}\n        >\n          {children}\n        </span>\n      );\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [ellipsisStyles.root, lines > 1 && ellipsisStyles.multiline] },\n            rest,\n          )}\n          data-truncated={truncated || undefined}\n          data-expanded={expanded || undefined}\n        >\n          {showTooltip ? (\n            <Tooltip trigger={(props) => body(props as unknown as Record<string, unknown>)}>\n              {tooltip ?? children}\n            </Tooltip>\n          ) : (\n            body()\n          )}\n          {expandable && (truncated || expanded) && (\n            <button\n              {...mergeAttrs<'button'>({ sx: ellipsisStyles.toggle }, propsToggle, {\n                type: 'button',\n                'aria-expanded': expanded,\n                onClick: () => (expanded = !expanded),\n              })}\n            >\n              {expanded ? lang.ellipsisCollapse : lang.ellipsisExpand}\n            </button>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAyCA,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,UAAU;EACV,UAAU;CACZ;CAEA,WAAW;EAAE,SAAS;EAAQ,YAAY;CAAW;CACrD,MAAM;EAAE,UAAU;EAAG,cAAc;CAAM;CAEzC,QAAQ;EACN,YAAY;EACZ,SAAS;EACT,aAAa;EACb,iBAAiB;EACjB,OAAO;EACP,MAAM;EACN,QAAQ;EACR,YAAY;EACZ,oBAAoB;GAAE,SAAS;GAAQ,UAAU;EAAY;CAC/D;AACF,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SASqB;CAAA,MAAA,QAAAA,aAAA,QAAA,SARX,CAAC;CAAA,MAAA,aAAAA,aAAA,QAAA,cACI,KAAK;CAAA,MAAA,WAAAC,SAAA,QAAA,mBACc,OAAK,KAAA,IAAA;CAAA,MAAA,UAAAD,aAAA,QAAA,SAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAE,aAAA,MAAA;CAAA,MAKlC,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,IAAI,OAAIC,WAAkC,IAAI;CAC9C,IAAI,YAASC,IAAU,KAAK;CAE5B,SAAS,UAAU;EACjB,kBAAkB;GAChB,MAAM,UAAO,KAAA;GACb,IAAI,CAAC,WAAO,SAAA,OAAc;GAE1B,MAAM,OACJ,MAAA,QAAQ,IACJ,QAAQ,eAAe,QAAQ,eAAe,IAC9C,QAAQ,cAAc,QAAQ,cAAc;GAClD,aAAc,UAAA,QAAY;EAC5B,CAAC;CACH;CACA,wBAAkB,KAAA,OAAY,OAAO;CAGrC,UAAU,OAAO;CACjB,UAAU,OAAO;CAEjB,aAAa;EACX,MAAM,UAAU,CAAA,SAAA;EAChB,MAAM,cACJ,UAAA,SAAa,WAAW,QAAA,UAAY,UAAU,QAAA,UAAY,KAAA,KAAa,CAAA,WAAA;EACzE,MAAM,QAAQ,QAAiC,CAAC,MAACC,YAAA,QAEzC,WACF,EACE,IAAI;GACF,eAAe;GACf,YACG,MAAA,QAAQ,IACL,CAAC,WAAW,OAAO,gBAAgB,MAAK,MAAA,KAAM,CAAC,IAC/C,WAAW;GACjB,eAAe,gBAAgB;EAAO,EAE1C,GAAC,UAAA,OAED;GACE,KAAG;GAEH,UAAU,cAAc,IAAI,KAAA;GAC5B,GAAG;EACL,CACF,GAAC,CAAA,SAAA,KAAA,CAAA;EAKL,OAAAA,YAAA,QAAAC,WAEQ,WACF,EAAE,IAAI,CAAC,eAAe,MAAM,MAAA,QAAQ,KAAK,eAAe,SAAS,EAAE,GACnE,IACF,GAAC;GAAA,kBACe,UAAA,SAAa,KAAA;GAAS,iBACvB,SAAA,SAAY,KAAA;EAAS,CAAA,GAAA,CAEnC,cAAWD,YAAA,SAAA;GAAA,YACS,UAAU,KAAK,KAA2C;GAAC,OAAA;EAAA,GAAA;GAAA,eAAA,CAC3E,QAAA,SAAA,SAAA,KAAmB;GAAA,SAAAE,eAAA;EAAA,CAAA,IAGtB,KAAK,GAEN,WAAA,UAAe,UAAA,SAAA,SAAA,UAAsBF,YAAA,UAE9B,WAAqB,EAAE,IAAI,eAAe,OAAO,GAAC,YAAA,OAAe;GACnE,MAAM;GACN,iBAAe,SAAA;GACf,eAAgB,SAAA,QAAW,CAAA,SAAA;EAC7B,CAAC,GAAC,CAED,SAAA,QAAW,KAAK,mBAAmB,KAAK,cAAc,CAAA,CAE1D,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/FieldCompare.d.ts

@@ -0,0 +1,58 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type FieldDiff } from '../utils/data/diff';
+import type { SortValue } from '../utils/data/collation';
+import { type PartProps } from '../utils/props';
+import { type ColumnTableProps } from '../table/ColumnTable';
+import { type DataTableColumn } from '../table/columns';
+/**
+ * 一个要对比的字段：写法同表格的列（key、header、type、format、statuses、empty、value），
+ * cell 的第二个参数是 0（原值那一份）或 1（新值那一份）
+ */
+export interface CompareField<T> extends Pick<DataTableColumn<T>, 'key' | 'header' | 'type' | 'format' | 'statuses' | 'empty' | 'value' | 'cell'> {
+    /** 数值变化的好坏：'higher' 越高越好（变化量升是绿、降是红），'lower' 越低越好（成本、耗时）；不写时不着色 */
+    better?: 'higher' | 'lower';
+}
+/** 对比的一行：字段与它的比较结果 */
+export interface FieldCompareRow<T> extends FieldDiff<Record<string, SortValue>, string> {
+    /** 字段 */
+    field: CompareField<T>;
+}
+/** 未声明的属性落到外层 div 上 */
+export interface FieldCompareProps<T> extends PartProps<'div'> {
+    /** 对比哪些字段，按这个顺序 */
+    fields: readonly CompareField<T>[];
+    /** 原来的记录；没有（新建）时每个字段都当作空 */
+    before: T | null | undefined;
+    /** 现在的记录 */
+    after: T | null | undefined;
+    /** 'table' 字段、原值、新值、变化四列（默认）；'list' 一行一个字段：原值 → 新值 变化 */
+    layout?: 'table' | 'list';
+    /** 只列改了的字段；默认表格列出全部、列表只列改了的 */
+    onlyChanged?: boolean;
+    /** 表格的部件属性（layout 为 'table' 时） */
+    propsTable?: Partial<ColumnTableProps<FieldCompareRow<T>>>;
+    /** 列表（dl）的部件属性（layout 为 'list' 时） */
+    propsList?: PartProps<'dl'>;
+    /** 列表里每一项的部件属性 */
+    propsItem?: PartProps<'div'>;
+    /** 字段名（dt）的部件属性 */
+    propsLabel?: PartProps<'dt'>;
+    /** 值（dd）的部件属性 */
+    propsValue?: PartProps<'dd'>;
+}
+/** FieldCompare 的样式：list、item、label、value、before、after、arrow、unchanged、changed */
+export declare const fieldCompareStyles: Readonly<{
+    after: css.CompiledStyles;
+    arrow: css.CompiledStyles;
+    before: css.CompiledStyles;
+    change: css.CompiledStyles;
+    changed: css.CompiledStyles;
+    item: css.CompiledStyles;
+    label: css.CompiledStyles;
+    list: css.CompiledStyles;
+    none: css.CompiledStyles;
+    unchanged: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** 字段对比：表格或列表 */
+export declare const FieldCompare: <T>(props: FieldCompareProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/display/FieldCompare.js

@@ -0,0 +1,205 @@
+import { toNumber } from "../utils/data/numeric.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { toneStyles } from "../utils/style/typography.js";
+import { Icon } from "../base/Icon.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { useFormat } from "../config/lang/format.js";
+import { diffFields } from "../utils/data/diff.js";
+import { columnType, columnValue, formatCell } from "../table/columns.js";
+import { useColumnDisplay } from "../table/column-display.js";
+import { ColumnTable } from "../table/ColumnTable.js";
+import { Fragment, createVNode, mergeProps } 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 { ArrowRight } from "@lucide/icons";
+//#region src/display/FieldCompare.tsx
+/**
+* 字段对比：两份记录（编辑前后、测算的两个版本、审批前后）按字段列出原值与新值，数值字段带上变化量与变化率。
+* 建在 diffFields 上；字段的写法与表格的列定义相同（key、header、type、format、statuses、empty、value、cell），
+* 表格里已有的列定义可以直接拿来用。
+*
+*   <FieldCompare fields={columns} before={v1} after={v2} />                      // 表格：字段、原值、新值、变化
+*   <FieldCompare fields={columns} before={old} after={row} layout="list" />      // 列表：只列改了的，“¥1,200 → ¥1,350 +12.5%”
+*
+* 表格默认列出全部字段（没改的淡显），列表默认只列改了的（放在时间线、通知、审批意见里）；onlyChanged 可以改。
+* 数值字段的变化量按字段的 type、format 显示，带正负号；写了 better 时按好坏着色（成本、耗时写 'lower'）。
+*
+* 读屏：列表里原值是 del、新值是 ins，两者之间有“改为”（画面上是箭头）。
+* 部件：Root（div）、Table（ColumnTable，表格时）、List（dl，列表时）、Item（div）、Label（dt）、Value（dd）。
+*/
+/**
+* 一个要对比的字段：写法同表格的列（key、header、type、format、statuses、empty、value），
+* cell 的第二个参数是 0（原值那一份）或 1（新值那一份）
+*/
+/** 对比的一行：字段与它的比较结果 */
+/** 未声明的属性落到外层 div 上 */
+/** FieldCompare 的样式：list、item、label、value、before、after、arrow、unchanged、changed */
+var fieldCompareStyles = css.create({
+	list: {
+		display: "grid",
+		gridTemplateColumns: "auto 1fr",
+		columnGap: "_md",
+		rowGap: "_xs",
+		margin: 0
+	},
+	item: { display: "contents" },
+	label: { color: "_textMuted" },
+	value: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "baseline",
+		columnGap: "_xs",
+		margin: 0,
+		minWidth: 0,
+		overflowWrap: "anywhere"
+	},
+	before: {
+		color: "_textMuted",
+		textDecorationLine: "line-through"
+	},
+	after: {
+		textDecorationLine: "none",
+		color: "_text",
+		fontWeight: "_medium"
+	},
+	arrow: {
+		alignSelf: "center",
+		color: "_textMuted",
+		flexShrink: 0
+	},
+	change: {
+		fontSize: "_sm",
+		fontVariantNumeric: "tabular-nums"
+	},
+	unchanged: { color: "_textMuted" },
+	changed: { fontWeight: "_medium" },
+	none: { color: "_textMuted" }
+});
+/** 字段对比：表格或列表 */
+var FieldCompare = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const fields = readonlyProp(_props, "fields");
+	const before = readonlyProp(_props, "before");
+	const after = readonlyProp(_props, "after");
+	const layout = readonlyProp(_props, "layout", "table");
+	const onlyChanged = readonlyProp(_props, "onlyChanged");
+	const propsTable = readonlyProp(_props, "propsTable");
+	const propsList = readonlyProp(_props, "propsList");
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const propsValue = readonlyProp(_props, "propsValue");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const display = useColumnDisplay();
+	const column = (field) => field;
+	/** 每个字段在一份记录里的值（按 value 函数或字段名取） */
+	const valuesOf = (record) => Object.fromEntries(fields.value.map((field) => [field.key, record == null ? void 0 : columnValue(column(field), record)]));
+	const rows = () => {
+		const all = diffFields(valuesOf(before.value), valuesOf(after.value), fields.value.map((field) => field.key)).map((diff, index) => ({
+			...diff,
+			field: fields.value[index]
+		}));
+		return onlyChanged.value ?? layout.value === "list" ? all.filter((row) => row.changed) : all;
+	};
+	/** 字段的值类型：写了 type 用它，否则按两份记录推断（同表格的列） */
+	const typeOf = (field) => columnType(column(field), [before.value, after.value].filter((record) => record != null));
+	/** 一份记录里这个字段的显示：cell 优先，否则按类型格式化（同表格） */
+	const shown = (row, side) => {
+		const record = side === 0 ? before.value : after.value;
+		if (row.field.cell && record != null) return row.field.cell(record, side);
+		return display.value(column(row.field), typeOf(row.field), side === 0 ? row.before : row.after);
+	};
+	/** 数值字段的变化：变化量（按字段的格式，带正负号）与变化率；没变或不是数值时没有 */
+	const change = (row) => {
+		if (!row.changed || row.delta === void 0) return null;
+		const type = typeOf(row.field);
+		const signed = {
+			...row.field.format,
+			signDisplay: "exceptZero"
+		};
+		const delta = formatCell(row.delta, type === "text" ? "number" : type, format, signed);
+		const ratio = row.ratio !== void 0 && type !== "percent" ? format.number(row.ratio, {
+			style: "percent",
+			maximumFractionDigits: 1,
+			signDisplay: "exceptZero"
+		}) : null;
+		const sign = Math.sign(toNumber(row.delta));
+		const tone = !row.field.better || sign === 0 ? toneStyles.muted : sign > 0 === (row.field.better === "higher") ? toneStyles.success : toneStyles.danger;
+		return createVNode("span", css.attrs(fieldCompareStyles.change, tone), [delta, ratio && `（${ratio}）`]);
+	};
+	const none = () => createVNode("span", css.attrs(fieldCompareStyles.none), [lang.fieldCompareNone]);
+	const table = (list) => {
+		const [field, from, to, delta] = lang.fieldCompareHeaders;
+		const numeric = list.some((row) => row.changed && row.delta !== void 0);
+		const columns = [
+			{
+				key: "field",
+				header: field,
+				cell: (row) => row.field.header
+			},
+			{
+				key: "before",
+				align: "start",
+				header: from,
+				cell: (row) => createVNode("span", css.attrs(fieldCompareStyles.unchanged), [shown(row, 0)])
+			},
+			{
+				key: "after",
+				align: "start",
+				header: to,
+				cell: (row) => createVNode("span", css.attrs(row.changed ? fieldCompareStyles.changed : fieldCompareStyles.unchanged), [shown(row, 1)])
+			},
+			...numeric ? [{
+				key: "change",
+				header: delta,
+				align: "start",
+				cell: change
+			}] : []
+		];
+		return createVNode(ColumnTable, mergeProps(mergePartProps({ density: "compact" }, propsTable.value), {
+			"rows": list,
+			"columns": columns,
+			"getKey": _cache[0] || (_cache[0] = (row) => row.field.key),
+			"propsRow": _cache[1] || (_cache[1] = (row) => ({ "data-changed": row.changed || void 0 }))
+		}), null);
+	};
+	const list = (items) => createVNode("dl", mergeAttrs({ sx: fieldCompareStyles.list }, propsList.value), [items.map((row) => createVNode("div", mergeProps({ "key": row.field.key }, mergeAttrs({ sx: fieldCompareStyles.item }, propsItem.value)), [createVNode("dt", mergeAttrs({ sx: fieldCompareStyles.label }, propsLabel.value), [row.field.header]), createVNode("dd", mergeAttrs({ sx: fieldCompareStyles.value }, propsValue.value), [
+		before.value != null && createVNode(Fragment, null, [
+			createVNode("del", css.attrs(fieldCompareStyles.before), [shown(row, 0)]),
+			createVNode(Icon, {
+				"icon": ArrowRight,
+				"sx": fieldCompareStyles.arrow
+			}, null),
+			createVNode(VisuallyHidden, null, {
+				default: () => [lang.fieldCompareTo],
+				$stable: true
+			})
+		]),
+		createVNode("ins", css.attrs(fieldCompareStyles.after), [shown(row, 1)]),
+		change(row)
+	])]))]);
+	return () => {
+		const items = rows();
+		return createVNode("div", mergeAttrs({}, rest), [items.length === 0 ? none() : layout.value === "list" ? list(items) : table(items)]);
+	};
+}, {
+	name: "FieldCompare",
+	props: [
+		"fields",
+		"before",
+		"after",
+		"layout",
+		"onlyChanged",
+		"propsTable",
+		"propsList",
+		"propsItem",
+		"propsLabel",
+		"propsValue"
+	]
+});
+//#endregion
+export { FieldCompare, fieldCompareStyles };
+
+//# sourceMappingURL=FieldCompare.js.map