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

package/dist/patterns/QueryTable.js

@@ -0,0 +1,276 @@
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { IconButton } from "../base/IconButton.js";
+import { Menu as Menu$1, MenuRadioGroup, MenuRadioItem } from "../overlay/Menu.js";
+import { PaginationBar } from "../navigation/PaginationBar.js";
+import { usePersistentState } from "../utils/dom/storage.js";
+import { ColumnSettings } from "../table/ColumnSettings.js";
+import { DataTable } from "../table/DataTable.js";
+import { SelectionBar } from "../table/SelectionBar.js";
+import { useMessages } from "../config/lang/messages.js";
+import { useFullscreen } from "../utils/dom/fullscreen.js";
+import { patternsMessages } from "./messages.js";
+import { FilterBar } from "./FilterBar.js";
+import { createVNode, mergeProps, reactive, shallowRef, toRaw } 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 { Maximize, Minimize, RefreshCw, Rows3 } from "@lucide/icons";
+//#region src/patterns/QueryTable.tsx
+/**
+* 查询表格（列表页的整块）：查询栏（FilterBar）+ 工具栏（标题、自己的按钮、刷新、行高、列设置、全屏）+ 批量操作栏 + 数据表格 + 分页栏，
+* 状态都在 useTableQuery 里（服务端分页、排序、条件）。同 Ant Design ProComponents 的 ProTable。
+*
+*   const tasks = useTableQuery(fetchTasks, { filters: { keyword: '', status: '' }, pageSize: 20 });
+*   <QueryTable
+*     query={tasks} columns={columns} getKey={(task) => task.id} title="任务台账" persistKey="tasks"
+*     filters={(draft) => <Field label="关键字"><TextField _value={draft.keyword} /></Field>}
+*     toolbar={<Button icon={Plus}>新建</Button>}
+*   />
+*
+* - 查询栏的条件改的是草稿（draft），点“查询”（或回车）才交给 query.search；“重置”回到 blankFilters（不写时是一开始的条件）并查询。
+* - 表头排序交给服务端（manualSort，写回 query.sort；multiSort 时按住 Shift 追加一列，写回 query.sorts），
+*   表头筛选也交给服务端（manualFilter，写回 query.columnFilters；列的 filter 要写 options，否则只列出当前这页出现过的值），
+*   分页栏绑定 query.page / pageSize / total。fetcher 用 tableParams(query, columns) 把这些写成接口的参数。
+* - persistKey：列设置（显示、顺序、固定、列宽）与行高记在浏览器里，下次打开还是这样。
+* - selectionMode 时勾选行，表格上方出现批量操作栏，batchActions 拿到已选的 key 给出按钮。
+*
+* 部件：Root（div）、FilterBar、Panel（工具栏与表格所在的区域，全屏的就是它）、Toolbar（div）、Title（div）、
+* Table（DataTable）、SelectionBar、Pagination（PaginationBar）。
+*/
+/** 未声明的属性落到外层 div 上 */
+/** QueryTable 的样式：root、panel、panelFullscreen、toolbar、title、tools */
+var queryTableStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_md",
+		minWidth: 0
+	},
+	panel: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		minWidth: 0,
+		backgroundColor: "_surface"
+	},
+	panelFullscreen: {
+		padding: "_lg",
+		overflow: "auto"
+	},
+	toolbar: {
+		display: "flex",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: "_sm"
+	},
+	title: {
+		flexGrow: 1,
+		minWidth: 0,
+		fontWeight: "_semibold",
+		fontSize: "_lg"
+	},
+	tools: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_xs"
+	}
+});
+/** 存在浏览器里（给了 persistKey）或只在这次打开里有效的状态 */
+function settingRef(key, name, initial) {
+	return key ? usePersistentState(`${key}:${name}`, initial) : shallowRef(initial);
+}
+/** 查询表格：查询栏 + 工具栏 + 表格 + 分页，状态来自 useTableQuery */
+var QueryTable = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const query = readonlyProp(_props, "query");
+	const columns = readonlyProp(_props, "columns");
+	const getKey = readonlyProp(_props, "getKey");
+	const title = readonlyProp(_props, "title");
+	const filters = readonlyProp(_props, "filters");
+	const moreFilters = readonlyProp(_props, "moreFilters");
+	const blankFilters = readonlyProp(_props, "blankFilters");
+	const toolbar = readonlyProp(_props, "toolbar");
+	const persistKey = readonlyProp(_props, "persistKey");
+	const multiSort = readonlyProp(_props, "multiSort", false);
+	const selectionMode = readonlyProp(_props, "selectionMode");
+	const selected = bindable(_props, "_selected", () => [], _ctx.emit);
+	const batchActions = readonlyProp(_props, "batchActions");
+	const propsFilterBar = readonlyProp(_props, "propsFilterBar");
+	const propsPanel = readonlyProp(_props, "propsPanel");
+	const propsToolbar = readonlyProp(_props, "propsToolbar");
+	const propsTable = readonlyProp(_props, "propsTable");
+	const propsSelectionBar = readonlyProp(_props, "propsSelectionBar");
+	const propsPagination = readonlyProp(_props, "propsPagination");
+	const propsToolbarButton = readonlyProp(_props, "propsToolbarButton");
+	const rest = restProps(_props, _ctx, true);
+	const messages = useMessages("patterns", patternsMessages);
+	const initial = structuredClone(toRaw(untrack(() => query.value.filters)));
+	const draft = reactive({ ...initial });
+	const key = untrack(() => persistKey.value);
+	let hidden = settingRef(key, "hidden", []);
+	let order = settingRef(key, "order", []);
+	let pins = settingRef(key, "pins", {});
+	let widths = settingRef(key, "widths", {});
+	let density = settingRef(key, "density", "standard");
+	let panel = shallowRef(null);
+	const fullscreen = useFullscreen(() => panel.value);
+	function search() {
+		query.value.search(structuredClone(toRaw(draft)));
+	}
+	function reset() {
+		Object.assign(draft, structuredClone(toRaw(blankFilters.value ?? initial)));
+		search();
+	}
+	const toolButton = (props) => mergePartProps({
+		icon: RefreshCw,
+		variant: "ghost",
+		tone: "neutral",
+		"aria-label": ""
+	}, propsToolbarButton.value, props);
+	function renderTools() {
+		return createVNode("div", css.attrs(queryTableStyles.tools), [
+			createVNode(IconButton, toolButton({
+				icon: RefreshCw,
+				"aria-label": messages.queryTableRefresh,
+				loading: query.value.loading,
+				onClick: () => void query.value.refresh()
+			}), null),
+			createVNode(Menu$1, {
+				"placement": "bottom-end",
+				"trigger": _cache[0] || (_cache[0] = (props) => createVNode(IconButton, mergeProps(toolButton({
+					icon: Rows3,
+					"aria-label": messages.queryTableDensity
+				}), props), null))
+			}, {
+				default: () => [createVNode(MenuRadioGroup, {
+					"_value": density.value,
+					"onUpdate:_value": _cache[1] || (_cache[1] = (value) => density.value = value)
+				}, {
+					default: () => [
+						createVNode(MenuRadioItem, { "value": "compact" }, {
+							default: () => [messages.queryTableDensityCompact],
+							$stable: true
+						}),
+						createVNode(MenuRadioItem, { "value": "standard" }, {
+							default: () => [messages.queryTableDensityStandard],
+							$stable: true
+						}),
+						createVNode(MenuRadioItem, { "value": "comfortable" }, {
+							default: () => [messages.queryTableDensityComfortable],
+							$stable: true
+						})
+					],
+					$stable: true
+				})],
+				$stable: true
+			}),
+			createVNode(ColumnSettings, {
+				"columns": columns.value,
+				"_hidden": hidden.value,
+				"onUpdate:_hidden": _cache[2] || (_cache[2] = ($event) => hidden.value = $event),
+				"_order": order.value,
+				"onUpdate:_order": _cache[3] || (_cache[3] = ($event) => order.value = $event),
+				"onReset": _cache[4] || (_cache[4] = () => {
+					pins.value = {};
+					widths.value = {};
+				}),
+				"propsTrigger": propsToolbarButton.value
+			}, null),
+			fullscreen.supported && createVNode(IconButton, toolButton({
+				icon: fullscreen.active ? Minimize : Maximize,
+				"aria-label": fullscreen.active ? messages.queryTableExitFullscreen : messages.queryTableFullscreen,
+				"aria-pressed": fullscreen.active,
+				onClick: () => void fullscreen.toggle()
+			}), null)
+		]);
+	}
+	return () => createVNode("div", mergeAttrs({ sx: queryTableStyles.root }, rest), [filters.value && createVNode(FilterBar, mergeProps(mergePartProps({ "aria-label": messages.queryTableSearch(title.value) }, propsFilterBar.value, {
+		onSearch: search,
+		onReset: reset,
+		loading: query.value.loading,
+		more: moreFilters.value?.(draft)
+	}), { "key": "__site0" }), {
+		default: () => [filters.value(draft)],
+		$stable: true
+	}), createVNode("div", mergeAttrs({ sx: [queryTableStyles.panel, fullscreen.active && queryTableStyles.panelFullscreen] }, propsPanel.value, { ref: panel }), [
+		createVNode("div", mergeAttrs({ sx: queryTableStyles.toolbar }, propsToolbar.value), [
+			createVNode("div", css.attrs(queryTableStyles.title), [title.value]),
+			toolbar.value,
+			renderTools()
+		]),
+		selectionMode.value === "multiple" && createVNode(SelectionBar, mergeProps(mergePartProps({ count: selected.value.length }, propsSelectionBar.value, {
+			count: selected.value.length,
+			onClear: () => selected.value = []
+		}), { "key": "__site1" }), {
+			default: () => [batchActions.value?.(selected.value)],
+			$stable: true
+		}),
+		createVNode(DataTable, mergeProps(mergePartProps({
+			"aria-label": title.value,
+			flexible: fullscreen.active
+		}, propsTable.value), {
+			"rows": query.value.rows,
+			"columns": columns.value,
+			"getKey": getKey.value,
+			"manualSort": true,
+			"multiSort": multiSort.value,
+			"_sort": query.value.sort,
+			"onUpdate:_sort": _cache[5] || (_cache[5] = ($event) => query.value.sort = $event),
+			"_sorts": query.value.sorts,
+			"onUpdate:_sorts": _cache[6] || (_cache[6] = ($event) => query.value.sorts = $event),
+			"manualFilter": true,
+			"_filters": query.value.columnFilters,
+			"onUpdate:_filters": _cache[7] || (_cache[7] = ($event) => query.value.columnFilters = $event),
+			"loading": query.value.loading,
+			"density": density.value,
+			"selectionMode": selectionMode.value,
+			"_selected": selected.value,
+			"onUpdate:_selected": _cache[8] || (_cache[8] = ($event) => selected.value = $event),
+			"_hiddenColumns": hidden.value,
+			"onUpdate:_hiddenColumns": _cache[9] || (_cache[9] = ($event) => hidden.value = $event),
+			"_columnOrder": order.value,
+			"onUpdate:_columnOrder": _cache[10] || (_cache[10] = ($event) => order.value = $event),
+			"_columnPins": pins.value,
+			"onUpdate:_columnPins": _cache[11] || (_cache[11] = ($event) => pins.value = $event),
+			"_columnWidths": widths.value,
+			"onUpdate:_columnWidths": _cache[12] || (_cache[12] = ($event) => widths.value = $event),
+			"resizable": true,
+			"columnMenu": true
+		}), null),
+		createVNode(PaginationBar, mergeProps(mergePartProps({ propsPagination: { "aria-label": messages.queryTablePagination(title.value) } }, propsPagination.value), {
+			"_page": query.value.page,
+			"onUpdate:_page": _cache[13] || (_cache[13] = ($event) => query.value.page = $event),
+			"_pageSize": query.value.pageSize,
+			"onUpdate:_pageSize": _cache[14] || (_cache[14] = ($event) => query.value.pageSize = $event),
+			"total": query.value.total
+		}), null)
+	])]);
+}, {
+	name: "QueryTable",
+	props: [
+		"query",
+		"columns",
+		"getKey",
+		"title",
+		"filters",
+		"moreFilters",
+		"blankFilters",
+		"toolbar",
+		"persistKey",
+		"multiSort",
+		"selectionMode",
+		"_selected",
+		"onUpdate:_selected",
+		"batchActions",
+		"propsFilterBar",
+		"propsPanel",
+		"propsToolbar",
+		"propsTable",
+		"propsSelectionBar",
+		"propsPagination",
+		"propsToolbarButton"
+	]
+});
+//#endregion
+export { QueryTable, queryTableStyles };
+
+//# sourceMappingURL=QueryTable.js.map

