ensis-ui 0.0.0-stage → 3.0.0

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

@@ -0,0 +1,1037 @@
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { buildLocalInputRules, runFormFieldRules } from "../../form/src/form-rules.js";
+import { isRsFormItemBoundControl, useRsFormContext, useRsFormField, useRsFormItemContext } from "../../form/src/form-utils.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";
+import { placeAnchoredPopup, stepEnabledIndex } from "../../_shared/src/overlay-utils.js";
+import { isSelectOptionGroup, splitSelectLabelHighlight, toComboboxValue } from "./select-utils.js";
+import { useRsSelect } from "./use-rs-select.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, vModelText, watch, withDirectives, withModifiers } from "vue";
+//#region src/components/select/src/RsSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["name", "value"];
+var _hoisted_2 = ["name", "value"];
+var _hoisted_3 = [
+	"id",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-invalid",
+	"aria-disabled",
+	"disabled",
+	"data-disabled",
+	"data-state"
+];
+var _hoisted_4 = {
+	key: 0,
+	class: "rs-select__prefix"
+};
+var _hoisted_5 = {
+	key: 1,
+	class: "rs-select__value rs-select__value--multiple"
+};
+var _hoisted_6 = { class: "rs-select__tag-label" };
+var _hoisted_7 = ["aria-label", "onClick"];
+var _hoisted_8 = ["title"];
+var _hoisted_9 = {
+	key: 1,
+	class: "rs-select__placeholder"
+};
+var _hoisted_10 = {
+	key: 2,
+	class: "rs-select__value"
+};
+var _hoisted_11 = {
+	key: 0,
+	class: "rs-select__single-label"
+};
+var _hoisted_12 = {
+	key: 1,
+	class: "rs-select__placeholder"
+};
+var _hoisted_13 = { class: "rs-select__actions" };
+var _hoisted_14 = ["aria-label"];
+var _hoisted_15 = {
+	key: 1,
+	class: "rs-select__suffix"
+};
+var _hoisted_16 = [
+	"id",
+	"data-placement",
+	"data-rs-theme"
+];
+var _hoisted_17 = {
+	key: 0,
+	class: "rs-select__panel-header"
+};
+var _hoisted_18 = {
+	key: 1,
+	class: "rs-select__search-bar"
+};
+var _hoisted_19 = { class: "rs-select__search-wrap" };
+var _hoisted_20 = [
+	"placeholder",
+	"aria-label",
+	"aria-controls",
+	"aria-activedescendant"
+];
+var _hoisted_21 = {
+	key: 2,
+	class: "rs-select__status"
+};
+var _hoisted_22 = {
+	key: 3,
+	class: "rs-select__empty",
+	role: "status"
+};
+var _hoisted_23 = ["aria-multiselectable", "aria-label"];
+var _hoisted_24 = [
+	"id",
+	"data-value",
+	"data-highlighted",
+	"data-state",
+	"data-disabled",
+	"aria-selected",
+	"aria-disabled",
+	"title",
+	"onClick"
+];
+var _hoisted_25 = { class: "rs-select__item-label" };
+var _hoisted_26 = {
+	key: 0,
+	class: "rs-select__mark"
+};
+var _hoisted_27 = {
+	key: 0,
+	class: "rs-select__item-check"
+};
+var _hoisted_28 = [
+	"id",
+	"data-value",
+	"data-highlighted",
+	"data-state",
+	"aria-selected"
+];
+var _hoisted_29 = { class: "rs-select__item-label" };
+var _hoisted_30 = {
+	key: 0,
+	class: "rs-select__item-check"
+};
+var _hoisted_31 = ["aria-label"];
+var _hoisted_32 = { class: "rs-select__group-label" };
+var _hoisted_33 = [
+	"id",
+	"data-value",
+	"data-highlighted",
+	"data-state",
+	"data-disabled",
+	"aria-selected",
+	"aria-disabled",
+	"title",
+	"onClick"
+];
+var _hoisted_34 = { class: "rs-select__item-label" };
+var _hoisted_35 = {
+	key: 0,
+	class: "rs-select__mark"
+};
+var _hoisted_36 = {
+	key: 0,
+	class: "rs-select__item-check"
+};
+var _hoisted_37 = [
+	"id",
+	"data-value",
+	"data-highlighted",
+	"data-state",
+	"data-disabled",
+	"aria-selected",
+	"aria-disabled",
+	"title",
+	"onClick"
+];
+var _hoisted_38 = { class: "rs-select__item-label" };
+var _hoisted_39 = {
+	key: 0,
+	class: "rs-select__mark"
+};
+var _hoisted_40 = {
+	key: 0,
+	class: "rs-select__item-check"
+};
+var _hoisted_41 = {
+	key: 5,
+	class: "rs-select__panel-footer"
+};
+var ITEM_ESTIMATE = 36;
+var VIRTUAL_OVERSCAN = 6;
+var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsSelect",
+	inheritAttrs: false,
+	__name: "RsSelect",
+	props: /*@__PURE__*/ mergeModels({
+		options: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		id: {},
+		searchable: {
+			type: Boolean,
+			default: false
+		},
+		creatable: {
+			type: Boolean,
+			default: false
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		virtual: {
+			type: Boolean,
+			default: false
+		},
+		virtualThreshold: { default: 50 },
+		remote: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		searchPlaceholder: {},
+		emptyText: {},
+		loadingText: {},
+		size: {},
+		radius: {},
+		matchTriggerWidth: {
+			type: Boolean,
+			default: false
+		},
+		block: {
+			type: Boolean,
+			default: false
+		},
+		invalid: { type: Boolean },
+		showValidateMessage: { type: Boolean },
+		filterOption: {
+			type: [Function, Boolean],
+			default: true
+		},
+		optionFilterProp: { default: "label" },
+		maxTagCount: {},
+		debounce: { default: 0 },
+		variant: { default: "outlined" },
+		autoFocus: {
+			type: Boolean,
+			default: false
+		},
+		dropdownStyle: {},
+		classNames: {},
+		maxTagPlaceholder: {},
+		multipleLimit: {},
+		labelInValue: {
+			type: Boolean,
+			default: false
+		},
+		filterSort: {},
+		maxTagTextLength: {},
+		maxTagTooltip: {
+			type: Boolean,
+			default: true
+		},
+		tokenSeparators: {},
+		autoClearSearchValue: {
+			type: Boolean,
+			default: true
+		},
+		fillSearchWithValue: {
+			type: Boolean,
+			default: false
+		},
+		showArrow: {
+			type: Boolean,
+			default: true
+		},
+		listHeight: { default: 256 },
+		placement: { default: "bottom" },
+		popupClassName: {},
+		status: { default: "" },
+		fieldNames: {},
+		optionLabelProp: { default: "label" },
+		getPopupContainer: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {},
+		"searchValue": { default: "" },
+		"searchValueModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"search",
+		"select",
+		"deselect",
+		"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");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const attrs = useAttrs();
+		const listId = useId();
+		const formContext = useRsFormContext();
+		const formItem = useRsFormItemContext();
+		const boundToItem = computed(() => isRsFormItemBoundControl(formItem, {
+			id: props.id,
+			name: props.name
+		}));
+		const rootRef = useTemplateRef("rootRef");
+		const triggerRef = useTemplateRef("triggerRef");
+		const contentRef = useTemplateRef("contentRef");
+		const searchInputRef = useTemplateRef("searchInputRef");
+		const viewportRef = useTemplateRef("viewportRef");
+		const { resolvedPlaceholder, resolvedSearchPlaceholder, resolvedEmptyText, resolvedLoadingText, isMultiple, isSearchable, labelMap, useVirtual, displayOptions, createValue, canCreate, createOptionLabel, virtualValues, selectedValues, hasValue, visibleTagTokens, omittedTagCount, omittedTagLabel, omittedTagTitle, singleDisplayLabel, pickToken, 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");
+		const triggerIconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const rootStyle = computed(() => ({
+			"--rs-select-radius": rsRadiusCss(resolvedRadius.value),
+			"--rs-select-list-height": `${props.listHeight}px`
+		}));
+		const portalTo = computed(() => {
+			if (!props.getPopupContainer) return "body";
+			const el = triggerRef.value ?? void 0;
+			return props.getPopupContainer(el) ?? "body";
+		});
+		const autoMessage = ref("");
+		const isInvalid = computed(() => Boolean(props.invalid || props.status === "error" || boundToItem.value && formItem?.invalid.value || autoMessage.value));
+		const isWarning = computed(() => props.status === "warning" && !isInvalid.value);
+		function clearValidation() {
+			resetSearch();
+			autoMessage.value = "";
+		}
+		async function runValidate(trigger = "submit") {
+			const formRules = formContext?.getFieldRules(props.name) ?? [];
+			const localRules = buildLocalInputRules({ required: props.required });
+			const rules = [...formRules, ...localRules];
+			if (!rules.length) {
+				autoMessage.value = "";
+				return {
+					valid: true,
+					name: props.name
+				};
+			}
+			const result = await runFormFieldRules(model.value, rules, { trigger });
+			autoMessage.value = result.message ?? "";
+			return {
+				valid: result.valid,
+				message: result.message,
+				name: props.name
+			};
+		}
+		useRsFormField(() => ({
+			get name() {
+				return props.name;
+			},
+			getValue: () => model.value,
+			setValue,
+			validate: (trigger) => runValidate(trigger ?? "submit"),
+			clearValidation,
+			setError: (message) => {
+				autoMessage.value = message;
+			}
+		}));
+		function focus() {
+			triggerRef.value?.focus();
+		}
+		function blur() {
+			triggerRef.value?.blur();
+			searchInputRef.value?.blur();
+		}
+		__expose({
+			setValue,
+			clearValidation,
+			validate: runValidate,
+			focus,
+			blur
+		});
+		const listRows = computed(() => {
+			const rows = [];
+			if (canCreate.value) rows.push({
+				token: createValue.value,
+				label: createOptionLabel.value,
+				disabled: false,
+				isCreate: true
+			});
+			for (const entry of displayOptions.value) if (isSelectOptionGroup(entry)) for (const opt of entry.options) rows.push({
+				token: toComboboxValue(opt.value),
+				label: opt.label,
+				disabled: Boolean(opt.disabled || isOptionLimited(opt)),
+				isCreate: false,
+				option: opt,
+				title: opt.title
+			});
+			else rows.push({
+				token: toComboboxValue(entry.value),
+				label: entry.label,
+				disabled: Boolean(entry.disabled || isOptionLimited(entry)),
+				isCreate: false,
+				option: entry,
+				title: entry.title
+			});
+			return rows;
+		});
+		const highlight = ref(0);
+		const virtualStart = ref(0);
+		const popup = ref({
+			top: 0,
+			left: 0,
+			width: 0,
+			minWidth: 0,
+			placement: "bottom"
+		});
+		/** 面板挂到 body 后仍跟触发器最近的 data-rs-theme（深色岛 / 混主题页）。 */
+		const panelTheme = ref();
+		function syncPanelTheme() {
+			const el = triggerRef.value ?? rootRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				return;
+			}
+			panelTheme.value = el.closest("[data-rs-theme]")?.getAttribute("data-rs-theme") ?? void 0;
+		}
+		const highlightedToken = computed(() => listRows.value[highlight.value]?.token);
+		const activeOptionId = computed(() => open.value && highlightedToken.value ? `${listId}-${highlightedToken.value}` : void 0);
+		const virtualSlice = computed(() => {
+			const all = virtualValues.value;
+			if (!useVirtual.value) return {
+				items: all,
+				padTop: 0,
+				padBottom: 0,
+				totalH: all.length * ITEM_ESTIMATE
+			};
+			const start = Math.max(0, virtualStart.value - VIRTUAL_OVERSCAN);
+			const viewCount = Math.ceil(props.listHeight / ITEM_ESTIMATE) + VIRTUAL_OVERSCAN * 2;
+			const items = all.slice(start, start + viewCount);
+			return {
+				items,
+				padTop: start * ITEM_ESTIMATE,
+				padBottom: Math.max(0, (all.length - start - items.length) * ITEM_ESTIMATE),
+				totalH: all.length * ITEM_ESTIMATE
+			};
+		});
+		const emptyVisible = computed(() => !props.loading && !canCreate.value && displayOptions.value.length === 0);
+		function placePopup() {
+			const trigger = triggerRef.value;
+			const content = contentRef.value;
+			if (!trigger || !open.value) return;
+			const anchor = trigger.getBoundingClientRect();
+			const measured = content?.getBoundingClientRect();
+			const height = measured?.height || Math.min(props.listHeight, 320);
+			const prefWidth = props.matchTriggerWidth ? anchor.width : Math.max(anchor.width, measured?.width || anchor.width);
+			const gap = 4;
+			const vw = window.innerWidth;
+			const vh = window.innerHeight;
+			if (props.placement === "left" || props.placement === "right") {
+				const width = Math.min(prefWidth, Math.max(0, vw - gap * 2));
+				const leftPos = anchor.left - width - gap;
+				const rightPos = anchor.right + gap;
+				let side = props.placement;
+				let left = side === "left" ? leftPos : rightPos;
+				if (side === "left" && leftPos < gap && rightPos + width <= vw - gap) {
+					side = "right";
+					left = rightPos;
+				} else if (side === "right" && rightPos + width > vw - gap && leftPos >= gap) {
+					side = "left";
+					left = leftPos;
+				}
+				left = Math.min(Math.max(gap, left), Math.max(gap, vw - width - gap));
+				const top = Math.min(Math.max(gap, anchor.top), Math.max(gap, vh - height - gap));
+				popup.value = {
+					top,
+					left,
+					width,
+					minWidth: anchor.width,
+					placement: side
+				};
+				return;
+			}
+			const box = placeAnchoredPopup({
+				top: anchor.top,
+				left: anchor.left,
+				height: anchor.height,
+				width: anchor.width
+			}, {
+				width: prefWidth,
+				height
+			}, {
+				width: vw,
+				height: vh
+			}, gap);
+			if (props.placement === "top") {
+				const above = anchor.top - height - gap;
+				if (above >= gap) {
+					popup.value = {
+						...box,
+						top: above,
+						minWidth: anchor.width,
+						placement: "top"
+					};
+					return;
+				}
+			}
+			popup.value = {
+				...box,
+				minWidth: anchor.width
+			};
+		}
+		let frame = 0;
+		let overlayBound = false;
+		function requestPlace() {
+			if (typeof window === "undefined") return;
+			if (frame) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				placePopup();
+			});
+		}
+		function syncHighlight() {
+			const rows = listRows.value;
+			const selected = rows.findIndex((row) => selectedValues.value.includes(row.token) && !row.disabled);
+			highlight.value = selected >= 0 ? selected : stepEnabledIndex(rows, -1, 1);
+		}
+		function escapeToken(token) {
+			if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(token);
+			return token.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+		}
+		function scrollHighlightIntoView() {
+			const token = highlightedToken.value;
+			if (!token) return;
+			const el = contentRef.value?.querySelector(`[data-value="${escapeToken(token)}"]`);
+			if (el && "scrollIntoView" in el) el.scrollIntoView({ block: "nearest" });
+		}
+		function toggleOpen() {
+			if (resolvedDisabled.value) return;
+			open.value = !open.value;
+		}
+		function onDocPointerDown(event) {
+			const target = event.target;
+			if (!target) return;
+			if (rootRef.value?.contains(target)) return;
+			if (contentRef.value?.contains(target)) return;
+			open.value = false;
+		}
+		function onWindowChange() {
+			if (open.value) requestPlace();
+		}
+		function attachOverlay() {
+			if (overlayBound || typeof window === "undefined") return;
+			overlayBound = true;
+			if (typeof document !== "undefined") document.addEventListener("pointerdown", onDocPointerDown);
+			window.addEventListener("resize", onWindowChange);
+			window.addEventListener("scroll", onWindowChange, true);
+		}
+		function detachOverlay() {
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			if (!overlayBound) return;
+			overlayBound = false;
+			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocPointerDown);
+			if (typeof window !== "undefined") {
+				window.removeEventListener("resize", onWindowChange);
+				window.removeEventListener("scroll", onWindowChange, true);
+			}
+		}
+		function moveHighlight(delta) {
+			highlight.value = stepEnabledIndex(listRows.value, highlight.value, delta);
+			scrollHighlightIntoView();
+		}
+		function commitHighlight() {
+			const row = listRows.value[highlight.value];
+			if (!row || row.disabled) return;
+			pickToken(row.token);
+		}
+		function onTriggerKeydown(event) {
+			if (resolvedDisabled.value || event.isComposing) return;
+			if (event.key === "Escape") {
+				if (!open.value) return;
+				event.preventDefault();
+				open.value = false;
+				return;
+			}
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				if (!open.value) {
+					open.value = true;
+					return;
+				}
+				moveHighlight(1);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				if (!open.value) {
+					open.value = true;
+					return;
+				}
+				moveHighlight(-1);
+				return;
+			}
+			if (event.key === "Home" && open.value) {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(listRows.value, -1, 1);
+				scrollHighlightIntoView();
+				return;
+			}
+			if (event.key === "End" && open.value) {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(listRows.value, listRows.value.length, -1);
+				scrollHighlightIntoView();
+				return;
+			}
+			if (event.key === "Enter" && open.value) {
+				event.preventDefault();
+				commitHighlight();
+				return;
+			}
+			if (isSearchable.value) return;
+			if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+			onTypeahead(event.key);
+		}
+		function onPanelSearchKeydown(event) {
+			if (event.isComposing) return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				open.value = false;
+				triggerRef.value?.focus();
+				return;
+			}
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				moveHighlight(1);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				moveHighlight(-1);
+				return;
+			}
+			if (event.key === "Home") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(listRows.value, -1, 1);
+				scrollHighlightIntoView();
+				return;
+			}
+			if (event.key === "End") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(listRows.value, listRows.value.length, -1);
+				scrollHighlightIntoView();
+				return;
+			}
+			if (event.key === "Enter") {
+				event.preventDefault();
+				if (canCreate.value) {
+					onSearchKeydown(event);
+					return;
+				}
+				commitHighlight();
+			}
+		}
+		let typeahead = "";
+		let typeaheadTimer;
+		function onTypeahead(key) {
+			typeahead += key.toLowerCase();
+			if (typeaheadTimer) clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeahead = "";
+				typeaheadTimer = void 0;
+			}, 500);
+			if (!open.value) open.value = true;
+			const idx = listRows.value.findIndex((row) => !row.disabled && row.label.toLowerCase().startsWith(typeahead));
+			if (idx >= 0) highlight.value = idx;
+		}
+		function onViewportScroll(event) {
+			emit("popupScroll", event);
+			if (!useVirtual.value) return;
+			const el = event.target;
+			virtualStart.value = Math.floor(el.scrollTop / ITEM_ESTIMATE);
+		}
+		function onViewportPointerOver(event) {
+			const raw = event.target;
+			if (!(raw instanceof Element)) return;
+			const item = raw.closest(".rs-select__item");
+			if (!item || !viewportRef.value?.contains(item)) return;
+			if (item.hasAttribute("data-disabled")) return;
+			const token = item.getAttribute("data-value");
+			if (!token) return;
+			const idx = listRows.value.findIndex((row) => row.token === token);
+			if (idx >= 0) highlight.value = idx;
+		}
+		function itemState(token) {
+			return selectedValues.value.includes(token) ? "checked" : void 0;
+		}
+		watch(open, (isOpen) => {
+			emit("dropdownVisibleChange", isOpen);
+			if (isOpen) {
+				virtualStart.value = 0;
+				syncPanelTheme();
+				syncHighlight();
+				attachOverlay();
+				nextTick(() => {
+					requestPlace();
+					if (isSearchable.value) searchInputRef.value?.focus();
+					else scrollHighlightIntoView();
+				});
+				return;
+			}
+			detachOverlay();
+		});
+		watch(listRows, () => {
+			if (!open.value) return;
+			syncHighlight();
+			requestPlace();
+		});
+		onMounted(() => {
+			if (props.autoFocus) triggerRef.value?.focus();
+		});
+		const responsiveTagCap = ref(null);
+		let tagResize;
+		function measureResponsiveTags() {
+			if (props.maxTagCount !== "responsive" || !isMultiple.value) {
+				responsiveTagCap.value = null;
+				return;
+			}
+			const row = triggerRef.value?.querySelector(".rs-select__value--multiple");
+			if (!row) return;
+			const budget = row.clientWidth - 48;
+			if (budget <= 0) return;
+			const tags = Array.from(row.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(() => {
+				if (triggerRef.value) tagResize?.observe(triggerRef.value);
+				measureResponsiveTags();
+			});
+		});
+		onUnmounted(() => {
+			tagResize?.disconnect();
+			if (typeaheadTimer) clearTimeout(typeaheadTimer);
+			detachOverlay();
+		});
+		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 : "");
+		}
+		const contentStyle = computed(() => ({
+			position: "fixed",
+			top: `${popup.value.top}px`,
+			left: `${popup.value.left}px`,
+			"--rs-select-list-height": `${props.listHeight}px`,
+			"--rs-select-trigger-width": `${popup.value.minWidth || popup.value.width}px`,
+			...props.matchTriggerWidth ? { width: `${popup.value.width}px` } : {},
+			...props.dropdownStyle
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(["rs-select", {
+					"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--${__props.variant}`]: true
+				}]),
+				style: normalizeStyle(rootStyle.value)
+			}, [
+				__props.name ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [unref(isMultiple) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(selectedValues), (token) => {
+					return openBlock(), createElementBlock("input", {
+						key: token,
+						type: "hidden",
+						name: __props.name,
+						value: String(unref(restoreTokenValue)(token))
+					}, null, 8, _hoisted_1);
+				}), 128)) : (openBlock(), createElementBlock("input", {
+					key: 1,
+					type: "hidden",
+					name: __props.name,
+					value: unref(hasValue) ? String(unref(restoreTokenValue)(unref(selectedValues)[0])) : ""
+				}, null, 8, _hoisted_2))], 64)) : createCommentVNode("", true),
+				createElementVNode("button", mergeProps({
+					ref_key: "triggerRef",
+					ref: triggerRef
+				}, unref(attrs), {
+					id: __props.id,
+					type: "button",
+					class: ["rs-select__trigger", [__props.classNames?.trigger, {
+						"rs-select__trigger--invalid": isInvalid.value,
+						"rs-select__trigger--warning": isWarning.value
+					}]],
+					role: "combobox",
+					"aria-haspopup": "listbox",
+					"aria-expanded": open.value ? "true" : "false",
+					"aria-controls": open.value ? unref(listId) : void 0,
+					"aria-activedescendant": activeOptionId.value,
+					"aria-invalid": isInvalid.value || void 0,
+					"aria-disabled": resolvedDisabled.value ? "true" : void 0,
+					disabled: resolvedDisabled.value,
+					"data-disabled": resolvedDisabled.value ? "" : void 0,
+					"data-state": open.value ? "open" : "closed",
+					onClick: toggleOpen,
+					onKeydown: onTriggerKeydown,
+					onFocus: _cache[3] || (_cache[3] = ($event) => emit("focus", $event)),
+					onBlur: _cache[4] || (_cache[4] = ($event) => emit("blur", $event))
+				}), [
+					_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "prefix", {}, void 0, true)])) : createCommentVNode("", true),
+					unref(isMultiple) ? (openBlock(), createElementBlock("span", _hoisted_5, [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"
+						}, [renderSlot(_ctx.$slots, "tag", {
+							value: unref(restoreTokenValue)(value),
+							label: unref(tokenLabel)(value),
+							closable: true
+						}, () => [createElementVNode("span", _hoisted_6, toDisplayString(unref(truncateTagLabel)(unref(tokenLabel)(value))), 1), createElementVNode("button", {
+							type: "button",
+							class: "rs-select__tag-remove",
+							"aria-label": unref(t)("select.clear"),
+							onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+							onClick: ($event) => unref(removeTag)(value, $event)
+						}, [createVNode(RsIcon_default, {
+							name: "x",
+							size: 12
+						})], 40, _hoisted_7)], true)]);
+					}), 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: shownOmittedCount.value }, () => [createTextVNode(toDisplayString(typeof __props.maxTagPlaceholder === "function" ? __props.maxTagPlaceholder(shownOmittedCount.value) : unref(omittedTagLabel)), 1)], true)], 8, _hoisted_8)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(resolvedPlaceholder)), 1))])) : (openBlock(), createElementBlock("span", _hoisted_10, [unref(hasValue) ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(unref(singleDisplayLabel)), 1)) : (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(unref(resolvedPlaceholder)), 1))])),
+					createElementVNode("span", _hoisted_13, [__props.clearable && unref(hasValue) && !resolvedDisabled.value ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "rs-select__clear",
+						"aria-label": unref(t)("select.clear"),
+						onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+						onClick: _cache[2] || (_cache[2] = (...args) => unref(onClear) && unref(onClear)(...args))
+					}, [renderSlot(_ctx.$slots, "clearIcon", {}, () => [createVNode(RsIcon_default, {
+						name: "x",
+						size: 14
+					})], true)], 40, _hoisted_14)) : createCommentVNode("", true), __props.showArrow ? (openBlock(), createElementBlock("span", _hoisted_15, [renderSlot(_ctx.$slots, "suffixIcon", {}, () => [createVNode(RsIcon_default, {
+						name: "chevron-down",
+						size: triggerIconSize.value,
+						class: "rs-select__icon"
+					}, null, 8, ["size"])], true)])) : createCommentVNode("", true)])
+				], 16, _hoisted_3),
+				(openBlock(), createBlock(Teleport, {
+					to: portalTo.value,
+					disabled: !open.value
+				}, [open.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: unref(listId),
+					ref_key: "contentRef",
+					ref: contentRef,
+					class: normalizeClass(["rs-select__content", [
+						`rs-select__content--${unref(resolvedSize)}`,
+						__props.popupClassName,
+						__props.classNames?.popup,
+						{ "rs-select__content--match-trigger": __props.matchTriggerWidth }
+					]]),
+					"data-placement": popup.value.placement,
+					"data-rs-theme": panelTheme.value,
+					style: normalizeStyle(contentStyle.value)
+				}, [renderSlot(_ctx.$slots, "dropdownRender", {}, () => [
+					_ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_17, [renderSlot(_ctx.$slots, "header", {}, void 0, true)])) : createCommentVNode("", true),
+					unref(isSearchable) ? (openBlock(), createElementBlock("div", _hoisted_18, [createElementVNode("div", _hoisted_19, [createVNode(RsIcon_default, {
+						name: "search",
+						size: 14,
+						class: "rs-select__search-icon",
+						"aria-hidden": "true"
+					}), withDirectives(createElementVNode("input", {
+						ref_key: "searchInputRef",
+						ref: searchInputRef,
+						"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => searchQuery.value = $event),
+						type: "text",
+						class: "rs-select__search",
+						placeholder: unref(resolvedSearchPlaceholder),
+						"aria-label": unref(resolvedSearchPlaceholder),
+						autocomplete: "off",
+						role: "searchbox",
+						"aria-controls": unref(listId),
+						"aria-activedescendant": activeOptionId.value,
+						onKeydown: onPanelSearchKeydown
+					}, null, 40, _hoisted_20), [[vModelText, searchQuery.value]])])])) : createCommentVNode("", true),
+					__props.loading ? (openBlock(), createElementBlock("div", _hoisted_21, [renderSlot(_ctx.$slots, "loading", {}, () => [createTextVNode(toDisplayString(unref(resolvedLoadingText)), 1)], true)])) : emptyVisible.value ? (openBlock(), createElementBlock("div", _hoisted_22, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(resolvedEmptyText)), 1)], true)])) : createCommentVNode("", true),
+					!__props.loading ? (openBlock(), createElementBlock("div", {
+						key: 4,
+						ref_key: "viewportRef",
+						ref: viewportRef,
+						class: "rs-select__viewport",
+						role: "listbox",
+						"aria-multiselectable": unref(isMultiple) ? "true" : void 0,
+						"aria-label": unref(t)("select.listbox"),
+						onScroll: onViewportScroll,
+						onPointerover: onViewportPointerOver
+					}, [unref(useVirtual) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: "rs-select__virtual",
+						style: normalizeStyle({ height: `${virtualSlice.value.totalH}px` })
+					}, [createElementVNode("div", { style: normalizeStyle({
+						transform: `translateY(${virtualSlice.value.padTop}px)`,
+						paddingBottom: `${virtualSlice.value.padBottom}px`
+					}) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(virtualSlice.value.items, (token) => {
+						return openBlock(), createElementBlock("div", {
+							id: `${unref(listId)}-${token}`,
+							key: token,
+							role: "option",
+							class: normalizeClass(["rs-select__item", { "rs-select__item--create": unref(canCreate) && token === unref(createValue) }]),
+							"data-value": token,
+							"data-highlighted": highlightedToken.value === token ? "" : void 0,
+							"data-state": itemState(token),
+							"data-disabled": unref(isTokenDisabled)(token) ? "" : void 0,
+							"aria-selected": unref(selectedValues).includes(token) ? "true" : "false",
+							"aria-disabled": unref(isTokenDisabled)(token) ? "true" : void 0,
+							title: unref(optionFromToken)(token)?.title,
+							onClick: ($event) => unref(pickToken)(token)
+						}, [createElementVNode("span", _hoisted_25, [renderSlot(_ctx.$slots, "option", {
+							option: unref(optionOrCreate)(token),
+							selected: unref(selectedValues).includes(token)
+						}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(unref(canCreate) && token === unref(createValue) ? unref(createOptionLabel) : unref(labelMap).get(token) ?? String(token)), (part, i) => {
+							return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_26, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+						}), 128))], true)]), unref(selectedValues).includes(token) ? (openBlock(), createElementBlock("span", _hoisted_27, [createVNode(RsIcon_default, {
+							name: "check",
+							size: 14
+						})])) : createCommentVNode("", true)], 10, _hoisted_24);
+					}), 128))], 4)], 4)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(canCreate) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						id: `${unref(listId)}-${unref(createValue)}`,
+						role: "option",
+						class: "rs-select__item rs-select__item--create",
+						"data-value": unref(createValue),
+						"data-highlighted": highlightedToken.value === unref(createValue) ? "" : void 0,
+						"data-state": itemState(unref(createValue)),
+						"aria-selected": unref(selectedValues).includes(unref(createValue)) ? "true" : "false",
+						onClick: _cache[6] || (_cache[6] = ($event) => unref(pickToken)(unref(createValue)))
+					}, [createElementVNode("span", _hoisted_29, toDisplayString(unref(createOptionLabel)), 1), unref(selectedValues).includes(unref(createValue)) ? (openBlock(), createElementBlock("span", _hoisted_30, [createVNode(RsIcon_default, {
+						name: "check",
+						size: 14
+					})])) : createCommentVNode("", true)], 8, _hoisted_28)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayOptions), (entry, index) => {
+						return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isSelectOptionGroup)(entry) ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: "rs-select__group",
+							role: "group",
+							"aria-label": entry.label
+						}, [createElementVNode("div", _hoisted_32, toDisplayString(entry.label), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(entry.options, (opt) => {
+							return openBlock(), createElementBlock("div", {
+								id: `${unref(listId)}-${unref(toComboboxValue)(opt.value)}`,
+								key: unref(toComboboxValue)(opt.value),
+								role: "option",
+								class: "rs-select__item",
+								"data-value": unref(toComboboxValue)(opt.value),
+								"data-highlighted": highlightedToken.value === unref(toComboboxValue)(opt.value) ? "" : void 0,
+								"data-state": itemState(unref(toComboboxValue)(opt.value)),
+								"data-disabled": opt.disabled || unref(isOptionLimited)(opt) ? "" : void 0,
+								"aria-selected": unref(selectedValues).includes(unref(toComboboxValue)(opt.value)) ? "true" : "false",
+								"aria-disabled": opt.disabled || unref(isOptionLimited)(opt) ? "true" : void 0,
+								title: opt.title,
+								onClick: ($event) => unref(pickToken)(unref(toComboboxValue)(opt.value))
+							}, [createElementVNode("span", _hoisted_34, [renderSlot(_ctx.$slots, "option", {
+								option: opt,
+								selected: unref(selectedValues).includes(unref(toComboboxValue)(opt.value))
+							}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(opt.label), (part, i) => {
+								return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_35, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+							}), 128))], true)]), unref(selectedValues).includes(unref(toComboboxValue)(opt.value)) ? (openBlock(), createElementBlock("span", _hoisted_36, [createVNode(RsIcon_default, {
+								name: "check",
+								size: 14
+							})])) : createCommentVNode("", true)], 8, _hoisted_33);
+						}), 128))], 8, _hoisted_31)) : (openBlock(), createElementBlock("div", {
+							id: `${unref(listId)}-${unref(toComboboxValue)(entry.value)}`,
+							key: unref(toComboboxValue)(entry.value),
+							role: "option",
+							class: "rs-select__item",
+							"data-value": unref(toComboboxValue)(entry.value),
+							"data-highlighted": highlightedToken.value === unref(toComboboxValue)(entry.value) ? "" : void 0,
+							"data-state": itemState(unref(toComboboxValue)(entry.value)),
+							"data-disabled": entry.disabled || unref(isOptionLimited)(entry) ? "" : void 0,
+							"aria-selected": unref(selectedValues).includes(unref(toComboboxValue)(entry.value)) ? "true" : "false",
+							"aria-disabled": entry.disabled || unref(isOptionLimited)(entry) ? "true" : void 0,
+							title: entry.title,
+							onClick: ($event) => unref(pickToken)(unref(toComboboxValue)(entry.value))
+						}, [createElementVNode("span", _hoisted_38, [renderSlot(_ctx.$slots, "option", {
+							option: entry,
+							selected: unref(selectedValues).includes(unref(toComboboxValue)(entry.value))
+						}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(entry.label), (part, i) => {
+							return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_39, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+						}), 128))], true)]), unref(selectedValues).includes(unref(toComboboxValue)(entry.value)) ? (openBlock(), createElementBlock("span", _hoisted_40, [createVNode(RsIcon_default, {
+							name: "check",
+							size: 14
+						})])) : createCommentVNode("", true)], 8, _hoisted_37))], 64);
+					}), 128))], 64))], 40, _hoisted_23)) : createCommentVNode("", true),
+					_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_41, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)])) : createCommentVNode("", true)
+				], true)], 14, _hoisted_16)) : createCommentVNode("", true)], 8, ["to", "disabled"]))
+			], 6);
+		};
+	}
+});
+//#endregion
+export { RsSelect_vue_vue_type_script_setup_true_lang_default as default };