@v-c/select 0.0.1

package/dist/SelectContext.cjs

@@ -0,0 +1,11 @@
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var SelectContextKey = Symbol("SelectContext");
+function useSelectProvider(value) {
+	(0, vue.provide)(SelectContextKey, value);
+}
+function useSelectContext() {
+	return (0, vue.inject)(SelectContextKey, (0, vue.ref)(null));
+}
+exports.useSelectContext = useSelectContext;
+exports.useSelectProvider = useSelectProvider;

package/dist/SelectContext.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties, Ref } from 'vue';
+import { FlattenOptionData, RawValueType, RenderNode } from './interface';
+import { BaseOptionType, FieldNames, OnActiveValue, OnInternalSelect, PopupSemantic, SelectProps, SemanticName } from './Select';
+/**
+ * SelectContext is only used for Select. BaseSelect should not consume this context.
+ */
+export interface SelectContextProps {
+    classNames?: Partial<Record<SemanticName, string>> & {
+        popup?: Partial<Record<PopupSemantic, string>>;
+    };
+    styles?: Partial<Record<SemanticName, CSSProperties>> & {
+        popup?: Partial<Record<PopupSemantic, CSSProperties>>;
+    };
+    options: BaseOptionType[];
+    optionRender?: SelectProps['optionRender'];
+    flattenOptions: FlattenOptionData[];
+    onActiveValue: OnActiveValue;
+    defaultActiveFirstOption?: boolean;
+    onSelect: OnInternalSelect;
+    menuItemSelectedIcon?: RenderNode;
+    rawValues: Set<RawValueType>;
+    fieldNames?: FieldNames;
+    virtual?: boolean;
+    direction?: 'ltr' | 'rtl';
+    listHeight?: number;
+    listItemHeight?: number;
+    childrenAsData?: boolean;
+    maxCount?: number;
+}
+declare function useSelectProvider(value: Ref<SelectContextProps>): void;
+declare function useSelectContext(): Ref<SelectContextProps | null>;
+export { useSelectContext, useSelectProvider, };

package/dist/SelectContext.js

@@ -0,0 +1,9 @@
+import { inject, provide, ref } from "vue";
+var SelectContextKey = Symbol("SelectContext");
+function useSelectProvider(value) {
+	provide(SelectContextKey, value);
+}
+function useSelectContext() {
+	return inject(SelectContextKey, ref(null));
+}
+export { useSelectContext, useSelectProvider };

package/dist/SelectInput/Affix.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+var Affix = /* @__PURE__ */ (0, vue.defineComponent)((_, { attrs, slots }) => {
+	return () => {
+		const children = (0, __v_c_util_dist_props_util.filterEmpty)(slots?.default?.() ?? []);
+		if (children.length < 1) return null;
+		return (0, vue.createVNode)("div", attrs, [children]);
+	};
+}, {
+	name: "Affix",
+	inheritAttrs: false
+});
+var Affix_default = Affix;
+exports.default = Affix_default;

package/dist/SelectInput/Affix.d.ts

@@ -0,0 +1,2 @@
+declare const Affix: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
+export default Affix;

package/dist/SelectInput/Affix.js

@@ -0,0 +1,13 @@
+import { createVNode, defineComponent } from "vue";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+var Affix_default = /* @__PURE__ */ defineComponent((_, { attrs, slots }) => {
+	return () => {
+		const children = filterEmpty(slots?.default?.() ?? []);
+		if (children.length < 1) return null;
+		return createVNode("div", attrs, [children]);
+	};
+}, {
+	name: "Affix",
+	inheritAttrs: false
+});
+export { Affix_default as default };

package/dist/SelectInput/Content/MultipleContent.cjs