package/dist/patterns/QueryTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryTable.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","Menu","_mergeProps"],"sources":["../../src/patterns/QueryTable.tsx"],"sourcesContent":["/**\n * 查询表格（列表页的整块）：查询栏（FilterBar）+ 工具栏（标题、自己的按钮、刷新、行高、列设置、全屏）+ 批量操作栏 + 数据表格 + 分页栏，\n * 状态都在 useTableQuery 里（服务端分页、排序、条件）。同 Ant Design ProComponents 的 ProTable。\n *\n *   const tasks = useTableQuery(fetchTasks, { filters: { keyword: '', status: '' }, pageSize: 20 });\n *   <QueryTable\n *     query={tasks} columns={columns} getKey={(task) => task.id} title=\"任务台账\" persistKey=\"tasks\"\n *     filters={(draft) => <Field label=\"关键字\"><TextField _value={draft.keyword} /></Field>}\n *     toolbar={<Button icon={Plus}>新建</Button>}\n *   />\n *\n * - 查询栏的条件改的是草稿（draft），点“查询”（或回车）才交给 query.search；“重置”回到 blankFilters（不写时是一开始的条件）并查询。\n * - 表头排序交给服务端（manualSort，写回 query.sort；multiSort 时按住 Shift 追加一列，写回 query.sorts），\n *   表头筛选也交给服务端（manualFilter，写回 query.columnFilters；列的 filter 要写 options，否则只列出当前这页出现过的值），\n *   分页栏绑定 query.page / pageSize / total。fetcher 用 tableParams(query, columns) 把这些写成接口的参数。\n * - persistKey：列设置（显示、顺序、固定、列宽）与行高记在浏览器里，下次打开还是这样。\n * - selectionMode 时勾选行，表格上方出现批量操作栏，batchActions 拿到已选的 key 给出按钮。\n *\n * 部件：Root（div）、FilterBar、Panel（工具栏与表格所在的区域，全屏的就是它）、Toolbar（div）、Title（div）、\n * Table（DataTable）、SelectionBar、Pagination（PaginationBar）。\n */\nimport { Maximize, Minimize, RefreshCw, Rows3 } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { reactive, shallowRef, toRaw, type Ref, type VNodeChild } from 'vue';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useMessages } from '../config/lang/messages';\nimport { PaginationBar, type PaginationBarProps } from '../navigation/PaginationBar';\nimport { Menu, MenuRadioGroup, MenuRadioItem } from '../overlay/Menu';\nimport { ColumnSettings } from '../table/ColumnSettings';\nimport type { ColumnStickies, DataTableColumn } from '../table/columns';\nimport { DataTable, type DataTableProps } from '../table/DataTable';\nimport { SelectionBar, type SelectionBarProps } from '../table/SelectionBar';\nimport type { DataTableDensities } from '../table/table-styles';\nimport type { TablePage, TableQueryState } from '../table/use-table-query';\nimport { useFullscreen } from '../utils/dom/fullscreen';\nimport { usePersistentState } from '../utils/dom/storage';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { FilterBar, type FilterBarProps } from './FilterBar';\nimport { patternsMessages } from './messages';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface QueryTableProps<T, Filters extends object> extends PartProps<'div'> {\n  /** 列表状态：useTableQuery 的返回值 */\n  query: TableQueryState<TablePage<T>, Filters>;\n  /** 列定义 */\n  columns: readonly DataTableColumn<T>[];\n  /** 行的 key */\n  getKey: (row: T, index: number) => string;\n  /** 表格的名称（工具栏起始边的标题，也是表格的 aria-label） */\n  title: string;\n  /** 查询栏的条件：拿到草稿，控件绑定它的字段（`_value={draft.keyword}`）；不写时没有查询栏 */\n  filters?: (draft: Filters) => VNodeChild;\n  /** 收起的条件（不常用的），点“展开”才显示 */\n  moreFilters?: (draft: Filters) => VNodeChild;\n  /** “重置”回到的条件；不写时是 query 一开始的条件 */\n  blankFilters?: Filters;\n  /** 工具栏上自己的按钮（新建、导出），在标题之后、内置按钮之前 */\n  toolbar?: VNodeChild;\n  /** 列设置与行高记在浏览器里的键（localStorage，自动加前缀）；不写时只在这次打开里有效 */\n  persistKey?: string;\n  /** 多列排序：按住 Shift 点列标题追加一列（同 DataTable 的 multiSort），排序写在 query.sorts */\n  multiSort?: boolean;\n  /** 勾选行：多选时表格上方出现批量操作栏 */\n  selectionMode?: DataTableProps<T>['selectionMode'];\n  /** 已选行的 key：父级写 _selected={keys} */\n  _selected?: string[];\n  /** 批量操作栏里的按钮：拿到已选的 key */\n  batchActions?: (keys: readonly string[]) => VNodeChild;\n  /** 查询栏（FilterBar）的部件属性 */\n  propsFilterBar?: Partial<FilterBarProps>;\n  /** 工具栏与表格所在区域的部件属性（全屏的就是它） */\n  propsPanel?: PartProps<'div'>;\n  /** 工具栏的部件属性 */\n  propsToolbar?: PartProps<'div'>;\n  /** 表格（DataTable）的部件属性：列宽、详情行、行的色调等直接写在这里 */\n  propsTable?: Partial<DataTableProps<T>>;\n  /** 批量操作栏的部件属性 */\n  propsSelectionBar?: Partial<SelectionBarProps>;\n  /** 分页栏的部件属性 */\n  propsPagination?: Partial<PaginationBarProps>;\n  /** 工具栏内置按钮（刷新、行高、全屏）的部件属性 */\n  propsToolbarButton?: Partial<IconButtonProps>;\n}\n\n/** QueryTable 的样式：root、panel、panelFullscreen、toolbar、title、tools */\nexport const queryTableStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_md', minWidth: 0 },\n  panel: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    minWidth: 0,\n    backgroundColor: '_surface',\n  },\n  // 全屏时铺满屏幕、四周留白，表格占满剩下的高度\n  panelFullscreen: { padding: '_lg', overflow: 'auto' },\n  toolbar: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '_sm' },\n  title: { flexGrow: 1, minWidth: 0, fontWeight: '_semibold', fontSize: '_lg' },\n  tools: { display: 'flex', alignItems: 'center', gap: '_xs' },\n});\n\n/** 存在浏览器里（给了 persistKey）或只在这次打开里有效的状态 */\nfunction settingRef<V>(key: string | undefined, name: string, initial: V): Ref<V> {\n  return key ? usePersistentState(`${key}:${name}`, initial) : shallowRef(initial);\n}\n\n/** 查询表格：查询栏 + 工具栏 + 表格 + 分页，状态来自 useTableQuery */\nexport const QueryTable = _component(\n  <T, Filters extends object>({\n    query,\n    columns,\n    getKey,\n    title,\n    filters,\n    moreFilters,\n    blankFilters,\n    toolbar,\n    persistKey,\n    multiSort = false,\n    selectionMode,\n    _selected: selected = _bindable<string[]>([]),\n    batchActions,\n    propsFilterBar,\n    propsPanel,\n    propsToolbar,\n    propsTable,\n    propsSelectionBar,\n    propsPagination,\n    propsToolbarButton,\n    ...rest\n  }: QueryTableProps<T, Filters>) => {\n    const messages = useMessages('patterns', patternsMessages);\n    // 查询栏改的是草稿：点“查询”才交给 query\n    const initial = structuredClone(toRaw(_untrack(query.filters)));\n    const draft = reactive({ ...initial }) as Filters;\n    const key = _untrack(persistKey);\n    let hidden = _fromRef(settingRef<string[]>(key, 'hidden', []));\n    let order = _fromRef(settingRef<string[]>(key, 'order', []));\n    let pins = _fromRef(settingRef<Record<string, keyof ColumnStickies | null>>(key, 'pins', {}));\n    let widths = _fromRef(settingRef<Record<string, number>>(key, 'widths', {}));\n    let density = _fromRef(settingRef<keyof DataTableDensities>(key, 'density', 'standard'));\n    let panel = _state.raw<HTMLElement | null>(null);\n    const fullscreen = useFullscreen(() => panel);\n\n    function search() {\n      query.search(structuredClone(toRaw(draft)) as Filters);\n    }\n\n    function reset() {\n      Object.assign(draft, structuredClone(toRaw(blankFilters ?? initial)));\n      search();\n    }\n\n    const toolButton = (props: Partial<IconButtonProps>) =>\n      mergePartProps<IconButtonProps>(\n        { icon: RefreshCw, variant: 'ghost', tone: 'neutral', 'aria-label': '' },\n        propsToolbarButton,\n        props,\n      );\n\n    function renderTools() {\n      return (\n        <div {...css.attrs(queryTableStyles.tools)}>\n          <IconButton\n            {...toolButton({\n              icon: RefreshCw,\n              'aria-label': messages.queryTableRefresh,\n              loading: query.loading,\n              onClick: () => void query.refresh(),\n            })}\n          />\n          <Menu\n            placement=\"bottom-end\"\n            trigger={(props) => (\n              <IconButton\n                {...toolButton({ icon: Rows3, 'aria-label': messages.queryTableDensity })}\n                {...props}\n              />\n            )}\n          >\n            <MenuRadioGroup\n              _value={density}\n              onUpdate:_value={(value: string) => (density = value as keyof DataTableDensities)}\n            >\n              <MenuRadioItem value=\"compact\">{messages.queryTableDensityCompact}</MenuRadioItem>\n              <MenuRadioItem value=\"standard\">{messages.queryTableDensityStandard}</MenuRadioItem>\n              <MenuRadioItem value=\"comfortable\">\n                {messages.queryTableDensityComfortable}\n              </MenuRadioItem>\n            </MenuRadioGroup>\n          </Menu>\n          <ColumnSettings\n            columns={columns}\n            _hidden={hidden}\n            _order={order}\n            onReset={() => {\n              pins = {};\n              widths = {};\n            }}\n            propsTrigger={propsToolbarButton}\n          />\n          {fullscreen.supported && (\n            <IconButton\n              {...toolButton({\n                icon: fullscreen.active ? Minimize : Maximize,\n                'aria-label': fullscreen.active\n                  ? messages.queryTableExitFullscreen\n                  : messages.queryTableFullscreen,\n                'aria-pressed': fullscreen.active,\n                onClick: () => void fullscreen.toggle(),\n              })}\n            />\n          )}\n        </div>\n      );\n    }\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: queryTableStyles.root }, rest)}>\n        {filters && (\n          <FilterBar\n            {...mergePartProps<Partial<FilterBarProps>>(\n              // 一页上可能有几个查询栏：各有名称，search 地标才分得清\n              { 'aria-label': messages.queryTableSearch(title) },\n              propsFilterBar,\n              {\n                onSearch: search,\n                onReset: reset,\n                loading: query.loading,\n                more: moreFilters?.(draft),\n              },\n            )}\n          >\n            {filters(draft)}\n          </FilterBar>\n        )}\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [queryTableStyles.panel, fullscreen.active && queryTableStyles.panelFullscreen],\n            },\n            propsPanel,\n            { ref: _toRef(panel) },\n          )}\n        >\n          <div {...mergeAttrs<'div'>({ sx: queryTableStyles.toolbar }, propsToolbar)}>\n            <div {...css.attrs(queryTableStyles.title)}>{title}</div>\n            {toolbar}\n            {renderTools()}\n          </div>\n          {selectionMode === 'multiple' && (\n            <SelectionBar\n              {...mergePartProps<SelectionBarProps>({ count: selected.length }, propsSelectionBar, {\n                count: selected.length,\n                onClear: () => (selected = []),\n              })}\n            >\n              {batchActions?.(selected)}\n            </SelectionBar>\n          )}\n          <DataTable\n            {...mergePartProps<Partial<DataTableProps<T>>>(\n              { 'aria-label': title, flexible: fullscreen.active },\n              propsTable,\n            )}\n            rows={query.rows as T[]}\n            columns={columns}\n            getKey={getKey}\n            manualSort\n            multiSort={multiSort}\n            _sort={query.sort}\n            _sorts={query.sorts}\n            manualFilter\n            _filters={query.columnFilters}\n            loading={query.loading}\n            density={density}\n            selectionMode={selectionMode}\n            _selected={selected}\n            _hiddenColumns={hidden}\n            _columnOrder={order}\n            _columnPins={pins}\n            _columnWidths={widths}\n            resizable\n            columnMenu\n          />\n          <PaginationBar\n            {...mergePartProps<Partial<PaginationBarProps>>(\n              { propsPagination: { 'aria-label': messages.queryTablePagination(title) } },\n              propsPagination,\n            )}\n            _page={query.page}\n            _pageSize={query.pageSize}\n            total={query.total}\n          />\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/patterns/StepsForm.d.ts

