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

package/dist/input/PeoplePickerPanel.js

@@ -0,0 +1,357 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Spinner } from "../base/Spinner.js";
+import { Button } from "../base/Button.js";
+import { IconButton } from "../base/IconButton.js";
+import { Small, Strong } from "../base/Text.js";
+import { Avatar } from "../display/Avatar.js";
+import { ItemList, ItemListItem } from "../display/ItemList.js";
+import { Checkbox } from "./Checkbox.js";
+import { Breadcrumbs } from "../navigation/Breadcrumbs.js";
+import { useRequest } from "../utils/request/use-request.js";
+import { TextField } from "./TextField.js";
+import { peopleKey, toPeopleValue } from "./people.js";
+import { usePersistentState } from "../utils/dom/storage.js";
+import { ToggleGroup, ToggleItem } from "./ToggleGroup.js";
+import { computed, createVNode, isVNode, mergeProps, nextTick, ref, shallowRef, watch } from "vue";
+import { _component, bindable, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { BriefcaseBusiness, Building, ChevronRight, Search, X } from "@lucide/icons";
+//#region src/input/PeoplePickerPanel.tsx
+/**
+* 人员与组织选择面板：左边按组织架构一层层找（面包屑回到上层），或搜索、看岗位与最近选过的，勾选；右边是已选的，可以移除、清空。
+* PeoplePicker 把它放进对话框；也可以直接放在页面、抽屉里。数据见 people.ts（source）。
+*
+*   <PeoplePickerPanel source={source} _value={members} types={['user', 'department']} recentKey="project-members" />
+*
+* - 部门的“下级”进到下一层（不能选部门时点整行也是进去），面包屑点哪一级回到哪一级。
+* - 搜索框有字时列表换成搜索结果（输入停下 300 ms 再搜，只采用最后一次），清空回到原来的页。
+* - types 决定能勾哪几种；max 限制个数，1 时勾一个就换掉原来的。勾过的记进“最近”（recentKey，存在浏览器里，最多 20 个）。
+* - 多选时列表上方有“全选”，只管这一页能勾的。
+*
+* 读屏：左右两个列表各有名称；每行的勾选框以名字为名；“下级”按钮的名称是“下级：某部门”，进去后焦点落到列表上。
+* 部件：Root（div）、Browse（左边）、Selected（右边）。
+*/
+/** 未声明的属性落到外层 div 上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** “最近”最多记几个 */
+var RECENT_LIMIT = 20;
+/** PeoplePickerPanel 的样式：root、grid、browse、selected、header、list、start */
+var peoplePickerPanelStyles = css.create({
+	root: {
+		containerType: "inline-size",
+		minWidth: 0
+	},
+	grid: {
+		display: "grid",
+		gap: "_md",
+		gridTemplateColumns: {
+			default: "minmax(0, 1fr)",
+			"@container (min-width: 36rem)": "minmax(0, 3fr) minmax(0, 2fr)"
+		}
+	},
+	browse: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		minWidth: 0
+	},
+	selected: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		minWidth: 0,
+		padding: "_sm",
+		backgroundColor: "_surfaceMuted",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		borderRadius: "_md"
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "_sm",
+		minHeight: "2em"
+	},
+	list: {
+		overflowY: "auto",
+		outlineStyle: "none",
+		minWidth: 0
+	},
+	start: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm"
+	},
+	status: {
+		display: "flex",
+		justifyContent: "center",
+		paddingBlock: "_lg",
+		color: "_textMuted"
+	}
+});
+/** 随属性变的样式：列表的高度 */
+var peoplePickerPanelDynamicStyles = css.create({ height: (height) => ({ height }) });
+/** 人员与组织选择面板 */
+var PeoplePickerPanel = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const source = readonlyProp(_props, "source");
+	const value = bindable(_props, "_value", () => [], _ctx.emit);
+	const types = readonlyProp(_props, "types", () => ["user"]);
+	const max = readonlyProp(_props, "max");
+	const recentKey = readonlyProp(_props, "recentKey");
+	const listHeight = readonlyProp(_props, "listHeight", "20rem");
+	const propsBrowse = readonlyProp(_props, "propsBrowse");
+	const propsSelected = readonlyProp(_props, "propsSelected");
+	const propsSearch = readonlyProp(_props, "propsSearch");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const key = untrack(() => recentKey.value);
+	let recent = key ? usePersistentState(`vtp.people.recent.${key}`, []) : ref([]);
+	let page = ref("org");
+	let query = ref("");
+	let path = ref([]);
+	let list = shallowRef(null);
+	const searching = () => !!source.value.search && query.value.trim() !== "";
+	const level = useRequest((parent, signal) => source.value.children(parent, signal), {
+		params: () => path.value.at(-1) ?? null,
+		keepPrevious: false
+	});
+	const found = useRequest((text, signal) => source.value.search(text, signal), {
+		params: () => query.value.trim(),
+		debounce: 300,
+		immediate: false,
+		keepPrevious: false,
+		enabled: searching
+	});
+	const positions = useRequest((_, signal) => source.value.positions(signal), { immediate: false });
+	watch(() => page.value, (next) => {
+		if (next === "positions" && positions.data == null && !positions.loading) positions.refresh();
+	});
+	const pages = () => [
+		"org",
+		...source.value.positions ? ["positions"] : [],
+		...key ? ["recent"] : []
+	];
+	const pageLabel = {
+		org: () => lang.peopleOrg,
+		positions: () => lang.peoplePositions,
+		recent: () => lang.peopleRecent
+	};
+	/** 现在列出的：搜索结果，或当前页 */
+	const shown = () => {
+		if (searching()) return {
+			items: found.data ?? [],
+			loading: found.loading
+		};
+		if (page.value === "positions") return {
+			items: positions.data ?? [],
+			loading: positions.loading
+		};
+		if (page.value === "recent") return {
+			items: recent.value,
+			loading: false
+		};
+		return {
+			items: level.data ?? [],
+			loading: level.loading
+		};
+	};
+	const selectedKeys = computed(() => new Set(value.value.map(peopleKey)));
+	const pickable = (entry) => types.value.includes(entry.type);
+	const drillable = (entry) => entry.type === "department" && entry.hasChildren !== false;
+	const full = () => max.value != null && max.value > 1 && value.value.length >= max.value;
+	function remember(entry) {
+		if (!key) return;
+		recent.value = [toPeopleValue(entry), ...recent.value.filter((item) => peopleKey(item) !== peopleKey(entry))].slice(0, RECENT_LIMIT);
+	}
+	function toggle(entry) {
+		const id = peopleKey(entry);
+		if (selectedKeys.value.has(id)) {
+			value.value = value.value.filter((item) => peopleKey(item) !== id);
+			return;
+		}
+		if (max.value === 1) value.value = [toPeopleValue(entry)];
+		else if (full()) return;
+		else value.value = [...value.value, toPeopleValue(entry)];
+		remember(entry);
+	}
+	/** 全选这一页能勾的；都勾上了时全部取消。有上限时加到满为止 */
+	function toggleAll(items) {
+		const candidates = items.filter(pickable);
+		if (candidates.every((entry) => selectedKeys.value.has(peopleKey(entry)))) {
+			const drop = new Set(candidates.map(peopleKey));
+			value.value = value.value.filter((item) => !drop.has(peopleKey(item)));
+			return;
+		}
+		const adding = candidates.filter((entry) => !selectedKeys.value.has(peopleKey(entry)));
+		const room = max.value != null ? Math.max(0, max.value - value.value.length) : adding.length;
+		value.value = [...value.value, ...adding.slice(0, room).map(toPeopleValue)];
+	}
+	/** 进到一个部门：从搜索结果进去时面包屑只有它（不知道它的上级） */
+	function open(department) {
+		path.value = searching() ? [department] : [...path.value, department];
+		query.value = "";
+		page.value = "org";
+		nextTick(() => list.value?.focus());
+	}
+	function onRowClick(entry, event) {
+		if (event.target.closest("button,input,label,a")) return;
+		if (pickable(entry)) toggle(entry);
+		else if (drillable(entry)) open(entry);
+	}
+	/** 行首的圆形标记：人员是头像，部门、岗位是图标 */
+	const badge = (entry) => entry.type === "user" ? createVNode(Avatar, {
+		"name": entry.name,
+		"src": entry.avatar,
+		"size": "sm"
+	}, null) : createVNode(Avatar, {
+		"size": "sm",
+		"fallback": createVNode(Icon, { "icon": entry.type === "department" ? Building : BriefcaseBusiness }, null)
+	}, null);
+	function renderRow(entry) {
+		const id = peopleKey(entry);
+		const checked = selectedKeys.value.has(id);
+		return createVNode(ItemListItem, {
+			"key": id,
+			"start": createVNode("span", css.attrs(peoplePickerPanelStyles.start), [pickable(entry) && createVNode(Checkbox, {
+				"_checked": checked,
+				"onUpdate:_checked": () => toggle(entry),
+				"disabled": !checked && full(),
+				"aria-label": entry.name
+			}, null), badge(entry)]),
+			"title": entry.name,
+			"description": entry.description,
+			"end": drillable(entry) && createVNode(Button, {
+				"variant": "ghost",
+				"size": "sm",
+				"iconEnd": ChevronRight,
+				"aria-label": lang.peopleOpen(entry.name),
+				"onClick": () => open(entry)
+			}, {
+				default: () => [lang.peopleChildren],
+				$stable: true
+			}),
+			"onClick": (event) => onRowClick(entry, event)
+		}, null);
+	}
+	function renderBrowse() {
+		let _slot2, _slot3;
+		const { items, loading } = shown();
+		const candidates = items.filter(pickable);
+		const checkedCount = candidates.filter((entry) => selectedKeys.value.has(peopleKey(entry))).length;
+		const height = peoplePickerPanelDynamicStyles.height(listHeight.value);
+		return createVNode("div", mergeAttrs({ sx: peoplePickerPanelStyles.browse }, propsBrowse.value), [
+			source.value.search && createVNode(TextField, mergeProps(mergePartProps({
+				icon: Search,
+				placeholder: lang.peopleSearch,
+				"aria-label": lang.peopleSearch,
+				clearable: true
+			}, propsSearch.value), {
+				"_value": query.value,
+				"onUpdate:_value": _cache[0] || (_cache[0] = ($event) => query.value = $event)
+			}), null),
+			!searching() && pages().length > 1 && createVNode(ToggleGroup, {
+				"_value": page.value,
+				"onUpdate:_value": _cache[1] || (_cache[1] = (next) => next && (page.value = next)),
+				"required": true,
+				"size": "sm",
+				"aria-label": lang.peoplePages
+			}, _isSlot(_slot2 = pages().map((item) => {
+				let _slot;
+				return createVNode(ToggleItem, {
+					"key": item,
+					"value": item
+				}, _isSlot(_slot = pageLabel[item]()) ? _slot : { default: () => [_slot] });
+			})) ? _slot2 : { default: () => [_slot2] }),
+			!searching() && page.value === "org" && createVNode(Breadcrumbs, {
+				"items": [{
+					key: "",
+					label: lang.peopleRoot
+				}, ...path.value.map((department) => ({
+					key: department.id,
+					label: department.name
+				}))],
+				"onNavigate": _cache[2] || (_cache[2] = (_, index) => path.value = path.value.slice(0, index))
+			}, null),
+			max.value !== 1 && candidates.length > 1 && createVNode(Checkbox, {
+				"_checked": checkedCount === candidates.length,
+				"indeterminate": checkedCount > 0 && checkedCount < candidates.length,
+				"onUpdate:_checked": () => toggleAll(items),
+				"size": "sm"
+			}, {
+				default: () => [lang.peopleSelectAll],
+				$stable: true
+			}),
+			createVNode("div", mergeProps(css.attrs(peoplePickerPanelStyles.list, height), {
+				"ref": _cache[3] || (_cache[3] = (element) => list.value = element),
+				"tabindex": -1
+			}), [loading ? createVNode("div", css.attrs(peoplePickerPanelStyles.status), [createVNode(Spinner, { "label": lang.loading }, null)]) : items.length === 0 ? createVNode(Small, { "sx": peoplePickerPanelStyles.status }, {
+				default: () => [searching() ? lang.peopleNoResult : lang.peopleEmpty],
+				$stable: true
+			}) : createVNode(ItemList, {
+				"hoverable": true,
+				"density": "compact",
+				"aria-label": pageLabel[searching() ? "org" : page.value]()
+			}, _isSlot(_slot3 = items.map(renderRow)) ? _slot3 : { default: () => [_slot3] })])
+		]);
+	}
+	function renderSelected() {
+		return createVNode("div", mergeAttrs({ sx: peoplePickerPanelStyles.selected }, propsSelected.value), [createVNode("div", css.attrs(peoplePickerPanelStyles.header), [createVNode(Strong, { "size": "sm" }, {
+			default: () => [lang.peopleCount(value.value.length, max.value)],
+			$stable: true
+		}), value.value.length > 0 && createVNode(Button, {
+			"variant": "link",
+			"size": "sm",
+			"onClick": _cache[4] || (_cache[4] = () => value.value = [])
+		}, {
+			default: () => [lang.clear],
+			$stable: true
+		})]), createVNode("div", css.attrs(peoplePickerPanelStyles.list, peoplePickerPanelDynamicStyles.height(listHeight.value)), [value.value.length === 0 ? createVNode(Small, { "sx": peoplePickerPanelStyles.status }, {
+			default: () => [lang.peopleNothingSelected],
+			$stable: true
+		}) : createVNode(ItemList, {
+			"density": "compact",
+			"aria-label": lang.peopleSelected
+		}, {
+			default: () => [value.value.map((entry) => createVNode(ItemListItem, {
+				"key": peopleKey(entry),
+				"start": badge(entry),
+				"title": entry.name,
+				"description": entry.description ?? lang.peopleTypes[entry.type],
+				"end": createVNode(IconButton, {
+					"icon": X,
+					"variant": "ghost",
+					"size": "sm",
+					"aria-label": lang.peopleRemove(entry.name),
+					"onClick": () => toggle(entry)
+				}, null)
+			}, null))],
+			$stable: true
+		})])]);
+	}
+	return () => createVNode("div", mergeAttrs({ sx: peoplePickerPanelStyles.root }, rest), [createVNode("div", css.attrs(peoplePickerPanelStyles.grid), [renderBrowse(), renderSelected()])]);
+}, {
+	name: "PeoplePickerPanel",
+	props: [
+		"source",
+		"_value",
+		"onUpdate:_value",
+		"types",
+		"max",
+		"recentKey",
+		"listHeight",
+		"propsBrowse",
+		"propsSelected",
+		"propsSearch"
+	]
+});
+//#endregion
+export { PeoplePickerPanel, peoplePickerPanelDynamicStyles, peoplePickerPanelStyles };
+
+//# sourceMappingURL=PeoplePickerPanel.js.map

