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

package/dist/input/Transfer.js

@@ -0,0 +1,407 @@
+import { useLang, useTextMatcher } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { IconButton } from "../base/IconButton.js";
+import { announce } from "../utils/dom/announcer.js";
+import { Small } from "../base/Text.js";
+import { useFieldControl } from "../form/Field.js";
+import { toListboxOption } from "./list-state.js";
+import { Checkbox } from "./Checkbox.js";
+import { checkedByStrategy, indexTree } from "../utils/data/tree.js";
+import { Tree } from "../display/Tree.js";
+import { Listbox } from "./Listbox.js";
+import { TextField } from "./TextField.js";
+import { computed, createVNode, isVNode, mergeProps, ref, useId } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronLeft, ChevronRight, Search } from "@lucide/icons";
+//#region src/input/Transfer.tsx
+/**
+* 穿梭框：左边是可选的，右边是已选的，勾上之后点中间的按钮移过去（分配权限、指派成员、挑选导出的列）。
+*
+*   <Transfer items={users} toOption={(user) => ({ value: user.id, label: user.name })} _value={memberIds} searchable />
+*   <TreeTransfer items={orgs} getKey={…} getLabel={…} getChildren={…} _value={teamIds} />   左边是一棵树
+*
+* - 每一边是一个可多选的 Listbox（焦点、方向键、空格勾选、虚拟滚动同 Listbox），上方是全选框、标题与“勾上 / 总数”，
+*   searchable 时带搜索框（按选项文字，认 createUi 的 textMatcher）。全选只管当前看得见（搜索后留下）的项。
+* - 中间两个按钮把勾上的项移到另一边（没有勾上的时不可用），双击一项直接移过去；移动后读屏播报移了几项。
+*   不可用的选项（ListboxOption 的 disabled）勾不上，也就移不动。
+* - value 是右边的值，按移过去的先后排列；items 里找不到的值不显示（也不会被删掉）。
+* - TreeTransfer：左边是勾选的 Tree（父子联动、可搜索），已经移过去的节点勾上且不可用；只移叶子，value 是叶子的 key。
+* - 在 Field 里时整体是一组（role="group"，名称是 Field 的标签），两边的列表各以自己的标题为名。
+*
+* 部件：Root（div，role="group"）、Panel（section，每一边）、Header、SelectAll（Checkbox）、Title、Count、
+* Search（TextField）、List（Listbox / Tree）、Actions（中间的按钮）。
+*/
+/** 两边的列表（可多选的 Listbox）的属性：propsList 用它 */
+/** Transfer 与 TreeTransfer 共有的属性；未声明的属性落到外层 div（role="group"）上 */
+/** 选项是 ListboxOption、字符串，或任意数据加 toOption */
+/** 左边是一棵树的穿梭框 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Transfer 的样式：root、panel、header、title、search、list、actions、actionIcon */
+var transferStyles = css.create({
+	root: {
+		display: "grid",
+		gridTemplateColumns: {
+			default: "minmax(0, 1fr) auto minmax(0, 1fr)",
+			"@media (max-width: 40rem)": "minmax(0, 1fr)"
+		},
+		alignItems: "stretch",
+		gap: "_md"
+	},
+	panel: {
+		display: "flex",
+		flexDirection: "column",
+		minWidth: 0,
+		height: "20em",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_border",
+		borderRadius: "_md",
+		backgroundColor: "_surface",
+		overflow: "hidden"
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		paddingBlock: "_xs",
+		paddingInline: "_sm",
+		borderBlockEndWidth: "_xs",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_borderMuted"
+	},
+	title: {
+		flexGrow: 1,
+		minWidth: 0,
+		fontWeight: "_semibold"
+	},
+	search: {
+		padding: "_xs",
+		flexShrink: 0
+	},
+	searchField: { width: "_full" },
+	list: {
+		flexGrow: 1,
+		minHeight: 0,
+		borderWidth: 0,
+		borderRadius: 0
+	},
+	actions: {
+		display: "flex",
+		flexDirection: {
+			default: "column",
+			"@media (max-width: 40rem)": "row"
+		},
+		justifyContent: "center",
+		gap: "_sm"
+	},
+	actionIcon: { rotate: {
+		default: null,
+		"@media (max-width: 40rem)": "90deg"
+	} }
+});
+/** 一边：全选框、标题、计数、搜索框与列表 */
+function renderPanel(lang, options) {
+	let _slot;
+	const visibleChecked = options.selectable.filter((key) => options.checked.includes(key));
+	const all = options.selectable.length > 0 && visibleChecked.length === options.selectable.length;
+	return createVNode("section", mergeAttrs({ sx: transferStyles.panel }, options.propsPanel, { "aria-labelledby": options.titleId }), [
+		createVNode("div", css.attrs(transferStyles.header), [
+			createVNode(Checkbox, {
+				"_checked": all,
+				"onUpdate:_checked": (next) => {
+					const others = options.checked.filter((key) => !options.selectable.includes(key));
+					options.onCheckAll(next ? [...others, ...options.selectable] : others);
+				},
+				"indeterminate": !all && visibleChecked.length > 0,
+				"disabled": options.disabled || options.selectable.length === 0,
+				"aria-label": lang.transferSelectAll(options.title)
+			}, null),
+			createVNode("span", mergeProps({ "id": options.titleId }, css.attrs(transferStyles.title)), [options.title]),
+			createVNode(Small, { "tone": "muted" }, _isSlot(_slot = lang.transferCount(options.checked.length, options.total)) ? _slot : { default: () => [_slot] })
+		]),
+		options.searchable && createVNode("div", css.attrs(transferStyles.search), [createVNode(TextField, mergeProps(mergePartProps({
+			icon: Search,
+			variant: "soft",
+			size: "sm",
+			placeholder: lang.selectSearch,
+			"aria-label": `${lang.selectSearch} ${options.title}`,
+			propsRoot: { sx: transferStyles.searchField }
+		}, options.propsSearch), {
+			"type": "search",
+			"_value": options.search,
+			"onUpdate:_value": options.onSearch,
+			"disabled": options.disabled
+		}), null)]),
+		options.list
+	]);
+}
+/** 中间的两个按钮 */
+function renderActions(lang, titles, enabled, move, propsAction) {
+	return createVNode("div", css.attrs(transferStyles.actions), [[1, 0].map((to) => createVNode(IconButton, mergeProps({ "key": to }, mergePartProps({
+		icon: to === 1 ? ChevronRight : ChevronLeft,
+		"aria-label": lang.transferMoveTo(titles[to]),
+		variant: "soft",
+		size: "sm",
+		propsIcon: {
+			flipInRtl: true,
+			sx: transferStyles.actionIcon
+		}
+	}, propsAction, {
+		disabled: !enabled[to],
+		onClick: move[to]
+	})), null))]);
+}
+/** 穿梭框：两个可多选的列表，勾上之后移到另一边 */
+var Transfer = /*#__PURE__*/ _component((_props, _ctx) => {
+	const items = readonlyProp(_props, "items");
+	const toOption = readonlyProp(_props, "toOption");
+	const value = bindable(_props, "_value", () => [], _ctx.emit);
+	const titles = readonlyProp(_props, "titles");
+	const searchable = readonlyProp(_props, "searchable", false);
+	const filter = readonlyProp(_props, "filter");
+	const disabled = readonlyProp(_props, "disabled");
+	const propsPanel = readonlyProp(_props, "propsPanel");
+	const propsSearch = readonlyProp(_props, "propsSearch");
+	const propsAction = readonlyProp(_props, "propsAction");
+	const propsList = readonlyProp(_props, "propsList");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const textMatcher = useTextMatcher();
+	const field = useFieldControl(() => ({ disabled: disabled.value }));
+	const baseId = useId();
+	let checked = ref([[], []]);
+	let searches = ref(["", ""]);
+	const entries = computed(() => items.value.map((item) => ({
+		item,
+		option: toListboxOption(item, toOption.value)
+	})));
+	const byValue = computed(() => new Map(entries.value.map((entry) => [entry.option.value, entry])));
+	const chosen = computed(() => new Set(value.value));
+	const titleOf = (side) => titles.value?.[side] ?? (side === 0 ? lang.transferSource : lang.transferTarget);
+	const matches = (entry, query) => {
+		const text = query.trim();
+		if (!text) return true;
+		return filter.value ? filter.value(entry.item, text) : textMatcher()(entry.option.label, text);
+	};
+	/** 一边的全部项（左边按 items 的顺序，右边按移过去的先后） */
+	const sideEntries = (side) => side === 0 ? entries.value.filter((entry) => !chosen.value.has(entry.option.value)) : value.value.flatMap((key) => byValue.value.get(key) ?? []);
+	const shownEntries = (side) => sideEntries(side).filter((entry) => matches(entry, searches.value[side]));
+	function setChecked(side, keys) {
+		checked.value = side === 0 ? [keys, checked.value[1]] : [checked.value[0], keys];
+	}
+	/** 把 keys 从 from 这一边移到另一边 */
+	function move(from, keys) {
+		const movable = keys.filter((key) => {
+			const entry = byValue.value.get(key);
+			return entry && !entry.option.disabled && chosen.value.has(key) === (from === 1);
+		});
+		if (field().disabled || movable.length === 0) return;
+		const moving = new Set(movable);
+		value.value = from === 0 ? [...value.value, ...movable] : value.value.filter((key) => !moving.has(key));
+		setChecked(from, checked.value[from].filter((key) => !moving.has(key)));
+		announce(lang.transferMoved(movable.length, titleOf(from === 0 ? 1 : 0)));
+	}
+	return () => {
+		const state = field();
+		const list = (side) => createVNode(Listbox, mergeProps(mergePartProps({
+			items: shownEntries(side).map((entry) => entry.item),
+			toOption: (item) => toListboxOption(item, toOption.value),
+			selectionMode: "multiple",
+			sx: transferStyles.list,
+			propsOption: (item) => ({ onDblclick: () => move(side, [toListboxOption(item, toOption.value).value]) })
+		}, propsList.value, {
+			disabled: state.disabled,
+			id: `${baseId}-${side}`,
+			"aria-labelledby": `${baseId}-title-${side}`
+		}), {
+			"_value": checked.value[side],
+			"onUpdate:_value": (next) => setChecked(side, next)
+		}), null);
+		const panel = (side) => renderPanel(lang, {
+			title: titleOf(side),
+			titleId: `${baseId}-title-${side}`,
+			selectable: shownEntries(side).filter((entry) => !entry.option.disabled).map((entry) => entry.option.value),
+			checked: checked.value[side],
+			total: sideEntries(side).length,
+			onCheckAll: (keys) => setChecked(side, keys),
+			search: searches.value[side],
+			onSearch: (text) => searches.value = side === 0 ? [text, searches.value[1]] : [searches.value[0], text],
+			searchable: searchable.value,
+			disabled: state.disabled,
+			propsPanel: propsPanel.value,
+			propsSearch: propsSearch.value,
+			list: list(side)
+		});
+		return createVNode("div", mergeAttrs({ sx: transferStyles.root }, rest, {
+			role: "group",
+			"aria-labelledby": rest["aria-labelledby"] ?? state.labelledBy,
+			"aria-describedby": state.describedBy
+		}), [
+			panel(0),
+			renderActions(lang, [titleOf(0), titleOf(1)], [!state.disabled && checked.value[1].length > 0, !state.disabled && checked.value[0].length > 0], [() => move(1, checked.value[1]), () => move(0, checked.value[0])], propsAction.value),
+			panel(1)
+		]);
+	};
+}, {
+	name: "Transfer",
+	props: [
+		"items",
+		"toOption",
+		"_value",
+		"onUpdate:_value",
+		"titles",
+		"searchable",
+		"filter",
+		"disabled",
+		"propsPanel",
+		"propsSearch",
+		"propsAction",
+		"propsList"
+	]
+});
+/** 左边是一棵树的穿梭框：勾选叶子（父子联动）移到右边 */
+var TreeTransfer = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const _cache = [];
+	const items = readonlyProp(_props2, "items");
+	const getKey = readonlyProp(_props2, "getKey");
+	const getLabel = readonlyProp(_props2, "getLabel");
+	const getChildren = readonlyProp(_props2, "getChildren");
+	const value = bindable(_props2, "_value", () => [], _ctx2.emit);
+	const titles = readonlyProp(_props2, "titles");
+	const searchable = readonlyProp(_props2, "searchable", false);
+	const disabled = readonlyProp(_props2, "disabled");
+	const propsPanel = readonlyProp(_props2, "propsPanel");
+	const propsSearch = readonlyProp(_props2, "propsSearch");
+	const propsAction = readonlyProp(_props2, "propsAction");
+	const propsTree = readonlyProp(_props2, "propsTree");
+	const propsList = readonlyProp(_props2, "propsList");
+	const rest = restProps(_props2, _ctx2, true);
+	const lang = useLang();
+	const textMatcher = useTextMatcher();
+	const field = useFieldControl(() => ({ disabled: disabled.value }));
+	const baseId = useId();
+	let checked = ref([[], []]);
+	let searches = ref(["", ""]);
+	let expanded = ref([]);
+	const index = computed(() => indexTree(items.value, {
+		getKey: (node) => getKey.value(node),
+		getChildren: getChildren.value
+	}));
+	const nodes = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		const visit = (level) => level.forEach((node) => {
+			map.set(getKey.value(node), node);
+			visit(getChildren.value(node) ?? []);
+		});
+		visit(items.value);
+		return map;
+	});
+	const leaves = computed(() => index.value.order.filter((key) => !index.value.children.get(key)?.length));
+	const chosen = computed(() => new Set(value.value));
+	const titleOf = (side) => titles.value?.[side] ?? (side === 0 ? lang.transferSource : lang.transferTarget);
+	const matchesSearch = (key, side) => {
+		const text = searches.value[side].trim();
+		const node = nodes.value.get(key);
+		return !text || !!node && textMatcher()(getLabel.value(node), text);
+	};
+	const sourceLeaves = () => leaves.value.filter((key) => !chosen.value.has(key));
+	const targetOptions = () => value.value.flatMap((key) => {
+		const node = nodes.value.get(key);
+		return node ? [{
+			value: key,
+			label: getLabel.value(node)
+		}] : [];
+	});
+	function setChecked(side, keys) {
+		checked.value = side === 0 ? [keys, checked.value[1]] : [checked.value[0], keys];
+	}
+	function move(from, keys) {
+		const movable = keys.filter((key) => nodes.value.has(key) && chosen.value.has(key) === (from === 1));
+		if (field().disabled || movable.length === 0) return;
+		const moving = new Set(movable);
+		value.value = from === 0 ? [...value.value, ...movable] : value.value.filter((key) => !moving.has(key));
+		setChecked(from, checked.value[from].filter((key) => !moving.has(key)));
+		announce(lang.transferMoved(movable.length, titleOf(from === 0 ? 1 : 0)));
+	}
+	return () => {
+		const state = field();
+		const sourceChecked = checked.value[0];
+		const tree = createVNode(Tree, mergeProps(mergePartProps({
+			items: items.value,
+			getKey: getKey.value,
+			getLabel: getLabel.value,
+			getChildren: getChildren.value,
+			checkable: true,
+			isDisabled: (node) => state.disabled || chosen.value.has(getKey.value(node)),
+			filter: searches.value[0],
+			propsScrollArea: { sx: transferStyles.list }
+		}, propsTree.value, { "aria-labelledby": `${baseId}-title-0` }), {
+			"_checked": [...value.value, ...sourceChecked],
+			"onUpdate:_checked": _cache[0] || (_cache[0] = (next) => setChecked(0, checkedByStrategy(index.value, next, "child").filter((key) => !chosen.value.has(key)))),
+			"_expanded": expanded.value,
+			"onUpdate:_expanded": _cache[1] || (_cache[1] = ($event) => expanded.value = $event)
+		}), null);
+		const list = createVNode(Listbox, mergeProps(mergePartProps({
+			items: targetOptions().filter((option) => matchesSearch(option.value, 1)),
+			selectionMode: "multiple",
+			sx: transferStyles.list,
+			propsOption: (option) => ({ onDblclick: () => move(1, [option.value]) })
+		}, propsList.value, {
+			disabled: state.disabled,
+			id: `${baseId}-1`,
+			"aria-labelledby": `${baseId}-title-1`
+		}), {
+			"_value": checked.value[1],
+			"onUpdate:_value": _cache[2] || (_cache[2] = (next) => setChecked(1, next))
+		}), null);
+		const panel = (side, selectable, total, body) => renderPanel(lang, {
+			title: titleOf(side),
+			titleId: `${baseId}-title-${side}`,
+			selectable,
+			checked: checked.value[side],
+			total,
+			onCheckAll: (keys) => setChecked(side, keys),
+			search: searches.value[side],
+			onSearch: (text) => searches.value = side === 0 ? [text, searches.value[1]] : [searches.value[0], text],
+			searchable: searchable.value,
+			disabled: state.disabled,
+			propsPanel: propsPanel.value,
+			propsSearch: propsSearch.value,
+			list: body
+		});
+		return createVNode("div", mergeAttrs({ sx: transferStyles.root }, rest, {
+			role: "group",
+			"aria-labelledby": rest["aria-labelledby"] ?? state.labelledBy,
+			"aria-describedby": state.describedBy
+		}), [
+			panel(0, sourceLeaves().filter((key) => matchesSearch(key, 0)), sourceLeaves().length, tree),
+			renderActions(lang, [titleOf(0), titleOf(1)], [!state.disabled && checked.value[1].length > 0, !state.disabled && sourceChecked.length > 0], [() => move(1, checked.value[1]), () => move(0, sourceChecked)], propsAction.value),
+			panel(1, value.value.filter((key) => matchesSearch(key, 1)), targetOptions().length, list)
+		]);
+	};
+}, {
+	name: "TreeTransfer",
+	props: [
+		"items",
+		"getKey",
+		"getLabel",
+		"getChildren",
+		"_value",
+		"onUpdate:_value",
+		"titles",
+		"searchable",
+		"disabled",
+		"propsPanel",
+		"propsSearch",
+		"propsAction",
+		"propsTree",
+		"propsList"
+	]
+});
+//#endregion
+export { Transfer, TreeTransfer, transferStyles };
+
+//# sourceMappingURL=Transfer.js.map

