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

package/dist/display/Sparkline.js

@@ -0,0 +1,130 @@
+import { toNumber } from "../utils/data/numeric.js";
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { toneFillStyles } from "../utils/style/tone-styles.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/Sparkline.tsx
+/** 迷你图的画法 */
+/** 角色与名称由组件给出（role="img"，名称是 label 加上数据的概括） */
+/** 未声明的属性落到外层 span 上 */
+/** Sparkline 的样式 */
+var sparklineStyles = css.create({
+	root: {
+		position: "relative",
+		display: "block",
+		width: "100%"
+	},
+	svg: {
+		display: "block",
+		width: "100%",
+		height: "100%",
+		overflow: "visible"
+	},
+	line: {
+		fill: "none",
+		stroke: "var(--tone-fill)",
+		strokeWidth: 1.5,
+		strokeLinejoin: "round",
+		strokeLinecap: "round"
+	},
+	area: {
+		fill: "var(--tone-fill)",
+		fillOpacity: .15,
+		stroke: "none"
+	},
+	bar: {
+		fill: "var(--tone-fill)",
+		fillOpacity: .85
+	},
+	last: {
+		position: "absolute",
+		width: "6px",
+		height: "6px",
+		borderRadius: "_full",
+		backgroundColor: "var(--tone-fill)",
+		boxShadow: `0 0 0 2px ${t.colors.surface}`,
+		transform: "translate(-50%, -50%)",
+		pointerEvents: "none"
+	},
+	height: (height) => ({ height }),
+	position: (left, top) => ({
+		left,
+		top
+	})
+});
+/** 迷你图：小折线、面积或柱 */
+var Sparkline = /*#__PURE__*/ _component((_props, _ctx) => {
+	const data = readonlyProp(_props, "data");
+	const variant = readonlyProp(_props, "variant", "line");
+	const tone = readonlyProp(_props, "tone", "accent");
+	const height = readonlyProp(_props, "height", "2em");
+	const showLast = readonlyProp(_props, "showLast", true);
+	const domain = readonlyProp(_props, "domain");
+	const valueFormat = readonlyProp(_props, "valueFormat");
+	const label = readonlyProp(_props, "label");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	return () => {
+		const values = data.value.map((value) => value == null ? void 0 : toNumber(value));
+		const present = values.filter((value) => value !== void 0);
+		const bars = variant.value === "bar";
+		const low = domain.value?.[0] ?? Math.min(...present, ...bars ? [0] : []);
+		const span = (domain.value?.[1] ?? Math.max(...present, ...bars ? [0] : [])) - low || 1;
+		const yOf = (value) => 100 - (value - low) / span * 100;
+		const width = bars ? values.length : Math.max(values.length - 1, 1);
+		const segments = [];
+		let current = [];
+		values.forEach((value, position) => {
+			if (value === void 0) {
+				if (current.length) segments.push(current);
+				current = [];
+			} else current.push([position, yOf(value)]);
+		});
+		if (current.length) segments.push(current);
+		const path = (points) => points.map(([x, y], i) => `${i ? "L" : "M"}${x} ${y}`).join(" ");
+		const lastIndex = values.findLastIndex((value) => value !== void 0);
+		const summary = present.length === 0 ? lang.emptyValue : lang.sparklineSummary(present.length, format.number(data.value[values.findIndex((value) => value !== void 0)], valueFormat.value), format.number(data.value[lastIndex], valueFormat.value), format.number(Math.min(...present), valueFormat.value), format.number(Math.max(...present), valueFormat.value));
+		return createVNode("span", mergeAttrs({ sx: [
+			sparklineStyles.root,
+			css.bind(sparklineStyles.height, () => [height.value], true),
+			toneFillStyles[tone.value]
+		] }, rest, {
+			role: "img",
+			"aria-label": label.value ? `${label.value}：${summary}` : summary
+		}), [createVNode("svg", mergeProps(css.attrs(sparklineStyles.svg), {
+			"viewBox": `0 0 ${width} 100`,
+			"preserveAspectRatio": "none",
+			"aria-hidden": "true"
+		}), [bars ? values.map((value, position) => value === void 0 ? null : createVNode("rect", mergeProps({
+			"key": position,
+			"x": position + .15,
+			"width": .7,
+			"y": Math.min(yOf(value), yOf(Math.max(low, 0))),
+			"height": Math.abs(yOf(value) - yOf(Math.max(low, 0)))
+		}, css.attrs(sparklineStyles.bar)), null)) : segments.map((points, position) => createVNode("g", { "key": position }, [variant.value === "area" && points.length > 1 && createVNode("path", mergeProps({ "d": `${path(points)} L${points.at(-1)[0]} 100 L${points[0][0]} 100 Z` }, css.attrs(sparklineStyles.area)), null), createVNode("path", mergeProps({
+			"d": path(points),
+			"vector-effect": "non-scaling-stroke"
+		}, css.attrs(sparklineStyles.line)), null)]))]), showLast.value && !bars && lastIndex >= 0 && createVNode("span", mergeProps({ "aria-hidden": "true" }, css.attrs(sparklineStyles.last, css.bind(sparklineStyles.position, () => [`${lastIndex / width * 100}%`, `${yOf(values[lastIndex])}%`]))), null)]);
+	};
+}, {
+	name: "Sparkline",
+	props: [
+		"data",
+		"variant",
+		"tone",
+		"height",
+		"showLast",
+		"domain",
+		"valueFormat",
+		"label"
+	]
+});
+//#endregion
+export { Sparkline, sparklineStyles };
+
+//# sourceMappingURL=Sparkline.js.map

