@v-c/select 1.0.20 → 1.0.21

package/dist/BaseSelect/Polite.js

@@ -1,5 +1,6 @@
 import { createVNode, defineComponent, isVNode } from "vue";
-var Polite_default = /* @__PURE__ */ defineComponent((props) => {
+//#region src/BaseSelect/Polite.tsx
+var Polite = /* @__PURE__ */ defineComponent((props) => {
 	return () => {
 		const { visible, values } = props;
 		if (!visible) return null;
@@ -19,16 +20,15 @@ var Polite_default = /* @__PURE__ */ defineComponent((props) => {
 	props: {
 		visible: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		values: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		}
 	},
 	name: "Polite",
 	inheritAttrs: false
 });
-export { Polite_default as default };
+//#endregion
+export { Polite as default };

package/dist/BaseSelect/index.js

@@ -1,23 +1,31 @@
-import { useBaseSelectProvider } from "../hooks/useBaseProps.js";
-import { getSeparatedContent, isValidCount } from "../utils/valueUtil.js";
 import { useAllowClear } from "../hooks/useAllowClear.js";
+import { useBaseSelectProvider } from "../hooks/useBaseProps.js";
 import useComponents from "../hooks/useComponents.js";
 import useLock from "../hooks/useLock.js";
 import useOpen, { macroTask } from "../hooks/useOpen.js";
 import useSelectTriggerControl, { isInside } from "../hooks/useSelectTriggerControl.js";
 import "../hooks/index.js";
-import SelectInput_default from "../SelectInput/index.js";
-import SelectTrigger_default from "../SelectTrigger.js";
-import Polite_default from "./Polite.js";
+import SelectInput from "../SelectInput/index.js";
+import SelectTrigger from "../SelectTrigger.js";
+import { getSeparatedContent, isValidCount } from "../utils/valueUtil.js";
+import Polite from "./Polite.js";
 import { Fragment, computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
 import { clsx } from "@v-c/util";
+import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
 import { KeyCodeStr } from "@v-c/util/dist/KeyCode";
 import omit from "@v-c/util/dist/omit";
-import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
+//#region src/BaseSelect/index.tsx
+/**
+* ZombieJ:
+* We are currently refactoring the semantic structure of the component. Changelog:
+* - Remove `suffixIcon` and change to `suffix`.
+* - Add `components.root` for replacing response element.
+*   - Remove `getInputElement` and `getRawInputElement` since we can use `components.input` instead.
+*/
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const isMultiple = (mode) => mode === "tags" || mode === "multiple";
+var isMultiple = (mode) => mode === "tags" || mode === "multiple";
 var omitKeys = [
 	"id",
 	"prefixCls",
@@ -76,7 +84,7 @@ var omitKeys = [
 	"onMouseDown",
 	"components"
 ];
-const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
+var BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
 	const mode = computed(() => props.mode);
 	const getInputElement = computed(() => props.getInputElement);
 	const getRawInputElement = computed(() => props.getRawInputElement);
@@ -90,6 +98,7 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 	const containerRef = shallowRef();
 	const triggerRef = shallowRef();
 	const listRef = shallowRef();
+	/** Used for component focused management */
 	const focused = shallowRef(false);
 	expose({
 		focus: (...args) => containerRef.value?.focus?.(...args),
@@ -134,6 +143,8 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 		return ret;
 	};
 	const onInternalSearchSubmit = (searchText) => {
+		const { maxCount } = props;
+		if (multiple.value && isValidCount(maxCount) && displayValues.value.length >= maxCount) return;
 		if (!searchText || !searchText.trim()) return;
 		props?.onSearch?.(searchText, { source: "submit" });
 	};
@@ -146,6 +157,12 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 			focused.value = false;
 		}
 	}, { immediate: true });
+	/**
+	* We record input value here to check if can press to clean up by backspace
+	* - null: Key is not down, this is reset by key up
+	* - true: Search text is empty when first time backspace down
+	* - false: Search text is not empty when first time backspace down
+	*/
 	const [getClearLock, setClearLock] = useLock();
 	const keyLockRef = shallowRef(false);
 	const onInternalKeyDown = (event) => {
@@ -288,7 +305,7 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 			[`${prefixCls}-customize-input`]: customizeInputElement,
 			[`${prefixCls}-show-search`]: showSearch
 		});
-		let renderNode = createVNode(SelectInput_default, mergeProps(attrs, omit(props, omitKeys), {
+		let renderNode = createVNode(SelectInput, mergeProps(attrs, omit(props, omitKeys), {
 			"ref": containerRef,
 			"prefixCls": prefixCls,
 			"className": mergedClassName,
@@ -318,7 +335,7 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 		const _renderNode = function() {
 			return renderNode;
 		}();
-		renderNode = createVNode(SelectTrigger_default, {
+		renderNode = createVNode(SelectTrigger, {
 			"ref": triggerRef,
 			"disabled": disabled.value ?? false,
 			"prefixCls": prefixCls,
@@ -341,7 +358,7 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 			"onPopupMouseDown": onInternalMouseDown,
 			"onPopupBlur": onRootBlur
 		}, _isSlot(renderNode) ? renderNode : { default: () => [_renderNode] });
-		return createVNode(Fragment, null, [createVNode(Polite_default, {
+		return createVNode(Fragment, null, [createVNode(Polite, {
 			"visible": focused.value && !mergedOpen.value,
 			"values": displayValues.value
 		}, null), renderNode]);
@@ -699,13 +716,11 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 		},
 		id: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		omitDomProps: {
 			type: Array,
@@ -714,13 +729,11 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 		},
 		displayValues: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onDisplayValuesChange: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		activeValue: {
 			type: String,
@@ -739,8 +752,7 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 		},
 		searchValue: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		autoClearSearchValue: {
 			type: Boolean,
@@ -749,22 +761,17 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 		},
 		onSearch: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onSearchSplit: {
 			type: Function,
 			required: false,
 			default: void 0
 		},
-		OptionList: {
-			required: true,
-			default: void 0
-		},
+		OptionList: { required: true },
 		emptyOptions: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		}
 	}, {
 		showScrollBar: "optional",
@@ -774,4 +781,5 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 	name: "BaseSelect",
 	inheritAttrs: false
 });
+//#endregion
 export { BaseSelect, isMultiple };

package/dist/OptGroup.js

@@ -1,4 +1,5 @@
+//#region src/OptGroup.tsx
 var OptGroup = () => null;
 OptGroup.isSelectOptGroup = true;
-var OptGroup_default = OptGroup;
-export { OptGroup_default as default };
+//#endregion
+export { OptGroup as default };

package/dist/Option.js

@@ -1,4 +1,5 @@
+//#region src/Option.tsx
 var Option = () => null;
 Option.isSelectOption = true;
-var Option_default = Option;
-export { Option_default as default };
+//#endregion
+export { Option as default };

package/dist/OptionList.js

@@ -1,17 +1,22 @@
 import useBaseProps from "./hooks/useBaseProps.js";
+import TransBtn from "./TransBtn.js";
 import { useSelectContext } from "./SelectContext.js";
-import TransBtn_default from "./TransBtn.js";
-import { isPlatformMac } from "./utils/platformUtil.js";
 import { isValidCount } from "./utils/valueUtil.js";
+import { isPlatformMac } from "./utils/platformUtil.js";
 import { Fragment, computed, createVNode, defineComponent, mergeProps, shallowRef, watch } from "vue";
 import { clsx } from "@v-c/util";
 import KeyCode from "@v-c/util/dist/KeyCode";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
 import List from "@v-c/virtual-list";
+//#region src/OptionList.tsx
 function isTitleType(content) {
 	return typeof content === "string" || typeof content === "number";
 }
-var OptionList_default = /* @__PURE__ */ defineComponent({
+/**
+* Using virtual list of option display.
+* Will fallback to dom if use customize render.
+*/
+var OptionList = /* @__PURE__ */ defineComponent({
 	name: "OptionList",
 	inheritAttrs: false,
 	setup(_, { expose }) {
@@ -77,7 +82,7 @@ var OptionList_default = /* @__PURE__ */ defineComponent({
 			() => baseProps.value?.open,
 			() => baseProps.value?.searchValue,
 			() => memoFlattenOptions.value.length
-		], (_$1, __, onCleanup) => {
+		], (_, __, onCleanup) => {
 			let timeoutId;
 			const rawValues = context.value?.rawValues;
 			if (!baseProps.value?.multiple && baseProps.value?.open && rawValues?.size === 1) {
@@ -251,7 +256,7 @@ var OptionList_default = /* @__PURE__ */ defineComponent({
 						...contextStyles?.popup?.listItem,
 						...style
 					}
-				}), [createVNode("div", { "class": `${optionPrefixCls}-content` }, [typeof optionRender === "function" ? optionRender(item, { index: itemIndex }) : content]), iconVisible && createVNode(TransBtn_default, {
+				}), [createVNode("div", { "class": `${optionPrefixCls}-content` }, [typeof optionRender === "function" ? optionRender(item, { index: itemIndex }) : content]), iconVisible && createVNode(TransBtn, {
 					"className": `${itemPrefixCls.value}-option-state`,
 					"customizeIcon": menuItemSelectedIcon,
 					"customizeIconProps": {
@@ -264,4 +269,5 @@ var OptionList_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-export { OptionList_default as default };
+//#endregion
+export { OptionList as default };

package/dist/Select.js

@@ -1,18 +1,19 @@
-import { useSelectProvider } from "./SelectContext.js";
-import { fillFieldNames, flattenOptions, injectPropsWithOption } from "./utils/valueUtil.js";
-import OptionList_default from "./OptionList.js";
 import useCache from "./hooks/useCache.js";
 import { hasValue, isComboNoValue, toArray } from "./utils/commonUtil.js";
 import useFilterOptions from "./hooks/useFilterOptions.js";
 import useOptions from "./hooks/useOptions.js";
 import useRefFunc from "./hooks/useRefFunc.js";
 import useSearchConfig from "./hooks/useSearchConfig.js";
+import { useSelectProvider } from "./SelectContext.js";
+import { fillFieldNames, flattenOptions, injectPropsWithOption } from "./utils/valueUtil.js";
 import { BaseSelect, isMultiple } from "./BaseSelect/index.js";
+import OptionList from "./OptionList.js";
 import { convertChildrenToData } from "./utils/legacyUtil.js";
 import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, toRef, watch } from "vue";
-import useId from "@v-c/util/dist/hooks/useId";
 import omit from "@v-c/util/dist/omit";
 import { filterEmpty } from "@v-c/util/dist/props-util";
+import useId from "@v-c/util/dist/hooks/useId";
+//#region src/Select.tsx
 var OMIT_DOM_PROPS = ["inputValue"];
 var omitKeyList = [
 	"id",
@@ -53,7 +54,7 @@ var omitKeyList = [
 function isRawValue(value) {
 	return !value || typeof value !== "object";
 }
-var Select_default = /* @__PURE__ */ defineComponent({
+var Select = /* @__PURE__ */ defineComponent({
 	props: /* @__PURE__ */ mergeDefaults({
 		prefixCls: {
 			type: String,
@@ -634,6 +635,7 @@ var Select_default = /* @__PURE__ */ defineComponent({
 				label: (typeof props.labelRender === "function" ? props.labelRender(item) : item.label) ?? item.value
 			}));
 		});
+		/** Convert `displayValues` to raw value type set */
 		const rawValues = computed(() => new Set(mergedValues.value.map((val) => val.value)));
 		watch(mergedValues, () => {
 			if (props.mode === "combobox") {
@@ -822,7 +824,7 @@ var Select_default = /* @__PURE__ */ defineComponent({
 				"autoClearSearchValue": searchConfig.value.autoClearSearchValue,
 				"onSearchSplit": onInternalSearchSplit,
 				"popupMatchSelectWidth": popupMatchSelectWidth,
-				"OptionList": OptionList_default,
+				"OptionList": OptionList,
 				"emptyOptions": !displayOptions.value.length,
 				"activeValue": activeValue.value || void 0,
 				"activeDescendantId": `${mergedId}_list_${accessibilityIndex.value}`
@@ -830,4 +832,5 @@ var Select_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-export { Select_default as default };
+//#endregion
+export { Select as default };

package/dist/SelectContext.js

@@ -1,4 +1,5 @@
 import { inject, provide, ref } from "vue";
+//#region src/SelectContext.ts
 var SelectContextKey = Symbol("SelectContext");
 function useSelectProvider(value) {
 	provide(SelectContextKey, value);
@@ -6,4 +7,5 @@ function useSelectProvider(value) {
 function useSelectContext() {
 	return inject(SelectContextKey, ref(null));
 }
+//#endregion
 export { useSelectContext, useSelectProvider };

package/dist/SelectInput/Affix.js

@@ -1,6 +1,7 @@
 import { createVNode, defineComponent } from "vue";
 import { filterEmpty } from "@v-c/util/dist/props-util";
-var Affix_default = /* @__PURE__ */ defineComponent((_, { attrs, slots }) => {
+//#region src/SelectInput/Affix.tsx
+var Affix = /* @__PURE__ */ defineComponent((_, { attrs, slots }) => {
 	return () => {
 		const children = filterEmpty(slots?.default?.() ?? []);
 		if (children.length < 1) return null;
@@ -10,4 +11,5 @@ var Affix_default = /* @__PURE__ */ defineComponent((_, { attrs, slots }) => {
 	name: "Affix",
 	inheritAttrs: false
 });
-export { Affix_default as default };
+//#endregion
+export { Affix as default };

package/dist/SelectInput/Content/MultipleContent.js

@@ -1,12 +1,13 @@
 import useBaseProps from "../../hooks/useBaseProps.js";
-import TransBtn_default from "../../TransBtn.js";
 import { getTitle } from "../../utils/commonUtil.js";
 import { useSelectInputContext } from "../context.js";
-import Input_default from "../Input.js";
-import Placeholder_default from "./Placeholder.js";
+import TransBtn from "../../TransBtn.js";
+import Input from "../Input.js";
+import Placeholder from "./Placeholder.js";
 import { computed, createTextVNode, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
 import Overflow from "@v-c/overflow";
+//#region src/SelectInput/Content/MultipleContent.tsx
 function itemKey(value) {
 	return value.key ?? value.value ?? "";
 }
@@ -14,7 +15,7 @@ function onPreventMouseDown(event) {
 	event.preventDefault();
 	event.stopPropagation();
 }
-var MultipleContent_default = /* @__PURE__ */ defineComponent((props, { expose }) => {
+var MultipleContent = /* @__PURE__ */ defineComponent((props, { expose }) => {
 	const selectInputContext = useSelectInputContext();
 	const baseProps = useBaseProps();
 	const inputRef = shallowRef();
@@ -59,7 +60,7 @@ var MultipleContent_default = /* @__PURE__ */ defineComponent((props, { expose }
 	}, [createVNode("span", {
 		"class": clsx(`${selectionItemPrefixCls.value}-content`, classNamesConfig.value?.itemContent),
 		"style": stylesConfig.value?.itemContent
-	}, [content]), closable && createVNode(TransBtn_default, {
+	}, [content]), closable && createVNode(TransBtn, {
 		"className": clsx(`${selectionItemPrefixCls.value}-remove`, classNamesConfig.value?.itemRemove),
 		"style": stylesConfig.value?.itemRemove,
 		"onMouseDown": onPreventMouseDown,
@@ -104,8 +105,8 @@ var MultipleContent_default = /* @__PURE__ */ defineComponent((props, { expose }
 	};
 	return () => {
 		const { inputProps } = props;
-		const prefixNode = !displayValues.value.length && !inputValue.value ? () => createVNode(Placeholder_default, null, null) : null;
-		const suffixNode = () => createVNode(Input_default, mergeProps({
+		const prefixNode = !displayValues.value.length && !inputValue.value ? () => createVNode(Placeholder, null, null) : null;
+		const suffixNode = () => createVNode(Input, mergeProps({
 			"ref": inputRef,
 			"disabled": disabled.value,
 			"readOnly": !inputEditable.value
@@ -129,10 +130,10 @@ var MultipleContent_default = /* @__PURE__ */ defineComponent((props, { expose }
 }, {
 	props: { inputProps: {
 		type: Object,
-		required: true,
-		default: void 0
+		required: true
 	} },
 	name: "MultipleContent",
 	inheritAttrs: false
 });
-export { MultipleContent_default as default };
+//#endregion
+export { MultipleContent as default };

package/dist/SelectInput/Content/Placeholder.js

@@ -2,7 +2,8 @@ import useBaseProps from "../../hooks/useBaseProps.js";
 import { useSelectInputContext } from "../context.js";
 import { createVNode, defineComponent } from "vue";
 import { clsx } from "@v-c/util";
-var Placeholder_default = /* @__PURE__ */ defineComponent((props) => {
+//#region src/SelectInput/Content/Placeholder.tsx
+var Placeholder = /* @__PURE__ */ defineComponent((props) => {
 	const selectInputContext = useSelectInputContext();
 	const baseProps = useBaseProps();
 	return () => {
@@ -27,4 +28,5 @@ var Placeholder_default = /* @__PURE__ */ defineComponent((props) => {
 	name: "Placeholder",
 	inheritAttrs: false
 });
-export { Placeholder_default as default };
+//#endregion
+export { Placeholder as default };

package/dist/SelectInput/Content/SingleContent.js

@@ -1,12 +1,13 @@
 import useBaseProps from "../../hooks/useBaseProps.js";
-import { useSelectContext } from "../../SelectContext.js";
 import { getTitle } from "../../utils/commonUtil.js";
 import { useSelectInputContext } from "../context.js";
-import Input_default from "../Input.js";
-import Placeholder_default from "./Placeholder.js";
+import Input from "../Input.js";
+import Placeholder from "./Placeholder.js";
+import { useSelectContext } from "../../SelectContext.js";
 import { computed, createVNode, defineComponent, mergeProps, shallowRef, watch } from "vue";
 import { clsx } from "@v-c/util";
-var SingleContent_default = /* @__PURE__ */ defineComponent((props, { expose }) => {
+//#region src/SelectInput/Content/SingleContent.tsx
+var SingleContent = /* @__PURE__ */ defineComponent((props, { expose }) => {
 	const selectInputContext = useSelectInputContext();
 	const baseProps = useBaseProps();
 	const selectContext = useSelectContext();
@@ -57,12 +58,12 @@ var SingleContent_default = /* @__PURE__ */ defineComponent((props, { expose })
 				...optionStyle.value
 			},
 			"title": optionTitle.value
-		}, [displayValue.value?.label]) : displayValue.value?.label : createVNode(Placeholder_default, { "show": !mergedSearchValue.value }, null) : null;
+		}, [displayValue.value?.label]) : displayValue.value?.label : createVNode(Placeholder, { "show": !mergedSearchValue.value }, null) : null;
 		return createVNode("div", {
 			"class": clsx(`${prefixCls}-content`, showHasValueCls && `${prefixCls}-content-has-value`, mergedSearchValue.value && `${prefixCls}-content-has-search-value`, hasOptionStyle.value && `${prefixCls}-content-has-option-style`, classNames?.content),
 			"style": styles?.content,
 			"title": hasOptionStyle.value ? void 0 : optionTitle.value
-		}, [renderValue, createVNode(Input_default, mergeProps(inputProps, {
+		}, [renderValue, createVNode(Input, mergeProps(inputProps, {
 			"value": mergedSearchValue.value,
 			"maxLength": mode === "combobox" ? maxLength : void 0,
 			"onChange": (e) => {
@@ -75,10 +76,10 @@ var SingleContent_default = /* @__PURE__ */ defineComponent((props, { expose })
 }, {
 	props: { inputProps: {
 		type: Object,
-		required: true,
-		default: void 0
+		required: true
 	} },
 	name: "SingleContent",
 	inheritAttrs: false
 });
-export { SingleContent_default as default };
+//#endregion
+export { SingleContent as default };

package/dist/SelectInput/Content/index.js

@@ -1,10 +1,11 @@
 import useBaseProps from "../../hooks/useBaseProps.js";
 import { useSelectInputContext } from "../context.js";
-import MultipleContent_default from "./MultipleContent.js";
-import SingleContent_default from "./SingleContent.js";
+import MultipleContent from "./MultipleContent.js";
+import SingleContent from "./SingleContent.js";
 import { computed, createVNode, defineComponent, shallowRef } from "vue";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
-var Content_default = /* @__PURE__ */ defineComponent((_, { expose }) => {
+//#region src/SelectInput/Content/index.tsx
+var SelectContent = /* @__PURE__ */ defineComponent((_, { expose }) => {
 	const selectInputContext = useSelectInputContext();
 	const baseProps = useBaseProps();
 	const inputRef = shallowRef();
@@ -20,11 +21,11 @@ var Content_default = /* @__PURE__ */ defineComponent((_, { expose }) => {
 		tabindex: baseProps.value?.tabIndex
 	}));
 	return () => {
-		if (multiple.value) return createVNode(MultipleContent_default, {
+		if (multiple.value) return createVNode(MultipleContent, {
 			"ref": inputRef,
 			"inputProps": sharedInputProps.value
 		}, null);
-		return createVNode(SingleContent_default, {
+		return createVNode(SingleContent, {
 			"ref": inputRef,
 			"inputProps": sharedInputProps.value
 		}, null);
@@ -33,4 +34,5 @@ var Content_default = /* @__PURE__ */ defineComponent((_, { expose }) => {
 	name: "SelectContent",
 	inheritAttrs: false
 });
-export { Content_default as default };
+//#endregion
+export { SelectContent as default };

package/dist/SelectInput/Input.js

@@ -3,7 +3,8 @@ import { useSelectInputContext } from "./context.js";
 import { createVNode, defineComponent, isVNode, nextTick, shallowRef, watch } from "vue";
 import { clsx } from "@v-c/util";
 import { KeyCodeStr } from "@v-c/util/dist/KeyCode";
-var Input_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
+//#region src/SelectInput/Input.tsx
+var Input = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
 	const selectInputContext = useSelectInputContext();
 	const baseProps = useBaseProps();
 	const compositionStatusRef = shallowRef(false);
@@ -171,4 +172,5 @@ var Input_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =
 	name: "Input",
 	inheritAttrs: false
 });
-export { Input_default as default };
+//#endregion
+export { Input as default };

package/dist/SelectInput/context.js

@@ -1,4 +1,5 @@
 import { inject, provide, ref } from "vue";
+//#region src/SelectInput/context.ts
 var SelectInputKey = Symbol("SelectInputContext");
 function useSelectInputContext() {
 	return inject(SelectInputKey, ref(null));
@@ -6,4 +7,5 @@ function useSelectInputContext() {
 function useSelectInputProvider(context) {
 	provide(SelectInputKey, context);
 }
+//#endregion
 export { useSelectInputContext, useSelectInputProvider };

package/dist/SelectInput/index.js

@@ -1,13 +1,14 @@
 import useBaseProps from "../hooks/useBaseProps.js";
 import { isValidateOpenKey } from "../utils/keyUtil.js";
-import Affix_default from "./Affix.js";
+import Affix from "./Affix.js";
 import { useSelectInputProvider } from "./context.js";
-import Content_default from "./Content/index.js";
+import SelectContent from "./Content/index.js";
 import { cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
+import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
 import KeyCode from "@v-c/util/dist/KeyCode";
 import omit from "@v-c/util/dist/omit";
-import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
+//#region src/SelectInput/index.tsx
 var DEFAULT_OMIT_PROPS = [
 	"value",
 	"onChange",
@@ -39,7 +40,7 @@ function mergeVNodeProps(originProps, nextProps) {
 	});
 	return mergedProps;
 }
-var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expose, slots }) => {
+var SelectInput = /* @__PURE__ */ defineComponent((props, { attrs, expose, slots }) => {
 	const baseProps = useBaseProps();
 	const rootRef = shallowRef();
 	const inputRef = shallowRef();
@@ -133,16 +134,16 @@ var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expos
 			"onFocusin": props.onFocus,
 			"onFocusout": props.onBlur
 		}), [
-			createVNode(Affix_default, {
+			createVNode(Affix, {
 				"class": clsx(`${prefixCls.value}-prefix`, classNamesConfig.value?.prefix),
 				"style": stylesConfig.value?.prefix
 			}, { default: () => [prefix.value] }),
-			createVNode(Content_default, { "ref": inputRef }, null),
-			createVNode(Affix_default, {
+			createVNode(SelectContent, { "ref": inputRef }, null),
+			createVNode(Affix, {
 				"class": clsx(`${prefixCls.value}-suffix`, { [`${prefixCls.value}-suffix-loading`]: loading.value }, classNamesConfig.value?.suffix),
 				"style": stylesConfig.value?.suffix
 			}, { default: () => [suffix.value] }),
-			clearIcon.value && createVNode(Affix_default, {
+			clearIcon.value && createVNode(Affix, {
 				"class": clsx(`${prefixCls.value}-clear`, classNamesConfig.value?.clear),
 				"style": stylesConfig.value?.clear,
 				"onMousedown": (e) => {
@@ -157,8 +158,7 @@ var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expos
 	props: {
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		prefix: {
 			type: [
@@ -219,8 +219,7 @@ var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expos
 		},
 		displayValues: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		},
 		placeholder: {
 			type: [
@@ -317,8 +316,7 @@ var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expos
 		},
 		components: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onFocus: {
 			type: Function,
@@ -349,4 +347,5 @@ var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expos
 	name: "SelectInput",
 	inheritAttrs: false
 });
-export { SelectInput_default as default };
+//#endregion
+export { SelectInput as default };

package/dist/SelectTrigger.js

@@ -1,6 +1,7 @@
 import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
 import Trigger from "@v-c/trigger";
+//#region src/SelectTrigger.tsx
 function getBuiltInPlacements(popupMatchSelectWidth) {
 	const adjustX = popupMatchSelectWidth === true ? 0 : 1;
 	return {
@@ -42,7 +43,7 @@ function getBuiltInPlacements(popupMatchSelectWidth) {
 		}
 	};
 }
-var SelectTrigger_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
+var SelectTrigger = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
 	const mergedBuiltinPlacements = computed(() => {
 		return props?.builtinPlacements || getBuiltInPlacements(props.popupMatchSelectWidth);
 	});
@@ -87,23 +88,17 @@ var SelectTrigger_default = /* @__PURE__ */ defineComponent((props, { slots, att
 	props: /* @__PURE__ */ mergeDefaults({
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		disabled: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		visible: {
 			type: Boolean,
-			required: true,
-			default: void 0
-		},
-		popupElement: {
-			required: true,
-			default: void 0
+			required: true
 		},
+		popupElement: { required: true },
 		animation: {
 			type: String,
 			required: false,
@@ -161,8 +156,7 @@ var SelectTrigger_default = /* @__PURE__ */ defineComponent((props, { slots, att
 		},
 		empty: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onPopupVisibleChange: {
 			type: [Function, null],
@@ -171,13 +165,11 @@ var SelectTrigger_default = /* @__PURE__ */ defineComponent((props, { slots, att
 		},
 		onPopupMouseEnter: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onPopupMouseDown: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onPopupBlur: {
 			type: Function,
@@ -188,4 +180,5 @@ var SelectTrigger_default = /* @__PURE__ */ defineComponent((props, { slots, att
 	name: "SelectTrigger",
 	inheritAttrs: false
 });
-export { SelectTrigger_default as default };
+//#endregion
+export { SelectTrigger as default };

package/dist/TransBtn.js

@@ -1,6 +1,17 @@
 import { createVNode, defineComponent } from "vue";
 import { clsx } from "@v-c/util";
-var TransBtn_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+//#region src/TransBtn.tsx
+/**
+* Small wrapper for Select icons (clear/arrow/etc.).
+* Prevents default mousedown to avoid blurring or caret moves, and
+* renders a custom icon or a fallback icon span.
+*
+* DOM structure:
+* <span className={className} ...>
+*   { icon || <span className={`${className}-icon`}>{children}</span> }
+* </span>
+*/
+var TransBtn = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	return () => {
 		const { className, style, customizeIcon, customizeIconProps, onMouseDown, onClick } = props;
 		const icon = typeof customizeIcon === "function" ? customizeIcon(customizeIconProps) : customizeIcon;
@@ -24,8 +35,7 @@ var TransBtn_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	props: {
 		className: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		style: {
 			type: Object,
@@ -63,4 +73,5 @@ var TransBtn_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	name: "TransBtn",
 	inheritAttrs: false
 });
-export { TransBtn_default as default };
+//#endregion
+export { TransBtn as default };

package/dist/hooks/index.js

@@ -1,5 +1,5 @@
-import useBaseProps, { useBaseSelectProvider } from "./useBaseProps.js";
 import { useAllowClear } from "./useAllowClear.js";
+import useBaseProps, { useBaseSelectProvider } from "./useBaseProps.js";
 import useCache from "./useCache.js";
 import useComponents from "./useComponents.js";
 import useFilterOptions from "./useFilterOptions.js";

package/dist/hooks/useAllowClear.js

@@ -1,4 +1,5 @@
 import { computed } from "vue";
+//#region src/hooks/useAllowClear.tsx
 function useAllowClear(_prefixCls, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode) {
 	const allowClearConfig = computed(() => {
 		if (typeof allowClear?.value === "boolean") return { allowClear: allowClear.value };
@@ -13,4 +14,5 @@ function useAllowClear(_prefixCls, displayValues, allowClear, clearIcon, disable
 		};
 	});
 }
+//#endregion
 export { useAllowClear };

package/dist/hooks/useBaseProps.js

@@ -1,4 +1,5 @@
 import { inject, provide, ref } from "vue";
+//#region src/hooks/useBaseProps.ts
 var BaseSelectContext = Symbol("BaseSelectContext");
 function useBaseSelectProvider(context) {
 	provide(BaseSelectContext, context);
@@ -6,4 +7,5 @@ function useBaseSelectProvider(context) {
 function useBaseProps() {
 	return inject(BaseSelectContext, ref(null));
 }
+//#endregion
 export { useBaseProps as default, useBaseSelectProvider };

package/dist/hooks/useCache.js

@@ -1,4 +1,8 @@
 import { computed } from "vue";
+//#region src/hooks/useCache.ts
+/**
+* Cache `value` related LabeledValue & options.
+*/
 function useCache(labeledValues, valueOptions) {
 	const cache = {
 		values: /* @__PURE__ */ new Map(),
@@ -29,4 +33,5 @@ function useCache(labeledValues, valueOptions) {
 	};
 	return [filledLabeledValues, getOption];
 }
+//#endregion
 export { useCache as default };

package/dist/hooks/useComponents.js

@@ -1,4 +1,5 @@
 import { computed } from "vue";
+//#region src/hooks/useComponents.ts
 function useComponents(components, getInputElement, getRawInputElement) {
 	return computed(() => {
 		let { root, input } = components.value || {};
@@ -10,4 +11,5 @@ function useComponents(components, getInputElement, getRawInputElement) {
 		};
 	});
 }
+//#endregion
 export { useComponents as default };

package/dist/hooks/useFilterOptions.js

@@ -1,5 +1,6 @@
 import { injectPropsWithOption, toArray } from "../utils/commonUtil.js";
 import { computed } from "vue";
+//#region src/hooks/useFilterOptions.ts
 function includes(test, search) {
 	return toArray(test).join("").toUpperCase().includes(search);
 }
@@ -34,4 +35,5 @@ function useFilterOptions(options, fieldNames, searchValue, filterOption, option
 		return filteredOptions;
 	});
 }
+//#endregion
 export { useFilterOptions as default };

package/dist/hooks/useLock.js

@@ -1,4 +1,5 @@
 import { onUnmounted, shallowRef } from "vue";
+//#region src/hooks/useLock.ts
 function useLock(duration = 250) {
 	const lockRef = shallowRef(null);
 	const timeoutRef = shallowRef(null);
@@ -21,4 +22,5 @@ function useLock(duration = 250) {
 	}
 	return [() => !!lockRef.value, doLock];
 }
+//#endregion
 export { useLock as default };

package/dist/hooks/useOpen.js

@@ -1,4 +1,5 @@
 import { computed, onMounted, shallowRef, watch } from "vue";
+//#region src/hooks/useOpen.ts
 function internalMacroTask(fn) {
 	const channel = new MessageChannel();
 	channel.port1.onmessage = fn;
@@ -13,6 +14,15 @@ function macroTask(fn, times = 1) {
 		macroTask(fn, times - 1);
 	});
 }
+/**
+* When `open` is controlled, follow the controlled value;
+* Otherwise use uncontrolled logic.
+* Setting `open` takes effect immediately,
+* but setting it to `false` is delayed via MessageChannel.
+*
+* SSR handling: During SSR, `open` is always false to avoid Portal issues.
+* On client-side hydration, it syncs with the actual open state.
+*/
 function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
 	const rendered = shallowRef(propOpen.value ?? false);
 	onMounted(() => {
@@ -55,4 +65,5 @@ function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
 		lock
 	];
 }
+//#endregion
 export { useOpen as default, macroTask };

package/dist/hooks/useOptions.js

@@ -1,4 +1,8 @@
 import { computed } from "vue";
+//#region src/hooks/useOptions.ts
+/**
+* Parse `options` and flatten them.
+*/
 function useOptions(options, childrenOptions, fieldNames, optionFilterProp, optionLabelProp) {
 	return computed(() => {
 		let mergedOptions = [];
@@ -33,4 +37,5 @@ function useOptions(options, childrenOptions, fieldNames, optionFilterProp, opti
 		};
 	});
 }
+//#endregion
 export { useOptions as default };

package/dist/hooks/useRefFunc.js

@@ -1,4 +1,10 @@
 import { shallowRef } from "vue";
+//#region src/hooks/useRefFunc.ts
+/**
+* Same as `React.useCallback` but always return a memoized function
+* but redirect to real function.
+* In Vue, we use shallowRef to store the callback reference.
+*/
 function useRefFunc(callback) {
 	const funcRef = shallowRef(callback);
 	funcRef.value = callback;
@@ -7,4 +13,5 @@ function useRefFunc(callback) {
 	};
 	return cacheFn;
 }
+//#endregion
 export { useRefFunc as default };

package/dist/hooks/useSearchConfig.js

@@ -1,4 +1,5 @@
 import { computed } from "vue";
+//#region src/hooks/useSearchConfig.ts
 function useSearchConfig(showSearch, props, mode) {
 	const { filterOption, searchValue, optionFilterProp, filterSort, onSearch, autoClearSearchValue } = props;
 	return [computed(() => {
@@ -18,4 +19,5 @@ function useSearchConfig(showSearch, props, mode) {
 		return config;
 	})];
 }
+//#endregion
 export { useSearchConfig as default };

package/dist/hooks/useSelectTriggerControl.js

@@ -1,4 +1,5 @@
 import { onMounted, onUnmounted } from "vue";
+//#region src/hooks/useSelectTriggerControl.ts
 function isInside(elements, target) {
 	return elements.filter((element) => element).some((element) => element.contains(target) || element === target);
 }
@@ -17,4 +18,5 @@ function useSelectTriggerControl(elements, open, triggerOpen, customizedTrigger)
 		});
 	});
 }
+//#endregion
 export { useSelectTriggerControl as default, isInside };

package/dist/index.js

@@ -1,10 +1,12 @@
-import OptGroup_default from "./OptGroup.js";
-import Option_default from "./Option.js";
 import useBaseProps from "./hooks/useBaseProps.js";
-import { useSelectContext, useSelectProvider } from "./SelectContext.js";
-import OptionList_default from "./OptionList.js";
 import "./hooks/index.js";
+import { useSelectContext, useSelectProvider } from "./SelectContext.js";
 import { BaseSelect } from "./BaseSelect/index.js";
-import Select_default from "./Select.js";
-var src_default = Select_default;
-export { BaseSelect, OptGroup_default as OptGroup, Option_default as Option, OptionList_default as OptionList, Select_default as Select, src_default as default, useBaseProps, useSelectContext, useSelectProvider };
+import OptGroup from "./OptGroup.js";
+import Option from "./Option.js";
+import OptionList from "./OptionList.js";
+import Select from "./Select.js";
+//#region src/index.ts
+var src_default = Select;
+//#endregion
+export { BaseSelect, OptGroup, Option, OptionList, Select, src_default as default, useBaseProps, useSelectContext, useSelectProvider };

package/dist/utils/commonUtil.js

@@ -1,3 +1,4 @@
+//#region src/utils/commonUtil.ts
 function toArray(value) {
 	if (value === null || value === void 0) return [];
 	return Array.isArray(value) ? value : [value];
@@ -19,12 +20,15 @@ function getTitle(item) {
 	}
 	return title;
 }
-const isClient = typeof window !== "undefined" && window.document && window.document.documentElement;
-const isBrowserClient = typeof process !== "undefined" && process.env.NODE_ENV !== "test" && isClient;
+var isClient = typeof window !== "undefined" && window.document && window.document.documentElement;
+/** Is client side and not jsdom */
+var isBrowserClient = typeof process !== "undefined" && process.env.NODE_ENV !== "test" && isClient;
 function hasValue(value) {
 	return value !== void 0 && value !== null;
 }
+/** combo mode no value judgment function */
 function isComboNoValue(value) {
 	return !value && value !== 0;
 }
+//#endregion
 export { getTitle, hasValue, injectPropsWithOption, isBrowserClient, isClient, isComboNoValue, toArray, toVueNode };

package/dist/utils/keyUtil.js

@@ -1,4 +1,6 @@
 import KeyCode from "@v-c/util/dist/KeyCode";
+//#region src/utils/keyUtil.ts
+/** keyCode Judgment function */
 function isValidateOpenKey(currentKeyCode) {
 	return !!currentKeyCode && ![
 		KeyCode.ESC,
@@ -31,4 +33,5 @@ function isValidateOpenKey(currentKeyCode) {
 		KeyCode.F12
 	].includes(currentKeyCode);
 }
+//#endregion
 export { isValidateOpenKey };

package/dist/utils/legacyUtil.js

@@ -1,4 +1,5 @@
 import { isVNode, toRaw } from "vue";
+//#region src/utils/legacyUtil.ts
 function convertNodeToOption(node) {
 	const { key, props, children } = node;
 	const { value, label, ...restProps } = props || {};
@@ -28,4 +29,5 @@ function convertChildrenToData(nodes, optionOnly = false) {
 		};
 	}).filter((data) => data !== null);
 }
+//#endregion
 export { convertChildrenToData };

package/dist/utils/platformUtil.js

@@ -1,5 +1,7 @@
+//#region src/utils/platformUtil.ts
 /* istanbul ignore file */
 function isPlatformMac() {
 	return /(mac\sos|macintosh)/i.test(navigator.appVersion);
 }
+//#endregion
 export { isPlatformMac };

package/dist/utils/valueUtil.js

@@ -1,3 +1,4 @@
+//#region src/utils/valueUtil.ts
 function getKey(data, index) {
 	const { key } = data;
 	let value;
@@ -19,6 +20,11 @@ function fillFieldNames(fieldNames, childrenAsData) {
 		groupLabel: groupLabel || mergedLabel
 	};
 }
+/**
+* Flat options into flatten list.
+* We use `optionOnly` here is aim to avoid user use nested option group.
+* Here is simply set `key` to the index if not provided.
+*/
 function flattenOptions(options, { fieldNames, childrenAsData } = {}) {
 	const flattenList = [];
 	const { label: fieldLabel, value: fieldValue, options: fieldOptions, groupLabel } = fillFieldNames(fieldNames, false);
@@ -50,6 +56,9 @@ function flattenOptions(options, { fieldNames, childrenAsData } = {}) {
 	dig(options, false);
 	return flattenList;
 }
+/**
+* Inject `props` into `option` for legacy usage
+*/
 function injectPropsWithOption(option) {
 	if (!option) return option;
 	const newOption = { ...option };
@@ -64,12 +73,13 @@ function getSeparatedContent(text, tokens, end) {
 	let match = false;
 	const separate = (str, [token, ...restTokens]) => {
 		if (!token) return [str];
-		const list$1 = str.split(token);
-		match = match || list$1.length > 1;
-		return list$1.reduce((prevList, unitStr) => [...prevList, ...separate(unitStr, restTokens)], []).filter(Boolean);
+		const list = str.split(token);
+		match = match || list.length > 1;
+		return list.reduce((prevList, unitStr) => [...prevList, ...separate(unitStr, restTokens)], []).filter(Boolean);
 	};
 	const list = separate(text, tokens);
 	if (match) return typeof end !== "undefined" ? list.slice(0, end) : list;
 	else return null;
 }
+//#endregion
 export { fillFieldNames, flattenOptions, getSeparatedContent, injectPropsWithOption, isValidCount };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/select",
   "type": "module",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -29,10 +29,10 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/overflow": "^1.0.4",
-    "@v-c/trigger": "^1.0.13",
-    "@v-c/util": "^1.0.18",
-    "@v-c/virtual-list": "^1.0.6"
+    "@v-c/overflow": "^1.0.5",
+    "@v-c/util": "^1.0.19",
+    "@v-c/trigger": "^1.0.14",
+    "@v-c/virtual-list": "^1.0.7"
   },
   "scripts": {
     "build": "vite build",