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

package/dist/input/Select.js

@@ -0,0 +1,455 @@
+import { useLang, useTextMatcher } 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 { useAnchoredPopover } from "../utils/dom/floating.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { useFieldControl } from "../form/Field.js";
+import { handleListKeydown, toListboxOption, useListState, useResultAnnouncement, useSelectedOptions } from "./list-state.js";
+import { clickOnShell, controlClear, controlIcon, controlParts, focusOnShell, useControlAppearance } from "./control.js";
+import { activeOptionId } from "./Listbox.js";
+import { FormValue } from "../form/FormValue.js";
+import { ListPopover } from "./ListPopover.js";
+import { useRemoteItems } from "./remote-items.js";
+import { SelectedTags } from "./SelectedTags.js";
+import { TextField } from "./TextField.js";
+import { Fragment, createVNode, mergeProps, shallowRef, useId, watch } 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 { ChevronDown, Plus, Search } from "@lucide/icons";
+//#region src/input/Select.tsx
+/**
+* 下拉选择（WAI-ARIA 的 select-only combobox）：点触发框弹出选项列表，单选或多选。
+*
+*   <Field label="城市"><Select items={['北京', '上海', '广州']} _value={city} placeholder="选择城市" /></Field>
+*   <Select items={tags} selectionMode="multiple" _value={picked} clearable aria-label="标签" />
+*   <Select items={users} toOption={(user) => ({ value: user.id, label: user.name })} _value={id} />
+*   <Select items={suppliers} searchable _value={supplier} />   选项多时：弹出层顶部带搜索框
+*
+*   <Select items={tags} selectionMode="multiple" maxTagCount="responsive" creatable onCreate={(text) => tags.push(text)} … />
+*
+* 组合已有的部件：外壳是输入框外壳（controlParts），弹出层用 useAnchoredPopover（与外壳同宽、最高到视口剩余空间），
+* 列表是 ListboxView（状态与键盘见 list-state.ts）。焦点一直在触发按钮上，高亮项经 aria-activedescendant 告诉读屏。
+*
+* 多选时已选的项是触发按钮前面的一排 Tag（不能放进 button 里：按钮里不能有按钮），各带移除按钮。
+* 这排标签只给指针用（aria-hidden、移除按钮不进 Tab 顺序）：读屏从触发按钮里念出全部已选内容，
+* 键盘在列表里取消勾选，或在触发按钮（及空的搜索框）里按 Backspace 移除最后一项（同 TagsInput）。
+* maxTagCount 是数字时只显示前几个，'responsive' 时排成一行按宽度放，其余收进“+N”（SelectedTags，TreeSelect 共用）。
+*
+* 键盘：关闭时 ↓ / Enter / 空格打开（↑ 打开并高亮最后一项），单选时直接按字母选中以它开头的项（同原生 select）；
+* 打开时 ↑↓、Home / End、Page Up / Down 移动，Enter / 空格选中（单选随后关闭），Esc、Tab 关闭。
+* 写了 name 时用隐藏的 input 随表单提交（多选时每个值一个）。
+*
+* searchable 时弹出层顶部有搜索框：打开后焦点在搜索框里，输入就过滤选项（按显示文字，忽略大小写与重音，或用 filter），
+* ↑↓ 移动、Enter 选中、Esc 关闭并把焦点还给触发按钮。已选的项被过滤掉、或 items 换了（远程搜索）时，
+* 触发框里仍显示它的文字（useSelectedOptions）。
+*
+* 远程选项：给 load 时打开就按搜索词请求，输入停下 300 ms 再请求，只采用最后一次（remote-items.ts）；
+* 自己管请求时写 _search={keyword} 拿到搜索词、filter={false} 关掉本地过滤，items 与 loading 自己给。
+*
+*   <Select searchable load={(q, signal) => http.get<User[]>('/users', { query: { q }, signal })} toOption={…} _value={owner} />
+*
+* creatable 时自带搜索框，输入的文字没有对应的选项时列表末尾多一项“新建“…””：选中后值就是这段文字，onCreate 报告它。
+*
+* 部件：Root（外壳）、Tags（多选时的那排标签）、Tag、Trigger（button，主元素）、Value、Clear、Chevron、Popover、
+* Search（TextField）、Listbox。
+*/
+/** 角色、展开状态与可用性由组件管理 */
+/** 下拉选择共有的属性；未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */
+/** 单选或多选；items 不是 ListboxOption 或字符串时要给 toOption */
+/** Select 的样式：root、trigger、value、placeholder、chevronOpen 等 */
+var selectStyles = css.create({
+	root: {
+		cursor: "pointer",
+		flexGrow: 0
+	},
+	trigger: {
+		display: "flex",
+		alignItems: "center",
+		flexGrow: 1,
+		minWidth: 0,
+		alignSelf: "stretch",
+		textAlign: "start",
+		cursor: "inherit",
+		outlineStyle: "none"
+	},
+	value: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "_xs",
+		minWidth: 0,
+		paddingBlock: "_xs",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	placeholder: { color: "_textMuted" },
+	triggerBehindTags: { flexGrow: 0 },
+	chevronOpen: { rotate: "180deg" },
+	search: { width: "_full" }
+});
+/** creatable 时列表末尾那一项“新建“…””：不是 items 里的数据 */
+var Creation = class {
+	text;
+	constructor(text) {
+		this.text = text;
+	}
+};
+/** 下拉选择：触发框 + 弹出的选项列表 */
+var Select = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const items = readonlyProp(_props, "items", () => []);
+	const toOption = readonlyProp(_props, "toOption");
+	const selectionMode = readonlyProp(_props, "selectionMode", "single");
+	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 creatable = readonlyProp(_props, "creatable", false);
+	const onCreate = readonlyProp(_props, "onCreate");
+	const maxTagCount = readonlyProp(_props, "maxTagCount");
+	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 children = childrenProp(_props);
+	const renderValue = readonlyProp(_props, "renderValue");
+	const empty = readonlyProp(_props, "empty");
+	const loading = readonlyProp(_props, "loading", false);
+	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 propsListbox = readonlyProp(_props, "propsListbox");
+	const propsSearch = readonlyProp(_props, "propsSearch");
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const textMatcher = useTextMatcher();
+	const listId = 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 optionOf = (item) => toListboxOption(item, toOption.value);
+	const remote = useRemoteItems({
+		load: () => load.value,
+		query: () => search.value,
+		open: () => open.value,
+		items: () => items.value
+	});
+	const localFilter = () => !load.value && filter.value !== false;
+	const matches = (item, text) => filter.value ? filter.value(item, text) : textMatcher()(optionOf(item).label, text);
+	const withSearch = () => searchable.value || creatable.value;
+	const creation = () => {
+		const text = search.value.trim();
+		if (!creatable.value || !text) return void 0;
+		return remote.items().some((item) => {
+			const option = optionOf(item);
+			return option.value === text || option.label.toLowerCase() === text.toLowerCase();
+		}) ? void 0 : new Creation(text);
+	};
+	const list = useListState({
+		items: () => {
+			const all = remote.items();
+			const shown = withSearch() && search.value && localFilter() ? all.filter((item) => matches(item, search.value)) : all;
+			const created = creation();
+			return created ? [...shown, created] : shown;
+		},
+		toOption: (item) => item instanceof Creation ? {
+			value: item.text,
+			label: lang.selectCreate(item.text),
+			icon: Plus
+		} : optionOf(item),
+		selected: () => selectedValues(value.value),
+		mode: () => selectionMode.value,
+		onChange: (next) => {
+			const created = creation();
+			if (created && next.includes(created.text)) {
+				onCreate.value?.(created.text);
+				search.value = "";
+			}
+			value.value = multiple() ? [...next] : next[0] ?? null;
+		},
+		required: () => !multiple()
+	});
+	const selectedOptions = useSelectedOptions({
+		items: remote.items,
+		toOption: optionOf
+	});
+	let shell = shallowRef(null);
+	let trigger = shallowRef(null);
+	let panel = shallowRef(null);
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	/** 多选时移除一项（标签的移除按钮、Backspace） */
+	function remove(target) {
+		value.value = selectedValues(value.value).filter((item) => item !== target);
+	}
+	function removeLast() {
+		const last = selectedValues(value.value).at(-1);
+		if (last !== void 0) remove(last);
+	}
+	function show(highlight = "default", event) {
+		search.value = "";
+		list.activateDefault();
+		if (highlight === "last" && selectedValues(value.value).length === 0) list.move("last");
+		setOpen(true, "trigger", event);
+	}
+	useResultAnnouncement(() => ({
+		query: search.value,
+		count: list.options.length
+	}));
+	watch(() => search.value, (text) => text && list.move("first"));
+	function picked(event) {
+		if (!multiple()) setOpen(false, "select", event);
+	}
+	/** Ctrl / Cmd / Alt 组合键是浏览器的（刷新、复制、查找），不做按字母跳转 */
+	const hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey;
+	function onKeydown(event) {
+		if (control().disabled || control().readonly) return;
+		if (event.key === "Backspace" && multiple()) {
+			event.preventDefault();
+			removeLast();
+			return;
+		}
+		if (!open.value) {
+			if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				show("default", event);
+			} else if (event.key === "ArrowUp") {
+				event.preventDefault();
+				show("last", event);
+			} else if (!multiple() && !hasModifier(event) && list.typeahead(event.key)) {
+				event.preventDefault();
+				if (list.active !== void 0 && !list.isSelected(list.active)) list.select(list.active);
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			setOpen(false, "focus", event);
+			return;
+		}
+		if (handleListKeydown(list, event, {
+			space: true,
+			typeahead: true
+		}, () => picked(event))) event.preventDefault();
+	}
+	function onSearchKeydown(event) {
+		if (event.key === "Tab") {
+			setOpen(false, "focus", event);
+			return;
+		}
+		if (event.key === "Backspace" && !search.value && multiple()) {
+			event.preventDefault();
+			removeLast();
+			return;
+		}
+		if (handleListKeydown(list, event, { homeEnd: false }, () => picked(event))) event.preventDefault();
+	}
+	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 (!withSearch()) return;
+		if (event.newState === "open") {
+			panel.value?.querySelector("input[type=\"search\"]")?.focus();
+			return;
+		}
+		const active = document.activeElement;
+		if (!active || active === document.body || panel.value?.contains(active)) trigger.value?.focus();
+	}
+	return () => {
+		const state = control();
+		const values = selectedValues(value.value);
+		const selected = selectedOptions(values);
+		const off = state.disabled;
+		const locked = off || state.readonly;
+		const tagged = multiple() && !renderValue.value && selected.length > 0;
+		const shown = tagged ? createVNode("span", css.attrs(visuallyHiddenStyles.hidden), [lang.selectSummary(selected.map((option) => option.label))]) : renderValue.value?.(selected.flatMap((option) => option.item === void 0 ? [] : [option.item])) ?? (selected.length === 0 ? createVNode("span", css.attrs(selectStyles.placeholder), [placeholder.value ?? lang.selectPlaceholder]) : selected[0].label);
+		const tags = tagged && createVNode(SelectedTags, mergePartProps({
+			tags: selected,
+			maxTagCount: maxTagCount.value,
+			onRemove: locked ? void 0 : remove,
+			propsTag: propsTag.value
+		}, propsTags.value), null);
+		const s = controlParts(appearance(), state);
+		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: locked ? void 0 : clickOnShell(() => trigger.value, (event) => open.value ? setOpen(false, "trigger", event) : show("default", event))
+		}), {
+			"data-state": open.value ? "open" : "closed",
+			"data-invalid": state.invalid || void 0,
+			"data-disabled": off || void 0
+		}), [
+			controlIcon(s, icon.value, propsIcon.value),
+			tags,
+			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": "listbox",
+				"aria-expanded": open.value,
+				"aria-controls": listId,
+				"aria-activedescendant": open.value ? activeOptionId(list, listId) : void 0,
+				"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("default", event);
+				},
+				onKeydown
+			}), [createVNode("span", mergeAttrs({ sx: selectStyles.value }, propsValue.value), [shown])]),
+			clearable.value && values.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(ListPopover, {
+			"panelRef": panel,
+			"onToggle": onPanelToggle,
+			"size": appearance().size,
+			"labelledBy": state.labelledBy,
+			"label": rest["aria-label"],
+			"loading": loading.value || remote.loading(),
+			"onPick": _cache[0] || (_cache[0] = () => picked()),
+			"header": withSearch() && 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[1] || (_cache[1] = ($event) => search.value = $event),
+				"aria-controls": listId,
+				"aria-activedescendant": open.value ? activeOptionId(list, listId) : void 0,
+				"onKeydown": onSearchKeydown
+			}), null),
+			"listbox": {
+				list,
+				id: listId,
+				empty: remote.error() ? lang.listLoadFailed : search.value ? lang.selectNoMatch : empty.value,
+				renderOption: children.value && ((item, state) => item instanceof Creation ? lang.selectCreate(item.text) : children.value(item, state)),
+				multiple: multiple()
+			},
+			"propsListbox": propsListbox.value,
+			"propsPopover": propsPopover.value
+		}, null)]);
+	};
+}, {
+	name: "Select",
+	props: [
+		"items",
+		"toOption",
+		"selectionMode",
+		"_value",
+		"onUpdate:_value",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"placeholder",
+		"placement",
+		"clearable",
+		"searchable",
+		"filter",
+		"_search",
+		"onUpdate:_search",
+		"load",
+		"creatable",
+		"onCreate",
+		"maxTagCount",
+		"name",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"id",
+		"icon",
+		"renderValue",
+		"empty",
+		"loading",
+		"propsRoot",
+		"propsIcon",
+		"propsValue",
+		"propsTag",
+		"propsTags",
+		"propsClear",
+		"propsChevron",
+		"propsPopover",
+		"propsListbox",
+		"propsSearch"
+	]
+});
+//#endregion
+export { Select, selectStyles };
+
+//# sourceMappingURL=Select.js.map

