niuma-ui 1.3.9 → 2.0.0

package/dist/components/select/src/select-utils.js

@@ -0,0 +1,247 @@
+//#region src/components/select/src/select-utils.ts
+function splitSelectLabelHighlight(label, keyword) {
+	const query = keyword.trim();
+	if (!query) return [{
+		text: label,
+		highlight: false
+	}];
+	const lowerLabel = label.toLowerCase();
+	const lowerQuery = query.toLowerCase();
+	const index = lowerLabel.indexOf(lowerQuery);
+	if (index < 0) return [{
+		text: label,
+		highlight: false
+	}];
+	const parts = [];
+	if (index > 0) parts.push({
+		text: label.slice(0, index),
+		highlight: false
+	});
+	parts.push({
+		text: label.slice(index, index + query.length),
+		highlight: true
+	});
+	if (index + query.length < label.length) parts.push({
+		text: label.slice(index + query.length),
+		highlight: false
+	});
+	return parts;
+}
+/**
+* Reka ComboboxItem 禁止 value 为空串（空串表示未选中 / placeholder）。
+* 选项若传入 value: ''，对内映射为此哨兵，避免崩溃；对外读写仍为 ''。
+*/
+var RS_SELECT_EMPTY_VALUE = "__rs_select_empty__";
+/**
+* Vue 对泛型 boolean prop 不会按 Boolean 收口。
+* 模板写 `multiple` 时运行时可能是 ''；个别版本还会落到 attrs 变成 'true' / 'multiple'。
+* Boolean('') 为 false，会把多选打成单选。
+*/
+function isSelectMultiple(value) {
+	return value === true || value === "" || value === "true" || value === "multiple";
+}
+/** 业务 value → ComboboxItem token（空串走哨兵；数字转为十进制字符串） */
+function toComboboxValue(value) {
+	return value === "" ? RS_SELECT_EMPTY_VALUE : String(value);
+}
+/** ComboboxItem token → 业务字符串（仅还原空串哨兵，不恢复 number） */
+function fromComboboxValue(value) {
+	return value === "__rs_select_empty__" ? "" : value;
+}
+function isSelectOptionGroup(item) {
+	return "options" in item && Array.isArray(item.options);
+}
+function flattenSelectOptions(options) {
+	const result = [];
+	for (const item of options) if (isSelectOptionGroup(item)) result.push(...item.options);
+	else result.push(item);
+	return result;
+}
+function findSelectOption(options, token) {
+	const raw = fromComboboxValue(token);
+	return flattenSelectOptions(options).find((opt) => String(opt.value) === String(raw));
+}
+/**
+* Combobox token → 业务 value。
+* 优先返回 options 里的原始类型（number 0 保持为 0）；手输/未知项保持字符串。
+*/
+function restoreSelectValue(token, options) {
+	const matched = findSelectOption(options, token);
+	if (matched) return matched.value;
+	return fromComboboxValue(token);
+}
+function restoreSelectValues(tokens, options) {
+	return tokens.map((token) => restoreSelectValue(token, options));
+}
+function buildOptionLabelMap(options) {
+	const map = /* @__PURE__ */ new Map();
+	for (const opt of flattenSelectOptions(options)) {
+		const key = toComboboxValue(opt.value);
+		map.set(key, opt.label);
+		if (opt.value === "") map.set("", opt.label);
+	}
+	return map;
+}
+function buildOptionDisabledMap(options) {
+	const map = /* @__PURE__ */ new Map();
+	for (const opt of flattenSelectOptions(options)) {
+		const key = toComboboxValue(opt.value);
+		map.set(key, Boolean(opt.disabled));
+	}
+	return map;
+}
+function optionFieldText(option, prop) {
+	if (prop === "value") return String(option.value);
+	if (prop === "label" || !prop) return String(option.label);
+	const extra = Reflect.get(option, prop);
+	return extra == null ? String(option.label) : String(extra);
+}
+function defaultMatchOption(option, query, contains, optionFilterProp) {
+	return contains(optionFieldText(option, optionFilterProp), query);
+}
+function coerceSelectValue(raw) {
+	if (typeof raw === "number" || typeof raw === "string") return raw;
+	if (raw == null) return "";
+	return String(raw);
+}
+function mapSelectOption(raw, names) {
+	const value = coerceSelectValue(raw[names.value]);
+	const label = raw[names.label];
+	return {
+		...raw,
+		value,
+		label: label == null ? String(value) : String(label),
+		disabled: Boolean(raw[names.disabled]),
+		title: typeof raw.title === "string" ? raw.title : void 0
+	};
+}
+/**
+* 按 fieldNames 把业务选项正规化为 { label, value, disabled }。
+* 默认键即为 label / value / options，既有调用无需改。
+*/
+function normalizeSelectOptions(options, fieldNames) {
+	const labelKey = fieldNames?.label ?? "label";
+	const valueKey = fieldNames?.value ?? "value";
+	const optionsKey = fieldNames?.options ?? "options";
+	const disabledKey = fieldNames?.disabled ?? "disabled";
+	const groupLabelKey = fieldNames?.groupLabel ?? labelKey;
+	const result = [];
+	for (const item of options) {
+		if (!item || typeof item !== "object") continue;
+		const raw = item;
+		const nested = raw[optionsKey];
+		if (Array.isArray(nested)) {
+			const children = [];
+			for (const child of nested) {
+				if (!child || typeof child !== "object") continue;
+				children.push(mapSelectOption(child, {
+					label: labelKey,
+					value: valueKey,
+					disabled: disabledKey
+				}));
+			}
+			result.push({
+				label: String(raw[groupLabelKey] ?? ""),
+				options: children
+			});
+			continue;
+		}
+		result.push(mapSelectOption(raw, {
+			label: labelKey,
+			value: valueKey,
+			disabled: disabledKey
+		}));
+	}
+	return result;
+}
+/** 触发器 / tag 展示文案，对齐 Ant optionLabelProp */
+function optionDisplayLabel(option, prop = "label") {
+	return optionFieldText(option, prop);
+}
+function comboboxBindingToTokens(value, multiple) {
+	if (multiple) return Array.isArray(value) ? value.map(String) : [];
+	if (value == null || value === "") return [];
+	return [String(value)];
+}
+function selectModelEntries(value) {
+	if (Array.isArray(value)) return value;
+	if (value === "" || value == null) return [];
+	return [value];
+}
+function filterSelectOptions(options, query, contains, filterOption, optionFilterProp = "label") {
+	if (filterOption === false) return options;
+	const trimmed = query.trim();
+	if (!trimmed) return options;
+	const match = typeof filterOption === "function" ? (opt) => filterOption(trimmed, opt) : (opt) => defaultMatchOption(opt, trimmed, contains, optionFilterProp);
+	const result = [];
+	for (const item of options) if (isSelectOptionGroup(item)) {
+		const filtered = item.options.filter(match);
+		if (filtered.length > 0) result.push({
+			label: item.label,
+			options: filtered
+		});
+	} else if (match(item)) result.push(item);
+	return result;
+}
+function flattenSelectValues(options) {
+	return flattenSelectOptions(options).map((opt) => toComboboxValue(opt.value));
+}
+function toSelectedTokens(value, multiple) {
+	const entries = multiple ? selectModelEntries(value) : Array.isArray(value) || value === "" || value == null ? [] : [value];
+	const tokens = [];
+	for (const entry of entries) {
+		const raw = unwrapSelectEntry(entry);
+		if (raw === null) continue;
+		tokens.push(toComboboxValue(raw));
+	}
+	return tokens;
+}
+function isSelectLabeledValue(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value) && "value" in value;
+}
+function unwrapSelectEntry(item) {
+	if (item == null || item === "") return null;
+	if (isSelectLabeledValue(item)) return item.value;
+	if (typeof item === "string" || typeof item === "number") return item;
+	return null;
+}
+function toLabeledValue(value, options) {
+	const matched = flattenSelectOptions(options).find((opt) => String(opt.value) === String(value));
+	return {
+		value: matched ? matched.value : value,
+		label: matched?.label ?? String(value)
+	};
+}
+function packSelectModel(values, options, multiple, labelInValue) {
+	if (multiple) return labelInValue ? values.map((value) => toLabeledValue(value, options)) : values;
+	const first = values[0];
+	if (first === void 0) return "";
+	return labelInValue ? toLabeledValue(first, options) : first;
+}
+function sortSelectOptions(options, sort) {
+	if (!sort) return options;
+	const next = [];
+	const flats = [];
+	const flushFlats = () => {
+		if (!flats.length) return;
+		next.push(...[...flats].sort(sort));
+		flats.length = 0;
+	};
+	for (const item of options) if (isSelectOptionGroup(item)) {
+		flushFlats();
+		next.push({
+			label: item.label,
+			options: [...item.options].sort(sort)
+		});
+	} else flats.push(item);
+	flushFlats();
+	return next;
+}
+function splitByTokenSeparators(raw, separators) {
+	if (!separators.length) return null;
+	const found = separators.find((sep) => sep && raw.includes(sep));
+	if (!found) return null;
+	return raw.split(found);
+}
+//#endregion
+export { RS_SELECT_EMPTY_VALUE, buildOptionDisabledMap, buildOptionLabelMap, comboboxBindingToTokens, filterSelectOptions, findSelectOption, flattenSelectOptions, flattenSelectValues, fromComboboxValue, isSelectLabeledValue, isSelectMultiple, isSelectOptionGroup, normalizeSelectOptions, optionDisplayLabel, packSelectModel, restoreSelectValue, restoreSelectValues, selectModelEntries, sortSelectOptions, splitByTokenSeparators, splitSelectLabelHighlight, toComboboxValue, toLabeledValue, toSelectedTokens, unwrapSelectEntry };