@@ -0,0 +1,142 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_useBaseProps = require("../../hooks/useBaseProps.cjs");
+const require_TransBtn = require("../../TransBtn.cjs");
+const require_context = require("../context.cjs");
+const require_commonUtil = require("../../utils/commonUtil.cjs");
+const require_Input = require("../Input.cjs");
+const require_Placeholder = require("./Placeholder.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+let __v_c_overflow = require("@v-c/overflow");
+__v_c_overflow = require_rolldown_runtime.__toESM(__v_c_overflow);
+function itemKey(value) {
+	return value.key ?? value.value ?? "";
+}
+function onPreventMouseDown(event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+var MultipleContent = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose }) => {
+	const selectInputContext = require_context.useSelectInputContext();
+	const baseProps = require_useBaseProps.default();
+	const inputRef = (0, vue.shallowRef)();
+	const prefixCls = (0, vue.computed)(() => selectInputContext.value?.prefixCls ?? "");
+	const displayValues = (0, vue.computed)(() => selectInputContext.value?.displayValues ?? []);
+	const searchValue = (0, vue.computed)(() => selectInputContext.value?.searchValue ?? "");
+	const mode = (0, vue.computed)(() => selectInputContext.value?.mode);
+	const removeIconFromContext = (0, vue.computed)(() => selectInputContext.value?.removeIcon);
+	const onSelectorRemove = (0, vue.computed)(() => selectInputContext.value?.onSelectorRemove);
+	const disabled = (0, vue.computed)(() => baseProps.value?.disabled ?? false);
+	const showSearch = (0, vue.computed)(() => baseProps.value?.showSearch ?? false);
+	const triggerOpen = (0, vue.computed)(() => baseProps.value?.triggerOpen ?? false);
+	const toggleOpen = (0, vue.computed)(() => baseProps.value?.toggleOpen);
+	const autoClearSearchValue = (0, vue.computed)(() => baseProps.value?.autoClearSearchValue);
+	const tagRenderFromContext = (0, vue.computed)(() => baseProps.value?.tagRender);
+	const maxTagPlaceholderFromContext = (0, vue.computed)(() => baseProps.value?.maxTagPlaceholder);
+	const maxTagTextLength = (0, vue.computed)(() => baseProps.value?.maxTagTextLength);
+	const maxTagCount = (0, vue.computed)(() => baseProps.value?.maxTagCount);
+	const classNamesConfig = (0, vue.computed)(() => baseProps.value?.classNames);
+	const stylesConfig = (0, vue.computed)(() => baseProps.value?.styles);
+	const selectionItemPrefixCls = (0, vue.computed)(() => `${prefixCls.value}-selection-item`);
+	const computedSearchValue = (0, vue.computed)(() => {
+		if (!triggerOpen.value && mode.value === "multiple" && autoClearSearchValue.value !== false) return "";
+		return searchValue.value;
+	});
+	const inputValue = (0, vue.computed)(() => showSearch.value ? computedSearchValue.value || "" : "");
+	const inputEditable = (0, vue.computed)(() => showSearch.value && !disabled.value);
+	const removeIcon = (0, vue.computed)(() => removeIconFromContext.value ?? "×");
+	const maxTagPlaceholder = (0, vue.computed)(() => maxTagPlaceholderFromContext.value ?? ((omittedValues) => `+ ${omittedValues.length} ...`));
+	const tagRender = (0, vue.computed)(() => tagRenderFromContext.value);
+	const onToggleOpen = (newOpen) => {
+		toggleOpen.value?.(newOpen);
+	};
+	const onRemove = (value) => {
+		onSelectorRemove.value?.(value);
+	};
+	expose({ input: (0, vue.computed)(() => inputRef.value?.input) });
+	const defaultRenderSelector = (item, content, itemDisabled, closable, onClose) => (0, vue.createVNode)("span", {
+		"title": require_commonUtil.getTitle(item),
+		"class": (0, __v_c_util.clsx)(selectionItemPrefixCls.value, { [`${selectionItemPrefixCls.value}-disabled`]: itemDisabled }, classNamesConfig.value?.item),
+		"style": stylesConfig.value?.item
+	}, [(0, vue.createVNode)("span", {
+		"class": (0, __v_c_util.clsx)(`${selectionItemPrefixCls.value}-content`, classNamesConfig.value?.itemContent),
+		"style": stylesConfig.value?.itemContent
+	}, [content]), closable && (0, vue.createVNode)(require_TransBtn.default, {
+		"className": (0, __v_c_util.clsx)(`${selectionItemPrefixCls.value}-remove`, classNamesConfig.value?.itemRemove),
+		"style": stylesConfig.value?.itemRemove,
+		"onMouseDown": onPreventMouseDown,
+		"onClick": onClose,
+		"customizeIcon": removeIcon.value
+	}, { default: () => [(0, vue.createTextVNode)("×")] })]);
+	const customizeRenderSelector = (value, content, itemDisabled, closable, onClose, isMaxTag, info) => {
+		const onMouseDown = (e) => {
+			onPreventMouseDown(e);
+			onToggleOpen(!triggerOpen.value);
+		};
+		return (0, vue.createVNode)("span", { "onMousedown": onMouseDown }, [tagRender.value?.({
+			label: content,
+			value,
+			index: info?.index ?? 0,
+			disabled: itemDisabled,
+			closable: !!closable,
+			onClose,
+			isMaxTag: !!isMaxTag
+		})]);
+	};
+	const renderItem = (valueItem, info) => {
+		const { disabled: itemDisabled, label, value } = valueItem;
+		const closable = !disabled.value && !itemDisabled;
+		let displayLabel = label;
+		if (typeof maxTagTextLength.value === "number") {
+			if (typeof label === "string" || typeof label === "number") {
+				const strLabel = String(displayLabel);
+				if (strLabel.length > maxTagTextLength.value) displayLabel = `${strLabel.slice(0, maxTagTextLength.value)}...`;
+			}
+		}
+		const onClose = (event) => {
+			if (event) event.stopPropagation();
+			onRemove(valueItem);
+		};
+		return typeof tagRender.value === "function" ? customizeRenderSelector(value, displayLabel, !!itemDisabled, closable, onClose, void 0, info) : defaultRenderSelector(valueItem, displayLabel, !!itemDisabled, closable, onClose);
+	};
+	const renderRest = (omittedValues) => {
+		if (!displayValues.value.length) return null;
+		const content = typeof maxTagPlaceholder.value === "function" ? maxTagPlaceholder.value(omittedValues) : maxTagPlaceholder.value;
+		return typeof tagRender.value === "function" ? customizeRenderSelector(void 0, content, false, false, void 0, true) : defaultRenderSelector({ title: content }, content, false);
+	};
+	return () => {
+		const { inputProps } = props;
+		const prefixNode = !displayValues.value.length && (!searchValue.value || !triggerOpen.value) ? () => (0, vue.createVNode)(require_Placeholder.default, null, null) : null;
+		const suffixNode = () => (0, vue.createVNode)(require_Input.default, (0, vue.mergeProps)({
+			"ref": inputRef,
+			"disabled": disabled.value,
+			"readOnly": !inputEditable.value
+		}, inputProps, {
+			"value": inputValue.value || "",
+			"syncWidth": true
+		}), null);
+		return (0, vue.createVNode)(__v_c_overflow.default, {
+			"prefixCls": `${prefixCls.value}-content`,
+			"class": classNamesConfig.value?.content,
+			"style": stylesConfig.value?.content,
+			"prefix": prefixNode,
+			"data": displayValues.value,
+			"renderItem": renderItem,
+			"renderRest": renderRest,
+			"suffix": suffixNode,
+			"itemKey": itemKey,
+			"maxCount": maxTagCount.value
+		}, null);
+	};
+}, {
+	props: { inputProps: {
+		type: Object,
+		required: true,
+		default: void 0
+	} },
+	name: "MultipleContent",
+	inheritAttrs: false
+});
+var MultipleContent_default = MultipleContent;
+exports.default = MultipleContent_default;

