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

package/dist/input/Listbox.js

@@ -0,0 +1,408 @@
+import { useLang } from "../config/context.js";
+import { defaultLabelledBy, elementProps, mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { Icon } from "../base/Icon.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { Text as Text$1 } from "../base/Text.js";
+import { selectedValues } from "../utils/data/selection.js";
+import "../utils/style/shimmer.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { Progress } from "../feedback/Progress.js";
+import { Empty } from "../feedback/Empty.js";
+import { useFieldControl } from "../form/Field.js";
+import { handleListKeydown, toListboxOption, useListState } from "./list-state.js";
+import { itemStyles } from "../utils/style/item-styles.js";
+import { defaultRangeExtractor } from "../utils/virtual/virtualizer.js";
+import { useVirtualizer } from "../utils/virtual/use-virtualizer.js";
+import { Fragment, computed, createVNode, isVNode, mergeProps, shallowRef, useId, watch, withMemo } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Check } from "@lucide/icons";
+//#region src/input/Listbox.tsx
+/**
+* 列表框（role="listbox"）：在一列选项里单选或多选。数据驱动，始终虚拟滚动（上万个选项也只渲染看得见的几十个）：
+*
+*   <Listbox items={cities} _value={city} aria-label="城市" />
+*   <Listbox items={tags} selectionMode="multiple" _value={picked}>{(tag) => <Badge>{tag.label}</Badge>}</Listbox>
+*   <Listbox items={users} toOption={(user) => ({ value: user.id, label: user.name })} _value={id} aria-label="成员" />
+*
+* 选项是 { value, label, disabled?, description?, icon?, group? }（ListboxOption）；别的形状的数据用 toOption 转换，
+* 自定义内容的渲染函数拿到的仍是原始数据。
+* 焦点在列表上，高亮项经 aria-activedescendant 告诉读屏：↑↓、Home / End、Page Up / Down 移动，
+* Enter / 空格选中，按字母跳到以它开头的项。状态与键盘见 list-state.ts；Select、Combobox 用同一个 ListboxView 渲染。
+*
+* 虚拟滚动（useVirtualizer）：高亮项总在渲染范围里（aria-activedescendant 才指得到），键盘移动时滚进可见范围；
+* 选项带 aria-setsize / aria-posinset，读屏知道总数与位置。分组标题只是视觉上的一行（各行独立定位，没法用
+* role="group" 包住组里的选项），组名经 aria-describedby 交给组里的每个选项。
+* loading：没有选项时显示骨架行；已有选项（刷新中）时顶部显示一条进度条；列表带 aria-busy。
+*
+* 部件：Root（div，role="listbox"）、GroupLabel、Option（div，role="option"）、Check（已选标记）、Skeleton（加载中的占位行）。
+*/
+/** 选项的渲染状态：渲染函数据此画高亮、已选的样子 */
+/** 选项的部件属性：可以按选项（items 里的原始数据）计算 */
+/** ListboxView 的属性：Listbox、Select、Combobox 共用的渲染层 */
+/** 渲染用的一行：分组标题或选项 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** 加载中显示几行骨架 */
+var SKELETON_ROWS = 4;
+/** Listbox 的样式：root、scroll、sizer、row、groupLabel、content 等 */
+var listboxStyles = css.create({
+	root: {
+		position: "relative",
+		padding: "_xs",
+		lineHeight: "_normal",
+		outlineStyle: "none"
+	},
+	scroll: {
+		maxHeight: "20em",
+		overflowY: "auto",
+		overscrollBehavior: "contain"
+	},
+	sizer: {
+		position: "relative",
+		width: "_full"
+	},
+	row: {
+		position: "absolute",
+		top: 0,
+		insetInline: 0
+	},
+	groupLabel: {
+		display: "block",
+		paddingTop: "_sm",
+		paddingBottom: "_xs",
+		paddingInline: "_sm",
+		fontWeight: "_semibold"
+	},
+	content: {
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+		minWidth: 0
+	},
+	description: { color: "_textMuted" },
+	check: { flexShrink: 0 },
+	hidden: { visibility: "hidden" },
+	progress: {
+		position: "absolute",
+		top: 0,
+		insetInline: 0,
+		zIndex: 1
+	},
+	skeleton: {
+		display: "block",
+		height: "1em",
+		marginBlock: "0.625em",
+		marginInline: "_sm"
+	}
+});
+/** Listbox 的样式：y、height、width */
+var listboxPositionStyles = css.create({
+	y: (px) => ({ transform: `translateY(${px}px)` }),
+	height: (px) => ({ height: px }),
+	width: (percent) => ({ width: percent })
+});
+/** 列表的渲染层：虚拟滚动的选项、分组标题、已选标记、空状态与加载中；不管焦点，指针悬停高亮、点击选中 */
+var ListboxView = /*#__PURE__*/ _component((_props, _ctx) => {
+	const list = readonlyProp(_props, "list");
+	const id = readonlyProp(_props, "id");
+	const multiple = readonlyProp(_props, "multiple", false);
+	const scroller = readonlyProp(_props, "scroller");
+	const loading = readonlyProp(_props, "loading", false);
+	const estimateSize = readonlyProp(_props, "estimateSize", 36);
+	const renderOption = readonlyProp(_props, "renderOption");
+	const empty = readonlyProp(_props, "empty");
+	const onPick = readonlyProp(_props, "onPick");
+	const propsOption = readonlyProp(_props, "propsOption");
+	const propsGroupLabel = readonlyProp(_props, "propsGroupLabel");
+	const propsCheck = readonlyProp(_props, "propsCheck");
+	const propsEmpty = readonlyProp(_props, "propsEmpty");
+	const propsSkeleton = readonlyProp(_props, "propsSkeleton");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const indicator = useDelayedLoading(() => loading.value);
+	let root = shallowRef(null);
+	let sizer = shallowRef(null);
+	/** 选项按分组排好后展开成行：每组前插一行标题 */
+	const rows = computed(() => {
+		const result = [];
+		let group;
+		let headerId;
+		list.value.options.forEach((option, index) => {
+			if (option.group != null && option.group !== group) {
+				headerId = `${id.value}-group-${result.length}`;
+				result.push({
+					kind: "group",
+					key: `group:${option.group}`,
+					label: option.group,
+					id: headerId
+				});
+			}
+			group = option.group;
+			result.push({
+				kind: "option",
+				key: option.value,
+				option,
+				index,
+				groupId: option.group != null ? headerId : void 0
+			});
+		});
+		return result;
+	});
+	/** 值 → 行号：高亮项的行号一次查到，不在每次渲染时扫一遍 */
+	const rowOf = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		rows.value.forEach((row, index) => {
+			if (row.kind === "option") map.set(row.option.value, index);
+		});
+		return map;
+	});
+	const activeRow = () => list.value.active === void 0 ? -1 : rowOf.value.get(list.value.active) ?? -1;
+	const virtual = useVirtualizer(() => {
+		const current = rows.value;
+		const active = activeRow();
+		const size = estimateSize.value;
+		return {
+			count: current.length,
+			scrollElement: scroller.value === void 0 ? root.value : scroller.value,
+			list: sizer.value,
+			estimateSize: (index) => current[index]?.kind === "group" ? 30 : size,
+			getItemKey: (index) => current[index].key,
+			overscan: 6,
+			rangeExtractor: (range) => {
+				const indices = defaultRangeExtractor(range);
+				if (active >= 0 && !indices.includes(active)) {
+					indices.push(active);
+					indices.sort((a, b) => a - b);
+				}
+				return indices;
+			}
+		};
+	});
+	watch(() => list.value.active, () => {
+		const index = activeRow();
+		if (index < 0) return;
+		virtual.scrollToIndex(index === 1 && rows.value[0]?.kind === "group" ? 0 : index, { align: "auto" });
+	}, { flush: "post" });
+	/**
+	* 选项行按“会影响它的值”缓存（Vue 的 withMemo，同模板的 v-memo）：方向键移动高亮时只重建前后两行，
+	* 不再重建全部可见行与其中的图标。自定义了 renderOption 或按项计算的 propsOption 时不缓存：
+	* 使用方的函数可能读别的状态，缓存了会显示旧内容
+	*/
+	const memoCache = [];
+	function optionRow(row) {
+		if (renderOption.value || typeof propsOption.value === "function") return renderOptionRow(row);
+		const { option } = row;
+		return withMemo([
+			option,
+			row.index,
+			row.groupId,
+			list.value.isSelected(option.value),
+			list.value.active === option.value,
+			list.value.options.length,
+			propsOption.value,
+			propsCheck.value
+		], () => renderOptionRow(row), memoCache, row.index);
+	}
+	function renderOptionRow(row) {
+		const { option, index } = row;
+		const state = {
+			selected: list.value.isSelected(option.value),
+			active: list.value.active === option.value
+		};
+		const own = typeof propsOption.value === "function" ? propsOption.value(option.item, state) : propsOption.value;
+		return createVNode("div", mergeProps(mergeAttrs({ sx: [
+			itemStyles.row,
+			state.active && itemStyles.highlighted,
+			state.selected && itemStyles.selected,
+			option.disabled && itemStyles.disabled
+		] }, own, {
+			id: `${id.value}-${index}`,
+			role: "option",
+			"aria-selected": state.selected,
+			"aria-disabled": option.disabled || void 0,
+			"aria-setsize": list.value.options.length,
+			"aria-posinset": index + 1,
+			"aria-describedby": row.groupId,
+			onPointerdown: (event) => event.preventDefault(),
+			onPointermove: () => {
+				if (!option.disabled && list.value.active !== option.value) list.value.setActive(option.value);
+			},
+			onClick: () => {
+				if (option.disabled) return;
+				list.value.select(option.value);
+				onPick.value?.(option.value);
+			}
+		}), {
+			"data-state": state.selected ? "checked" : "unchecked",
+			"data-active": state.active || void 0,
+			"data-disabled": option.disabled || void 0
+		}), [renderOption.value ? renderOption.value(option.item, state) : createVNode(Fragment, null, [option.icon && createVNode(Icon, { "icon": option.icon }, null), createVNode("span", css.attrs(listboxStyles.content), [createVNode("span", css.attrs(itemStyles.label), [option.label]), option.description && createVNode(Text$1, {
+			"size": "sm",
+			"sx": listboxStyles.description
+		}, { default: () => [option.description] })])]), createVNode(Icon, mergePartProps({
+			icon: Check,
+			sx: [listboxStyles.check, !state.selected && listboxStyles.hidden]
+		}, propsCheck.value), null)]);
+	}
+	function renderBody() {
+		if (rows.value.length === 0) {
+			if (loading.value) {
+				if (!indicator.value) return null;
+				return Array.from({ length: SKELETON_ROWS }, (_, index) => createVNode(Skeleton, mergeProps({ "key": index }, mergePartProps({
+					sx: [listboxStyles.skeleton, listboxPositionStyles.width(`${85 - index * 15}%`)],
+					delay: index * 120
+				}, propsSkeleton.value)), null));
+			}
+			return empty.value ?? createVNode(Empty, mergePartProps({
+				size: "sm",
+				icon: false,
+				description: lang.selectEmpty
+			}, propsEmpty.value), null);
+		}
+		return createVNode("div", mergeProps({
+			"ref": sizer,
+			"role": "presentation"
+		}, css.attrs(listboxStyles.sizer, listboxPositionStyles.height(virtual.total))), [virtual.items.map((item) => {
+			const row = rows.value[item.index];
+			return createVNode("div", mergeProps({
+				"key": item.key,
+				"ref": virtual.measure,
+				"data-index": item.index,
+				"role": "presentation"
+			}, css.attrs(listboxStyles.row, listboxPositionStyles.y(item.start))), [row.kind === "group" ? createVNode(Text$1, mergePartProps({
+				tone: "muted",
+				size: "sm",
+				sx: listboxStyles.groupLabel
+			}, propsGroupLabel.value, {
+				id: row.id,
+				"aria-hidden": true
+			}), { default: () => [row.label] }) : optionRow(row)]);
+		})]);
+	}
+	return () => {
+		const own = scroller.value === void 0;
+		const props = mergeProps$1({ sx: [
+			listboxStyles.root,
+			own && listboxStyles.scroll,
+			focusRingStyles.visible
+		] }, rest, {
+			ref: root,
+			id: id.value,
+			role: "listbox",
+			"aria-multiselectable": multiple.value || void 0,
+			"aria-busy": loading.value || void 0
+		});
+		const body = [indicator.value && rows.value.length > 0 && createVNode("div", mergeProps({ "aria-hidden": "true" }, css.attrs(listboxStyles.progress)), [createVNode(Progress, {
+			"size": "xs",
+			"aria-label": lang.loading
+		}, null)]), renderBody()];
+		if (!own) return createVNode("div", elementProps(props), [body]);
+		return createVNode(ScrollArea, {
+			"focusable": false,
+			"propsViewport": props
+		}, _isSlot(body) ? body : { default: () => [body] });
+	};
+}, {
+	props: [
+		"list",
+		"id",
+		"multiple",
+		"scroller",
+		"loading",
+		"estimateSize",
+		"renderOption",
+		"empty",
+		"onPick",
+		"propsOption",
+		"propsGroupLabel",
+		"propsCheck",
+		"propsEmpty",
+		"propsSkeleton"
+	],
+	name: "ListboxView"
+});
+/** 高亮项的 id（给 aria-activedescendant）；没有高亮时 undefined */
+function activeOptionId(list, id) {
+	const index = list.active === void 0 ? -1 : list.indexOf(list.active);
+	return index < 0 ? void 0 : `${id}-${index}`;
+}
+/** 列表框共有的属性；未声明的属性落到 role="listbox" 的 div 上 */
+/** 单选或多选；items 不是 ListboxOption 或字符串时要给 toOption */
+/** 列表框：焦点在列表上，方向键移动高亮、Enter / 空格选中 */
+var Listbox = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const items = readonlyProp(_props2, "items");
+	const toOption = readonlyProp(_props2, "toOption");
+	const selectionMode = readonlyProp(_props2, "selectionMode", "single");
+	const value = bindable(_props2, "_value", () => null, _ctx2.emit);
+	const required = readonlyProp(_props2, "required");
+	const disabled = readonlyProp(_props2, "disabled");
+	const id = readonlyProp(_props2, "id");
+	const children = childrenProp(_props2);
+	const onPick = readonlyProp(_props2, "onPick");
+	const rest = restProps(_props2, _ctx2, false);
+	const generatedId = useId();
+	const control = useFieldControl(() => ({
+		id: id.value,
+		disabled: disabled.value,
+		required: required.value
+	}));
+	const list = useListState({
+		items: () => items.value,
+		toOption: (item) => toListboxOption(item, toOption.value),
+		selected: () => selectedValues(value.value),
+		mode: () => selectionMode.value,
+		required: () => control().required,
+		onChange: (next) => value.value = selectionMode.value === "multiple" ? [...next] : next[0] ?? null
+	});
+	function onKeydown(event) {
+		if (control().disabled) return;
+		if (handleListKeydown(list, event, {
+			space: true,
+			typeahead: true
+		}, onPick.value)) event.preventDefault();
+	}
+	return () => {
+		const state = control();
+		const prefix = state.id ?? generatedId;
+		return createVNode(ListboxView, mergePartProps({
+			list,
+			id: prefix,
+			multiple: selectionMode.value === "multiple",
+			renderOption: children.value,
+			onPick: onPick.value
+		}, rest, {
+			id: prefix,
+			tabindex: state.disabled ? -1 : 0,
+			"aria-labelledby": defaultLabelledBy(rest, state.labelledBy),
+			"aria-describedby": state.describedBy,
+			"aria-disabled": state.disabled || void 0,
+			"aria-required": state.required || void 0,
+			"aria-activedescendant": activeOptionId(list, prefix),
+			onFocus: () => {
+				if (list.active === void 0) list.activateDefault();
+			},
+			onKeydown
+		}), null);
+	};
+}, {
+	name: "Listbox",
+	props: [
+		"items",
+		"toOption",
+		"selectionMode",
+		"_value",
+		"onUpdate:_value",
+		"required",
+		"disabled",
+		"id",
+		"onPick"
+	]
+});
+//#endregion
+export { Listbox, ListboxView, activeOptionId, listboxPositionStyles, listboxStyles };
+
+//# sourceMappingURL=Listbox.js.map