package/dist/components/select/src/use-rs-select.d.ts

@@ -0,0 +1,81 @@
+import { type ModelRef } from 'vue';
+import type { RsTranslateFn } from '../../../composables/useRsI18n';
+import { type RsSelectFieldNames, type RsSelectFilterOption, type RsSelectFilterSort, type RsSelectModelValue, type RsSelectOption, type RsSelectOptionFilterProp, type RsSelectOptionsInput, type RsSelectValue } from './select-utils';
+/** RsSelect 行为层入参（不含尺寸 / 表单外观） */
+export interface RsSelectEngineProps {
+    options: RsSelectOptionsInput;
+    fieldNames?: RsSelectFieldNames;
+    optionLabelProp?: string;
+    optionFilterProp?: RsSelectOptionFilterProp;
+    filterOption?: RsSelectFilterOption | boolean;
+    filterSort?: RsSelectFilterSort;
+    searchable?: boolean;
+    creatable?: boolean;
+    multiple?: boolean;
+    remote?: boolean;
+    virtual?: boolean;
+    virtualThreshold?: number;
+    maxTagCount?: number | 'responsive';
+    /** 远程 @search 防抖毫秒；0 立即发 */
+    debounce?: number;
+    maxTagPlaceholder?: string | ((omitted: number) => string);
+    maxTagTooltip?: boolean;
+    maxTagTextLength?: number;
+    multipleLimit?: number;
+    labelInValue?: boolean;
+    tokenSeparators?: string[];
+    autoClearSearchValue?: boolean;
+    /** 打开下拉时把当前选中值写入搜索框；默认不回填 */
+    fillSearchWithValue?: boolean;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    placeholder?: string;
+}
+export type RsSelectEngineEmit = {
+    (e: 'search', query: string): void;
+    (e: 'select', value: RsSelectValue, option?: RsSelectOption): void;
+    (e: 'deselect', value: RsSelectValue, option?: RsSelectOption): void;
+    (e: 'clear'): void;
+};
+/**
+ * Select 过滤、选中、多选 tag、creatable / 分隔符提交。
+ * 组件模板只消费返回值；表单校验仍留在 SFC。
+ */
+export declare function useRsSelect<T extends RsSelectModelValue = RsSelectModelValue>(props: RsSelectEngineProps, model: ModelRef<T>, open: ModelRef<boolean>, searchQuery: ModelRef<string>, emit: RsSelectEngineEmit, t: RsTranslateFn): {
+    normalizedOptions: import("vue").ComputedRef<import("./select-utils").RsSelectOptions>;
+    resolvedPlaceholder: import("vue").ComputedRef<string>;
+    resolvedSearchPlaceholder: import("vue").ComputedRef<string>;
+    resolvedEmptyText: import("vue").ComputedRef<string>;
+    resolvedLoadingText: import("vue").ComputedRef<string>;
+    isMultiple: import("vue").ComputedRef<boolean>;
+    isSearchable: import("vue").ComputedRef<boolean>;
+    labelMap: import("vue").ComputedRef<Map<string, string>>;
+    useVirtual: import("vue").ComputedRef<boolean>;
+    useManualFilter: import("vue").ComputedRef<boolean>;
+    displayOptions: import("vue").ComputedRef<import("./select-utils").RsSelectOptions>;
+    createValue: import("vue").ComputedRef<string>;
+    canCreate: import("vue").ComputedRef<boolean>;
+    createOptionLabel: import("vue").ComputedRef<string>;
+    virtualValues: import("vue").ComputedRef<string[]>;
+    selectedValues: import("vue").ComputedRef<string[]>;
+    hasValue: import("vue").ComputedRef<boolean>;
+    visibleTagTokens: import("vue").ComputedRef<string[]>;
+    omittedTagCount: import("vue").ComputedRef<number>;
+    omittedTagLabel: import("vue").ComputedRef<string>;
+    omittedTagTitle: import("vue").ComputedRef<string>;
+    singleDisplayLabel: import("vue").ComputedRef<string>;
+    comboboxModel: import("vue").WritableComputedRef<string | string[] | undefined, string | string[] | undefined>;
+    tokenLabel: (token: string) => string;
+    truncateTagLabel: (label: string) => string;
+    optionFromToken: (token: string) => RsSelectOption | undefined;
+    optionOrCreate: (token: string) => RsSelectOption;
+    isOptionLimited: (option: RsSelectOption) => boolean;
+    isTokenDisabled: (token: string) => boolean;
+    restoreTokenValue: (token: string) => RsSelectValue;
+    onSearchKeydown: (event: KeyboardEvent) => void;
+    onClear: (event: MouseEvent) => void;
+    removeTag: (value: string, event: MouseEvent) => void;
+    setValue: (value: unknown) => void;
+    resetSearch: () => void;
+};

