@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/components/SSelect/SSelect.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,710 @@
+import { EButtonAppearance, EButtonSize, EButtonVariant } from "../SButton/SButton.types.js";
+import SButton_default from "../SButton/SButton.vue.js";
+import { useAriaAttrs } from "../../composables/useAriaAttrs.js";
+import SDropdown_default from "../SDropdown/SDropdown.vue.js";
+import SDropdownMenu_default from "../SDropdownMenu/SDropdownMenu.vue.js";
+import { ESInputCustomize } from "../SInput/SInput.types.js";
+import { buildFieldLabelId } from "../SInput/utils/fieldLabelId.js";
+import SInput_default from "../SInput/SInput.vue.js";
+import SListItem_default from "../SListItem/SListItem.vue.js";
+import SList_default from "../SList/SList.vue.js";
+import { buildSelectListItemProps } from "./utils/buildSelectListItemProps.js";
+import { isPresentSelectValue } from "./utils/resolveSelectItemValue.js";
+import { useSelectState } from "./utils/useSelectState.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, isRef, mergeModels, mergeProps, nextTick, normalizeProps, openBlock, ref, renderSlot, toDisplayString, unref, useId, useModel, useSlots, useTemplateRef, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { SIcon, useUiKitI18n } from "@shtabapp/ui-kit-primitives";
+import { useFocusWithin } from "@vueuse/core";
+//#region src/components/SSelect/SSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "s-ui-select__empty s-ui-typography-body-14-regular"
+};
+var _hoisted_2 = [
+	"id",
+	"aria-expanded",
+	"aria-controls",
+	"aria-disabled",
+	"aria-readonly",
+	"aria-autocomplete",
+	"tabindex"
+];
+var _hoisted_3 = {
+	key: 0,
+	class: "s-ui-select__value"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "s-ui-select__placeholder"
+};
+var _hoisted_5 = {
+	key: 1,
+	class: "s-ui-select__placeholder"
+};
+var _hoisted_6 = {
+	key: 2,
+	class: "s-ui-select__value"
+};
+var _hoisted_7 = {
+	key: 3,
+	class: "s-ui-select__value-suffix"
+};
+var _hoisted_8 = [
+	"name",
+	"placeholder",
+	"disabled",
+	"readonly"
+];
+var chevronIconSize = 20;
+var defaultPanelWidth = "100%";
+var SELECT_LIST_VIRTUAL_THRESHOLD = 20;
+var SSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "SSelect",
+	props: /*@__PURE__*/ mergeModels({
+		options: {},
+		itemValue: { default: "value" },
+		itemTitle: { default: "label" },
+		itemSubtitle: { default: "subtitle" },
+		itemId: {},
+		itemDisabled: { default: "disabled" },
+		itemIconLeft: { default: "iconLeft" },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		returnObject: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		closableOptions: {
+			type: Boolean,
+			default: false
+		},
+		searchable: {
+			type: [String, Boolean],
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		listHeight: { default: 320 },
+		searchPlaceholder: { default: "Search" },
+		filterOption: { type: Function },
+		fitViewport: {
+			type: Boolean,
+			default: true
+		},
+		panelWidth: {},
+		surfaceClass: {},
+		canLoadMore: { type: Function },
+		endReachedDistance: { default: 0 },
+		label: {},
+		labelProps: {},
+		placeholder: {},
+		helpMessages: {},
+		errorMessages: {},
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		iconLeft: {},
+		customize: { default: () => ESInputCustomize.NONE },
+		name: {},
+		id: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"searchQuery": { default: "" },
+		"searchQueryModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"clear",
+		"focus",
+		"blur",
+		"open",
+		"close",
+		"endReached"
+	], ["update:modelValue", "update:searchQuery"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* Select / combobox: триггер `SInput`, панель `SDropdown` + `SList`.
+		* @displayName SSelect
+		*/
+		const modelValue = useModel(__props, "modelValue");
+		/**
+		* Текущий поисковый запрос (`v-model:searchQuery`).
+		* Полезен для серверной фильтрации: следите за значением и подменяйте `options`.
+		* Сбрасывается в `''` при закрытии панели, смене `searchable` и очистке значения.
+		*/
+		const searchQuery = useModel(__props, "searchQuery");
+		const emit = __emit;
+		const { t } = useUiKitI18n();
+		const slots = useSlots();
+		const { getRootAttrs, getAriaAttrs, getAriaAttr } = useAriaAttrs();
+		const generatedTriggerId = useId();
+		const generatedListboxId = useId();
+		const rootElementRef = useTemplateRef("rootElementRef");
+		const triggerInputRef = useTemplateRef("triggerInputRef");
+		const triggerInputSurrogate = ref("");
+		const searchInputElementRef = useTemplateRef("searchInputElementRef");
+		const panelSearchInputElementRef = useTemplateRef("panelSearchInputElementRef");
+		const listElementRef = useTemplateRef("listElementRef");
+		const listActiveKey = ref();
+		const isDropdownOpen = ref(false);
+		const isFocused = ref(false);
+		const isPanelWidthMatchingTrigger = computed(() => __props.panelWidth === void 0);
+		const resolvedPanelWidth = computed(() => __props.panelWidth ?? defaultPanelWidth);
+		const resolvedItemId = computed(() => __props.itemId ?? __props.itemValue);
+		const selectItemFields = computed(() => ({
+			itemValue: __props.itemValue,
+			itemTitle: __props.itemTitle,
+			itemSubtitle: __props.itemSubtitle,
+			itemId: resolvedItemId.value
+		}));
+		const { selectedValues, filteredOptions, listSelectionMode, listSelectedModel, hasSelectedValues, singleDisplayLabel, multipleDisplayLabels, multipleDisplayText, showPlaceholder, showInputSearchField, isSearchableMode, isSearchableInputMode, isSearchableContentMode, isMultipleMode, clearSelection, removeSelectedValue, resolveValueFromListKey, formatSelectListKey } = useSelectState({
+			modelValue,
+			options: () => __props.options,
+			itemFields: () => selectItemFields.value,
+			multiple: () => __props.multiple,
+			returnObject: () => __props.returnObject,
+			searchable: () => __props.searchable,
+			filterOption: () => __props.filterOption,
+			isDropdownOpen,
+			searchQuery
+		});
+		const valueSuffixSlotScope = computed(() => ({
+			disabled: __props.disabled,
+			displayLabel: singleDisplayLabel.value
+		}));
+		const isSelectListVirtual = computed(() => {
+			return filteredOptions.value.length > SELECT_LIST_VIRTUAL_THRESHOLD;
+		});
+		/**
+		* Высота списка, зафиксированная на первом символе поиска: панель с поиском не прыгает, пока
+		* список сужается, и не стоит пустой на `listHeight`, когда опций мало.
+		*/
+		const searchLockedListHeight = ref();
+		watch(searchQuery, (activeQuery, previousQuery) => {
+			if (!activeQuery) {
+				searchLockedListHeight.value = void 0;
+				return;
+			}
+			if (!previousQuery && isSearchableContentMode.value && !isSelectListVirtual.value) {
+				const listElement = listElementRef.value?.$el;
+				searchLockedListHeight.value = listElement instanceof HTMLElement ? listElement.offsetHeight : void 0;
+			}
+		}, { flush: "pre" });
+		const selectListHeight = computed(() => {
+			if (isSelectListVirtual.value) return __props.listHeight;
+			return searchLockedListHeight.value ?? "auto";
+		});
+		const selectListMaxHeight = computed(() => {
+			if (isSelectListVirtual.value) return;
+			return __props.listHeight;
+		});
+		const selectedOptionListKeys = computed(() => {
+			return selectedValues.value.map((valueItem) => formatSelectListKey(valueItem));
+		});
+		const isSelectOptionSelected = (listKey) => {
+			return selectedOptionListKeys.value.includes(listKey);
+		};
+		const getSelectListDefaultItemProps = () => ({ tiny: true });
+		const getSelectListItemProps = (listItemScope) => {
+			return buildSelectListItemProps({
+				listItemScope,
+				itemTitle: __props.itemTitle,
+				itemSubtitle: __props.itemSubtitle,
+				itemDisabled: __props.itemDisabled,
+				itemIconLeft: __props.itemIconLeft,
+				listActiveKey: listActiveKey.value,
+				isOptionSelected: isSelectOptionSelected(listItemScope.key)
+			});
+		};
+		const handleOptionCloseClick = (listKey) => {
+			const optionValue = resolveValueFromListKey(listKey);
+			if (!isPresentSelectValue(optionValue)) return;
+			if (isMultipleMode.value) {
+				removeSelectedValue(optionValue);
+				return;
+			}
+			modelValue.value = void 0;
+		};
+		const triggerElementId = computed(() => __props.id ?? generatedTriggerId);
+		const listboxElementId = computed(() => generatedListboxId);
+		const triggerLabelElementId = computed(() => buildFieldLabelId(triggerElementId.value));
+		/**
+		* Доступное имя combobox и его listbox. `SLabel` указывает `for` на `div` с ролью combobox,
+		* а `div` не связывается с `<label>`, поэтому подпись подключается через `aria-labelledby`.
+		* Приоритет: явные `aria-label`/`aria-labelledby` снаружи, видимая подпись, placeholder.
+		*/
+		const getSelectNameAttrs = () => {
+			const ariaLabel = getAriaAttr("aria-label");
+			const ariaLabelledby = getAriaAttr("aria-labelledby");
+			if (ariaLabel || ariaLabelledby) return {
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby
+			};
+			if (__props.label || slots.label) return { "aria-labelledby": triggerLabelElementId.value };
+			if (__props.placeholder) return { "aria-label": __props.placeholder };
+			return {};
+		};
+		/** Имя панели — то же, что у combobox: панель телепортирована и своей подписи не видит. */
+		const panelLabel = computed(() => getAriaAttr("aria-label") || __props.label || __props.placeholder);
+		/**
+		* Кольцо фокуса поля: combobox — это `div` в слоте `control`, и фокус-события нативного
+		* `input` от `SInput` до него не доходят.
+		*/
+		const { focused: isFocusWithin } = useFocusWithin(rootElementRef);
+		const getComboboxAriaAttrs = () => {
+			return {
+				...getAriaAttrs(),
+				...getSelectNameAttrs()
+			};
+		};
+		const triggerFieldElementRef = computed(() => {
+			return triggerInputRef.value?.fieldElementRef ?? null;
+		});
+		const selectionSlotScope = computed(() => ({
+			labels: multipleDisplayLabels.value,
+			values: selectedValues.value,
+			displayText: multipleDisplayText.value,
+			disabled: __props.disabled || __props.readonly,
+			removeValue: removeSelectedValue
+		}));
+		const triggerTabIndex = computed(() => {
+			if (__props.disabled) return;
+			if (__props.readonly && !isSearchableInputMode.value) return 0;
+			if (isSearchableInputMode.value) return;
+			return 0;
+		});
+		const rootClasses = computed(() => ({
+			"s-ui-select--disabled": __props.disabled,
+			"s-ui-select--readonly": __props.readonly,
+			"s-ui-select--multiple": isMultipleMode.value,
+			"s-ui-select--open": isDropdownOpen.value
+		}));
+		const focusSearchInput = () => {
+			if (isSearchableContentMode.value) {
+				panelSearchInputElementRef.value?.focus();
+				return;
+			}
+			searchInputElementRef.value?.focus();
+		};
+		const focusPanelSearchInput = async () => {
+			await nextTick();
+			panelSearchInputElementRef.value?.focus();
+		};
+		const focusListPanel = async () => {
+			await nextTick();
+			await listElementRef.value?.focusNavigation();
+		};
+		const openDropdown = async () => {
+			if (__props.disabled || __props.readonly) return;
+			if (isDropdownOpen.value) return;
+			isDropdownOpen.value = true;
+			emit("open");
+			if (isSearchableContentMode.value) {
+				await focusPanelSearchInput();
+				return;
+			}
+			if (isSearchableInputMode.value) {
+				await nextTick();
+				searchInputElementRef.value?.focus();
+				return;
+			}
+			await focusListPanel();
+		};
+		const handleSearchInputFocus = async () => {
+			if (__props.disabled || __props.readonly) return;
+			if (!isDropdownOpen.value) await openDropdown();
+		};
+		watch(searchQuery, async (activeQuery) => {
+			if (!isSearchableInputMode.value) return;
+			if (__props.disabled || __props.readonly) return;
+			if (!activeQuery) return;
+			if (!isDropdownOpen.value) await openDropdown();
+		});
+		const closeDropdown = () => {
+			if (!isDropdownOpen.value) return;
+			isDropdownOpen.value = false;
+			listActiveKey.value = void 0;
+			emit("close");
+		};
+		const closeDropdownAfterOptionPick = () => {
+			if (!__props.closeOnSelect || isMultipleMode.value) return;
+			closeDropdown();
+		};
+		watch(modelValue, (nextValue, previousValue) => {
+			if (!__props.closeOnSelect || isMultipleMode.value || !isDropdownOpen.value) return;
+			if (!nextValue || nextValue === previousValue) return;
+			closeDropdown();
+		});
+		const handleSelectPanelBodyClick = (event) => {
+			if (!isDropdownOpen.value) return;
+			if (!(event.target instanceof Element)) return;
+			if (!event.target.closest(".s-ui-list-item")) return;
+			closeDropdownAfterOptionPick();
+		};
+		const handleSelectPanelBodyKeydown = async (event) => {
+			if (event.key !== "Enter" && event.key !== " " && event.key !== "Spacebar") return;
+			if (!isDropdownOpen.value) return;
+			await nextTick();
+			closeDropdownAfterOptionPick();
+		};
+		const toggleDropdown = async () => {
+			if (isDropdownOpen.value) {
+				closeDropdown();
+				return;
+			}
+			await openDropdown();
+		};
+		const handleControlClick = async (event) => {
+			if (__props.disabled || __props.readonly) return;
+			if (!(event.target instanceof HTMLElement)) return;
+			if (event.target.closest(".s-ui-select__search-input")) {
+				if (!isDropdownOpen.value) await openDropdown();
+				return;
+			}
+			await toggleDropdown();
+		};
+		const handleChevronClick = async () => {
+			if (__props.disabled || __props.readonly) return;
+			await toggleDropdown();
+		};
+		const handleFocusListOnArrowKeydown = async (event) => {
+			if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return false;
+			event.preventDefault();
+			event.stopPropagation();
+			if (!isDropdownOpen.value) await openDropdown();
+			await focusListPanel();
+			await listElementRef.value?.handleKeyboardNavigation(event);
+			return true;
+		};
+		const commitActiveListOption = (activeKey) => {
+			const activeOptionValue = resolveValueFromListKey(activeKey);
+			if (!activeOptionValue) return;
+			if (isMultipleMode.value) {
+				if (selectedValues.value.some((valueItem) => formatSelectListKey(valueItem) === activeKey)) removeSelectedValue(activeOptionValue);
+				else listSelectedModel.value = [...selectedValues.value.map((valueItem) => formatSelectListKey(valueItem)), activeKey];
+				return;
+			}
+			listSelectedModel.value = activeKey;
+			closeDropdownAfterOptionPick();
+		};
+		const handleTriggerKeydown = async (event) => {
+			if (__props.disabled || __props.readonly) return;
+			if (await handleFocusListOnArrowKeydown(event)) return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				closeDropdown();
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				if (isDropdownOpen.value && listActiveKey.value) {
+					commitActiveListOption(listActiveKey.value);
+					return;
+				}
+				await toggleDropdown();
+			}
+		};
+		const handleSearchInputKeydown = async (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				closeDropdown();
+				return;
+			}
+			await handleFocusListOnArrowKeydown(event);
+		};
+		const handlePanelSearchKeydown = handleSearchInputKeydown;
+		const handleTriggerFocusIn = (event) => {
+			if (__props.disabled) return;
+			if (!isFocused.value) emit("focus", event);
+			isFocused.value = true;
+		};
+		const handleTriggerFocusOut = (event) => {
+			if (!(event.currentTarget instanceof HTMLElement)) return;
+			const nextFocusTarget = event.relatedTarget;
+			if (nextFocusTarget instanceof Node && event.currentTarget.contains(nextFocusTarget)) return;
+			isFocused.value = false;
+			emit("blur", event);
+		};
+		const handleClearClick = () => {
+			clearSelection();
+			emit("clear");
+		};
+		const handleListEndReached = (payload) => {
+			emit("endReached", payload);
+		};
+		__expose({
+			open: openDropdown,
+			close: closeDropdown,
+			toggle: toggleDropdown,
+			focusSearchInput
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "rootElementRef",
+				ref: rootElementRef,
+				class: ["s-ui-select", rootClasses.value]
+			}, unref(getRootAttrs)()), [createVNode(unref(SDropdown_default), {
+				modelValue: isDropdownOpen.value,
+				"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isDropdownOpen.value = $event),
+				reference: triggerFieldElementRef.value,
+				disabled: __props.disabled,
+				"match-reference-width": isPanelWidthMatchingTrigger.value,
+				"fit-viewport": __props.fitViewport,
+				"surface-class": __props.surfaceClass,
+				"content-id": listboxElementId.value,
+				"dismiss-on-click-outside": true,
+				"dismiss-on-escape": true,
+				"focus-on-open": false,
+				"panel-label": panelLabel.value
+			}, {
+				content: withCtx(() => [createVNode(unref(SDropdownMenu_default), {
+					class: "s-ui-select__menu",
+					width: resolvedPanelWidth.value
+				}, createSlots({
+					default: withCtx(() => [createElementVNode("div", {
+						class: "s-ui-select__menu-body",
+						onClick: handleSelectPanelBodyClick,
+						onKeydown: handleSelectPanelBodyKeydown
+					}, [unref(filteredOptions).length > 0 ? (openBlock(), createBlock(unref(SList_default), mergeProps({
+						key: 0,
+						ref_key: "listElementRef",
+						ref: listElementRef,
+						modelValue: listActiveKey.value,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => listActiveKey.value = $event),
+						selected: unref(listSelectedModel),
+						"onUpdate:selected": _cache[3] || (_cache[3] = ($event) => isRef(listSelectedModel) ? listSelectedModel.value = $event : null),
+						items: unref(filteredOptions),
+						"item-key": resolvedItemId.value,
+						"title-key": __props.itemTitle,
+						"subtitle-key": __props.itemSubtitle,
+						"icon-left-key": __props.itemIconLeft,
+						"disabled-key": __props.itemDisabled,
+						"selection-mode": unref(listSelectionMode),
+						mandatory: !__props.multiple,
+						height: selectListHeight.value,
+						"max-height": selectListMaxHeight.value,
+						virtual: isSelectListVirtual.value,
+						"item-props": getSelectListDefaultItemProps,
+						"selected-on-top": unref(isMultipleMode),
+						"can-load-more": __props.canLoadMore,
+						"end-reached-distance": __props.endReachedDistance
+					}, getSelectNameAttrs(), { onEndReached: handleListEndReached }), createSlots({ _: 2 }, [unref(slots).option || unref(slots)["option-icon"] || __props.closableOptions || unref(isMultipleMode) ? {
+						name: "item",
+						fn: withCtx((listItemScope) => [unref(slots).option ? renderSlot(_ctx.$slots, "option", normalizeProps(mergeProps({ key: 0 }, listItemScope))) : __props.closableOptions ? (openBlock(), createBlock(unref(SListItem_default), normalizeProps(mergeProps({ key: 1 }, getSelectListItemProps(listItemScope))), createSlots({ _: 2 }, [unref(slots)["option-icon"] ? {
+							name: "icon-left",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "option-icon", normalizeProps(guardReactiveProps(listItemScope)))]),
+							key: "0"
+						} : void 0, isSelectOptionSelected(listItemScope.key) ? {
+							name: "right",
+							fn: withCtx((actionSlotProps) => [createVNode(unref(SButton_default), {
+								appearance: unref(EButtonAppearance).BARE,
+								variant: unref(EButtonVariant).NEUTRAL,
+								size: unref(EButtonSize).SMALL,
+								icon: "closeMini",
+								"aria-label": unref(t)("select.removeOption"),
+								disabled: actionSlotProps.disabled || actionSlotProps.readonly,
+								tabindex: -1,
+								onClick: withModifiers(($event) => handleOptionCloseClick(listItemScope.key), ["stop"])
+							}, null, 8, [
+								"appearance",
+								"variant",
+								"size",
+								"aria-label",
+								"disabled",
+								"onClick"
+							])]),
+							key: "1"
+						} : void 0]), 1040)) : (openBlock(), createBlock(unref(SListItem_default), normalizeProps(mergeProps({ key: 2 }, getSelectListItemProps(listItemScope))), createSlots({ _: 2 }, [unref(slots)["option-icon"] ? {
+							name: "icon-left",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "option-icon", normalizeProps(guardReactiveProps(listItemScope)))]),
+							key: "0"
+						} : void 0]), 1040))]),
+						key: "0"
+					} : void 0]), 1040, [
+						"modelValue",
+						"selected",
+						"items",
+						"item-key",
+						"title-key",
+						"subtitle-key",
+						"icon-left-key",
+						"disabled-key",
+						"selection-mode",
+						"mandatory",
+						"height",
+						"max-height",
+						"virtual",
+						"selected-on-top",
+						"can-load-more",
+						"end-reached-distance"
+					])) : (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(t)("select.noOptions")), 1)])]))], 32)]),
+					_: 2
+				}, [unref(isSearchableContentMode) || unref(slots)["panel-header"] ? {
+					name: "header",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "panel-header"), unref(isSearchableContentMode) ? (openBlock(), createBlock(unref(SInput_default), {
+						key: 0,
+						ref_key: "panelSearchInputElementRef",
+						ref: panelSearchInputElementRef,
+						modelValue: searchQuery.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+						placeholder: __props.searchPlaceholder,
+						disabled: __props.disabled,
+						clearable: false,
+						"aria-label": __props.searchPlaceholder,
+						"icon-left": "search",
+						onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+						onKeydown: unref(handlePanelSearchKeydown)
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"disabled",
+						"aria-label",
+						"onKeydown"
+					])) : createCommentVNode("", true)]),
+					key: "0"
+				} : void 0, unref(slots)["panel-footer"] ? {
+					name: "footer",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "panel-footer")]),
+					key: "1"
+				} : void 0]), 1032, ["width"])]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"reference",
+				"disabled",
+				"match-reference-width",
+				"fit-viewport",
+				"surface-class",
+				"content-id",
+				"panel-label"
+			]), createVNode(unref(SInput_default), {
+				ref_key: "triggerInputRef",
+				ref: triggerInputRef,
+				modelValue: triggerInputSurrogate.value,
+				"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => triggerInputSurrogate.value = $event),
+				label: __props.label,
+				"label-props": __props.labelProps,
+				placeholder: __props.placeholder,
+				"help-messages": __props.helpMessages,
+				"error-messages": __props.errorMessages,
+				bordered: __props.bordered,
+				disabled: __props.disabled,
+				readonly: __props.readonly,
+				clearable: __props.clearable,
+				"has-value": unref(hasSelectedValues),
+				focused: unref(isFocusWithin) || isDropdownOpen.value,
+				"icon-left": __props.iconLeft,
+				customize: __props.customize,
+				name: __props.name,
+				id: triggerElementId.value,
+				onClear: handleClearClick,
+				onFocus: handleTriggerFocusIn,
+				onBlur: handleTriggerFocusOut
+			}, createSlots({
+				control: withCtx(() => [createElementVNode("div", mergeProps({
+					id: triggerElementId.value,
+					class: ["s-ui-select__control s-ui-typography-body-14-regular", {
+						"s-ui-select__control--multiple": unref(isMultipleMode),
+						"s-ui-select__control--empty": unref(isMultipleMode) && !unref(hasSelectedValues) && !unref(showInputSearchField),
+						"s-ui-select__control--with-value-suffix": unref(slots)["value-suffix"] && !unref(isMultipleMode) && !unref(showInputSearchField) && !unref(showPlaceholder)
+					}],
+					role: "combobox",
+					"aria-expanded": isDropdownOpen.value,
+					"aria-controls": listboxElementId.value,
+					"aria-haspopup": "listbox",
+					"aria-disabled": __props.disabled ? true : void 0,
+					"aria-readonly": __props.readonly ? true : void 0,
+					"aria-autocomplete": unref(isSearchableMode) ? "list" : void 0
+				}, getComboboxAriaAttrs(), {
+					tabindex: triggerTabIndex.value,
+					onClick: handleControlClick,
+					onKeydown: handleTriggerKeydown
+				}), [
+					unref(isMultipleMode) ? renderSlot(_ctx.$slots, "selection", normalizeProps(mergeProps({ key: 0 }, selectionSlotScope.value)), () => [unref(multipleDisplayText) ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(multipleDisplayText)), 1)) : unref(showPlaceholder) && !unref(showInputSearchField) ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true)]) : unref(showPlaceholder) && !unref(showInputSearchField) ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.placeholder), 1)) : !unref(showInputSearchField) ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(singleDisplayLabel)), 1)) : createCommentVNode("", true),
+					unref(slots)["value-suffix"] && !unref(isMultipleMode) && !unref(showInputSearchField) && !unref(showPlaceholder) ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "value-suffix", normalizeProps(guardReactiveProps(valueSuffixSlotScope.value)))])) : createCommentVNode("", true),
+					unref(showInputSearchField) ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
+						key: 4,
+						ref_key: "searchInputElementRef",
+						ref: searchInputElementRef,
+						"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => searchQuery.value = $event),
+						class: "s-ui-select__search-input",
+						type: "text",
+						name: __props.name,
+						placeholder: __props.placeholder,
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						autocomplete: "off"
+					}, getSelectNameAttrs(), {
+						onClick: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop"])),
+						onFocus: handleSearchInputFocus,
+						onKeydown: handleSearchInputKeydown
+					}), null, 16, _hoisted_8)), [[vModelText, searchQuery.value]]) : createCommentVNode("", true)
+				], 16, _hoisted_2)]),
+				action: withCtx(() => [createVNode(unref(SIcon), {
+					name: "chevronMiniDown",
+					size: chevronIconSize,
+					class: "s-ui-select__chevron",
+					onClick: handleChevronClick
+				})]),
+				_: 2
+			}, [
+				unref(slots).label ? {
+					name: "label",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "label")]),
+					key: "0"
+				} : void 0,
+				unref(slots).prefix ? {
+					name: "prefix",
+					fn: withCtx((prefixSlotProps) => [renderSlot(_ctx.$slots, "prefix", normalizeProps(guardReactiveProps(prefixSlotProps)))]),
+					key: "1"
+				} : void 0,
+				unref(slots).prepend ? {
+					name: "prepend",
+					fn: withCtx((prependSlotProps) => [renderSlot(_ctx.$slots, "prepend", normalizeProps(guardReactiveProps(prependSlotProps)))]),
+					key: "2"
+				} : void 0,
+				unref(slots).message ? {
+					name: "message",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "message")]),
+					key: "3"
+				} : void 0
+			]), 1032, [
+				"modelValue",
+				"label",
+				"label-props",
+				"placeholder",
+				"help-messages",
+				"error-messages",
+				"bordered",
+				"disabled",
+				"readonly",
+				"clearable",
+				"has-value",
+				"focused",
+				"icon-left",
+				"customize",
+				"name",
+				"id"
+			])], 16);
+		};
+	}
+});
+//#endregion
+export { SSelect_vue_vue_type_script_setup_true_lang_default as default };