niuma-ui 1.2.6 → 1.2.8

package/dist/components/RsSelect.impl.js

@@ -6,9 +6,9 @@ import { isRsFormItemBoundControl, useRsFormContext, useRsFormField, useRsFormIt
 import { useResolvedRsComponentSize } from "./resolve-size.js";
 import { rsRadiusCss, useResolvedRsRadius } from "./resolve-radius.js";
 import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxTrigger, ComboboxViewport, ComboboxVirtualizer } from "./reka.js";
-import { isSelectOptionGroup, toComboboxValue } from "./select-utils.js";
+import { isSelectOptionGroup, splitSelectLabelHighlight, toComboboxValue } from "./select-utils.js";
 import { useRsSelect } from "./use-rs-select.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useModel, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useModel, watch, withCtx, withModifiers } from "vue";
 //#region src/components/RsSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -53,9 +53,21 @@ var _hoisted_15 = {
 	class: "rs-select__status"
 };
 var _hoisted_16 = { class: "rs-select__item-label" };
-var _hoisted_17 = { class: "rs-select__item-label" };
+var _hoisted_17 = {
+	key: 0,
+	class: "rs-select__mark"
+};
 var _hoisted_18 = { class: "rs-select__item-label" };
 var _hoisted_19 = { class: "rs-select__item-label" };
+var _hoisted_20 = {
+	key: 0,
+	class: "rs-select__mark"
+};
+var _hoisted_21 = { class: "rs-select__item-label" };
+var _hoisted_22 = {
+	key: 0,
+	class: "rs-select__mark"
+};
 var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "RsSelect",
@@ -75,7 +87,10 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			type: Boolean,
 			default: false
 		},
-		multiple: {},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
 		required: {
 			type: Boolean,
 			default: false
@@ -119,9 +134,20 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		},
 		optionFilterProp: { default: "label" },
 		maxTagCount: {},
+		debounce: { default: 0 },
+		variant: { default: "outlined" },
+		autoFocus: {
+			type: Boolean,
+			default: false
+		},
+		dropdownStyle: {},
+		classNames: {},
 		maxTagPlaceholder: {},
 		multipleLimit: {},
-		labelInValue: {},
+		labelInValue: {
+			type: Boolean,
+			default: false
+		},
 		filterSort: {},
 		maxTagTextLength: {},
 		maxTagTooltip: {
@@ -163,13 +189,21 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		"search",
 		"select",
 		"deselect",
-		"clear"
+		"clear",
+		"focus",
+		"blur",
+		"dropdownVisibleChange",
+		"popupScroll"
 	], [
 		"update:modelValue",
 		"update:open",
 		"update:searchValue"
 	]),
 	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* multiple / labelInValue 是运行时 boolean，不能从 prop 推断字面量。
+		* v-model 收完整联合，模板传入 string / number / 数组 / labeled 即可。
+		*/
 		const model = useModel(__props, "modelValue");
 		const open = useModel(__props, "open");
 		const searchQuery = useModel(__props, "searchValue");
@@ -184,7 +218,7 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			name: props.name
 		}));
 		const anchorRef = ref(null);
-		const { resolvedPlaceholder, resolvedSearchPlaceholder, resolvedEmptyText, resolvedLoadingText, 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 } = useRsSelect(props, model, open, searchQuery, emit, t);
+		const { 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 } = useRsSelect(props, model, open, searchQuery, emit, t);
 		const resolvedDisabled = computed(() => props.disabled || formContext?.disabled.value || false);
 		const resolvedSize = useResolvedRsComponentSize(() => props.size);
 		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
@@ -242,21 +276,84 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			clearValidation,
 			validate: runValidate
 		});
