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

package/dist/table/use-table-query.d.ts

@@ -0,0 +1,89 @@
+import { type QueryCodecs } from '../config/query-state';
+import type { QueryValue } from '../utils/request/http';
+import { type DataTableColumn, type SortState } from './columns';
+/** 一页结果；后端多给的字段（各页签的条数）照样留在 data 里 */
+export interface TablePage<T> {
+    /** 这一页的行 */
+    rows: readonly T[];
+    /** 符合条件的总条数 */
+    total: number;
+}
+/** 交给 fetcher 的查询条件 */
+export interface TableQuery<Filters, Params> {
+    /** 第几页，从 1 开始 */
+    page: number;
+    /** 每页条数 */
+    pageSize: number;
+    /** 排序，前面的优先；空数组是默认顺序。发给服务端时写成 formatSorts(sorts)（`-amount,name`） */
+    sorts: readonly SortState[];
+    /** 表头筛选：列 key → 选中的值（关键字筛选时是 [关键字]），同 DataTable 的 filters */
+    columnFilters: Readonly<Record<string, readonly string[]>>;
+    /**
+     * 已知的总条数：只翻页、换排序或每页条数时是上一次结果的 total，服务端可以不再数行数；
+     * 筛选条件、表头筛选、params 变了，或“查询”、refresh 时为 undefined
+     */
+    total: number | undefined;
+    /** 已应用的筛选条件 */
+    filters: Filters;
+    /** options.params 的当前值 */
+    params: Params;
+}
+/** useTableQuery 的选项 */
+export interface TableQueryOptions<Filters, Params> {
+    /** 一开始已应用的筛选条件 */
+    filters?: Filters;
+    /** 每页条数，默认 10（同 Pagination、PageSizeSelect） */
+    pageSize?: number;
+    /** 一开始的排序，前面的优先 */
+    sorts?: readonly SortState[];
+    /** 一开始的表头筛选 */
+    columnFilters?: Record<string, string[]>;
+    /** 筛选条件之外也决定结果的值（当前页签、数据源）：变了回到第一页重新请求 */
+    params?: () => Params;
+    /**
+     * 页码（page）、条数（pageSize）、排序（sort）、筛选条件（键名同 filters）同步到地址：刷新、分享链接、后退回来还是这些条件。
+     * 需要路由适配给出 query、replaceQuery（vueRouterAdapter 有）；筛选条件按初始值的类型读写，别的类型在 filters 里给写法
+     */
+    syncToUrl?: boolean | {
+        filters?: QueryCodecs<Filters>;
+    };
+}
+/** useTableQuery 的返回值：page、pageSize、sort（或 sorts）可以直接 _bind 到 PaginationBar（或 Pagination、PageSizeSelect）、DataTable */
+export interface TableQueryState<Result extends TablePage<unknown>, Filters> {
+    /** 第几页：改了立即请求 */
+    page: number;
+    /** 每页条数：改了回到第一页 */
+    pageSize: number;
+    /** 排序的第一列，给单列排序的表格绑定：改了回到第一页；设置时换掉全部排序，null 是默认顺序 */
+    sort: SortState | null;
+    /** 全部排序，前面的优先，给多列排序（multiSort）的表格绑定：改了回到第一页 */
+    sorts: SortState[];
+    /** 表头筛选，给 DataTable 的 filters（manualFilter）绑定：改了回到第一页 */
+    columnFilters: Record<string, string[]>;
+    /** 已应用的筛选条件 */
+    readonly filters: Filters;
+    /** 应用新的筛选条件（查询栏的“查询”）：回到第一页，条件没变也重新请求（并重新数总数） */
+    search(filters: Filters): void;
+    /** 当前页的行；没有结果时为空数组 */
+    readonly rows: Result['rows'];
+    /** 总条数；第一次结果回来之前为 0 */
+    readonly total: number;
+    /** 最后一次成功的完整结果（含后端多给的字段） */
+    readonly data: Result | undefined;
+    /** 正在请求 */
+    readonly loading: boolean;
+    /** 最后一次失败的原因 */
+    readonly error: unknown;
+    /** 按当前条件重新请求（新建、删除之后），重新数总数 */
+    refresh(): Promise<Result | undefined>;
+}
+/** 服务端分页的列表状态（在 setup 里调用；见文件开头） */
+export declare function useTableQuery<Result extends TablePage<unknown>, Filters = undefined, Params = undefined>(fetcher: (query: TableQuery<Filters, Params>, signal: AbortSignal) => Promise<Result>, options?: TableQueryOptions<Filters, Params>): TableQueryState<Result, Filters>;
+/**
+ * 一次查询写成接口的地址栏参数，与 query 库的 parseTableRequest、Java 的 TableRequest.parse 一一对应（query 仓库的 0016）：
+ * page、pageSize；有排序时 sort=-amount,name；已知总数时 total；表头筛选里多选的列写成 filter.列=值（可重复），
+ * 关键字的列（列定义的 filter.options 是 'text'，要给 columns 才分得清）写成 search.列=关键字；查询栏的条件按字段名平铺，
+ * 值按线上的文字写（wireText：Decimal 不用科学计数法、日期是 ISO），数组写成重复的参数，区间 { start, end } 写成两个同名参数
+ * （空的一端是空字符串），空值不写。page、pageSize、sort、total 与 filter.、search. 开头的名字留给这里，查询栏的字段不要用。
+ */
+export declare function tableParams<Filters, Params>(query: TableQuery<Filters, Params>, columns?: readonly DataTableColumn<never>[]): Record<string, QueryValue>;