package/dist/input/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/input/Select.tsx"],"sourcesContent":["/**\n * 下拉选择（WAI-ARIA 的 select-only combobox）：点触发框弹出选项列表，单选或多选。\n *\n *   <Field label=\"城市\"><Select items={['北京', '上海', '广州']} _value={city} placeholder=\"选择城市\" /></Field>\n *   <Select items={tags} selectionMode=\"multiple\" _value={picked} clearable aria-label=\"标签\" />\n *   <Select items={users} toOption={(user) => ({ value: user.id, label: user.name })} _value={id} />\n *   <Select items={suppliers} searchable _value={supplier} />   选项多时：弹出层顶部带搜索框\n *\n *   <Select items={tags} selectionMode=\"multiple\" maxTagCount=\"responsive\" creatable onCreate={(text) => tags.push(text)} … />\n *\n * 组合已有的部件：外壳是输入框外壳（controlParts），弹出层用 useAnchoredPopover（与外壳同宽、最高到视口剩余空间），\n * 列表是 ListboxView（状态与键盘见 list-state.ts）。焦点一直在触发按钮上，高亮项经 aria-activedescendant 告诉读屏。\n *\n * 多选时已选的项是触发按钮前面的一排 Tag（不能放进 button 里：按钮里不能有按钮），各带移除按钮。\n * 这排标签只给指针用（aria-hidden、移除按钮不进 Tab 顺序）：读屏从触发按钮里念出全部已选内容，\n * 键盘在列表里取消勾选，或在触发按钮（及空的搜索框）里按 Backspace 移除最后一项（同 TagsInput）。\n * maxTagCount 是数字时只显示前几个，'responsive' 时排成一行按宽度放，其余收进“+N”（SelectedTags，TreeSelect 共用）。\n *\n * 键盘：关闭时 ↓ / Enter / 空格打开（↑ 打开并高亮最后一项），单选时直接按字母选中以它开头的项（同原生 select）；\n * 打开时 ↑↓、Home / End、Page Up / Down 移动，Enter / 空格选中（单选随后关闭），Esc、Tab 关闭。\n * 写了 name 时用隐藏的 input 随表单提交（多选时每个值一个）。\n *\n * searchable 时弹出层顶部有搜索框：打开后焦点在搜索框里，输入就过滤选项（按显示文字，忽略大小写与重音，或用 filter），\n * ↑↓ 移动、Enter 选中、Esc 关闭并把焦点还给触发按钮。已选的项被过滤掉、或 items 换了（远程搜索）时，\n * 触发框里仍显示它的文字（useSelectedOptions）。\n *\n * 远程选项：给 load 时打开就按搜索词请求，输入停下 300 ms 再请求，只采用最后一次（remote-items.ts）；\n * 自己管请求时写 _search={keyword} 拿到搜索词、filter={false} 关掉本地过滤，items 与 loading 自己给。\n *\n *   <Select searchable load={(q, signal) => http.get<User[]>('/users', { query: { q }, signal })} toOption={…} _value={owner} />\n *\n * creatable 时自带搜索框，输入的文字没有对应的选项时列表末尾多一项“新建“…””：选中后值就是这段文字，onCreate 报告它。\n *\n * 部件：Root（外壳）、Tags（多选时的那排标签）、Tag、Trigger（button，主元素）、Value、Clear、Chevron、Popover、\n * Search（TextField）、Listbox。\n */\nimport { ChevronDown, Plus, 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, type VNodeChild } 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, useTextMatcher } from '../config/context';\nimport { useAnchoredPopover, type FloatingPlacement } from '../utils/dom/floating';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { ListPopover } from './ListPopover';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { selectedValues, type SelectionProps } from '../utils/data/selection';\nimport {\n  controlClear,\n  controlParts,\n  clickOnShell,\n  focusOnShell,\n  controlIcon,\n  useControlAppearance,\n  type ControlIconOptions,\n  type ControlOptions,\n} from './control';\nimport { useFieldControl } from '../form/Field';\nimport { FormValue } from '../form/FormValue';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport { activeOptionId, type ListboxViewProps, type OptionRenderState } from './Listbox';\nimport {\n  handleListKeydown,\n  useListState,\n  useResultAnnouncement,\n  useSelectedOptions,\n  type ListboxOption,\n  type OptionMapping,\n  toListboxOption,\n} from './list-state';\nimport { useRemoteItems, type OptionsLoader } from './remote-items';\nimport { SelectedTags, type SelectedTagsProps } from './SelectedTags';\nimport { TextField, type TextFieldProps } from './TextField';\n\n/** 角色、展开状态与可用性由组件管理 */\nexport type SelectManaged =\n  | 'type'\n  | 'role'\n  | 'value'\n  | 'disabled'\n  | 'aria-haspopup'\n  | 'aria-expanded'\n  | 'aria-controls'\n  | 'aria-activedescendant'\n  | 'aria-invalid'\n  | 'aria-required'\n  | 'aria-describedby';\n\n/** 下拉选择共有的属性；未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */\nexport interface SelectBaseProps<T>\n  extends PartProps<'button', SelectManaged>, ControlOptions, ControlIconOptions, OpenChangeProps {\n  /** 数据：ListboxOption、字符串，或任意数据加 toOption；有 load 时是第一次加载之前的选项（编辑页放上已选的那一项） */\n  items?: readonly T[];\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 | ((item: T, query: string) => boolean);\n  /** 搜索框里的文字：打开时清空；父级写 _search={x} 拿到它（自己发请求时） */\n  _search?: string;\n  /** 远程选项：打开时与搜索词停下 300 ms 后调用，结果代替 items；只采用最后一次，被顶掉的请求 signal 中止 */\n  load?: OptionsLoader<T>;\n  /**\n   * 可以新建选项（自带搜索框）：输入的文字没有对应的选项时，列表末尾多一项“新建“…””，选中后值就是这段文字。\n   * 在 onCreate 里把它加进 items（或存到服务端）；不加时触发框里照样显示这段文字\n   */\n  creatable?: boolean;\n  /** 新建了一项（creatable 时）：参数是输入的文字，也就是选中的值 */\n  onCreate?: (text: string) => void;\n  /** 多选时触发框里最多显示几个标签，其余收进“+N”；'responsive' 时排成一行、按宽度放，放不下的收起 */\n  maxTagCount?: number | 'responsive';\n  /** 表单提交时的 name（用隐藏的 input） */\n  name?: string;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：能聚焦、能看到已选的内容，不能打开、不能清空 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 自定义选项内容：`{(option, { selected, active }) => …}` */\n  children?: (item: T, state: OptionRenderState) => VNodeChild;\n  /** 自定义触发框里显示的内容（已选的选项）；默认单选显示文字、多选显示标签 */\n  renderValue?: (selected: readonly T[]) => VNodeChild;\n  /** 正在取选项（异步加载）：没有选项时列表里是骨架行，已有选项时顶部显示进度条 */\n  loading?: boolean;\n  /** 没有选项时列表里显示的内容 */\n  empty?: VNodeChild;\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  /** 列表的部件属性 */\n  propsListbox?: Partial<ListboxViewProps<T>>;\n  /** 搜索框的部件属性（searchable 时） */\n  propsSearch?: Partial<TextFieldProps>;\n}\n\n/** 单选或多选；items 不是 ListboxOption 或字符串时要给 toOption */\nexport type SelectProps<T = ListboxOption> = SelectBaseProps<T> & SelectionProps & OptionMapping<T>;\n\n/** Select 的样式：root、trigger、value、placeholder、chevronOpen 等 */\nexport const selectStyles = css.create({\n  // 在 ControlGroup 里也按内容宽（输入框才分剩余宽度）\n  root: { cursor: 'pointer', flexGrow: 0 },\n  // 去掉按钮默认外观用 buttonBaseStyles；像输入框一样没有自己的焦点环与波纹（焦点环画在外壳上）\n  trigger: {\n    display: 'flex',\n    alignItems: 'center',\n    flexGrow: 1,\n    minWidth: 0,\n    alignSelf: 'stretch',\n    textAlign: 'start',\n    cursor: 'inherit',\n    outlineStyle: 'none',\n  },\n  value: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    gap: '_xs',\n    minWidth: 0,\n    paddingBlock: '_xs',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  // 是真正的文字（不是原生 placeholder），要满足 4.5:1：用 textMuted 而不是 textPlaceholder\n  placeholder: { color: '_textMuted' },\n  // 多选时标签排在触发按钮前面（SelectedTags）占剩余宽度，触发按钮里只剩读屏用的文字\n  triggerBehindTags: { flexGrow: 0 },\n  chevronOpen: { rotate: '180deg' },\n  // 弹出层顶部的搜索框占满宽度\n  search: { width: '_full' },\n});\n\n/** creatable 时列表末尾那一项“新建“…””：不是 items 里的数据 */\nclass Creation {\n  readonly text: string;\n  constructor(text: string) {\n    this.text = text;\n  }\n}\n\n/** 下拉选择：触发框 + 弹出的选项列表 */\nexport const Select = _component(\n  <T,>({\n    items = [],\n    toOption,\n    selectionMode = 'single',\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    creatable = false,\n    onCreate,\n    maxTagCount,\n    name,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    icon,\n    children,\n    renderValue,\n    empty,\n    loading = false,\n    propsRoot,\n    propsIcon,\n    propsValue,\n    propsTag,\n    propsTags,\n    propsClear,\n    propsChevron,\n    propsPopover,\n    propsListbox,\n    propsSearch,\n    ...rest\n  }: SelectProps<T>) => {\n    const lang = useLang();\n    const textMatcher = useTextMatcher();\n    const listId = useId();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    const multiple = () => selectionMode === 'multiple';\n    const optionOf = (item: T) => toListboxOption(item, toOption);\n    const remote = useRemoteItems({\n      load: () => load,\n      query: () => search,\n      open: () => open,\n      items: () => items,\n    });\n    // 本地过滤：有 load 或 filter={false} 时交给服务端\n    const localFilter = () => !load && filter !== false;\n    const matches = (item: T, text: string) =>\n      filter ? filter(item, text) : textMatcher()(optionOf(item).label, text);\n    // creatable 自带搜索框\n    const withSearch = () => searchable || creatable;\n    // creatable：输入的文字没有同名（或同值）的选项时，列表末尾多一项“新建”\n    const creation = () => {\n      const text = search.trim();\n      if (!creatable || !text) return undefined;\n      const exists = remote.items().some((item) => {\n        const option = optionOf(item);\n        return option.value === text || option.label.toLowerCase() === text.toLowerCase();\n      });\n      return exists ? undefined : new Creation(text);\n    };\n    const list = useListState<T | Creation>({\n      items: () => {\n        const all = remote.items();\n        const shown =\n          withSearch() && search && localFilter()\n            ? all.filter((item) => matches(item, search))\n            : all;\n        const created = creation();\n        return created ? [...shown, created] : shown;\n      },\n      toOption: (item) =>\n        item instanceof Creation\n          ? { value: item.text, label: lang.selectCreate(item.text), icon: Plus }\n          : optionOf(item),\n      selected: () => selectedValues(value),\n      mode: () => selectionMode,\n      onChange: (next) => {\n        const created = creation();\n        if (created && next.includes(created.text)) {\n          onCreate?.(created.text);\n          search = '';\n        }\n        value = multiple() ? [...next] : (next[0] ?? null);\n      },\n      // 单选时再点已选的一项不取消（同原生 select）；要清空用清除按钮\n      required: () => !multiple(),\n    });\n    // 已选项的文字取自全部 items（过滤掉的、远程搜索换掉的也在）\n    const selectedOptions = useSelectedOptions({ items: remote.items, toOption: optionOf });\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    /** 多选时移除一项（标签的移除按钮、Backspace） */\n    function remove(target: string) {\n      value = selectedValues(value).filter((item) => item !== target);\n    }\n\n    function removeLast() {\n      const last = selectedValues(value).at(-1);\n      if (last !== undefined) remove(last);\n    }\n\n    function show(highlight: 'default' | 'last' = 'default', event?: Event) {\n      search = '';\n      list.activateDefault();\n      if (highlight === 'last' && selectedValues(value).length === 0) list.move('last');\n      setOpen(true, 'trigger', event);\n    }\n\n    useResultAnnouncement(() => ({ query: search, count: list.options.length }));\n\n    // 输入搜索词：高亮第一个匹配的。打开时清空搜索词不算：那时高亮的是已选项\n    watch(\n      () => search,\n      (text) => text && list.move('first'),\n    );\n\n    // 选中一项：单选时关闭\n    function picked(event?: Event) {\n      if (!multiple()) setOpen(false, 'select', event);\n    }\n\n    /** Ctrl / Cmd / Alt 组合键是浏览器的（刷新、复制、查找），不做按字母跳转 */\n    const hasModifier = (event: KeyboardEvent) => event.altKey || event.ctrlKey || event.metaKey;\n\n    function onKeydown(event: KeyboardEvent) {\n      if (control().disabled || control().readonly) return;\n      if (event.key === 'Backspace' && multiple()) {\n        event.preventDefault();\n        removeLast();\n        return;\n      }\n      if (!open) {\n        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          show('default', event);\n        } else if (event.key === 'ArrowUp') {\n          event.preventDefault();\n          show('last', event);\n        } else if (!multiple() && !hasModifier(event) && list.typeahead(event.key)) {\n          // 同原生 select：关闭时按字母直接选中\n          event.preventDefault();\n          if (list.active !== undefined && !list.isSelected(list.active)) list.select(list.active);\n        }\n        return;\n      }\n      if (event.key === 'Tab') {\n        setOpen(false, 'focus', event);\n        return;\n      }\n      if (handleListKeydown(list, event, { space: true, typeahead: true }, () => picked(event))) {\n        event.preventDefault();\n      }\n    }\n\n    // 搜索框里：↑↓ 移动、Enter 选中（Home / End、空格留给输入），Tab 关闭后照常移到下一个；\n    // 多选时空的搜索框里按 Backspace 移除最后一项\n    function onSearchKeydown(event: KeyboardEvent) {\n      if (event.key === 'Tab') {\n        setOpen(false, 'focus', event);\n        return;\n      }\n      if (event.key === 'Backspace' && !search && multiple()) {\n        event.preventDefault();\n        removeLast();\n        return;\n      }\n      if (handleListKeydown(list, event, { homeEnd: false }, () => picked(event)))\n        event.preventDefault();\n    }\n\n    function clear() {\n      value = multiple() ? [] : null;\n      trigger?.focus();\n    }\n\n    // 弹层贴着外壳、与它同宽；焦点一直在触发按钮上，关闭时不用归还（searchable 时见 onPanelToggle）\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    // searchable：打开后焦点进搜索框；关闭时焦点还在弹层里（Esc、选中、点外面）就还给触发按钮\n    function onPanelToggle(event: ToggleEvent) {\n      onToggle(event);\n      if (!withSearch()) return;\n      if (event.newState === 'open') {\n        panel?.querySelector<HTMLInputElement>('input[type=\"search\"]')?.focus();\n        return;\n      }\n      const active = document.activeElement;\n      if (!active || active === document.body || panel?.contains(active)) trigger?.focus();\n    }\n\n    return () => {\n      const state = control();\n      const values = selectedValues(value);\n      const selected = selectedOptions(values);\n      const off = state.disabled;\n      // 只读：能聚焦，不能打开、不能改\n      const locked = off || state.readonly;\n      // 多选的默认显示：触发按钮前面一排标签，按钮里只留给读屏的文字\n      const tagged = multiple() && !renderValue && selected.length > 0;\n      const shown = tagged ? (\n        <span {...css.attrs(visuallyHiddenStyles.hidden)}>\n          {lang.selectSummary(selected.map((option) => option.label))}\n        </span>\n      ) : (\n        (renderValue?.(\n          selected.flatMap((option) => (option.item === undefined ? [] : [option.item])),\n        ) ??\n        (selected.length === 0 ? (\n          <span {...css.attrs(selectStyles.placeholder)}>\n            {placeholder ?? lang.selectPlaceholder}\n          </span>\n        ) : (\n          selected[0]!.label\n        )))\n      );\n      const tags = tagged && (\n        <SelectedTags\n          {...mergePartProps<SelectedTagsProps>(\n            {\n              tags: selected,\n              maxTagCount,\n              onRemove: locked ? undefined : remove,\n              propsTag,\n            },\n            propsTags,\n          )}\n        />\n      );\n      const s = controlParts(appearance(), state);\n      return (\n        <>\n          <div\n            {...mergeAttrs<'div'>({ ...s.root, sx: [s.root.sx, selectStyles.root] }, propsRoot, {\n              ref: _toRef(shell),\n              // 点在外壳空白处（含多选的标签）：焦点交给触发按钮，并与点触发按钮一样切换打开（只读时只聚焦）\n              onPointerdown: off ? undefined : focusOnShell(() => trigger),\n              onClick: locked\n                ? undefined\n                : clickOnShell(\n                    () => trigger,\n                    (event) => (open ? setOpen(false, 'trigger', event) : show('default', 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            {tags}\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': 'listbox',\n                  'aria-expanded': open,\n                  'aria-controls': listId,\n                  'aria-activedescendant': open ? activeOptionId(list, listId) : undefined,\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                    // Safari 点击按钮不会聚焦它：焦点要在触发按钮上，键盘与 aria-activedescendant 才有效\n                    trigger?.focus();\n                    if (locked) return;\n                    if (open) setOpen(false, 'trigger', event);\n                    else show('default', event);\n                  },\n                  onKeydown,\n                },\n              )}\n            >\n              <span {...mergeAttrs<'span'>({ sx: selectStyles.value }, propsValue)}>{shown}</span>\n            </button>\n            {clearable && values.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          <ListPopover\n            panelRef={_toRef(panel)}\n            onToggle={onPanelToggle}\n            size={appearance().size}\n            labelledBy={state.labelledBy}\n            label={rest['aria-label']}\n            loading={loading || remote.loading()}\n            onPick={() => picked()}\n            header={\n              withSearch() && (\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={listId}\n                  aria-activedescendant={open ? activeOptionId(list, listId) : undefined}\n                  onKeydown={onSearchKeydown}\n                />\n              )\n            }\n            listbox={{\n              list,\n              id: listId,\n              empty: remote.error() ? lang.listLoadFailed : search ? lang.selectNoMatch : empty,\n              renderOption:\n                children &&\n                ((item: T | Creation, state: OptionRenderState) =>\n                  item instanceof Creation ? lang.selectCreate(item.text) : children(item, state)),\n              multiple: multiple(),\n            }}\n            // 使用方按 T 写列表的部件属性；creatable 时多出的“新建”那一项由上面的 renderOption 处理\n            propsListbox={propsListbox as Partial<ListboxViewProps<T | Creation>> | undefined}\n            propsPopover={propsPopover}\n          />\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/SelectedTags.d.ts

@@ -0,0 +1,28 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type TagProps } from '../base/Tag';
+import { type PartProps } from '../utils/props';
+/** 一个已选的标签 */
+export interface SelectedTag {
+    /** 值：移除时交给 onRemove */
+    value: string;
+    /** 显示的文字 */
+    label: string;
+}
+/** 未声明的属性落到这一排的 span 上 */
+export interface SelectedTagsProps extends PartProps<'span', 'aria-hidden'> {
+    /** 要显示的标签 */
+    tags: readonly SelectedTag[];
+    /** 最多显示几个，其余收进“+N”；'responsive' 时排成一行、按宽度放 */
+    maxTagCount?: number | 'responsive';
+    /** 点标签的移除按钮；不写时（只读、不可用）标签没有移除按钮 */
+    onRemove?: (value: string) => void;
+    /** 每个标签的部件属性 */
+    propsTag?: Partial<TagProps>;
+}
+/** SelectedTags 的样式：root、line */
+export declare const selectedTagsStyles: Readonly<{
+    line: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 多选下拉的已选标签：可移除，可按数量或宽度收起 */
+export declare const SelectedTags: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SelectedTagsProps>;

package/dist/input/SelectedTags.js

@@ -0,0 +1,81 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Tag } from "../base/Tag.js";
+import { useOverflowItems } from "../utils/dom/overflow.js";
+import { createVNode, isVNode, mergeProps, shallowRef } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/SelectedTags.tsx
+/** 一个已选的标签 */
+/** 未声明的属性落到这一排的 span 上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** SelectedTags 的样式：root、line */
+var selectedTagsStyles = css.create({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "_xs",
+		flexGrow: 1,
+		minWidth: 0,
+		paddingBlock: "_xs"
+	},
+	line: {
+		flexWrap: "nowrap",
+		position: "relative",
+		overflow: "hidden",
+		contain: "inline-size"
+	}
+});
+/** 移除按钮按下时不抢焦点：焦点留在触发按钮上 */
+var keepFocus = (event) => event.preventDefault();
+/** 多选下拉的已选标签：可移除，可按数量或宽度收起 */
+var SelectedTags = /*#__PURE__*/ _component((_props, _ctx) => {
+	const tags = readonlyProp(_props, "tags");
+	const maxTagCount = readonlyProp(_props, "maxTagCount");
+	const onRemove = readonlyProp(_props, "onRemove");
+	const propsTag = readonlyProp(_props, "propsTag");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	let row = shallowRef(null);
+	const overflow = useOverflowItems({
+		container: () => maxTagCount.value === "responsive" ? row.value : null,
+		count: () => tags.value.length,
+		min: () => 1
+	});
+	return () => {
+		let _slot;
+		const responsive = maxTagCount.value === "responsive";
+		const shown = typeof maxTagCount.value === "number" ? tags.value.slice(0, Math.max(0, maxTagCount.value)) : tags.value;
+		const hiddenCount = responsive ? overflow.hidden : tags.value.length - shown.length;
+		return createVNode("span", mergeAttrs({ sx: [selectedTagsStyles.root, responsive && selectedTagsStyles.line] }, rest, {
+			ref: row,
+			"aria-hidden": "true"
+		}), [shown.map((tag, index) => createVNode(Tag, mergeProps({ "key": tag.value }, mergePartProps({
+			size: "sm",
+			variant: "soft",
+			onRemove: onRemove.value && (() => onRemove.value(tag.value)),
+			propsRemove: {
+				tabindex: -1,
+				onPointerdown: keepFocus
+			}
+		}, propsTag.value), responsive ? overflow.itemProps(index) : {}), { default: () => [tag.label] })), (responsive || hiddenCount > 0) && createVNode(Tag, mergeProps({
+			"size": "sm",
+			"variant": "soft"
+		}, responsive ? overflow.restProps() : {}), _isSlot(_slot = lang.selectMoreTags(hiddenCount)) ? _slot : { default: () => [_slot] })]);
+	};
+}, {
+	name: "SelectedTags",
+	props: [
+		"tags",
+		"maxTagCount",
+		"onRemove",
+		"propsTag"
+	]
+});
+//#endregion
+export { SelectedTags, selectedTagsStyles };
+
+//# sourceMappingURL=SelectedTags.js.map