@@ -0,0 +1,49 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonProps } from '../base/Button';
+import { type FormProps } from '../form/Form';
+import type { FormControllerBase } from '../form/useForm';
+import { type FlexProps } from '../layout/Flex';
+import { type StepsProps } from '../navigation/Steps';
+import { type PartProps } from '../utils/props';
+/** 一步 */
+export interface FormStep {
+    /** 步骤条上的标题 */
+    title: VNodeChild;
+    /** 步骤条上的说明 */
+    description?: VNodeChild;
+    /** 这一步的字段路径（含子路径）：“下一步”只校验它们，出错时这一步标成出错 */
+    fields: readonly string[];
+    /** 这一步的内容：form.Field 们 */
+    content: () => VNodeChild;
+}
+/** 未声明的属性落到 Form（form 元素）上；标签布局、只读、不可用同 Form */
+export interface StepsFormProps extends Omit<FormProps, 'controller' | 'children'> {
+    /** useForm 的控制器 */
+    form: FormControllerBase;
+    /** 各步 */
+    steps: readonly FormStep[];
+    /** 当前第几步，从 0 开始：父级可以写 _current={x} */
+    _current?: number;
+    /** 提交按钮的文字，默认取文案（提交） */
+    submitText?: VNodeChild;
+    /** 步骤条（Steps）的部件属性 */
+    propsSteps?: Partial<StepsProps>;
+    /** 这一步内容外层的部件属性 */
+    propsPanel?: PartProps<'div'>;
+    /** 按钮行的部件属性 */
+    propsActions?: Partial<FlexProps>;
+    /** 上一步按钮的部件属性 */
+    propsPrevious?: Partial<ButtonProps>;
+    /** 下一步按钮的部件属性 */
+    propsNext?: Partial<ButtonProps>;
+    /** 提交按钮的部件属性 */
+    propsSubmit?: Partial<ButtonProps>;
+}
+/** StepsForm 的样式：root、panel */
+export declare const stepsFormStyles: Readonly<{
+    panel: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 分步表单：步骤条 + 这一步的字段 + 上一步、下一步、提交 */
+export declare const StepsForm: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<StepsFormProps>;

package/dist/patterns/StepsForm.js

@@ -0,0 +1,130 @@
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Button } from "../base/Button.js";
+import { Flex } from "../layout/Flex.js";
+import { Form } from "../form/Form.js";
+import { Steps } from "../navigation/Steps.js";
+import { useMessages } from "../config/lang/messages.js";
+import { patternsMessages } from "./messages.js";
+import { createVNode, mergeProps, nextTick, shallowRef, useId } from "vue";
+import { _component, bindable, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/patterns/StepsForm.tsx
+/** 一步 */
+/** 未声明的属性落到 Form（form 元素）上；标签布局、只读、不可用同 Form */
+/** StepsForm 的样式：root、panel */
+var stepsFormStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_lg"
+	},
+	panel: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_md",
+		outline: "none"
+	}
+});
+/** 字段 path 在这一步里：就是它，或是它的子路径（`address.city` 属于 `address`） */
+var inStep = (step, path) => step.fields.some((field) => path === field || path.startsWith(`${field}.`));
+/** 分步表单：步骤条 + 这一步的字段 + 上一步、下一步、提交 */
+var StepsForm = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const form = readonlyProp(_props, "form");
+	const steps = readonlyProp(_props, "steps");
+	const current = bindable(_props, "_current", () => 0, _ctx.emit);
+	const submitText = readonlyProp(_props, "submitText");
+	const propsSteps = readonlyProp(_props, "propsSteps");
+	const propsPanel = readonlyProp(_props, "propsPanel");
+	const propsActions = readonlyProp(_props, "propsActions");
+	const propsPrevious = readonlyProp(_props, "propsPrevious");
+	const propsNext = readonlyProp(_props, "propsNext");
+	const propsSubmit = readonlyProp(_props, "propsSubmit");
+	const rest = restProps(_props, _ctx, true);
+	const messages = useMessages("patterns", patternsMessages);
+	const id = useId();
+	let panel = shallowRef(null);
+	/** 这一步有显示着的错误 */
+	const hasError = (step) => Object.keys(form.value.errors).some((path) => inStep(step, path) && form.value.visibleError(path));
+	/** 换到第 index 步，焦点移到这一步的内容上 */
+	function go(index) {
+		current.value = index;
+		nextTick(() => panel.value?.focus());
+	}
+	async function next() {
+		const step = steps.value[current.value];
+		if (step && await form.value.validate(step.fields)) go(current.value + 1);
+	}
+	effect(() => {
+		if (form.value.submitCount === 0 || form.value.submitting) return;
+		const first = steps.value.findIndex(hasError);
+		if (first >= 0 && first !== current.value && !hasError(steps.value[current.value])) go(first);
+	});
+	const items = () => steps.value.map((step, index) => ({
+		title: step.title,
+		description: step.description,
+		status: hasError(step) ? "error" : void 0,
+		disabled: index > current.value
+	}));
+	return () => {
+		const step = steps.value[current.value];
+		const last = current.value >= steps.value.length - 1;
+		return createVNode(Form, mergeProps(rest, { "controller": form.value }), { default: () => [createVNode("div", css.attrs(stepsFormStyles.root), [
+			createVNode(Steps, mergeProps(mergePartProps({ items: items() }, propsSteps.value, {
+				items: items(),
+				navigable: true
+			}), {
+				"_current": current.value,
+				"onUpdate:_current": _cache[0] || (_cache[0] = (index) => go(index))
+			}), null),
+			createVNode("div", mergeAttrs({ sx: stepsFormStyles.panel }, propsPanel.value, {
+				ref: panel,
+				id: `${id}-panel`,
+				tabindex: -1,
+				role: "group",
+				"aria-label": messages.stepsFormStep(current.value + 1, steps.value.length)
+			}), [step?.content()]),
+			createVNode(Flex, mergePartProps({
+				justify: "end",
+				gap: "sm"
+			}, propsActions.value), { default: () => [current.value > 0 && createVNode(Button, mergeProps(mergePartProps({
+				variant: "ghost",
+				tone: "neutral"
+			}, propsPrevious.value, { onClick: () => go(current.value - 1) }), { "key": "__site0" }), {
+				default: () => [messages.stepsFormPrevious],
+				$stable: true
+			}), last ? createVNode(Button, mergeProps(mergePartProps({}, propsSubmit.value, {
+				type: "submit",
+				loading: form.value.submitting
+			}), { "key": "__site1" }), {
+				default: () => [submitText.value ?? messages.stepsFormSubmit],
+				$stable: true
+			}) : createVNode(Button, mergeProps(mergePartProps({}, propsNext.value, {
+				loading: form.value.validating(),
+				onClick: () => void next()
+			}), { "key": "__site2" }), {
+				default: () => [messages.stepsFormNext],
+				$stable: true
+			})] })
+		])] });
+	};
+}, {
+	name: "StepsForm",
+	props: [
+		"form",
+		"steps",
+		"_current",
+		"onUpdate:_current",
+		"submitText",
+		"propsSteps",
+		"propsPanel",
+		"propsActions",
+		"propsPrevious",
+		"propsNext",
+		"propsSubmit"
+	]
+});
+//#endregion
+export { StepsForm, stepsFormStyles };
+
+//# sourceMappingURL=StepsForm.js.map