package/dist/input/Transfer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Transfer.js","names":["_isVNode","_createVNode","_mergeProps","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_ref","_vue_computed"],"sources":["../../src/input/Transfer.tsx"],"sourcesContent":["/**\n * 穿梭框：左边是可选的，右边是已选的，勾上之后点中间的按钮移过去（分配权限、指派成员、挑选导出的列）。\n *\n *   <Transfer items={users} toOption={(user) => ({ value: user.id, label: user.name })} _value={memberIds} searchable />\n *   <TreeTransfer items={orgs} getKey={…} getLabel={…} getChildren={…} _value={teamIds} />   左边是一棵树\n *\n * - 每一边是一个可多选的 Listbox（焦点、方向键、空格勾选、虚拟滚动同 Listbox），上方是全选框、标题与“勾上 / 总数”，\n *   searchable 时带搜索框（按选项文字，认 createUi 的 textMatcher）。全选只管当前看得见（搜索后留下）的项。\n * - 中间两个按钮把勾上的项移到另一边（没有勾上的时不可用），双击一项直接移过去；移动后读屏播报移了几项。\n *   不可用的选项（ListboxOption 的 disabled）勾不上，也就移不动。\n * - value 是右边的值，按移过去的先后排列；items 里找不到的值不显示（也不会被删掉）。\n * - TreeTransfer：左边是勾选的 Tree（父子联动、可搜索），已经移过去的节点勾上且不可用；只移叶子，value 是叶子的 key。\n * - 在 Field 里时整体是一组（role=\"group\"，名称是 Field 的标签），两边的列表各以自己的标题为名。\n *\n * 部件：Root（div，role=\"group\"）、Panel（section，每一边）、Header、SelectAll（Checkbox）、Title、Count、\n * Search（TextField）、List（Listbox / Tree）、Actions（中间的按钮）。\n */\nimport { ChevronLeft, ChevronRight, Search } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { UpdateHandlers } from '@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime';\nimport { useId, type VNodeChild } from 'vue';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Small } from '../base/Text';\nimport { useLang, useTextMatcher } from '../config/context';\nimport { Tree, type TreeProps } from '../display/Tree';\nimport { useFieldControl } from '../form/Field';\nimport { checkedByStrategy, indexTree } from '../utils/data/tree';\nimport { announce } from '../utils/dom/announcer';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { Checkbox } from './Checkbox';\nimport { Listbox, type ListboxBaseProps, type ListboxProps } from './Listbox';\nimport type { MultipleSelectionProps } from '../utils/data/selection';\nimport { toListboxOption, type ListboxOption, type OptionMapping } from './list-state';\nimport { TextField, type TextFieldProps } from './TextField';\n\n/** 两边的列表（可多选的 Listbox）的属性：propsList 用它 */\nexport type TransferListProps<T> = ListboxBaseProps<T> & MultipleSelectionProps & OptionMapping<T>;\n\n/** Transfer 与 TreeTransfer 共有的属性；未声明的属性落到外层 div（role=\"group\"）上 */\nexport interface TransferBaseProps extends PartProps<'div', 'role'> {\n  /** 右边（已选）的值，按移过去的先后排列：父级写 _value={keys} */\n  _value?: string[];\n  /** 左右两边的标题，默认取语言包（可选、已选） */\n  titles?: readonly [string, string];\n  /** 两边带搜索框 */\n  searchable?: boolean;\n  /** 不可用：勾不了、移不了 */\n  disabled?: boolean;\n  /** 每一边的部件属性（section；列表的高度给它的 sx） */\n  propsPanel?: PartProps<'section'>;\n  /** 搜索框的部件属性 */\n  propsSearch?: Partial<TextFieldProps>;\n  /** 中间两个按钮的部件属性 */\n  propsAction?: Partial<IconButtonProps>;\n}\n\n/** 选项是 ListboxOption、字符串，或任意数据加 toOption */\nexport type TransferProps<T = ListboxOption> = TransferBaseProps &\n  OptionMapping<T> & {\n    /** 全部数据（两边一起）：右边显示 value 里的那些 */\n    items: readonly T[];\n    /** 搜索时怎样算匹配；默认选项文字包含输入（忽略大小写与重音，或 createUi 的 textMatcher） */\n    filter?: (item: T, query: string) => boolean;\n    /** 两边列表的部件属性 */\n    propsList?: Partial<TransferListProps<T>>;\n  };\n\n/** 左边是一棵树的穿梭框 */\nexport interface TreeTransferProps<T> extends TransferBaseProps {\n  /** 第一层的节点 */\n  items: readonly T[];\n  /** 节点的 key，整棵树里唯一 */\n  getKey: (node: T) => string;\n  /** 节点的文字 */\n  getLabel: (node: T) => string;\n  /** 子节点 */\n  getChildren: (node: T) => readonly T[] | undefined;\n  /** 左边的树的部件属性 */\n  propsTree?: Partial<TreeProps<T>>;\n  /** 右边列表的部件属性 */\n  propsList?: Partial<TransferListProps<ListboxOption>>;\n}\n\n/** Transfer 的样式：root、panel、header、title、search、list、actions、actionIcon */\nexport const transferStyles = css.create({\n  // 窄屏时上下排，按钮换成上下箭头\n  root: {\n    display: 'grid',\n    gridTemplateColumns: {\n      default: 'minmax(0, 1fr) auto minmax(0, 1fr)',\n      '@media (max-width: 40rem)': 'minmax(0, 1fr)',\n    },\n    alignItems: 'stretch',\n    gap: '_md',\n  },\n  panel: {\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n    height: '20em',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_borderMuted',\n  },\n  title: { flexGrow: 1, minWidth: 0, fontWeight: '_semibold' },\n  search: { padding: '_xs', flexShrink: 0 },\n  searchField: { width: '_full' },\n  // 列表占满剩下的高度，自己滚动（虚拟滚动要有确定的高度）\n  list: { flexGrow: 1, minHeight: 0, borderWidth: 0, borderRadius: 0 },\n  actions: {\n    display: 'flex',\n    flexDirection: { default: 'column', '@media (max-width: 40rem)': 'row' },\n    justifyContent: 'center',\n    gap: '_sm',\n  },\n  actionIcon: { rotate: { default: null, '@media (max-width: 40rem)': '90deg' } },\n});\n\ninterface PanelOptions {\n  title: string;\n  titleId: string;\n  /** 看得见的、能勾的项 */\n  selectable: readonly string[];\n  /** 勾上的 */\n  checked: readonly string[];\n  /** 这一边一共几项 */\n  total: number;\n  onCheckAll: (keys: string[]) => void;\n  search: string;\n  onSearch: (text: string) => void;\n  searchable: boolean;\n  disabled: boolean;\n  propsPanel?: PartProps<'section'>;\n  propsSearch?: Partial<TextFieldProps>;\n  list: VNodeChild;\n}\n\n/** 一边：全选框、标题、计数、搜索框与列表 */\nfunction renderPanel(lang: ReturnType<typeof useLang>, options: PanelOptions) {\n  const visibleChecked = options.selectable.filter((key) => options.checked.includes(key));\n  const all = options.selectable.length > 0 && visibleChecked.length === options.selectable.length;\n  return (\n    <section\n      {...mergeAttrs<'section'>({ sx: transferStyles.panel }, options.propsPanel, {\n        'aria-labelledby': options.titleId,\n      })}\n    >\n      <div {...css.attrs(transferStyles.header)}>\n        <Checkbox\n          _checked={all}\n          onUpdate:_checked={(next: boolean) => {\n            const others = options.checked.filter((key) => !options.selectable.includes(key));\n            options.onCheckAll(next ? [...others, ...options.selectable] : others);\n          }}\n          indeterminate={!all && visibleChecked.length > 0}\n          disabled={options.disabled || options.selectable.length === 0}\n          aria-label={lang.transferSelectAll(options.title)}\n        />\n        <span id={options.titleId} {...css.attrs(transferStyles.title)}>\n          {options.title}\n        </span>\n        <Small tone=\"muted\">{lang.transferCount(options.checked.length, options.total)}</Small>\n      </div>\n      {options.searchable && (\n        <div {...css.attrs(transferStyles.search)}>\n          <TextField\n            {...mergePartProps<TextFieldProps>(\n              {\n                icon: Search,\n                variant: 'soft',\n                size: 'sm',\n                placeholder: lang.selectSearch,\n                'aria-label': `${lang.selectSearch} ${options.title}`,\n                propsRoot: { sx: transferStyles.searchField },\n              },\n              options.propsSearch,\n            )}\n            type=\"search\"\n            _value={options.search}\n            onUpdate:_value={options.onSearch}\n            disabled={options.disabled}\n          />\n        </div>\n      )}\n      {options.list}\n    </section>\n  );\n}\n\n/** 中间的两个按钮 */\nfunction renderActions(\n  lang: ReturnType<typeof useLang>,\n  titles: readonly [string, string],\n  enabled: readonly [boolean, boolean],\n  move: readonly [() => void, () => void],\n  propsAction: Partial<IconButtonProps> | undefined,\n) {\n  return (\n    <div {...css.attrs(transferStyles.actions)}>\n      {([1, 0] as const).map((to) => (\n        <IconButton\n          key={to}\n          {...mergePartProps<IconButtonProps>(\n            {\n              icon: to === 1 ? ChevronRight : ChevronLeft,\n              'aria-label': lang.transferMoveTo(titles[to]),\n              variant: 'soft',\n              size: 'sm',\n              propsIcon: { flipInRtl: true, sx: transferStyles.actionIcon },\n            },\n            propsAction,\n            { disabled: !enabled[to], onClick: move[to] },\n          )}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** 穿梭框：两个可多选的列表，勾上之后移到另一边 */\nexport const Transfer = _component(\n  <T,>({\n    items,\n    toOption,\n    _value: value = _bindable<string[]>([]),\n    titles,\n    searchable = false,\n    filter,\n    disabled,\n    propsPanel,\n    propsSearch,\n    propsAction,\n    propsList,\n    ...rest\n  }: TransferProps<T>) => {\n    const lang = useLang();\n    const textMatcher = useTextMatcher();\n    const field = useFieldControl(() => ({ disabled }));\n    const baseId = useId();\n    let checked = _state<[string[], string[]]>([[], []]);\n    let searches = _state<[string, string]>(['', '']);\n\n    const entries = _derived.by(() =>\n      items.map((item) => ({ item, option: toListboxOption(item, toOption) })),\n    );\n    const byValue = _derived.by(() => new Map(entries.map((entry) => [entry.option.value, entry])));\n    const chosen = _derived.by(() => new Set(value));\n    const titleOf = (side: 0 | 1) =>\n      titles?.[side] ?? (side === 0 ? lang.transferSource : lang.transferTarget);\n\n    const matches = (entry: (typeof entries)[number], query: string) => {\n      const text = query.trim();\n      if (!text) return true;\n      return filter ? filter(entry.item, text) : textMatcher()(entry.option.label, text);\n    };\n    /** 一边的全部项（左边按 items 的顺序，右边按移过去的先后） */\n    const sideEntries = (side: 0 | 1) =>\n      side === 0\n        ? entries.filter((entry) => !chosen.has(entry.option.value))\n        : value.flatMap((key) => byValue.get(key) ?? []);\n    const shownEntries = (side: 0 | 1) =>\n      sideEntries(side).filter((entry) => matches(entry, searches[side]));\n\n    function setChecked(side: 0 | 1, keys: string[]) {\n      checked = side === 0 ? [keys, checked[1]] : [checked[0], keys];\n    }\n\n    /** 把 keys 从 from 这一边移到另一边 */\n    function move(from: 0 | 1, keys: readonly string[]) {\n      const movable = keys.filter((key) => {\n        const entry = byValue.get(key);\n        return entry && !entry.option.disabled && chosen.has(key) === (from === 1);\n      });\n      if (field().disabled || movable.length === 0) return;\n      const moving = new Set(movable);\n      value = from === 0 ? [...value, ...movable] : value.filter((key) => !moving.has(key));\n      setChecked(\n        from,\n        checked[from].filter((key) => !moving.has(key)),\n      );\n      announce(lang.transferMoved(movable.length, titleOf(from === 0 ? 1 : 0)));\n    }\n\n    return () => {\n      const state = field();\n      const list = (side: 0 | 1) => (\n        <Listbox\n          {...(mergePartProps<TransferListProps<T>>(\n            {\n              items: shownEntries(side).map((entry) => entry.item),\n              toOption: (item: T) => toListboxOption(item, toOption),\n              selectionMode: 'multiple',\n              sx: transferStyles.list,\n              propsOption: (item: T) => ({\n                // 双击直接移过去\n                onDblclick: () => move(side, [toListboxOption(item, toOption).value]),\n              }),\n            } as TransferListProps<T>,\n            propsList,\n            {\n              disabled: state.disabled,\n              id: `${baseId}-${side}`,\n              'aria-labelledby': `${baseId}-title-${side}`,\n            } as Partial<TransferListProps<T>>,\n          ) as ListboxProps<T> & UpdateHandlers<ListboxProps<T>>)}\n          _value={checked[side]}\n          onUpdate:_value={(next: string[]) => setChecked(side, next)}\n        />\n      );\n      const panel = (side: 0 | 1) =>\n        renderPanel(lang, {\n          title: titleOf(side),\n          titleId: `${baseId}-title-${side}`,\n          selectable: shownEntries(side)\n            .filter((entry) => !entry.option.disabled)\n            .map((entry) => entry.option.value),\n          checked: checked[side],\n          total: sideEntries(side).length,\n          onCheckAll: (keys) => setChecked(side, keys),\n          search: searches[side],\n          onSearch: (text) => (searches = side === 0 ? [text, searches[1]] : [searches[0], text]),\n          searchable,\n          disabled: state.disabled,\n          propsPanel,\n          propsSearch,\n          list: list(side),\n        });\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: transferStyles.root }, rest, {\n            role: 'group',\n            'aria-labelledby': rest['aria-labelledby'] ?? state.labelledBy,\n            'aria-describedby': state.describedBy,\n          })}\n        >\n          {panel(0)}\n          {renderActions(\n            lang,\n            [titleOf(0), titleOf(1)],\n            [!state.disabled && checked[1].length > 0, !state.disabled && checked[0].length > 0],\n            [() => move(1, checked[1]), () => move(0, checked[0])],\n            propsAction,\n          )}\n          {panel(1)}\n        </div>\n      );\n    };\n  },\n);\n\n/** 左边是一棵树的穿梭框：勾选叶子（父子联动）移到右边 */\nexport const TreeTransfer = _component(\n  <T,>({\n    items,\n    getKey,\n    getLabel,\n    getChildren,\n    _value: value = _bindable<string[]>([]),\n    titles,\n    searchable = false,\n    disabled,\n    propsPanel,\n    propsSearch,\n    propsAction,\n    propsTree,\n    propsList,\n    ...rest\n  }: TreeTransferProps<T>) => {\n    const lang = useLang();\n    const textMatcher = useTextMatcher();\n    const field = useFieldControl(() => ({ disabled }));\n    const baseId = useId();\n    let checked = _state<[string[], string[]]>([[], []]);\n    let searches = _state<[string, string]>(['', '']);\n    let expanded = _state<string[]>([]);\n\n    const index = _derived.by(() =>\n      indexTree(items, { getKey: (node) => getKey(node), getChildren }),\n    );\n    // key → 节点：右边的文字、左边“不可用”的判断都用它\n    const nodes = _derived.by(() => {\n      const map = new Map<string, T>();\n      const visit = (level: readonly T[]) =>\n        level.forEach((node) => {\n          map.set(getKey(node), node);\n          visit(getChildren(node) ?? []);\n        });\n      visit(items);\n      return map;\n    });\n    const leaves = _derived.by(() => index.order.filter((key) => !index.children.get(key)?.length));\n    const chosen = _derived.by(() => new Set(value));\n    const titleOf = (side: 0 | 1) =>\n      titles?.[side] ?? (side === 0 ? lang.transferSource : lang.transferTarget);\n    const matchesSearch = (key: string, side: 0 | 1) => {\n      const text = searches[side].trim();\n      const node = nodes.get(key);\n      return !text || (!!node && textMatcher()(getLabel(node), text));\n    };\n    // 左边能勾的叶子：还没移过去的（搜索时只算匹配的）\n    const sourceLeaves = () => leaves.filter((key) => !chosen.has(key));\n    const targetOptions = () =>\n      value.flatMap((key) => {\n        const node = nodes.get(key);\n        return node ? [{ value: key, label: getLabel(node) }] : [];\n      });\n\n    function setChecked(side: 0 | 1, keys: string[]) {\n      checked = side === 0 ? [keys, checked[1]] : [checked[0], keys];\n    }\n\n    function move(from: 0 | 1, keys: readonly string[]) {\n      const movable = keys.filter((key) => nodes.has(key) && chosen.has(key) === (from === 1));\n      if (field().disabled || movable.length === 0) return;\n      const moving = new Set(movable);\n      value = from === 0 ? [...value, ...movable] : value.filter((key) => !moving.has(key));\n      setChecked(\n        from,\n        checked[from].filter((key) => !moving.has(key)),\n      );\n      announce(lang.transferMoved(movable.length, titleOf(from === 0 ? 1 : 0)));\n    }\n\n    return () => {\n      const state = field();\n      const sourceChecked = checked[0];\n      const tree = (\n        <Tree\n          {...mergePartProps<TreeProps<T>>(\n            {\n              items,\n              getKey,\n              getLabel,\n              getChildren,\n              checkable: true,\n              // 已经移过去的叶子勾上且不可用\n              isDisabled: (node: T) => state.disabled || chosen.has(getKey(node)),\n              filter: searches[0],\n              propsScrollArea: { sx: transferStyles.list },\n            },\n            propsTree,\n            { 'aria-labelledby': `${baseId}-title-0` },\n          )}\n          _checked={[...value, ...sourceChecked]}\n          onUpdate:_checked={(next: string[]) =>\n            setChecked(\n              0,\n              checkedByStrategy(index, next, 'child').filter((key) => !chosen.has(key)),\n            )\n          }\n          _expanded={expanded}\n        />\n      );\n      const list = (\n        <Listbox\n          {...mergePartProps<TransferListProps<ListboxOption>>(\n            {\n              items: targetOptions().filter((option) => matchesSearch(option.value, 1)),\n              selectionMode: 'multiple',\n              sx: transferStyles.list,\n              propsOption: (option: ListboxOption) => ({\n                onDblclick: () => move(1, [option.value]),\n              }),\n            } as TransferListProps<ListboxOption>,\n            propsList,\n            {\n              disabled: state.disabled,\n              id: `${baseId}-1`,\n              'aria-labelledby': `${baseId}-title-1`,\n            } as Partial<TransferListProps<ListboxOption>>,\n          )}\n          _value={checked[1]}\n          onUpdate:_value={(next: string[]) => setChecked(1, next)}\n        />\n      );\n      const panel = (side: 0 | 1, selectable: string[], total: number, body: VNodeChild) =>\n        renderPanel(lang, {\n          title: titleOf(side),\n          titleId: `${baseId}-title-${side}`,\n          selectable,\n          checked: checked[side],\n          total,\n          onCheckAll: (keys) => setChecked(side, keys),\n          search: searches[side],\n          onSearch: (text) => (searches = side === 0 ? [text, searches[1]] : [searches[0], text]),\n          searchable,\n          disabled: state.disabled,\n          propsPanel,\n          propsSearch,\n          list: body,\n        });\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: transferStyles.root }, rest, {\n            role: 'group',\n            'aria-labelledby': rest['aria-labelledby'] ?? state.labelledBy,\n            'aria-describedby': state.describedBy,\n          })}\n        >\n          {panel(\n            0,\n            sourceLeaves().filter((key) => matchesSearch(key, 0)),\n            sourceLeaves().length,\n            tree,\n          )}\n          {renderActions(\n            lang,\n            [titleOf(0), titleOf(1)],\n            [!state.disabled && checked[1].length > 0, !state.disabled && sourceChecked.length > 0],\n            [() => move(1, checked[1]), () => move(0, sourceChecked)],\n            propsAction,\n          )}\n          {panel(\n            1,\n            value.filter((key) => matchesSearch(key, 1)),\n            targetOptions().length,\n            list,\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/TreeSelect.d.ts

@@ -0,0 +1,94 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { PresetIconButtonProps } from '../base/CloseButton';
+import { type IconProps } from '../base/Icon';
+import type { TagProps } from '../base/Tag';
+import { type TreeProps } from '../display/Tree';
+import { type SelectionModes } from '../utils/data/selection';
+import { type CheckStrategies } from '../utils/data/tree';
+import { type FloatingPlacement } from '../utils/dom/floating';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PartProps } from '../utils/props';
+import { type ControlIconOptions, type ControlOptions } from './control';
+import { type OptionsLoader } from './remote-items';
+import { type SelectManaged } from './Select';
+import { type SelectedTagsProps } from './SelectedTags';
+import { type TextFieldProps } from './TextField';
+/** 未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */
+export interface TreeSelectProps<T> extends PartProps<'button', SelectManaged>, ControlOptions, ControlIconOptions, OpenChangeProps {
+    /** 顶层节点；有 load 时是第一次加载之前的树（编辑页放上已选节点的那一枝） */
+    items?: readonly T[];
+    /** 节点的 key，整棵树里唯一：也是选中后写回的值 */
+    getKey: (node: T) => string;
+    /** 节点的文字 */
+    getLabel: (node: T) => string;
+    /** 子节点；叶子或还没加载时 undefined */
+    getChildren: (node: T) => readonly T[] | undefined;
+    /** 有没有子节点（懒加载时子节点还没取回来也算有） */
+    hasChildren?: (node: T) => boolean;
+    /** 展开还没有子节点的节点时取回来（返回 Promise 时显示加载中） */
+    loadChildren?: (node: T) => Promise<unknown> | void;
+    /** 不能选的节点（只能展开，如只能选到部门、不能选公司时） */
+    isDisabled?: (node: T) => boolean;
+    /** 单选（默认）或多选（勾选，父子联动） */
+    selectionMode?: keyof SelectionModes;
+    /** 单选时是选中节点的 key（没有时 null），多选时是勾上的节点（按 checkedStrategy）：父级写 _value={x} */
+    _value?: string | string[] | null;
+    /**
+     * 多选时 value 里放哪些勾上的节点（同 Ant Design 的 showCheckedStrategy）：all 全部（默认）；
+     * parent 父节点全勾上时只放父节点（提交“整个部门”）；child 只放叶子（提交“具体的人”）
+     */
+    checkedStrategy?: keyof CheckStrategies;
+    /** 多选时触发框里最多显示几个标签，其余收进“+N”；'responsive' 时排成一行、按宽度放 */
+    maxTagCount?: number | 'responsive';
+    /** 没有选择时显示的文字，默认取语言包（请选择） */
+    placeholder?: string;
+    /** 是否打开：父级可以写 _open={x} */
+    _open?: boolean;
+    /** 弹出位置，默认 bottom-start */
+    placement?: FloatingPlacement;
+    /** 有选择时显示清空按钮 */
+    clearable?: boolean;
+    /** 弹出层顶部带搜索框，按节点文字过滤 */
+    searchable?: boolean;
+    /** 搜索时怎样算命中；默认节点文字包含输入（忽略大小写与重音）。false 时不在本地过滤（服务端按 search 过滤） */
+    filter?: false | ((node: T, query: string) => boolean);
+    /** 搜索框里的文字：打开时清空；父级写 _search={x} 拿到它（自己发请求时） */
+    _search?: string;
+    /** 远程搜索：打开时与搜索词停下 300 ms 后调用，返回命中的节点连同祖先（顶层节点），结果代替 items */
+    load?: OptionsLoader<T>;
+    /** 表单提交时的 name（用隐藏的 input） */
+    name?: string;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读：能聚焦、能看到已选的内容，不能打开、不能清空 */
+    readonly?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 外壳的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 已选内容那一层的部件属性 */
+    propsValue?: PartProps<'span'>;
+    /** 多选时每个标签的部件属性 */
+    propsTag?: Partial<TagProps>;
+    /** 多选时那排标签的部件属性 */
+    propsTags?: Partial<SelectedTagsProps>;
+    /** 清空按钮的部件属性 */
+    propsClear?: Partial<PresetIconButtonProps>;
+    /** 下拉箭头的部件属性 */
+    propsChevron?: Partial<IconProps>;
+    /** 弹出层的部件属性 */
+    propsPopover?: PartProps<'div', 'id' | 'popover'>;
+    /** 搜索框的部件属性（searchable 时） */
+    propsSearch?: Partial<TextFieldProps>;
+    /** 树的部件属性 */
+    propsTree?: Partial<TreeProps<T>>;
+}
+/** TreeSelect 的样式：tree */
+export declare const treeSelectStyles: Readonly<{
+    panel: css.CompiledStyles;
+    tree: css.CompiledStyles;
+}>;
+/** 树形下拉选择：触发框 + 弹出的树，单选或勾选，可搜索 */
+export declare const TreeSelect: <T>(props: TreeSelectProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;