package/dist/input/PeoplePickerPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeoplePickerPanel.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_ref","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/input/PeoplePickerPanel.tsx"],"sourcesContent":["/**\n * 人员与组织选择面板：左边按组织架构一层层找（面包屑回到上层），或搜索、看岗位与最近选过的，勾选；右边是已选的，可以移除、清空。\n * PeoplePicker 把它放进对话框；也可以直接放在页面、抽屉里。数据见 people.ts（source）。\n *\n *   <PeoplePickerPanel source={source} _value={members} types={['user', 'department']} recentKey=\"project-members\" />\n *\n * - 部门的“下级”进到下一层（不能选部门时点整行也是进去），面包屑点哪一级回到哪一级。\n * - 搜索框有字时列表换成搜索结果（输入停下 300 ms 再搜，只采用最后一次），清空回到原来的页。\n * - types 决定能勾哪几种；max 限制个数，1 时勾一个就换掉原来的。勾过的记进“最近”（recentKey，存在浏览器里，最多 20 个）。\n * - 多选时列表上方有“全选”，只管这一页能勾的。\n *\n * 读屏：左右两个列表各有名称；每行的勾选框以名字为名；“下级”按钮的名称是“下级：某部门”，进去后焦点落到列表上。\n * 部件：Root（div）、Browse（左边）、Selected（右边）。\n */\nimport { Building, BriefcaseBusiness, ChevronRight, Search, X } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, ref, watch, type Ref, type VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { IconButton } from '../base/IconButton';\nimport { Spinner } from '../base/Spinner';\nimport { Small, Strong } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { Avatar } from '../display/Avatar';\nimport { ItemList, ItemListItem } from '../display/ItemList';\nimport { Breadcrumbs } from '../navigation/Breadcrumbs';\nimport { usePersistentState } from '../utils/dom/storage';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { useRequest } from '../utils/request/use-request';\nimport { Checkbox } from './Checkbox';\nimport {\n  peopleKey,\n  toPeopleValue,\n  type PeopleEntry,\n  type PeopleSource,\n  type PeopleType,\n} from './people';\nimport { TextField, type TextFieldProps } from './TextField';\nimport { ToggleGroup, ToggleItem } from './ToggleGroup';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface PeoplePickerPanelProps extends PartProps<'div'> {\n  /** 数据来源 */\n  source: PeopleSource;\n  /** 选中的：父级写 _value={list} 双向绑定 */\n  _value?: readonly PeopleEntry[];\n  /** 能选哪几种，默认只有人员 */\n  types?: readonly PeopleType[];\n  /** 最多选几个；1 时勾一个就换掉原来的 */\n  max?: number;\n  /** 记“最近选过的”用的键（存在浏览器里）；不写时没有“最近”页 */\n  recentKey?: string;\n  /** 两边列表的高度（CSS 长度），默认 '20rem' */\n  listHeight?: string;\n  /** 左边的部件属性 */\n  propsBrowse?: PartProps<'div'>;\n  /** 右边的部件属性 */\n  propsSelected?: PartProps<'div'>;\n  /** 搜索框的部件属性 */\n  propsSearch?: Partial<TextFieldProps>;\n}\n\ntype Page = 'org' | 'positions' | 'recent';\n\n/** “最近”最多记几个 */\nconst RECENT_LIMIT = 20;\n\n/** PeoplePickerPanel 的样式：root、grid、browse、selected、header、list、start */\nexport const peoplePickerPanelStyles = css.create({\n  // 按自己的宽度决定左右排还是上下排\n  root: { containerType: 'inline-size', minWidth: 0 },\n  grid: {\n    display: 'grid',\n    gap: '_md',\n    gridTemplateColumns: {\n      default: 'minmax(0, 1fr)',\n      '@container (min-width: 36rem)': 'minmax(0, 3fr) minmax(0, 2fr)',\n    },\n  },\n  browse: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  selected: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    minWidth: 0,\n    padding: '_sm',\n    backgroundColor: '_surfaceMuted',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_sm',\n    minHeight: '2em',\n  },\n  list: { overflowY: 'auto', outlineStyle: 'none', minWidth: 0 },\n  start: { display: 'flex', alignItems: 'center', gap: '_sm' },\n  status: { display: 'flex', justifyContent: 'center', paddingBlock: '_lg', color: '_textMuted' },\n});\n\n/** 随属性变的样式：列表的高度 */\nexport const peoplePickerPanelDynamicStyles = css.create({\n  height: (height: string) => ({ height }),\n});\n\n/** 人员与组织选择面板 */\nexport const PeoplePickerPanel = _component(\n  ({\n    source,\n    _value: value = _bindable<readonly PeopleEntry[]>([]),\n    types = ['user'],\n    max,\n    recentKey,\n    listHeight = '20rem',\n    propsBrowse,\n    propsSelected,\n    propsSearch,\n    ...rest\n  }: PeoplePickerPanelProps) => {\n    const lang = useLang();\n    // 存的键只在创建时取：换键要换一个面板\n    const key = _untrack(recentKey);\n    let recent = _fromRef(\n      key\n        ? usePersistentState<PeopleEntry[]>(`vtp.people.recent.${key}`, [])\n        : (ref<PeopleEntry[]>([]) as Ref<PeopleEntry[]>),\n    );\n    let page = _state<Page>('org');\n    let query = _state('');\n    let path = _state<PeopleEntry[]>([]);\n    let list = _state.raw<HTMLElement | null>(null);\n\n    const searching = () => !!source.search && query.trim() !== '';\n    const level = useRequest(\n      (parent: PeopleEntry | null, signal) => source.children(parent, signal),\n      { params: () => path.at(-1) ?? null, keepPrevious: false },\n    );\n    const found = useRequest((text: string, signal) => source.search!(text, signal), {\n      params: () => query.trim(),\n      debounce: 300,\n      immediate: false,\n      keepPrevious: false,\n      enabled: searching,\n    });\n    const positions = useRequest((_: undefined, signal) => source.positions!(signal), {\n      immediate: false,\n    });\n    watch(\n      () => page,\n      (next) => {\n        if (next === 'positions' && positions.data == null && !positions.loading) {\n          void positions.refresh();\n        }\n      },\n    );\n\n    const pages = (): Page[] => [\n      'org',\n      ...(source.positions ? (['positions'] as const) : []),\n      ...(key ? (['recent'] as const) : []),\n    ];\n    const pageLabel: Record<Page, () => string> = {\n      org: () => lang.peopleOrg,\n      positions: () => lang.peoplePositions,\n      recent: () => lang.peopleRecent,\n    };\n\n    /** 现在列出的：搜索结果，或当前页 */\n    const shown = (): { items: readonly PeopleEntry[]; loading: boolean } => {\n      if (searching()) return { items: found.data ?? [], loading: found.loading };\n      if (page === 'positions') return { items: positions.data ?? [], loading: positions.loading };\n      if (page === 'recent') return { items: recent, loading: false };\n      return { items: level.data ?? [], loading: level.loading };\n    };\n\n    const selectedKeys = _derived(new Set(value.map(peopleKey)));\n    const pickable = (entry: PeopleEntry) => types.includes(entry.type);\n    const drillable = (entry: PeopleEntry) =>\n      entry.type === 'department' && entry.hasChildren !== false;\n    const full = () => max != null && max > 1 && value.length >= max;\n\n    function remember(entry: PeopleEntry) {\n      if (!key) return;\n      recent = [\n        toPeopleValue(entry),\n        ...recent.filter((item) => peopleKey(item) !== peopleKey(entry)),\n      ].slice(0, RECENT_LIMIT);\n    }\n\n    function toggle(entry: PeopleEntry) {\n      const id = peopleKey(entry);\n      if (selectedKeys.has(id)) {\n        value = value.filter((item) => peopleKey(item) !== id);\n        return;\n      }\n      if (max === 1) value = [toPeopleValue(entry)];\n      else if (full()) return;\n      else value = [...value, toPeopleValue(entry)];\n      remember(entry);\n    }\n\n    /** 全选这一页能勾的；都勾上了时全部取消。有上限时加到满为止 */\n    function toggleAll(items: readonly PeopleEntry[]) {\n      const candidates = items.filter(pickable);\n      if (candidates.every((entry) => selectedKeys.has(peopleKey(entry)))) {\n        const drop = new Set(candidates.map(peopleKey));\n        value = value.filter((item) => !drop.has(peopleKey(item)));\n        return;\n      }\n      const adding = candidates.filter((entry) => !selectedKeys.has(peopleKey(entry)));\n      const room = max != null ? Math.max(0, max - value.length) : adding.length;\n      value = [...value, ...adding.slice(0, room).map(toPeopleValue)];\n    }\n\n    /** 进到一个部门：从搜索结果进去时面包屑只有它（不知道它的上级） */\n    function open(department: PeopleEntry) {\n      path = searching() ? [department] : [...path, department];\n      query = '';\n      page = 'org';\n      void nextTick(() => list?.focus());\n    }\n\n    function onRowClick(entry: PeopleEntry, event: MouseEvent) {\n      // 勾选框、按钮自己处理\n      if ((event.target as Element).closest('button,input,label,a')) return;\n      if (pickable(entry)) toggle(entry);\n      else if (drillable(entry)) open(entry);\n    }\n\n    /** 行首的圆形标记：人员是头像，部门、岗位是图标 */\n    const badge = (entry: PeopleEntry): VNodeChild =>\n      entry.type === 'user' ? (\n        <Avatar name={entry.name} src={entry.avatar} size=\"sm\" />\n      ) : (\n        <Avatar\n          size=\"sm\"\n          fallback={<Icon icon={entry.type === 'department' ? Building : BriefcaseBusiness} />}\n        />\n      );\n\n    function renderRow(entry: PeopleEntry): VNodeChild {\n      const id = peopleKey(entry);\n      const checked = selectedKeys.has(id);\n      return (\n        <ItemListItem\n          key={id}\n          start={\n            <span {...css.attrs(peoplePickerPanelStyles.start)}>\n              {pickable(entry) && (\n                <Checkbox\n                  _checked={checked}\n                  onUpdate:_checked={() => toggle(entry)}\n                  disabled={!checked && full()}\n                  aria-label={entry.name}\n                />\n              )}\n              {badge(entry)}\n            </span>\n          }\n          title={entry.name}\n          description={entry.description}\n          end={\n            drillable(entry) && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                iconEnd={ChevronRight}\n                aria-label={lang.peopleOpen(entry.name)}\n                onClick={() => open(entry)}\n              >\n                {lang.peopleChildren}\n              </Button>\n            )\n          }\n          onClick={(event: MouseEvent) => onRowClick(entry, event)}\n        />\n      );\n    }\n\n    function renderBrowse(): VNodeChild {\n      const { items, loading } = shown();\n      const candidates = items.filter(pickable);\n      const checkedCount = candidates.filter((entry) => selectedKeys.has(peopleKey(entry))).length;\n      const height = peoplePickerPanelDynamicStyles.height(listHeight);\n      return (\n        <div {...mergeAttrs<'div'>({ sx: peoplePickerPanelStyles.browse }, propsBrowse)}>\n          {source.search && (\n            <TextField\n              {...mergePartProps<TextFieldProps>(\n                {\n                  icon: Search,\n                  placeholder: lang.peopleSearch,\n                  'aria-label': lang.peopleSearch,\n                  clearable: true,\n                },\n                propsSearch,\n              )}\n              _value={query}\n            />\n          )}\n          {!searching() && pages().length > 1 && (\n            <ToggleGroup\n              _value={page}\n              onUpdate:_value={(next) => next && (page = next as Page)}\n              required\n              size=\"sm\"\n              aria-label={lang.peoplePages}\n            >\n              {pages().map((item) => (\n                <ToggleItem key={item} value={item}>\n                  {pageLabel[item]()}\n                </ToggleItem>\n              ))}\n            </ToggleGroup>\n          )}\n          {!searching() && page === 'org' && (\n            <Breadcrumbs\n              items={[\n                { key: '', label: lang.peopleRoot },\n                ...path.map((department) => ({ key: department.id, label: department.name })),\n              ]}\n              onNavigate={(_, index) => (path = path.slice(0, index))}\n            />\n          )}\n          {max !== 1 && candidates.length > 1 && (\n            <Checkbox\n              _checked={checkedCount === candidates.length}\n              indeterminate={checkedCount > 0 && checkedCount < candidates.length}\n              onUpdate:_checked={() => toggleAll(items)}\n              size=\"sm\"\n            >\n              {lang.peopleSelectAll}\n            </Checkbox>\n          )}\n          <div\n            {...css.attrs(peoplePickerPanelStyles.list, height)}\n            ref={(element: unknown) => (list = element as HTMLElement | null)}\n            tabindex={-1}\n          >\n            {loading ? (\n              <div {...css.attrs(peoplePickerPanelStyles.status)}>\n                <Spinner label={lang.loading} />\n              </div>\n            ) : items.length === 0 ? (\n              <Small sx={peoplePickerPanelStyles.status}>\n                {searching() ? lang.peopleNoResult : lang.peopleEmpty}\n              </Small>\n            ) : (\n              <ItemList\n                hoverable\n                density=\"compact\"\n                aria-label={pageLabel[searching() ? 'org' : page]()}\n              >\n                {items.map(renderRow)}\n              </ItemList>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    function renderSelected(): VNodeChild {\n      return (\n        <div {...mergeAttrs<'div'>({ sx: peoplePickerPanelStyles.selected }, propsSelected)}>\n          <div {...css.attrs(peoplePickerPanelStyles.header)}>\n            <Strong size=\"sm\">{lang.peopleCount(value.length, max)}</Strong>\n            {value.length > 0 && (\n              <Button variant=\"link\" size=\"sm\" onClick={() => (value = [])}>\n                {lang.clear}\n              </Button>\n            )}\n          </div>\n          <div\n            {...css.attrs(\n              peoplePickerPanelStyles.list,\n              peoplePickerPanelDynamicStyles.height(listHeight),\n            )}\n          >\n            {value.length === 0 ? (\n              <Small sx={peoplePickerPanelStyles.status}>{lang.peopleNothingSelected}</Small>\n            ) : (\n              <ItemList density=\"compact\" aria-label={lang.peopleSelected}>\n                {value.map((entry) => (\n                  <ItemListItem\n                    key={peopleKey(entry)}\n                    start={badge(entry)}\n                    title={entry.name}\n                    description={entry.description ?? lang.peopleTypes[entry.type]}\n                    end={\n                      <IconButton\n                        icon={X}\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        aria-label={lang.peopleRemove(entry.name)}\n                        onClick={() => toggle(entry)}\n                      />\n                    }\n                  />\n                ))}\n              </ItemList>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: peoplePickerPanelStyles.root }, rest)}>\n        <div {...css.attrs(peoplePickerPanelStyles.grid)}>\n          {renderBrowse()}\n          {renderSelected()}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/input/Radio.d.ts

@@ -0,0 +1,90 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ListboxOption, type OptionMapping } from './list-state';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+import type { TextSize } from '../utils/style/typography';
+import { type ChoiceOrientations } from './choice-styles';
+/** RadioGroup 交给组内 Radio 的状态 */
+export interface RadioGroupState {
+    /** 选中的值 */
+    readonly value: string | null;
+    /** 原生单选框的 name：同组共用，方向键在组内移动 */
+    readonly name: string;
+    /** 整组不可用 */
+    readonly disabled: boolean;
+    /** 整组只读 */
+    readonly readonly: boolean;
+    /** 必填 */
+    readonly required: boolean;
+    /** 整组校验未通过 */
+    readonly invalid: boolean;
+    /** 字号档位；不写时继承 */
+    readonly size: TextSize | undefined;
+    /** 选中时的色调 */
+    readonly tone: StatusTone;
+    /** 选中一个值 */
+    select(value: string): void;
+}
+/** RadioGroup 的上下文：自定义的单选项可以 inject 它接入组 */
+export declare const RadioGroupContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<RadioGroupState>;
+/** 未声明的属性落到 div（role="radiogroup"）上 */
+export interface RadioGroupBaseProps<T> extends PartProps<'div', 'role'> {
+    /** 选中项的值：父级写 _value={x}；没有选中时是 null */
+    _value?: string | null;
+    /** 表单提交时的 name；不写时自动生成（同组的 radio 要共用一个 name 才互斥） */
+    name?: string;
+    /** 整组不可用 */
+    disabled?: boolean;
+    /** 整组只读：能聚焦、读屏念“只读”，选中项不能改（查看详情、审批时）；外观照常 */
+    readonly?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 字号档位；不写时继承上下文字号 */
+    size?: TextSize;
+    /** 选中时的色调（与 Button、Badge 等同一套），默认 accent；可以用 defaults.Choice 统一改 */
+    tone?: StatusTone;
+    /** 排列方向，默认 vertical */
+    orientation?: keyof ChoiceOrientations;
+    /** 各项：ListboxOption（值、文字、说明、不可用）、字符串，或任意数据加 toOption；写了 children 时不用 */
+    items?: readonly T[];
+    /** Radio；不写时按 items 生成 */
+    children?: VNodeChild;
+}
+/** RadioGroup 的属性：items 是 ListboxOption、字符串时不用 toOption */
+export type RadioGroupProps<T = ListboxOption> = RadioGroupBaseProps<T> & OptionMapping<T>;
+/** 单选组：value 是选中项的值 */
+export declare const RadioGroup: <T = ListboxOption>(props: RadioGroupProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;
+/** 选中、名称与可用性由组管理 */
+export type RadioManaged = 'type' | 'name' | 'checked' | 'required' | 'size' | 'value';
+/** 未声明的属性落到 input 上；外层 label 用 propsRoot */
+export interface RadioProps extends PartProps<'input', RadioManaged> {
+    /** 这一项的值 */
+    value: string;
+    /** 这一项不可用 */
+    disabled?: boolean;
+    /** 外层 label 的部件属性 */
+    propsRoot?: PartProps<'label'>;
+    /** 叠放层的部件属性 */
+    propsControl?: PartProps<'span'>;
+    /** 圆点的部件属性 */
+    propsIndicator?: PartProps<'span'>;
+    /** 文字的部件属性 */
+    propsLabel?: PartProps<'span'>;
+    /** 文字下方的说明（aria-describedby） */
+    description?: VNodeChild;
+    /** 说明的部件属性 */
+    propsDescription?: PartProps<'span'>;
+    /** 文字 */
+    children?: VNodeChild;
+}
+/** RadioGroup、Radio 的样式：circle、dot、dotChecked */
+export declare const radioStyles: Readonly<{
+    circle: css.CompiledStyles;
+    dot: css.CompiledStyles;
+    dotChecked: css.CompiledStyles;
+}>;
+/** 单选项：放在 RadioGroup 里 */
+export declare const Radio: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<RadioProps>;