package/dist/SelectInput/Content/MultipleContent.d.ts

@@ -0,0 +1,3 @@
+import { SharedContentProps } from './index';
+declare const MultipleContent: import('vue').DefineSetupFnComponent<SharedContentProps, {}, {}, SharedContentProps & {}, import('vue').PublicProps>;
+export default MultipleContent;

package/dist/SelectInput/Content/MultipleContent.js

@@ -0,0 +1,138 @@
+import useBaseProps from "../../hooks/useBaseProps.js";
+import TransBtn_default from "../../TransBtn.js";
+import { useSelectInputContext } from "../context.js";
+import { getTitle } from "../../utils/commonUtil.js";
+import Input_default from "../Input.js";
+import Placeholder_default from "./Placeholder.js";
+import { computed, createTextVNode, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+import Overflow from "@v-c/overflow";
+function itemKey(value) {
+	return value.key ?? value.value ?? "";
+}
+function onPreventMouseDown(event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+var MultipleContent_default = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const selectInputContext = useSelectInputContext();
+	const baseProps = useBaseProps();
+	const inputRef = shallowRef();
+	const prefixCls = computed(() => selectInputContext.value?.prefixCls ?? "");
+	const displayValues = computed(() => selectInputContext.value?.displayValues ?? []);
+	const searchValue = computed(() => selectInputContext.value?.searchValue ?? "");
+	const mode = computed(() => selectInputContext.value?.mode);
+	const removeIconFromContext = computed(() => selectInputContext.value?.removeIcon);
+	const onSelectorRemove = computed(() => selectInputContext.value?.onSelectorRemove);
+	const disabled = computed(() => baseProps.value?.disabled ?? false);
+	const showSearch = computed(() => baseProps.value?.showSearch ?? false);
+	const triggerOpen = computed(() => baseProps.value?.triggerOpen ?? false);
+	const toggleOpen = computed(() => baseProps.value?.toggleOpen);
+	const autoClearSearchValue = computed(() => baseProps.value?.autoClearSearchValue);
+	const tagRenderFromContext = computed(() => baseProps.value?.tagRender);
+	const maxTagPlaceholderFromContext = computed(() => baseProps.value?.maxTagPlaceholder);
+	const maxTagTextLength = computed(() => baseProps.value?.maxTagTextLength);
+	const maxTagCount = computed(() => baseProps.value?.maxTagCount);
+	const classNamesConfig = computed(() => baseProps.value?.classNames);
+	const stylesConfig = computed(() => baseProps.value?.styles);
+	const selectionItemPrefixCls = computed(() => `${prefixCls.value}-selection-item`);
+	const computedSearchValue = computed(() => {
+		if (!triggerOpen.value && mode.value === "multiple" && autoClearSearchValue.value !== false) return "";
+		return searchValue.value;
+	});
+	const inputValue = computed(() => showSearch.value ? computedSearchValue.value || "" : "");
+	const inputEditable = computed(() => showSearch.value && !disabled.value);
+	const removeIcon = computed(() => removeIconFromContext.value ?? "×");
+	const maxTagPlaceholder = computed(() => maxTagPlaceholderFromContext.value ?? ((omittedValues) => `+ ${omittedValues.length} ...`));
+	const tagRender = computed(() => tagRenderFromContext.value);
+	const onToggleOpen = (newOpen) => {
+		toggleOpen.value?.(newOpen);
+	};
+	const onRemove = (value) => {
+		onSelectorRemove.value?.(value);
+	};
+	expose({ input: computed(() => inputRef.value?.input) });
+	const defaultRenderSelector = (item, content, itemDisabled, closable, onClose) => createVNode("span", {
+		"title": getTitle(item),
+		"class": clsx(selectionItemPrefixCls.value, { [`${selectionItemPrefixCls.value}-disabled`]: itemDisabled }, classNamesConfig.value?.item),
+		"style": stylesConfig.value?.item
+	}, [createVNode("span", {
+		"class": clsx(`${selectionItemPrefixCls.value}-content`, classNamesConfig.value?.itemContent),
+		"style": stylesConfig.value?.itemContent
+	}, [content]), closable && createVNode(TransBtn_default, {
+		"className": clsx(`${selectionItemPrefixCls.value}-remove`, classNamesConfig.value?.itemRemove),
+		"style": stylesConfig.value?.itemRemove,
+		"onMouseDown": onPreventMouseDown,
+		"onClick": onClose,
+		"customizeIcon": removeIcon.value
+	}, { default: () => [createTextVNode("×")] })]);
+	const customizeRenderSelector = (value, content, itemDisabled, closable, onClose, isMaxTag, info) => {
+		const onMouseDown = (e) => {
+			onPreventMouseDown(e);
+			onToggleOpen(!triggerOpen.value);
+		};
+		return createVNode("span", { "onMousedown": onMouseDown }, [tagRender.value?.({
+			label: content,
+			value,
+			index: info?.index ?? 0,
+			disabled: itemDisabled,
+			closable: !!closable,
+			onClose,
+			isMaxTag: !!isMaxTag
+		})]);
+	};
+	const renderItem = (valueItem, info) => {
+		const { disabled: itemDisabled, label, value } = valueItem;
+		const closable = !disabled.value && !itemDisabled;
+		let displayLabel = label;
+		if (typeof maxTagTextLength.value === "number") {
+			if (typeof label === "string" || typeof label === "number") {
+				const strLabel = String(displayLabel);
+				if (strLabel.length > maxTagTextLength.value) displayLabel = `${strLabel.slice(0, maxTagTextLength.value)}...`;
+			}
+		}
+		const onClose = (event) => {
+			if (event) event.stopPropagation();
+			onRemove(valueItem);
+		};
+		return typeof tagRender.value === "function" ? customizeRenderSelector(value, displayLabel, !!itemDisabled, closable, onClose, void 0, info) : defaultRenderSelector(valueItem, displayLabel, !!itemDisabled, closable, onClose);
+	};
+	const renderRest = (omittedValues) => {
+		if (!displayValues.value.length) return null;
+		const content = typeof maxTagPlaceholder.value === "function" ? maxTagPlaceholder.value(omittedValues) : maxTagPlaceholder.value;
+		return typeof tagRender.value === "function" ? customizeRenderSelector(void 0, content, false, false, void 0, true) : defaultRenderSelector({ title: content }, content, false);
+	};
+	return () => {
+		const { inputProps } = props;
+		const prefixNode = !displayValues.value.length && (!searchValue.value || !triggerOpen.value) ? () => createVNode(Placeholder_default, null, null) : null;
+		const suffixNode = () => createVNode(Input_default, mergeProps({
+			"ref": inputRef,
+			"disabled": disabled.value,
+			"readOnly": !inputEditable.value
+		}, inputProps, {
+			"value": inputValue.value || "",
+			"syncWidth": true
+		}), null);
+		return createVNode(Overflow, {
+			"prefixCls": `${prefixCls.value}-content`,
+			"class": classNamesConfig.value?.content,
+			"style": stylesConfig.value?.content,
+			"prefix": prefixNode,
+			"data": displayValues.value,
+			"renderItem": renderItem,
+			"renderRest": renderRest,
+			"suffix": suffixNode,
+			"itemKey": itemKey,
+			"maxCount": maxTagCount.value
+		}, null);
+	};
+}, {
+	props: { inputProps: {
+		type: Object,
+		required: true,
+		default: void 0
+	} },
+	name: "MultipleContent",
+	inheritAttrs: false
+});
+export { MultipleContent_default as default };