package/dist/table/use-table-query.js

@@ -0,0 +1,194 @@
+import { columnFilter, formatSorts, parseSorts } from "./columns.js";
+import { toWire, wireText } from "../utils/request/wire.js";
+import { useRequest } from "../utils/request/use-request.js";
+import { isConditionGroup } from "../input/condition.js";
+import { useQueryState, useQueryStates } from "../config/query-state.js";
+import { shallowRef, watch } from "vue";
+//#region src/table/use-table-query.ts
+/**
+* 服务端分页的列表：页码、每页条数、排序、表头筛选、已应用的筛选条件、总数、加载与出错一起管（参考 ProTable 的 request、
+* alova 的 usePagination）。请求交给 useRequest：只采用最后一次、取消上一次、翻页时保留当前这页。
+*
+*   const tasks = useTableQuery(
+*     (query, signal) => http.request<TablePage<Task>>({ url: '/tasks', query: tableParams(query, columns), signal }),
+*     { filters: blankFilters(), pageSize: 20 },
+*   );
+*   <FilterBar onSearch={() => tasks.search({ ...draft })} … />
+*   <DataTable rows={tasks.rows} loading={tasks.loading} _sort={tasks.sort} manualSort … />
+*   <PaginationBar _page={tasks.page} _pageSize={tasks.pageSize} total={tasks.total} />
+*
+* 排序是几列（sorts，前面的优先）：单列排序的表格绑 sort（第一列），多列排序（DataTable 的 multiSort）绑 sorts。
+* 表头筛选（DataTable 的 filters，manualFilter）绑 columnFilters。换排序、每页条数、筛选条件或 params 时回到第一页；
+* 删掉数据后当前页空了，退到最后一页。只翻页、换排序或条数时，交给 fetcher 的 total 是上一次的总数，服务端可以不再数行数。
+* syncToUrl 把页码、条数、排序（sort=-amount,name：减号是倒序，同 JSON:API）、筛选条件放进地址的查询参数（见 useQueryState）。
+*
+* tableParams 把一次查询写成接口的参数，与 query 库的 parseTableRequest、Java 的 TableRequest.parse 一一对应（query 仓库的 0016）。
+* 筛选条件里的条件树（FilterBar 的 _condition、ConditionBuilder 的值）写成 JSON 文字；键名用 condition 时，
+* 后端的 TableRequest 读到它交给 conditionBy（query 仓库的 0017）。
+*/
+/** 正整数（页码、条数） */
+var positiveInteger = {
+	parse(value) {
+		const number = Number(typeof value === "string" ? value : value[0]);
+		return Number.isInteger(number) && number >= 1 ? number : void 0;
+	},
+	serialize: String
+};
+/** 排序：sort=amount 正序，sort=-amount,name 先按 amount 倒序再按 name，sort= 是默认顺序 */
+var sortCodec = {
+	parse: (value) => parseSorts(typeof value === "string" ? value : value[0] ?? ""),
+	serialize: formatSorts
+};
+/** 服务端分页的列表状态（在 setup 里调用；见文件开头） */
+function useTableQuery(fetcher, options = {}) {
+	const url = options.syncToUrl === true ? {} : options.syncToUrl || void 0;
+	const page = url ? useQueryState("page", 1, positiveInteger) : shallowRef(1);
+	const pageSize = url ? useQueryState("pageSize", options.pageSize ?? 10, positiveInteger) : shallowRef(options.pageSize ?? 10);
+	const sorts = url ? useQueryState("sort", options.sorts ?? [], sortCodec) : shallowRef(options.sorts ?? []);
+	const columnFilters = shallowRef(options.columnFilters ?? {});
+	const filters = url && options.filters ? useQueryStates(options.filters, url.filters) : shallowRef(options.filters);
+	const readParams = () => options.params?.();
+	let known;
+	const scopeOf = (query) => JSON.stringify(toWire([
+		query.filters,
+		query.columnFilters,
+		query.params
+	]));
+	const request = useRequest(fetcher, {
+		params: () => {
+			const query = {
+				page: page.value,
+				pageSize: pageSize.value,
+				sorts: sorts.value,
+				columnFilters: columnFilters.value,
+				filters: filters.value,
+				params: readParams()
+			};
+			return {
+				...query,
+				total: known?.scope === scopeOf(query) ? known.total : void 0
+			};
+		},
+		onSuccess: (result, query) => {
+			known = {
+				scope: scopeOf(query),
+				total: result.total
+			};
+			const last = Math.max(1, Math.ceil(result.total / query.pageSize));
+			if (result.rows.length === 0 && query.page > last) page.value = last;
+		}
+	});
+	if (options.params) watch(readParams, () => page.value = 1, { flush: "sync" });
+	return {
+		get page() {
+			return page.value;
+		},
+		set page(value) {
+			page.value = value;
+		},
+		get pageSize() {
+			return pageSize.value;
+		},
+		set pageSize(value) {
+			pageSize.value = value;
+			page.value = 1;
+		},
+		get sort() {
+			return sorts.value[0] ?? null;
+		},
+		set sort(value) {
+			sorts.value = value ? [value] : [];
+			page.value = 1;
+		},
+		get sorts() {
+			return [...sorts.value];
+		},
+		set sorts(value) {
+			sorts.value = value;
+			page.value = 1;
+		},
+		get columnFilters() {
+			return columnFilters.value;
+		},
+		set columnFilters(value) {
+			columnFilters.value = value;
+			page.value = 1;
+		},
+		get filters() {
+			return filters.value;
+		},
+		search(next) {
+			known = void 0;
+			filters.value = next;
+			page.value = 1;
+			request.refresh();
+		},
+		get rows() {
+			return request.data?.rows ?? [];
+		},
+		get total() {
+			return request.data?.total ?? 0;
+		},
+		get data() {
+			return request.data;
+		},
+		get loading() {
+			return request.loading;
+		},
+		get error() {
+			return request.error;
+		},
+		refresh: () => {
+			known = void 0;
+			return request.refresh();
+		}
+	};
+}
+/** 是区间 { start, end } */
+var isRange = (value) => typeof value === "object" && value !== null && ("start" in value || "end" in value);
+/**
+* 一次查询写成接口的地址栏参数，与 query 库的 parseTableRequest、Java 的 TableRequest.parse 一一对应（query 仓库的 0016）：
+* page、pageSize；有排序时 sort=-amount,name；已知总数时 total；表头筛选里多选的列写成 filter.列=值（可重复），
+* 关键字的列（列定义的 filter.options 是 'text'，要给 columns 才分得清）写成 search.列=关键字；查询栏的条件按字段名平铺，
+* 值按线上的文字写（wireText：Decimal 不用科学计数法、日期是 ISO），数组写成重复的参数，区间 { start, end } 写成两个同名参数
+* （空的一端是空字符串），空值不写。page、pageSize、sort、total 与 filter.、search. 开头的名字留给这里，查询栏的字段不要用。
+*/
+function tableParams(query, columns = []) {
+	const out = {
+		page: query.page,
+		pageSize: query.pageSize
+	};
+	const sort = formatSorts(query.sorts);
+	if (sort) out.sort = sort;
+	if (query.total !== void 0) out.total = query.total;
+	const keyword = new Set(columns.filter((column) => columnFilter(column)?.options === "text").map((column) => column.key));
+	for (const [key, values] of Object.entries(query.columnFilters)) {
+		const kept = values.filter((value) => value.trim() !== "");
+		if (kept.length === 0) continue;
+		if (keyword.has(key)) out[`search.${key}`] = kept[0];
+		else out[`filter.${key}`] = kept;
+	}
+	if (typeof query.filters === "object" && query.filters !== null) for (const [key, value] of Object.entries(query.filters)) {
+		const param = filterParam(value);
+		if (param !== void 0) out[key] = param;
+	}
+	return out;
+}
+/** 查询栏里一个条件写成参数：空值不写；条件树写成 JSON 文字；数组、区间写成几个同名参数；其余是线上的文字 */
+function filterParam(value) {
+	if (value === null || value === void 0 || value === "") return void 0;
+	if (isConditionTree(value)) return JSON.stringify(value);
+	const items = Array.isArray(value) ? value.map(wireText) : isRange(value) ? [wireText(value.start), wireText(value.end)] : void 0;
+	if (items) return items.every((item) => item === "") ? void 0 : items;
+	return wireText(value);
+}
+/** 是条件树（ConditionBuilder 的值）：组合，或带 field 与 op 的比较 */
+function isConditionTree(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const node = value;
+	return isConditionGroup(node) || typeof node.field === "string" && typeof node.op === "string";
+}
+//#endregion
+export { tableParams, useTableQuery };
+
+//# sourceMappingURL=use-table-query.js.map

