@zerodep-dev/vue-tsx-pro-ui 0.2.0 → 0.3.0

package/dist/patterns/QueryTable.d.ts

@@ -25,6 +25,8 @@ export interface QueryTableProps<T, Filters extends object> extends PartProps<'d
     moreFilters?: (draft: Filters) => VNodeChild;
     /** “重置”回到的条件；不写时是 query 一开始的条件 */
     blankFilters?: Filters;
+    /** 占满到窗口底边（列表页的整页）：行多了在表格里滚动，分页一直在一屏里 */
+    fill?: boolean;
     /** 工具栏上自己的按钮（新建、导出），在标题之后、内置按钮之前 */
     toolbar?: VNodeChild;
     /** 列设置与行高记在浏览器里的键（localStorage，自动加前缀）；不写时只在这次打开里有效 */
@@ -54,13 +56,17 @@ export interface QueryTableProps<T, Filters extends object> extends PartProps<'d
     /** 工具栏内置按钮（刷新、行高、全屏）的部件属性 */
     propsToolbarButton?: Partial<IconButtonProps>;
 }
-/** QueryTable 的样式：root、panel、panelFullscreen、toolbar、title、tools */
+/** QueryTable 的样式：root、rootFill、panel、panelFullscreen、panelFill、toolbar、title、tools、titleInline、toolbarInline */
 export declare const queryTableStyles: Readonly<{
     panel: css.CompiledStyles;
+    panelFill: css.CompiledStyles;
     panelFullscreen: css.CompiledStyles;
     root: css.CompiledStyles;
+    rootFill: css.CompiledStyles;
     title: css.CompiledStyles;
+    titleInline: css.CompiledStyles;
     toolbar: css.CompiledStyles;
+    toolbarInline: css.CompiledStyles;
     tools: css.CompiledStyles;
 }>;
 /** 查询表格：查询栏 + 工具栏 + 表格 + 分页，状态来自 useTableQuery */

package/dist/patterns/QueryTable.js

@@ -2,6 +2,7 @@ import { useLang } from "../config/context.js";
 import { mergeAttrs, mergePartProps } from "../utils/props.js";
 import { Button } from "../base/Button.js";
 import { IconButton } from "../base/IconButton.js";
+import { ViewportFill } from "../layout/ViewportFill.js";
 import { Alert } from "../feedback/Alert.js";
 import { Menu as Menu$1, MenuRadioGroup, MenuRadioItem } from "../overlay/Menu.js";
 import { errorMessage } from "../utils/request/error-message.js";