package/dist/components/select/src/use-rs-select.js

@@ -0,0 +1,278 @@
+import { useFilter } from "../../_shared/src/reka.js";
+import { buildOptionDisabledMap, buildOptionLabelMap, comboboxBindingToTokens, filterSelectOptions, findSelectOption, flattenSelectOptions, flattenSelectValues, fromComboboxValue, isSelectLabeledValue, isSelectMultiple, normalizeSelectOptions, optionDisplayLabel, packSelectModel, restoreSelectValue, restoreSelectValues, selectModelEntries, sortSelectOptions, splitByTokenSeparators, toComboboxValue, toSelectedTokens } from "./select-utils.js";
+import { computed, nextTick, onUnmounted, watch } from "vue";
+//#region src/components/select/src/use-rs-select.ts
+/**
+* Select 过滤、选中、多选 tag、creatable / 分隔符提交。
+* 组件模板只消费返回值；表单校验仍留在 SFC。
+*/
+function useRsSelect(props, model, open, searchQuery, emit, t) {
+	const { contains } = useFilter({ sensitivity: "base" });
+	const isMultiple = computed(() => isSelectMultiple(props.multiple));
+	const normalizedOptions = computed(() => normalizeSelectOptions(props.options, props.fieldNames));
+	const resolvedPlaceholder = computed(() => props.placeholder ?? t("select.placeholder"));
+	const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? t("select.searchPlaceholder"));
+	const resolvedEmptyText = computed(() => props.emptyText ?? t("select.empty"));
+	const resolvedLoadingText = computed(() => props.loadingText ?? t("select.loading"));
+	const isSearchable = computed(() => Boolean(props.searchable || props.creatable));
+	const labelMap = computed(() => buildOptionLabelMap(normalizedOptions.value));
+	const disabledMap = computed(() => buildOptionDisabledMap(normalizedOptions.value));
+	const flatOptions = computed(() => flattenSelectOptions(normalizedOptions.value));
+	const flatCount = computed(() => flatOptions.value.length);
+	const useVirtual = computed(() => Boolean(props.virtual) || flatCount.value > (props.virtualThreshold ?? 50));
+	/**
+	* 可搜索时一律走本地过滤，并关掉 Reka 内置 filter。
+	* Reka 的 filterSearch 与搜索框 searchQuery 不同步（打开时会被清空），
+	* 默认依赖内置过滤时会出现：手输「NVA」已出「使用 NVA」，但 NVARCHAR 仍被整表挡住。
+	*/
+	const useManualFilter = computed(() => Boolean(props.remote) || useVirtual.value || isSearchable.value || typeof props.filterOption === "function" || props.filterOption === false || Boolean(props.optionFilterProp && props.optionFilterProp !== "label") || Boolean(props.filterSort) || Boolean(props.fieldNames));
+	const displayOptions = computed(() => {
+		let next = normalizedOptions.value;
+		if (!props.remote && props.filterOption !== false) {
+			if (useManualFilter.value || props.filterOption) next = filterSelectOptions(normalizedOptions.value, searchQuery.value, contains, props.filterOption, props.optionFilterProp);
+		}
+		return sortSelectOptions(next, props.filterSort);
+	});
+	const createValue = computed(() => searchQuery.value.trim());
+	const canCreate = computed(() => {
+		if (!props.creatable) return false;
+		const q = createValue.value;
+		if (!q) return false;
+		const lower = q.toLowerCase();
+		return !flatOptions.value.some((opt) => String(opt.value).toLowerCase() === lower || String(opt.label).toLowerCase() === lower);
+	});
+	const createOptionLabel = computed(() => t("select.createOption", "使用 “{query}”").replace("{query}", createValue.value));
+	const virtualValues = computed(() => {
+		const values = flattenSelectValues(displayOptions.value);
+		if (!canCreate.value) return values;
+		return [createValue.value, ...values.filter((item) => String(item) !== createValue.value)];
+	});
+	const selectedValues = computed(() => toSelectedTokens(model.value, isMultiple.value));
+	const hasValue = computed(() => selectedValues.value.length > 0);
+	const visibleTagTokens = computed(() => {
+		const all = selectedValues.value;
+		if (!isMultiple.value || props.maxTagCount == null || props.maxTagCount === "responsive") return all;
+		if (all.length <= props.maxTagCount) return all;
+		return all.slice(0, Math.max(0, props.maxTagCount));
+	});
+	const omittedTagCount = computed(() => Math.max(0, selectedValues.value.length - visibleTagTokens.value.length));
+	const omittedTagLabel = computed(() => {
+		const count = omittedTagCount.value;
+		if (typeof props.maxTagPlaceholder === "function") return props.maxTagPlaceholder(count);
+		if (props.maxTagPlaceholder) return props.maxTagPlaceholder;
+		return t("select.maxTagPlaceholder", { count });
+	});
+	function optionFromToken(token) {
+		return findSelectOption(normalizedOptions.value, String(token));
+	}
+	function tokenLabel(token) {
+		if (props.labelInValue) {
+			for (const entry of selectModelEntries(model.value)) if (isSelectLabeledValue(entry) && toComboboxValue(entry.value) === token && entry.label) return entry.label;
+		}
+		const option = optionFromToken(token);
+		if (option) return optionDisplayLabel(option, props.optionLabelProp);
+		return labelMap.value.get(token) ?? fromComboboxValue(token);
+	}
+	const omittedTagTitle = computed(() => {
+		if (!props.maxTagTooltip) return omittedTagLabel.value;
+		const omitted = selectedValues.value.slice(visibleTagTokens.value.length);
+		if (!omitted.length) return omittedTagLabel.value;
+		return omitted.map((token) => tokenLabel(token)).join("、");
+	});
+	function truncateTagLabel(label) {
+		const max = props.maxTagTextLength;
+		if (!max || max < 1 || label.length <= max) return label;
+		return `${label.slice(0, max)}…`;
+	}
+	const atMultipleLimit = computed(() => isMultiple.value && props.multipleLimit != null && props.multipleLimit > 0 && selectedValues.value.length >= props.multipleLimit);
+	function isOptionLimited(option) {
+		if (!atMultipleLimit.value) return false;
+		return !selectedValues.value.includes(toComboboxValue(option.value));
+	}
+	function isTokenDisabled(token) {
+		if (disabledMap.value.get(String(token))) return true;
+		const option = optionFromToken(token);
+		return option ? isOptionLimited(option) : false;
+	}
+	const singleDisplayLabel = computed(() => {
+		if (isMultiple.value || !hasValue.value) return "";
+		return tokenLabel(selectedValues.value[0]);
+	});
+	function writeTokens(tokens) {
+		model.value = packSelectModel(restoreSelectValues(tokens, normalizedOptions.value), normalizedOptions.value, isMultiple.value, Boolean(props.labelInValue));
+	}
+	function emitSelectionDiff(prev, next) {
+		const prevSet = new Set(prev);
+		const nextSet = new Set(next);
+		for (const token of next) {
+			if (prevSet.has(token)) continue;
+			emit("select", restoreSelectValue(token, normalizedOptions.value), findSelectOption(normalizedOptions.value, token));
+		}
+		for (const token of prev) {
+			if (nextSet.has(token)) continue;
+			emit("deselect", restoreSelectValue(token, normalizedOptions.value), findSelectOption(normalizedOptions.value, token));
+		}
+	}
+	const comboboxModel = computed({
+		get() {
+			if (isMultiple.value) return selectedValues.value;
+			return hasValue.value ? selectedValues.value[0] : void 0;
+		},
+		set(value) {
+			const prev = selectedValues.value;
+			const tokens = comboboxBindingToTokens(value, isMultiple.value);
+			emitSelectionDiff(prev, tokens);
+			writeTokens(tokens);
+			if (props.autoClearSearchValue) searchQuery.value = "";
+		}
+	});
+	function currentValues() {
+		return restoreSelectValues(selectedValues.value, normalizedOptions.value);
+	}
+	function commitCreatedValue(value) {
+		const next = value.trim();
+		if (!next) return;
+		const values = currentValues();
+		if (values.some((item) => String(item) === next)) return;
+		if (isMultiple.value) {
+			if (atMultipleLimit.value) return;
+			const prev = selectedValues.value;
+			const packed = packSelectModel([...values, next], normalizedOptions.value, true, Boolean(props.labelInValue));
+			model.value = packed;
+			emitSelectionDiff(prev, toSelectedTokens(packed, true));
+		} else {
+			const prev = selectedValues.value;
+			model.value = packSelectModel([next], normalizedOptions.value, false, Boolean(props.labelInValue));
+			emitSelectionDiff(prev, toSelectedTokens(model.value, false));
+			open.value = false;
+		}
+		if (props.autoClearSearchValue) searchQuery.value = "";
+	}
+	function consumeTokenSeparators(raw) {
+		if (!isMultiple.value && !props.creatable) return;
+		const parts = splitByTokenSeparators(raw, props.tokenSeparators ?? []);
+		if (!parts) return;
+		const rest = parts.pop() ?? "";
+		for (const part of parts) {
+			const token = part.trim();
+			if (!token) continue;
+			const matched = flatOptions.value.find((opt) => String(opt.value) === token || String(opt.label) === token);
+			if (matched) {
+				const prev = selectedValues.value;
+				const key = toComboboxValue(matched.value);
+				if (prev.includes(key)) continue;
+				if (isMultiple.value && atMultipleLimit.value) continue;
+				const nextTokens = isMultiple.value ? [...prev, key] : [key];
+				emitSelectionDiff(prev, nextTokens);
+				writeTokens(nextTokens);
+				if (!isMultiple.value) open.value = false;
+			} else if (props.creatable) commitCreatedValue(token);
+		}
+		if (rest !== raw) searchQuery.value = rest;
+	}
+	let searchTimer;
+	watch(searchQuery, (query) => {
+		if (props.remote) {
+			const wait = props.debounce ?? 0;
+			if (searchTimer) clearTimeout(searchTimer);
+			if (wait <= 0) emit("search", query);
+			else searchTimer = setTimeout(() => emit("search", query), wait);
+		}
+		if (props.tokenSeparators?.length) consumeTokenSeparators(query);
+	});
+	onUnmounted(() => {
+		if (searchTimer) clearTimeout(searchTimer);
+	});
+	watch(open, async (isOpen) => {
+		if (isOpen) {
+			const pending = searchQuery.value;
+			await nextTick();
+			await nextTick();
+			if (pending) searchQuery.value = pending;
+			else if (props.fillSearchWithValue && !isMultiple.value && hasValue.value) searchQuery.value = singleDisplayLabel.value;
+			else searchQuery.value = "";
+			return;
+		}
+		if (props.autoClearSearchValue) searchQuery.value = "";
+	});
+	function onSearchKeydown(event) {
+		if (event.key !== "Enter" || event.isComposing) return;
+		if (!canCreate.value) return;
+		event.preventDefault();
+		event.stopPropagation();
+		commitCreatedValue(createValue.value);
+	}
+	function onClear(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		emitSelectionDiff(selectedValues.value, []);
+		emit("clear");
+		model.value = isMultiple.value ? [] : "";
+	}
+	function removeTag(value, event) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!isMultiple.value) return;
+		const prev = selectedValues.value;
+		const tokens = prev.filter((item) => item !== value);
+		emitSelectionDiff(prev, tokens);
+		writeTokens(tokens);
+	}
+	function setValue(value) {
+		if (isMultiple.value) {
+			writeTokens(toSelectedTokens(Array.isArray(value) ? value : value !== "" && value != null ? [value] : [], true));
+			return;
+		}
+		writeTokens(toSelectedTokens(value, false));
+	}
+	function restoreTokenValue(token) {
+		return restoreSelectValue(token, normalizedOptions.value);
+	}
+	function optionOrCreate(token) {
+		return optionFromToken(token) ?? {
+			label: fromComboboxValue(token),
+			value: restoreTokenValue(token)
+		};
+	}
+	return {
+		normalizedOptions,
+		resolvedPlaceholder,
+		resolvedSearchPlaceholder,
+		resolvedEmptyText,
+		resolvedLoadingText,
+		isMultiple,
+		isSearchable,
+		labelMap,
+		useVirtual,
+		useManualFilter,
+		displayOptions,
+		createValue,
+		canCreate,
+		createOptionLabel,
+		virtualValues,
+		selectedValues,
+		hasValue,
+		visibleTagTokens,
+		omittedTagCount,
+		omittedTagLabel,
+		omittedTagTitle,
+		singleDisplayLabel,
+		comboboxModel,
+		tokenLabel,
+		truncateTagLabel,
+		optionFromToken,
+		optionOrCreate,
+		isOptionLimited,
+		isTokenDisabled,
+		restoreTokenValue,
+		onSearchKeydown,
+		onClear,
+		removeTag,
+		setValue,
+		resetSearch: () => {
+			searchQuery.value = "";
+		}
+	};
+}
+//#endregion
+export { useRsSelect };

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RsSidebar } from './src/RsSidebar.js';
+export { default as RsSidebarGroup } from './src/RsSidebarGroup.js';
+export { default as RsSidebarItem } from './src/RsSidebarItem.js';

