@sdata/web-vue 1.8.0 → 1.9.0

package/es/select/select.js

@@ -21,9 +21,9 @@ function _isSlot(s) {
 var DEFAULT_FIELD_NAMES = {
 	value: "value",
 	label: "label",
+	children: "children",
 	disabled: "disabled",
-	tagProps: "tagProps",
-	render: "render"
+	tagProps: "tagProps"
 };
 var select_default = /* @__PURE__ */ defineComponent({
 	name: "Select",
@@ -37,6 +37,16 @@ var select_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		value: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		modelValue: {
 			type: [
 				String,
@@ -55,7 +65,7 @@ var select_default = /* @__PURE__ */ defineComponent({
 				Object,
 				Array
 			],
-			default: (props) => isUndefined(props.multiple) ? "" : []
+			default: (props) => props.multiple ? [] : ""
 		},
 		inputValue: { type: String },
 		defaultInputValue: {
@@ -78,19 +88,23 @@ var select_default = /* @__PURE__ */ defineComponent({
 		},
 		allowClear: {
 			type: Boolean,
-			default: false
+			default: true
 		},
 		allowSearch: {
 			type: [Boolean, Object],
-			default: (props) => Boolean(props.multiple)
+			default: true
 		},
 		allowCreate: {
 			type: Boolean,
 			default: false
 		},
+		showArrow: {
+			type: Boolean,
+			default: true
+		},
 		maxTagCount: {
-			type: Number,
-			default: 0
+			type: [Number, String],
+			default: "responsive"
 		},
 		popupContainer: { type: [String, Object] },
 		bordered: {
@@ -105,10 +119,18 @@ var select_default = /* @__PURE__ */ defineComponent({
 			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
@@ -123,7 +145,6 @@ var select_default = /* @__PURE__ */ defineComponent({
 		},
 		virtualListProps: { type: Object },
 		triggerProps: { type: Object },
-		formatLabel: { type: Function },
 		fallbackOption: {
 			type: [Boolean, Function],
 			default: true
@@ -164,11 +185,14 @@ var select_default = /* @__PURE__ */ defineComponent({
 	},
 	emits: {
 		"update:modelValue": (_value) => true,
+		"update:value": (_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,
@@ -176,9 +200,10 @@ var select_default = /* @__PURE__ */ defineComponent({
 		"dropdownReachBottom": (_ev) => true,
 		"exceedLimit": (_value, _ev) => true
 	},
-	setup(props, { slots, emit, attrs }) {
-		const { size, disabled, error, options, filterOption, valueKey, multiple, popupVisible, defaultPopupVisible, showExtraOptions, modelValue, fieldNames, loading, defaultActiveFirstOption, allowClear } = toRefs(props);
+	setup(props, { slots, emit, attrs, expose }) {
+		const { size, disabled, error, options, filterOption, valueKey, multiple, value: valueProp, popupVisible, show, defaultPopupVisible, defaultShow, showExtraOptions, modelValue, fieldNames, loading, defaultActiveFirstOption, allowClear } = toRefs(props);
 		const prefixCls = getPrefixCls("select");
+		const selectViewRef = ref(null);
 		const { mergedSize, mergedDisabled, mergedError, eventHandlers } = useFormItem({
 			size,
 			disabled,
@@ -193,23 +218,29 @@ var select_default = /* @__PURE__ */ defineComponent({
 		const { computedPopupVisible, handlePopupVisibleChange } = useTrigger({
 			popupVisible,
 			defaultPopupVisible,
+			show,
+			defaultShow,
 			emit
 		});
 		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;
-			return (isArray(mergedValue) ? mergedValue : mergedValue || isNumber(mergedValue) || isString(mergedValue) || isBoolean(mergedValue) ? [mergedValue] : []).map((value) => ({
-				value,
-				key: getKeyFromValue(value, props.valueKey)
+			var _ref, _props$modelValue;
+			const mergedValue = (_ref = (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : props.value) !== null && _ref !== void 0 ? _ref : _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(modelValue, (value) => {
-			if (isUndefined(value) || isNull(value)) _value.value = multiple.value ? [] : value;
+		watch([modelValue, valueProp], ([nextModelValue, nextValue]) => {
+			const mergedValue = nextModelValue !== null && nextModelValue !== void 0 ? nextModelValue : nextValue;
+			if (isUndefined(mergedValue) || isNull(mergedValue)) _value.value = multiple.value ? [] : mergedValue;
 		});
-		const computedValueKeys = computed(() => computedValueObjects.value.map((obj) => obj.key));
-		const mergedFieldNames = computed(() => _objectSpread2(_objectSpread2({}, DEFAULT_FIELD_NAMES), fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value));
-		const _selectedOption = ref();
+		const computedValueKeys = computed(() => computedValueObjects.value.map((item) => item.key));
+		const mergedFieldNames = computed(() => _objectSpread2(_objectSpread2({}, DEFAULT_FIELD_NAMES), fieldNames.value));
+		const selectedOptionMap = ref({});
 		const getRawOptionFromValueKeys = (valueKeys) => {
 			const optionMap = {};
 			valueKeys.forEach((key) => {
@@ -218,61 +249,63 @@ var select_default = /* @__PURE__ */ defineComponent({
 			return optionMap;
 		};
 		const updateSelectedOption = (valueKeys) => {
-			_selectedOption.value = getRawOptionFromValueKeys(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 === null || valueKey === void 0 ? void 0 : valueKey.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 (!keyArray.includes(item.key) && item.value !== "") {
-					const optionInfo = optionInfoMap.get(item.key);
-					if (!optionInfo || optionInfo.origin === "extraOptions") {
-						valueArray.push(item);
-						keyArray.push(item.key);
-					}
-				}
+				for (const item of computedValueObjects.value) if (shouldAppendExtraValue(keyArray, item.key, item.value)) appendExtraValue(valueArray, keyArray, item);
 			}
 			if (props.allowCreate && computedInputValue.value) {
-				const key = getKeyFromValue(computedInputValue.value);
-				if (!keyArray.includes(key)) {
-					const optionInfo = optionInfoMap.get(key);
-					if (!optionInfo || optionInfo.origin === "extraOptions") valueArray.push({
-						value: computedInputValue.value,
-						key
-					});
-				}
+				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((obj) => {
-			var _selectedOption$value;
-			let optionInfo = getFallBackOption(obj.value);
-			const extraOptionRawInfo = (_selectedOption$value = _selectedOption.value) === null || _selectedOption$value === void 0 ? void 0 : _selectedOption$value[obj.key];
+		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;
-				else if (valueData.length > 0) for (let i = 0; i < valueData.length; i++) {
+				if (valueData.length !== extraValueObjects.value.length) {
+					extraValueObjects.value = valueData;
+					return;
+				}
+				for (let index = 0; index < valueData.length; index += 1) {
 					var _extraValueObjects$va;
-					if (valueData[i].key !== ((_extraValueObjects$va = extraValueObjects.value[i]) === null || _extraValueObjects$va === void 0 ? void 0 : _extraValueObjects$va.key)) {
+					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("");
+		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;
@@ -292,10 +325,11 @@ var select_default = /* @__PURE__ */ defineComponent({
 		};
 		const updateValue = (valueKeys) => {
 			var _eventHandlers$value, _eventHandlers$value$;
-			const value = getValueFromValueKeys(valueKeys);
-			_value.value = value;
-			emit("update:modelValue", value);
-			emit("change", value);
+			const nextValue = getValueFromValueKeys(valueKeys);
+			_value.value = nextValue;
+			emit("update:modelValue", nextValue);
+			emit("update:value", 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);
 		};
@@ -304,53 +338,58 @@ var select_default = /* @__PURE__ */ defineComponent({
 			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) {
-				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((_key) => _key !== key));
-				if (!retainInputValue.value) updateInputValue("");
-			} else {
-				if (key !== computedValueKeys.value[0]) updateValue([key]);
-				if (retainInputValue.value) {
-					const optionInfo = optionInfoMap.get(key);
-					if (optionInfo) updateInputValue(optionInfo.label);
-				}
-				handlePopupVisibleChange(false);
+				handleMultipleSelect(key, ev);
+				return;
 			}
+			handleSingleSelect(key);
 		};
 		const handleSearch = debounce((value) => {
 			emit("search", value);
 		}, props.searchDelay);
 		const handleInputValueChange = (inputValue) => {
-			if (inputValue !== computedInputValue.value) {
-				if (!computedPopupVisible.value) handlePopupVisibleChange(true);
-				updateInputValue(inputValue);
-				if (props.allowSearch) handleSearch(inputValue);
-			}
+			if (inputValue === computedInputValue.value) return;
+			if (!computedPopupVisible.value) handlePopupVisibleChange(true);
+			updateInputValue(inputValue);
+			if (props.allowSearch) handleSearch(inputValue);
 		};
 		const handleRemove = (key) => {
 			const optionInfo = optionInfoMap.get(key);
-			updateValue(computedValueKeys.value.filter((_key) => _key !== key));
+			updateValue(computedValueKeys.value.filter((currentKey) => currentKey !== key));
 			emit("remove", optionInfo === null || optionInfo === void 0 ? void 0 : optionInfo.value);
 		};
-		const handleClear = (e) => {
-			e === null || e === void 0 || e.stopPropagation();
+		const handleClear = (event) => {
+			event.stopPropagation();
 			updateValue(computedValueKeys.value.filter((key) => {
 				var _optionInfoMap$get3;
 				return (_optionInfoMap$get3 = optionInfoMap.get(key)) === null || _optionInfoMap$get3 === void 0 ? void 0 : _optionInfoMap$get3.disabled;
 			}));
 			updateInputValue("");
-			emit("clear", e);
+			emit("clear", event);
 		};
-		const handleDropdownScroll = (e) => {
-			emit("dropdownScroll", e);
+		const handleDropdownScroll = (event) => {
+			emit("dropdownScroll", event);
 		};
-		const handleDropdownReachBottom = (e) => {
-			emit("dropdownReachBottom", e);
+		const handleDropdownReachBottom = (event) => {
+			emit("dropdownReachBottom", event);
 		};
 		const { validOptions, optionInfoMap, validOptionInfos, enabledOptionKeys, handleKeyDown } = useSelect({
 			multiple,
@@ -375,25 +414,24 @@ var select_default = /* @__PURE__ */ defineComponent({
 		const selectViewValue = computed(() => {
 			const result = [];
 			for (const item of computedValueObjects.value) {
+				var _optionInfo$label;
 				const optionInfo = optionInfoMap.get(item.key);
-				if (optionInfo) {
-					var _optionInfo$label;
-					result.push(_objectSpread2(_objectSpread2({}, optionInfo), {}, {
-						value: item.key,
-						label: (_optionInfo$label = optionInfo === null || optionInfo === void 0 ? void 0 : optionInfo.label) !== null && _optionInfo$label !== void 0 ? _optionInfo$label : String(isObject(item.value) ? item.value[valueKey === null || valueKey === void 0 ? void 0 : valueKey.value] : item.value),
-						closable: !(optionInfo === null || optionInfo === void 0 ? void 0 : optionInfo.disabled),
-						tagProps: optionInfo === null || optionInfo === void 0 ? void 0 : optionInfo.tagProps
-					}));
-				}
+				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 getOptionContentFunc = (optionInfo) => {
-			if (isFunction(slots.option)) {
-				const optionSlot = slots.option;
-				return () => optionSlot({ data: optionInfo.raw });
-			}
-			if (isFunction(optionInfo.render)) return optionInfo.render;
+			if (isFunction(slots.option)) return () => {
+				var _slots$option;
+				return (_slots$option = slots.option) === null || _slots$option === void 0 ? void 0 : _slots$option.call(slots, { data: optionInfo.raw });
+			};
 			return () => optionInfo.label;
 		};
 		const renderOption = (optionInfo) => {
@@ -406,11 +444,12 @@ var select_default = /* @__PURE__ */ defineComponent({
 			}
 			if (!isValidOption(optionInfo, {
 				inputValue: computedInputValue.value,
-				filterOption: filterOption === null || filterOption === void 0 ? void 0 : filterOption.value
+				filterOption: filterOption.value
 			})) return null;
 			return createVNode(option_default, {
-				"ref": (ref) => {
-					if (ref === null || ref === void 0 ? void 0 : ref.$el) optionRefs.value[optionInfo.key] = ref.$el;
+				"ref": (refInstance) => {
+					const element = refInstance === null || refInstance === void 0 ? void 0 : refInstance.$el;
+					if (element instanceof HTMLElement) optionRefs.value[optionInfo.key] = element;
 				},
 				"key": optionInfo.key,
 				"value": optionInfo.value,
@@ -419,42 +458,54 @@ var select_default = /* @__PURE__ */ defineComponent({
 				"internal": true
 			}, { default: getOptionContentFunc(optionInfo) });
 		};
-		const renderDropDown = () => {
-			return createVNode(select_dropdown_default, {
-				"ref": dropdownRef,
-				"loading": props.loading,
-				"empty": validOptionInfos.value.length === 0,
-				"virtualList": Boolean(props.virtualListProps),
-				"scrollbar": props.scrollbar,
-				"showHeaderOnEmpty": props.showHeaderOnEmpty,
-				"showFooterOnEmpty": props.showFooterOnEmpty,
-				"onScroll": handleDropdownScroll,
-				"onReachBottom": handleDropdownReachBottom
-			}, {
-				"default": () => {
-					var _slots$default, _slots$default2;
-					return [...(_slots$default = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)) !== null && _slots$default !== void 0 ? _slots$default : [], ...validOptions.value.map(renderOption)];
-				},
-				"virtual-list": () => createVNode(virtual_list_v2_default, mergeProps(props.virtualListProps, {
-					"ref": virtualListRef,
-					"data": validOptions.value
-				}), { item: ({ item }) => renderOption(item) }),
-				"empty": slots.empty,
-				"header": slots.header,
-				"footer": slots.footer
-			});
-		};
+		const renderDropDown = () => createVNode(select_dropdown_default, {
+			"ref": dropdownRef,
+			"loading": props.loading,
+			"empty": validOptionInfos.value.length === 0,
+			"virtualList": Boolean(props.virtualListProps),
+			"scrollbar": props.scrollbar,
+			"showHeaderOnEmpty": props.showHeaderOnEmpty,
+			"showFooterOnEmpty": props.showFooterOnEmpty,
+			"onScroll": handleDropdownScroll,
+			"onReachBottom": handleDropdownReachBottom
+		}, {
+			"default": () => {
+				var _slots$default, _slots$default2;
+				return [...(_slots$default = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)) !== null && _slots$default !== void 0 ? _slots$default : [], ...validOptions.value.map(renderOption)];
+			},
+			"virtual-list": () => createVNode(virtual_list_v2_default, mergeProps(props.virtualListProps, {
+				"ref": virtualListRef,
+				"data": validOptions.value
+			}), { item: ({ item }) => renderOption(item) }),
+			"empty": slots.empty,
+			"header": slots.header,
+			"footer": slots.footer
+		});
 		const renderLabel = ({ data }) => {
 			var _data$label;
-			if ((slots.label || isFunction(props.formatLabel)) && data) {
-				const optionInfo = optionInfoMap.get(data.value);
-				if (optionInfo === null || optionInfo === void 0 ? void 0 : optionInfo.raw) {
-					var _slots$label, _slots$label2, _props$formatLabel;
-					return (_slots$label = (_slots$label2 = slots.label) === null || _slots$label2 === void 0 ? void 0 : _slots$label2.call(slots, { data: optionInfo.raw })) !== null && _slots$label !== void 0 ? _slots$label : (_props$formatLabel = props.formatLabel) === null || _props$formatLabel === void 0 ? void 0 : _props$formatLabel.call(props, optionInfo.raw);
-				}
+			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 === null || data === void 0 ? void 0 : data.label) !== null && _data$label !== void 0 ? _data$label : "";
+			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);
+			}
+		});
 		return () => createVNode(Trigger, mergeProps({
 			"trigger": "click",
 			"position": "bl",
@@ -474,6 +525,7 @@ var select_default = /* @__PURE__ */ defineComponent({
 			default: () => {
 				var _slots$trigger, _slots$trigger2;
 				return [(_slots$trigger = (_slots$trigger2 = slots.trigger) === null || _slots$trigger2 === void 0 ? void 0 : _slots$trigger2.call(slots)) !== null && _slots$trigger !== void 0 ? _slots$trigger : createVNode(select_view_default, mergeProps({
+					"ref": selectViewRef,
 					"class": prefixCls,
 					"modelValue": selectViewValue.value,
 					"inputValue": computedInputValue.value,
@@ -484,6 +536,7 @@ var select_default = /* @__PURE__ */ defineComponent({
 					"allowClear": mergedAllowClear.value,
 					"allowCreate": props.allowCreate,
 					"allowSearch": Boolean(props.allowSearch),
+					"showArrow": props.showArrow,
 					"opened": computedPopupVisible.value,
 					"maxTagCount": props.maxTagCount,
 					"placeholder": props.placeholder,
@@ -496,6 +549,7 @@ var select_default = /* @__PURE__ */ defineComponent({
 					"onKeydown": handleKeyDown
 				}, attrs), {
 					"label": renderLabel,
+					"tag": renderTag,
 					"prefix": slots.prefix,
 					"arrow-icon": slots["arrow-icon"],
 					"loading-icon": slots["loading-icon"],

package/es/select/utils.d.ts

@@ -1,5 +1,5 @@
 import type { FilterOption, SelectOptionGroup, SelectOptionGroupInfo, SelectOption, SelectOptionData, SelectOptionInfo, SelectOptionValue, SelectFieldNames } from './interface';
-export declare const isGroupOption: (option: SelectOption) => option is SelectOptionGroup;
+export declare const isGroupOption: (option: SelectOption, fieldNames?: Required<SelectFieldNames>) => option is SelectOptionGroup;
 export declare const isGroupOptionInfo: (option: SelectOptionInfo | SelectOptionGroupInfo) => option is SelectOptionGroupInfo;
 export declare const getValueString: (value: SelectOptionValue, valueKey?: string) => string;
 export declare const getKeyFromValue: (value?: SelectOptionValue, valueKey?: string) => string;

package/es/select/utils.js

@@ -1,8 +1,12 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { isBoolean, isFunction, isNumber, isObject, isString } from "../_utils/is.js";
 //#region components/select/utils.ts
-var isGroupOption = (option) => {
-	return isObject(option) && "isGroup" in option;
+var isGroupOption = (option, fieldNames) => {
+	if (!isObject(option)) return false;
+	if ("isGroup" in option) return true;
+	if (!fieldNames) return false;
+	const children = option[fieldNames.children];
+	return Array.isArray(children);
 };
 var isGroupOptionInfo = (option) => {
 	return isObject(option) && "isGroup" in option;
@@ -27,7 +31,6 @@ var createOptionInfo = (option, { valueKey, fieldNames, origin, index = -1 }) =>
 			origin,
 			value,
 			label: (_option$fieldNames$la = option[fieldNames.label]) !== null && _option$fieldNames$la !== void 0 ? _option$fieldNames$la : getValueString(value, valueKey),
-			render: option[fieldNames.render],
 			disabled: Boolean(option[fieldNames.disabled]),
 			tagProps: option[fieldNames.tagProps]
 		};
@@ -44,20 +47,35 @@ var createOptionInfo = (option, { valueKey, fieldNames, origin, index = -1 }) =>
 		origin
 	}, raw);
 };
+var createGroupInfo = (item, { valueKey, fieldNames, origin, optionInfoMap }) => {
+	var _ref, _item$options, _item$fieldNames$labe;
+	const groupOptions = (_ref = (_item$options = item.options) !== null && _item$options !== void 0 ? _item$options : item[fieldNames.children]) !== null && _ref !== void 0 ? _ref : [];
+	const groupLabel = (_item$fieldNames$labe = item[fieldNames.label]) !== null && _item$fieldNames$labe !== void 0 ? _item$fieldNames$labe : item.label;
+	const options = getOptionInfos(groupOptions, {
+		valueKey,
+		fieldNames,
+		origin,
+		optionInfoMap
+	});
+	if (options.length === 0) return null;
+	const label = typeof groupLabel === "string" ? groupLabel : "";
+	return _objectSpread2(_objectSpread2({}, item), {}, {
+		isGroup: true,
+		label,
+		options,
+		key: `__arco__group__${label}`
+	});
+};
 var getOptionInfos = (options, { valueKey, fieldNames, origin, optionInfoMap }) => {
 	const infos = [];
-	for (const item of options) if (isGroupOption(item)) {
-		var _item$options;
-		const options = getOptionInfos((_item$options = item.options) !== null && _item$options !== void 0 ? _item$options : [], {
+	for (const item of options) if (isGroupOption(item, fieldNames)) {
+		const groupInfo = createGroupInfo(item, {
 			valueKey,
 			fieldNames,
 			origin,
 			optionInfoMap
 		});
-		if (options.length > 0) infos.push(_objectSpread2(_objectSpread2({}, item), {}, {
-			key: `__arco__group__${item.label}`,
-			options
-		}));
+		if (groupInfo) infos.push(groupInfo);
 	} else {
 		const optionInfo = createOptionInfo(item, {
 			valueKey,

package/es/skeleton/index.d.ts

@@ -105,8 +105,8 @@ declare const Skeleton: {
             default: number;
         };
     }>> & Readonly<{}>, {
-        rows: number;
         lineHeight: number;
+        rows: number;
         widths: (string | number)[];
         lineSpacing: number;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/skeleton/line.vue.d.ts

@@ -39,8 +39,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: number;
     };
 }>> & Readonly<{}>, {
-    rows: number;
     lineHeight: number;
+    rows: number;
     widths: (string | number)[];
     lineSpacing: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;