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

package/dist/table/Table.d.ts

@@ -0,0 +1,169 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type ScrollAreaProps } from '../layout/ScrollArea';
+import { type PartProps } from '../utils/props';
+import { type DataTableDensities, type DataTableOptions, type DataTableVariants } from './table-styles';
+/** Table 交给各单元格与行的外观 */
+export interface TableState {
+    /** 密度 */
+    readonly density: keyof DataTableDensities;
+    /** 样式 */
+    readonly variant: keyof DataTableVariants;
+    /** 斑马纹 */
+    readonly striped: boolean;
+}
+/** Table 的上下文：行与单元格据此取外观 */
+export declare const TableContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<TableState>;
+/** 单元格的对齐 */
+export interface TableAligns {
+    /** 起始边（默认） */
+    start: unknown;
+    /** 居中 */
+    center: unknown;
+    /** 结束边：数字、金额 */
+    end: unknown;
+}
+/** 未声明的属性落到 table 上；aria-label 或 TableCaption 是表格的名称 */
+export interface TableProps extends PartProps<'table'>, DataTableOptions {
+    /** 外层（横向滚动的 ScrollArea）的部件属性 */
+    propsRoot?: Partial<ScrollAreaProps>;
+    children?: VNodeChild;
+}
+/**
+ * 静态表格的配方：部件对应原生 table 的各个元素，密度、样式、斑马纹是档位。
+ * 表体、表尾里的行标题（th）是 `[s.cell.sx, s.rowHeader.sx]`，表尾的格再叠上 `s.footCell.sx`
+ */
+export declare const tableRecipe: css.Recipe<"body" | "caption" | "cell" | "foot" | "footCell" | "head" | "headerCell" | "root" | "row" | "rowHeader" | "table", {
+    readonly density: {
+        readonly compact: {
+            readonly table: {
+                readonly fontSize: "_sm";
+            };
+            readonly headerCell: {
+                readonly paddingBlock: "_xs";
+            };
+            readonly cell: {
+                readonly paddingBlock: "_xs";
+            };
+        };
+        readonly standard: {
+            readonly headerCell: {
+                readonly paddingBlock: "_sm";
+            };
+            readonly cell: {
+                readonly paddingBlock: "_sm";
+            };
+        };
+        readonly comfortable: {
+            readonly headerCell: {
+                readonly paddingBlock: "_md";
+            };
+            readonly cell: {
+                readonly paddingBlock: "_md";
+            };
+        };
+    };
+    readonly variant: {
+        readonly surface: {
+            readonly root: {
+                readonly borderWidth: "_xs";
+                readonly borderStyle: "solid";
+                readonly borderColor: "_border";
+                readonly borderRadius: "_lg";
+                readonly backgroundColor: "_surface";
+            };
+            readonly row: {
+                readonly backgroundColor: {
+                    readonly default: "_surface";
+                    readonly ':hover': "_fillHover";
+                };
+            };
+        };
+        readonly ghost: {
+            readonly root: {
+                readonly backgroundColor: "_background";
+            };
+            readonly row: {
+                readonly backgroundColor: {
+                    readonly default: "_background";
+                    readonly ':hover': "_fillHover";
+                };
+            };
+        };
+    };
+    readonly striped: {
+        readonly true: {
+            readonly row: {
+                readonly backgroundColor: {
+                    readonly default: null;
+                    readonly ':nth-child(even)': "_fill";
+                };
+            };
+        };
+    };
+}>;
+/** 静态表格的部件（createUi / Provider 的 styles.Table 按它定制） */
+export type TablePart = (typeof tableRecipe.parts)[number];
+/** 静态表格的动态样式：列宽 */
+export declare const tableDynamicStyles: Readonly<{
+    readonly width: (width: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 单元格所在的区域：表头的 th 是列标题，表体与表尾的 th 是行标题 */
+export type TableSection = 'head' | 'body' | 'foot';
+/** 单元格所在区域的上下文：TableHead、TableBody、TableFoot 提供 */
+export declare const TableSectionContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<TableSection>;
+/** 静态表格（table）：外层可横向滚动；外观经上下文交给行与单元格 */
+export declare const Table: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TableProps>;
+/** 表格标题（caption）：同时是表格的名称；不想显示时包进 VisuallyHidden */
+export declare const TableCaption: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<Omit<import("@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime").IntrinsicProps<"caption">, "children"> & {
+    sx?: css.SxStyles;
+} & {
+    children?: VNodeChild;
+}>;
+/** 表头（thead） */
+export declare const TableHead: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<Omit<import("@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime").IntrinsicProps<"thead">, "children"> & {
+    sx?: css.SxStyles;
+} & {
+    children?: VNodeChild;
+}>;
+/** 表体（tbody） */
+export declare const TableBody: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<Omit<import("@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime").IntrinsicProps<"tbody">, "children"> & {
+    sx?: css.SxStyles;
+} & {
+    children?: VNodeChild;
+}>;
+/** 表尾（tfoot）：合计行 */
+export declare const TableFoot: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<Omit<import("@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime").IntrinsicProps<"tfoot">, "children"> & {
+    sx?: css.SxStyles;
+} & {
+    children?: VNodeChild;
+}>;
+/** 行（tr）：底色随表格的样式，斑马纹时隔行浅色底 */
+export declare const TableRow: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<Omit<import("@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime").IntrinsicProps<"tr">, "children"> & {
+    sx?: css.SxStyles;
+} & {
+    children?: VNodeChild;
+}>;
+/** TableHeaderCell、TableCell 共有的属性 */
+interface TableCellOptions {
+    /** 对齐，默认 start；数字、金额用 end */
+    align?: keyof TableAligns;
+    /** 不换行（超出时省略号）；默认可以换行 */
+    nowrap?: boolean;
+    children?: VNodeChild;
+}
+/** 未声明的属性落到 th 上；原生的 align、width 属性已废弃，用同名的 prop */
+export interface TableHeaderCellProps extends PartProps<'th', 'align' | 'width'>, TableCellOptions {
+    /** 表头单元格对应的方向，默认 col（列标题）；行标题写 row */
+    scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+    /** 列宽（CSS 长度，数字按 px）：日期、数字、操作这类按内容定宽的列；不写的列分剩下的 */
+    width?: number | string;
+}
+/** 未声明的属性落到 td 上；对齐用 align prop */
+export interface TableCellProps extends PartProps<'td', 'align'>, TableCellOptions {
+}
+/** 表头单元格（th）：表头里是列标题，表体与表尾里是行标题 */
+export declare const TableHeaderCell: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TableHeaderCellProps>;
+/** 单元格（td） */
+export declare const TableCell: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TableCellProps>;
+export {};

package/dist/table/Table.js

@@ -0,0 +1,304 @@
+import { useDefaults } from "../config/defaults.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { useRecipe } from "../config/styles.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { dataTableStateStyles } from "./table-styles.js";
+import { createVNode } 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";
+//#region src/table/Table.tsx
+/** Table 交给各单元格与行的外观 */
+/** Table 的上下文：行与单元格据此取外观 */
+var TableContext = createContext("Table");
+/** 单元格的对齐 */
+/** 不在 Table 里单独用行与单元格时的外观 */
+var standalone = {
+	density: "standard",
+	variant: "surface",
+	striped: false
+};
+/** 未声明的属性落到 table 上；aria-label 或 TableCaption 是表格的名称 */
+/**
+* 静态表格的配方：部件对应原生 table 的各个元素，密度、样式、斑马纹是档位。
+* 表体、表尾里的行标题（th）是 `[s.cell.sx, s.rowHeader.sx]`，表尾的格再叠上 `s.footCell.sx`
+*/
+var tableRecipe = css.recipe({
+	name: "Table",
+	parts: [
+		"root",
+		"table",
+		"caption",
+		"head",
+		"body",
+		"foot",
+		"row",
+		"headerCell",
+		"rowHeader",
+		"cell",
+		"footCell"
+	],
+	base: {
+		root: {
+			minWidth: 0,
+			contain: "inline-size"
+		},
+		table: {
+			width: "_full",
+			tableLayout: "auto",
+			borderCollapse: "separate",
+			borderSpacing: 0,
+			color: "_text",
+			lineHeight: "_normal"
+		},
+		caption: {
+			captionSide: "top",
+			paddingBlock: "_sm",
+			paddingInline: "_md",
+			color: "_textMuted",
+			fontSize: "_sm",
+			textAlign: "start"
+		},
+		headerCell: {
+			position: "relative",
+			boxSizing: "border-box",
+			paddingInline: "_md",
+			borderBottomWidth: "_xs",
+			borderBottomStyle: "solid",
+			borderBottomColor: "_border",
+			backgroundColor: "_fill",
+			color: "_textMuted",
+			fontSize: "_sm",
+			fontWeight: "_semibold",
+			textAlign: "start",
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis"
+		},
+		rowHeader: {
+			fontWeight: "_medium",
+			textAlign: "start"
+		},
+		cell: {
+			boxSizing: "border-box",
+			fontVariantNumeric: "tabular-nums",
+			paddingInline: "_md",
+			borderBottomWidth: "_xs",
+			borderBottomStyle: "solid",
+			borderBottomColor: "_borderMuted",
+			backgroundColor: "inherit",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			verticalAlign: "middle"
+		},
+		footCell: {
+			fontWeight: "_semibold",
+			borderTopWidth: "_xs",
+			borderTopStyle: "solid",
+			borderTopColor: "_border",
+			borderBottomWidth: 0
+		}
+	},
+	variants: {
+		density: {
+			compact: {
+				table: { fontSize: "_sm" },
+				headerCell: { paddingBlock: "_xs" },
+				cell: { paddingBlock: "_xs" }
+			},
+			standard: {
+				headerCell: { paddingBlock: "_sm" },
+				cell: { paddingBlock: "_sm" }
+			},
+			comfortable: {
+				headerCell: { paddingBlock: "_md" },
+				cell: { paddingBlock: "_md" }
+			}
+		},
+		variant: {
+			surface: {
+				root: {
+					borderWidth: "_xs",
+					borderStyle: "solid",
+					borderColor: "_border",
+					borderRadius: "_lg",
+					backgroundColor: "_surface"
+				},
+				row: { backgroundColor: {
+					default: "_surface",
+					":hover": "_fillHover"
+				} }
+			},
+			ghost: {
+				root: { backgroundColor: "_background" },
+				row: { backgroundColor: {
+					default: "_background",
+					":hover": "_fillHover"
+				} }
+			}
+		},
+		striped: { true: { row: { backgroundColor: {
+			default: null,
+			":nth-child(even)": "_fill"
+		} } } }
+	}
+});
+/** 静态表格的部件（createUi / Provider 的 styles.Table 按它定制） */
+/** 静态表格的动态样式：列宽 */
+var tableDynamicStyles = css.create({ width: (width) => ({ width }) });
+/** 单元格所在的区域：表头的 th 是列标题，表体与表尾的 th 是行标题 */
+/** 单元格所在区域的上下文：TableHead、TableBody、TableFoot 提供 */
+var TableSectionContext = createContext("TableSection");
+/** 表格里的元素按所在 Table 的外观取部件层：在 setup 里调用，渲染时调用返回的函数 */
+function useTableParts() {
+	const table = TableContext.inject(standalone);
+	const recipe = useRecipe(tableRecipe);
+	return () => recipe(table);
+}
+/** 静态表格（table）：外层可横向滚动；外观经上下文交给行与单元格 */
+var Table = /*#__PURE__*/ _component((_props, _ctx) => {
+	const density = readonlyProp(_props, "density");
+	const variant = readonlyProp(_props, "variant");
+	const striped = readonlyProp(_props, "striped");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const appearance = useDefaults("Table", () => ({
+		density: density.value,
+		variant: variant.value,
+		striped: striped.value
+	}), {
+		density: "standard",
+		variant: "surface",
+		striped: false
+	});
+	const recipe = useRecipe(tableRecipe);
+	TableContext.provide({
+		get density() {
+			return appearance().density;
+		},
+		get variant() {
+			return appearance().variant;
+		},
+		get striped() {
+			return appearance().striped;
+		}
+	});
+	return () => {
+		const s = recipe(appearance());
+		return createVNode(ScrollArea, mergePartProps({
+			...s.root,
+			axis: "x"
+		}, propsRoot.value), { default: () => [createVNode("table", mergeAttrs(s.table, rest), [children.value])] });
+	};
+}, {
+	name: "Table",
+	props: [
+		"density",
+		"variant",
+		"striped",
+		"propsRoot"
+	]
+});
+/** 表格标题（caption）：同时是表格的名称；不想显示时包进 VisuallyHidden */
+var TableCaption = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const parts = useTableParts();
+	return () => createVNode("caption", mergeAttrs(parts().caption, rest), [children.value]);
+}, { name: "TableCaption" });
+/** 表头（thead） */
+var TableHead = /*#__PURE__*/ _component((_props3, _ctx3) => {
+	const children = childrenProp(_props3);
+	const rest = restProps(_props3, _ctx3, false);
+	TableSectionContext.provide("head");
+	const parts = useTableParts();
+	return () => createVNode("thead", mergeAttrs(parts().head, rest), [children.value]);
+}, { name: "TableHead" });
+/** 表体（tbody） */
+var TableBody = /*#__PURE__*/ _component((_props4, _ctx4) => {
+	const children = childrenProp(_props4);
+	const rest = restProps(_props4, _ctx4, false);
+	TableSectionContext.provide("body");
+	const parts = useTableParts();
+	return () => createVNode("tbody", mergeAttrs(parts().body, rest), [children.value]);
+}, { name: "TableBody" });
+/** 表尾（tfoot）：合计行 */
+var TableFoot = /*#__PURE__*/ _component((_props5, _ctx5) => {
+	const children = childrenProp(_props5);
+	const rest = restProps(_props5, _ctx5, false);
+	TableSectionContext.provide("foot");
+	const parts = useTableParts();
+	return () => createVNode("tfoot", mergeAttrs(parts().foot, rest), [children.value]);
+}, { name: "TableFoot" });
+/** 行（tr）：底色随表格的样式，斑马纹时隔行浅色底 */
+var TableRow = /*#__PURE__*/ _component((_props6, _ctx6) => {
+	const children = childrenProp(_props6);
+	const rest = restProps(_props6, _ctx6, false);
+	const parts = useTableParts();
+	return () => createVNode("tr", mergeAttrs(parts().row, rest), [children.value]);
+}, { name: "TableRow" });
+/** TableHeaderCell、TableCell 共有的属性 */
+/** 未声明的属性落到 th 上；原生的 align、width 属性已废弃，用同名的 prop */
+/** 未声明的属性落到 td 上；对齐用 align prop */
+/** 表头单元格（th）：表头里是列标题，表体与表尾里是行标题 */
+var TableHeaderCell = /*#__PURE__*/ _component((_props7, _ctx7) => {
+	const align = readonlyProp(_props7, "align", "start");
+	const nowrap = readonlyProp(_props7, "nowrap", false);
+	const scope = readonlyProp(_props7, "scope", "col");
+	const width = readonlyProp(_props7, "width");
+	const children = childrenProp(_props7);
+	const rest = restProps(_props7, _ctx7, false);
+	const parts = useTableParts();
+	const section = TableSectionContext.inject("head");
+	return () => {
+		const s = parts();
+		return createVNode("th", mergeAttrs({
+			...section === "head" ? s.headerCell : s.rowHeader,
+			sx: [
+				section === "head" ? s.headerCell.sx : [s.cell.sx, s.rowHeader.sx],
+				section === "foot" && s.footCell.sx,
+				dataTableStateStyles[align.value],
+				!nowrap.value && dataTableStateStyles.wrap,
+				width.value != null && css.bind(tableDynamicStyles.width, () => [typeof width.value === "number" ? `${width.value}px` : width.value], true)
+			],
+			scope: scope.value
+		}, rest), [children.value]);
+	};
+}, {
+	name: "TableHeaderCell",
+	props: [
+		"align",
+		"nowrap",
+		"scope",
+		"width"
+	]
+});
+/** 单元格（td） */
+var TableCell = /*#__PURE__*/ _component((_props8, _ctx8) => {
+	const align = readonlyProp(_props8, "align", "start");
+	const nowrap = readonlyProp(_props8, "nowrap", false);
+	const children = childrenProp(_props8);
+	const rest = restProps(_props8, _ctx8, false);
+	const parts = useTableParts();
+	const section = TableSectionContext.inject("body");
+	return () => {
+		const s = parts();
+		return createVNode("td", mergeAttrs({
+			...section === "foot" ? s.footCell : s.cell,
+			sx: [
+				s.cell.sx,
+				section === "foot" && s.footCell.sx,
+				dataTableStateStyles[align.value],
+				!nowrap.value && dataTableStateStyles.wrap
+			]
+		}, rest), [children.value]);
+	};
+}, {
+	name: "TableCell",
+	props: ["align", "nowrap"]
+});
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableContext, TableFoot, TableHead, TableHeaderCell, TableRow, TableSectionContext, tableDynamicStyles, tableRecipe };
+
+//# sourceMappingURL=Table.js.map