package/dist/table/use-table-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table-query.js","names":[],"sources":["../../src/table/use-table-query.ts"],"sourcesContent":["/**\n * 服务端分页的列表：页码、每页条数、排序、表头筛选、已应用的筛选条件、总数、加载与出错一起管（参考 ProTable 的 request、\n * alova 的 usePagination）。请求交给 useRequest：只采用最后一次、取消上一次、翻页时保留当前这页。\n *\n *   const tasks = useTableQuery(\n *     (query, signal) => http.request<TablePage<Task>>({ url: '/tasks', query: tableParams(query, columns), signal }),\n *     { filters: blankFilters(), pageSize: 20 },\n *   );\n *   <FilterBar onSearch={() => tasks.search({ ...draft })} … />\n *   <DataTable rows={tasks.rows} loading={tasks.loading} _sort={tasks.sort} manualSort … />\n *   <PaginationBar _page={tasks.page} _pageSize={tasks.pageSize} total={tasks.total} />\n *\n * 排序是几列（sorts，前面的优先）：单列排序的表格绑 sort（第一列），多列排序（DataTable 的 multiSort）绑 sorts。\n * 表头筛选（DataTable 的 filters，manualFilter）绑 columnFilters。换排序、每页条数、筛选条件或 params 时回到第一页；\n * 删掉数据后当前页空了，退到最后一页。只翻页、换排序或条数时，交给 fetcher 的 total 是上一次的总数，服务端可以不再数行数。\n * syncToUrl 把页码、条数、排序（sort=-amount,name：减号是倒序，同 JSON:API）、筛选条件放进地址的查询参数（见 useQueryState）。\n *\n * tableParams 把一次查询写成接口的参数，与 query 库的 parseTableRequest、Java 的 TableRequest.parse 一一对应（query 仓库的 0016）。\n * 筛选条件里的条件树（FilterBar 的 _condition、ConditionBuilder 的值）写成 JSON 文字；键名用 condition 时，\n * 后端的 TableRequest 读到它交给 conditionBy（query 仓库的 0017）。\n */\nimport { shallowRef, watch, type Ref } from 'vue';\nimport {\n  useQueryState,\n  useQueryStates,\n  type QueryCodec,\n  type QueryCodecs,\n} from '../config/query-state';\nimport type { QueryValue } from '../utils/request/http';\nimport { useRequest } from '../utils/request/use-request';\nimport { toWire, wireText, type WireScalar } from '../utils/request/wire';\nimport { isConditionGroup, type Condition } from '../input/condition';\nimport {\n  columnFilter,\n  formatSorts,\n  parseSorts,\n  type DataTableColumn,\n  type SortState,\n} from './columns';\n\n/** 一页结果；后端多给的字段（各页签的条数）照样留在 data 里 */\nexport interface TablePage<T> {\n  /** 这一页的行 */\n  rows: readonly T[];\n  /** 符合条件的总条数 */\n  total: number;\n}\n\n/** 交给 fetcher 的查询条件 */\nexport interface TableQuery<Filters, Params> {\n  /** 第几页，从 1 开始 */\n  page: number;\n  /** 每页条数 */\n  pageSize: number;\n  /** 排序，前面的优先；空数组是默认顺序。发给服务端时写成 formatSorts(sorts)（`-amount,name`） */\n  sorts: readonly SortState[];\n  /** 表头筛选：列 key → 选中的值（关键字筛选时是 [关键字]），同 DataTable 的 filters */\n  columnFilters: Readonly<Record<string, readonly string[]>>;\n  /**\n   * 已知的总条数：只翻页、换排序或每页条数时是上一次结果的 total，服务端可以不再数行数；\n   * 筛选条件、表头筛选、params 变了，或“查询”、refresh 时为 undefined\n   */\n  total: number | undefined;\n  /** 已应用的筛选条件 */\n  filters: Filters;\n  /** options.params 的当前值 */\n  params: Params;\n}\n\n/** useTableQuery 的选项 */\nexport interface TableQueryOptions<Filters, Params> {\n  /** 一开始已应用的筛选条件 */\n  filters?: Filters;\n  /** 每页条数，默认 10（同 Pagination、PageSizeSelect） */\n  pageSize?: number;\n  /** 一开始的排序，前面的优先 */\n  sorts?: readonly SortState[];\n  /** 一开始的表头筛选 */\n  columnFilters?: Record<string, string[]>;\n  /** 筛选条件之外也决定结果的值（当前页签、数据源）：变了回到第一页重新请求 */\n  params?: () => Params;\n  /**\n   * 页码（page）、条数（pageSize）、排序（sort）、筛选条件（键名同 filters）同步到地址：刷新、分享链接、后退回来还是这些条件。\n   * 需要路由适配给出 query、replaceQuery（vueRouterAdapter 有）；筛选条件按初始值的类型读写，别的类型在 filters 里给写法\n   */\n  syncToUrl?: boolean | { filters?: QueryCodecs<Filters> };\n}\n\n/** 正整数（页码、条数） */\nconst positiveInteger: QueryCodec<number> = {\n  parse(value) {\n    const number = Number(typeof value === 'string' ? value : value[0]);\n    return Number.isInteger(number) && number >= 1 ? number : undefined;\n  },\n  serialize: String,\n};\n\n/** 排序：sort=amount 正序，sort=-amount,name 先按 amount 倒序再按 name，sort= 是默认顺序 */\nconst sortCodec: QueryCodec<readonly SortState[]> = {\n  parse: (value) => parseSorts(typeof value === 'string' ? value : (value[0] ?? '')),\n  serialize: formatSorts,\n};\n\n/** useTableQuery 的返回值：page、pageSize、sort（或 sorts）可以直接 _bind 到 PaginationBar（或 Pagination、PageSizeSelect）、DataTable */\nexport interface TableQueryState<Result extends TablePage<unknown>, Filters> {\n  /** 第几页：改了立即请求 */\n  page: number;\n  /** 每页条数：改了回到第一页 */\n  pageSize: number;\n  /** 排序的第一列，给单列排序的表格绑定：改了回到第一页；设置时换掉全部排序，null 是默认顺序 */\n  sort: SortState | null;\n  /** 全部排序，前面的优先，给多列排序（multiSort）的表格绑定：改了回到第一页 */\n  sorts: SortState[];\n  /** 表头筛选，给 DataTable 的 filters（manualFilter）绑定：改了回到第一页 */\n  columnFilters: Record<string, string[]>;\n  /** 已应用的筛选条件 */\n  readonly filters: Filters;\n  /** 应用新的筛选条件（查询栏的“查询”）：回到第一页，条件没变也重新请求（并重新数总数） */\n  search(filters: Filters): void;\n  /** 当前页的行；没有结果时为空数组 */\n  readonly rows: Result['rows'];\n  /** 总条数；第一次结果回来之前为 0 */\n  readonly total: number;\n  /** 最后一次成功的完整结果（含后端多给的字段） */\n  readonly data: Result | undefined;\n  /** 正在请求 */\n  readonly loading: boolean;\n  /** 最后一次失败的原因 */\n  readonly error: unknown;\n  /** 按当前条件重新请求（新建、删除之后），重新数总数 */\n  refresh(): Promise<Result | undefined>;\n}\n\n/** 服务端分页的列表状态（在 setup 里调用；见文件开头） */\nexport function useTableQuery<\n  Result extends TablePage<unknown>,\n  Filters = undefined,\n  Params = undefined,\n>(\n  fetcher: (query: TableQuery<Filters, Params>, signal: AbortSignal) => Promise<Result>,\n  options: TableQueryOptions<Filters, Params> = {},\n): TableQueryState<Result, Filters> {\n  const url = options.syncToUrl === true ? {} : options.syncToUrl || undefined;\n  const page = url ? useQueryState('page', 1, positiveInteger) : shallowRef(1);\n  const pageSize = url\n    ? useQueryState('pageSize', options.pageSize ?? 10, positiveInteger)\n    : shallowRef(options.pageSize ?? 10);\n  const sorts = url\n    ? useQueryState<readonly SortState[]>('sort', options.sorts ?? [], sortCodec)\n    : shallowRef<readonly SortState[]>(options.sorts ?? []);\n  const columnFilters = shallowRef<Record<string, string[]>>(options.columnFilters ?? {});\n  const filters: Ref<Filters> =\n    url && options.filters\n      ? (useQueryStates(options.filters, url.filters as QueryCodecs<object>) as Ref<Filters>)\n      : shallowRef(options.filters as Filters);\n  const readParams = () => options.params?.() as Params;\n  // 上一次结果的总数，以及它所属的条件（筛选条件、表头筛选、params）；不是响应式的，记下它不会引起请求\n  let known: { scope: string; total: number } | undefined;\n  const scopeOf = (\n    query: Pick<TableQuery<Filters, Params>, 'filters' | 'columnFilters' | 'params'>,\n  ) => JSON.stringify(toWire([query.filters, query.columnFilters, query.params]));\n\n  const request = useRequest(fetcher, {\n    params: () => {\n      const query = {\n        page: page.value,\n        pageSize: pageSize.value,\n        sorts: sorts.value,\n        columnFilters: columnFilters.value,\n        filters: filters.value,\n        params: readParams(),\n      };\n      return { ...query, total: known?.scope === scopeOf(query) ? known.total : undefined };\n    },\n    onSuccess: (result, query) => {\n      known = { scope: scopeOf(query), total: result.total };\n      // 删掉数据后当前页空了：退到最后一页（侦听器随即按新页码请求）\n      const last = Math.max(1, Math.ceil(result.total / query.pageSize));\n      if (result.rows.length === 0 && query.page > last) page.value = last;\n    },\n  });\n  // 同步回到第一页：与 params 的变化在同一轮里交给请求，不会先按旧页码请求一次\n  if (options.params) watch(readParams, () => (page.value = 1), { flush: 'sync' });\n\n  return {\n    get page() {\n      return page.value;\n    },\n    set page(value) {\n      page.value = value;\n    },\n    get pageSize() {\n      return pageSize.value;\n    },\n    set pageSize(value) {\n      pageSize.value = value;\n      page.value = 1;\n    },\n    get sort() {\n      return sorts.value[0] ?? null;\n    },\n    set sort(value) {\n      sorts.value = value ? [value] : [];\n      page.value = 1;\n    },\n    get sorts() {\n      return [...sorts.value];\n    },\n    set sorts(value) {\n      sorts.value = value;\n      page.value = 1;\n    },\n    get columnFilters() {\n      return columnFilters.value;\n    },\n    set columnFilters(value) {\n      columnFilters.value = value;\n      page.value = 1;\n    },\n    get filters() {\n      return filters.value;\n    },\n    search(next) {\n      known = undefined;\n      filters.value = next;\n      page.value = 1;\n      void request.refresh();\n    },\n    get rows() {\n      return request.data?.rows ?? ([] as Result['rows']);\n    },\n    get total() {\n      return request.data?.total ?? 0;\n    },\n    get data() {\n      return request.data;\n    },\n    get loading() {\n      return request.loading;\n    },\n    get error() {\n      return request.error;\n    },\n    refresh: () => {\n      known = undefined;\n      return request.refresh();\n    },\n  };\n}\n\n/** 区间：DateRangePicker 的 { start, end }（两端都含） */\ninterface RangeValue {\n  start?: WireScalar;\n  end?: WireScalar;\n}\n\n/** 是区间 { start, end } */\nconst isRange = (value: unknown): value is RangeValue =>\n  typeof value === 'object' && value !== null && ('start' in value || 'end' in value);\n\n/**\n * 一次查询写成接口的地址栏参数，与 query 库的 parseTableRequest、Java 的 TableRequest.parse 一一对应（query 仓库的 0016）：\n * page、pageSize；有排序时 sort=-amount,name；已知总数时 total；表头筛选里多选的列写成 filter.列=值（可重复），\n * 关键字的列（列定义的 filter.options 是 'text'，要给 columns 才分得清）写成 search.列=关键字；查询栏的条件按字段名平铺，\n * 值按线上的文字写（wireText：Decimal 不用科学计数法、日期是 ISO），数组写成重复的参数，区间 { start, end } 写成两个同名参数\n * （空的一端是空字符串），空值不写。page、pageSize、sort、total 与 filter.、search. 开头的名字留给这里，查询栏的字段不要用。\n */\nexport function tableParams<Filters, Params>(\n  query: TableQuery<Filters, Params>,\n  columns: readonly DataTableColumn<never>[] = [],\n): Record<string, QueryValue> {\n  const out: Record<string, QueryValue> = { page: query.page, pageSize: query.pageSize };\n  const sort = formatSorts(query.sorts);\n  if (sort) out.sort = sort;\n  if (query.total !== undefined) out.total = query.total;\n  const keyword = new Set(\n    columns\n      .filter((column) => columnFilter(column)?.options === 'text')\n      .map((column) => column.key),\n  );\n  for (const [key, values] of Object.entries(query.columnFilters)) {\n    const kept = values.filter((value) => value.trim() !== '');\n    if (kept.length === 0) continue;\n    if (keyword.has(key)) out[`search.${key}`] = kept[0];\n    else out[`filter.${key}`] = kept;\n  }\n  if (typeof query.filters === 'object' && query.filters !== null) {\n    for (const [key, value] of Object.entries(query.filters)) {\n      const param = filterParam(value);\n      if (param !== undefined) out[key] = param;\n    }\n  }\n  return out;\n}\n\n/** 查询栏里一个条件写成参数：空值不写；条件树写成 JSON 文字；数组、区间写成几个同名参数；其余是线上的文字 */\nfunction filterParam(value: unknown): QueryValue | undefined {\n  if (value === null || value === undefined || value === '') return undefined;\n  if (isConditionTree(value)) return JSON.stringify(value);\n  const items = Array.isArray(value)\n    ? (value as WireScalar[]).map(wireText)\n    : isRange(value)\n      ? [wireText(value.start), wireText(value.end)]\n      : undefined;\n  if (items) return items.every((item) => item === '') ? undefined : items;\n  return wireText(value as WireScalar);\n}\n\n/** 是条件树（ConditionBuilder 的值）：组合，或带 field 与 op 的比较 */\nfunction isConditionTree(value: unknown): value is Condition {\n  if (typeof value !== 'object' || value === null || Array.isArray(value)) return false;\n  const node = value as Record<string, unknown>;\n  return (\n    isConditionGroup(node as Condition) ||\n    (typeof node.field === 'string' && typeof node.op === 'string')\n  );\n}\n"],"mappings":"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"}

package/dist/theme-customize/ThemeCustomizer.d.ts

@@ -0,0 +1,63 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type ButtonProps } from '../base/Button';
+import { type CodeBlockProps } from '../base/CodeBlock';
+import { type AlertProps } from '../feedback/Alert';
+import { type PartProps } from '../utils/props';
+import { type ThemeSettings } from './customize';
+import { type Theme } from '../config/theme/theme';
+/** 未声明的属性落到外层 div 上 */
+export interface ThemeCustomizerProps extends PartProps<'div'> {
+    /** 设置：父级写 _settings={x} */
+    _settings?: ThemeSettings;
+    /** 设置套在哪套主题上：决定色块取亮色还是暗色色阶、导出代码里的基础主题 */
+    base: Theme;
+    /** 从哪个元素上读实际生效的颜色做对比度检查，默认页面根元素 */
+    contrastTarget?: HTMLElement | null;
+    /** 每个分组（section）的部件属性 */
+    propsGroup?: PartProps<'section'>;
+    /** 对比度检查结果（Alert）的部件属性；色调由检查结果决定 */
+    propsContrast?: Omit<Partial<AlertProps>, 'tone'>;
+    /** 导出代码（CodeBlock）的部件属性；代码与语言由组件管理 */
+    propsCode?: Omit<Partial<CodeBlockProps>, 'code' | 'lang'>;
+    /** 下载代码按钮的部件属性 */
+    propsDownload?: Omit<Partial<ButtonProps>, 'onClick'>;
+    /** 下载设计令牌（Figma 变量能导入的 JSON）按钮的部件属性 */
+    propsDownloadTokens?: Omit<Partial<ButtonProps>, 'onClick'>;
+    /** 恢复默认按钮的部件属性 */
+    propsReset?: Omit<Partial<ButtonProps>, 'onClick'>;
+}
+/** ThemeCustomizer 的样式：root、group、groupHeader、field、fieldHeader、options、option、optionContent 等 */
+export declare const themeCustomizerStyles: Readonly<{
+    corner: css.CompiledStyles;
+    field: css.CompiledStyles;
+    fieldHeader: css.CompiledStyles;
+    group: css.CompiledStyles;
+    groupHeader: css.CompiledStyles;
+    option: css.CompiledStyles;
+    optionContent: css.CompiledStyles;
+    optionLabel: css.CompiledStyles;
+    options: css.CompiledStyles;
+    root: css.CompiledStyles;
+    sample: css.CompiledStyles;
+    sans: css.CompiledStyles;
+    serif: css.CompiledStyles;
+    swatch: css.CompiledStyles;
+    swatchDefault: css.CompiledStyles;
+    swatchLarge: css.CompiledStyles;
+    swatchOption: css.CompiledStyles;
+    swatches: css.CompiledStyles;
+}>;
+/** ThemeCustomizer 的样式：圆角示意的四档（none、small、medium、large） */
+export declare const themeCustomizerCornerStyles: Readonly<{
+    large: css.CompiledStyles;
+    medium: css.CompiledStyles;
+    none: css.CompiledStyles;
+    small: css.CompiledStyles;
+}>;
+/** ThemeCustomizer 的动态样式：色块的颜色、缩放示例的字号 */
+export declare const themeCustomizerDynamicStyles: Readonly<{
+    readonly fill: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly scale: (factor: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 主题编辑器：分组的旋钮、对比度检查与导出代码 */
+export declare const ThemeCustomizer: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ThemeCustomizerProps>;