package/dist/components/sidebar/src/RsSidebar.css

@@ -0,0 +1,61 @@
+
+.rs-sidebar[data-v-784314c9] {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--rs-border-subtle);
+  background: color-mix(in srgb, var(--rs-surface) 88%, transparent);
+  color: var(--rs-text);
+}
+.rs-sidebar--sm[data-v-784314c9] {
+  width: 14rem;
+}
+.rs-sidebar--md[data-v-784314c9] {
+  width: 17rem;
+}
+.rs-sidebar--lg[data-v-784314c9] {
+  width: 21rem;
+}
+.rs-sidebar--collapsed[data-v-784314c9] {
+  width: 4rem;
+}
+.rs-sidebar__header[data-v-784314c9],
+.rs-sidebar__footer[data-v-784314c9] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-sm);
+  padding: var(--rs-space-md);
+  border-bottom: 1px solid var(--rs-border-subtle);
+}
+.rs-sidebar__footer[data-v-784314c9] {
+  border-top: 1px solid var(--rs-border-subtle);
+  border-bottom: 0;
+}
+.rs-sidebar__body[data-v-784314c9] {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--rs-space-sm);
+}
+.rs-sidebar__title-wrap[data-v-784314c9] {
+  min-width: 0;
+}
+.rs-sidebar__title[data-v-784314c9],
+.rs-sidebar__subtitle[data-v-784314c9] {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-sidebar__subtitle[data-v-784314c9] {
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-sidebar__collapse[data-v-784314c9] {
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-surface);
+  color: var(--rs-muted);
+  cursor: pointer;
+}