package/dist/input/Listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps","_Fragment","Text","mergeProps","_vtp_bindable","_vtp_childrenProp"],"sources":["../../src/input/Listbox.tsx"],"sourcesContent":["/**\n * 列表框（role=\"listbox\"）：在一列选项里单选或多选。数据驱动，始终虚拟滚动（上万个选项也只渲染看得见的几十个）：\n *\n *   <Listbox items={cities} _value={city} aria-label=\"城市\" />\n *   <Listbox items={tags} selectionMode=\"multiple\" _value={picked}>{(tag) => <Badge>{tag.label}</Badge>}</Listbox>\n *   <Listbox items={users} toOption={(user) => ({ value: user.id, label: user.name })} _value={id} aria-label=\"成员\" />\n *\n * 选项是 { value, label, disabled?, description?, icon?, group? }（ListboxOption）；别的形状的数据用 toOption 转换，\n * 自定义内容的渲染函数拿到的仍是原始数据。\n * 焦点在列表上，高亮项经 aria-activedescendant 告诉读屏：↑↓、Home / End、Page Up / Down 移动，\n * Enter / 空格选中，按字母跳到以它开头的项。状态与键盘见 list-state.ts；Select、Combobox 用同一个 ListboxView 渲染。\n *\n * 虚拟滚动（useVirtualizer）：高亮项总在渲染范围里（aria-activedescendant 才指得到），键盘移动时滚进可见范围；\n * 选项带 aria-setsize / aria-posinset，读屏知道总数与位置。分组标题只是视觉上的一行（各行独立定位，没法用\n * role=\"group\" 包住组里的选项），组名经 aria-describedby 交给组里的每个选项。\n * loading：没有选项时显示骨架行；已有选项（刷新中）时顶部显示一条进度条；列表带 aria-busy。\n *\n * 部件：Root（div，role=\"listbox\"）、GroupLabel、Option（div，role=\"option\"）、Check（已选标记）、Skeleton（加载中的占位行）。\n */\nimport { Check } 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, withMemo, type VNode, type VNodeChild } from 'vue';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { Text, type TextProps } from '../base/Text';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { useLang } from '../config/context';\nimport { Empty, type EmptyProps } from '../feedback/Empty';\nimport { Progress } from '../feedback/Progress';\nimport { Skeleton, type SkeletonProps, type SkeletonShapeProps } from '../feedback/Skeleton';\nimport { SHIMMER_STAGGER } from '../utils/style/shimmer';\nimport { itemStyles } from '../utils/style/item-styles';\nimport {\n  defaultLabelledBy,\n  elementProps,\n  mergeAttrs,\n  mergePartProps,\n  mergeProps,\n  type PartProps,\n} from '../utils/props';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { selectedValues, type SelectionProps } from '../utils/data/selection';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { useVirtualizer } from '../utils/virtual/use-virtualizer';\nimport { defaultRangeExtractor } from '../utils/virtual/virtualizer';\nimport { useFieldControl } from '../form/Field';\nimport {\n  handleListKeydown,\n  useListState,\n  type ListboxOption,\n  type ListStateEntry,\n  type ListState,\n  type OptionMapping,\n  toListboxOption,\n} from './list-state';\n\n/** 选项的渲染状态：渲染函数据此画高亮、已选的样子 */\nexport interface OptionRenderState {\n  /** 已选 */\n  selected: boolean;\n  /** 高亮（键盘或指针所在） */\n  active: boolean;\n}\n\n/** 选项的部件属性：可以按选项（items 里的原始数据）计算 */\ntype OptionProps<T> =\n  | PartProps<'div', 'role' | 'id' | 'aria-selected' | 'aria-disabled'>\n  | ((item: T, state: OptionRenderState) => PartProps<'div'>);\n\n/** ListboxView 的属性：Listbox、Select、Combobox 共用的渲染层 */\nexport interface ListboxViewProps<T> extends PartProps<'div', 'role'> {\n  /** 列表状态（useListState） */\n  list: ListState<T>;\n  /** 列表的 id；选项的 id 是 `${id}-${序号}`（aria-activedescendant 指向它） */\n  id: string;\n  /** 多选：aria-multiselectable */\n  multiple?: boolean;\n  /** 滚动容器：Select、Combobox 的弹出层；不给时列表自己滚动（ScrollArea 的浮层滚动条，最高 20em，用 sx 改） */\n  scroller?: HTMLElement | null;\n  /** 加载中：没有选项时显示骨架行，有选项时顶部显示进度条 */\n  loading?: boolean;\n  /** 选项的估计高度（px），默认 36；渲染后以实际高度为准 */\n  estimateSize?: number;\n  /** 自定义选项内容：拿到 items 里的原始数据 */\n  renderOption?: (item: T, state: OptionRenderState) => VNodeChild;\n  /** 没有选项时显示的内容；默认是 Empty（文案取语言包） */\n  empty?: VNodeChild;\n  /** 点选了一项（点击或 Enter，再选已选的那项也会调用）：Select、弹层里的列表据此关闭 */\n  onPick?: (value: string) => void;\n  /** 选项的部件属性 */\n  propsOption?: OptionProps<T>;\n  /** 分组标题的部件属性 */\n  propsGroupLabel?: Partial<TextProps>;\n  /** 已选标记的部件属性 */\n  propsCheck?: Partial<IconProps>;\n  /** 空状态的部件属性 */\n  propsEmpty?: Partial<EmptyProps>;\n  /** 加载中占位行的部件属性 */\n  propsSkeleton?: SkeletonShapeProps;\n}\n\n/** 渲染用的一行：分组标题或选项 */\ntype Row<T> =\n  | { kind: 'group'; key: string; label: string; id: string }\n  | {\n      kind: 'option';\n      key: string;\n      option: ListStateEntry<T>;\n      index: number;\n      groupId: string | undefined;\n    };\n\n/** 加载中显示几行骨架 */\nconst SKELETON_ROWS = 4;\n\n/** Listbox 的样式：root、scroll、sizer、row、groupLabel、content 等 */\nexport const listboxStyles = css.create({\n  root: { position: 'relative', padding: '_xs', lineHeight: '_normal', outlineStyle: 'none' },\n  // 自己是滚动容器时（单独使用的 Listbox）：限制高度，滚动不传给页面\n  scroll: { maxHeight: '20em', overflowY: 'auto', overscrollBehavior: 'contain' },\n  sizer: { position: 'relative', width: '_full' },\n  row: { position: 'absolute', top: 0, insetInline: 0 },\n  groupLabel: {\n    display: 'block',\n    paddingTop: '_sm',\n    paddingBottom: '_xs',\n    paddingInline: '_sm',\n    fontWeight: '_semibold',\n  },\n  content: { display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 },\n  description: { color: '_textMuted' },\n  check: { flexShrink: 0 },\n  hidden: { visibility: 'hidden' },\n  // 刷新中的进度条贴在列表顶部，不占位\n  progress: { position: 'absolute', top: 0, insetInline: 0, zIndex: 1 },\n  skeleton: { display: 'block', height: '1em', marginBlock: '0.625em', marginInline: '_sm' },\n});\n\n// 行的位置是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Listbox 的样式：y、height、width */\nexport const listboxPositionStyles = css.create({\n  y: (px: number) => ({ transform: `translateY(${px}px)` }),\n  height: (px: number) => ({ height: px }),\n  width: (percent: string) => ({ width: percent }),\n});\n\n/** 列表的渲染层：虚拟滚动的选项、分组标题、已选标记、空状态与加载中；不管焦点，指针悬停高亮、点击选中 */\nexport const ListboxView = _component(\n  <T,>({\n    list,\n    id,\n    multiple = false,\n    scroller,\n    loading = false,\n    estimateSize = 36,\n    renderOption,\n    empty,\n    onPick,\n    propsOption,\n    propsGroupLabel,\n    propsCheck,\n    propsEmpty,\n    propsSkeleton,\n    ...rest\n  }: ListboxViewProps<T>) => {\n    const lang = useLang();\n    // 骨架、进度条防闪烁；aria-busy 按真实的 loading\n    const indicator = useDelayedLoading(() => loading);\n    let root = _state.raw<HTMLElement | null>(null);\n    let sizer = _state.raw<HTMLElement | null>(null);\n\n    /** 选项按分组排好后展开成行：每组前插一行标题 */\n    const rows = _derived.by<Row<T>[]>(() => {\n      const result: Row<T>[] = [];\n      let group: string | undefined;\n      let headerId: string | undefined;\n      list.options.forEach((option, index) => {\n        if (option.group != null && option.group !== group) {\n          headerId = `${id}-group-${result.length}`;\n          result.push({\n            kind: 'group',\n            key: `group:${option.group}`,\n            label: option.group,\n            id: headerId,\n          });\n        }\n        group = option.group;\n        result.push({\n          kind: 'option',\n          key: option.value,\n          option,\n          index,\n          groupId: option.group != null ? headerId : undefined,\n        });\n      });\n      return result;\n    });\n\n    /** 值 → 行号：高亮项的行号一次查到，不在每次渲染时扫一遍 */\n    const rowOf = _derived.by(() => {\n      const map = new Map<string, number>();\n      rows.forEach((row, index) => {\n        if (row.kind === 'option') map.set(row.option.value, index);\n      });\n      return map;\n    });\n    const activeRow = () => (list.active === undefined ? -1 : (rowOf.get(list.active) ?? -1));\n\n    const virtual = useVirtualizer(() => {\n      const current = rows;\n      // 读一下高亮项：它变了要重新算渲染范围（高亮项总要渲染）\n      const active = activeRow();\n      // 先读出来：每一项都要调用一次估计高度，不要每次都经过 props 的响应式读取\n      const size = estimateSize;\n      return {\n        count: current.length,\n        scrollElement: scroller === undefined ? root : scroller,\n        list: sizer,\n        estimateSize: (index: number) => (current[index]?.kind === 'group' ? 30 : size),\n        getItemKey: (index: number) => current[index]!.key,\n        overscan: 6,\n        rangeExtractor: (range) => {\n          const indices = defaultRangeExtractor(range);\n          if (active >= 0 && !indices.includes(active)) {\n            indices.push(active);\n            indices.sort((a, b) => a - b);\n          }\n          return indices;\n        },\n      };\n    });\n\n    // 高亮项变了（键盘移动）时滚进可见范围；已经完整可见就不动（指针悬停触发的不会滚）。\n    // 高亮的是第一项、上面是组名时滚到最顶上：组名不被挡住（搜索过滤后高亮第一个匹配的）\n    watch(\n      () => list.active,\n      () => {\n        const index = activeRow();\n        if (index < 0) return;\n        virtual.scrollToIndex(index === 1 && rows[0]?.kind === 'group' ? 0 : index, {\n          align: 'auto',\n        });\n      },\n      { flush: 'post' },\n    );\n\n    /**\n     * 选项行按“会影响它的值”缓存（Vue 的 withMemo，同模板的 v-memo）：方向键移动高亮时只重建前后两行，\n     * 不再重建全部可见行与其中的图标。自定义了 renderOption 或按项计算的 propsOption 时不缓存：\n     * 使用方的函数可能读别的状态，缓存了会显示旧内容\n     */\n    const memoCache: VNode[] = [];\n    function optionRow(row: Extract<Row<T>, { kind: 'option' }>) {\n      if (renderOption || typeof propsOption === 'function') return renderOptionRow(row);\n      const { option } = row;\n      return withMemo(\n        [\n          option,\n          row.index,\n          row.groupId,\n          list.isSelected(option.value),\n          list.active === option.value,\n          list.options.length,\n          propsOption,\n          propsCheck,\n        ],\n        () => renderOptionRow(row),\n        memoCache,\n        row.index,\n      );\n    }\n\n    function renderOptionRow(row: Extract<Row<T>, { kind: 'option' }>) {\n      const { option, index } = row;\n      const state = {\n        selected: list.isSelected(option.value),\n        active: list.active === option.value,\n      };\n      const own = typeof propsOption === 'function' ? propsOption(option.item, state) : propsOption;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                itemStyles.row,\n                state.active && itemStyles.highlighted,\n                state.selected && itemStyles.selected,\n                option.disabled && itemStyles.disabled,\n              ],\n            },\n            own,\n            {\n              id: `${id}-${index}`,\n              role: 'option',\n              'aria-selected': state.selected,\n              'aria-disabled': option.disabled || undefined,\n              'aria-setsize': list.options.length,\n              'aria-posinset': index + 1,\n              'aria-describedby': row.groupId,\n              // 焦点留在列表、触发按钮或输入框上\n              onPointerdown: (event: PointerEvent) => event.preventDefault(),\n              onPointermove: () => {\n                if (!option.disabled && list.active !== option.value) list.setActive(option.value);\n              },\n              onClick: () => {\n                if (option.disabled) return;\n                list.select(option.value);\n                onPick?.(option.value);\n              },\n            },\n          )}\n          data-state={state.selected ? 'checked' : 'unchecked'}\n          data-active={state.active || undefined}\n          data-disabled={option.disabled || undefined}\n        >\n          {renderOption ? (\n            renderOption(option.item, state)\n          ) : (\n            <>\n              {option.icon && <Icon icon={option.icon} />}\n              <span {...css.attrs(listboxStyles.content)}>\n                <span {...css.attrs(itemStyles.label)}>{option.label}</span>\n                {option.description && (\n                  <Text size=\"sm\" sx={listboxStyles.description}>\n                    {option.description}\n                  </Text>\n                )}\n              </span>\n            </>\n          )}\n          <Icon\n            {...mergePartProps<IconProps>(\n              { icon: Check, sx: [listboxStyles.check, !state.selected && listboxStyles.hidden] },\n              propsCheck,\n            )}\n          />\n        </div>\n      );\n    }\n\n    function renderBody() {\n      if (rows.length === 0) {\n        if (loading) {\n          if (!indicator.value) return null;\n          return Array.from({ length: SKELETON_ROWS }, (_, index) => (\n            <Skeleton\n              key={index}\n              {...mergePartProps<SkeletonProps>(\n                {\n                  sx: [listboxStyles.skeleton, listboxPositionStyles.width(`${85 - index * 15}%`)],\n                  delay: index * SHIMMER_STAGGER,\n                },\n                propsSkeleton,\n              )}\n            />\n          ));\n        }\n        return (\n          empty ?? (\n            <Empty\n              {...mergePartProps<EmptyProps>(\n                { size: 'sm', icon: false, description: lang.selectEmpty },\n                propsEmpty,\n              )}\n            />\n          )\n        );\n      }\n      return (\n        <div\n          ref={_toRef(sizer)}\n          role=\"presentation\"\n          {...css.attrs(listboxStyles.sizer, listboxPositionStyles.height(virtual.total))}\n        >\n          {virtual.items.map((item) => {\n            const row = rows[item.index]!;\n            return (\n              <div\n                key={item.key}\n                ref={virtual.measure}\n                data-index={item.index}\n                role=\"presentation\"\n                {...css.attrs(listboxStyles.row, listboxPositionStyles.y(item.start))}\n              >\n                {row.kind === 'group' ? (\n                  <Text\n                    {...mergePartProps<TextProps>(\n                      { tone: 'muted', size: 'sm', sx: listboxStyles.groupLabel },\n                      propsGroupLabel,\n                      // 只是视觉上的标题：组名经各选项的 aria-describedby 念出\n                      { id: row.id, 'aria-hidden': true },\n                    )}\n                  >\n                    {row.label}\n                  </Text>\n                ) : (\n                  optionRow(row)\n                )}\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n\n    return () => {\n      const own = scroller === undefined;\n      // 先不编译 sx：自己滚动时这些属性交给 ScrollArea 的视口，和视口自己的样式一次合并\n      const props = mergeProps<'div'>(\n        { sx: [listboxStyles.root, own && listboxStyles.scroll, focusRingStyles.visible] },\n        rest,\n        {\n          ref: _toRef(root),\n          id,\n          role: 'listbox',\n          'aria-multiselectable': multiple || undefined,\n          'aria-busy': loading || undefined,\n        },\n      );\n      const body = [\n        indicator.value && rows.length > 0 && (\n          <div aria-hidden=\"true\" {...css.attrs(listboxStyles.progress)}>\n            <Progress size=\"xs\" aria-label={lang.loading} />\n          </div>\n        ),\n        renderBody(),\n      ];\n      // 别处滚动（Select、Combobox 的弹出层）：只渲染列表本身\n      if (!own) return <div {...elementProps(props)}>{body}</div>;\n      // 自己滚动：列表元素就是 ScrollArea 的视口，焦点与 aria-activedescendant 仍在它上面，滚动条换成浮层的\n      return (\n        <ScrollArea focusable={false} propsViewport={props as PartProps<'div'>}>\n          {body}\n        </ScrollArea>\n      );\n    };\n  },\n  { name: 'ListboxView' },\n);\n\n/** 高亮项的 id（给 aria-activedescendant）；没有高亮时 undefined */\nexport function activeOptionId<T>(list: ListState<T>, id: string): string | undefined {\n  const index = list.active === undefined ? -1 : list.indexOf(list.active);\n  return index < 0 ? undefined : `${id}-${index}`;\n}\n\n/** 列表框共有的属性；未声明的属性落到 role=\"listbox\" 的 div 上 */\nexport interface ListboxBaseProps<T> extends Omit<\n  ListboxViewProps<T>,\n  'list' | 'id' | 'multiple' | 'renderOption'\n> {\n  /** 列表的 id；在 Field 里时默认用 Field 给的 */\n  id?: string;\n  /** 数据：ListboxOption、字符串，或任意数据加 toOption */\n  items: readonly T[];\n  /** 必须有选中项：单选时再点已选项不取消；在必填的 Field 里默认开启 */\n  required?: boolean;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 自定义选项内容：`{(item, { selected, active }) => …}`，拿到 items 里的原始数据 */\n  children?: (item: T, state: OptionRenderState) => VNodeChild;\n}\n\n/** 单选或多选；items 不是 ListboxOption 或字符串时要给 toOption */\nexport type ListboxProps<T = ListboxOption> = ListboxBaseProps<T> &\n  SelectionProps &\n  OptionMapping<T>;\n\n/** 列表框：焦点在列表上，方向键移动高亮、Enter / 空格选中 */\nexport const Listbox = _component(\n  <T,>({\n    items,\n    toOption,\n    selectionMode = 'single',\n    _value: value = _bindable<string | string[] | null>(null),\n    required,\n    disabled,\n    id,\n    children,\n    onPick,\n    ...rest\n  }: ListboxProps<T>) => {\n    const generatedId = useId();\n    const control = useFieldControl(() => ({ id, disabled, required }));\n    const list = useListState({\n      items: () => items,\n      toOption: (item) => toListboxOption(item, toOption),\n      selected: () => selectedValues(value),\n      mode: () => selectionMode,\n      required: () => control().required,\n      onChange: (next) => (value = selectionMode === 'multiple' ? [...next] : (next[0] ?? null)),\n    });\n\n    function onKeydown(event: KeyboardEvent) {\n      if (control().disabled) return;\n      if (handleListKeydown(list, event, { space: true, typeahead: true }, onPick)) {\n        event.preventDefault();\n      }\n    }\n\n    return () => {\n      const state = control();\n      const prefix = state.id ?? generatedId;\n      return (\n        <ListboxView\n          {...mergePartProps<ListboxViewProps<T>>(\n            {\n              list,\n              id: prefix,\n              multiple: selectionMode === 'multiple',\n              renderOption: children,\n              onPick,\n            },\n            rest as Partial<ListboxViewProps<T>>,\n            {\n              id: prefix,\n              tabindex: state.disabled ? -1 : 0,\n              'aria-labelledby': defaultLabelledBy(rest, state.labelledBy),\n              'aria-describedby': state.describedBy,\n              'aria-disabled': state.disabled || undefined,\n              'aria-required': state.required || undefined,\n              'aria-activedescendant': activeOptionId(list, prefix),\n              onFocus: () => {\n                if (list.active === undefined) list.activateDefault();\n              },\n              onKeydown,\n            },\n          )}\n        />\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/Mentions.d.ts

@@ -0,0 +1,74 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PartProps } from '../utils/props';
+import { type ListboxViewProps, type OptionRenderState } from './Listbox';
+import { type ListboxOption, type OptionMapping } from './list-state';
+import { type OptionsLoader } from './remote-items';
+import { type TextareaProps } from './Textarea';
+/** 提及的弹出列表由组件管理 */
+export type MentionsManaged = 'aria-autocomplete' | 'aria-controls' | 'aria-activedescendant';
+/** Mentions 除 toOption 外的属性；未声明的属性落到 textarea 上（同 Textarea） */
+export interface MentionsBaseProps<T> extends Omit<TextareaProps, MentionsManaged>, OpenChangeProps {
+    /** 可以提及的人（ListboxOption、字符串，或任意数据加 toOption）；有 load 时是第一次结果之前的选项 */
+    items?: readonly T[];
+    /** 远程搜索：按 @ 后面的文字调用，停下 300 ms 后请求，只采用最后一次 */
+    load?: OptionsLoader<T>;
+    /** 文字里提到的选项的值：父级写 _mentions={x}，随文字更新 */
+    _mentions?: string[];
+    /** 触发的字符，默认 '@' */
+    prefix?: string;
+    /** 过滤：默认按显示文字包含 @ 后面的文字；false 不过滤（由调用方换 items） */
+    filter?: false | ((item: T, query: string) => boolean);
+    /** 列表是否打开：父级可以写 _open={x} */
+    _open?: boolean;
+    /** 正在取选项 */
+    loading?: boolean;
+    /** 自定义选项内容：`{(item, { active }) => …}`（头像、部门） */
+    children?: (item: T, state: OptionRenderState) => VNodeChild;
+    /** 没有匹配的人时列表里显示的内容 */
+    empty?: VNodeChild;
+    /** 弹出层的部件属性 */
+    propsPopover?: PartProps<'div', 'id' | 'popover'>;
+    /** 列表的部件属性 */
+    propsListbox?: Partial<ListboxViewProps<T>>;
+}
+/** 提及输入框的属性；items 不是 ListboxOption 或字符串时要给 toOption */
+export type MentionsProps<T = ListboxOption> = MentionsBaseProps<T> & OptionMapping<T>;
+/** 拆开的一段文字：普通文字，或提及（带它的选项） */
+export interface MentionSegment {
+    /** 这一段的文字（提及时含 @） */
+    text: string;
+    /** 提及的选项；普通文字没有 */
+    mention?: ListboxOption;
+}
+/**
+ * 把文字拆成普通文字与提及：“@名字”里的名字是 options 里某一项的显示文字（有多个能匹配时取最长的）。
+ * 提及的显示（MentionText）与找出提到了谁（mentionedValues）都用它
+ */
+export declare function mentionSegments(text: string, options: readonly ListboxOption[], prefix?: string): MentionSegment[];
+/** 文字里提到了哪些选项（值，按第一次出现的顺序，不重复） */
+export declare function mentionedValues(text: string, options: readonly ListboxOption[], prefix?: string): string[];
+/** MentionText 与 Mentions 的样式：mention、text、panel */
+export declare const mentionStyles: Readonly<{
+    mention: css.CompiledStyles;
+    panel: css.CompiledStyles;
+    text: css.CompiledStyles;
+}>;
+/** 未声明的属性落到 span 上 */
+export interface MentionTextProps extends PartProps<'span'> {
+    /** 文字 */
+    text: string;
+    /** 能被提及的选项：“@显示文字”高亮 */
+    options: readonly ListboxOption[];
+    /** 触发的字符，默认 '@' */
+    prefix?: string;
+    /** 提及的部件属性，可以按选项计算（做成链接、悬停卡片时用 renderMention） */
+    propsMention?: PartProps<'span'> | ((mention: ListboxOption) => PartProps<'span'>);
+    /** 自己渲染一个提及（链接到个人页、HoverCard）；不写时是高亮的文字 */
+    renderMention?: (mention: ListboxOption, text: string) => VNodeChild;
+}
+/** 带提及的文字：“@名字”高亮，换行照常（pre-wrap） */
+export declare const MentionText: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MentionTextProps>;
+/** 提及输入框：多行文本框 + 跟着 @ 弹出的人员列表 */
+export declare const Mentions: <T>(props: MentionsProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;