package/dist/SelectInput/Content/Placeholder.cjs

@@ -0,0 +1,33 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_useBaseProps = require("../../hooks/useBaseProps.cjs");
+const require_context = require("../context.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+var Placeholder = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const selectInputContext = require_context.useSelectInputContext();
+	const baseProps = require_useBaseProps.default();
+	return () => {
+		const { prefixCls, placeholder, displayValues } = selectInputContext.value ?? {};
+		const { classNames, styles } = baseProps.value ?? {};
+		const { show = true } = props;
+		if (displayValues?.length) return null;
+		return (0, vue.createVNode)("div", {
+			"class": (0, __v_c_util.clsx)(`${prefixCls}-placeholder`, classNames?.placeholder),
+			"style": {
+				visibility: show ? "visible" : "hidden",
+				...styles?.placeholder
+			}
+		}, [placeholder]);
+	};
+}, {
+	props: { show: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	} },
+	name: "Placeholder",
+	inheritAttrs: false
+});
+var Placeholder_default = Placeholder;
+exports.default = Placeholder_default;

package/dist/SelectInput/Content/Placeholder.d.ts

@@ -0,0 +1,5 @@
+export interface PlaceholderProps {
+    show?: boolean;
+}
+declare const Placeholder: import('vue').DefineSetupFnComponent<PlaceholderProps, {}, {}, PlaceholderProps & {}, import('vue').PublicProps>;
+export default Placeholder;

