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

package/dist/table/TreeDataTable.js

@@ -0,0 +1,168 @@
+import { useLang } from "../config/context.js";
+import { mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { disclosureStyles } from "../utils/style/transitions.js";
+import { IconButton } from "../base/IconButton.js";
+import { columnValue, sortRows } from "./columns.js";
+import { checkStates, flattenTree, indexTree, toggleChecked, useTreeExpansion } from "../utils/data/tree.js";
+import { DataTable } from "./DataTable.js";
+import { Fragment, computed, createVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronRight } from "@lucide/icons";
+//#region src/table/TreeDataTable.tsx
+/**
+* 树形表格：有层级的行（部门 → 小组 → 成员、文件夹 → 文件），第一列带缩进与展开按钮。
+* 建在 DataTable 上：列定义、排序、勾选、列宽、虚拟滚动、加载与空状态、外观都和 DataTable 一样；
+* 这里只做两件事：按展开状态把树展开成一列行（同级之间按 sort 排序），以及第一列前面的缩进与展开按钮。
+*
+*   <TreeDataTable
+*     rows={departments}
+*     columns={columns}
+*     getKey={(row) => row.id}
+*     getChildren={(row) => row.children}
+*     _expanded={open}
+*     aria-label="组织架构"
+*   />
+*
+* - 懒加载：hasChildren 说有子项、getChildren 还没有时，展开会调用 loadChildren（加载中按钮显示加载指示），
+*   调用方把取到的子项放进数据里。
+* - 展开按钮的名称是“行名 的子项”（第一列的文字），展开与否由 aria-expanded 表示。
+*   表格仍是 table 语义（不是 treegrid：那要求逐个单元格的方向键导航），层级由缩进与按钮表达。
+*
+* 部件：DataTable 的全部部件，加上 Toggle（展开按钮，IconButton）。
+*/
+/** 未声明的属性落到 table 上；aria-label 或 aria-labelledby 是表格的名称 */
+/** TreeDataTable 的样式：toggle、chevronOpen、placeholder */
+var treeDataTableStyles = css.create({
+	toggle: {
+		flexShrink: 0,
+		width: "1.5em",
+		minHeight: "1.5em"
+	},
+	chevronOpen: { rotate: "90deg" },
+	placeholder: {
+		flexShrink: 0,
+		width: "1.5em"
+	}
+});
+/** TreeDataTable 的样式：depth */
+var treeDataTableIndentStyles = css.create({ depth: (em) => ({
+	width: `${em}em`,
+	flexShrink: 0
+}) });
+/** 树形表格：按展开状态展开的层级行，复用 DataTable 的一切 */
+var TreeDataTable = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const rows = readonlyProp(_props, "rows");
+	const columns = readonlyProp(_props, "columns");
+	const getKey = readonlyProp(_props, "getKey");
+	const getChildren = readonlyProp(_props, "getChildren");
+	const hasChildren = readonlyProp(_props, "hasChildren");
+	const loadChildren = readonlyProp(_props, "loadChildren");
+	const onLoadError = readonlyProp(_props, "onLoadError");
+	const expanded = bindable(_props, "_expanded", () => [], _ctx.emit);
+	const indent = readonlyProp(_props, "indent", 1.25);
+	const checkStrictly = readonlyProp(_props, "checkStrictly", false);
+	const propsToggle = readonlyProp(_props, "propsToggle");
+	const sort = bindable(_props, "_sort", () => null, _ctx.emit);
+	const manualSort = readonlyProp(_props, "manualSort", false);
+	const selected = bindable(_props, "_selected", () => [], _ctx.emit);
+	const columnWidths = bindable(_props, "_columnWidths", () => ({}), _ctx.emit);
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const accessors = () => ({
+		getKey: getKey.value,
+		getChildren: getChildren.value,
+		hasChildren: hasChildren.value
+	});
+	const expansion = useTreeExpansion({
+		expanded: () => expanded.value,
+		setExpanded: (keys) => expanded.value = keys,
+		getChildren: (row) => getChildren.value(row),
+		loadChildren: (row) => loadChildren.value?.(row),
+		onLoadError: untrack(() => onLoadError.value) && ((error, row) => onLoadError.value?.(error, row))
+	});
+	/** 按展开状态深度优先展开成一列；同级之间按当前排序（manualSort 时按数据里的顺序） */
+	const flat = computed(() => flattenTree(rows.value, accessors(), new Set(expanded.value), { order: (level) => manualSort.value ? level : sortRows(level, columns.value, sort.value, lang.code) }));
+	const index = computed(() => rest.selectionMode === "multiple" && !checkStrictly.value ? indexTree(rows.value, accessors()) : null);
+	const states = computed(() => index.value ? checkStates(index.value, selected.value) : null);
+	const checkedKeys = computed(() => states.value ? [...states.value].flatMap(([key, state]) => state === "checked" ? [key] : []) : selected.value);
+	const partialKeys = computed(() => states.value ? [...states.value].flatMap(([key, state]) => state === "indeterminate" ? [key] : []) : void 0);
+	/** DataTable 写回的勾选：只变了一行时按它联动子孙与祖先；全选、取消全选原样写回 */
+	function writeSelected(next) {
+		if (!index.value) {
+			selected.value = next;
+			return;
+		}
+		const before = new Set(checkedKeys.value);
+		const after = new Set(next);
+		const changed = [...next.filter((key) => !before.has(key)), ...checkedKeys.value.filter((key) => !after.has(key))];
+		selected.value = changed.length === 1 ? toggleChecked(index.value, checkedKeys.value, changed[0]) : next;
+	}
+	const byKey = computed(() => new Map(flat.value.map((item) => [item.key, item])));
+	const nodes = computed(() => flat.value.map((item) => item.node));
+	const keyOf = (_, index) => flat.value[index].key;
+	function leading(model) {
+		const item = byKey.value.get(model.key);
+		const depth = item?.depth ?? 0;
+		const first = columns.value[0] ? columnValue(columns.value[0], model.data) : void 0;
+		const label = first != null ? String(first) : model.key;
+		const open = expansion.isExpanded(model.key);
+		return createVNode(Fragment, null, [depth > 0 && createVNode("span", css.attrs(treeDataTableIndentStyles.depth(depth * indent.value)), null), item?.expandable ? createVNode(IconButton, mergePartProps({
+			icon: ChevronRight,
+			size: "sm",
+			radius: "full",
+			"aria-label": lang.treeToggle(label),
+			sx: treeDataTableStyles.toggle
+		}, propsToggle.value, {
+			loading: expansion.isLoading(model.key),
+			"aria-expanded": open,
+			propsIcon: mergeProps$1({
+				flipInRtl: true,
+				sx: disclosureStyles.icon
+			}, propsToggle.value?.propsIcon, open ? { sx: treeDataTableStyles.chevronOpen } : void 0),
+			onClick: () => void expansion.setOpen(model.data, model.key, !open)
+		}), null) : createVNode("span", css.attrs(treeDataTableStyles.placeholder), null)]);
+	}
+	return () => createVNode(DataTable, mergeProps(rest, {
+		"rows": nodes.value,
+		"getKey": keyOf,
+		"columns": columns.value,
+		"manualSort": true,
+		"_sort": sort.value,
+		"onUpdate:_sort": _cache[0] || (_cache[0] = ($event) => sort.value = $event),
+		"_selected": checkedKeys.value,
+		"onUpdate:_selected": writeSelected,
+		"partialKeys": partialKeys.value,
+		"_columnWidths": columnWidths.value,
+		"onUpdate:_columnWidths": _cache[1] || (_cache[1] = ($event) => columnWidths.value = $event),
+		"leading": leading
+	}), null);
+}, {
+	name: "TreeDataTable",
+	props: [
+		"rows",
+		"columns",
+		"getKey",
+		"getChildren",
+		"hasChildren",
+		"loadChildren",
+		"onLoadError",
+		"_expanded",
+		"onUpdate:_expanded",
+		"indent",
+		"checkStrictly",
+		"propsToggle",
+		"_sort",
+		"onUpdate:_sort",
+		"manualSort",
+		"_selected",
+		"onUpdate:_selected",
+		"_columnWidths",
+		"onUpdate:_columnWidths"
+	]
+});
+//#endregion
+export { TreeDataTable, treeDataTableIndentStyles, treeDataTableStyles };
+
+//# sourceMappingURL=TreeDataTable.js.map

