@sdata/web-vue 3.30.0 → 4.1.0

package/es/select/select.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,774 @@
+import { useFormItem } from "../_hooks/use-form-item.js";
+import { configProviderInjectionKey } from "../config-provider/context.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { isArray, isBoolean, isEmptyObject, isFunction, isNull, isNumber, isObject, isString, isUndefined } from "../_utils/is.js";
+import virtual_list_default from "../_components/virtual-list/index.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
+import { useDropdownVirtualListProps } from "../_hooks/use-dropdown-virtual-list-props.js";
+import { resolveDropdownVirtualListProps } from "../_utils/virtual-dropdown.js";
+import { useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
+import Trigger from "../trigger/index.js";
+import Tooltip from "../tooltip/index.js";
+import { getKeyFromValue, hasEmptyStringKey, isGroupOptionInfo, isValidOption } from "./utils.js";
+import { useSelect } from "./hooks/use-select.js";
+import select_dropdown_default from "./select-dropdown.js";
+import Ellipsis, { PerformantEllipsis } from "../ellipsis/index.js";
+import Checkbox from "../checkbox/index.js";
+import { debounce } from "../_utils/debounce.js";
+import select_view_default from "../_components/select-view/select-view.js";
+import { useAllowSearch } from "../_hooks/use-allow-search.js";
+import { useTrigger } from "../_hooks/use-trigger.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRef, toRefs, unref, useAttrs, useSlots, watch, watchEffect, withCtx } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
+//#region components/select/select.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var DEFAULT_SELECT_VIRTUAL_ITEM_SIZE = 36;
+var select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "Select",
+	inheritAttrs: false
+}), {}, {
+	__name: "select",
+	props: {
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		defaultValue: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object,
+				Array
+			],
+			default: (props) => props.multiple ? [] : ""
+		},
+		inputValue: { type: String },
+		defaultInputValue: {
+			type: String,
+			default: ""
+		},
+		size: { type: String },
+		placeholder: String,
+		/**
+		* @zh 宽度是否适应文字内容
+		* @en Whether the width adapts to the text content
+		*/
+		fitWidth: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 最大宽度是否限制为父容器宽度
+		* @en Whether the maximum width is limited to the parent container width
+		*/
+		maxWFull: {
+			type: Boolean,
+			default: true
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 传递给下拉加载中 Spin 的属性
+		* @en Props passed to the loading Spin in the dropdown
+		*/
+		spinProps: { type: Object },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 是否为只读状态
+		* @en Whether it is read-only
+		*/
+		readonly: {
+			type: [Boolean, String],
+			default: false
+		},
+		error: {
+			type: Boolean,
+			default: false
+		},
+		allowClear: {
+			type: Boolean,
+			default: true
+		},
+		allowSearch: {
+			type: [Boolean, Object],
+			default: true
+		},
+		allowCreate: {
+			type: Boolean,
+			default: false
+		},
+		showArrow: {
+			type: Boolean,
+			default: true
+		},
+		maxTagCount: {
+			type: [Number, String],
+			default: "responsive"
+		},
+		popupContainer: { type: [String, Object] },
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		defaultActiveFirstOption: {
+			type: Boolean,
+			default: true
+		},
+		popupVisible: {
+			type: Boolean,
+			default: void 0
+		},
+		show: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultPopupVisible: {
+			type: Boolean,
+			default: false
+		},
+		defaultShow: {
+			type: Boolean,
+			default: void 0
+		},
+		unmountOnClose: {
+			type: Boolean,
+			default: false
+		},
+		filterOption: {
+			type: [Boolean, Function],
+			default: true
+		},
+		options: {
+			type: Array,
+			default: () => []
+		},
+		/**
+		* @zh 是否使用 Ellipsis 组件渲染选项。传入 `performant-ellipsis` 时使用高性能省略实现
+		* @en Whether to render options with the Ellipsis component. Use `performant-ellipsis` for the performant implementation
+		*/
+		ellipsis: {
+			type: [Boolean, String],
+			default: true
+		},
+		virtualListProps: { type: Object },
+		triggerProps: { type: Object },
+		floatingOptions: { type: Object },
+		fallbackOption: {
+			type: [Boolean, Function],
+			default: true
+		},
+		showExtraOptions: {
+			type: Boolean,
+			default: true
+		},
+		valueKey: {
+			type: String,
+			default: "value"
+		},
+		searchDelay: {
+			type: Number,
+			default: 500
+		},
+		limit: {
+			type: Number,
+			default: 0
+		},
+		fieldNames: { type: Object },
+		scrollbar: {
+			type: [Boolean, Object],
+			default: true
+		},
+		showHeaderOnEmpty: {
+			type: Boolean,
+			default: false
+		},
+		showFooterOnEmpty: {
+			type: Boolean,
+			default: false
+		},
+		tagNowrap: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: {
+		"update:modelValue": (_value) => true,
+		"update:inputValue": (_inputValue) => true,
+		"update:popupVisible": (_visible) => true,
+		"update:show": (_visible) => true,
+		"change": (_value) => true,
+		"inputValueChange": (_inputValue) => true,
+		"popupVisibleChange": (_visible) => true,
+		"showChange": (_visible) => true,
+		"clear": (_ev) => true,
+		"remove": (_removed) => true,
+		"search": (_inputValue) => true,
+		"dropdownScroll": (_ev) => true,
+		"dropdownReachBottom": (_ev) => true,
+		"exceedLimit": (_value, _ev) => true
+	},
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const DEFAULT_FIELD_NAMES = {
+			value: "value",
+			label: "label",
+			children: "children",
+			disabled: "disabled",
+			tagProps: "tagProps"
+		};
+		const [DefineOptionLabel, ReuseOptionLabel] = createReusableTemplate();
+		const [DefineOptionContent, ReuseOptionContent] = createReusableTemplate();
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const attrs = useAttrs();
+		const VNodeRenderer = ({ content }) => content;
+		const [DefineOption, ReuseOption] = createReusableTemplate();
+		const configCtx = inject(configProviderInjectionKey, void 0);
+		const mergedSpinProps = computed(() => _objectSpread2(_objectSpread2({}, configCtx === null || configCtx === void 0 ? void 0 : configCtx.selectSpinProps), props.spinProps));
+		const { size, disabled, error, options, filterOption, valueKey, multiple, popupVisible, show, defaultPopupVisible, defaultShow, showExtraOptions, loading, defaultActiveFirstOption, allowClear, allowSearch } = toRefs(props);
+		const prefixCls = getPrefixCls("select");
+		const selectViewRef = ref(null);
+		const { mergedSize, mergedDisabled, mergedError, eventHandlers } = useFormItem({
+			size,
+			disabled,
+			error
+		});
+		const { mergedAllowClear } = useAllowClear(allowClear);
+		const { mergedAllowSearch } = useAllowSearch(allowSearch);
+		const { mergedDropdownVirtualListProps } = useDropdownVirtualListProps(computed(() => props.virtualListProps));
+		const component = computed(() => mergedDropdownVirtualListProps.value ? "div" : "li");
+		const retainInputValue = computed(() => isObject(mergedAllowSearch.value) && Boolean(mergedAllowSearch.value.retainInputValue));
+		const dropdownRef = ref();
+		const optionRefs = ref({});
+		const virtualListRef = ref();
+		const resolvedVirtualListProps = computed(() => {
+			return resolveDropdownVirtualListProps(mergedDropdownVirtualListProps.value, props.triggerProps, DEFAULT_SELECT_VIRTUAL_ITEM_SIZE);
+		});
+		const { computedPopupVisible, handlePopupVisibleChange: _handlePopupVisibleChange } = useTrigger({
+			popupVisible,
+			defaultPopupVisible,
+			show,
+			defaultShow,
+			emit
+		});
+		const { tipVisible, show: showReadonlyTip } = useReadonlyTip(toRef(props, "readonly"), mergedDisabled);
+		const readonlyTipText = useReadonlyTipText(toRef(props, "readonly"));
+		const handlePopupVisibleChange = (visible) => {
+			if (visible && props.readonly && !mergedDisabled.value) {
+				showReadonlyTip();
+				return;
+			}
+			_handlePopupVisibleChange(visible);
+		};
+		const _value = ref(props.defaultValue);
+		const computedValueObjects = computed(() => {
+			var _props$modelValue;
+			const mergedValue = (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : _value.value;
+			const valueArray = [];
+			if (isArray(mergedValue)) valueArray.push(...mergedValue);
+			else if (mergedValue || isNumber(mergedValue) || isString(mergedValue) || isBoolean(mergedValue)) valueArray.push(mergedValue);
+			return valueArray.map((item) => ({
+				value: item,
+				key: getKeyFromValue(item, props.valueKey)
+			}));
+		});
+		watch(() => props.modelValue, (nextModelValue) => {
+			if (isUndefined(nextModelValue) || isNull(nextModelValue)) _value.value = multiple.value ? [] : nextModelValue;
+		});
+		const computedValueKeys = computed(() => computedValueObjects.value.map((item) => item.key));
+		const mergedFieldNames = computed(() => _objectSpread2(_objectSpread2({}, DEFAULT_FIELD_NAMES), props.fieldNames));
+		const selectedOptionMap = ref({});
+		const getRawOptionFromValueKeys = (valueKeys) => {
+			const optionMap = {};
+			valueKeys.forEach((key) => {
+				optionMap[key] = optionInfoMap.get(key);
+			});
+			return optionMap;
+		};
+		const updateSelectedOption = (valueKeys) => {
+			selectedOptionMap.value = getRawOptionFromValueKeys(valueKeys);
+		};
+		const getFallBackOption = (value) => {
+			if (isFunction(props.fallbackOption)) return props.fallbackOption(value);
+			return {
+				[mergedFieldNames.value.value]: value,
+				[mergedFieldNames.value.label]: String(isObject(value) ? value[valueKey.value] : value)
+			};
+		};
+		const shouldAppendExtraValue = (keyArray, optionKey, optionValue) => {
+			if (keyArray.includes(optionKey) || optionValue === "") return false;
+			const optionInfo = optionInfoMap.get(optionKey);
+			return !optionInfo || optionInfo.origin === "extraOptions";
+		};
+		const appendExtraValue = (valueArray, keyArray, option) => {
+			valueArray.push(option);
+			keyArray.push(option.key);
+		};
+		const getExtraValueData = () => {
+			const valueArray = [];
+			const keyArray = [];
+			if (props.allowCreate || props.fallbackOption) {
+				for (const item of computedValueObjects.value) if (shouldAppendExtraValue(keyArray, item.key, item.value)) appendExtraValue(valueArray, keyArray, item);
+			}
+			if (props.allowCreate && computedInputValue.value) {
+				const createdOption = {
+					value: computedInputValue.value,
+					key: getKeyFromValue(computedInputValue.value)
+				};
+				if (shouldAppendExtraValue(keyArray, createdOption.key, createdOption.value)) appendExtraValue(valueArray, keyArray, createdOption);
+			}
+			return valueArray;
+		};
+		const extraValueObjects = ref([]);
+		const extraOptions = computed(() => extraValueObjects.value.map((item) => {
+			let optionInfo = getFallBackOption(item.value);
+			const extraOptionRawInfo = selectedOptionMap.value[item.key];
+			if (!isUndefined(extraOptionRawInfo) && !isEmptyObject(extraOptionRawInfo)) optionInfo = _objectSpread2(_objectSpread2({}, optionInfo), extraOptionRawInfo);
+			return optionInfo;
+		}));
+		nextTick(() => {
+			watchEffect(() => {
+				const valueData = getExtraValueData();
+				if (valueData.length !== extraValueObjects.value.length) {
+					extraValueObjects.value = valueData;
+					return;
+				}
+				for (let index = 0; index < valueData.length; index += 1) {
+					var _extraValueObjects$va;
+					if (valueData[index].key !== ((_extraValueObjects$va = extraValueObjects.value[index]) === null || _extraValueObjects$va === void 0 ? void 0 : _extraValueObjects$va.key)) {
+						extraValueObjects.value = valueData;
+						break;
+					}
+				}
+			});
+		});
+		const _inputValue = ref(props.defaultInputValue);
+		const computedInputValue = computed(() => {
+			var _props$inputValue;
+			return (_props$inputValue = props.inputValue) !== null && _props$inputValue !== void 0 ? _props$inputValue : _inputValue.value;
+		});
+		watch(computedPopupVisible, (visible) => {
+			if (!visible && !retainInputValue.value && computedInputValue.value) updateInputValue("");
+		});
+		const getValueFromValueKeys = (valueKeys) => {
+			if (!props.multiple) {
+				var _optionInfoMap$get$va, _optionInfoMap$get;
+				return (_optionInfoMap$get$va = (_optionInfoMap$get = optionInfoMap.get(valueKeys[0])) === null || _optionInfoMap$get === void 0 ? void 0 : _optionInfoMap$get.value) !== null && _optionInfoMap$get$va !== void 0 ? _optionInfoMap$get$va : hasEmptyStringKey(optionInfoMap) ? void 0 : "";
+			}
+			return valueKeys.map((key) => {
+				var _optionInfoMap$get$va2, _optionInfoMap$get2;
+				return (_optionInfoMap$get$va2 = (_optionInfoMap$get2 = optionInfoMap.get(key)) === null || _optionInfoMap$get2 === void 0 ? void 0 : _optionInfoMap$get2.value) !== null && _optionInfoMap$get$va2 !== void 0 ? _optionInfoMap$get$va2 : "";
+			});
+		};
+		const updateValue = (valueKeys) => {
+			var _eventHandlers$value, _eventHandlers$value$;
+			const nextValue = getValueFromValueKeys(valueKeys);
+			_value.value = nextValue;
+			emit("update:modelValue", nextValue);
+			emit("change", nextValue);
+			(_eventHandlers$value = eventHandlers.value) === null || _eventHandlers$value === void 0 || (_eventHandlers$value$ = _eventHandlers$value.onChange) === null || _eventHandlers$value$ === void 0 || _eventHandlers$value$.call(_eventHandlers$value);
+			updateSelectedOption(valueKeys);
+		};
+		const updateInputValue = (inputValue) => {
+			_inputValue.value = inputValue;
+			emit("update:inputValue", inputValue);
+			emit("inputValueChange", inputValue);
+		};
+		const handleMultipleSelect = (key, ev) => {
+			if (!computedValueKeys.value.includes(key)) {
+				if (enabledOptionKeys.value.includes(key)) if (props.limit > 0 && computedValueKeys.value.length >= props.limit) {
+					const info = optionInfoMap.get(key);
+					emit("exceedLimit", info === null || info === void 0 ? void 0 : info.value, ev);
+				} else updateValue(computedValueKeys.value.concat(key));
+			} else updateValue(computedValueKeys.value.filter((valueKeyItem) => valueKeyItem !== key));
+			if (!retainInputValue.value) updateInputValue("");
+		};
+		const handleSingleSelect = (key) => {
+			if (key !== computedValueKeys.value[0]) updateValue([key]);
+			if (retainInputValue.value) {
+				const optionInfo = optionInfoMap.get(key);
+				if (optionInfo) updateInputValue(optionInfo.label);
+			}
+			handlePopupVisibleChange(false);
+		};
+		const handleSelect = (key, ev) => {
+			if (props.multiple) {
+				handleMultipleSelect(key, ev);
+				return;
+			}
+			handleSingleSelect(key);
+		};
+		const handleSearch = debounce((value) => {
+			emit("search", value);
+		}, props.searchDelay);
+		const handleInputValueChange = (inputValue) => {
+			if (inputValue === computedInputValue.value) return;
+			if (!computedPopupVisible.value) handlePopupVisibleChange(true);
+			updateInputValue(inputValue);
+			if (mergedAllowSearch.value) handleSearch(inputValue);
+		};
+		const handleRemove = (key) => {
+			const optionInfo = optionInfoMap.get(key);
+			updateValue(computedValueKeys.value.filter((currentKey) => currentKey !== key));
+			emit("remove", optionInfo === null || optionInfo === void 0 ? void 0 : optionInfo.value);
+		};
+		const handleClear = (event) => {
+			event.stopPropagation();
+			const newKeys = computedValueKeys.value.filter((key) => {
+				var _optionInfoMap$get3;
+				return (_optionInfoMap$get3 = optionInfoMap.get(key)) === null || _optionInfoMap$get3 === void 0 ? void 0 : _optionInfoMap$get3.disabled;
+			});
+			updateValue(newKeys);
+			updateInputValue("");
+			emit("clear", event);
+		};
+		const handleDropdownScroll = (event) => {
+			emit("dropdownScroll", event);
+		};
+		const handleDropdownReachBottom = (event) => {
+			emit("dropdownReachBottom", event);
+		};
+		const { validOptions, optionInfoMap, validOptionInfos, enabledOptionKeys, activeKey, setActiveKey, handleKeyDown } = useSelect({
+			multiple,
+			options,
+			extraOptions,
+			inputValue: computedInputValue,
+			filterOption,
+			showExtraOptions,
+			component,
+			valueKey,
+			fieldNames: toRef(props, "fieldNames"),
+			loading,
+			popupVisible: computedPopupVisible,
+			valueKeys: computedValueKeys,
+			dropdownRef,
+			optionRefs,
+			virtualListRef,
+			defaultActiveFirstOption,
+			onSelect: handleSelect,
+			onPopupVisibleChange: handlePopupVisibleChange
+		});
+		const selectViewValue = computed(() => {
+			const result = [];
+			for (const item of computedValueObjects.value) {
+				var _optionInfo$label;
+				const optionInfo = optionInfoMap.get(item.key);
+				if (!optionInfo) continue;
+				result.push(_objectSpread2(_objectSpread2({}, optionInfo), {}, {
+					value: item.key,
+					label: (_optionInfo$label = optionInfo.label) !== null && _optionInfo$label !== void 0 ? _optionInfo$label : String(isObject(item.value) ? item.value[valueKey.value] : item.value),
+					closable: !optionInfo.disabled,
+					tagProps: optionInfo.tagProps,
+					option: optionInfo.raw
+				}));
+			}
+			return result;
+		});
+		const triggerValue = computed(() => {
+			const values = computedValueObjects.value.map((item) => item.value);
+			return props.multiple ? values : values[0];
+		});
+		const triggerDisplayValue = computed(() => {
+			var _labels$;
+			const labels = selectViewValue.value.map((item) => String(item.label));
+			return props.multiple ? labels : (_labels$ = labels[0]) !== null && _labels$ !== void 0 ? _labels$ : "";
+		});
+		const triggerSelectedOptions = computed(() => selectViewValue.value.map((item) => item.option).filter((option) => Boolean(option)));
+		const optionPrefixCls = getPrefixCls("select-option");
+		const groupPrefixCls = getPrefixCls("select-group");
+		const optionInstanceUid = getCurrentInstance().uid;
+		const optionId = (key) => `${optionPrefixCls}-${optionInstanceUid}-${key}`;
+		const isOptionVisible = (optionInfo) => isValidOption(optionInfo, {
+			inputValue: computedInputValue.value,
+			filterOption: filterOption.value
+		});
+		const isOptionSelected = (optionInfo) => computedValueKeys.value.includes(optionInfo.key);
+		const getOptionClass = (optionInfo) => [optionPrefixCls, {
+			[`${optionPrefixCls}-disabled`]: optionInfo.disabled,
+			[`${optionPrefixCls}-selected`]: isOptionSelected(optionInfo),
+			[`${optionPrefixCls}-active`]: activeKey.value === optionInfo.key,
+			[`${optionPrefixCls}-multiple`]: props.multiple
+		}];
+		const setOptionRef = (key, value) => {
+			var _value$$el;
+			const element = (_value$$el = value === null || value === void 0 ? void 0 : value.$el) !== null && _value$$el !== void 0 ? _value$$el : value;
+			if (element instanceof HTMLElement) optionRefs.value[key] = element;
+		};
+		const handleOptionClick = (optionInfo, event) => {
+			if (!optionInfo.disabled) handleSelect(optionInfo.key, event);
+		};
+		const handleOptionMouseEnter = (optionInfo) => {
+			if (!optionInfo.disabled) setActiveKey(optionInfo.key);
+		};
+		const handleOptionMouseLeave = (optionInfo) => {
+			if (!optionInfo.disabled) setActiveKey();
+		};
+		const renderLabel = ({ data }) => {
+			var _data$label;
+			if (slots.label && data) {
+				var _data$option, _optionInfoMap$get4;
+				const optionData = (_data$option = data.option) !== null && _data$option !== void 0 ? _data$option : (_optionInfoMap$get4 = optionInfoMap.get(data.value)) === null || _optionInfoMap$get4 === void 0 ? void 0 : _optionInfoMap$get4.raw;
+				if (optionData) return slots.label({ data: optionData });
+			}
+			return (_data$label = data.label) !== null && _data$label !== void 0 ? _data$label : "";
+		};
+		const renderTag = ({ data }) => {
+			var _data$option2, _optionInfoMap$get5, _slots$tag, _slots$tag2;
+			const optionData = (_data$option2 = data.option) !== null && _data$option2 !== void 0 ? _data$option2 : (_optionInfoMap$get5 = optionInfoMap.get(data.value)) === null || _optionInfoMap$get5 === void 0 ? void 0 : _optionInfoMap$get5.raw;
+			if (!optionData) return renderLabel({ data });
+			return (_slots$tag = (_slots$tag2 = slots.tag) === null || _slots$tag2 === void 0 ? void 0 : _slots$tag2.call(slots, { data: optionData })) !== null && _slots$tag !== void 0 ? _slots$tag : renderLabel({ data });
+		};
+		__expose({
+			focus: () => {
+				var _selectViewRef$value, _selectViewRef$value$;
+				return (_selectViewRef$value = selectViewRef.value) === null || _selectViewRef$value === void 0 || (_selectViewRef$value$ = _selectViewRef$value.focus) === null || _selectViewRef$value$ === void 0 ? void 0 : _selectViewRef$value$.call(_selectViewRef$value);
+			},
+			blur: () => {
+				var _selectViewRef$value2, _selectViewRef$value3;
+				return (_selectViewRef$value2 = selectViewRef.value) === null || _selectViewRef$value2 === void 0 || (_selectViewRef$value3 = _selectViewRef$value2.blur) === null || _selectViewRef$value3 === void 0 ? void 0 : _selectViewRef$value3.call(_selectViewRef$value2);
+			}
+		});
+		const comboboxInputAttrs = computed(() => ({
+			"role": "combobox",
+			"aria-expanded": computedPopupVisible.value,
+			"aria-autocomplete": mergedAllowSearch.value ? "list" : "none",
+			"aria-activedescendant": activeKey.value ? optionId(activeKey.value) : void 0
+		}));
+		const triggerSlotProps = computed(() => ({
+			value: triggerValue.value,
+			displayValue: triggerDisplayValue.value,
+			inputValue: computedInputValue.value,
+			selectedOptions: triggerSelectedOptions.value,
+			popupVisible: computedPopupVisible.value,
+			disabled: mergedDisabled.value,
+			loading: props.loading,
+			multiple: props.multiple
+		}));
+		const triggerBindings = computed(() => {
+			var _props$floatingOption, _props$triggerProps;
+			return _objectSpread2(_objectSpread2({
+				trigger: "click",
+				position: "bl",
+				popupOffset: 4,
+				animationName: "slide-dynamic-origin",
+				hideEmpty: true,
+				preventFocus: true,
+				autoFitPopupWidth: true,
+				autoFitTransformOrigin: true,
+				ariaHasPopup: "listbox",
+				disabled: mergedDisabled.value,
+				popupVisible: computedPopupVisible.value,
+				unmountOnClose: props.unmountOnClose,
+				clickToClose: !(mergedAllowSearch.value || props.allowCreate),
+				popupContainer: props.popupContainer,
+				onPopupVisibleChange: handlePopupVisibleChange
+			}, props.triggerProps), {}, { floatingOptions: (_props$floatingOption = props.floatingOptions) !== null && _props$floatingOption !== void 0 ? _props$floatingOption : (_props$triggerProps = props.triggerProps) === null || _props$triggerProps === void 0 ? void 0 : _props$triggerProps.floatingOptions });
+		});
+		const selectViewBindings = computed(() => _objectSpread2(_objectSpread2({
+			modelValue: selectViewValue.value,
+			inputValue: computedInputValue.value,
+			multiple: props.multiple,
+			disabled: mergedDisabled.value,
+			error: mergedError.value,
+			loading: props.loading,
+			allowClear: mergedAllowClear.value,
+			allowCreate: props.allowCreate,
+			allowSearch: Boolean(mergedAllowSearch.value),
+			showArrow: props.showArrow,
+			opened: computedPopupVisible.value,
+			maxTagCount: props.maxTagCount,
+			placeholder: props.placeholder,
+			fitWidth: props.fitWidth,
+			maxWFull: props.maxWFull,
+			bordered: props.bordered,
+			size: mergedSize.value,
+			tagNowrap: props.tagNowrap,
+			inputAttrs: comboboxInputAttrs.value,
+			onInputValueChange: handleInputValueChange,
+			onKeydown: handleKeyDown,
+			onRemove: handleRemove,
+			onClear: handleClear
+		}, attrs), {}, { class: [prefixCls, attrs.class] }));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createVNode(unref(DefineOptionLabel), null, {
+					default: withCtx(({ label }) => [props.ellipsis === false ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(label), 1)], 64)) : (openBlock(), createBlock(resolveDynamicComponent(props.ellipsis === "performant-ellipsis" ? unref(PerformantEllipsis) : unref(Ellipsis)), { key: 1 }, {
+						default: withCtx(() => [createTextVNode(toDisplayString(label), 1)]),
+						_: 2
+					}, 1024))]),
+					_: 1
+				}),
+				createVNode(unref(DefineOptionContent), null, {
+					default: withCtx(({ optionInfo }) => [unref(slots).option ? renderSlot(_ctx.$slots, "option", { data: optionInfo.raw }, void 0, void 0, 0) : (openBlock(), createBlock(unref(ReuseOptionLabel), {
+						key: 1,
+						label: optionInfo.label
+					}, null, 8, ["label"]))]),
+					_: 3
+				}),
+				createVNode(unref(DefineOption), null, {
+					default: withCtx(({ optionInfo }) => [unref(isGroupOptionInfo)(optionInfo) ? (openBlock(), createElementBlock("li", {
+						key: optionInfo.key,
+						role: "group",
+						"aria-label": optionInfo.label,
+						class: normalizeClass(unref(groupPrefixCls))
+					}, [createElementVNode("div", { class: normalizeClass(`${unref(groupPrefixCls)}-title`) }, [createVNode(unref(ReuseOptionLabel), { label: optionInfo.label }, null, 8, ["label"])], 2), (openBlock(true), createElementBlock(Fragment, null, renderList(optionInfo.options, (child) => {
+						return openBlock(), createBlock(unref(ReuseOption), {
+							key: child.key,
+							"option-info": child
+						}, null, 8, ["option-info"]);
+					}), 128))], 10, _hoisted_1)) : isOptionVisible(optionInfo) ? (openBlock(), createBlock(resolveDynamicComponent(component.value), {
+						id: optionId(optionInfo.key),
+						key: optionInfo.key,
+						ref: (element) => setOptionRef(optionInfo.key, element),
+						class: normalizeClass(getOptionClass(optionInfo)),
+						role: "option",
+						"aria-selected": isOptionSelected(optionInfo),
+						"aria-disabled": optionInfo.disabled || void 0,
+						onClick: ($event) => handleOptionClick(optionInfo, $event),
+						onMouseenter: ($event) => handleOptionMouseEnter(optionInfo),
+						onMouseleave: ($event) => handleOptionMouseLeave(optionInfo)
+					}, {
+						default: withCtx(() => [props.multiple ? (openBlock(), createBlock(unref(Checkbox), {
+							key: 0,
+							class: normalizeClass(`${unref(optionPrefixCls)}-checkbox`),
+							"model-value": isOptionSelected(optionInfo),
+							disabled: optionInfo.disabled,
+							"uninject-group-context": ""
+						}, {
+							default: withCtx(() => [createVNode(unref(ReuseOptionContent), { "option-info": optionInfo }, null, 8, ["option-info"])]),
+							_: 2
+						}, 1032, [
+							"class",
+							"model-value",
+							"disabled"
+						])) : (openBlock(), createElementBlock("span", {
+							key: 1,
+							class: normalizeClass(`${unref(optionPrefixCls)}-content`)
+						}, [createVNode(unref(ReuseOptionContent), { "option-info": optionInfo }, null, 8, ["option-info"])], 2))]),
+						_: 2
+					}, 1064, [
+						"id",
+						"class",
+						"aria-selected",
+						"aria-disabled",
+						"onClick",
+						"onMouseenter",
+						"onMouseleave"
+					])) : createCommentVNode("", true)]),
+					_: 1
+				}),
+				createVNode(unref(Tooltip), {
+					"popup-visible": unref(tipVisible),
+					content: unref(readonlyTipText),
+					position: "top"
+				}, {
+					default: withCtx(() => [createVNode(unref(Trigger), normalizeProps(guardReactiveProps(triggerBindings.value)), {
+						content: withCtx(() => [createVNode(select_dropdown_default, {
+							ref_key: "dropdownRef",
+							ref: dropdownRef,
+							loading: props.loading,
+							"spin-props": mergedSpinProps.value,
+							empty: unref(validOptionInfos).length === 0,
+							"virtual-list": Boolean(resolvedVirtualListProps.value),
+							scrollbar: props.scrollbar,
+							"show-header-on-empty": props.showHeaderOnEmpty,
+							"show-footer-on-empty": props.showFooterOnEmpty,
+							onScroll: handleDropdownScroll,
+							onReachBottom: handleDropdownReachBottom
+						}, createSlots({
+							"virtual-list": withCtx(() => [createVNode(unref(virtual_list_default), mergeProps(resolvedVirtualListProps.value, {
+								ref_key: "virtualListRef",
+								ref: virtualListRef,
+								items: unref(validOptions)
+							}), {
+								item: withCtx(({ item }) => [createVNode(unref(ReuseOption), { "option-info": item }, null, 8, ["option-info"])]),
+								_: 1
+							}, 16, ["items"])]),
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(validOptions), (optionInfo) => {
+								return openBlock(), createBlock(unref(ReuseOption), {
+									key: optionInfo.key,
+									"option-info": optionInfo
+								}, null, 8, ["option-info"]);
+							}), 128))]),
+							_: 2
+						}, [
+							_ctx.$slots.empty ? {
+								name: "empty",
+								fn: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
+								key: "0"
+							} : void 0,
+							_ctx.$slots.header ? {
+								name: "header",
+								fn: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
+								key: "1"
+							} : void 0,
+							_ctx.$slots.footer ? {
+								name: "footer",
+								fn: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
+								key: "2"
+							} : void 0
+						]), 1032, [
+							"loading",
+							"spin-props",
+							"empty",
+							"virtual-list",
+							"scrollbar",
+							"show-header-on-empty",
+							"show-footer-on-empty"
+						])]),
+						default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps(triggerSlotProps.value)), () => [createVNode(select_view_default, mergeProps(selectViewBindings.value, {
+							ref_key: "selectViewRef",
+							ref: selectViewRef
+						}), createSlots({
+							label: withCtx((slotProps) => [createVNode(VNodeRenderer, { content: renderLabel(slotProps) }, null, 8, ["content"])]),
+							tag: withCtx((slotProps) => [createVNode(VNodeRenderer, { content: renderTag(slotProps) }, null, 8, ["content"])]),
+							_: 2
+						}, [
+							_ctx.$slots.prefix ? {
+								name: "prefix",
+								fn: withCtx(() => [renderSlot(_ctx.$slots, "prefix")]),
+								key: "0"
+							} : void 0,
+							_ctx.$slots["arrow-icon"] ? {
+								name: "arrow-icon",
+								fn: withCtx(() => [renderSlot(_ctx.$slots, "arrow-icon")]),
+								key: "1"
+							} : void 0,
+							_ctx.$slots["loading-icon"] ? {
+								name: "loading-icon",
+								fn: withCtx(() => [renderSlot(_ctx.$slots, "loading-icon")]),
+								key: "2"
+							} : void 0,
+							_ctx.$slots["search-icon"] ? {
+								name: "search-icon",
+								fn: withCtx(() => [renderSlot(_ctx.$slots, "search-icon")]),
+								key: "3"
+							} : void 0
+						]), 1040)])]),
+						_: 3
+					}, 16)]),
+					_: 3
+				}, 8, ["popup-visible", "content"])
+			], 64);
+		};
+	}
+}));
+//#endregion
+export { select_vue_vue_type_script_setup_true_lang_default as default };