ensis-ui 0.0.0-stage → 3.0.0

package/dist/components/select/src/RsSelect.js

@@ -0,0 +1,8 @@
+import './RsSelect.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RsSelect_vue_vue_type_script_setup_true_lang_default from "./RsSelect.impl.js";
+
+//#region src/components/select/src/RsSelect.vue
+var RsSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSelect_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-be97668a"]]);
+//#endregion
+export { RsSelect_default as default };

package/dist/components/select/src/select-utils.d.ts

@@ -0,0 +1,100 @@
+export type RsSelectValue = string | number;
+/** 过滤 / 回显比对字段名，默认 label；可传 value 或 fieldNames 映射后的键 */
+export type RsSelectOptionFilterProp = string;
+export type RsSelectPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type RsSelectStatus = 'error' | 'warning' | '';
+/** 对齐 Ant Design 5 Select variant；搜索仍在面板内，不改触发器打字。 */
+export type RsSelectVariant = 'outlined' | 'filled' | 'borderless';
+/** 多选折叠：数字为上限；responsive 按触发器宽度收。 */
+export type RsSelectMaxTagCount = number | 'responsive';
+export declare function splitSelectLabelHighlight(label: string, keyword: string): Array<{
+    text: string;
+    highlight: boolean;
+}>;
+/** 自定义过滤（对齐 Ant Design filterOption）。返回 false 则隐藏该项。 */
+export type RsSelectFilterOption = (query: string, option: RsSelectOption) => boolean;
+/** 过滤后排序（对齐 Ant Design filterSort） */
+export type RsSelectFilterSort = (a: RsSelectOption, b: RsSelectOption) => number;
+export interface RsSelectOption {
+    label: string;
+    value: RsSelectValue;
+    disabled?: boolean;
+    /** 原生 title；悬停展示补充说明 */
+    title?: string;
+}
+export interface RsSelectOptionGroup {
+    label: string;
+    options: RsSelectOption[];
+}
+export type RsSelectOptions = ReadonlyArray<RsSelectOption | RsSelectOptionGroup>;
+/** 未正规化的选项（配合 fieldNames 可用 name/id/children 等业务字段） */
+export type RsSelectOptionInput = RsSelectOption | RsSelectOptionGroup | Record<string, unknown>;
+export type RsSelectOptionsInput = ReadonlyArray<RsSelectOptionInput>;
+/** 对齐 Ant Design fieldNames */
+export interface RsSelectFieldNames {
+    label?: string;
+    value?: string;
+    options?: string;
+    disabled?: string;
+    groupLabel?: string;
+}
+export type RsSelectGetPopupContainer = (triggerNode?: HTMLElement) => string | HTMLElement | undefined;
+/** labelInValue 时的 v-model 项（对齐 Ant Design） */
+export interface RsSelectLabeledValue {
+    label: string;
+    value: RsSelectValue;
+}
+export type RsSelectModelValue = RsSelectValue | RsSelectValue[] | RsSelectLabeledValue | RsSelectLabeledValue[] | '';
+/**
+ * 按泛型收窄后的 v-model。
+ * 默认单选、值为 string：宿主 `@update:model-value="(v: string) => void"` 可直接赋值。
+ * `multiple` / `labelInValue` 为字面量 true 时收成数组或 labeled；为 `boolean` 时保留联合。
+ * 组件本体的 defineModel 用 RsSelectModelValue（multiple / labelInValue 是运行时 boolean）。
+ */
+export type RsSelectResolvedModel<Value extends RsSelectValue = string, Multiple extends boolean = false, LabelInValue extends boolean = false> = LabelInValue extends true ? Multiple extends true ? RsSelectLabeledValue[] : Multiple extends false ? RsSelectLabeledValue | '' : RsSelectLabeledValue | RsSelectLabeledValue[] | '' : Multiple extends true ? Value[] : Multiple extends false ? Value | '' : Value | Value[] | '';
+/**
+ * 选项 value 为空串时，对内映射为此哨兵（空串对外仍表示「未选」）。
+ * 读写 v-model 时再还原成 ''。
+ */
+export declare const RS_SELECT_EMPTY_VALUE = "__rs_select_empty__";
+/** 本地过滤：大小写不敏感包含。宿主要做 locale 匹配请传 filterOption。 */
+export declare function selectContains(text: string, search: string): boolean;
+/**
+ * Vue 对泛型 boolean prop 不会按 Boolean 收口。
+ * 模板写 `multiple` 时运行时可能是 ''；个别版本还会落到 attrs 变成 'true' / 'multiple'。
+ * Boolean('') 为 false，会把多选打成单选。
+ */
+export declare function isSelectMultiple(value: unknown): boolean;
+/** 业务 value → ComboboxItem token（空串走哨兵；数字转为十进制字符串） */
+export declare function toComboboxValue(value: RsSelectValue): string;
+/** ComboboxItem token → 业务字符串（仅还原空串哨兵，不恢复 number） */
+export declare function fromComboboxValue(value: string): string;
+export declare function isSelectOptionGroup(item: RsSelectOption | RsSelectOptionGroup): item is RsSelectOptionGroup;
+export declare function flattenSelectOptions(options: RsSelectOptions): RsSelectOption[];
+export declare function findSelectOption(options: RsSelectOptions, token: string): RsSelectOption | undefined;
+/**
+ * Combobox token → 业务 value。
+ * 优先返回 options 里的原始类型（number 0 保持为 0）；手输/未知项保持字符串。
+ */
+export declare function restoreSelectValue(token: string, options: RsSelectOptions): RsSelectValue;
+export declare function restoreSelectValues(tokens: string[], options: RsSelectOptions): RsSelectValue[];
+export declare function buildOptionLabelMap(options: RsSelectOptions): Map<string, string>;
+export declare function buildOptionDisabledMap(options: RsSelectOptions): Map<string, boolean>;
+/**
+ * 按 fieldNames 把业务选项正规化为 { label, value, disabled }。
+ * 默认键即为 label / value / options，既有调用无需改。
+ */
+export declare function normalizeSelectOptions(options: RsSelectOptionsInput, fieldNames?: RsSelectFieldNames): RsSelectOptions;
+/** 触发器 / tag 展示文案，对齐 Ant optionLabelProp */
+export declare function optionDisplayLabel(option: RsSelectOption, prop?: string): string;
+export declare function comboboxBindingToTokens(value: unknown, multiple: boolean): string[];
+export declare function selectModelEntries(value: unknown): unknown[];
+export declare function filterSelectOptions(options: RsSelectOptions, query: string, contains: (text: string, search: string) => boolean, filterOption?: RsSelectFilterOption | boolean, optionFilterProp?: RsSelectOptionFilterProp): RsSelectOptions;
+export declare function flattenSelectValues(options: RsSelectOptions): string[];
+export declare function toSelectedTokens(value: unknown, multiple: boolean): string[];
+export declare function isSelectLabeledValue(value: unknown): value is RsSelectLabeledValue;
+export declare function unwrapSelectEntry(item: unknown): RsSelectValue | null;
+export declare function toLabeledValue(value: RsSelectValue, options: RsSelectOptions): RsSelectLabeledValue;
+export declare function packSelectModel(values: RsSelectValue[], options: RsSelectOptions, multiple: boolean, labelInValue: boolean): RsSelectModelValue;
+export declare function sortSelectOptions(options: RsSelectOptions, sort?: RsSelectFilterSort): RsSelectOptions;
+export declare function splitByTokenSeparators(raw: string, separators: string[]): string[] | null;

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

@@ -0,0 +1,252 @@
+//#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;
+}
+/**
+* 选项 value 为空串时，对内映射为此哨兵（空串对外仍表示「未选」）。
+* 读写 v-model 时再还原成 ''。
+*/
+var RS_SELECT_EMPTY_VALUE = "__rs_select_empty__";
+/** 本地过滤：大小写不敏感包含。宿主要做 locale 匹配请传 filterOption。 */
+function selectContains(text, search) {
+	if (!search) return true;
+	return text.toLowerCase().includes(search.toLowerCase());
+}
+/**
+* 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, selectContains, selectModelEntries, sortSelectOptions, splitByTokenSeparators, splitSelectLabelHighlight, toComboboxValue, toLabeledValue, toSelectedTokens, unwrapSelectEntry };

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

@@ -0,0 +1,82 @@
+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>;
+    pickToken: (token: string) => void;
+    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;
+};