package/dist/table/TreeDataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeDataTable.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_computed","_createVNode","_Fragment","mergeProps","_mergeProps"],"sources":["../../src/table/TreeDataTable.tsx"],"sourcesContent":["/**\n * 树形表格：有层级的行（部门 → 小组 → 成员、文件夹 → 文件），第一列带缩进与展开按钮。\n * 建在 DataTable 上：列定义、排序、勾选、列宽、虚拟滚动、加载与空状态、外观都和 DataTable 一样；\n * 这里只做两件事：按展开状态把树展开成一列行（同级之间按 sort 排序），以及第一列前面的缩进与展开按钮。\n *\n *   <TreeDataTable\n *     rows={departments}\n *     columns={columns}\n *     getKey={(row) => row.id}\n *     getChildren={(row) => row.children}\n *     _expanded={open}\n *     aria-label=\"组织架构\"\n *   />\n *\n * - 懒加载：hasChildren 说有子项、getChildren 还没有时，展开会调用 loadChildren（加载中按钮显示加载指示），\n *   调用方把取到的子项放进数据里。\n * - 展开按钮的名称是“行名 的子项”（第一列的文字），展开与否由 aria-expanded 表示。\n *   表格仍是 table 语义（不是 treegrid：那要求逐个单元格的方向键导航），层级由缩进与按钮表达。\n *\n * 部件：DataTable 的全部部件，加上 Toggle（展开按钮，IconButton）。\n */\nimport { ChevronRight } 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 { IconProps } from '../base/Icon';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport {\n  checkStates,\n  flattenTree,\n  indexTree,\n  toggleChecked,\n  useTreeExpansion,\n  type TreeAccessors,\n} from '../utils/data/tree';\nimport { mergePartProps, mergeProps } from '../utils/props';\nimport { columnValue, sortRows, type SortState } from './columns';\nimport { DataTable, type DataTableProps } from './DataTable';\nimport type { DataTableRowModel } from './DataTableView';\nimport { disclosureStyles } from '../utils/style/transitions';\n\n/** 未声明的属性落到 table 上；aria-label 或 aria-labelledby 是表格的名称 */\nexport interface TreeDataTableProps<T> extends Omit<DataTableProps<T>, 'leading'> {\n  /** 第一层的行 */\n  rows: readonly T[];\n  /** 一行的子项；没有子项（叶子）或还没加载时返回 undefined / 空数组 */\n  getChildren: (row: T) => readonly T[] | undefined;\n  /** 这一行有没有子项（懒加载时子项还没取回来也要显示展开按钮）；不写时看 getChildren 是否非空 */\n  hasChildren?: (row: T) => boolean;\n  /** 展开一个还没有子项的行时调用：取回子项并放进数据里；返回 Promise 时按钮显示加载中 */\n  loadChildren?: (row: T) => Promise<unknown> | void;\n  /** 子项加载失败（loadChildren 的 Promise 被拒绝）：这一行收回去，再展开会重试；不写时在控制台报错 */\n  onLoadError?: (error: unknown, row: T) => void;\n  /** 展开的行的 key：父级写 _expanded={keys} */\n  _expanded?: string[];\n  /** 每一层缩进多少（em），默认 1.25 */\n  indent?: number;\n  /** 多选时勾选父子不联动：每一行各自勾选；默认联动（勾上父行连带子孙，子行全勾上时父行也勾上，只勾一部分时父行半选） */\n  checkStrictly?: boolean;\n  /** 展开按钮的部件属性；加载中、展开状态与点击由组件管理 */\n  propsToggle?: Omit<Partial<IconButtonProps>, 'loading' | 'aria-expanded' | 'onClick'>;\n}\n\n/** TreeDataTable 的样式：toggle、chevronOpen、placeholder */\nexport const treeDataTableStyles = css.create({\n  toggle: { flexShrink: 0, width: '1.5em', minHeight: '1.5em' },\n  chevronOpen: { rotate: '90deg' },\n  // 叶子没有按钮，用同样宽的占位让文字对齐\n  placeholder: { flexShrink: 0, width: '1.5em' },\n});\n\n// 缩进是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** TreeDataTable 的样式：depth */\nexport const treeDataTableIndentStyles = css.create({\n  depth: (em: number) => ({ width: `${em}em`, flexShrink: 0 }),\n});\n\n/** 树形表格：按展开状态展开的层级行，复用 DataTable 的一切 */\nexport const TreeDataTable = _component(\n  <T,>({\n    rows,\n    columns,\n    getKey,\n    getChildren,\n    hasChildren,\n    loadChildren,\n    onLoadError,\n    _expanded: expanded = _bindable<string[]>([]),\n    indent = 1.25,\n    checkStrictly = false,\n    propsToggle,\n    _sort: sort = _bindable<SortState | null>(null),\n    manualSort = false,\n    _selected: selected = _bindable<string[]>([]),\n    _columnWidths: columnWidths = _bindable<Record<string, number>>({}),\n    ...rest\n  }: TreeDataTableProps<T>) => {\n    const lang = useLang();\n    const accessors = (): TreeAccessors<T> => ({ getKey, getChildren, hasChildren });\n    const expansion = useTreeExpansion<T>({\n      expanded: () => expanded,\n      setExpanded: (keys) => (expanded = keys),\n      getChildren: (row) => getChildren(row),\n      loadChildren: (row) => loadChildren?.(row),\n      // 没给 onLoadError 时交给 useTreeExpansion 在控制台报错\n      onLoadError: _untrack(onLoadError) && ((error, row) => onLoadError?.(error, row)),\n    });\n\n    /** 按展开状态深度优先展开成一列；同级之间按当前排序（manualSort 时按数据里的顺序） */\n    const flat = _derived.by(() =>\n      flattenTree(rows, accessors(), new Set(expanded), {\n        order: (level) => (manualSort ? level : sortRows(level, columns, sort, lang.code)),\n      }),\n    );\n\n    // 多选联动：整棵树的索引（含折叠着的行），勾选状态按它推出；交给 DataTable 的是实际勾上的行与半选的父行\n    const index = _derived.by(() =>\n      rest.selectionMode === 'multiple' && !checkStrictly ? indexTree(rows, accessors()) : null,\n    );\n    const states = _derived.by(() => (index ? checkStates(index, selected) : null));\n    const checkedKeys = _derived.by(() =>\n      states ? [...states].flatMap(([key, state]) => (state === 'checked' ? [key] : [])) : selected,\n    );\n    const partialKeys = _derived.by(() =>\n      states\n        ? [...states].flatMap(([key, state]) => (state === 'indeterminate' ? [key] : []))\n        : undefined,\n    );\n\n    /** DataTable 写回的勾选：只变了一行时按它联动子孙与祖先；全选、取消全选原样写回 */\n    function writeSelected(next: string[]) {\n      if (!index) {\n        selected = next;\n        return;\n      }\n      const before = new Set(checkedKeys);\n      const after = new Set(next);\n      const changed = [\n        ...next.filter((key) => !before.has(key)),\n        ...checkedKeys.filter((key) => !after.has(key)),\n      ];\n      selected = changed.length === 1 ? toggleChecked(index, checkedKeys, changed[0]!) : next;\n    }\n    const byKey = _derived.by(() => new Map(flat.map((item) => [item.key, item])));\n    // 交给 DataTable 的行与取 key 的函数要保持同一个引用：每次渲染都新建的话，DataTable 会重排全部行\n    const nodes = _derived(flat.map((item) => item.node));\n    const keyOf = (_: T, index: number) => flat[index]!.key;\n\n    function leading(model: DataTableRowModel<T>) {\n      const item = byKey.get(model.key);\n      const depth = item?.depth ?? 0;\n      const first = columns[0] ? columnValue(columns[0], model.data) : undefined;\n      const label = first != null ? String(first) : model.key;\n      const open = expansion.isExpanded(model.key);\n      return (\n        <>\n          {depth > 0 && <span {...css.attrs(treeDataTableIndentStyles.depth(depth * indent))} />}\n          {item?.expandable ? (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                {\n                  icon: ChevronRight,\n                  size: 'sm',\n                  radius: 'full',\n                  'aria-label': lang.treeToggle(label),\n                  sx: treeDataTableStyles.toggle,\n                },\n                propsToggle,\n                {\n                  loading: expansion.isLoading(model.key),\n                  'aria-expanded': open,\n                  // 箭头的转向跟着展开状态：使用方的 propsIcon 合并进来，而不是整个替换掉\n                  propsIcon: mergeProps<IconProps>(\n                    { flipInRtl: true, sx: disclosureStyles.icon },\n                    propsToggle?.propsIcon,\n                    open ? { sx: treeDataTableStyles.chevronOpen } : undefined,\n                  ),\n                  onClick: () => void expansion.setOpen(model.data, model.key, !open),\n                },\n              )}\n            />\n          ) : (\n            <span {...css.attrs(treeDataTableStyles.placeholder)} />\n          )}\n        </>\n      );\n    }\n\n    return () => (\n      <DataTable\n        {...rest}\n        rows={nodes}\n        getKey={keyOf}\n        columns={columns}\n        manualSort\n        _sort={sort}\n        _selected={checkedKeys as string[]}\n        onUpdate:_selected={writeSelected}\n        partialKeys={partialKeys}\n        _columnWidths={columnWidths}\n        leading={leading}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/table/column-display.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 列的默认显示（DataTable、ColumnTable 共用）：没写 align 的按值类型对齐，没写 cell 的按类型与语言格式化；
+ * 空值显示列的 empty（默认语言包的 —），状态列显示成 StatusBadge。在组件 setup 里调用。
+ *
+ *   const display = useColumnDisplay<Order>();
+ *   const shown = display.columns(columns, types);   // types：各列的值类型（columnType），与 columns 一一对应
+ *   display.value(column, type, total)               // 合计行这类单独的值
+ */
+import type { VNodeChild } from 'vue';
+import type { SortValue } from '../utils/data/collation';
+import { type ColumnTypes, type DataTableColumn } from './columns';
+/** useColumnDisplay 的返回值 */
+export interface ColumnDisplay<T> {
+    /** 补上默认对齐与格式化的列；types 是各列的值类型（与 columns 一一对应） */
+    columns(columns: readonly DataTableColumn<T>[], types: readonly (keyof ColumnTypes)[]): DataTableColumn<T>[];
+    /** 一个值的显示：空值显示 empty，状态显示成 StatusBadge（外观跟随 defaults.Badge），其余按类型与 format 格式化 */
+    value(column: DataTableColumn<T>, type: keyof ColumnTypes, value: SortValue): VNodeChild;
+}
+/** 列的默认显示：在 setup 里调用 */
+export declare function useColumnDisplay<T>(): ColumnDisplay<T>;

package/dist/table/column-display.js

@@ -0,0 +1,43 @@
+import { useLang } from "../config/context.js";
+import { StatusBadge } from "../base/Badge.js";
+import { useFormat } from "../config/lang/format.js";
+import { columnAlign, columnValue, formatCell } from "./columns.js";
+import { createVNode } from "vue";
+//#region src/table/column-display.tsx
+/**
+* 列的默认显示（DataTable、ColumnTable 共用）：没写 align 的按值类型对齐，没写 cell 的按类型与语言格式化；
+* 空值显示列的 empty（默认语言包的 —），状态列显示成 StatusBadge。在组件 setup 里调用。
+*
+*   const display = useColumnDisplay<Order>();
+*   const shown = display.columns(columns, types);   // types：各列的值类型（columnType），与 columns 一一对应
+*   display.value(column, type, total)               // 合计行这类单独的值
+*/
+/** useColumnDisplay 的返回值 */
+/** 列的默认显示：在 setup 里调用 */
+function useColumnDisplay() {
+	const lang = useLang();
+	const format = useFormat();
+	const display = (column, type, value) => {
+		if (value == null || value === "") return column.empty ?? lang.emptyValue;
+		if (column.statuses) return createVNode(StatusBadge, {
+			"statuses": column.statuses,
+			"value": String(value)
+		}, null);
+		return formatCell(value, type, format, column.format);
+	};
+	return {
+		columns: (columns, types) => columns.map((column, position) => {
+			const type = types[position] ?? "text";
+			return {
+				...column,
+				align: column.align ?? (column.statuses ? "start" : columnAlign(type)),
+				cell: column.cell ?? ((row) => display(column, type, columnValue(column, row)))
+			};
+		}),
+		value: display
+	};
+}
+//#endregion
+export { useColumnDisplay };
+
+//# sourceMappingURL=column-display.js.map

package/dist/table/column-display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-display.js","names":["_createVNode"],"sources":["../../src/table/column-display.tsx"],"sourcesContent":["/**\n * 列的默认显示（DataTable、ColumnTable 共用）：没写 align 的按值类型对齐，没写 cell 的按类型与语言格式化；\n * 空值显示列的 empty（默认语言包的 —），状态列显示成 StatusBadge。在组件 setup 里调用。\n *\n *   const display = useColumnDisplay<Order>();\n *   const shown = display.columns(columns, types);   // types：各列的值类型（columnType），与 columns 一一对应\n *   display.value(column, type, total)               // 合计行这类单独的值\n */\nimport type { VNodeChild } from 'vue';\nimport { StatusBadge } from '../base/Badge';\nimport { useLang } from '../config/context';\nimport { useFormat } from '../config/lang/format';\nimport type { SortValue } from '../utils/data/collation';\nimport {\n  columnAlign,\n  columnValue,\n  formatCell,\n  type ColumnTypes,\n  type DataTableColumn,\n} from './columns';\n\n/** useColumnDisplay 的返回值 */\nexport interface ColumnDisplay<T> {\n  /** 补上默认对齐与格式化的列；types 是各列的值类型（与 columns 一一对应） */\n  columns(\n    columns: readonly DataTableColumn<T>[],\n    types: readonly (keyof ColumnTypes)[],\n  ): DataTableColumn<T>[];\n  /** 一个值的显示：空值显示 empty，状态显示成 StatusBadge（外观跟随 defaults.Badge），其余按类型与 format 格式化 */\n  value(column: DataTableColumn<T>, type: keyof ColumnTypes, value: SortValue): VNodeChild;\n}\n\n/** 列的默认显示：在 setup 里调用 */\nexport function useColumnDisplay<T>(): ColumnDisplay<T> {\n  const lang = useLang();\n  const format = useFormat();\n\n  const display: ColumnDisplay<T>['value'] = (column, type, value) => {\n    if (value == null || value === '') return column.empty ?? lang.emptyValue;\n    if (column.statuses) return <StatusBadge statuses={column.statuses} value={String(value)} />;\n    return formatCell(value, type, format, column.format);\n  };\n\n  return {\n    columns: (columns, types) =>\n      columns.map((column, position): DataTableColumn<T> => {\n        const type = types[position] ?? 'text';\n        return {\n          ...column,\n          align: column.align ?? (column.statuses ? 'start' : columnAlign(type)),\n          cell: column.cell ?? ((row) => display(column, type, columnValue(column, row))),\n        };\n      }),\n    value: display,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiCA,SAAgB,mBAAwC;CACtD,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,UAAU;CAEzB,MAAM,WAAsC,QAAQ,MAAM,UAAU;EAClE,IAAI,SAAS,QAAQ,UAAU,IAAI,OAAO,OAAO,SAAS,KAAK;EAC/D,IAAI,OAAO,UAAU,OAAAA,YAAA,aAAA;GAAA,YAA8B,OAAO;GAAQ,SAAS,OAAO,KAAK;EAAC,GAAA,IAAA;EACxF,OAAO,WAAW,OAAO,MAAM,QAAQ,OAAO,MAAM;CACtD;CAEA,OAAO;EACL,UAAU,SAAS,UACjB,QAAQ,KAAK,QAAQ,aAAiC;GACpD,MAAM,OAAO,MAAM,aAAa;GAChC,OAAO;IACL,GAAG;IACH,OAAO,OAAO,UAAU,OAAO,WAAW,UAAU,YAAY,IAAI;IACpE,MAAM,OAAO,UAAU,QAAQ,QAAQ,QAAQ,MAAM,YAAY,QAAQ,GAAG,CAAC;GAC/E;EACF,CAAC;EACH,OAAO;CACT;AACF"}

package/dist/table/columns.d.ts

@@ -0,0 +1,244 @@
+/**
+ * 表格的列定义与排序：DataTable、TreeDataTable 共用（参考 TanStack DataTable 的列模型，只取最常用的部分）。
+ *
+ *   const columns: DataTableColumn<Order>[] = [
+ *     { key: 'id', header: '订单号', width: 120, sticky: 'start' },
+ *     { key: 'customer', header: '客户', sortable: true },
+ *     { key: 'amount', header: '金额', type: 'currency', sortable: true },
+ *   ];
+ */
+import type { VNodeChild } from 'vue';
+import type { NumericFormat, useFormat } from '../config/lang/format';
+import { type SortValue } from '../utils/data/collation';
+import { type NumericValue } from '../utils/data/numeric';
+import type { StatusMap } from '../utils/data/status';
+/** 单元格内容的对齐 */
+export interface ColumnAligns {
+    /** 起始边（默认）：文字 */
+    start: unknown;
+    /** 居中：状态、图标 */
+    center: unknown;
+    /** 结束边：数字、金额，方便对比位数 */
+    end: unknown;
+}
+/** 列的值类型：不写 cell 时按它格式化（跟随语言），数字类默认靠结束边对齐 */
+export interface ColumnTypes {
+    /** 文字：原样显示 */
+    text: unknown;
+    /** 数字：按语言分组，1234.5 → 1,234.5 */
+    number: unknown;
+    /** 金额，语言的币种：19.9 → ¥19.90 */
+    currency: unknown;
+    /** 百分比：0.125 → 12.5% */
+    percent: unknown;
+    /** 文件大小（字节）：1234567 → 1.2 MB */
+    fileSize: unknown;
+    /** 日期：Date、DateValue 或 ISO 字符串 */
+    date: unknown;
+    /** 日期与时间 */
+    dateTime: unknown;
+}
+/** 固定在哪一侧（横向滚动时不动） */
+export interface ColumnStickies {
+    /** 起始边：名称、编号 */
+    start: unknown;
+    /** 结束边：操作 */
+    end: unknown;
+}
+/** 表头筛选里的一个选项 */
+export interface ColumnFilterOption {
+    /** 值：筛选状态里存它，默认与这一列的值（转成文字）比较 */
+    value: string;
+    /** 显示的文字；不写时用 value */
+    label?: VNodeChild;
+}
+/** 列的表头筛选 */
+export interface ColumnFilter<T> {
+    /**
+     * 选项（可以多选）：不写时列出这一列出现过的值（有 statuses 时显示状态的名称）；
+     * 'text' 是输入关键字，不列选项
+     */
+    options?: readonly (string | ColumnFilterOption)[] | 'text';
+    /** 这一行留不留：values 是选中的值（关键字筛选时是 [关键字]）；默认这一列的值在其中 / 文字包含关键字 */
+    match?: (row: T, values: readonly string[]) => boolean;
+}
+/** 自定义单元格编辑器拿到的 */
+export interface CellEditorContext<T> {
+    /** 这一行 */
+    row: T;
+    /** 正在编辑的值（草稿） */
+    value: unknown;
+    /** 改草稿 */
+    onChange: (value: unknown) => void;
+    /** 提交（校验通过后交给 onCellChange） */
+    commit: () => void;
+    /** 放弃，回到原来的值 */
+    cancel: () => void;
+    /** 校验没过的原因：编辑器用它标出错误（aria-invalid） */
+    error: string | undefined;
+}
+/** 一列 */
+export interface DataTableColumn<T> {
+    /** 列的标识：同一表格里不能重复；不写 value 时也是取值的字段名 */
+    key: string;
+    /** 表头内容 */
+    header: VNodeChild;
+    /** 单元格内容；不写时按 type 格式化 value */
+    cell?: (row: T, index: number) => VNodeChild;
+    /** 值的类型：决定默认的格式与对齐；不写时按第一个非空值推断（数字 → number，日期 → date，其余 text） */
+    type?: keyof ColumnTypes;
+    /**
+     * 数字类（number、currency、percent）的格式，与 type 的默认格式合并：
+     * 金额以万元显示写 `{ scale: 10_000, maximumFractionDigits: 2 }`（单位写在表头里），美元写 `{ currency: 'USD' }`
+     */
+    format?: NumericFormat;
+    /** 排序用的值；不写时取 row[key] */
+    value?: (row: T) => SortValue;
+    /** 宽度（px）；不写时与其他没写宽度的列平分剩余宽度。固定列一定要写（偏移量按它算） */
+    width?: number;
+    /**
+     * 最小宽度（px）：拖动调整宽度时不能更窄，默认 COLUMN_MIN_WIDTH（64）；
+     * 没写宽度的列按它（默认 COLUMN_FLEX_MIN_WIDTH）算表格的最小宽度，放不下时横向滚动而不是继续压窄
+     */
+    minWidth?: number;
+    /** 对齐；默认数字类（number、currency、percent、fileSize）靠 end，其余 start */
+    align?: keyof ColumnAligns;
+    /** 可以点表头排序 */
+    sortable?: boolean;
+    /** 表头筛选：true 列出这一列出现过的值，也可以给选项或关键字筛选（见 ColumnFilter） */
+    filter?: boolean | ColumnFilter<T>;
+    /** 可以编辑（DataTable 的 onCellChange 写回）：true 或按行判断；表格随之变成可以用方向键走格的网格 */
+    editable?: boolean | ((row: T) => boolean);
+    /**
+     * 编辑器：不写时按列选——状态列是 Select，数字类是 NumberField，其余是 TextField。
+     * 自己写时拿到草稿与提交、放弃（日期、下拉选人这类）
+     */
+    editor?: (context: CellEditorContext<T>) => VNodeChild;
+    /** 提交前校验这一格：返回原因就不提交，编辑器标红并说明 */
+    validate?: (value: unknown, row: T) => string | null | undefined;
+    /** 固定在哪一侧 */
+    sticky?: keyof ColumnStickies;
+    /** 可以拖动调整宽度；不写时跟随表格的 resizable */
+    resizable?: boolean;
+    /** 内容可以换行；默认一行显示不下时省略 */
+    wrap?: boolean;
+    /** 没有值（null、undefined、空字符串）时显示的内容，如“待定价”；默认语言包的 emptyValue（—） */
+    empty?: VNodeChild;
+    /** 状态映射（createStatusMap）：值是状态的 key，显示成 StatusBadge；写了 cell 时以 cell 为准 */
+    statuses?: StatusMap;
+    /**
+     * 合计行里这一列的内容：`'sum'` 把这一列的数值精确相加（有 Decimal 时按 Decimal），按列的类型与 format 显示；
+     * 也可以是函数，拿到全部行（如平均值、“3 项待定价”）。有一列写了 summary，表格底部就多一行吸底的合计
+     */
+    summary?: 'sum' | ((rows: readonly T[]) => VNodeChild);
+}
+/** 分组表头：相邻的几列上方共用一个标题（如“测算”下的 A、B、D 值）；只分一层 */
+export interface DataTableColumnGroup {
+    /** 组的标识 */
+    key: string;
+    /** 组标题 */
+    header: VNodeChild;
+    /** 组里各列的 key：要相邻，显示顺序随列定义 */
+    columns: readonly string[];
+}
+/** 表头第一行的一格：一个分组（跨组里的几列），或没有分组的一列（跨两行） */
+export type HeaderLayoutCell<T> = {
+    kind: 'group';
+    group: DataTableColumnGroup;
+    columns: DataTableColumn<T>[];
+} | {
+    kind: 'column';
+    column: DataTableColumn<T>;
+};
+/**
+ * 按分组排出表头第一行：隐藏了的列不算，组里的列全隐藏时这一组也不显示；
+ * 组里的列被别的列隔开时，后一段另起一格、重复组标题
+ */
+export declare function headerLayout<T>(columns: readonly DataTableColumn<T>[], groups: readonly DataTableColumnGroup[]): HeaderLayoutCell<T>[];
+/** 排序方向（与 aria-sort 的取值一致） */
+export interface SortDirections {
+    /** 升序：小到大、A 到 Z */
+    ascending: unknown;
+    /** 降序 */
+    descending: unknown;
+}
+/** 当前的排序：按哪一列、哪个方向 */
+export interface SortState {
+    /** 列的 key */
+    key: string;
+    /** 方向 */
+    direction: keyof SortDirections;
+}
+/** 没写宽度的列，计算表格最小宽度与固定列偏移时按这么宽算（px） */
+export declare const COLUMN_FLEX_MIN_WIDTH = 120;
+/** 拖动调整列宽时默认的最小宽度（px） */
+export declare const COLUMN_MIN_WIDTH = 64;
+/** 列当前的宽度（px）：调整过的、列定义里的；都没有时 undefined（与其他没写宽度的列平分） */
+export type ColumnWidthOf<T> = (column: DataTableColumn<T>) => number | undefined;
+/** 固定列的偏移（px），按列的 key 取 */
+export interface StickyOffsets {
+    /** 固定在起始边的列 */
+    start: Map<string, number>;
+    /** 固定在结束边的列 */
+    end: Map<string, number>;
+    /** 起始边固定列里最靠里的一列（挨着滚动的列，画分隔线） */
+    startEdge?: string;
+    /** 结束边固定列里最靠里的一列 */
+    endEdge?: string;
+}
+/** 固定列的偏移（px）：起始边的从 leading（勾选列的宽度）之后累加，结束边的从末尾往回累加 */
+export declare function stickyOffsets<T>(columns: readonly DataTableColumn<T>[], widthOf: ColumnWidthOf<T>, leading: number): StickyOffsets;
+/** 两组固定列的偏移是否相同（列与偏移都一样） */
+export declare function sameStickyOffsets(a: StickyOffsets, b: StickyOffsets): boolean;
+/** 表格的最小宽度（px）：写了宽度的列按宽度，没写的按 minWidth 或 COLUMN_FLEX_MIN_WIDTH；放不下时横向滚动 */
+export declare function tableMinWidth<T>(columns: readonly DataTableColumn<T>[], widthOf: ColumnWidthOf<T>, leading: number): number;
+/** 列在这一行的值：value 函数，或 row[key] */
+export declare function columnValue<T>(column: DataTableColumn<T>, row: T): SortValue;
+/**
+ * 列的值类型：写了 type 用它；写了数字格式（format）、或合计是 'sum' 的是数字列（这一页全是空值时也靠结束边对齐）；
+ * 否则看第一个非空值（ISO 字符串不猜，算文字）
+ */
+export declare function columnType<T>(column: DataTableColumn<T>, rows: Iterable<T>): keyof ColumnTypes;
+/** 列的对齐：写了 align 用它，数字类靠结束边方便对比位数 */
+export declare function columnAlign(type: keyof ColumnTypes): keyof ColumnAligns;
+/** 没写 cell 时单元格的文字：按值类型与当前语言格式化；值与类型对不上（数字列里的文字）时原样显示 */
+export declare function formatCell(value: SortValue, type: keyof ColumnTypes, format: ReturnType<typeof useFormat>, options?: NumericFormat): string;
+/**
+ * 一列数值的合计：跳过空值与不是数字的值；有 Decimal 时用它的构造函数精确相加，全是 bigint 时整数相加，
+ * 接口给的十进制字符串（'19.90'）按数字算。没有任何数值时为 null
+ */
+export declare function sumColumn<T>(column: DataTableColumn<T>, rows: Iterable<T>): NumericValue | null;
+/** 点表头时的下一个排序：没排 → 升序 → 降序 → 不排 */
+export declare function nextSort(current: SortState | null | undefined, key: string): SortState | null;
+/**
+ * 多列排序时点表头：additive（按住 Shift）时在已有的排序后面加上这一列、或切换它的方向（降序时再点去掉）；
+ * 否则只按这一列（同 nextSort）
+ */
+export declare function nextSorts(current: readonly SortState[], key: string, additive: boolean): SortState[];
+/** 排序状态统一成数组：单列排序是一个或零个 */
+export declare function sortList(sort: SortState | readonly SortState[] | null | undefined): readonly SortState[];
+/**
+ * 排序写成一段文字：逗号分隔的列 key，倒序的前面加减号（同 JSON:API），如 `-amount,name`；没有排序时是空字符串。
+ * 地址栏的 sort 参数与发给服务端的 sort 参数都是它，query 库的 `sortBy` 直接认
+ */
+export declare function formatSorts(sort: SortState | readonly SortState[] | null | undefined): string;
+/** 读 formatSorts 写的文字：`-amount,name` 是两列排序；空的项跳过 */
+export declare function parseSorts(text: string): SortState[];
+/**
+ * 按当前排序排列（返回新数组，原数组不变）；可以是几列（前一列相等时比下一列），没有排序、排序列都不存在时原样返回。
+ * 比较用 createComparer：数字按大小、日期按时间、文字按语言（中文按拼音、“第2章”在“第10章”前），空值总在最后
+ */
+export declare function sortRows<T>(rows: readonly T[], columns: readonly DataTableColumn<T>[], sort: SortState | readonly SortState[] | null | undefined, locale: string): readonly T[];
+/** 这一格能不能编辑 */
+export declare function isCellEditable<T>(column: DataTableColumn<T>, row: T): boolean;
+/** 列的筛选设置：没写或 false 时 undefined，true 是列出出现过的值 */
+export declare function columnFilter<T>(column: DataTableColumn<T>): ColumnFilter<T> | undefined;
+/** 表头筛选的选项：写了的原样（字符串转成选项），没写的列出这一列出现过的值（按语言排序，有 statuses 时用状态名） */
+export declare function filterOptions<T>(column: DataTableColumn<T>, rows: Iterable<T>, locale: string): ColumnFilterOption[];
+/** 按表头筛选留下的行：filters 是各列选中的值（关键字筛选时是 [关键字]），空的不算 */
+export declare function filterRows<T>(rows: readonly T[], columns: readonly DataTableColumn<T>[], filters: Readonly<Record<string, readonly string[]>>, locale: string): readonly T[];
+/**
+ * 列的位置调整（列菜单、列设置）：order 是列的 key 的顺序，没列到的按定义的顺序排在后面；
+ * pins 覆盖列的 sticky（null 取消固定）。固定在起始边的排到最前、结束边的排到最后：固定列要挨着表格的边
+ */
+export declare function arrangeColumns<T>(columns: readonly DataTableColumn<T>[], order: readonly string[] | undefined, pins: Readonly<Record<string, keyof ColumnStickies | null>> | undefined): DataTableColumn<T>[];