package/dist/SelectInput/Content/Placeholder.js

@@ -0,0 +1,30 @@
+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) => {
+	const selectInputContext = useSelectInputContext();
+	const baseProps = useBaseProps();
+	return () => {
+		const { prefixCls, placeholder, displayValues } = selectInputContext.value ?? {};
+		const { classNames, styles } = baseProps.value ?? {};
+		const { show = true } = props;
+		if (displayValues?.length) return null;
+		return createVNode("div", {
+			"class": clsx(`${prefixCls}-placeholder`, classNames?.placeholder),
+			"style": {
+				visibility: show ? "visible" : "hidden",
+				...styles?.placeholder
+			}
+		}, [placeholder]);
+	};
+}, {
+	props: { show: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	} },
+	name: "Placeholder",
+	inheritAttrs: false
+});
+export { Placeholder_default as default };

package/dist/SelectInput/Content/SingleContent.cjs

@@ -0,0 +1,80 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_useBaseProps = require("../../hooks/useBaseProps.cjs");
+const require_SelectContext = require("../../SelectContext.cjs");
+const require_context = require("../context.cjs");
+const require_commonUtil = require("../../utils/commonUtil.cjs");
+const require_Input = require("../Input.cjs");
+const require_Placeholder = require("./Placeholder.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+var SingleContent = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose }) => {
+	const selectInputContext = require_context.useSelectInputContext();
+	const baseProps = require_useBaseProps.default();
+	const selectContext = require_SelectContext.useSelectContext();
+	const inputChanged = (0, vue.shallowRef)(false);
+	const combobox = (0, vue.computed)(() => selectInputContext.value?.mode === "combobox");
+	const displayValue = (0, vue.computed)(() => selectInputContext.value?.displayValues[0]);
+	const mergedSearchValue = (0, vue.computed)(() => {
+		if (combobox.value && selectInputContext.value?.activeValue && !inputChanged.value && baseProps.value?.triggerOpen) return selectInputContext.value.activeValue;
+		return baseProps.value?.showSearch ? selectInputContext.value?.searchValue : "";
+	});
+	const optionProps = (0, vue.computed)(() => {
+		let restProps = {
+			class: `${selectInputContext.value?.prefixCls}-content-value`,
+			style: { visibility: mergedSearchValue.value ? "hidden" : "visible" }
+		};
+		if (displayValue.value && selectContext.value?.flattenOptions) {
+			const option = selectContext.value.flattenOptions.find((opt) => opt.value === displayValue.value?.value);
+			if (option?.data) {
+				const { label, value, className, style, key, children,...rest } = option.data;
+				restProps = {
+					...restProps,
+					...rest,
+					title: require_commonUtil.getTitle(option.data),
+					class: (0, __v_c_util.clsx)(restProps.className, className),
+					style: {
+						...restProps.style,
+						...style
+					}
+				};
+			}
+		}
+		if (displayValue.value && !restProps.title) restProps.title = require_commonUtil.getTitle(displayValue.value);
+		if (baseProps.value?.title !== void 0) restProps.title = baseProps.value.title;
+		return restProps;
+	});
+	(0, vue.watch)([combobox, () => selectInputContext.value?.displayValues], () => {
+		if (combobox.value) inputChanged.value = false;
+	}, { immediate: true });
+	const inputRef = (0, vue.shallowRef)();
+	expose({ input: (0, vue.computed)(() => inputRef.value?.input) });
+	return () => {
+		const { prefixCls, mode, maxLength } = selectInputContext.value ?? {};
+		const { classNames, styles } = baseProps.value ?? {};
+		const { inputProps } = props;
+		return (0, vue.createVNode)("div", {
+			"class": (0, __v_c_util.clsx)(`${prefixCls}-content`, classNames?.content),
+			"style": styles?.content
+		}, [displayValue.value ? (0, vue.createVNode)("div", optionProps.value, [displayValue.value.label]) : (0, vue.createVNode)(require_Placeholder.default, { "show": !mergedSearchValue.value }, null), (0, vue.createVNode)(require_Input.default, (0, vue.mergeProps)(inputProps, {
+			"value": mergedSearchValue.value,
+			"maxLength": mode === "combobox" ? maxLength : void 0,
+			"onChange": (e) => {
+				inputChanged.value = true;
+				inputProps.onChange?.(e);
+				inputProps.onInput?.(e);
+			},
+			"ref": inputRef
+		}), null)]);
+	};
+}, {
+	props: { inputProps: {
+		type: Object,
+		required: true,
+		default: void 0
+	} },
+	name: "SingleContent",
+	inheritAttrs: false
+});
+var SingleContent_default = SingleContent;
+exports.default = SingleContent_default;

