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

package/dist/input/TreeSelect.js

@@ -0,0 +1,412 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { disclosureStyles } from "../utils/style/transitions.js";
+import { buttonBaseStyles } from "../base/button-core.js";
+import { selectedValues } from "../utils/data/selection.js";
+import { anchoredPanelSx, floatingStyles, useAnchoredPopover } from "../utils/dom/floating.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { useFieldControl } from "../form/Field.js";
+import { checkedByStrategy, indexTree, toggleChecked } from "../utils/data/tree.js";
+import { Tree } from "../display/Tree.js";
+import { clickOnShell, controlClear, controlIcon, controlParts, focusOnShell, useControlAppearance } from "./control.js";
+import { FormValue } from "../form/FormValue.js";
+import { listPopoverStyles } from "./ListPopover.js";
+import { useRemoteItems } from "./remote-items.js";
+import { SelectedTags } from "./SelectedTags.js";
+import { TextField } from "./TextField.js";
+import { selectStyles } from "./Select.js";
+import { Fragment, computed, createVNode, mergeProps, ref, shallowRef, useId, watch } 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 { ChevronDown, Search } from "@lucide/icons";
+//#region src/input/TreeSelect.tsx
+/**
+* 树形下拉选择：触发框同 Select，弹出的是一棵树（组织机构、产品结构、物料分类）。单选选一个节点，多选勾选（父子联动）。
+*
+*   <TreeSelect
+*     items={orgs}
+*     getKey={(org) => org.id}
+*     getLabel={(org) => org.name}
+*     getChildren={(org) => org.children}
+*     _value={orgId}
+*     searchable
+*   />
+*   <TreeSelect … selectionMode="multiple" _value={teamIds} />   勾选：勾上父节点就是整枝
+*   <TreeSelect … selectionMode="multiple" checkedStrategy="child" maxTagCount="responsive" />
+*
+* - 单选：点节点或 Enter 选中并关闭；多选：空格或点勾选框，勾上父节点会勾上它的子孙，子节点全勾上时父节点也勾上。
+*   value 按 checkedStrategy 放勾上的节点：全部（默认）、整枝时只放父节点、只放叶子（checkedByStrategy）。
+* - 多选的标签同 Select（SelectedTags）：排在触发按钮前面，可移除（取消整枝），maxTagCount 收起，Backspace 移除最后一个。
+*   标签只列最上层的整枝（勾上了“研发中心”就不再列它下面的每个组）；checkedStrategy="child" 时列叶子。
+* - searchable：弹出层顶部的搜索框，按节点文字过滤，命中节点的祖先一起显示并展开；↓ 从搜索框进到树里。
+*   给 load 时由服务端搜索：打开时与输入停下 300 ms 后按搜索词请求，返回命中的节点连同祖先，结果全部展开
+*   （remote-items.ts，同 Select）；自己管请求时写 _search={keyword}、filter={false}。
+* - 打开后焦点在树上（或搜索框里），键盘同 Tree；Esc 关闭并把焦点还给触发按钮。懒加载同 Tree 的 loadChildren。
+* - 已选节点的文字从已加载的树里找，远程搜索换掉的按见过的文字显示；从没见过的（懒加载还没取回来）显示成 key。
+*
+* 部件：Root（外壳）、Tags（多选时的那排标签）、Tag、Trigger（button，主元素）、Value、Clear、Chevron、Popover、
+* Search（TextField）、Tree。
+*/
+/** 未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */
+/** TreeSelect 的样式：tree */
+var treeSelectStyles = css.create({
+	tree: {
+		flexGrow: 1,
+		minHeight: 0
+	},
+	panel: { minWidth: "16em" }
+});
+/** 树形下拉选择：触发框 + 弹出的树，单选或勾选，可搜索 */
+var TreeSelect = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const items = readonlyProp(_props, "items", () => []);
+	const getKey = readonlyProp(_props, "getKey");
+	const getLabel = readonlyProp(_props, "getLabel");
+	const getChildren = readonlyProp(_props, "getChildren");
+	const hasChildren = readonlyProp(_props, "hasChildren");
+	const loadChildren = readonlyProp(_props, "loadChildren");
+	const isDisabled = readonlyProp(_props, "isDisabled");
+	const selectionMode = readonlyProp(_props, "selectionMode", "single");
+	const checkedStrategy = readonlyProp(_props, "checkedStrategy", "all");
+	const maxTagCount = readonlyProp(_props, "maxTagCount");
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const placeholder = readonlyProp(_props, "placeholder");
+	const placement = readonlyProp(_props, "placement", "bottom-start");
+	const clearable = readonlyProp(_props, "clearable", false);
+	const searchable = readonlyProp(_props, "searchable", false);
+	const filter = readonlyProp(_props, "filter");
+	const search = bindable(_props, "_search", () => "", _ctx.emit);
+	const load = readonlyProp(_props, "load");
+	const name = readonlyProp(_props, "name");
+	const variant = readonlyProp(_props, "variant");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const id = readonlyProp(_props, "id");
+	const icon = readonlyProp(_props, "icon");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsValue = readonlyProp(_props, "propsValue");
+	const propsTag = readonlyProp(_props, "propsTag");
+	const propsTags = readonlyProp(_props, "propsTags");
+	const propsClear = readonlyProp(_props, "propsClear");
+	const propsChevron = readonlyProp(_props, "propsChevron");
+	const propsPopover = readonlyProp(_props, "propsPopover");
+	const propsSearch = readonlyProp(_props, "propsSearch");
+	const propsTree = readonlyProp(_props, "propsTree");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const treeId = useId();
+	const appearance = useControlAppearance(() => ({
+		variant: variant.value,
+		size: size.value,
+		radius: radius.value
+	}));
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	const multiple = () => selectionMode.value === "multiple";
+	const remote = useRemoteItems({
+		load: () => load.value,
+		query: () => search.value,
+		open: () => open.value,
+		items: () => items.value
+	});
+	let expanded = ref([]);
+	let shell = shallowRef(null);
+	let trigger = shallowRef(null);
+	let panel = shallowRef(null);
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	const nodes = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		const visit = (level, parent) => {
+			for (const node of level) {
+				const key = getKey.value(node);
+				map.set(key, {
+					node,
+					parent
+				});
+				visit(getChildren.value(node) ?? [], key);
+			}
+		};
+		visit(remote.items(), void 0);
+		return map;
+	});
+	const seenLabels = /* @__PURE__ */ new Map();
+	watch(() => nodes.value, (map) => {
+		for (const [key, { node }] of map) seenLabels.set(key, getLabel.value(node));
+	}, { immediate: true });
+	const treeFilter = () => {
+		const text = search.value.trim();
+		if (!searchable.value || !text || load.value || filter.value === false) return void 0;
+		return filter.value ? (node) => filter.value(node, text) : text;
+	};
+	const remoteResults = () => !!load.value && !!search.value.trim();
+	const shownExpanded = () => remoteResults() ? [...nodes.value.keys()] : expanded.value;
+	const values = () => selectedValues(value.value);
+	const index = computed(() => indexTree(remote.items(), {
+		getKey: (node) => getKey.value(node),
+		getChildren: getChildren.value
+	}));
+	/** 按取法整理勾上的节点：已加载的按树的顺序与父子关系，还没加载（或远程搜索换掉了）的原样跟在后面 */
+	const byStrategy = (keys, strategy) => [...checkedByStrategy(index.value, keys, strategy), ...keys.filter((key) => !index.value.parents.has(key))];
+	/** 勾选变了（树、移除标签）：按 checkedStrategy 写回，还没加载的已选节点保留 */
+	const setChecked = (checked) => {
+		const unknown = values().filter((key) => !index.value.parents.has(key));
+		value.value = [...checkedByStrategy(index.value, checked, checkedStrategy.value), ...unknown];
+	};
+	/** 触发框里显示的节点：多选时只列最上层的整枝（父节点也勾上了的不重复列），child 时列叶子 */
+	const displayKeys = () => multiple() ? byStrategy(values(), checkedStrategy.value === "child" ? "child" : "parent") : values();
+	/** 移除一个标签：取消整枝 */
+	function remove(key) {
+		setChecked(toggleChecked(index.value, values(), key));
+	}
+	const labelOf = (key) => {
+		const found = nodes.value.get(key);
+		return found ? getLabel.value(found.node) : seenLabels.get(key) ?? key;
+	};
+	function show(event) {
+		search.value = "";
+		const ancestors = new Set(expanded.value);
+		for (const key of values()) for (let at = nodes.value.get(key)?.parent; at !== void 0; at = nodes.value.get(at)?.parent) ancestors.add(at);
+		expanded.value = [...ancestors];
+		setOpen(true, "trigger", event);
+	}
+	function clear() {
+		value.value = multiple() ? [] : null;
+		trigger.value?.focus();
+	}
+	const { onToggle } = useAnchoredPopover(() => ({
+		open: open.value,
+		anchor: shell.value,
+		panel: panel.value,
+		floating: {
+			placement: placement.value,
+			matchWidth: true,
+			fitHeight: true
+		},
+		restoreFocus: false
+	}), { close: (reason, event) => setOpen(false, reason, event) });
+	function onPanelToggle(event) {
+		onToggle(event);
+		if (event.newState === "open") {
+			(searchable.value ? panel.value?.querySelector("input[type=\"search\"]") : panel.value?.querySelector("[role=\"tree\"]"))?.focus();
+			return;
+		}
+		const active = document.activeElement;
+		if (!active || active === document.body || panel.value?.contains(active)) trigger.value?.focus();
+	}
+	function onTriggerKeydown(event) {
+		const state = control();
+		if (state.disabled || state.readonly) return;
+		if (event.key === "Backspace" && multiple()) {
+			event.preventDefault();
+			const last = displayKeys().at(-1);
+			if (last !== void 0) remove(last);
+			return;
+		}
+		if (!open.value && (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			show(event);
+		}
+	}
+	function onSearchKeydown(event) {
+		if (event.key === "Tab") {
+			setOpen(false, "focus", event);
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			panel.value?.querySelector("[role=\"tree\"]")?.focus();
+		}
+	}
+	/** 树的属性（单选、多选共用）：本地搜索时带上 filter */
+	const treeProps = (labelledBy) => mergePartProps({
+		items: remote.items(),
+		getKey: getKey.value,
+		getLabel: getLabel.value,
+		getChildren: getChildren.value,
+		hasChildren: hasChildren.value,
+		filter: treeFilter(),
+		loadChildren: loadChildren.value,
+		loading: remote.loading(),
+		empty: remote.error() ? lang.listLoadFailed : search.value.trim() ? lang.selectNoMatch : void 0,
+		isDisabled: isDisabled.value,
+		propsScrollArea: { sx: treeSelectStyles.tree },
+		"aria-labelledby": labelledBy,
+		"aria-label": labelledBy ? void 0 : rest["aria-label"]
+	}, propsTree.value, { id: treeId });
+	watch(() => value.value, () => {
+		if (!multiple() && open.value) open.value = false;
+	});
+	return () => {
+		const state = control();
+		const s = controlParts(appearance(), state);
+		const off = state.disabled;
+		const locked = off || state.readonly;
+		const shownKeys = displayKeys();
+		const tagged = multiple() && shownKeys.length > 0;
+		const shown = shownKeys.length === 0 ? createVNode("span", css.attrs(selectStyles.placeholder), [placeholder.value ?? lang.selectPlaceholder]) : tagged ? createVNode("span", css.attrs(visuallyHiddenStyles.hidden), [lang.selectSummary(shownKeys.map(labelOf))]) : labelOf(shownKeys[0]);
+		return createVNode(Fragment, null, [createVNode("div", mergeProps(mergeAttrs({
+			...s.root,
+			sx: [s.root.sx, selectStyles.root]
+		}, propsRoot.value, {
+			ref: shell,
+			onPointerdown: off ? void 0 : focusOnShell(() => trigger.value),
+			onClick: off || state.readonly ? void 0 : clickOnShell(() => trigger.value, (event) => open.value ? setOpen(false, "trigger", event) : show(event))
+		}), {
+			"data-state": open.value ? "open" : "closed",
+			"data-invalid": state.invalid || void 0,
+			"data-disabled": off || void 0
+		}), [
+			controlIcon(s, icon.value, propsIcon.value),
+			tagged && createVNode(SelectedTags, mergePartProps({
+				tags: shownKeys.map((key) => ({
+					value: key,
+					label: labelOf(key)
+				})),
+				maxTagCount: maxTagCount.value,
+				onRemove: locked ? void 0 : remove,
+				propsTag: propsTag.value
+			}, propsTags.value), null),
+			createVNode("button", mergeAttrs({ sx: [
+				buttonBaseStyles.root,
+				selectStyles.trigger,
+				tagged && selectStyles.triggerBehindTags
+			] }, rest, {
+				ref: trigger,
+				id: state.id,
+				type: "button",
+				role: "combobox",
+				disabled: off,
+				"aria-haspopup": "tree",
+				"aria-expanded": open.value,
+				"aria-controls": treeId,
+				"aria-invalid": state.invalid || void 0,
+				"aria-required": state.required || void 0,
+				"aria-readonly": state.readonly || void 0,
+				"aria-describedby": state.describedBy,
+				onClick: (event) => {
+					trigger.value?.focus();
+					if (locked) return;
+					if (open.value) setOpen(false, "trigger", event);
+					else show(event);
+				},
+				onKeydown: onTriggerKeydown
+			}), [createVNode("span", mergeAttrs({ sx: selectStyles.value }, propsValue.value), [shown])]),
+			clearable.value && shownKeys.length > 0 && !locked && controlClear(s, propsClear.value, clear),
+			createVNode(Icon, mergePartProps({
+				...s.icon,
+				icon: ChevronDown,
+				sx: [
+					s.icon.sx,
+					disclosureStyles.icon,
+					open.value && selectStyles.chevronOpen
+				]
+			}, propsChevron.value), null),
+			createVNode(FormValue, {
+				"name": name.value,
+				"value": values(),
+				"disabled": state.disabled
+			}, null)
+		]), createVNode("div", mergeAttrs({ sx: [
+			anchoredPanelSx(appearance().size),
+			floatingStyles.scrollPanel,
+			listPopoverStyles.panel,
+			treeSelectStyles.panel
+		] }, propsPopover.value, {
+			ref: panel,
+			popover: "auto",
+			onToggle: onPanelToggle
+		}), [searchable.value && createVNode("div", css.attrs(listPopoverStyles.header), [createVNode(TextField, mergeProps(mergePartProps({
+			icon: Search,
+			variant: "soft",
+			placeholder: lang.selectSearch,
+			"aria-label": lang.selectSearch,
+			propsRoot: { sx: selectStyles.search }
+		}, propsSearch.value), {
+			"type": "search",
+			"_value": search.value,
+			"onUpdate:_value": _cache[0] || (_cache[0] = ($event) => search.value = $event),
+			"aria-controls": treeId,
+			"onKeydown": onSearchKeydown
+		}), null)]), open.value && (multiple() ? createVNode(Tree, mergeProps(treeProps(state.labelledBy), {
+			"checkable": true,
+			"_checked": [...values()],
+			"onUpdate:_checked": _cache[1] || (_cache[1] = (next) => setChecked(next)),
+			"_expanded": shownExpanded(),
+			"onUpdate:_expanded": _cache[2] || (_cache[2] = (next) => expanded.value = remoteResults() ? expanded.value : next)
+		}), null) : createVNode(Tree, mergeProps(treeProps(state.labelledBy), {
+			"selectionMode": "single",
+			"_selected": [...values()],
+			"onUpdate:_selected": _cache[3] || (_cache[3] = (next) => {
+				if (next.length) value.value = next[0];
+				setOpen(false, "select");
+			}),
+			"_expanded": shownExpanded(),
+			"onUpdate:_expanded": _cache[4] || (_cache[4] = (next) => expanded.value = remoteResults() ? expanded.value : next)
+		}), null))])]);
+	};
+}, {
+	name: "TreeSelect",
+	props: [
+		"items",
+		"getKey",
+		"getLabel",
+		"getChildren",
+		"hasChildren",
+		"loadChildren",
+		"isDisabled",
+		"selectionMode",
+		"checkedStrategy",
+		"maxTagCount",
+		"_value",
+		"onUpdate:_value",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"placeholder",
+		"placement",
+		"clearable",
+		"searchable",
+		"filter",
+		"_search",
+		"onUpdate:_search",
+		"load",
+		"name",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"id",
+		"icon",
+		"propsRoot",
+		"propsIcon",
+		"propsValue",
+		"propsTag",
+		"propsTags",
+		"propsClear",
+		"propsChevron",
+		"propsPopover",
+		"propsSearch",
+		"propsTree"
+	]
+});
+//#endregion
+export { TreeSelect, treeSelectStyles };
+
+//# sourceMappingURL=TreeSelect.js.map

