@v-c/select 1.0.9 → 1.0.10

package/dist/BaseSelect/index.js

@@ -107,7 +107,7 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 		return props.notFoundContent ?? "Not Found";
 	});
 	const emptyListContent = computed(() => !props?.notFoundContent && props.emptyOptions);
-	const [mergedOpen, triggerOpen, lockOptions] = useOpen(open, (openVal) => {
+	const [rawOpen, mergedOpen, triggerOpen, lockOptions] = useOpen(props?.defaultOpen || false, open, (openVal) => {
 		props.onPopupVisibleChange?.(openVal);
 	}, (nextOpen) => {
 		return props.disabled || emptyListContent.value ? false : nextOpen;
@@ -140,6 +140,9 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 	watch(mergedOpen, () => {
 		if (!mergedOpen.value && !multiple.value && mode.value !== "combobox") onInternalSearch("", false, false);
 	}, { immediate: true });
+	watch(rawOpen, () => {
+		if (!rawOpen.value && !multiple.value && mode.value === "combobox") onInternalSearch("", false, false);
+	}, { immediate: true });
 	watch([disabled, mergedOpen], () => {
 		if (disabled.value) {
 			triggerOpen(false);
@@ -152,7 +155,8 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 		const clearLock = getClearLock();
 		const { key } = event;
 		const isEnterKey = key === KeyCodeStr.Enter;
-		if (isEnterKey) {
+		const isSpaceKey = key === KeyCodeStr.Space;
+		if (isEnterKey || isSpaceKey) {
 			if (mode.value !== "combobox") event.preventDefault();
 			if (!mergedOpen.value) triggerOpen(true);
 		}
@@ -173,7 +177,7 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 				values: [removedDisplayValue]
 			});
 		}
-		if (mergedOpen.value && (!isEnterKey || !keyLockRef.value)) {
+		if (mergedOpen.value && (!isEnterKey || !keyLockRef.value) && !isSpaceKey) {
 			if (isEnterKey) keyLockRef.value = true;
 			listRef.value?.onKeyDown?.(event);
 		}
@@ -237,7 +241,8 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 			triggerOpen: mergedOpen.value,
 			toggleOpen: triggerOpen,
 			multiple: multiple.value,
-			lockOptions: lockOptions.value
+			lockOptions: lockOptions.value,
+			rawOpen: rawOpen.value
 		};
 	}));
 	const onClearMouseDown = () => {

package/dist/SelectInput/Content/SingleContent.js

@@ -17,32 +17,30 @@ var SingleContent_default = /* @__PURE__ */ defineComponent((props, { expose })
 		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: mergedSearchValue.value ? { visibility: "hidden" } : {}
-		};
+	const optionClassName = computed(() => {
 		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.class, className),
-					style: {
-						...restProps.style,
-						...style
-					}
-				};
-			}
+			if (option?.data) return option.data.className || option.data.class;
 		}
-		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], () => {
+	const optionStyle = computed(() => {
+		if (displayValue.value && selectContext.value?.flattenOptions) {
+			const option = selectContext.value.flattenOptions.find((opt) => opt.value === displayValue.value?.value);
+			if (option?.data) return option.data.style;
+		}
+	});
+	const optionTitle = computed(() => {
+		let titleValue;
+		if (displayValue.value && selectContext.value?.flattenOptions) {
+			const option = selectContext.value.flattenOptions.find((opt) => opt.value === displayValue.value?.value);
+			if (option?.data) titleValue = getTitle(option.data);
+		}
+		if (displayValue.value && !titleValue) titleValue = getTitle(displayValue.value);
+		if (baseProps.value?.title !== void 0) titleValue = baseProps.value.title;
+		return titleValue;
+	});
+	const hasOptionStyle = computed(() => !!optionClassName.value || !!optionStyle.value);
+	watch([combobox, () => selectInputContext.value?.activeValue], () => {
 		if (combobox.value) inputChanged.value = false;
 	}, { immediate: true });
 	const inputRef = shallowRef();
@@ -51,16 +49,24 @@ var SingleContent_default = /* @__PURE__ */ defineComponent((props, { expose })
 		const { prefixCls, mode, maxLength } = selectInputContext.value ?? {};
 		const { classNames, styles } = baseProps.value ?? {};
 		const { inputProps } = props;
+		const renderValue = displayValue.value ? hasOptionStyle.value ? createVNode("div", {
+			"class": clsx(`${prefixCls}-content-value`, optionClassName.value),
+			"style": {
+				...mergedSearchValue.value ? { visibility: "hidden" } : {},
+				...optionStyle.value
+			},
+			"title": optionTitle.value
+		}, [displayValue.value.label]) : displayValue.value.label : createVNode(Placeholder_default, { "show": !mergedSearchValue.value }, null);
 		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, {
+			"class": clsx(`${prefixCls}-content`, displayValue.value && `${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, {
 			"value": mergedSearchValue.value,
 			"maxLength": mode === "combobox" ? maxLength : void 0,
 			"onChange": (e) => {
 				inputChanged.value = true;
 				inputProps.onChange?.(e);
-				inputProps.onInput?.(e);
 			},
 			"ref": inputRef
 		}), null)]);

package/dist/hooks/useBaseProps.d.ts

@@ -6,6 +6,7 @@ export interface BaseSelectContextProps extends BaseSelectProps {
     toggleOpen: (open?: boolean) => void;
     role?: string;
     lockOptions: boolean;
+    rawOpen: boolean;
 }
 export declare function useBaseSelectProvider(context: Ref<BaseSelectContextProps>): void;
 export default function useBaseProps(): Ref<BaseSelectContextProps | null>;

package/dist/hooks/useOpen.d.ts

@@ -16,4 +16,4 @@ export type TriggerOpenType = (nextOpen?: boolean, config?: {
  * SSR handling: During SSR, `open` is always false to avoid Portal issues.
  * On client-side hydration, it syncs with the actual open state.
  */
-export default function useOpen(propOpen: Ref<boolean>, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): readonly [import('vue').ComputedRef<boolean>, TriggerOpenType, import('vue').ShallowRef<boolean, boolean>];
+export default function useOpen(defaultOpen: boolean, propOpen: Ref<boolean>, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): readonly [import('vue').ComputedRef<boolean>, import('vue').ComputedRef<boolean>, TriggerOpenType, import('vue').ShallowRef<boolean, boolean>];

package/dist/hooks/useOpen.js

@@ -13,12 +13,12 @@ function macroTask(fn, times = 1) {
 		macroTask(fn, times - 1);
 	});
 }
-function useOpen(propOpen, onOpen, postOpen) {
+function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
 	const rendered = shallowRef(propOpen.value ?? false);
 	onMounted(() => {
 		rendered.value = true;
 	});
-	const stateOpen = shallowRef(propOpen.value ?? false);
+	const stateOpen = shallowRef(propOpen.value ?? defaultOpen ?? false);
 	watch(propOpen, () => {
 		stateOpen.value = propOpen.value;
 	});
@@ -49,6 +49,7 @@ function useOpen(propOpen, onOpen, postOpen) {
 		});
 	};
 	return [
+		ssrSafeOpen,
 		mergedOpen,
 		toggleOpen,
 		lock

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/select",
   "type": "module",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -15,7 +15,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@v-c/overflow": "^1.0.3",
-    "@v-c/trigger": "^1.0.6",
-    "@v-c/util": "^1.0.9",
+    "@v-c/trigger": "^1.0.11",
+    "@v-c/util": "^1.0.14",
     "@v-c/virtual-list": "^1.0.5"
   },
   "scripts": {

package/dist/BaseSelect/Polite.cjs

@@ -1,40 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
-let vue = require("vue");
-var Polite = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	return () => {
-		const { visible, values } = props;
-		if (!visible) return null;
-		const MAX_COUNT = 50;
-		return (0, vue.createVNode)("span", {
-			"aria-live": "polite",
-			"style": {
-				width: 0,
-				height: 0,
-				position: "absolute",
-				overflow: "hidden",
-				opacity: 0
-			}
-		}, [`${values.slice(0, MAX_COUNT).map(({ label, value }) => ["number", "string"].includes(typeof label) ? label : (0, vue.isVNode)(label) || Array.isArray(label) ? label : value).join(", ")}`, values.length > MAX_COUNT ? ", ..." : null]);
-	};
-}, {
-	props: {
-		visible: {
-			type: Boolean,
-			required: true,
-			default: void 0
-		},
-		values: {
-			type: Array,
-			required: true,
-			default: void 0
-		}
-	},
-	name: "Polite",
-	inheritAttrs: false
-});
-var Polite_default = Polite;
-exports.default = Polite_default;