package/dist/input/SelectedTags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedTags.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/input/SelectedTags.tsx"],"sourcesContent":["/**\n * 多选下拉的触发按钮前面那一排已选标签：Select、TreeSelect 共用。\n *\n *   <SelectedTags tags={selected} maxTagCount=\"responsive\" onRemove={(value) => remove(value)} />\n *\n * 标签不能放进触发按钮里（按钮里不能有按钮），所以排在它前面。这排标签只给指针用：aria-hidden、移除按钮不进 Tab 顺序、\n * 按下时不抢焦点；读屏从触发按钮里念全部已选（lang.selectSummary），键盘在列表里取消勾选，或在触发按钮上按 Backspace。\n * maxTagCount 是数字时只显示前几个，'responsive' 时排成一行按宽度放（useOverflowItems），其余收进“+N”。\n * 未声明的属性落到这一排的 span 上。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Tag, type TagProps } from '../base/Tag';\nimport { useLang } from '../config/context';\nimport { useOverflowItems } from '../utils/dom/overflow';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\n\n/** 一个已选的标签 */\nexport interface SelectedTag {\n  /** 值：移除时交给 onRemove */\n  value: string;\n  /** 显示的文字 */\n  label: string;\n}\n\n/** 未声明的属性落到这一排的 span 上 */\nexport interface SelectedTagsProps extends PartProps<'span', 'aria-hidden'> {\n  /** 要显示的标签 */\n  tags: readonly SelectedTag[];\n  /** 最多显示几个，其余收进“+N”；'responsive' 时排成一行、按宽度放 */\n  maxTagCount?: number | 'responsive';\n  /** 点标签的移除按钮；不写时（只读、不可用）标签没有移除按钮 */\n  onRemove?: (value: string) => void;\n  /** 每个标签的部件属性 */\n  propsTag?: Partial<TagProps>;\n}\n\n/** SelectedTags 的样式：root、line */\nexport const selectedTagsStyles = css.create({\n  // 占触发框里剩下的宽度；触发按钮里只剩读屏用的文字\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    gap: '_xs',\n    flexGrow: 1,\n    minWidth: 0,\n    paddingBlock: '_xs',\n  },\n  // responsive：一行，放不下的移出排版（useOverflowItems 要求容器 position: relative）；\n  // contain: inline-size 让这一行不按内容撑宽外壳（不然按内容宽度排版的祖先会被整行标签撑开，永远“放得下”）\n  line: { flexWrap: 'nowrap', position: 'relative', overflow: 'hidden', contain: 'inline-size' },\n});\n\n/** 移除按钮按下时不抢焦点：焦点留在触发按钮上 */\nconst keepFocus = (event: PointerEvent) => event.preventDefault();\n\n/** 多选下拉的已选标签：可移除，可按数量或宽度收起 */\nexport const SelectedTags = _component(\n  ({ tags, maxTagCount, onRemove, propsTag, ...rest }: SelectedTagsProps) => {\n    const lang = useLang();\n    let row = _state.raw<HTMLElement | null>(null);\n    const overflow = useOverflowItems({\n      container: () => (maxTagCount === 'responsive' ? row : null),\n      count: () => tags.length,\n      min: () => 1,\n    });\n    return () => {\n      const responsive = maxTagCount === 'responsive';\n      const shown =\n        typeof maxTagCount === 'number' ? tags.slice(0, Math.max(0, maxTagCount)) : tags;\n      const hiddenCount = responsive ? overflow.hidden : tags.length - shown.length;\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [selectedTagsStyles.root, responsive && selectedTagsStyles.line] },\n            rest,\n            { ref: _toRef(row), 'aria-hidden': 'true' },\n          )}\n        >\n          {shown.map((tag, index) => (\n            <Tag\n              key={tag.value}\n              {...mergePartProps<TagProps>(\n                {\n                  size: 'sm',\n                  variant: 'soft',\n                  onRemove: onRemove && (() => onRemove(tag.value)),\n                  propsRemove: { tabindex: -1, onPointerdown: keepFocus },\n                },\n                propsTag,\n              )}\n              {...(responsive ? overflow.itemProps(index) : {})}\n            >\n              {tag.label}\n            </Tag>\n          ))}\n          {/* responsive 时“+N”一直在（没有折起的项时藏起来，但仍要量它的宽度） */}\n          {(responsive || hiddenCount > 0) && (\n            <Tag size=\"sm\" variant=\"soft\" {...(responsive ? overflow.restProps() : {})}>\n              {lang.selectMoreTags(hiddenCount)}\n            </Tag>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AAyBA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAaA,IAAa,qBAAqB,IAAI,OAAO;CAE3C,MAAM;EACJ,SAAS;EACT,UAAU;EACV,YAAY;EACZ,KAAK;EACL,UAAU;EACV,UAAU;EACV,cAAc;CAChB;CAGA,MAAM;EAAE,UAAU;EAAU,UAAU;EAAY,UAAU;EAAU,SAAS;CAAc;AAC/F,CAAC;;AAGD,IAAM,aAAa,UAAwB,MAAM,eAAe;;AAGhE,IAAa,eAAe,0BAC1B,QAAA,SAA2E;CAAA,MAAA,OAAAC,aAAA,QAAA,MAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAA9B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAC/C,MAAM,OAAO,QAAQ;CACrB,IAAI,MAAGC,WAAkC,IAAI;CAC7C,MAAM,WAAW,iBAAiB;EAChC,iBAAkB,YAAA,UAAgB,eAAY,IAAA,QAAS;EACvD,aAAa,KAAA,MAAK;EAClB,WAAW;CACb,CAAC;CACD,aAAa;EAAA,IAAA;EACX,MAAM,aAAa,YAAA,UAAgB;EACnC,MAAM,QACJ,OAAA,YAAA,UAAuB,WAAW,KAAA,MAAK,MAAM,GAAG,KAAK,IAAI,GAAC,YAAA,KAAa,CAAC,IAAC,KAAA;EAC3E,MAAM,cAAc,aAAa,SAAS,SAAS,KAAA,MAAK,SAAS,MAAM;EACvE,OAAAC,YAAA,QAEQ,WACF,EAAE,IAAI,CAAC,mBAAmB,MAAM,cAAc,mBAAmB,IAAI,EAAE,GACvE,MACA;GAAE,KAAG;GAAe,eAAe;EAAO,CAC5C,GAAC,CAEA,MAAM,KAAK,KAAK,UAAKA,YAAA,KAAAC,WAAA,EAAA,OAEb,IAAI,MAAK,GACV,eACF;GACE,MAAM;GACN,SAAS;GACT,UAAU,SAAA,gBAAmB,SAAA,MAAS,IAAI,KAAK;GAC/C,aAAa;IAAE,UAAU;IAAI,eAAe;GAAU;EACxD,GAAC,SAAA,KAEH,GACK,aAAa,SAAS,UAAU,KAAK,IAAI,CAAC,CAAC,GAAA,EAAA,eAAA,CAE/C,IAAI,KAAK,EAAA,CAAA,CAEb,IAEC,cAAc,cAAc,MAACD,YAAA,KAAAC,WAAA;GAAA,QAAA;GAAA,WAAA;EAAA,GACM,aAAa,SAAS,UAAU,IAAI,CAAC,CAAC,GAAA,QAAA,QACtE,KAAK,eAAe,WAAW,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA,CAEpC,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}