package/dist/table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/table/Table.tsx"],"sourcesContent":["/**\n * 静态表格：原生 table 的各个元素各一个组件，内容直接写在 JSX 里（说明文字里的表格、props 表）。\n * 要排序、勾选、虚拟滚动、列宽调整的数据表格用 DataTable。\n *\n *   <Table aria-label=\"属性\">\n *     <TableHead>\n *       <TableRow><TableHeaderCell>名称</TableHeaderCell><TableHeaderCell>说明</TableHeaderCell></TableRow>\n *     </TableHead>\n *     <TableBody>\n *       <TableRow><TableCell><Code>size</Code></TableCell><TableCell>尺寸档位</TableCell></TableRow>\n *     </TableBody>\n *   </Table>\n *\n * 外观（密度、样式、斑马纹）与 DataTable 相同（配方 tableRecipe，对齐、换行与 DataTable 共用 dataTableStateStyles）；\n * 单元格默认可以换行，列宽按内容分配。\n * 表格比容器宽时在外层横向滚动（ScrollArea：浮层滚动条，不占高度），不撑宽页面。\n */\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 { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  dataTableStateStyles,\n  type DataTableDensities,\n  type DataTableOptions,\n  type DataTableVariants,\n} from './table-styles';\n\n/** Table 交给各单元格与行的外观 */\nexport interface TableState {\n  /** 密度 */\n  readonly density: keyof DataTableDensities;\n  /** 样式 */\n  readonly variant: keyof DataTableVariants;\n  /** 斑马纹 */\n  readonly striped: boolean;\n}\n\n/** Table 的上下文：行与单元格据此取外观 */\nexport const TableContext = createContext<TableState>('Table');\n\n/** 单元格的对齐 */\nexport interface TableAligns {\n  /** 起始边（默认） */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 结束边：数字、金额 */\n  end: unknown;\n}\n\n/** 不在 Table 里单独用行与单元格时的外观 */\nconst standalone: TableState = { density: 'standard', variant: 'surface', striped: false };\n\n/** 未声明的属性落到 table 上；aria-label 或 TableCaption 是表格的名称 */\nexport interface TableProps extends PartProps<'table'>, DataTableOptions {\n  /** 外层（横向滚动的 ScrollArea）的部件属性 */\n  propsRoot?: Partial<ScrollAreaProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 静态表格的配方：部件对应原生 table 的各个元素，密度、样式、斑马纹是档位。\n * 表体、表尾里的行标题（th）是 `[s.cell.sx, s.rowHeader.sx]`，表尾的格再叠上 `s.footCell.sx`\n */\nexport const tableRecipe = css.recipe({\n  name: 'Table',\n  parts: [\n    'root',\n    'table',\n    'caption',\n    'head',\n    'body',\n    'foot',\n    'row',\n    'headerCell',\n    'rowHeader',\n    'cell',\n    'footCell',\n  ],\n  base: {\n    // contain: inline-size：宽表格不撑宽外层的 grid / flex 容器，放不下的在这里横向滚动\n    root: { minWidth: 0, contain: 'inline-size' },\n    // 列宽按内容分配：DataTable 为虚拟滚动与列宽拖动用固定布局，静态表格不需要\n    table: {\n      width: '_full',\n      tableLayout: 'auto',\n      borderCollapse: 'separate',\n      borderSpacing: 0,\n      color: '_text',\n      lineHeight: '_normal',\n    },\n    caption: {\n      captionSide: 'top',\n      paddingBlock: '_sm',\n      paddingInline: '_md',\n      color: '_textMuted',\n      fontSize: '_sm',\n      textAlign: 'start',\n    },\n    headerCell: {\n      position: 'relative',\n      boxSizing: 'border-box',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_border',\n      backgroundColor: '_fill',\n      color: '_textMuted',\n      fontSize: '_sm',\n      fontWeight: '_semibold',\n      textAlign: 'start',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n    // 表体、表尾里的行标题（scope=row）：和普通单元格一样的底色与字号，只是字重高一点\n    rowHeader: { fontWeight: '_medium', textAlign: 'start' },\n    // 数字等宽：金额、数量、日期上下对齐（文字不受影响）\n    cell: {\n      boxSizing: 'border-box',\n      fontVariantNumeric: 'tabular-nums',\n      paddingInline: '_md',\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_borderMuted',\n      backgroundColor: 'inherit',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      verticalAlign: 'middle',\n    },\n    // 表尾（合计行）：上面一条分隔线，文字加粗，th 与 td 一致\n    footCell: {\n      fontWeight: '_semibold',\n      borderTopWidth: '_xs',\n      borderTopStyle: 'solid',\n      borderTopColor: '_border',\n      borderBottomWidth: 0,\n    },\n  },\n  variants: {\n    // 单元格的上下内边距；紧凑时字号也小一档\n    density: {\n      compact: {\n        table: { fontSize: '_sm' },\n        headerCell: { paddingBlock: '_xs' },\n        cell: { paddingBlock: '_xs' },\n      },\n      standard: { headerCell: { paddingBlock: '_sm' }, cell: { paddingBlock: '_sm' } },\n      comfortable: { headerCell: { paddingBlock: '_md' }, cell: { paddingBlock: '_md' } },\n    },\n    variant: {\n      surface: {\n        root: {\n          borderWidth: '_xs',\n          borderStyle: 'solid',\n          borderColor: '_border',\n          borderRadius: '_lg',\n          backgroundColor: '_surface',\n        },\n        row: { backgroundColor: { default: '_surface', ':hover': '_fillHover' } },\n      },\n      ghost: {\n        root: { backgroundColor: '_background' },\n        row: { backgroundColor: { default: '_background', ':hover': '_fillHover' } },\n      },\n    },\n    striped: {\n      true: { row: { backgroundColor: { default: null, ':nth-child(even)': '_fill' } } },\n    },\n  },\n});\n\n/** 静态表格的部件（createUi / Provider 的 styles.Table 按它定制） */\nexport type TablePart = (typeof tableRecipe.parts)[number];\n\n/** 静态表格的动态样式：列宽 */\nexport const tableDynamicStyles = css.create({\n  width: (width: string) => ({ width }),\n});\n\n/** 单元格所在的区域：表头的 th 是列标题，表体与表尾的 th 是行标题 */\nexport type TableSection = 'head' | 'body' | 'foot';\n\n/** 单元格所在区域的上下文：TableHead、TableBody、TableFoot 提供 */\nexport const TableSectionContext = createContext<TableSection>('TableSection');\n\n/** 表格里的元素按所在 Table 的外观取部件层：在 setup 里调用，渲染时调用返回的函数 */\nfunction useTableParts() {\n  const table = TableContext.inject(standalone);\n  const recipe = useRecipe(tableRecipe);\n  return () => recipe(table);\n}\n\n/** 静态表格（table）：外层可横向滚动；外观经上下文交给行与单元格 */\nexport const Table = _component(\n  ({ density, variant, striped, propsRoot, children, ...rest }: TableProps) => {\n    const appearance = useDefaults('Table', () => ({ density, variant, striped }), {\n      density: 'standard',\n      variant: 'surface',\n      striped: false,\n    });\n    const recipe = useRecipe(tableRecipe);\n    TableContext.provide({\n      get density() {\n        return appearance().density;\n      },\n      get variant() {\n        return appearance().variant;\n      },\n      get striped() {\n        return appearance().striped;\n      },\n    });\n    return () => {\n      const s = recipe(appearance());\n      return (\n        <ScrollArea {...mergePartProps<ScrollAreaProps>({ ...s.root, axis: 'x' }, propsRoot)}>\n          <table {...mergeAttrs<'table'>(s.table, rest)}>{children}</table>\n        </ScrollArea>\n      );\n    };\n  },\n);\n\n/** 表格标题（caption）：同时是表格的名称；不想显示时包进 VisuallyHidden */\nexport const TableCaption = _component(\n  ({ children, ...rest }: PartProps<'caption'> & { children?: VNodeChild }) => {\n    const parts = useTableParts();\n    return () => <caption {...mergeAttrs<'caption'>(parts().caption, rest)}>{children}</caption>;\n  },\n);\n\n/** 表头（thead） */\nexport const TableHead = _component(\n  ({ children, ...rest }: PartProps<'thead'> & { children?: VNodeChild }) => {\n    TableSectionContext.provide('head');\n    const parts = useTableParts();\n    return () => <thead {...mergeAttrs<'thead'>(parts().head, rest)}>{children}</thead>;\n  },\n);\n\n/** 表体（tbody） */\nexport const TableBody = _component(\n  ({ children, ...rest }: PartProps<'tbody'> & { children?: VNodeChild }) => {\n    TableSectionContext.provide('body');\n    const parts = useTableParts();\n    return () => <tbody {...mergeAttrs<'tbody'>(parts().body, rest)}>{children}</tbody>;\n  },\n);\n\n/** 表尾（tfoot）：合计行 */\nexport const TableFoot = _component(\n  ({ children, ...rest }: PartProps<'tfoot'> & { children?: VNodeChild }) => {\n    TableSectionContext.provide('foot');\n    const parts = useTableParts();\n    return () => <tfoot {...mergeAttrs<'tfoot'>(parts().foot, rest)}>{children}</tfoot>;\n  },\n);\n\n/** 行（tr）：底色随表格的样式，斑马纹时隔行浅色底 */\nexport const TableRow = _component(\n  ({ children, ...rest }: PartProps<'tr'> & { children?: VNodeChild }) => {\n    const parts = useTableParts();\n    return () => <tr {...mergeAttrs<'tr'>(parts().row, rest)}>{children}</tr>;\n  },\n);\n\n/** TableHeaderCell、TableCell 共有的属性 */\ninterface TableCellOptions {\n  /** 对齐，默认 start；数字、金额用 end */\n  align?: keyof TableAligns;\n  /** 不换行（超出时省略号）；默认可以换行 */\n  nowrap?: boolean;\n  children?: VNodeChild;\n}\n\n/** 未声明的属性落到 th 上；原生的 align、width 属性已废弃，用同名的 prop */\nexport interface TableHeaderCellProps extends PartProps<'th', 'align' | 'width'>, TableCellOptions {\n  /** 表头单元格对应的方向，默认 col（列标题）；行标题写 row */\n  scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';\n  /** 列宽（CSS 长度，数字按 px）：日期、数字、操作这类按内容定宽的列；不写的列分剩下的 */\n  width?: number | string;\n}\n\n/** 未声明的属性落到 td 上；对齐用 align prop */\nexport interface TableCellProps extends PartProps<'td', 'align'>, TableCellOptions {}\n\n/** 表头单元格（th）：表头里是列标题，表体与表尾里是行标题 */\nexport const TableHeaderCell = _component(\n  ({\n    align = 'start',\n    nowrap = false,\n    scope = 'col',\n    width,\n    children,\n    ...rest\n  }: TableHeaderCellProps) => {\n    const parts = useTableParts();\n    const section = TableSectionContext.inject('head');\n    return () => {\n      const s = parts();\n      return (\n        <th\n          {...mergeAttrs<'th'>(\n            {\n              ...(section === 'head' ? s.headerCell : s.rowHeader),\n              sx: [\n                section === 'head' ? s.headerCell.sx : [s.cell.sx, s.rowHeader.sx],\n                section === 'foot' && s.footCell.sx,\n                dataTableStateStyles[align],\n                !nowrap && dataTableStateStyles.wrap,\n                width != null &&\n                  tableDynamicStyles.width(typeof width === 'number' ? `${width}px` : width),\n              ],\n              scope,\n            },\n            rest,\n          )}\n        >\n          {children}\n        </th>\n      );\n    };\n  },\n);\n\n/** 单元格（td） */\nexport const TableCell = _component(\n  ({ align = 'start', nowrap = false, children, ...rest }: TableCellProps) => {\n    const parts = useTableParts();\n    const section = TableSectionContext.inject('body');\n    return () => {\n      const s = parts();\n      return (\n        <td\n          {...mergeAttrs<'td'>(\n            {\n              ...(section === 'foot' ? s.footCell : s.cell),\n              sx: [\n                s.cell.sx,\n                section === 'foot' && s.footCell.sx,\n                dataTableStateStyles[align],\n                !nowrap && dataTableStateStyles.wrap,\n              ],\n            },\n            rest,\n          )}\n        >\n          {children}\n        </td>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/table/TreeDataTable.d.ts

@@ -0,0 +1,36 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type IconButtonProps } from '../base/IconButton';
+import { type DataTableProps } from './DataTable';
+/** 未声明的属性落到 table 上；aria-label 或 aria-labelledby 是表格的名称 */
+export interface TreeDataTableProps<T> extends Omit<DataTableProps<T>, 'leading'> {
+    /** 第一层的行 */
+    rows: readonly T[];
+    /** 一行的子项；没有子项（叶子）或还没加载时返回 undefined / 空数组 */
+    getChildren: (row: T) => readonly T[] | undefined;
+    /** 这一行有没有子项（懒加载时子项还没取回来也要显示展开按钮）；不写时看 getChildren 是否非空 */
+    hasChildren?: (row: T) => boolean;
+    /** 展开一个还没有子项的行时调用：取回子项并放进数据里；返回 Promise 时按钮显示加载中 */
+    loadChildren?: (row: T) => Promise<unknown> | void;
+    /** 子项加载失败（loadChildren 的 Promise 被拒绝）：这一行收回去，再展开会重试；不写时在控制台报错 */
+    onLoadError?: (error: unknown, row: T) => void;
+    /** 展开的行的 key：父级写 _expanded={keys} */
+    _expanded?: string[];
+    /** 每一层缩进多少（em），默认 1.25 */
+    indent?: number;
+    /** 多选时勾选父子不联动：每一行各自勾选；默认联动（勾上父行连带子孙，子行全勾上时父行也勾上，只勾一部分时父行半选） */
+    checkStrictly?: boolean;
+    /** 展开按钮的部件属性；加载中、展开状态与点击由组件管理 */
+    propsToggle?: Omit<Partial<IconButtonProps>, 'loading' | 'aria-expanded' | 'onClick'>;
+}
+/** TreeDataTable 的样式：toggle、chevronOpen、placeholder */
+export declare const treeDataTableStyles: Readonly<{
+    chevronOpen: css.CompiledStyles;
+    placeholder: css.CompiledStyles;
+    toggle: css.CompiledStyles;
+}>;
+/** TreeDataTable 的样式：depth */
+export declare const treeDataTableIndentStyles: Readonly<{
+    readonly depth: (em: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 树形表格：按展开状态展开的层级行，复用 DataTable 的一切 */
+export declare const TreeDataTable: <T>(props: TreeDataTableProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;