package/dist/patterns/StepsForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepsForm.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/patterns/StepsForm.tsx"],"sourcesContent":["/**\n * 分步表单：一份 useForm 的表单分成几步填（开户、准入申请、配置向导），上方是步骤条，下方是这一步的字段与“上一步 / 下一步 / 提交”。\n * 同 Ant Design ProComponents 的 StepsForm。\n *\n *   <StepsForm\n *     form={form}\n *     _current={step}\n *     steps={[\n *       { title: '企业信息', fields: ['company', 'contact'], content: () => <>…form.Field…</> },\n *       { title: '账号', fields: ['password', 'confirm'], content: () => <>…</> },\n *     ]}\n *   />\n *\n * - “下一步”只校验这一步的字段（form.validate(fields)），通过才往后走，没通过的错误立即显示；走过的步骤可以点回去。\n * - 最后一步是“提交”（表单的原生提交）：整份校验没通过时跳到第一个有错的步骤，那一步在步骤条上标成出错。\n * - 换了一步焦点移到这一步的内容上（读屏念出第几步、标题），键盘接着往下填。\n *\n * 部件：Root（Form）、Steps、Panel（这一步的内容，div）、Actions（Flex）、Previous、Next、Submit（Button）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { useMessages } from '../config/lang/messages';\nimport { Form, type FormProps } from '../form/Form';\nimport type { FormControllerBase } from '../form/useForm';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { Steps, type StepItem, type StepsProps } from '../navigation/Steps';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { patternsMessages } from './messages';\n\n/** 一步 */\nexport interface FormStep {\n  /** 步骤条上的标题 */\n  title: VNodeChild;\n  /** 步骤条上的说明 */\n  description?: VNodeChild;\n  /** 这一步的字段路径（含子路径）：“下一步”只校验它们，出错时这一步标成出错 */\n  fields: readonly string[];\n  /** 这一步的内容：form.Field 们 */\n  content: () => VNodeChild;\n}\n\n/** 未声明的属性落到 Form（form 元素）上；标签布局、只读、不可用同 Form */\nexport interface StepsFormProps extends Omit<FormProps, 'controller' | 'children'> {\n  /** useForm 的控制器 */\n  form: FormControllerBase;\n  /** 各步 */\n  steps: readonly FormStep[];\n  /** 当前第几步，从 0 开始：父级可以写 _current={x} */\n  _current?: number;\n  /** 提交按钮的文字，默认取文案（提交） */\n  submitText?: VNodeChild;\n  /** 步骤条（Steps）的部件属性 */\n  propsSteps?: Partial<StepsProps>;\n  /** 这一步内容外层的部件属性 */\n  propsPanel?: PartProps<'div'>;\n  /** 按钮行的部件属性 */\n  propsActions?: Partial<FlexProps>;\n  /** 上一步按钮的部件属性 */\n  propsPrevious?: Partial<ButtonProps>;\n  /** 下一步按钮的部件属性 */\n  propsNext?: Partial<ButtonProps>;\n  /** 提交按钮的部件属性 */\n  propsSubmit?: Partial<ButtonProps>;\n}\n\n/** StepsForm 的样式：root、panel */\nexport const stepsFormStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_lg' },\n  // 换步后焦点在这里：不画焦点环（内容本身不是控件），读屏念出它的名称\n  panel: { display: 'flex', flexDirection: 'column', gap: '_md', outline: 'none' },\n});\n\n/** 字段 path 在这一步里：就是它，或是它的子路径（`address.city` 属于 `address`） */\nconst inStep = (step: FormStep, path: string) =>\n  step.fields.some((field) => path === field || path.startsWith(`${field}.`));\n\n/** 分步表单：步骤条 + 这一步的字段 + 上一步、下一步、提交 */\nexport const StepsForm = _component(\n  ({\n    form,\n    steps,\n    _current: current = _bindable(0),\n    submitText,\n    propsSteps,\n    propsPanel,\n    propsActions,\n    propsPrevious,\n    propsNext,\n    propsSubmit,\n    ...rest\n  }: StepsFormProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const id = useId();\n    let panel = _state.raw<HTMLElement | null>(null);\n\n    /** 这一步有显示着的错误 */\n    const hasError = (step: FormStep) =>\n      Object.keys(form.errors).some((path) => inStep(step, path) && form.visibleError(path));\n\n    /** 换到第 index 步，焦点移到这一步的内容上 */\n    function go(index: number) {\n      current = index;\n      void nextTick(() => panel?.focus());\n    }\n\n    async function next() {\n      const step = steps[current];\n      if (step && (await form.validate(step.fields))) go(current + 1);\n    }\n\n    // 整份提交没通过：跳到第一个有错的步骤\n    _effect(() => {\n      if (form.submitCount === 0 || form.submitting) return;\n      const first = steps.findIndex(hasError);\n      if (first >= 0 && first !== current && !hasError(steps[current]!)) go(first);\n    });\n\n    const items = (): StepItem[] =>\n      steps.map((step, index) => ({\n        title: step.title,\n        description: step.description,\n        status: hasError(step) ? 'error' : undefined,\n        // 只能点回走过的步骤\n        disabled: index > current,\n      }));\n\n    return () => {\n      const step = steps[current];\n      const last = current >= steps.length - 1;\n      return (\n        <Form {...rest} controller={form}>\n          <div {...css.attrs(stepsFormStyles.root)}>\n            <Steps\n              {...mergePartProps<StepsProps>({ items: items() }, propsSteps, {\n                items: items(),\n                navigable: true,\n              })}\n              _current={current}\n              onUpdate:_current={(index: number) => go(index)}\n            />\n            <div\n              {...mergeAttrs<'div'>({ sx: stepsFormStyles.panel }, propsPanel, {\n                ref: _toRef(panel),\n                id: `${id}-panel`,\n                tabindex: -1,\n                role: 'group',\n                'aria-label': messages.stepsFormStep(current + 1, steps.length),\n              })}\n            >\n              {step?.content()}\n            </div>\n            <Flex {...mergePartProps<FlexProps>({ justify: 'end', gap: 'sm' }, propsActions)}>\n              {current > 0 && (\n                <Button\n                  {...mergePartProps<ButtonProps>(\n                    { variant: 'ghost', tone: 'neutral' },\n                    propsPrevious,\n                    { onClick: () => go(current - 1) },\n                  )}\n                >\n                  {messages.stepsFormPrevious}\n                </Button>\n              )}\n              {last ? (\n                <Button\n                  {...mergePartProps<ButtonProps>({}, propsSubmit, {\n                    type: 'submit',\n                    loading: form.submitting,\n                  })}\n                >\n                  {submitText ?? messages.stepsFormSubmit}\n                </Button>\n              ) : (\n                <Button\n                  {...mergePartProps<ButtonProps>({}, propsNext, {\n                    loading: form.validating(),\n                    onClick: () => void next(),\n                  })}\n                >\n                  {messages.stepsFormNext}\n                </Button>\n              )}\n            </Flex>\n          </div>\n        </Form>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/patterns/ThemeSwitcher.d.ts