package/dist/input/TreeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeSelect.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_ref","_vue_shallowRef","_vue_computed","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/input/TreeSelect.tsx"],"sourcesContent":["/**\n * 树形下拉选择：触发框同 Select，弹出的是一棵树（组织机构、产品结构、物料分类）。单选选一个节点，多选勾选（父子联动）。\n *\n *   <TreeSelect\n *     items={orgs}\n *     getKey={(org) => org.id}\n *     getLabel={(org) => org.name}\n *     getChildren={(org) => org.children}\n *     _value={orgId}\n *     searchable\n *   />\n *   <TreeSelect … selectionMode=\"multiple\" _value={teamIds} />   勾选：勾上父节点就是整枝\n *   <TreeSelect … selectionMode=\"multiple\" checkedStrategy=\"child\" maxTagCount=\"responsive\" />\n *\n * - 单选：点节点或 Enter 选中并关闭；多选：空格或点勾选框，勾上父节点会勾上它的子孙，子节点全勾上时父节点也勾上。\n *   value 按 checkedStrategy 放勾上的节点：全部（默认）、整枝时只放父节点、只放叶子（checkedByStrategy）。\n * - 多选的标签同 Select（SelectedTags）：排在触发按钮前面，可移除（取消整枝），maxTagCount 收起，Backspace 移除最后一个。\n *   标签只列最上层的整枝（勾上了“研发中心”就不再列它下面的每个组）；checkedStrategy=\"child\" 时列叶子。\n * - searchable：弹出层顶部的搜索框，按节点文字过滤，命中节点的祖先一起显示并展开；↓ 从搜索框进到树里。\n *   给 load 时由服务端搜索：打开时与输入停下 300 ms 后按搜索词请求，返回命中的节点连同祖先，结果全部展开\n *   （remote-items.ts，同 Select）；自己管请求时写 _search={keyword}、filter={false}。\n * - 打开后焦点在树上（或搜索框里），键盘同 Tree；Esc 关闭并把焦点还给触发按钮。懒加载同 Tree 的 loadChildren。\n * - 已选节点的文字从已加载的树里找，远程搜索换掉的按见过的文字显示；从没见过的（懒加载还没取回来）显示成 key。\n *\n * 部件：Root（外壳）、Tags（多选时的那排标签）、Tag、Trigger（button，主元素）、Value、Clear、Chevron、Popover、\n * Search（TextField）、Tree。\n */\nimport { ChevronDown, 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 { useId, watch } from 'vue';\nimport type { PresetIconButtonProps } from '../base/CloseButton';\nimport { buttonBaseStyles } from '../base/button-core';\nimport { Icon, type IconProps } from '../base/Icon';\nimport type { TagProps } from '../base/Tag';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { Tree, type TreeProps } from '../display/Tree';\nimport { useFieldControl } from '../form/Field';\nimport { FormValue } from '../form/FormValue';\nimport { selectedValues, type SelectionModes } from '../utils/data/selection';\nimport {\n  checkedByStrategy,\n  indexTree,\n  toggleChecked,\n  type CheckStrategies,\n} from '../utils/data/tree';\nimport {\n  anchoredPanelSx,\n  floatingStyles,\n  useAnchoredPopover,\n  type FloatingPlacement,\n} from '../utils/dom/floating';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport {\n  controlClear,\n  controlIcon,\n  controlParts,\n  clickOnShell,\n  focusOnShell,\n  useControlAppearance,\n  type ControlIconOptions,\n  type ControlOptions,\n} from './control';\nimport { listPopoverStyles } from './ListPopover';\nimport { useRemoteItems, type OptionsLoader } from './remote-items';\nimport { selectStyles, type SelectManaged } from './Select';\nimport { SelectedTags, type SelectedTagsProps } from './SelectedTags';\nimport { TextField, type TextFieldProps } from './TextField';\n\n/** 未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */\nexport interface TreeSelectProps<T>\n  extends PartProps<'button', SelectManaged>, ControlOptions, ControlIconOptions, OpenChangeProps {\n  /** 顶层节点；有 load 时是第一次加载之前的树（编辑页放上已选节点的那一枝） */\n  items?: readonly T[];\n  /** 节点的 key，整棵树里唯一：也是选中后写回的值 */\n  getKey: (node: T) => string;\n  /** 节点的文字 */\n  getLabel: (node: T) => string;\n  /** 子节点；叶子或还没加载时 undefined */\n  getChildren: (node: T) => readonly T[] | undefined;\n  /** 有没有子节点（懒加载时子节点还没取回来也算有） */\n  hasChildren?: (node: T) => boolean;\n  /** 展开还没有子节点的节点时取回来（返回 Promise 时显示加载中） */\n  loadChildren?: (node: T) => Promise<unknown> | void;\n  /** 不能选的节点（只能展开，如只能选到部门、不能选公司时） */\n  isDisabled?: (node: T) => boolean;\n  /** 单选（默认）或多选（勾选，父子联动） */\n  selectionMode?: keyof SelectionModes;\n  /** 单选时是选中节点的 key（没有时 null），多选时是勾上的节点（按 checkedStrategy）：父级写 _value={x} */\n  _value?: string | string[] | null;\n  /**\n   * 多选时 value 里放哪些勾上的节点（同 Ant Design 的 showCheckedStrategy）：all 全部（默认）；\n   * parent 父节点全勾上时只放父节点（提交“整个部门”）；child 只放叶子（提交“具体的人”）\n   */\n  checkedStrategy?: keyof CheckStrategies;\n  /** 多选时触发框里最多显示几个标签，其余收进“+N”；'responsive' 时排成一行、按宽度放 */\n  maxTagCount?: number | 'responsive';\n  /** 没有选择时显示的文字，默认取语言包（请选择） */\n  placeholder?: string;\n  /** 是否打开：父级可以写 _open={x} */\n  _open?: boolean;\n  /** 弹出位置，默认 bottom-start */\n  placement?: FloatingPlacement;\n  /** 有选择时显示清空按钮 */\n  clearable?: boolean;\n  /** 弹出层顶部带搜索框，按节点文字过滤 */\n  searchable?: boolean;\n  /** 搜索时怎样算命中；默认节点文字包含输入（忽略大小写与重音）。false 时不在本地过滤（服务端按 search 过滤） */\n  filter?: false | ((node: T, query: string) => boolean);\n  /** 搜索框里的文字：打开时清空；父级写 _search={x} 拿到它（自己发请求时） */\n  _search?: string;\n  /** 远程搜索：打开时与搜索词停下 300 ms 后调用，返回命中的节点连同祖先（顶层节点），结果代替 items */\n  load?: OptionsLoader<T>;\n  /** 表单提交时的 name（用隐藏的 input） */\n  name?: string;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：能聚焦、能看到已选的内容，不能打开、不能清空 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 已选内容那一层的部件属性 */\n  propsValue?: PartProps<'span'>;\n  /** 多选时每个标签的部件属性 */\n  propsTag?: Partial<TagProps>;\n  /** 多选时那排标签的部件属性 */\n  propsTags?: Partial<SelectedTagsProps>;\n  /** 清空按钮的部件属性 */\n  propsClear?: Partial<PresetIconButtonProps>;\n  /** 下拉箭头的部件属性 */\n  propsChevron?: Partial<IconProps>;\n  /** 弹出层的部件属性 */\n  propsPopover?: PartProps<'div', 'id' | 'popover'>;\n  /** 搜索框的部件属性（searchable 时） */\n  propsSearch?: Partial<TextFieldProps>;\n  /** 树的部件属性 */\n  propsTree?: Partial<TreeProps<T>>;\n}\n\n/** TreeSelect 的样式：tree */\nexport const treeSelectStyles = css.create({\n  // 树的滚动区域占满弹出层剩下的高度（最大高度由定位写在弹出层上）\n  tree: { flexGrow: 1, minHeight: 0 },\n  // 弹出层比触发框窄时也放得下几层缩进\n  panel: { minWidth: '16em' },\n});\n\n/** 树形下拉选择：触发框 + 弹出的树，单选或勾选，可搜索 */\nexport const TreeSelect = _component(\n  <T,>({\n    items = [],\n    getKey,\n    getLabel,\n    getChildren,\n    hasChildren,\n    loadChildren,\n    isDisabled,\n    selectionMode = 'single',\n    checkedStrategy = 'all',\n    maxTagCount,\n    _value: value = _bindable<string | string[] | null>(null),\n    _open: open = _bindable(false),\n    onOpenChange,\n    placeholder,\n    placement = 'bottom-start',\n    clearable = false,\n    searchable = false,\n    filter,\n    _search: search = _bindable(''),\n    load,\n    name,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    icon,\n    propsRoot,\n    propsIcon,\n    propsValue,\n    propsTag,\n    propsTags,\n    propsClear,\n    propsChevron,\n    propsPopover,\n    propsSearch,\n    propsTree,\n    ...rest\n  }: TreeSelectProps<T>) => {\n    const lang = useLang();\n    const treeId = useId();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    const multiple = () => selectionMode === 'multiple';\n    const remote = useRemoteItems({\n      load: () => load,\n      query: () => search,\n      open: () => open,\n      items: () => items,\n    });\n    let expanded = _state<string[]>([]);\n    let shell = _state.raw<HTMLElement | null>(null);\n    let trigger = _state.raw<HTMLElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    // 已加载的整棵树：key → 节点与父节点，查已选的文字、搜索时找祖先都用它\n    const nodes = _derived.by(() => {\n      const map = new Map<string, { node: T; parent: string | undefined }>();\n      const visit = (level: readonly T[], parent: string | undefined) => {\n        for (const node of level) {\n          const key = getKey(node);\n          map.set(key, { node, parent });\n          visit(getChildren(node) ?? [], key);\n        }\n      };\n      visit(remote.items(), undefined);\n      return map;\n    });\n    // 见过的节点文字：远程搜索换掉了已选的节点，触发框里仍显示它的文字\n    const seenLabels = new Map<string, string>();\n    watch(\n      () => nodes,\n      (map) => {\n        for (const [key, { node }] of map) seenLabels.set(key, getLabel(node));\n      },\n      { immediate: true },\n    );\n\n    // 本地搜索交给 Tree 的 filter（命中的节点与祖先、展开祖先、命中的加粗）；\n    // 有 load 或 filter={false} 时结果已经是服务端筛好的，不再过滤\n    const treeFilter = () => {\n      const text = search.trim();\n      if (!searchable || !text || load || filter === false) return undefined;\n      return filter ? (node: T) => filter(node, text) : text;\n    };\n    // 服务端搜索的结果全部展开（只有命中的节点与它们的祖先）；清空搜索回到自己展开的状态\n    const remoteResults = () => !!load && !!search.trim();\n    const shownExpanded = () => (remoteResults() ? [...nodes.keys()] : expanded);\n\n    const values = () => selectedValues(value);\n    // 勾选联动要看到折叠着的节点\n    const index = _derived.by(() =>\n      indexTree(remote.items(), { getKey: (node) => getKey(node), getChildren }),\n    );\n    /** 按取法整理勾上的节点：已加载的按树的顺序与父子关系，还没加载（或远程搜索换掉了）的原样跟在后面 */\n    const byStrategy = (keys: readonly string[], strategy: keyof CheckStrategies) => [\n      ...checkedByStrategy(index, keys, strategy),\n      ...keys.filter((key) => !index.parents.has(key)),\n    ];\n    /** 勾选变了（树、移除标签）：按 checkedStrategy 写回，还没加载的已选节点保留 */\n    const setChecked = (checked: readonly string[]) => {\n      const unknown = values().filter((key) => !index.parents.has(key));\n      value = [...checkedByStrategy(index, checked, checkedStrategy), ...unknown];\n    };\n    /** 触发框里显示的节点：多选时只列最上层的整枝（父节点也勾上了的不重复列），child 时列叶子 */\n    const displayKeys = () =>\n      multiple()\n        ? byStrategy(values(), checkedStrategy === 'child' ? 'child' : 'parent')\n        : values();\n\n    /** 移除一个标签：取消整枝 */\n    function remove(key: string) {\n      setChecked(toggleChecked(index, values(), key));\n    }\n    const labelOf = (key: string) => {\n      const found = nodes.get(key);\n      return found ? getLabel(found.node) : (seenLabels.get(key) ?? key);\n    };\n\n    function show(event?: Event) {\n      search = '';\n      // 打开时展开已选节点的祖先：已选的看得见\n      const ancestors = new Set(expanded);\n      for (const key of values()) {\n        for (let at = nodes.get(key)?.parent; at !== undefined; at = nodes.get(at)?.parent) {\n          ancestors.add(at);\n        }\n      }\n      expanded = [...ancestors];\n      setOpen(true, 'trigger', event);\n    }\n\n    function clear() {\n      value = multiple() ? [] : null;\n      trigger?.focus();\n    }\n\n    const { onToggle } = useAnchoredPopover(\n      () => ({\n        open,\n        anchor: shell,\n        panel,\n        floating: { placement, matchWidth: true, fitHeight: true },\n        restoreFocus: false,\n      }),\n      { close: (reason, event) => setOpen(false, reason, event) },\n    );\n\n    // 打开后焦点进搜索框或树；关闭时焦点还在弹层里（Esc、选中、点外面）就还给触发按钮\n    function onPanelToggle(event: ToggleEvent) {\n      onToggle(event);\n      if (event.newState === 'open') {\n        const target = searchable\n          ? panel?.querySelector<HTMLElement>('input[type=\"search\"]')\n          : panel?.querySelector<HTMLElement>('[role=\"tree\"]');\n        target?.focus();\n        return;\n      }\n      const active = document.activeElement;\n      if (!active || active === document.body || panel?.contains(active)) trigger?.focus();\n    }\n\n    function onTriggerKeydown(event: KeyboardEvent) {\n      const state = control();\n      if (state.disabled || state.readonly) return;\n      // 多选：Backspace 移除最后一个标签（同 Select）\n      if (event.key === 'Backspace' && multiple()) {\n        event.preventDefault();\n        const last = displayKeys().at(-1);\n        if (last !== undefined) remove(last);\n        return;\n      }\n      if (!open && (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ')) {\n        event.preventDefault();\n        show(event);\n      }\n    }\n\n    // 搜索框里 ↓ 进到树；Tab 关闭后照常移到下一个\n    function onSearchKeydown(event: KeyboardEvent) {\n      if (event.key === 'Tab') {\n        setOpen(false, 'focus', event);\n        return;\n      }\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        panel?.querySelector<HTMLElement>('[role=\"tree\"]')?.focus();\n      }\n    }\n\n    /** 树的属性（单选、多选共用）：本地搜索时带上 filter */\n    const treeProps = (labelledBy: string | undefined) =>\n      mergePartProps<TreeProps<T>>(\n        {\n          items: remote.items(),\n          getKey,\n          getLabel,\n          getChildren,\n          hasChildren,\n          filter: treeFilter(),\n          loadChildren,\n          loading: remote.loading(),\n          empty: remote.error()\n            ? lang.listLoadFailed\n            : search.trim()\n              ? lang.selectNoMatch\n              : undefined,\n          isDisabled,\n          propsScrollArea: { sx: treeSelectStyles.tree },\n          'aria-labelledby': labelledBy,\n          'aria-label': labelledBy ? undefined : rest['aria-label'],\n        },\n        propsTree,\n        { id: treeId },\n      );\n\n    // 单选：选中就关闭（树的 selected 里已按 select 关过；父级改 value 时也关，不通知）\n    watch(\n      () => value,\n      () => {\n        if (!multiple() && open) open = false;\n      },\n    );\n\n    return () => {\n      const state = control();\n      const s = controlParts(appearance(), state);\n      const off = state.disabled;\n      const locked = off || state.readonly;\n      const shownKeys = displayKeys();\n      // 多选：触发按钮前面一排标签，按钮里只留给读屏的文字（同 Select）\n      const tagged = multiple() && shownKeys.length > 0;\n      const shown =\n        shownKeys.length === 0 ? (\n          <span {...css.attrs(selectStyles.placeholder)}>\n            {placeholder ?? lang.selectPlaceholder}\n          </span>\n        ) : tagged ? (\n          <span {...css.attrs(visuallyHiddenStyles.hidden)}>\n            {lang.selectSummary(shownKeys.map(labelOf))}\n          </span>\n        ) : (\n          labelOf(shownKeys[0]!)\n        );\n      return (\n        <>\n          <div\n            {...mergeAttrs<'div'>({ ...s.root, sx: [s.root.sx, selectStyles.root] }, propsRoot, {\n              ref: _toRef(shell),\n              onPointerdown: off ? undefined : focusOnShell(() => trigger),\n              onClick:\n                off || state.readonly\n                  ? undefined\n                  : clickOnShell(\n                      () => trigger,\n                      (event) => (open ? setOpen(false, 'trigger', event) : show(event)),\n                    ),\n            })}\n            data-state={open ? 'open' : 'closed'}\n            data-invalid={state.invalid || undefined}\n            data-disabled={off || undefined}\n          >\n            {controlIcon(s, icon, propsIcon)}\n            {tagged && (\n              <SelectedTags\n                {...mergePartProps<SelectedTagsProps>(\n                  {\n                    tags: shownKeys.map((key) => ({ value: key, label: labelOf(key) })),\n                    maxTagCount,\n                    onRemove: locked ? undefined : remove,\n                    propsTag,\n                  },\n                  propsTags,\n                )}\n              />\n            )}\n            <button\n              {...mergeAttrs<'button'>(\n                {\n                  sx: [\n                    buttonBaseStyles.root,\n                    selectStyles.trigger,\n                    tagged && selectStyles.triggerBehindTags,\n                  ],\n                },\n                rest,\n                {\n                  ref: _toRef(trigger),\n                  id: state.id,\n                  type: 'button',\n                  role: 'combobox',\n                  disabled: off,\n                  'aria-haspopup': 'tree',\n                  'aria-expanded': open,\n                  'aria-controls': treeId,\n                  'aria-invalid': state.invalid || undefined,\n                  'aria-required': state.required || undefined,\n                  'aria-readonly': state.readonly || undefined,\n                  'aria-describedby': state.describedBy,\n                  onClick: (event: MouseEvent) => {\n                    trigger?.focus();\n                    if (locked) return;\n                    if (open) setOpen(false, 'trigger', event);\n                    else show(event);\n                  },\n                  onKeydown: onTriggerKeydown,\n                },\n              )}\n            >\n              <span {...mergeAttrs<'span'>({ sx: selectStyles.value }, propsValue)}>{shown}</span>\n            </button>\n            {clearable && shownKeys.length > 0 && !locked && controlClear(s, propsClear, clear)}\n            <Icon\n              {...mergePartProps<IconProps>(\n                {\n                  ...s.icon,\n                  icon: ChevronDown,\n                  sx: [s.icon.sx, disclosureStyles.icon, open && selectStyles.chevronOpen],\n                },\n                propsChevron,\n              )}\n            />\n            <FormValue name={name} value={values()} disabled={state.disabled} />\n          </div>\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  anchoredPanelSx(appearance().size),\n                  floatingStyles.scrollPanel,\n                  listPopoverStyles.panel,\n                  treeSelectStyles.panel,\n                ],\n              },\n              propsPopover,\n              { ref: _toRef(panel), popover: 'auto', onToggle: onPanelToggle },\n            )}\n          >\n            {searchable && (\n              <div {...css.attrs(listPopoverStyles.header)}>\n                <TextField\n                  {...mergePartProps<TextFieldProps>(\n                    {\n                      icon: Search,\n                      variant: 'soft',\n                      placeholder: lang.selectSearch,\n                      'aria-label': lang.selectSearch,\n                      propsRoot: { sx: selectStyles.search },\n                    },\n                    propsSearch,\n                  )}\n                  type=\"search\"\n                  _value={search}\n                  aria-controls={treeId}\n                  onKeydown={onSearchKeydown}\n                />\n              </div>\n            )}\n            {open &&\n              (multiple() ? (\n                <Tree\n                  {...treeProps(state.labelledBy)}\n                  checkable\n                  _checked={[...values()]}\n                  onUpdate:_checked={(next: string[]) => setChecked(next)}\n                  _expanded={shownExpanded()}\n                  onUpdate:_expanded={(next: string[]) =>\n                    (expanded = remoteResults() ? expanded : next)\n                  }\n                />\n              ) : (\n                <Tree\n                  {...treeProps(state.labelledBy)}\n                  selectionMode=\"single\"\n                  _selected={[...values()]}\n                  onUpdate:_selected={(next: string[]) => {\n                    if (next.length) value = next[0];\n                    setOpen(false, 'select');\n                  }}\n                  _expanded={shownExpanded()}\n                  onUpdate:_expanded={(next: string[]) =>\n                    (expanded = remoteResults() ? expanded : next)\n                  }\n                />\n              ))}\n          </div>\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/Upload.d.ts

@@ -0,0 +1,143 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type IconProps } from '../base/Icon';
+import { type IconButtonProps } from '../base/IconButton';
+import { type ProgressProps } from '../feedback/Progress';
+import { type PartProps } from '../utils/props';
+import { type FileDropProps } from './FileDrop';
+import { type GridProps } from '../layout/Grid';
+/** 列表里的一个文件 */
+export interface UploadFile {
+    /** 组件给的 id，同一个列表里唯一 */
+    readonly id: string;
+    /** 文件名 */
+    readonly name: string;
+    /** 大小（字节）；已有文件不知道时为 undefined */
+    readonly size?: number;
+    /** 选的文件；已有文件没有 */
+    readonly file?: File;
+    /** 已有文件的地址：文件名链到它 */
+    readonly url?: string;
+    /** selected：选了、还没上传；uploading：上传中；done：完成；error：失败或没通过检查 */
+    readonly status: 'selected' | 'uploading' | 'done' | 'error';
+    /** 上传进度 0–1；upload 没报告进度时为 undefined（不确定进度） */
+    readonly progress?: number;
+    /** 错误信息 */
+    readonly error?: string;
+    /** 没通过大小或类型检查：不会上传，也不能重试 */
+    readonly rejected?: boolean;
+    /** upload 的返回值（如文件地址） */
+    readonly response?: unknown;
+}
+/** 上传一个文件：报告进度、响应中止；成功时 resolve（值记在 response 上），失败时 reject */
+export type UploadHandler = (file: File, context: {
+    onProgress: (fraction: number) => void;
+    signal: AbortSignal;
+}) => Promise<unknown>;
+/** 列表的样子 */
+export interface UploadListTypes {
+    /** 一行一个文件：图标、文件名、大小或进度（默认） */
+    text: unknown;
+    /** 图片墙：方形缩略图，点开看大图 */
+    picture: unknown;
+}
+/** 未声明的属性落到外层 div 上 */
+export interface UploadProps extends PartProps<'div'> {
+    /** 文件列表：父级写 _value={list} */
+    _value?: UploadFile[];
+    /** 怎样上传一个文件；不写时用 action，都没有时只选文件、不上传 */
+    upload?: UploadHandler;
+    /** 上传地址：没写 upload 时用应用配置的请求客户端（useHttp）POST 过去，响应体记在 response 上 */
+    action?: string;
+    /** action 上传时文件在表单里的字段名，默认 file */
+    fieldName?: string;
+    /** 接受的文件类型（同原生 accept） */
+    accept?: string;
+    /** 可以选多个；不写时新文件替换旧的 */
+    multiple?: boolean;
+    /** 单个文件的大小上限（字节） */
+    maxSize?: number;
+    /** 最多几个文件，超出的不加进来 */
+    maxFiles?: number;
+    /** 原生表单提交时的字段名：写了才有隐藏的 file input */
+    name?: string;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读：只列出文件，不能再选、不能移除或重试 */
+    readonly?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 选择区域里提示文字下面的说明（大小、类型限制） */
+    description?: FileDropProps['description'];
+    /** 列表的样子：text 一行一个文件（默认），picture 是图片墙 */
+    listType?: keyof UploadListTypes;
+    /** 图片墙里缩略图的边长（px），默认 104 */
+    thumbnailSize?: number;
+    /** 拖动把手（或聚焦后用键盘）调整文件的顺序（图片墙） */
+    sortable?: boolean;
+    /** 焦点在组件里时 Ctrl + V 把剪贴板里的图片、文件加进来 */
+    pasteable?: boolean;
+    /** 选择区域（FileDrop）的部件属性 */
+    propsDrop?: Partial<FileDropProps>;
+    /** 列表的部件属性 */
+    propsList?: Partial<GridProps<'ul'>>;
+    /** 每一项的部件属性，可以按文件计算 */
+    propsItem?: PartProps<'li'> | ((file: UploadFile) => PartProps<'li'>);
+    /** 每一项的文件图标（按状态是文件、对勾或警告）的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 每一项里文件名与下一行（大小、错误或进度）的外层的部件属性 */
+    propsBody?: PartProps<'div'>;
+    /** 每一项里文件名的部件属性 */
+    propsName?: PartProps<'span'>;
+    /** 每一项里文件大小或错误信息的部件属性 */
+    propsMeta?: PartProps<'span'>;
+    /** 每一项上传中的进度条的部件属性；进度与名称（文件名）由组件管理 */
+    propsProgress?: Omit<Partial<ProgressProps>, 'value' | 'aria-label'>;
+    /**
+     * 每一项失败后的重试按钮的部件属性。名称（重新上传 文件名）每项不同，由组件按语言包生成，
+     * 改文案请改语言包的 uploadRetry；点击由组件管理
+     */
+    propsRetry?: Omit<Partial<IconButtonProps>, 'aria-label' | 'onClick'>;
+    /** 每一项的移除按钮的部件属性；名称（语言包的 uploadRemove）、点击与不可用由组件管理 */
+    propsRemove?: Omit<Partial<IconButtonProps>, 'aria-label' | 'onClick' | 'disabled'>;
+}
+/** Upload 的样式：root、list、item、icon、body、name、meta、error、progress */
+export declare const uploadStyles: Readonly<{
+    action: css.CompiledStyles;
+    actions: css.CompiledStyles;
+    addCard: css.CompiledStyles;
+    body: css.CompiledStyles;
+    card: css.CompiledStyles;
+    cardError: css.CompiledStyles;
+    done: css.CompiledStyles;
+    error: css.CompiledStyles;
+    handle: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    item: css.CompiledStyles;
+    meta: css.CompiledStyles;
+    name: css.CompiledStyles;
+    overlay: css.CompiledStyles;
+    placeholder: css.CompiledStyles;
+    progress: css.CompiledStyles;
+    root: css.CompiledStyles;
+    wall: css.CompiledStyles;
+    wallList: css.CompiledStyles;
+}>;
+/** Upload 的动态样式：缩略图的边长 */
+export declare const uploadDynamicStyles: Readonly<{
+    readonly square: (size: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 已有文件（之前上传过、从后端读回来的）：放进 Upload 的 value，状态是 done */
+export declare function existingUploadFile(file: {
+    /** 标识；不写时生成一个 */
+    id?: string;
+    /** 文件名 */
+    name: string;
+    /** 大小（字节） */
+    size?: number;
+    /** 地址：文件名链到它 */
+    url?: string;
+}): UploadFile;
+/** 上传：选文件、列出文件与进度、失败重试、移除 */
+export declare const Upload: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<UploadProps>;