package/dist/display/Sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Sparkline.tsx"],"sourcesContent":["/**\n * 迷你图：没有坐标轴的小折线、面积或柱，嵌在指标卡（Stat 的 children）、表格的格子、列表的一行里看走势。\n * 纯 SVG，不依赖图表库；宽度占满容器，高度默认 2em（随字号缩放）。\n *\n *   <Stat label=\"实际销售\" value={910.36} unit=\"万元\">\n *     <Sparkline data={monthly} variant=\"area\" label=\"近 12 个月\" />\n *   </Stat>\n *   <Sparkline data={[3, 5, null, 4, 8]} variant=\"bar\" tone=\"success\" />\n *\n * 空值（null、undefined）处断开（柱是空位）；默认标出最后一个点。读屏念成一句话：几个值、从哪到哪、最低最高\n * （按 valueFormat 与当前语言格式化），label 写在前面。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { toneFillStyles, type StatusTone } from '../utils/style/tone-styles';\nimport { t } from '../config/theme/tokens';\n\n/** 迷你图的画法 */\nexport interface SparklineVariants {\n  /** 折线（默认） */\n  line: unknown;\n  /** 折线下面填一层浅色 */\n  area: unknown;\n  /** 柱：每个值一根，从 0 起 */\n  bar: unknown;\n}\n\n/** 角色与名称由组件给出（role=\"img\"，名称是 label 加上数据的概括） */\nexport type SparklineManaged = 'role' | 'aria-label';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface SparklineProps extends PartProps<'span', SparklineManaged> {\n  /** 各个值，按时间先后；空值处断开 */\n  data: readonly (NumericValue | null | undefined)[];\n  /** 画法，默认 line */\n  variant?: keyof SparklineVariants;\n  /** 色调，默认 accent */\n  tone?: StatusTone;\n  /** 高度（CSS 长度），默认 2em */\n  height?: string;\n  /** 标出最后一个点（折线、面积），默认 true */\n  showLast?: boolean;\n  /** 纵向范围 [最小, 最大]；不写的一端按数据取（柱从 0 起） */\n  domain?: readonly [number | undefined, number | undefined];\n  /** 读屏念的数值格式 */\n  valueFormat?: NumericFormat;\n  /** 名称：读屏先念它（“近 12 个月实际销售”） */\n  label?: string;\n}\n\n/** Sparkline 的样式 */\nexport const sparklineStyles = css.create({\n  root: { position: 'relative', display: 'block', width: '100%' },\n  svg: { display: 'block', width: '100%', height: '100%', overflow: 'visible' },\n  line: {\n    fill: 'none',\n    stroke: 'var(--tone-fill)',\n    strokeWidth: 1.5,\n    strokeLinejoin: 'round',\n    strokeLinecap: 'round',\n  },\n  area: { fill: 'var(--tone-fill)', fillOpacity: 0.15, stroke: 'none' },\n  bar: { fill: 'var(--tone-fill)', fillOpacity: 0.85 },\n  // 最后一个点：HTML 圆点按百分比定位（SVG 拉伸时圆不变形）\n  last: {\n    position: 'absolute',\n    width: '6px',\n    height: '6px',\n    borderRadius: '_full',\n    backgroundColor: 'var(--tone-fill)',\n    // 一圈表面色把点与线分开\n    boxShadow: `0 0 0 2px ${t.colors.surface}`,\n    transform: 'translate(-50%, -50%)',\n    pointerEvents: 'none',\n  },\n  height: (height: string) => ({ height }),\n  position: (left: string, top: string) => ({ left, top }),\n});\n\n/** 迷你图：小折线、面积或柱 */\nexport const Sparkline = _component(\n  ({\n    data,\n    variant = 'line',\n    tone = 'accent',\n    height = '2em',\n    showLast = true,\n    domain,\n    valueFormat,\n    label,\n    ...rest\n  }: SparklineProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    return () => {\n      const values = data.map((value) => (value == null ? undefined : toNumber(value)));\n      const present = values.filter((value): value is number => value !== undefined);\n      const bars = variant === 'bar';\n      const low = domain?.[0] ?? Math.min(...present, ...(bars ? [0] : []));\n      const high = domain?.[1] ?? Math.max(...present, ...(bars ? [0] : []));\n      const span = high - low || 1;\n      // 纵坐标 0（上）–100（下）；横坐标按位置，柱每个占 1 格\n      const yOf = (value: number) => 100 - ((value - low) / span) * 100;\n      const width = bars ? values.length : Math.max(values.length - 1, 1);\n\n      // 连续的段：空值处断开\n      const segments: [number, number][][] = [];\n      let current: [number, number][] = [];\n      values.forEach((value, position) => {\n        if (value === undefined) {\n          if (current.length) segments.push(current);\n          current = [];\n        } else current.push([position, yOf(value)]);\n      });\n      if (current.length) segments.push(current);\n      const path = (points: [number, number][]) =>\n        points.map(([x, y], i) => `${i ? 'L' : 'M'}${x} ${y}`).join(' ');\n\n      const lastIndex = values.findLastIndex((value) => value !== undefined);\n      const summary =\n        present.length === 0\n          ? lang.emptyValue\n          : lang.sparklineSummary(\n              present.length,\n              format.number(data[values.findIndex((value) => value !== undefined)]!, valueFormat),\n              format.number(data[lastIndex]!, valueFormat),\n              format.number(Math.min(...present), valueFormat),\n              format.number(Math.max(...present), valueFormat),\n            );\n\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [sparklineStyles.root, sparklineStyles.height(height), toneFillStyles[tone]] },\n            rest,\n            { role: 'img', 'aria-label': label ? `${label}：${summary}` : summary },\n          )}\n        >\n          <svg\n            {...css.attrs(sparklineStyles.svg)}\n            viewBox={`0 0 ${width} 100`}\n            preserveAspectRatio=\"none\"\n            aria-hidden=\"true\"\n          >\n            {bars\n              ? values.map((value, position) =>\n                  value === undefined ? null : (\n                    <rect\n                      key={position}\n                      x={position + 0.15}\n                      width={0.7}\n                      y={Math.min(yOf(value), yOf(Math.max(low, 0)))}\n                      height={Math.abs(yOf(value) - yOf(Math.max(low, 0)))}\n                      {...css.attrs(sparklineStyles.bar)}\n                    />\n                  ),\n                )\n              : segments.map((points, position) => (\n                  <g key={position}>\n                    {variant === 'area' && points.length > 1 && (\n                      <path\n                        d={`${path(points)} L${points.at(-1)![0]} 100 L${points[0]![0]} 100 Z`}\n                        {...css.attrs(sparklineStyles.area)}\n                      />\n                    )}\n                    <path\n                      d={path(points)}\n                      vector-effect=\"non-scaling-stroke\"\n                      {...css.attrs(sparklineStyles.line)}\n                    />\n                  </g>\n                ))}\n          </svg>\n          {showLast && !bars && lastIndex >= 0 && (\n            <span\n              aria-hidden=\"true\"\n              {...css.attrs(\n                sparklineStyles.last,\n                sparklineStyles.position(\n                  `${(lastIndex / width) * 100}%`,\n                  `${yOf(values[lastIndex]!)}%`,\n                ),\n              )}\n            />\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Stat.d.ts

@@ -0,0 +1,105 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconData } from '../base/Icon';
+import type { NumericFormat } from '../config/lang/format';
+import { type PartProps } from '../utils/props';
+import { type Tone } from '../utils/style/typography';
+import type { NumericValue } from '../utils/data/numeric';
+/** 忙碌由组件按 loading 管理 */
+export type StatManaged = 'aria-busy';
+/** 未声明的属性落到外层 dl 上 */
+export interface StatProps extends PartProps<'dl', StatManaged> {
+    /** 指标名 */
+    label: VNodeChild;
+    /** 数值：number、bigint、Decimal 按当前语言格式化并在变化时滚动；字符串原样显示（如“—”、“98.5%”） */
+    value: NumericValue | string;
+    /**
+     * 数值的格式，如两位小数 `{ minimumFractionDigits: 2 }`、百分比 `{ style: 'percent' }`；
+     * 值以元给出、按万元显示时写 `{ scale: 10_000, maximumFractionDigits: 2 }` 并配 `unit="万元"`
+     */
+    format?: NumericFormat;
+    /** 单位，跟在数值后面、字号小一档 */
+    unit?: VNodeChild;
+    /** 数值的色调：超时、缺漏这类要引起注意的数用 danger、warning；不写时是正文色 */
+    tone?: Tone;
+    /** 指标名前面的图标（装饰，对读屏隐藏） */
+    icon?: IconData;
+    /** 变化量（环比、同比）：正数向上、负数向下；默认按百分比显示（0.12 → +12%） */
+    change?: number;
+    /** 变化量的格式，默认 `{ style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' }` */
+    changeFormat?: NumericFormat;
+    /** 变化量后面的说明，如“较上月” */
+    changeLabel?: VNodeChild;
+    /** 下降是好事（成本、耗时、故障数）：下降显示成功色、上升显示危险色 */
+    invertChange?: boolean;
+    /** 数值下面的补充说明（一行小字） */
+    description?: VNodeChild;
+    /** 底栏：上方一条分隔线；放两项时分别靠两端，如“年度目标 2,000 万元”与“完成 81%” */
+    footer?: VNodeChild;
+    /** 数值下面占满整宽的补充内容：进度条、迷你图 */
+    children?: VNodeChild;
+    /**
+     * 加载中：数值与变化量换成扫光的骨架，带 aria-busy；很快完成时不闪
+     * @default false
+     */
+    loading?: boolean;
+    /** 指标名（dt）的部件属性 */
+    propsLabel?: PartProps<'dt'>;
+    /** 数值（dd）的部件属性 */
+    propsValue?: PartProps<'dd'>;
+    /** 图标外层的部件属性 */
+    propsIcon?: PartProps<'span', 'aria-hidden'>;
+    /** 数字本身（AnimatedNumber 或字符串值的 span）的部件属性 */
+    propsNumber?: PartProps<'span', 'prefix'>;
+    /** 单位的部件属性 */
+    propsUnit?: PartProps<'span'>;
+    /** 变化（dd）的部件属性 */
+    propsChange?: PartProps<'dd'>;
+    /** 变化后面的说明的部件属性 */
+    propsChangeLabel?: PartProps<'span'>;
+    /** 补充说明（dd）的部件属性 */
+    propsDescription?: PartProps<'dd'>;
+    /** 补充内容（dd，children 的外层）的部件属性 */
+    propsBody?: PartProps<'dd'>;
+    /** 底栏（dd）的部件属性 */
+    propsFooter?: PartProps<'dd'>;
+}
+/** Stat 的样式：root、label、icon、value、number、unit、change、description、body、footer、skeleton… */
+export declare const statStyles: Readonly<{
+    body: css.CompiledStyles;
+    change: css.CompiledStyles;
+    changeLabel: css.CompiledStyles;
+    changeSkeleton: css.CompiledStyles;
+    description: css.CompiledStyles;
+    footer: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    label: css.CompiledStyles;
+    number: css.CompiledStyles;
+    numberSkeleton: css.CompiledStyles;
+    root: css.CompiledStyles;
+    unit: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** 统计数值：指标名、数值与单位、图标、变化量 */
+export declare const Stat: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<StatProps>;
+/** 未声明的属性落到外层 div 上 */
+export interface StatGroupProps extends PartProps<'div'> {
+    /**
+     * 每个指标最窄多宽（CSS 长度）：放不下就换行
+     * @default '9rem'
+     */
+    minItemWidth?: string;
+    /** Stat */
+    children?: VNodeChild;
+}
+/** StatGroup 的样式：root、item */
+export declare const statGroupStyles: Readonly<{
+    item: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** StatGroup 的动态样式：列宽 */
+export declare const statGroupDynamicStyles: Readonly<{
+    readonly columns: (min: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 一排指标：按宽度换行，同一行里指标之间一条竖线 */
+export declare const StatGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<StatGroupProps>;

package/dist/display/Stat.js

@@ -0,0 +1,268 @@
+import { t } from "../config/theme/tokens.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { toneStyles } from "../utils/style/typography.js";
+import { Icon } from "../base/Icon.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { AnimatedNumber } from "./AnimatedNumber.js";
+import { shimmerStyles } from "../utils/style/shimmer.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { Fragment, createVNode, mergeProps } from "vue";
+import { _component, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { TrendingDown, TrendingUp } from "@lucide/icons";
+//#region src/display/Stat.tsx
+/**
+* 统计数值（dl）：指标名、数值与单位、可选的图标与环比变化。仪表盘顶部的一排卡片、详情页的关键指标。
+* 外观只是内容，放进 Card、Grid 里组合：
+*
+*   <Card><Stat label="实际销售额" value={910.36} unit="万元" icon={Wallet} change={0.123} changeLabel="较上月" /></Card>
+*   <Stat label="测算销售" value={a} format={wan} unit="万元" footer={<><span>年度目标 2,000 万元</span><span>完成 81%</span></>}>
+*     <Progress value={81} size="xs" aria-label="年度目标完成度" />
+*   </Stat>
+*
+* 排版（参考 Ant Design Pro 的 ChartCard）：第一行是图标与指标名、结束边是变化量；第二行是数值；
+* children 是数值下面占满整宽的补充内容（进度条、迷你图）；footer 是底栏，上方一条分隔线，放两项时分别靠两端。
+* 卡片再宽，内容也铺满整行，不在中间留一大块空白。
+*
+* 一排几个指标用 StatGroup：按宽度换行，指标之间一条竖线（同一行里）：
+*
+*   <StatGroup><Stat label="超时" value={10} tone="danger" /><Stat label="待验收" value={5} /></StatGroup>
+*
+* 数值变化时滚动过渡（AnimatedNumber），读屏只读终值；变化量按正负着色并带箭头，
+* 成本、耗时这类“越低越好”的指标写 invertChange。加载中（loading）数值与变化量换成扫光的骨架，指标名照常显示。
+*/
+/** 忙碌由组件按 loading 管理 */
+/** 未声明的属性落到外层 dl 上 */
+var CHANGE_FORMAT = {
+	style: "percent",
+	maximumFractionDigits: 1,
+	signDisplay: "exceptZero"
+};
+/** 在 StatGroup 里：指标之间画竖线 */
+var StatGroupContext = createContext("StatGroup");
+/** Stat 的样式：root、label、icon、value、number、unit、change、description、body、footer、skeleton… */
+var statStyles = css.create({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		columnGap: "_sm",
+		rowGap: "_xs",
+		margin: 0,
+		minWidth: 0
+	},
+	label: {
+		order: 0,
+		flexGrow: 1,
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		minWidth: 0,
+		margin: 0,
+		color: "_textMuted",
+		fontSize: "_sm"
+	},
+	icon: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0,
+		width: "1.75em",
+		height: "1.75em",
+		borderRadius: "_md",
+		backgroundColor: "_accentSoft",
+		color: "_accentText"
+	},
+	value: {
+		order: 2,
+		flexBasis: "100%",
+		display: "flex",
+		alignItems: "baseline",
+		flexWrap: "wrap",
+		gap: "_xs",
+		margin: 0
+	},
+	number: {
+		fontSize: "_xxl",
+		fontWeight: "_bold",
+		lineHeight: "_tight",
+		color: "_text",
+		fontVariantNumeric: "tabular-nums"
+	},
+	unit: {
+		color: "_textMuted",
+		fontSize: "_xs"
+	},
+	change: {
+		order: 1,
+		display: "flex",
+		alignItems: "center",
+		gap: "_xs",
+		fontSize: "_xs",
+		margin: 0,
+		whiteSpace: "nowrap"
+	},
+	changeLabel: { color: "_textMuted" },
+	description: {
+		order: 3,
+		flexBasis: "100%",
+		color: "_textMuted",
+		fontSize: "_xs",
+		margin: 0
+	},
+	body: {
+		order: 3,
+		flexBasis: "100%",
+		margin: 0,
+		minWidth: 0
+	},
+	footer: {
+		order: 3,
+		flexBasis: "100%",
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "baseline",
+		justifyContent: "space-between",
+		columnGap: "_md",
+		rowGap: "_xs",
+		margin: 0,
+		marginBlockStart: "_xs",
+		paddingBlockStart: "_sm",
+		borderBlockStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_borderMuted",
+		color: "_textMuted",
+		fontSize: "_xs"
+	},
+	numberSkeleton: {
+		fontSize: "_xxl",
+		width: "4em",
+		height: "1.25em"
+	},
+	changeSkeleton: {
+		width: "6em",
+		height: "1.5em"
+	}
+});
+/** 统计数值：指标名、数值与单位、图标、变化量 */
+var Stat = /*#__PURE__*/ _component((_props, _ctx) => {
+	const label = readonlyProp(_props, "label");
+	const value = readonlyProp(_props, "value");
+	const format = readonlyProp(_props, "format");
+	const unit = readonlyProp(_props, "unit");
+	const tone = readonlyProp(_props, "tone");
+	const icon = readonlyProp(_props, "icon");
+	const change = readonlyProp(_props, "change");
+	const changeFormat = readonlyProp(_props, "changeFormat", () => CHANGE_FORMAT);
+	const changeLabel = readonlyProp(_props, "changeLabel");
+	const invertChange = readonlyProp(_props, "invertChange", false);
+	const description = readonlyProp(_props, "description");
+	const footer = readonlyProp(_props, "footer");
+	const children = childrenProp(_props);
+	const loading = readonlyProp(_props, "loading", false);
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const propsValue = readonlyProp(_props, "propsValue");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsNumber = readonlyProp(_props, "propsNumber");
+	const propsUnit = readonlyProp(_props, "propsUnit");
+	const propsChange = readonlyProp(_props, "propsChange");
+	const propsChangeLabel = readonlyProp(_props, "propsChangeLabel");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsFooter = readonlyProp(_props, "propsFooter");
+	const rest = restProps(_props, _ctx, false);
+	const grouped = StatGroupContext.inject(false);
+	const skeleton = useDelayedLoading(() => loading.value);
+	let revealing = false;
+	return () => {
+		if (skeleton.value) revealing = true;
+		const reveal = revealing && !skeleton.value && shimmerStyles.reveal;
+		const direction = change.value === void 0 || change.value === 0 ? "flat" : change.value > 0 ? "up" : "down";
+		const improved = invertChange.value ? direction === "down" : direction === "up";
+		const changeTone = direction === "flat" ? "muted" : improved ? "success" : "danger";
+		return createVNode("dl", mergeAttrs({ sx: [statStyles.root, grouped && statGroupStyles.item] }, rest, { "aria-busy": loading.value || void 0 }), [
+			createVNode("dt", mergeAttrs({ sx: statStyles.label }, propsLabel.value), [icon.value && createVNode("span", mergeAttrs({ sx: statStyles.icon }, propsIcon.value, { "aria-hidden": true }), [createVNode(Icon, { "icon": icon.value }, null)]), createVNode("span", null, [label.value])]),
+			createVNode("dd", mergeAttrs({ sx: [statStyles.value, reveal] }, propsValue.value), [skeleton.value ? createVNode(Skeleton, { "sx": statStyles.numberSkeleton }, null) : typeof value.value !== "string" ? createVNode(AnimatedNumber, mergePartProps({
+				sx: [statStyles.number, tone.value && toneStyles[tone.value]],
+				value: value.value
+			}, propsNumber.value, {
+				value: value.value,
+				format: format.value
+			}), null) : createVNode("span", mergeAttrs({ sx: [statStyles.number, tone.value && toneStyles[tone.value]] }, propsNumber.value), [value.value]), unit.value != null && !skeleton.value && createVNode("span", mergeAttrs({ sx: statStyles.unit }, propsUnit.value), [unit.value])]),
+			change.value !== void 0 && createVNode("dd", mergeProps(mergeAttrs({ sx: [statStyles.change, reveal] }, propsChange.value), { "data-trend": skeleton.value ? void 0 : direction }), [skeleton.value ? createVNode(Skeleton, { "sx": statStyles.changeSkeleton }, null) : createVNode(Fragment, null, [createVNode("span", css.attrs(toneStyles[changeTone]), [
+				direction !== "flat" && createVNode(Icon, {
+					"icon": direction === "up" ? TrendingUp : TrendingDown,
+					"aria-hidden": "true"
+				}, null),
+				" ",
+				createVNode(AnimatedNumber, {
+					"value": change.value,
+					"format": changeFormat.value
+				}, null)
+			]), changeLabel.value != null && createVNode("span", mergeAttrs({ sx: statStyles.changeLabel }, propsChangeLabel.value), [changeLabel.value])])]),
+			hasContent(description.value) && createVNode("dd", mergeAttrs({ sx: statStyles.description }, propsDescription.value), [description.value]),
+			hasContent(children.value) && createVNode("dd", mergeAttrs({ sx: statStyles.body }, propsBody.value), [children.value]),
+			hasContent(footer.value) && createVNode("dd", mergeAttrs({ sx: statStyles.footer }, propsFooter.value), [footer.value])
+		]);
+	};
+}, {
+	name: "Stat",
+	props: [
+		"label",
+		"value",
+		"format",
+		"unit",
+		"tone",
+		"icon",
+		"change",
+		"changeFormat",
+		"changeLabel",
+		"invertChange",
+		"description",
+		"footer",
+		"loading",
+		"propsLabel",
+		"propsValue",
+		"propsIcon",
+		"propsNumber",
+		"propsUnit",
+		"propsChange",
+		"propsChangeLabel",
+		"propsDescription",
+		"propsBody",
+		"propsFooter"
+	]
+});
+/** 未声明的属性落到外层 div 上 */
+/** StatGroup 的样式：root、item */
+var statGroupStyles = css.create({
+	root: {
+		display: "grid",
+		rowGap: "_md",
+		overflow: "hidden"
+	},
+	item: {
+		paddingInline: "_md",
+		marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,
+		borderInlineStartWidth: "_xs",
+		borderInlineStartStyle: "solid",
+		borderInlineStartColor: "_borderMuted"
+	}
+});
+/** StatGroup 的动态样式：列宽 */
+var statGroupDynamicStyles = css.create({ columns: (min) => ({ gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}, 100%), 1fr))` }) });
+/** 一排指标：按宽度换行，同一行里指标之间一条竖线 */
+var StatGroup = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const minItemWidth = readonlyProp(_props2, "minItemWidth", "9rem");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	StatGroupContext.provide(true);
+	return () => createVNode("div", mergeAttrs({ sx: [statGroupStyles.root, css.bind(statGroupDynamicStyles.columns, () => [minItemWidth.value], true)] }, rest), [children.value]);
+}, {
+	name: "StatGroup",
+	props: ["minItemWidth"]
+});
+//#endregion
+export { Stat, StatGroup, statGroupDynamicStyles, statGroupStyles, statStyles };
+
+//# sourceMappingURL=Stat.js.map

package/dist/display/Stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/display/Stat.tsx"],"sourcesContent":["/**\n * 统计数值（dl）：指标名、数值与单位、可选的图标与环比变化。仪表盘顶部的一排卡片、详情页的关键指标。\n * 外观只是内容，放进 Card、Grid 里组合：\n *\n *   <Card><Stat label=\"实际销售额\" value={910.36} unit=\"万元\" icon={Wallet} change={0.123} changeLabel=\"较上月\" /></Card>\n *   <Stat label=\"测算销售\" value={a} format={wan} unit=\"万元\" footer={<><span>年度目标 2,000 万元</span><span>完成 81%</span></>}>\n *     <Progress value={81} size=\"xs\" aria-label=\"年度目标完成度\" />\n *   </Stat>\n *\n * 排版（参考 Ant Design Pro 的 ChartCard）：第一行是图标与指标名、结束边是变化量；第二行是数值；\n * children 是数值下面占满整宽的补充内容（进度条、迷你图）；footer 是底栏，上方一条分隔线，放两项时分别靠两端。\n * 卡片再宽，内容也铺满整行，不在中间留一大块空白。\n *\n * 一排几个指标用 StatGroup：按宽度换行，指标之间一条竖线（同一行里）：\n *\n *   <StatGroup><Stat label=\"超时\" value={10} tone=\"danger\" /><Stat label=\"待验收\" value={5} /></StatGroup>\n *\n * 数值变化时滚动过渡（AnimatedNumber），读屏只读终值；变化量按正负着色并带箭头，\n * 成本、耗时这类“越低越好”的指标写 invertChange。加载中（loading）数值与变化量换成扫光的骨架，指标名照常显示。\n */\nimport { TrendingDown, TrendingUp } from '@lucide/icons';\nimport { createContext, _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, type IconData } from '../base/Icon';\nimport type { NumericFormat } from '../config/lang/format';\nimport { Skeleton } from '../feedback/Skeleton';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { toneStyles, type Tone } from '../utils/style/typography';\nimport type { NumericValue } from '../utils/data/numeric';\nimport { AnimatedNumber, type AnimatedNumberProps } from './AnimatedNumber';\nimport { t } from '../config/theme/tokens';\n\n/** 忙碌由组件按 loading 管理 */\nexport type StatManaged = 'aria-busy';\n\n/** 未声明的属性落到外层 dl 上 */\nexport interface StatProps extends PartProps<'dl', StatManaged> {\n  /** 指标名 */\n  label: VNodeChild;\n  /** 数值：number、bigint、Decimal 按当前语言格式化并在变化时滚动；字符串原样显示（如“—”、“98.5%”） */\n  value: NumericValue | string;\n  /**\n   * 数值的格式，如两位小数 `{ minimumFractionDigits: 2 }`、百分比 `{ style: 'percent' }`；\n   * 值以元给出、按万元显示时写 `{ scale: 10_000, maximumFractionDigits: 2 }` 并配 `unit=\"万元\"`\n   */\n  format?: NumericFormat;\n  /** 单位，跟在数值后面、字号小一档 */\n  unit?: VNodeChild;\n  /** 数值的色调：超时、缺漏这类要引起注意的数用 danger、warning；不写时是正文色 */\n  tone?: Tone;\n  /** 指标名前面的图标（装饰，对读屏隐藏） */\n  icon?: IconData;\n  /** 变化量（环比、同比）：正数向上、负数向下；默认按百分比显示（0.12 → +12%） */\n  change?: number;\n  /** 变化量的格式，默认 `{ style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' }` */\n  changeFormat?: NumericFormat;\n  /** 变化量后面的说明，如“较上月” */\n  changeLabel?: VNodeChild;\n  /** 下降是好事（成本、耗时、故障数）：下降显示成功色、上升显示危险色 */\n  invertChange?: boolean;\n  /** 数值下面的补充说明（一行小字） */\n  description?: VNodeChild;\n  /** 底栏：上方一条分隔线；放两项时分别靠两端，如“年度目标 2,000 万元”与“完成 81%” */\n  footer?: VNodeChild;\n  /** 数值下面占满整宽的补充内容：进度条、迷你图 */\n  children?: VNodeChild;\n  /**\n   * 加载中：数值与变化量换成扫光的骨架，带 aria-busy；很快完成时不闪\n   * @default false\n   */\n  loading?: boolean;\n  /** 指标名（dt）的部件属性 */\n  propsLabel?: PartProps<'dt'>;\n  /** 数值（dd）的部件属性 */\n  propsValue?: PartProps<'dd'>;\n  /** 图标外层的部件属性 */\n  propsIcon?: PartProps<'span', 'aria-hidden'>;\n  /** 数字本身（AnimatedNumber 或字符串值的 span）的部件属性 */\n  propsNumber?: PartProps<'span', 'prefix'>;\n  /** 单位的部件属性 */\n  propsUnit?: PartProps<'span'>;\n  /** 变化（dd）的部件属性 */\n  propsChange?: PartProps<'dd'>;\n  /** 变化后面的说明的部件属性 */\n  propsChangeLabel?: PartProps<'span'>;\n  /** 补充说明（dd）的部件属性 */\n  propsDescription?: PartProps<'dd'>;\n  /** 补充内容（dd，children 的外层）的部件属性 */\n  propsBody?: PartProps<'dd'>;\n  /** 底栏（dd）的部件属性 */\n  propsFooter?: PartProps<'dd'>;\n}\n\nconst CHANGE_FORMAT: NumericFormat = {\n  style: 'percent',\n  maximumFractionDigits: 1,\n  signDisplay: 'exceptZero',\n};\n\n/** 在 StatGroup 里：指标之间画竖线 */\nconst StatGroupContext = createContext<boolean>('StatGroup');\n\n/** Stat 的样式：root、label、icon、value、number、unit、change、description、body、footer、skeleton… */\nexport const statStyles = css.create({\n  // 第一行是指标名与变化量（结束边），其余各占一整行。可换行的弹性布局而不是两列网格：\n  // 卡片窄时变化量换到下一行，指标名不被挤成一字一行；DOM 顺序不变（读屏仍是名称、数值、变化量）\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    margin: 0,\n    minWidth: 0,\n  },\n  // dt 里放图标与指标名：dl 的子元素只能是 dt、dd\n  label: {\n    order: 0,\n    flexGrow: 1,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    minWidth: 0,\n    margin: 0,\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n  icon: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: '1.75em',\n    height: '1.75em',\n    borderRadius: '_md',\n    backgroundColor: '_accentSoft',\n    color: '_accentText',\n  },\n  value: {\n    order: 2,\n    flexBasis: '100%',\n    display: 'flex',\n    alignItems: 'baseline',\n    flexWrap: 'wrap',\n    gap: '_xs',\n    margin: 0,\n  },\n  number: {\n    fontSize: '_xxl',\n    fontWeight: '_bold',\n    lineHeight: '_tight',\n    color: '_text',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  unit: { color: '_textMuted', fontSize: '_xs' },\n  // 变化量在指标名那一行的结束边\n  change: {\n    order: 1,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_xs',\n    fontSize: '_xs',\n    margin: 0,\n    whiteSpace: 'nowrap',\n  },\n  changeLabel: { color: '_textMuted' },\n  description: { order: 3, flexBasis: '100%', color: '_textMuted', fontSize: '_xs', margin: 0 },\n  body: { order: 3, flexBasis: '100%', margin: 0, minWidth: 0 },\n  // 底栏：两项时分别靠两端，多了换行\n  footer: {\n    order: 3,\n    flexBasis: '100%',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'baseline',\n    justifyContent: 'space-between',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    marginBlockStart: '_xs',\n    paddingBlockStart: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    color: '_textMuted',\n    fontSize: '_xs',\n  },\n  // 骨架与数值、变化量同高：加载完换成内容时不跳\n  numberSkeleton: { fontSize: '_xxl', width: '4em', height: '1.25em' },\n  changeSkeleton: { width: '6em', height: '1.5em' },\n});\n\n/** 统计数值：指标名、数值与单位、图标、变化量 */\nexport const Stat = _component(\n  ({\n    label,\n    value,\n    format,\n    unit,\n    tone,\n    icon,\n    change,\n    changeFormat = CHANGE_FORMAT,\n    changeLabel,\n    invertChange = false,\n    description,\n    footer,\n    children,\n    loading = false,\n    propsLabel,\n    propsValue,\n    propsIcon,\n    propsNumber,\n    propsUnit,\n    propsChange,\n    propsChangeLabel,\n    propsDescription,\n    propsBody,\n    propsFooter,\n    ...rest\n  }: StatProps) => {\n    const grouped = StatGroupContext.inject(false);\n    // 骨架防闪烁；aria-busy 按真实的 loading\n    const skeleton = useDelayedLoading(() => loading);\n    // 出现过骨架之后，换回数值时淡入（样式在切换的那一刻加上，动画才会播）\n    let revealing = false;\n    return () => {\n      if (skeleton.value) revealing = true;\n      const reveal = revealing && !skeleton.value && shimmerStyles.reveal;\n      const direction = change === undefined || change === 0 ? 'flat' : change > 0 ? 'up' : 'down';\n      const improved = invertChange ? direction === 'down' : direction === 'up';\n      const changeTone = direction === 'flat' ? 'muted' : improved ? 'success' : 'danger';\n      return (\n        <dl\n          {...mergeAttrs<'dl'>({ sx: [statStyles.root, grouped && statGroupStyles.item] }, rest, {\n            'aria-busy': loading || undefined,\n          })}\n        >\n          <dt {...mergeAttrs<'dt'>({ sx: statStyles.label }, propsLabel)}>\n            {icon && (\n              <span\n                {...mergeAttrs<'span'>({ sx: statStyles.icon }, propsIcon, { 'aria-hidden': true })}\n              >\n                <Icon icon={icon} />\n              </span>\n            )}\n            <span>{label}</span>\n          </dt>\n          <dd {...mergeAttrs<'dd'>({ sx: [statStyles.value, reveal] }, propsValue)}>\n            {skeleton.value ? (\n              <Skeleton sx={statStyles.numberSkeleton} />\n            ) : typeof value !== 'string' ? (\n              <AnimatedNumber\n                {...mergePartProps<AnimatedNumberProps>(\n                  { sx: [statStyles.number, tone && toneStyles[tone]], value },\n                  propsNumber,\n                  {\n                    value,\n                    format,\n                  },\n                )}\n              />\n            ) : (\n              <span\n                {...mergeAttrs<'span'>(\n                  { sx: [statStyles.number, tone && toneStyles[tone]] },\n                  propsNumber,\n                )}\n              >\n                {value}\n              </span>\n            )}\n            {unit != null && !skeleton.value && (\n              <span {...mergeAttrs<'span'>({ sx: statStyles.unit }, propsUnit)}>{unit}</span>\n            )}\n          </dd>\n          {change !== undefined && (\n            <dd\n              {...mergeAttrs<'dd'>({ sx: [statStyles.change, reveal] }, propsChange)}\n              data-trend={skeleton.value ? undefined : direction}\n            >\n              {skeleton.value ? (\n                <Skeleton sx={statStyles.changeSkeleton} />\n              ) : (\n                <>\n                  <span {...css.attrs(toneStyles[changeTone])}>\n                    {direction !== 'flat' && (\n                      <Icon\n                        icon={direction === 'up' ? TrendingUp : TrendingDown}\n                        aria-hidden=\"true\"\n                      />\n                    )}{' '}\n                    <AnimatedNumber value={change} format={changeFormat} />\n                  </span>\n                  {changeLabel != null && (\n                    <span {...mergeAttrs<'span'>({ sx: statStyles.changeLabel }, propsChangeLabel)}>\n                      {changeLabel}\n                    </span>\n                  )}\n                </>\n              )}\n            </dd>\n          )}\n          {hasContent(description) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.description }, propsDescription)}>\n              {description}\n            </dd>\n          )}\n          {hasContent(children) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.body }, propsBody)}>{children}</dd>\n          )}\n          {hasContent(footer) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.footer }, propsFooter)}>{footer}</dd>\n          )}\n        </dl>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到外层 div 上 */\nexport interface StatGroupProps extends PartProps<'div'> {\n  /**\n   * 每个指标最窄多宽（CSS 长度）：放不下就换行\n   * @default '9rem'\n   */\n  minItemWidth?: string;\n  /** Stat */\n  children?: VNodeChild;\n}\n\n/** StatGroup 的样式：root、item */\nexport const statGroupStyles = css.create({\n  // 每个指标的起始边一条竖线；整组往起始方向挪一条线的位置，每行第一个的竖线藏到外面（overflow 裁掉）\n  root: { display: 'grid', rowGap: '_md', overflow: 'hidden' },\n  item: {\n    paddingInline: '_md',\n    marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n});\n\n/** StatGroup 的动态样式：列宽 */\nexport const statGroupDynamicStyles = css.create({\n  columns: (min: string) => ({\n    gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}, 100%), 1fr))`,\n  }),\n});\n\n/** 一排指标：按宽度换行，同一行里指标之间一条竖线 */\nexport const StatGroup = _component(\n  ({ minItemWidth = '9rem', children, ...rest }: StatGroupProps) => {\n    StatGroupContext.provide(true);\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [statGroupStyles.root, statGroupDynamicStyles.columns(minItemWidth)] },\n          rest,\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}