package/dist/SelectInput/Content/SingleContent.d.ts

@@ -0,0 +1,3 @@
+import { SharedContentProps } from './index';
+declare const SingleContent: import('vue').DefineSetupFnComponent<SharedContentProps, {}, {}, SharedContentProps & {}, import('vue').PublicProps>;
+export default SingleContent;

package/dist/SelectInput/Content/SingleContent.js

@@ -0,0 +1,77 @@
+import useBaseProps from "../../hooks/useBaseProps.js";
+import { useSelectContext } from "../../SelectContext.js";
+import { useSelectInputContext } from "../context.js";
+import { getTitle } from "../../utils/commonUtil.js";
+import Input_default from "../Input.js";
+import Placeholder_default from "./Placeholder.js";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+var SingleContent_default = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const selectInputContext = useSelectInputContext();
+	const baseProps = useBaseProps();
+	const selectContext = useSelectContext();
+	const inputChanged = shallowRef(false);
+	const combobox = computed(() => selectInputContext.value?.mode === "combobox");
+	const displayValue = computed(() => selectInputContext.value?.displayValues[0]);
+	const mergedSearchValue = computed(() => {
+		if (combobox.value && selectInputContext.value?.activeValue && !inputChanged.value && baseProps.value?.triggerOpen) return selectInputContext.value.activeValue;
+		return baseProps.value?.showSearch ? selectInputContext.value?.searchValue : "";
+	});
+	const optionProps = computed(() => {
+		let restProps = {
+			class: `${selectInputContext.value?.prefixCls}-content-value`,
+			style: { visibility: mergedSearchValue.value ? "hidden" : "visible" }
+		};
+		if (displayValue.value && selectContext.value?.flattenOptions) {
+			const option = selectContext.value.flattenOptions.find((opt) => opt.value === displayValue.value?.value);
+			if (option?.data) {
+				const { label, value, className, style, key, children,...rest } = option.data;
+				restProps = {
+					...restProps,
+					...rest,
+					title: getTitle(option.data),
+					class: clsx(restProps.className, className),
+					style: {
+						...restProps.style,
+						...style
+					}
+				};
+			}
+		}
+		if (displayValue.value && !restProps.title) restProps.title = getTitle(displayValue.value);
+		if (baseProps.value?.title !== void 0) restProps.title = baseProps.value.title;
+		return restProps;
+	});
+	watch([combobox, () => selectInputContext.value?.displayValues], () => {
+		if (combobox.value) inputChanged.value = false;
+	}, { immediate: true });
+	const inputRef = shallowRef();
+	expose({ input: computed(() => inputRef.value?.input) });
+	return () => {
+		const { prefixCls, mode, maxLength } = selectInputContext.value ?? {};
+		const { classNames, styles } = baseProps.value ?? {};
+		const { inputProps } = props;
+		return createVNode("div", {
+			"class": clsx(`${prefixCls}-content`, classNames?.content),
+			"style": styles?.content
+		}, [displayValue.value ? createVNode("div", optionProps.value, [displayValue.value.label]) : createVNode(Placeholder_default, { "show": !mergedSearchValue.value }, null), createVNode(Input_default, mergeProps(inputProps, {
+			"value": mergedSearchValue.value,
+			"maxLength": mode === "combobox" ? maxLength : void 0,
+			"onChange": (e) => {
+				inputChanged.value = true;
+				inputProps.onChange?.(e);
+				inputProps.onInput?.(e);
+			},
+			"ref": inputRef
+		}), null)]);
+	};
+}, {
+	props: { inputProps: {
+		type: Object,
+		required: true,
+		default: void 0
+	} },
+	name: "SingleContent",
+	inheritAttrs: false
+});
+export { SingleContent_default as default };