+		watch(open, (isOpen) => {
+			emit("dropdownVisibleChange", isOpen);
+		});
+		onMounted(() => {
+			if (!props.autoFocus) return;
+			const el = anchorRef.value;
+			const node = el instanceof HTMLElement ? el : el?.$el;
+			((node instanceof HTMLElement ? node : void 0)?.querySelector?.(".rs-select__trigger"))?.focus();
+		});
+		const responsiveTagCap = ref(null);
+		let tagResize;
+		function measureResponsiveTags() {
+			if (props.maxTagCount !== "responsive" || !isMultiple.value) {
+				responsiveTagCap.value = null;
+				return;
+			}
+			const el = anchorRef.value;
+			const node = el instanceof HTMLElement ? el : el?.$el;
+			const trigger = (node instanceof HTMLElement ? node : void 0)?.querySelector?.(".rs-select__value--multiple");
+			if (!trigger) return;
+			const budget = trigger.clientWidth - 48;
+			if (budget <= 0) return;
+			const tags = Array.from(trigger.querySelectorAll(".rs-select__tag"));
+			if (!tags.length) {
+				responsiveTagCap.value = selectedValues.value.length;
+				return;
+			}
+			let used = 0;
+			let fit = 0;
+			for (const tag of tags) {
+				if (tag.classList.contains("rs-select__tag--rest")) continue;
+				const next = used + tag.offsetWidth + 4;
+				if (next > budget && fit > 0) break;
+				used = next;
+				fit += 1;
+			}
+			responsiveTagCap.value = Math.max(1, fit);
+		}
+		onMounted(() => {
+			if (typeof ResizeObserver === "undefined") return;
+			tagResize = new ResizeObserver(() => measureResponsiveTags());
+			nextTick(() => {
+				const el = anchorRef.value;
+				const node = el instanceof HTMLElement ? el : el?.$el;
+				if (node instanceof HTMLElement) tagResize?.observe(node);
+				measureResponsiveTags();
+			});
+		});
+		onUnmounted(() => tagResize?.disconnect());
+		watch(() => [
+			selectedValues.value.join("\0"),
+			props.maxTagCount,
+			isMultiple.value
+		], () => void nextTick(measureResponsiveTags));
+		const shownTagTokens = computed(() => {
+			if (props.maxTagCount !== "responsive" || responsiveTagCap.value == null) return visibleTagTokens.value;
+			return selectedValues.value.slice(0, responsiveTagCap.value);
+		});
+		const shownOmittedCount = computed(() => props.maxTagCount === "responsive" ? Math.max(0, selectedValues.value.length - shownTagTokens.value.length) : omittedTagCount.value);
+		function highlightParts(label) {
+			return splitSelectLabelHighlight(label, isSearchable.value ? searchQuery.value : "");
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxRoot), {
 				modelValue: unref(comboboxModel),
-				"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => isRef(comboboxModel) ? comboboxModel.value = $event : null),
+				"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => isRef(comboboxModel) ? comboboxModel.value = $event : null),
 				open: open.value,
-				"onUpdate:open": _cache[7] || (_cache[7] = ($event) => open.value = $event),
+				"onUpdate:open": _cache[10] || (_cache[10] = ($event) => open.value = $event),
 				class: normalizeClass(["rs-select", {
-					"rs-select--multiple": __props.multiple,
+					"rs-select--multiple": unref(isMultiple),
 					"rs-select--searchable": unref(isSearchable),
 					"rs-select--creatable": __props.creatable,
 					"rs-select--block": __props.block,
-					[`rs-select--${unref(resolvedSize)}`]: true
+					[`rs-select--${unref(resolvedSize)}`]: true,
+					[`rs-select--${__props.variant}`]: true
 				}]),
 				style: normalizeStyle(rootStyle.value),
-				multiple: __props.multiple,
+				multiple: unref(isMultiple),
 				disabled: resolvedDisabled.value,
 				"ignore-filter": unref(useManualFilter),
 				"reset-search-term-on-select": __props.autoClearSearchValue,
@@ -269,15 +366,17 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				}, {
 					default: withCtx(() => [createVNode(unref(ComboboxTrigger), mergeProps(unref(attrs), {
 						id: __props.id,
-						class: ["rs-select__trigger", {
+						class: ["rs-select__trigger", [__props.classNames?.trigger, {
 							"rs-select__trigger--invalid": isInvalid.value,
 							"rs-select__trigger--warning": isWarning.value
-						}],
-						"aria-invalid": isInvalid.value || void 0
+						}]],
+						"aria-invalid": isInvalid.value || void 0,
+						onFocus: _cache[3] || (_cache[3] = ($event) => emit("focus", $event)),
+						onBlur: _cache[4] || (_cache[4] = ($event) => emit("blur", $event))
 					}), {
 						default: withCtx(() => [
 							_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "prefix", {}, void 0, true)])) : createCommentVNode("", true),
-							__props.multiple ? (openBlock(), createElementBlock("span", _hoisted_2, [unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleTagTokens), (value) => {
+							unref(isMultiple) ? (openBlock(), createElementBlock("span", _hoisted_2, [unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(shownTagTokens.value, (value) => {
 								return openBlock(), createElementBlock("span", {
 									key: value,
 									class: "rs-select__tag"
@@ -295,11 +394,11 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 									name: "x",
 									size: 12
 								})], 40, _hoisted_4)], true)]);
-							}), 128)), unref(omittedTagCount) > 0 ? (openBlock(), createElementBlock("span", {
+							}), 128)), shownOmittedCount.value > 0 ? (openBlock(), createElementBlock("span", {
 								key: 0,
 								class: "rs-select__tag rs-select__tag--rest",
 								title: unref(omittedTagTitle)
-							}, [renderSlot(_ctx.$slots, "maxTagPlaceholder", { omitted: unref(omittedTagCount) }, () => [createTextVNode(toDisplayString(unref(omittedTagLabel)), 1)], true)], 8, _hoisted_5)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(resolvedPlaceholder)), 1))])) : (openBlock(), createElementBlock("span", _hoisted_7, [unref(hasValue) ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(singleDisplayLabel)), 1)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(resolvedPlaceholder)), 1))])),
+							}, [renderSlot(_ctx.$slots, "maxTagPlaceholder", { omitted: shownOmittedCount.value }, () => [createTextVNode(toDisplayString(typeof __props.maxTagPlaceholder === "function" ? __props.maxTagPlaceholder(shownOmittedCount.value) : unref(omittedTagLabel)), 1)], true)], 8, _hoisted_5)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(resolvedPlaceholder)), 1))])) : (openBlock(), createElementBlock("span", _hoisted_7, [unref(hasValue) ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(singleDisplayLabel)), 1)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(resolvedPlaceholder)), 1))])),
 							createElementVNode("span", _hoisted_10, [__props.clearable && unref(hasValue) && !resolvedDisabled.value ? (openBlock(), createElementBlock("button", {
 								key: 0,
 								type: "button",
@@ -325,8 +424,15 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					_: 3
 				}, 512), createVNode(unref(ComboboxPortal), { to: portalTo.value }, {
 					default: withCtx(() => [createVNode(unref(ComboboxContent), {
-						class: normalizeClass(["rs-select__content", [__props.popupClassName, { "rs-select__content--match-trigger": __props.matchTriggerWidth }]]),
-						style: normalizeStyle({ "--rs-select-list-height": `${__props.listHeight}px` }),
+						class: normalizeClass(["rs-select__content", [
+							__props.popupClassName,
+							__props.classNames?.popup,
+							{ "rs-select__content--match-trigger": __props.matchTriggerWidth }
+						]]),
+						style: normalizeStyle({
+							"--rs-select-list-height": `${__props.listHeight}px`,
+							...__props.dropdownStyle
+						}),
 						align: "start",
 						side: __props.placement,
 						"side-offset": 4,
@@ -336,7 +442,7 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
 								key: 0,
 								class: "rs-select__panel-header",
-								onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["prevent"]))
+								onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
 							}, [renderSlot(_ctx.$slots, "header", {}, void 0, true)], 32)) : createCommentVNode("", true),
 							unref(isSearchable) ? (openBlock(), createElementBlock("div", _hoisted_13, [createElementVNode("div", _hoisted_14, [createVNode(RsIcon_default, {
 								name: "search",
@@ -345,7 +451,7 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								"aria-hidden": "true"
 							}), createVNode(unref(ComboboxInput), {
 								modelValue: searchQuery.value,
-								"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => searchQuery.value = $event),
+								"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => searchQuery.value = $event),
 								class: "rs-select__search",
 								placeholder: unref(resolvedSearchPlaceholder),
 								"auto-focus": "",
@@ -363,7 +469,10 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(resolvedEmptyText)), 1)], true)]),
 								_: 3
 							})) : createCommentVNode("", true),
-							createVNode(unref(ComboboxViewport), { class: "rs-select__viewport" }, {
+							createVNode(unref(ComboboxViewport), {
+								class: "rs-select__viewport",
+								onScroll: _cache[7] || (_cache[7] = ($event) => emit("popupScroll", $event))
+							}, {
 								default: withCtx(() => [unref(useVirtual) ? (openBlock(), createBlock(unref(ComboboxVirtualizer), {
 									key: 0,
 									options: unref(virtualValues),
@@ -380,7 +489,9 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 										default: withCtx(() => [createElementVNode("span", _hoisted_16, [renderSlot(_ctx.$slots, "option", {
 											option: unref(optionOrCreate)(String(option)),
 											selected: unref(selectedValues).includes(String(option))
-										}, () => [createTextVNode(toDisplayString(unref(canCreate) && String(option) === unref(createValue) ? unref(createOptionLabel) : unref(labelMap).get(String(option)) ?? String(option)), 1)], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+										}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(unref(canCreate) && String(option) === unref(createValue) ? unref(createOptionLabel) : unref(labelMap).get(String(option)) ?? String(option)), (part, i) => {
+											return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_17, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+										}), 128))], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
 											default: withCtx(() => [createVNode(RsIcon_default, {
 												name: "check",
 												size: 14
@@ -402,7 +513,7 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 									"text-value": unref(createValue),
 									class: "rs-select__item rs-select__item--create"
 								}, {
-									default: withCtx(() => [createElementVNode("span", _hoisted_17, toDisplayString(unref(createOptionLabel)), 1), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+									default: withCtx(() => [createElementVNode("span", _hoisted_18, toDisplayString(unref(createOptionLabel)), 1), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
 										default: withCtx(() => [createVNode(RsIcon_default, {
 											name: "check",
 											size: 14
@@ -427,10 +538,12 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 												class: "rs-select__item",
 												title: opt.title
 											}, {
-												default: withCtx(() => [createElementVNode("span", _hoisted_18, [renderSlot(_ctx.$slots, "option", {
+												default: withCtx(() => [createElementVNode("span", _hoisted_19, [renderSlot(_ctx.$slots, "option", {
 													option: opt,
 													selected: unref(selectedValues).includes(unref(toComboboxValue)(opt.value))
-												}, () => [createTextVNode(toDisplayString(opt.label), 1)], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+												}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(opt.label), (part, i) => {
+													return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_20, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+												}), 128))], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
 													default: withCtx(() => [createVNode(RsIcon_default, {
 														name: "check",
 														size: 14
@@ -454,10 +567,12 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 										class: "rs-select__item",
 										title: entry.title
 									}, {
-										default: withCtx(() => [createElementVNode("span", _hoisted_19, [renderSlot(_ctx.$slots, "option", {
+										default: withCtx(() => [createElementVNode("span", _hoisted_21, [renderSlot(_ctx.$slots, "option", {
 											option: entry,
 											selected: unref(selectedValues).includes(unref(toComboboxValue)(entry.value))
-										}, () => [createTextVNode(toDisplayString(entry.label), 1)], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+										}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(entry.label), (part, i) => {
+											return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_22, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+										}), 128))], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
 											default: withCtx(() => [createVNode(RsIcon_default, {
 												name: "check",
 												size: 14
@@ -477,7 +592,7 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
 								key: 4,
 								class: "rs-select__panel-footer",
-								onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
+								onMousedown: _cache[8] || (_cache[8] = withModifiers(() => {}, ["prevent"]))
 							}, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 32)) : createCommentVNode("", true)
 						], true)]),
 						_: 3

package/dist/components/RsSelect.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
 import RsSelect_vue_vue_type_script_setup_true_lang_default from "./RsSelect.impl.js";
 
 //#region src/components/RsSelect.vue
-var RsSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSelect_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-48ee70c4"]]);
+var RsSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSelect_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-956c54dc"]]);
 //#endregion
 export { RsSelect_default as default };

package/dist/components/RsTabs.d.ts

@@ -74,12 +74,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     overflow: RsTabsOverflow | false;
     closable: boolean;
     borderless: boolean;
+    draggable: boolean;
     panelless: boolean;
     contentGap: RsTabsContentGap;
     justify: RsTabsJustify;
     addable: boolean;
     renamable: boolean;
-    draggable: boolean;
     contextMenu: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/RsToaster.d.ts

@@ -9,9 +9,9 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     gap: number;
     position: RsToastPosition;
+    expand: boolean;
     closeButton: boolean;
     richColors: boolean;
-    expand: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/RsTree.d.ts

@@ -77,10 +77,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     check: (keys: string[], halfCheckedKeys: string[], node: RsTreeNode, key: string) => any;
     "update:modelValue": (value: string | string[]) => any;
-    expand: (key: string, expanded: boolean) => any;
     "node-click": (node: RsTreeNode, key: string) => any;
     "node-dblclick": (node: RsTreeNode, key: string) => any;
     "node-contextmenu": (node: RsTreeNode, key: string, event: MouseEvent) => any;
+    expand: (key: string, expanded: boolean) => any;
     "node-drop": (dragKey: string, dropKey: string, position: RsTreeDropPosition) => any;
     "update:expandedKeys": (value: string[] | undefined) => any;
     "update:checkedKeys": (value: string[] | undefined) => any;
@@ -88,10 +88,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onCheck?: ((keys: string[], halfCheckedKeys: string[], node: RsTreeNode, key: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
-    onExpand?: ((key: string, expanded: boolean) => any) | undefined;
     "onNode-click"?: ((node: RsTreeNode, key: string) => any) | undefined;
     "onNode-dblclick"?: ((node: RsTreeNode, key: string) => any) | undefined;
     "onNode-contextmenu"?: ((node: RsTreeNode, key: string, event: MouseEvent) => any) | undefined;
+    onExpand?: ((key: string, expanded: boolean) => any) | undefined;
     "onNode-drop"?: ((dragKey: string, dropKey: string, position: RsTreeDropPosition) => any) | undefined;
     "onUpdate:expandedKeys"?: ((value: string[] | undefined) => any) | undefined;
     "onUpdate:checkedKeys"?: ((value: string[] | undefined) => any) | undefined;
@@ -105,8 +105,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     virtualThreshold: number;
     highlight: boolean;
     overscan: number;
-    draggable: boolean;
-    lazy: boolean;
     checkable: boolean;
     checkStrictly: boolean;
     onlyCheckLeaf: boolean;
@@ -119,6 +117,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     showLine: boolean;
     accordion: boolean;
     autoExpandParent: boolean;
+    lazy: boolean;
+    draggable: boolean;
     dragTrigger: RsTreeDragTrigger;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/RsTree.impl.js

@@ -1,8 +1,8 @@
 import { useRsI18n } from "../composables/useRsI18n.js";
 import RsIcon_default from "./RsIcon.js";
 import RsEmpty_default from "./RsEmpty.js";
-import { isVirtualListFillHeight, parseVirtualListHeightPx, resolveVirtualListHeight } from "./virtual-list-utils.js";
 import { buildTreeNodeIndex, collectExpandableKeys, collectHalfCheckedKeys, filterTreeNodes, flattenVisibleTreeNodes, getTreeChildren, getTreeKey, getTreeLabel, hasTreeChildren, isTreeAncestorKey, isTreeCheckboxDisabled, isTreeNodeDisabled, isTreeNodeLoading, resolveAccordionExpandedKeys, resolveTreeCheckState, resolveTreeFieldNames, resolveTreeFocusKey, resolveTreeIndent, resolveTreeRowHeight, resolveTreeVirtualEnabled, shouldShowTreeCheckbox, sliceVirtualTreeNodes, splitTreeLabelHighlight, toggleTreeCheck } from "./tree-utils.js";
+import { isVirtualListFillHeight, parseVirtualListHeightPx, resolveVirtualListHeight } from "./virtual-list-utils.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, vShow, watch, withDirectives, withModifiers } from "vue";
 //#region src/components/RsTree.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label", "aria-multiselectable"];

package/dist/components/RsTreeSelect.css

@@ -0,0 +1,60 @@
+
+.rs-tree-select[data-v-a057dd37] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 12rem;
+  height: var(--rs-control-height-md);
+  padding: 0 var(--rs-space-md);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  cursor: pointer;
+}
+.rs-tree-select--sm[data-v-a057dd37] {
+  height: var(--rs-control-height-sm);
+}
+.rs-tree-select--lg[data-v-a057dd37] {
+  height: var(--rs-control-height-lg);
+}
+.rs-tree-select--disabled[data-v-a057dd37] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.rs-tree-select__placeholder[data-v-a057dd37] {
+  flex: 1;
+  color: var(--rs-muted);
+  text-align: left;
+}
+.rs-tree-select__value[data-v-a057dd37] {
+  flex: 1;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-tree-select__clear[data-v-a057dd37] {
+  border: 0;
+  background: transparent;
+  color: var(--rs-muted);
+  cursor: pointer;
+}
+.rs-tree-select__panel[data-v-a057dd37] {
+  max-height: 18rem;
+  padding: var(--rs-space-xs);
+  overflow: auto;
+}
+.rs-tree-select__search[data-v-a057dd37] {
+  box-sizing: border-box;
+  width: 100%;
+  margin-bottom: var(--rs-space-xs);
+  padding: var(--rs-space-xs) var(--rs-space-sm);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-radius-xs);
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+}

package/dist/components/RsTreeSelect.d.ts

@@ -0,0 +1,33 @@
+import type { RsComponentSize } from '../theme/types';
+import { type RsTreeFieldNames, type RsTreeNode } from './tree-utils';
+type __VLS_Props = {
+    treeData: RsTreeNode[];
+    fieldNames?: RsTreeFieldNames;
+    placeholder?: string;
+    disabled?: boolean;
+    allowClear?: boolean;
+    multiple?: boolean;
+    checkable?: boolean;
+    searchable?: boolean;
+    size?: RsComponentSize;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | string[];
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    multiple: boolean;
+    searchable: boolean;
+    allowClear: boolean;
+    checkable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/RsTreeSelect.impl.js

@@ -0,0 +1,145 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
+import RsIcon_default from "./RsIcon.js";
+import { useResolvedRsComponentSize } from "./resolve-size.js";
+import RsPopover_default from "./RsPopover.js";
+import { buildTreeNodeIndex, getTreeLabel, resolveTreeFieldNames } from "./tree-utils.js";
+import RsTree_default from "./RsTree.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, ref, toDisplayString, unref, useModel, vModelText, withCtx, withDirectives, withModifiers } from "vue";
+//#region src/components/RsTreeSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["disabled"];
+var _hoisted_2 = {
+	key: 0,
+	class: "rs-tree-select__value"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "rs-tree-select__placeholder"
+};
+var _hoisted_4 = ["aria-label"];
+var _hoisted_5 = ["placeholder"];
+var RsTreeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsTreeSelect",
+	__name: "RsTreeSelect",
+	props: /*@__PURE__*/ mergeModels({
+		treeData: {},
+		fieldNames: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		checkable: {
+			type: Boolean,
+			default: false
+		},
+		searchable: {
+			type: Boolean,
+			default: false
+		},
+		size: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:open"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const open = useModel(__props, "open");
+		const props = __props;
+		const { t } = useRsI18n();
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const filter = ref("");
+		const names = computed(() => resolveTreeFieldNames(props.fieldNames));
+		const index = computed(() => buildTreeNodeIndex(props.treeData, names.value));
+		const selectedKeys = computed(() => {
+			if (Array.isArray(model.value)) return model.value.map(String);
+			return model.value === "" || model.value == null ? [] : [String(model.value)];
+		});
+		const display = computed(() => {
+			return selectedKeys.value.map((key) => {
+				const entry = index.value.get(key);
+				return entry ? getTreeLabel(entry.node, names.value) : key;
+			}).join(", ");
+		});
+		function onTreeUpdate(value) {
+			model.value = props.multiple || props.checkable ? value : value;
+			if (!props.multiple && !props.checkable) open.value = false;
+		}
+		function onClear() {
+			model.value = props.multiple || props.checkable ? [] : "";
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RsPopover_default, {
+				open: open.value,
+				"onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event),
+				side: "bottom",
+				align: "start",
+				width: "md"
+			}, {
+				content: withCtx(() => [createElementVNode("div", {
+					class: "rs-tree-select__panel",
+					onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
+				}, [__props.searchable ? withDirectives((openBlock(), createElementBlock("input", {
+					key: 0,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filter.value = $event),
+					class: "rs-tree-select__search",
+					placeholder: unref(t)("select.searchPlaceholder")
+				}, null, 8, _hoisted_5)), [[vModelText, filter.value]]) : createCommentVNode("", true), createVNode(RsTree_default, {
+					"model-value": __props.multiple || __props.checkable ? selectedKeys.value : selectedKeys.value[0] ?? "",
+					nodes: __props.treeData,
+					"field-names": __props.fieldNames,
+					multiple: __props.multiple,
+					checkable: __props.checkable,
+					filter: filter.value,
+					highlight: "",
+					"default-expand-all": "",
+					"onUpdate:modelValue": onTreeUpdate
+				}, null, 8, [
+					"model-value",
+					"nodes",
+					"field-names",
+					"multiple",
+					"checkable",
+					"filter"
+				])], 32)]),
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					class: normalizeClass(["rs-tree-select", [`rs-tree-select--${unref(resolvedSize)}`, { "rs-tree-select--disabled": __props.disabled }]]),
+					disabled: __props.disabled
+				}, [
+					display.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(display.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.placeholder ?? unref(t)("select.placeholder")), 1)),
+					__props.allowClear && display.value && !__props.disabled ? (openBlock(), createElementBlock("button", {
+						key: 2,
+						type: "button",
+						class: "rs-tree-select__clear",
+						"aria-label": unref(t)("select.clear"),
+						onClick: withModifiers(onClear, ["stop"])
+					}, [createVNode(RsIcon_default, {
+						name: "x",
+						size: 12
+					})], 8, _hoisted_4)) : createCommentVNode("", true),
+					createVNode(RsIcon_default, {
+						name: "chevron-down",
+						size: 14
+					})
+				], 10, _hoisted_1)]),
+				_: 1
+			}, 8, ["open"]);
+		};
+	}
+});
+//#endregion
+export { RsTreeSelect_vue_vue_type_script_setup_true_lang_default as default };