@@ -0,0 +1,20 @@
+import { type IconButtonProps } from '../base/IconButton';
+import type { IconData } from '../base/Icon';
+import { type MenuProps } from '../overlay/Menu';
+import { SYSTEM_THEME } from '../config/theme/boot';
+import type { ThemePreference } from '../config/theme/preference';
+/** 未声明的属性落到菜单（role="menu" 的 div）上 */
+export interface ThemeSwitcherProps<Name extends string> extends Omit<MenuProps, 'trigger' | 'children'> {
+    /** createThemePreference 的结果 */
+    preference: ThemePreference<Name>;
+    /** 各选项的文字（键是主题名或 'system'）；内置主题与跟随系统默认取语言包，其他默认是主题名 */
+    labels?: Partial<Record<Name | typeof SYSTEM_THEME, string>>;
+    /** 各选项的图标；内置主题与跟随系统有默认图标，其他默认是调色板 */
+    icons?: Partial<Record<Name | typeof SYSTEM_THEME, IconData>>;
+    /** 列出“跟随系统”，默认 true */
+    system?: boolean;
+    /** 触发按钮的部件属性 */
+    propsTrigger?: Partial<IconButtonProps>;
+}
+/** 主题切换（图标按钮 + 单选菜单）：选中后从按钮处圆形展开新主题 */
+export declare const ThemeSwitcher: <Name extends string>(props: ThemeSwitcherProps<Name>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/patterns/ThemeSwitcher.js

@@ -0,0 +1,102 @@
+import { useLang } from "../config/context.js";
+import { mergePartProps } from "../utils/props.js";
+import { IconButton } from "../base/IconButton.js";
+import { toElement } from "../utils/dom/element.js";
+import { Menu as Menu$1, MenuRadioGroup, MenuRadioItem } from "../overlay/Menu.js";
+import { SYSTEM_THEME } from "../config/theme/boot.js";
+import { builtinThemeLabel, builtinThemes } from "../config/theme/builtin.js";
+import { useMessages } from "../config/lang/messages.js";
+import { patternsMessages } from "./messages.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Citrus, Coffee, Contrast, Flower2, Monitor, Moon, MoonStar, Palette, PartyPopper, ScrollText, Sun, Trees, Waves, Zap } from "@lucide/icons";
+//#region src/patterns/ThemeSwitcher.tsx
+/**
+* 主题切换：图标按钮弹出菜单，列出“跟随系统”与各套主题，配合 createThemePreference 使用。
+*
+*   const preference = createThemePreference({ themes: { light: lightTheme, dark: darkTheme, paper: paperTheme } });
+*   <ThemeSwitcher preference={preference} />
+*
+* 选中后新主题从按钮处圆形展开（revealTransition；不支持 View Transitions 或减少动态效果时直接切换）。
+* 按钮的图标表示当前的选择；内置主题（builtinThemes）与跟随系统有默认的文字和图标，其他主题用 labels、icons 补上。
+*/
+/** 未声明的属性落到菜单（role="menu" 的 div）上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var DEFAULT_ICONS = {
+	[SYSTEM_THEME]: Monitor,
+	light: Sun,
+	dark: Moon,
+	paper: ScrollText,
+	midnight: MoonStar,
+	"high-contrast": Contrast,
+	ocean: Waves,
+	forest: Trees,
+	lemon: Citrus,
+	sakura: Flower2,
+	festive: PartyPopper,
+	cyberpunk: Zap,
+	coffee: Coffee
+};
+/** 主题切换（图标按钮 + 单选菜单）：选中后从按钮处圆形展开新主题 */
+var ThemeSwitcher = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const preference = readonlyProp(_props, "preference");
+	const labels = readonlyProp(_props, "labels");
+	const icons = readonlyProp(_props, "icons");
+	const system = readonlyProp(_props, "system", true);
+	const propsTrigger = readonlyProp(_props, "propsTrigger");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const messages = useMessages("patterns", patternsMessages);
+	let button = null;
+	const labelOf = (name) => labels.value?.[name] ?? (name === "system" ? lang.themeSystem : name in builtinThemes ? builtinThemeLabel(lang, name) : name);
+	const iconOf = (name) => icons.value?.[name] ?? DEFAULT_ICONS[name] ?? Palette;
+	function choose(next) {
+		const rect = button?.getBoundingClientRect();
+		const origin = rect && {
+			x: rect.left + rect.width / 2,
+			y: rect.top + rect.height / 2
+		};
+		preference.value.set(next, { origin });
+	}
+	return () => {
+		let _slot2;
+		const choices = system.value ? [SYSTEM_THEME, ...preference.value.names] : [...preference.value.names];
+		return createVNode(Menu$1, mergeProps(rest, { "trigger": _cache[0] || (_cache[0] = (props) => createVNode(IconButton, mergePartProps({
+			icon: iconOf(preference.value.preference),
+			"aria-label": messages.themeLabel
+		}, propsTrigger.value, {
+			...props,
+			ref: (value) => {
+				props.ref(value);
+				button = toElement(value);
+			}
+		}), null)) }), { default: () => [createVNode(MenuRadioGroup, {
+			"_value": preference.value.preference,
+			"onUpdate:_value": choose,
+			"aria-label": messages.themeLabel
+		}, _isSlot(_slot2 = choices.map((name) => {
+			let _slot;
+			return createVNode(MenuRadioItem, {
+				"key": name,
+				"value": name,
+				"icon": iconOf(name)
+			}, _isSlot(_slot = labelOf(name)) ? _slot : { default: () => [_slot] });
+		})) ? _slot2 : { default: () => [_slot2] })] });
+	};
+}, {
+	name: "ThemeSwitcher",
+	props: [
+		"preference",
+		"labels",
+		"icons",
+		"system",
+		"propsTrigger"
+	]
+});
+//#endregion
+export { ThemeSwitcher };
+
+//# sourceMappingURL=ThemeSwitcher.js.map