package/dist/SelectInput/Content/index.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_useBaseProps = require("../../hooks/useBaseProps.cjs");
+const require_context = require("../context.cjs");
+const require_MultipleContent = require("./MultipleContent.cjs");
+const require_SingleContent = require("./SingleContent.cjs");
+let vue = require("vue");
+let __v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
+__v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(__v_c_util_dist_pickAttrs);
+var SelectContent = /* @__PURE__ */ (0, vue.defineComponent)((_, { expose }) => {
+	const selectInputContext = require_context.useSelectInputContext();
+	const baseProps = require_useBaseProps.default();
+	const inputRef = (0, vue.shallowRef)();
+	expose({ input: (0, vue.computed)(() => inputRef.value?.input) });
+	const multiple = (0, vue.computed)(() => selectInputContext.value?.multiple);
+	const onInputKeyDown = (0, vue.computed)(() => selectInputContext.value?.onInputKeyDown);
+	const showSearch = (0, vue.computed)(() => baseProps.value?.showSearch);
+	const ariaProps = (0, vue.computed)(() => (0, __v_c_util_dist_pickAttrs.default)(baseProps.value ?? {}, { aria: true }));
+	const sharedInputProps = (0, vue.computed)(() => ({
+		...ariaProps.value,
+		onKeyDown: onInputKeyDown.value,
+		readonly: !showSearch.value,
+		tabindex: baseProps.value?.tabIndex
+	}));
+	return () => {
+		if (multiple.value) return (0, vue.createVNode)(require_MultipleContent.default, {
+			"ref": inputRef,
+			"inputProps": sharedInputProps.value
+		}, null);
+		return (0, vue.createVNode)(require_SingleContent.default, {
+			"ref": inputRef,
+			"inputProps": sharedInputProps.value
+		}, null);
+	};
+}, {
+	name: "SelectContent",
+	inheritAttrs: false
+});
+var Content_default = SelectContent;
+exports.default = Content_default;

package/dist/SelectInput/Content/index.d.ts

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'vue';
+export interface SharedContentProps {
+    inputProps: InputHTMLAttributes;
+}
+declare const SelectContent: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
+export default SelectContent;