@@ -15,13 +16,16 @@ 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 } from "vue";
-import { _component, bindable, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, isVNode, reactive, shallowRef } from "vue";
+import { _component, bindable, mergeJsxProps, 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）+ 工具栏（标题、自己的按钮、刷新、行高、列设置、全屏）+ 批量操作栏 + 数据表格 + 分页栏，
+* 查询表格（列表页的整块）：查询栏（FilterBar）+ 工具栏（标题、自己的按钮、刷新、行高、列设置、全屏）+ 批量操作栏 + 数据表格 + 分页栏。
+* 有查询栏时工具栏并进查询栏那一行，压成一行：标题 条件 查询 重置 展开 … 自己的按钮 刷新 行高 列设置 全屏；
+* 条件多时把不常用的放进 moreFilters，点“展开”后更多条件排在这一行下面。没有查询栏、或全屏（全屏的只有表格那一块）时，
+* 工具栏是表格上方单独的一行。fill 时整块占满到窗口底边（ViewportFill），行多了在表格里滚动，分页留在一屏里。
 * 状态都在 useTableQuery 里（服务端分页、排序、条件）。同 Ant Design ProComponents 的 ProTable。
 *
 *   const tasks = useTableQuery(fetchTasks, { filters: { keyword: '', status: '' }, pageSize: 20 });
@@ -42,7 +46,10 @@ import { Maximize, Minimize, RefreshCw, Rows3 } from "@lucide/icons";
 * Table（DataTable）、SelectionBar、Pagination（PaginationBar）。
 */
 /** 未声明的属性落到外层 div 上 */
-/** QueryTable 的样式：root、panel、panelFullscreen、toolbar、title、tools */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** QueryTable 的样式：root、rootFill、panel、panelFullscreen、panelFill、toolbar、title、tools、titleInline、toolbarInline */
 var queryTableStyles = css.create({
 	root: {
 		display: "flex",
@@ -61,6 +68,11 @@ var queryTableStyles = css.create({
 		padding: "_lg",
 		overflow: "auto"
 	},
+	rootFill: {
+		flexGrow: 1,
+		minHeight: 0
+	},
+	panelFill: { minHeight: 0 },
 	toolbar: {
 		display: "flex",
 		alignItems: "center",
@@ -77,6 +89,16 @@ var queryTableStyles = css.create({
 		display: "flex",
 		alignItems: "center",
 		gap: "_xs"
+	},
+	titleInline: {
+		flexShrink: 0,
+		fontWeight: "_semibold",
+		fontSize: "_lg"
+	},
+	toolbarInline: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm"
 	}
 });
 /** 存在浏览器里（给了 persistKey）或只在这次打开里有效的状态 */
@@ -93,6 +115,7 @@ var QueryTable = /*#__PURE__*/ _component((_props, _ctx) => {
 	const filters = readonlyProp(_props, "filters");
 	const moreFilters = readonlyProp(_props, "moreFilters");
 	const blankFilters = readonlyProp(_props, "blankFilters");
+	const fill = readonlyProp(_props, "fill", false);
 	const toolbar = readonlyProp(_props, "toolbar");
 	const persistKey = readonlyProp(_props, "persistKey");
 	const multiSort = readonlyProp(_props, "multiSort", false);
@@ -143,7 +166,7 @@ var QueryTable = /*#__PURE__*/ _component((_props, _ctx) => {
 			}), null),
 			createVNode(Menu$1, {
 				"placement": "bottom-end",
-				"trigger": _cache[0] || (_cache[0] = (props) => createVNode(IconButton, mergeProps(toolButton({
+				"trigger": _cache[0] || (_cache[0] = (props) => createVNode(IconButton, mergeJsxProps(toolButton({
 					icon: Rows3,
 					"aria-label": messages.queryTableDensity
 				}), props), null))
@@ -190,84 +213,95 @@ var QueryTable = /*#__PURE__*/ _component((_props, _ctx) => {
 			}), 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)],
+	return () => {
+		const root = renderRoot();
+		return fill.value ? createVNode(ViewportFill, null, _isSlot(root) ? root : { default: () => [root] }) : root;
+	};
+	function renderRoot() {
+		return createVNode("div", mergeAttrs({ sx: [queryTableStyles.root, fill.value && queryTableStyles.rootFill] }, rest), [filters.value && createVNode(FilterBar, mergePartProps({ "aria-label": messages.queryTableSearch(title.value) }, propsFilterBar.value, {
+			onSearch: search,
+			onReset: reset,
+			loading: query.value.loading,
+			more: moreFilters.value?.(draft),
+			start: fullscreen.active ? void 0 : createVNode("div", css.attrs(queryTableStyles.titleInline), [title.value]),
+			end: fullscreen.active ? void 0 : createVNode("div", mergeAttrs({ sx: queryTableStyles.toolbarInline }, propsToolbar.value), [toolbar.value, renderTools()])
+		}), {
+			default: () => [filters.value(draft)],
 			$stable: true
-		}),
-		query.value.error !== void 0 && createVNode(Alert, mergeProps(mergePartProps({
-			tone: "danger",
-			live: "assertive",
-			action: createVNode(Button, {
-				"size": "sm",
-				"variant": "outline",
-				"tone": "danger",
-				"onClick": _cache[5] || (_cache[5] = () => void query.value.refresh()),
-				"key": "__site2"
-			}, {
-				default: () => [messages.queryTableRetry],
+		}), createVNode("div", mergeAttrs({ sx: [
+			queryTableStyles.panel,
+			fill.value && queryTableStyles.panelFill,
+			fullscreen.active && queryTableStyles.panelFullscreen
+		] }, propsPanel.value, { ref: panel }), [
+			(!filters.value || fullscreen.active) && createVNode("div", mergeAttrs({ sx: queryTableStyles.toolbar }, propsToolbar.value), [
+				createVNode("div", css.attrs(queryTableStyles.title), [title.value]),
+				toolbar.value,
+				renderTools()
+			]),
+			selectionMode.value === "multiple" && createVNode(SelectionBar, mergePartProps({ count: selected.value.length }, propsSelectionBar.value, {
+				count: selected.value.length,
+				onClear: () => selected.value = []
+			}), {
+				default: () => [batchActions.value?.(selected.value)],
 				$stable: true
-			})
-		}, propsError.value), { "key": "__site3" }), {
-			default: () => [errorMessage(query.value.error, lang)],
-			$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[6] || (_cache[6] = ($event) => query.value.sort = $event),
-			"_sorts": query.value.sorts,
-			"onUpdate:_sorts": _cache[7] || (_cache[7] = ($event) => query.value.sorts = $event),
-			"manualFilter": true,
-			"_filters": query.value.columnFilters,
-			"onUpdate:_filters": _cache[8] || (_cache[8] = ($event) => query.value.columnFilters = $event),
-			"loading": query.value.loading,
-			"density": density.value,
-			"selectionMode": selectionMode.value,
-			"_selected": selected.value,
-			"onUpdate:_selected": _cache[9] || (_cache[9] = ($event) => selected.value = $event),
-			"_hiddenColumns": hidden.value,
-			"onUpdate:_hiddenColumns": _cache[10] || (_cache[10] = ($event) => hidden.value = $event),
-			"_columnOrder": order.value,
-			"onUpdate:_columnOrder": _cache[11] || (_cache[11] = ($event) => order.value = $event),
-			"_columnPins": pins.value,
-			"onUpdate:_columnPins": _cache[12] || (_cache[12] = ($event) => pins.value = $event),
-			"_columnWidths": widths.value,
-			"onUpdate:_columnWidths": _cache[13] || (_cache[13] = ($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[14] || (_cache[14] = ($event) => query.value.page = $event),
-			"_pageSize": query.value.pageSize,
-			"onUpdate:_pageSize": _cache[15] || (_cache[15] = ($event) => query.value.pageSize = $event),
-			"total": query.value.total
-		}), null)
-	])]);
+			}),
+			query.value.error !== void 0 && createVNode(Alert, mergePartProps({
+				tone: "danger",
+				live: "assertive",
+				action: createVNode(Button, {
+					"size": "sm",
+					"variant": "outline",
+					"tone": "danger",
+					"onClick": _cache[5] || (_cache[5] = () => void query.value.refresh())
+				}, {
+					default: () => [messages.queryTableRetry],
+					$stable: true
+				})
+			}, propsError.value), {
+				default: () => [errorMessage(query.value.error, lang)],
+				$stable: true
+			}),
+			createVNode(DataTable, mergeJsxProps(mergePartProps({
+				"aria-label": title.value,
+				flexible: fill.value || 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[6] || (_cache[6] = ($event) => query.value.sort = $event),
+				"_sorts": query.value.sorts,
+				"onUpdate:_sorts": _cache[7] || (_cache[7] = ($event) => query.value.sorts = $event),
+				"manualFilter": true,
+				"_filters": query.value.columnFilters,
+				"onUpdate:_filters": _cache[8] || (_cache[8] = ($event) => query.value.columnFilters = $event),
+				"loading": query.value.loading,
+				"density": density.value,
+				"selectionMode": selectionMode.value,
+				"_selected": selected.value,
+				"onUpdate:_selected": _cache[9] || (_cache[9] = ($event) => selected.value = $event),
+				"_hiddenColumns": hidden.value,
+				"onUpdate:_hiddenColumns": _cache[10] || (_cache[10] = ($event) => hidden.value = $event),
+				"_columnOrder": order.value,
+				"onUpdate:_columnOrder": _cache[11] || (_cache[11] = ($event) => order.value = $event),
+				"_columnPins": pins.value,
+				"onUpdate:_columnPins": _cache[12] || (_cache[12] = ($event) => pins.value = $event),
+				"_columnWidths": widths.value,
+				"onUpdate:_columnWidths": _cache[13] || (_cache[13] = ($event) => widths.value = $event),
+				"resizable": true,
+				"columnMenu": true
+			}), null),
+			createVNode(PaginationBar, mergeJsxProps(mergePartProps({ propsPagination: { "aria-label": messages.queryTablePagination(title.value) } }, propsPagination.value), {
+				"_page": query.value.page,
+				"onUpdate:_page": _cache[14] || (_cache[14] = ($event) => query.value.page = $event),
+				"_pageSize": query.value.pageSize,
+				"onUpdate:_pageSize": _cache[15] || (_cache[15] = ($event) => query.value.pageSize = $event),
+				"total": query.value.total
+			}), null)
+		])]);
+	}
 }, {
 	name: "QueryTable",
 	props: [
@@ -278,6 +312,7 @@ var QueryTable = /*#__PURE__*/ _component((_props, _ctx) => {
 		"filters",
 		"moreFilters",
 		"blankFilters",
+		"fill",
 		"toolbar",
 		"persistKey",
 		"multiSort",

package/dist/patterns/QueryTable.js.map

@@ -1 +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, type Ref, type VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { useMessages } from '../config/lang/messages';\nimport { Alert, type AlertProps } from '../feedback/Alert';\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 { cloneValue } from '../utils/data/clone';\nimport { useFullscreen } from '../utils/dom/fullscreen';\nimport { usePersistentState } from '../utils/dom/storage';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { errorMessage } from '../utils/request/error-message';\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  /** 加载失败时表格上方的提示条（Alert）的部件属性 */\n  propsError?: Partial<AlertProps>;\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    propsError,\n    propsToolbarButton,\n    ...rest\n  }: QueryTableProps<T, Filters>) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const lang = useLang();\n    // 查询栏改的是草稿：点“查询”才交给 query\n    // 用 cloneValue 不用 structuredClone：条件里的日期（CalendarDate）、Decimal 要保持原样\n    const initial = cloneValue(_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(cloneValue(draft) as Filters);\n    }\n\n    function reset() {\n      Object.assign(draft, cloneValue(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          {/* 加载失败：按错误码说明原因（网络、权限、条件写错），保留上一次的行，给一个重试 */}\n          {query.error !== undefined && (\n            <Alert\n              {...mergePartProps<Partial<AlertProps>>(\n                {\n                  tone: 'danger',\n                  live: 'assertive',\n                  action: (\n                    <Button\n                      size=\"sm\"\n                      variant=\"outline\"\n                      tone=\"danger\"\n                      onClick={() => void query.refresh()}\n                    >\n                      {messages.queryTableRetry}\n                    </Button>\n                  ),\n                },\n                propsError,\n              )}\n            >\n              {errorMessage(query.error, lang)}\n            </Alert>\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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"}
+{"version":3,"file":"QueryTable.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","Menu","_mergeProps"],"sources":["../../src/patterns/QueryTable.tsx"],"sourcesContent":["/**\n * 查询表格（列表页的整块）：查询栏（FilterBar）+ 工具栏（标题、自己的按钮、刷新、行高、列设置、全屏）+ 批量操作栏 + 数据表格 + 分页栏。\n * 有查询栏时工具栏并进查询栏那一行，压成一行：标题 条件 查询 重置 展开 … 自己的按钮 刷新 行高 列设置 全屏；\n * 条件多时把不常用的放进 moreFilters，点“展开”后更多条件排在这一行下面。没有查询栏、或全屏（全屏的只有表格那一块）时，\n * 工具栏是表格上方单独的一行。fill 时整块占满到窗口底边（ViewportFill），行多了在表格里滚动，分页留在一屏里。\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, type Ref, type VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { useMessages } from '../config/lang/messages';\nimport { Alert, type AlertProps } from '../feedback/Alert';\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 { ViewportFill } from '../layout/ViewportFill';\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 { cloneValue } from '../utils/data/clone';\nimport { useFullscreen } from '../utils/dom/fullscreen';\nimport { usePersistentState } from '../utils/dom/storage';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { errorMessage } from '../utils/request/error-message';\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  fill?: boolean;\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  /** 加载失败时表格上方的提示条（Alert）的部件属性 */\n  propsError?: Partial<AlertProps>;\n  /** 工具栏内置按钮（刷新、行高、全屏）的部件属性 */\n  propsToolbarButton?: Partial<IconButtonProps>;\n}\n\n/** QueryTable 的样式：root、rootFill、panel、panelFullscreen、panelFill、toolbar、title、tools、titleInline、toolbarInline */\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  // fill 时外面的高度定了，整块与区域可以压矮，压不下的在表格里滚动\n  rootFill: { flexGrow: 1, minHeight: 0 },\n  panelFill: { minHeight: 0 },\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  titleInline: { flexShrink: 0, fontWeight: '_semibold', fontSize: '_lg' },\n  toolbarInline: { display: 'flex', alignItems: 'center', gap: '_sm' },\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    fill = false,\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    propsError,\n    propsToolbarButton,\n    ...rest\n  }: QueryTableProps<T, Filters>) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const lang = useLang();\n    // 查询栏改的是草稿：点“查询”才交给 query\n    // 用 cloneValue 不用 structuredClone：条件里的日期（CalendarDate）、Decimal 要保持原样\n    const initial = cloneValue(_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(cloneValue(draft) as Filters);\n    }\n\n    function reset() {\n      Object.assign(draft, cloneValue(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      const root = renderRoot();\n      return fill ? <ViewportFill>{root}</ViewportFill> : root;\n    };\n\n    function renderRoot() {\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [queryTableStyles.root, fill && queryTableStyles.rootFill] },\n            rest,\n          )}\n        >\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                  start: fullscreen.active ? undefined : (\n                    <div {...css.attrs(queryTableStyles.titleInline)}>{title}</div>\n                  ),\n                  end: fullscreen.active ? undefined : (\n                    <div\n                      {...mergeAttrs<'div'>({ sx: queryTableStyles.toolbarInline }, propsToolbar)}\n                    >\n                      {toolbar}\n                      {renderTools()}\n                    </div>\n                  ),\n                },\n              )}\n            >\n              {filters(draft)}\n            </FilterBar>\n          )}\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  queryTableStyles.panel,\n                  fill && queryTableStyles.panelFill,\n                  fullscreen.active && queryTableStyles.panelFullscreen,\n                ],\n              },\n              propsPanel,\n              { ref: _toRef(panel) },\n            )}\n          >\n            {(!filters || fullscreen.active) && (\n              <div {...mergeAttrs<'div'>({ sx: queryTableStyles.toolbar }, propsToolbar)}>\n                <div {...css.attrs(queryTableStyles.title)}>{title}</div>\n                {toolbar}\n                {renderTools()}\n              </div>\n            )}\n            {selectionMode === 'multiple' && (\n              <SelectionBar\n                {...mergePartProps<SelectionBarProps>(\n                  { count: selected.length },\n                  propsSelectionBar,\n                  {\n                    count: selected.length,\n                    onClear: () => (selected = []),\n                  },\n                )}\n              >\n                {batchActions?.(selected)}\n              </SelectionBar>\n            )}\n            {/* 加载失败：按错误码说明原因（网络、权限、条件写错），保留上一次的行，给一个重试 */}\n            {query.error !== undefined && (\n              <Alert\n                {...mergePartProps<Partial<AlertProps>>(\n                  {\n                    tone: 'danger',\n                    live: 'assertive',\n                    action: (\n                      <Button\n                        size=\"sm\"\n                        variant=\"outline\"\n                        tone=\"danger\"\n                        onClick={() => void query.refresh()}\n                      >\n                        {messages.queryTableRetry}\n                      </Button>\n                    ),\n                  },\n                  propsError,\n                )}\n              >\n                {errorMessage(query.error, lang)}\n              </Alert>\n            )}\n            <DataTable\n              {...mergePartProps<Partial<DataTableProps<T>>>(\n                { 'aria-label': title, flexible: fill || 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);\n"],"mappings":"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"}

package/dist/patterns/SlideCaptcha.d.ts

@@ -0,0 +1,80 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+/** 服务端给的一张拼图 */
+export interface SlideChallenge {
+    /** 这一张的标识，换图时变；松手后连同结果一起交给服务端 */
+    id: string;
+    /** 背景图（带缺口） */
+    background: string;
+    /** 拼图图片：和背景一样高，左边缘对着缺口的左边缘 */
+    piece: string;
+    /** 背景图的宽（px） */
+    width: number;
+    /** 背景图的高（px） */
+    height: number;
+    /** 拼图图片的宽度（px） */
+    pieceWidth: number;
+}
+/** 松手时交给服务端的内容 */
+export interface SlideResult {
+    /** 拼图左边缘在背景图里的位置（px，整数） */
+    x: number;
+    /** 拖动轨迹：距按下的毫秒数，和当时的位置（px） */
+    track: {
+        t: number;
+        x: number;
+    }[];
+    /** 从按下到松手的毫秒数 */
+    duration: number;
+}
+/** 验证码的状态：idle 可以拖，verifying 等服务端判定，success 通过，error 没对准 */
+export type SlideStatus = 'idle' | 'verifying' | 'success' | 'error';
+/** 未声明的属性落到外层 div 上 */
+export interface SlideCaptchaProps extends PartProps<'div'> {
+    /** 当前的拼图；还没拿到时为 null，显示加载中 */
+    challenge: SlideChallenge | null;
+    /** 状态，默认 idle */
+    status?: SlideStatus;
+    /** 滑块条上的提示，默认“向右拖动滑块，让拼图对准缺口” */
+    hint?: string;
+    /** 没对准时的提示（图片底部和滑块条上），默认“没对准，请再试一次”；服务端给了具体原因时用它 */
+    errorText?: string;
+    /** 松手：把结果发给服务端判定 */
+    onRelease?: (result: SlideResult) => void;
+    /** 点了“换一张” */
+    onRefresh?: () => void;
+}
+/** SlideCaptcha 的样式：root、picture、image、piece、banner、track、fill、handle 等 */
+export declare const slideCaptchaStyles: Readonly<{
+    banner: css.CompiledStyles;
+    bannerError: css.CompiledStyles;
+    bannerSuccess: css.CompiledStyles;
+    fill: css.CompiledStyles;
+    fillError: css.CompiledStyles;
+    fillSuccess: css.CompiledStyles;
+    handle: css.CompiledStyles;
+    handleActive: css.CompiledStyles;
+    handleError: css.CompiledStyles;
+    handleSuccess: css.CompiledStyles;
+    hint: css.CompiledStyles;
+    image: css.CompiledStyles;
+    loading: css.CompiledStyles;
+    locked: css.CompiledStyles;
+    picture: css.CompiledStyles;
+    piece: css.CompiledStyles;
+    pieceSettle: css.CompiledStyles;
+    refresh: css.CompiledStyles;
+    root: css.CompiledStyles;
+    settle: css.CompiledStyles;
+    track: css.CompiledStyles;
+}>;
+/** SlideCaptcha 的动态样式：位置用百分比，画面和滑块条按容器宽度缩放 */
+export declare const slideCaptchaDynamicStyles: Readonly<{
+    readonly at: (percent: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly pieceWidth: (percent: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly ratio: (aspect: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly handleAt: (position: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly fillTo: (position: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 拼图滑块验证：拖动滑块让拼图对准缺口，松手把位置与轨迹交给服务端判定 */
+export declare const SlideCaptcha: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SlideCaptchaProps>;