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

package/dist/display/FieldCompare.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldCompare.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/display/FieldCompare.tsx"],"sourcesContent":["/**\n * 字段对比：两份记录（编辑前后、测算的两个版本、审批前后）按字段列出原值与新值，数值字段带上变化量与变化率。\n * 建在 diffFields 上；字段的写法与表格的列定义相同（key、header、type、format、statuses、empty、value、cell），\n * 表格里已有的列定义可以直接拿来用。\n *\n *   <FieldCompare fields={columns} before={v1} after={v2} />                      // 表格：字段、原值、新值、变化\n *   <FieldCompare fields={columns} before={old} after={row} layout=\"list\" />      // 列表：只列改了的，“¥1,200 → ¥1,350 +12.5%”\n *\n * 表格默认列出全部字段（没改的淡显），列表默认只列改了的（放在时间线、通知、审批意见里）；onlyChanged 可以改。\n * 数值字段的变化量按字段的 type、format 显示，带正负号；写了 better 时按好坏着色（成本、耗时写 'lower'）。\n *\n * 读屏：列表里原值是 del、新值是 ins，两者之间有“改为”（画面上是箭头）。\n * 部件：Root（div）、Table（ColumnTable，表格时）、List（dl，列表时）、Item（div）、Label（dt）、Value（dd）。\n */\nimport { ArrowRight } from '@lucide/icons';\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 { Icon } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFormat } from '../config/lang/format';\nimport { diffFields, type FieldDiff } from '../utils/data/diff';\nimport { toNumber } from '../utils/data/numeric';\nimport type { SortValue } from '../utils/data/collation';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { toneStyles } from '../utils/style/typography';\nimport { useColumnDisplay } from '../table/column-display';\nimport { ColumnTable, type ColumnTableProps } from '../table/ColumnTable';\nimport {\n  columnType,\n  columnValue,\n  formatCell,\n  type ColumnTypes,\n  type DataTableColumn,\n} from '../table/columns';\n\n/**\n * 一个要对比的字段：写法同表格的列（key、header、type、format、statuses、empty、value），\n * cell 的第二个参数是 0（原值那一份）或 1（新值那一份）\n */\nexport interface CompareField<T> extends Pick<\n  DataTableColumn<T>,\n  'key' | 'header' | 'type' | 'format' | 'statuses' | 'empty' | 'value' | 'cell'\n> {\n  /** 数值变化的好坏：'higher' 越高越好（变化量升是绿、降是红），'lower' 越低越好（成本、耗时）；不写时不着色 */\n  better?: 'higher' | 'lower';\n}\n\n/** 对比的一行：字段与它的比较结果 */\nexport interface FieldCompareRow<T> extends FieldDiff<Record<string, SortValue>, string> {\n  /** 字段 */\n  field: CompareField<T>;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface FieldCompareProps<T> extends PartProps<'div'> {\n  /** 对比哪些字段，按这个顺序 */\n  fields: readonly CompareField<T>[];\n  /** 原来的记录；没有（新建）时每个字段都当作空 */\n  before: T | null | undefined;\n  /** 现在的记录 */\n  after: T | null | undefined;\n  /** 'table' 字段、原值、新值、变化四列（默认）；'list' 一行一个字段：原值 → 新值 变化 */\n  layout?: 'table' | 'list';\n  /** 只列改了的字段；默认表格列出全部、列表只列改了的 */\n  onlyChanged?: boolean;\n  /** 表格的部件属性（layout 为 'table' 时） */\n  propsTable?: Partial<ColumnTableProps<FieldCompareRow<T>>>;\n  /** 列表（dl）的部件属性（layout 为 'list' 时） */\n  propsList?: PartProps<'dl'>;\n  /** 列表里每一项的部件属性 */\n  propsItem?: PartProps<'div'>;\n  /** 字段名（dt）的部件属性 */\n  propsLabel?: PartProps<'dt'>;\n  /** 值（dd）的部件属性 */\n  propsValue?: PartProps<'dd'>;\n}\n\n/** FieldCompare 的样式：list、item、label、value、before、after、arrow、unchanged、changed */\nexport const fieldCompareStyles = css.create({\n  // 字段名一列、值一列：多项时字段名对齐\n  list: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n  },\n  item: { display: 'contents' },\n  label: { color: '_textMuted' },\n  value: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'baseline',\n    columnGap: '_xs',\n    margin: 0,\n    minWidth: 0,\n    overflowWrap: 'anywhere',\n  },\n  before: { color: '_textMuted', textDecorationLine: 'line-through' },\n  after: { textDecorationLine: 'none', color: '_text', fontWeight: '_medium' },\n  arrow: { alignSelf: 'center', color: '_textMuted', flexShrink: 0 },\n  change: { fontSize: '_sm', fontVariantNumeric: 'tabular-nums' },\n  // 表格里没改的字段淡显，改了的新值加粗\n  unchanged: { color: '_textMuted' },\n  changed: { fontWeight: '_medium' },\n  none: { color: '_textMuted' },\n});\n\n/** 字段对比：表格或列表 */\nexport const FieldCompare = _component(\n  <T,>({\n    fields,\n    before,\n    after,\n    layout = 'table',\n    onlyChanged,\n    propsTable,\n    propsList,\n    propsItem,\n    propsLabel,\n    propsValue,\n    ...rest\n  }: FieldCompareProps<T>) => {\n    const lang = useLang();\n    const format = useFormat();\n    const display = useColumnDisplay<T>();\n    const column = (field: CompareField<T>) => field as DataTableColumn<T>;\n\n    /** 每个字段在一份记录里的值（按 value 函数或字段名取） */\n    const valuesOf = (record: T | null | undefined) =>\n      Object.fromEntries(\n        fields.map((field) => [\n          field.key,\n          record == null ? undefined : columnValue(column(field), record),\n        ]),\n      );\n\n    const rows = (): FieldCompareRow<T>[] => {\n      const diffs = diffFields(\n        valuesOf(before),\n        valuesOf(after),\n        fields.map((field) => field.key),\n      );\n      const all = diffs.map((diff, index) => ({ ...diff, field: fields[index]! }));\n      return (onlyChanged ?? layout === 'list') ? all.filter((row) => row.changed) : all;\n    };\n\n    /** 字段的值类型：写了 type 用它，否则按两份记录推断（同表格的列） */\n    const typeOf = (field: CompareField<T>): keyof ColumnTypes =>\n      columnType(\n        column(field),\n        [before, after].filter((record): record is T => record != null),\n      );\n\n    /** 一份记录里这个字段的显示：cell 优先，否则按类型格式化（同表格） */\n    const shown = (row: FieldCompareRow<T>, side: 0 | 1): VNodeChild => {\n      const record = side === 0 ? before : after;\n      if (row.field.cell && record != null) return row.field.cell(record, side);\n      return display.value(\n        column(row.field),\n        typeOf(row.field),\n        side === 0 ? row.before : row.after,\n      );\n    };\n\n    /** 数值字段的变化：变化量（按字段的格式，带正负号）与变化率；没变或不是数值时没有 */\n    const change = (row: FieldCompareRow<T>): VNodeChild => {\n      if (!row.changed || row.delta === undefined) return null;\n      const type = typeOf(row.field);\n      const signed = { ...row.field.format, signDisplay: 'exceptZero' } as const;\n      const delta = formatCell(row.delta, type === 'text' ? 'number' : type, format, signed);\n      // 百分比字段的变化量本身就是百分点，不再给变化率\n      const ratio =\n        row.ratio !== undefined && type !== 'percent'\n          ? format.number(row.ratio, {\n              style: 'percent',\n              maximumFractionDigits: 1,\n              signDisplay: 'exceptZero',\n            })\n          : null;\n      const sign = Math.sign(toNumber(row.delta));\n      const tone =\n        !row.field.better || sign === 0\n          ? toneStyles.muted\n          : sign > 0 === (row.field.better === 'higher')\n            ? toneStyles.success\n            : toneStyles.danger;\n      return (\n        <span {...css.attrs(fieldCompareStyles.change, tone)}>\n          {delta}\n          {ratio && `（${ratio}）`}\n        </span>\n      );\n    };\n\n    const none = () => <span {...css.attrs(fieldCompareStyles.none)}>{lang.fieldCompareNone}</span>;\n\n    const table = (list: FieldCompareRow<T>[]) => {\n      const [field, from, to, delta] = lang.fieldCompareHeaders;\n      const numeric = list.some((row) => row.changed && row.delta !== undefined);\n      const columns: DataTableColumn<FieldCompareRow<T>>[] = [\n        { key: 'field', header: field, cell: (row) => row.field.header },\n        {\n          key: 'before',\n          align: 'start',\n          header: from,\n          cell: (row) => <span {...css.attrs(fieldCompareStyles.unchanged)}>{shown(row, 0)}</span>,\n        },\n        {\n          key: 'after',\n          align: 'start',\n          header: to,\n          cell: (row) => (\n            <span\n              {...css.attrs(\n                row.changed ? fieldCompareStyles.changed : fieldCompareStyles.unchanged,\n              )}\n            >\n              {shown(row, 1)}\n            </span>\n          ),\n        },\n        ...(numeric\n          ? [{ key: 'change', header: delta, align: 'start' as const, cell: change }]\n          : []),\n      ];\n      return (\n        <ColumnTable\n          {...mergePartProps<Partial<ColumnTableProps<FieldCompareRow<T>>>>(\n            { density: 'compact' },\n            propsTable,\n          )}\n          rows={list}\n          columns={columns}\n          getKey={(row) => row.field.key}\n          propsRow={(row) => ({ 'data-changed': row.changed || undefined }) as PartProps<'tr'>}\n        />\n      );\n    };\n\n    const list = (items: FieldCompareRow<T>[]) => (\n      <dl {...mergeAttrs<'dl'>({ sx: fieldCompareStyles.list }, propsList)}>\n        {items.map((row) => (\n          <div\n            key={row.field.key}\n            {...mergeAttrs<'div'>({ sx: fieldCompareStyles.item }, propsItem)}\n          >\n            <dt {...mergeAttrs<'dt'>({ sx: fieldCompareStyles.label }, propsLabel)}>\n              {row.field.header}\n            </dt>\n            <dd {...mergeAttrs<'dd'>({ sx: fieldCompareStyles.value }, propsValue)}>\n              {before != null && (\n                <>\n                  <del {...css.attrs(fieldCompareStyles.before)}>{shown(row, 0)}</del>\n                  <Icon icon={ArrowRight} sx={fieldCompareStyles.arrow} />\n                  <VisuallyHidden>{lang.fieldCompareTo}</VisuallyHidden>\n                </>\n              )}\n              <ins {...css.attrs(fieldCompareStyles.after)}>{shown(row, 1)}</ins>\n              {change(row)}\n            </dd>\n          </div>\n        ))}\n      </dl>\n    );\n\n    return () => {\n      const items = rows();\n      return (\n        <div {...mergeAttrs<'div'>({}, rest)}>\n          {items.length === 0 ? none() : layout === 'list' ? list(items) : table(items)}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Gauge.d.ts

@@ -0,0 +1,60 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type NumericFormat } from '../config/lang/format';
+import { type NumericValue } from '../utils/data/numeric';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+import { type TextSize } from '../utils/style/typography';
+/** 外圈的一段区间：从上一段的终点（第一段从 min）到 to */
+export interface GaugeBand {
+    /** 终点 */
+    to: number;
+    /** 色调：落在这一段时数值弧也用它 */
+    tone: StatusTone;
+}
+/** 角色与取值由组件管理 */
+export type GaugeManaged = 'role' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext';
+/** 未声明的属性落到外层 div（role="meter"）上 */
+export interface GaugeProps extends PartProps<'div', GaugeManaged> {
+    /** 当前值 */
+    value: NumericValue;
+    /** 最小值，默认 0 */
+    min?: number;
+    /** 最大值，默认 100 */
+    max?: number;
+    /** 数值的格式（百分比写 `{ style: 'percent' }`，配 max={1}） */
+    valueFormat?: NumericFormat;
+    /** 单位：数值后面带上 */
+    unit?: string;
+    /** 外圈的区间，按 to 从小到大；不写时外圈是一整段轨道色 */
+    bands?: readonly GaugeBand[];
+    /** 目标：外圈上画一道刻度，读屏念在数值后面 */
+    target?: number;
+    /** 数值弧的色调；不写时取它所在区间的色调，没有区间时 accent */
+    tone?: StatusTone;
+    /** 名称：显示在下方，也是 meter 的名称（没写 aria-label 时） */
+    label?: VNodeChild;
+    /** 中间显示的文字；不写时是格式化的数值 */
+    valueLabel?: VNodeChild;
+    /** 字号档位：仪表盘的大小随之缩放；不写时继承 */
+    size?: TextSize;
+    /** 中间数值的部件属性 */
+    propsValue?: PartProps<'span'>;
+    /** 名称的部件属性 */
+    propsLabel?: PartProps<'span'>;
+}
+/** Gauge 的样式 */
+export declare const gaugeStyles: Readonly<{
+    band: css.CompiledStyles;
+    center: css.CompiledStyles;
+    dial: css.CompiledStyles;
+    ends: css.CompiledStyles;
+    label: css.CompiledStyles;
+    root: css.CompiledStyles;
+    svg: css.CompiledStyles;
+    target: css.CompiledStyles;
+    track: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** 仪表盘：半圆刻度、分段区间、当前值与目标 */
+export declare const Gauge: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<GaugeProps>;

package/dist/display/Gauge.js

@@ -0,0 +1,215 @@
+import { clamp } from "../utils/data/number.js";
+import { toNumber } from "../utils/data/numeric.js";
+import { useLang } from "../config/context.js";
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { useFormat } from "../config/lang/format.js";
+import { 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";
+//#region src/display/Gauge.tsx
+/** 外圈的一段区间：从上一段的终点（第一段从 min）到 to */
+/** 角色与取值由组件管理 */
+/** 未声明的属性落到外层 div（role="meter"）上 */
+/** Gauge 的样式 */
+var gaugeStyles = css.create({
+	root: {
+		display: "inline-grid",
+		justifyItems: "center",
+		gap: "_xs",
+		width: "10em",
+		maxWidth: "100%"
+	},
+	dial: {
+		position: "relative",
+		width: "100%"
+	},
+	svg: {
+		display: "block",
+		width: "100%",
+		height: "auto",
+		overflow: "visible"
+	},
+	track: {
+		fill: "none",
+		stroke: "_fill",
+		strokeWidth: 14
+	},
+	value: {
+		fill: "none",
+		stroke: "var(--gauge-color)",
+		strokeWidth: 14,
+		forcedColorAdjust: {
+			default: null,
+			_forcedColors: "none"
+		}
+	},
+	band: {
+		fill: "none",
+		strokeWidth: 4
+	},
+	target: {
+		stroke: "_text",
+		strokeWidth: 2.5,
+		strokeLinecap: "round"
+	},
+	center: {
+		position: "absolute",
+		insetInline: 0,
+		bottom: 0,
+		textAlign: "center",
+		fontSize: "1.5em",
+		fontWeight: "_semibold",
+		fontVariantNumeric: "tabular-nums",
+		lineHeight: 1,
+		color: "_text"
+	},
+	ends: {
+		display: "flex",
+		justifyContent: "space-between",
+		width: "100%",
+		fontSize: "0.75em",
+		color: "_textMuted",
+		fontVariantNumeric: "tabular-nums"
+	},
+	label: {
+		fontSize: "_sm",
+		color: "_textMuted",
+		textAlign: "center"
+	}
+});
+/**
+* 色调的实色：数值弧（--gauge-color）与外圈的区间。弧与区间只是辅助，数值以文字给出（中间与读屏），
+* 所以用明亮的实色而不是够文字对比度的深色
+*/
+var gaugeToneStyles = css.create({
+	neutral: { "--gauge-color": "_colors.borderStrong" },
+	accent: { "--gauge-color": "_colors.accent" },
+	info: { "--gauge-color": "_colors.info" },
+	success: { "--gauge-color": "_colors.success" },
+	warning: { "--gauge-color": "_colors.warning" },
+	danger: { "--gauge-color": "_colors.danger" }
+});
+/** 外圈区间的颜色 */
+var bandColors = css.create({
+	neutral: { stroke: "_borderStrong" },
+	accent: { stroke: "_accent" },
+	info: { stroke: "_info" },
+	success: { stroke: "_success" },
+	warning: { stroke: "_warning" },
+	danger: { stroke: "_danger" }
+});
+var CENTER = 100;
+var RADIUS = 80;
+var BAND_RADIUS = 94;
+/** 比例 fraction（0–1）在半径 r 上的点 */
+function point(fraction, r) {
+	const angle = Math.PI * (1 - fraction);
+	return {
+		x: CENTER + r * Math.cos(angle),
+		y: CENTER - r * Math.sin(angle)
+	};
+}
+/** 从 from 到 to（比例）的弧 */
+function arc(from, to, r) {
+	const a = point(from, r);
+	const b = point(to, r);
+	return `M${a.x} ${a.y} A${r} ${r} 0 0 1 ${b.x} ${b.y}`;
+}
+/** 目标刻度：从数值弧的内沿穿过外圈 */
+function tick(fraction) {
+	const inner = point(fraction, 70);
+	const outer = point(fraction, 98);
+	return {
+		x1: inner.x,
+		y1: inner.y,
+		x2: outer.x,
+		y2: outer.y
+	};
+}
+/** 仪表盘：半圆刻度、分段区间、当前值与目标 */
+var Gauge = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = readonlyProp(_props, "value");
+	const min = readonlyProp(_props, "min", 0);
+	const max = readonlyProp(_props, "max", 100);
+	const valueFormat = readonlyProp(_props, "valueFormat");
+	const unit = readonlyProp(_props, "unit");
+	const bands = readonlyProp(_props, "bands");
+	const target = readonlyProp(_props, "target");
+	const tone = readonlyProp(_props, "tone");
+	const label = readonlyProp(_props, "label");
+	const valueLabel = readonlyProp(_props, "valueLabel");
+	const size = readonlyProp(_props, "size");
+	const propsValue = readonlyProp(_props, "propsValue");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const text = (number) => format.number(number, unit.value ? {
+		...valueFormat.value,
+		suffix: unit.value
+	} : valueFormat.value);
+	return () => {
+		const current = toNumber(value.value);
+		const fractionOf = (number) => clamp((number - min.value) / (max.value - min.value || 1), 0, 1);
+		const fraction = fractionOf(current);
+		const band = bands.value?.find((item) => current <= item.to) ?? bands.value?.at(-1);
+		const color = tone.value ?? band?.tone ?? "accent";
+		const spoken = text(value.value);
+		const name = typeof label.value === "string" ? label.value : void 0;
+		return createVNode("div", mergeAttrs({
+			sx: [
+				gaugeStyles.root,
+				size.value && fontSizeStyles[size.value],
+				gaugeToneStyles[color]
+			],
+			"aria-label": name
+		}, rest, {
+			role: "meter",
+			"aria-valuemin": min.value,
+			"aria-valuemax": max.value,
+			"aria-valuenow": clamp(current, min.value, max.value),
+			"aria-valuetext": target.value === void 0 ? spoken : `${spoken}，${lang.progressTarget(text(target.value))}`
+		}), [
+			createVNode("div", css.attrs(gaugeStyles.dial), [createVNode("svg", mergeProps(css.attrs(gaugeStyles.svg), {
+				"viewBox": "0 -4 200 108",
+				"aria-hidden": "true"
+			}), [
+				createVNode("path", mergeProps({ "d": arc(0, 1, RADIUS) }, css.attrs(gaugeStyles.track)), null),
+				fraction > 0 && createVNode("path", mergeProps({ "d": arc(0, fraction, RADIUS) }, css.attrs(gaugeStyles.value)), null),
+				(bands.value ?? []).map((item, position) => {
+					const from = fractionOf(position === 0 ? min.value : bands.value[position - 1].to);
+					const to = fractionOf(item.to);
+					return to > from ? createVNode("path", mergeProps({
+						"key": position,
+						"d": arc(from, to, BAND_RADIUS)
+					}, css.attrs(gaugeStyles.band, css.select(() => bandColors[item.tone]))), null) : null;
+				}),
+				target.value !== void 0 && createVNode("line", mergeProps(tick(fractionOf(target.value)), css.attrs(gaugeStyles.target)), null)
+			]), createVNode("span", mergeAttrs({ sx: gaugeStyles.center }, propsValue.value, { "aria-hidden": true }), [valueLabel.value ?? spoken])]),
+			createVNode("div", mergeProps(css.attrs(gaugeStyles.ends), { "aria-hidden": "true" }), [createVNode("span", null, [format.number(min.value, valueFormat.value)]), createVNode("span", null, [format.number(max.value, valueFormat.value)])]),
+			hasContent(label.value) && createVNode("span", mergeAttrs({ sx: gaugeStyles.label }, propsLabel.value), [label.value])
+		]);
+	};
+}, {
+	name: "Gauge",
+	props: [
+		"value",
+		"min",
+		"max",
+		"valueFormat",
+		"unit",
+		"bands",
+		"target",
+		"tone",
+		"label",
+		"valueLabel",
+		"size",
+		"propsValue",
+		"propsLabel"
+	]
+});
+//#endregion
+export { Gauge, gaugeStyles };
+
+//# sourceMappingURL=Gauge.js.map

package/dist/display/Gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gauge.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Gauge.tsx"],"sourcesContent":["/**\n * 仪表盘（role=\"meter\"）：半圆的刻度上显示一个量落在哪个区间——完成率、利用率、风险分。外圈是分段的区间\n * （危险、提醒、良好），里面的弧是当前值（颜色取它所在区间的色调），中间是数值，下面是名称。\n *\n *   <Gauge value={0.82} max={1} valueFormat={{ style: 'percent' }} label=\"销售完成率\"\n *     bands={[{ to: 0.6, tone: 'danger' }, { to: 0.9, tone: 'warning' }, { to: 1, tone: 'success' }]} target={0.9} />\n *\n * 和 Progress 的分工：Progress 是做到哪了（上传、步骤）；Gauge 是一个量处在好坏的哪一段（有区间、有目标）。\n * 纯 SVG，大小随字号缩放（宽 10em）。读屏按 meter 念：数值（按 valueFormat 与单位格式化）与目标。\n *\n * 部件：Root（div，role=\"meter\"）、Value（中间的数值）、Label（名称）。\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 { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { clamp } from '../utils/data/number';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 外圈的一段区间：从上一段的终点（第一段从 min）到 to */\nexport interface GaugeBand {\n  /** 终点 */\n  to: number;\n  /** 色调：落在这一段时数值弧也用它 */\n  tone: StatusTone;\n}\n\n/** 角色与取值由组件管理 */\nexport type GaugeManaged =\n  'role' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext';\n\n/** 未声明的属性落到外层 div（role=\"meter\"）上 */\nexport interface GaugeProps extends PartProps<'div', GaugeManaged> {\n  /** 当前值 */\n  value: NumericValue;\n  /** 最小值，默认 0 */\n  min?: number;\n  /** 最大值，默认 100 */\n  max?: number;\n  /** 数值的格式（百分比写 `{ style: 'percent' }`，配 max={1}） */\n  valueFormat?: NumericFormat;\n  /** 单位：数值后面带上 */\n  unit?: string;\n  /** 外圈的区间，按 to 从小到大；不写时外圈是一整段轨道色 */\n  bands?: readonly GaugeBand[];\n  /** 目标：外圈上画一道刻度，读屏念在数值后面 */\n  target?: number;\n  /** 数值弧的色调；不写时取它所在区间的色调，没有区间时 accent */\n  tone?: StatusTone;\n  /** 名称：显示在下方，也是 meter 的名称（没写 aria-label 时） */\n  label?: VNodeChild;\n  /** 中间显示的文字；不写时是格式化的数值 */\n  valueLabel?: VNodeChild;\n  /** 字号档位：仪表盘的大小随之缩放；不写时继承 */\n  size?: TextSize;\n  /** 中间数值的部件属性 */\n  propsValue?: PartProps<'span'>;\n  /** 名称的部件属性 */\n  propsLabel?: PartProps<'span'>;\n}\n\n/** Gauge 的样式 */\nexport const gaugeStyles = css.create({\n  root: {\n    display: 'inline-grid',\n    justifyItems: 'center',\n    gap: '_xs',\n    width: '10em',\n    maxWidth: '100%',\n  },\n  dial: { position: 'relative', width: '100%' },\n  svg: { display: 'block', width: '100%', height: 'auto', overflow: 'visible' },\n  track: { fill: 'none', stroke: '_fill', strokeWidth: 14 },\n  value: {\n    fill: 'none',\n    stroke: 'var(--gauge-color)',\n    strokeWidth: 14,\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n  band: { fill: 'none', strokeWidth: 4 },\n  target: { stroke: '_text', strokeWidth: 2.5, strokeLinecap: 'round' },\n  // 中间的数值：压在半圆的底边上\n  center: {\n    position: 'absolute',\n    insetInline: 0,\n    bottom: 0,\n    textAlign: 'center',\n    fontSize: '1.5em',\n    fontWeight: '_semibold',\n    fontVariantNumeric: 'tabular-nums',\n    lineHeight: 1,\n    color: '_text',\n  },\n  ends: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n    fontSize: '0.75em',\n    color: '_textMuted',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  label: { fontSize: '_sm', color: '_textMuted', textAlign: 'center' },\n});\n\n/**\n * 色调的实色：数值弧（--gauge-color）与外圈的区间。弧与区间只是辅助，数值以文字给出（中间与读屏），\n * 所以用明亮的实色而不是够文字对比度的深色\n */\nconst gaugeToneStyles = css.create({\n  neutral: { '--gauge-color': '_colors.borderStrong' },\n  accent: { '--gauge-color': '_colors.accent' },\n  info: { '--gauge-color': '_colors.info' },\n  success: { '--gauge-color': '_colors.success' },\n  warning: { '--gauge-color': '_colors.warning' },\n  danger: { '--gauge-color': '_colors.danger' },\n});\n\n/** 外圈区间的颜色 */\nconst bandColors = css.create({\n  neutral: { stroke: '_borderStrong' },\n  accent: { stroke: '_accent' },\n  info: { stroke: '_info' },\n  success: { stroke: '_success' },\n  warning: { stroke: '_warning' },\n  danger: { stroke: '_danger' },\n});\n\n// 半圆：圆心 (100, 100)，从左（180°）经上方到右（0°）\nconst CENTER = 100;\nconst RADIUS = 80;\nconst BAND_RADIUS = 94;\n\n/** 比例 fraction（0–1）在半径 r 上的点 */\nfunction point(fraction: number, r: number) {\n  const angle = Math.PI * (1 - fraction);\n  return { x: CENTER + r * Math.cos(angle), y: CENTER - r * Math.sin(angle) };\n}\n\n/** 从 from 到 to（比例）的弧 */\nfunction arc(from: number, to: number, r: number) {\n  const a = point(from, r);\n  const b = point(to, r);\n  return `M${a.x} ${a.y} A${r} ${r} 0 0 1 ${b.x} ${b.y}`;\n}\n\n/** 目标刻度：从数值弧的内沿穿过外圈 */\nfunction tick(fraction: number) {\n  const inner = point(fraction, RADIUS - 10);\n  const outer = point(fraction, BAND_RADIUS + 4);\n  return { x1: inner.x, y1: inner.y, x2: outer.x, y2: outer.y };\n}\n\n/** 仪表盘：半圆刻度、分段区间、当前值与目标 */\nexport const Gauge = _component(\n  ({\n    value,\n    min = 0,\n    max = 100,\n    valueFormat,\n    unit,\n    bands,\n    target,\n    tone,\n    label,\n    valueLabel,\n    size,\n    propsValue,\n    propsLabel,\n    ...rest\n  }: GaugeProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const text = (number: NumericValue) =>\n      format.number(number, unit ? { ...valueFormat, suffix: unit } : valueFormat);\n    return () => {\n      const current = toNumber(value);\n      const fractionOf = (number: number) => clamp((number - min) / (max - min || 1), 0, 1);\n      const fraction = fractionOf(current);\n      const band = bands?.find((item) => current <= item.to) ?? bands?.at(-1);\n      const color = tone ?? band?.tone ?? 'accent';\n      const spoken = text(value);\n      const name = typeof label === 'string' ? label : undefined;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [gaugeStyles.root, size && fontSizeStyles[size], gaugeToneStyles[color]],\n              'aria-label': name,\n            },\n            rest,\n            {\n              role: 'meter',\n              'aria-valuemin': min,\n              'aria-valuemax': max,\n              'aria-valuenow': clamp(current, min, max),\n              'aria-valuetext':\n                target === undefined ? spoken : `${spoken}，${lang.progressTarget(text(target))}`,\n            },\n          )}\n        >\n          <div {...css.attrs(gaugeStyles.dial)}>\n            <svg {...css.attrs(gaugeStyles.svg)} viewBox=\"0 -4 200 108\" aria-hidden=\"true\">\n              <path d={arc(0, 1, RADIUS)} {...css.attrs(gaugeStyles.track)} />\n              {fraction > 0 && (\n                <path d={arc(0, fraction, RADIUS)} {...css.attrs(gaugeStyles.value)} />\n              )}\n              {(bands ?? []).map((item, position) => {\n                const from = fractionOf(position === 0 ? min : bands![position - 1]!.to);\n                const to = fractionOf(item.to);\n                return to > from ? (\n                  <path\n                    key={position}\n                    d={arc(from, to, BAND_RADIUS)}\n                    {...css.attrs(gaugeStyles.band, bandColors[item.tone])}\n                  />\n                ) : null;\n              })}\n              {target !== undefined && (\n                <line {...tick(fractionOf(target))} {...css.attrs(gaugeStyles.target)} />\n              )}\n            </svg>\n            <span\n              {...mergeAttrs<'span'>({ sx: gaugeStyles.center }, propsValue, {\n                'aria-hidden': true,\n              })}\n            >\n              {valueLabel ?? spoken}\n            </span>\n          </div>\n          <div {...css.attrs(gaugeStyles.ends)} aria-hidden=\"true\">\n            <span>{format.number(min, valueFormat)}</span>\n            <span>{format.number(max, valueFormat)}</span>\n          </div>\n          {hasContent(label) && (\n            <span {...mergeAttrs<'span'>({ sx: gaugeStyles.label }, propsLabel)}>{label}</span>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Image.d.ts

@@ -0,0 +1,87 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type LightboxProps } from '../overlay/Lightbox';
+import { type PartProps } from '../utils/props';
+import { type Radius } from '../utils/style/styles';
+/** object-fit 的取值 */
+export interface ImageFits {
+    /** 铺满、裁掉多余（默认）：缩略图、头像 */
+    cover: unknown;
+    /** 整张放进去、留白：商品图、图纸 */
+    contain: unknown;
+    /** 拉伸铺满 */
+    fill: unknown;
+    /** 原大，超出的裁掉 */
+    none: unknown;
+    /** 比框大时同 contain，否则原大 */
+    'scale-down': unknown;
+}
+/** 预览的选项 */
+export interface ImagePreviewOptions {
+    /** 大图的地址；不写时用 src */
+    src?: string;
+    /** 大图下方的说明 */
+    caption?: VNodeChild;
+    /** 下载的文件名；false 不显示下载按钮 */
+    download?: string | false;
+}
+/** 未声明的属性落到 img 上；外层用 propsRoot */
+export interface ImageProps extends PartProps<'img', 'src' | 'alt' | 'width' | 'height'> {
+    /** 图片地址 */
+    src: string;
+    /** 图片的说明：读屏念它，加载失败时也显示 */
+    alt: string;
+    /** 宽度：数字是 px，也可以写 CSS 长度；不写时按图片 */
+    width?: number | string;
+    /** 高度：数字是 px，也可以写 CSS 长度 */
+    height?: number | string;
+    /** 图片在框里怎么放，默认 cover */
+    fit?: keyof ImageFits;
+    /** 圆角档位，默认 md */
+    radius?: Radius;
+    /** 点击看大图：true 或预览的选项（大图地址、说明、下载） */
+    preview?: boolean | ImagePreviewOptions;
+    /** 加载失败时显示的内容；默认是图标与 alt */
+    fallback?: VNodeChild;
+    /** 外层（span，可以预览时是 button）的部件属性 */
+    propsRoot?: PartProps<'span'>;
+    /** 加载失败的占位的部件属性 */
+    propsFallback?: PartProps<'span'>;
+}
+/** Image 的样式：root、button、image、hidden、fallback */
+export declare const imageStyles: Readonly<{
+    button: css.CompiledStyles;
+    fallback: css.CompiledStyles;
+    hidden: css.CompiledStyles;
+    image: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** Image 的 object-fit：cover、contain、fill、none、scale-down */
+export declare const imageFitStyles: Readonly<{
+    contain: css.CompiledStyles;
+    cover: css.CompiledStyles;
+    fill: css.CompiledStyles;
+    none: css.CompiledStyles;
+    "scale-down": css.CompiledStyles;
+}>;
+/** Image 的动态样式：尺寸 */
+export declare const imageDynamicStyles: Readonly<{
+    readonly size: (width: string, height: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 图片：懒加载、加载中占位、失败占位，可以点开看大图 */
+export declare const Image: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ImageProps>;
+/** 未声明的属性落到外层 div 上 */
+export interface ImageGroupProps extends PartProps<'div'> {
+    /** 到头之后从另一头继续，默认 false */
+    loop?: boolean;
+    /** 预览（Lightbox）的部件属性 */
+    propsLightbox?: Partial<LightboxProps>;
+    /** 里面的 Image（也可以夹着别的内容） */
+    children?: VNodeChild;
+}
+/** ImageGroup 的样式：root */
+export declare const imageGroupStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** 一组图片：共用一个预览，大图里左右切换 */
+export declare const ImageGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ImageGroupProps>;

package/dist/display/Image.js

@@ -0,0 +1,212 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { focusRingStyles, radiusStyles } from "../utils/style/styles.js";
+import { Icon } from "../base/Icon.js";
+import { shimmerStyles } from "../utils/style/shimmer.js";
+import { Lightbox } from "../overlay/Lightbox.js";
+import { Fragment, createVNode, mergeProps, ref, shallowRef, watch } from "vue";
+import { _component, childrenProp, createContext, effect, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ImageOff } from "@lucide/icons";
+//#region src/display/Image.tsx
+/**
+* 图片：懒加载，加载时是扫光的占位，加载失败显示占位与原因；写了 preview 时点击（或 Enter）看大图（Lightbox）。
+* 同一个 ImageGroup 里的图片共用一个 Lightbox，大图里可以左右切换（相册、工单附件、验收照片）。
+*
+*   <Image src="/photos/1-thumb.jpg" alt="支架正面" width={160} height={120} preview={{ src: '/photos/1.jpg' }} />
+*   <ImageGroup>
+*     {photos.map((photo) => <Image src={photo.thumb} alt={photo.title} preview={{ src: photo.url }} />)}
+*   </ImageGroup>
+*
+* 可以预览的图片是按钮：名称“查看大图：alt”，键盘能到。尺寸写 width、height（数字是 px），object-fit 用 fit。
+* 部件：Root（span，可以预览时是 button）、Image（img）、Fallback（span）。
+*/
+/** object-fit 的取值 */
+/** 预览的选项 */
+/** 未声明的属性落到 img 上；外层用 propsRoot */
+/** Image 的样式：root、button、image、hidden、fallback */
+var imageStyles = css.create({
+	root: {
+		position: "relative",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		overflow: "hidden",
+		verticalAlign: "middle",
+		backgroundColor: "_fill",
+		color: "_textMuted"
+	},
+	button: {
+		padding: 0,
+		borderWidth: 0,
+		font: "inherit",
+		cursor: "zoom-in"
+	},
+	image: {
+		display: "block",
+		width: "100%",
+		height: "100%"
+	},
+	hidden: { opacity: 0 },
+	fallback: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "_xs",
+		padding: "_sm",
+		fontSize: "_xs",
+		textAlign: "center"
+	}
+});
+/** Image 的 object-fit：cover、contain、fill、none、scale-down */
+var imageFitStyles = css.create({
+	cover: { objectFit: "cover" },
+	contain: { objectFit: "contain" },
+	fill: { objectFit: "fill" },
+	none: { objectFit: "none" },
+	"scale-down": { objectFit: "scale-down" }
+});
+/** Image 的动态样式：尺寸 */
+var imageDynamicStyles = css.create({ size: (width, height) => ({
+	width,
+	height
+}) });
+/** ImageGroup 交给里面的 Image 的：登记自己、打开预览 */
+var ImageGroupContext = createContext("ImageGroup");
+var toLength = (value) => value == null ? "auto" : typeof value === "number" ? `${value}px` : value;
+/** 图片：懒加载、加载中占位、失败占位，可以点开看大图 */
+var Image = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const src = readonlyProp(_props, "src");
+	const alt = readonlyProp(_props, "alt");
+	const width = readonlyProp(_props, "width");
+	const height = readonlyProp(_props, "height");
+	const fit = readonlyProp(_props, "fit", "cover");
+	const radius = readonlyProp(_props, "radius", "md");
+	const preview = readonlyProp(_props, "preview", false);
+	const fallback = readonlyProp(_props, "fallback");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsFallback = readonlyProp(_props, "propsFallback");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const group = ImageGroupContext.inject(null);
+	let status = ref("loading");
+	let viewing = ref(false);
+	const options = () => typeof preview.value === "object" ? preview.value : {};
+	const item = () => ({
+		src: options().src ?? src.value,
+		alt: alt.value,
+		caption: options().caption,
+		download: options().download
+	});
+	const membership = untrack(() => preview.value) && group ? group.register(item) : void 0;
+	if (membership) effect(() => membership.release);
+	watch(() => src.value, () => status.value = "loading");
+	function open() {
+		if (membership) group.open(membership.index());
+		else viewing.value = true;
+	}
+	return () => {
+		const sx = [
+			imageStyles.root,
+			radiusStyles[radius.value],
+			imageDynamicStyles.size(toLength(width.value), toLength(height.value)),
+			status.value === "loading" && shimmerStyles.wave
+		];
+		const content = createVNode(Fragment, null, [status.value !== "error" && createVNode("img", mergeAttrs({
+			sx: [
+				imageStyles.image,
+				imageFitStyles[fit.value],
+				status.value === "loading" && imageStyles.hidden,
+				status.value === "loaded" && shimmerStyles.reveal
+			],
+			loading: "lazy",
+			decoding: "async"
+		}, rest, {
+			src: src.value,
+			alt: alt.value,
+			onLoad: () => status.value = "loaded",
+			onError: () => status.value = "error"
+		}), null), status.value === "error" && createVNode("span", mergeProps(mergeAttrs({ sx: imageStyles.fallback }, propsFallback.value, {
+			role: "img",
+			"aria-label": alt.value
+		}), { "aria-description": lang.imageError }), [fallback.value ?? createVNode(Fragment, null, [createVNode(Icon, { "icon": ImageOff }, null), createVNode("span", { "aria-hidden": "true" }, [alt.value])])])]);
+		if (!preview.value || status.value === "error") return createVNode("span", mergeAttrs({ sx }, propsRoot.value), [content]);
+		return createVNode(Fragment, null, [createVNode("button", mergeAttrs({ sx: [
+			...sx,
+			imageStyles.button,
+			focusRingStyles.visible
+		] }, propsRoot.value, {
+			type: "button",
+			"aria-label": lang.imagePreview(alt.value),
+			onClick: open
+		}), [content]), !membership && createVNode(Lightbox, {
+			"items": [item()],
+			"_open": viewing.value,
+			"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => viewing.value = $event)
+		}, null)]);
+	};
+}, {
+	name: "Image",
+	props: [
+		"src",
+		"alt",
+		"width",
+		"height",
+		"fit",
+		"radius",
+		"preview",
+		"fallback",
+		"propsRoot",
+		"propsFallback"
+	]
+});
+/** 未声明的属性落到外层 div 上 */
+/** ImageGroup 的样式：root */
+var imageGroupStyles = css.create({ root: {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: "_sm"
+} });
+/** 一组图片：共用一个预览，大图里左右切换 */
+var ImageGroup = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const _cache2 = [];
+	const loop = readonlyProp(_props2, "loop", false);
+	const propsLightbox = readonlyProp(_props2, "propsLightbox");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	let entries = [];
+	let items = shallowRef([]);
+	let open = ref(false);
+	let index = ref(0);
+	ImageGroupContext.provide({
+		register(read) {
+			const entry = { read };
+			entries = [...entries, entry];
+			return {
+				index: () => entries.indexOf(entry),
+				release: () => entries = entries.filter((item) => item !== entry)
+			};
+		},
+		open(at) {
+			items.value = entries.map((entry) => entry.read());
+			index.value = at;
+			open.value = true;
+		}
+	});
+	return () => createVNode("div", mergeAttrs({ sx: imageGroupStyles.root }, rest), [children.value, createVNode(Lightbox, mergeProps(mergePartProps({ loop: loop.value }, propsLightbox.value), {
+		"items": items.value,
+		"_open": open.value,
+		"onUpdate:_open": _cache2[0] || (_cache2[0] = ($event) => open.value = $event),
+		"_index": index.value,
+		"onUpdate:_index": _cache2[1] || (_cache2[1] = ($event) => index.value = $event)
+	}), null)]);
+}, {
+	name: "ImageGroup",
+	props: ["loop", "propsLightbox"]
+});
+//#endregion
+export { Image, ImageGroup, imageDynamicStyles, imageFitStyles, imageGroupStyles, imageStyles };
+
+//# sourceMappingURL=Image.js.map