@v-c/select 1.0.8 → 1.0.10

package/dist/BaseSelect/index.js

@@ -3,8 +3,8 @@ import { getSeparatedContent, isValidCount } from "../utils/valueUtil.js";
 import { useAllowClear } from "../hooks/useAllowClear.js";
 import useComponents from "../hooks/useComponents.js";
 import useLock from "../hooks/useLock.js";
-import useOpen from "../hooks/useOpen.js";
-import useSelectTriggerControl from "../hooks/useSelectTriggerControl.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";
@@ -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] = 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);
 		}
@@ -194,6 +198,9 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 	const onInputBlur = () => {
 		keyLockRef.value = false;
 	};
+	const getSelectElements = () => [getDOM(containerRef), triggerRef.value?.getPopupElement?.()];
+	useSelectTriggerControl(getSelectElements, mergedOpen, triggerOpen, computed(() => !!mergedComponents.value.root));
+	const internalMouseDownRef = shallowRef(false);
 	const onInternalFocus = (event) => {
 		focused.value = true;
 		if (!disabled.value) {
@@ -201,27 +208,31 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 			props?.onFocus?.(event);
 		}
 	};
+	const onRootBlur = () => {
+		if (mergedOpen.value && !internalMouseDownRef.value) triggerOpen(false, { cancelFun: () => isInside(getSelectElements(), document.activeElement) });
+	};
 	const onInternalBlur = (event) => {
 		focused.value = false;
 		if (mergedSearchValue.value) {
 			if (mode.value === "tags") props?.onSearch?.(mergedSearchValue.value, { source: "submit" });
 			else if (mode.value === "multiple") props?.onSearch?.("", { source: "blur" });
 		}
-		if (!disabled.value) {
-			triggerOpen(false, { lazy: true });
-			props?.onBlur?.(event);
-		}
+		onRootBlur();
+		if (!disabled.value) props?.onBlur?.(event);
 	};
 	const onInternalMouseDown = (event) => {
 		const { target } = event;
-		if ((triggerRef?.value?.getPopupElement?.())?.contains?.(target) && triggerOpen) triggerOpen(true, { ignoreNext: true });
+		if ((triggerRef?.value?.getPopupElement?.())?.contains?.(target) && triggerOpen) triggerOpen(true);
 		props?.onMouseDown?.(event);
+		internalMouseDownRef.value = true;
+		macroTask(() => {
+			internalMouseDownRef.value = false;
+		});
 	};
 	const forceState = shallowRef({});
 	function onPopupMouseEnter() {
 		forceState.value = {};
 	}
-	useSelectTriggerControl(() => [getDOM(containerRef), triggerRef.value?.getPopupElement?.()], mergedOpen, triggerOpen, computed(() => !!mergedComponents.value.root));
 	useBaseSelectProvider(computed(() => {
 		return {
 			...props,
@@ -229,7 +240,9 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 			open: mergedOpen.value,
 			triggerOpen: mergedOpen.value,
 			toggleOpen: triggerOpen,
-			multiple: multiple.value
+			multiple: multiple.value,
+			lockOptions: lockOptions.value,
+			rawOpen: rawOpen.value
 		};
 	}));
 	const onClearMouseDown = () => {
@@ -326,7 +339,8 @@ const BaseSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) =>
 			"empty": emptyOptions,
 			"onPopupVisibleChange": onTriggerVisibleChange,
 			"onPopupMouseEnter": onPopupMouseEnter,
-			"onPopupMouseDown": onInternalMouseDown
+			"onPopupMouseDown": onInternalMouseDown,
+			"onPopupBlur": onRootBlur
 		}, _isSlot(renderNode) ? renderNode : { default: () => [_renderNode] });
 		return createVNode(Fragment, null, [createVNode(Polite_default, {
 			"visible": focused.value && !mergedOpen.value,

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: { visibility: mergedSearchValue.value ? "hidden" : "visible" }
-		};
+	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/SelectInput/index.js

@@ -57,7 +57,7 @@ var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expos
 			KeyCode.LEFT,
 			KeyCode.RIGHT
 		].includes(keyCode)) return;
-		if (isValidateOpenKey(keyCode)) toggleOpen.value?.(true);
+		if (!(event.ctrlKey || event.altKey || event.metaKey) && isValidateOpenKey(keyCode)) toggleOpen.value?.(true);
 	};
 	expose({
 		focus: (options) => {
@@ -70,7 +70,9 @@ var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expos
 	});
 	const onInternalMouseDown = (event) => {
 		if (!disabled.value) {
-			if (event.target !== getDOM(inputRef.value?.input)) event.preventDefault();
+			const inputDOM = getDOM(inputRef.value?.input);
+			event._ori_target = inputDOM;
+			if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) event.preventDefault();
 			const shouldPreventClose = triggerOpen.value && !multiple.value && (mode.value === "combobox" || showSearch.value);
 			if (!event._select_lazy) {
 				inputRef.value?.input?.focus();
@@ -79,10 +81,6 @@ var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expos
 		}
 		props?.onMouseDown?.(event);
 	};
-	const onInternalBlur = (event) => {
-		toggleOpen.value?.(false);
-		props?.onBlur?.(event);
-	};
 	useSelectInputProvider(computed(() => ({
 		...props,
 		onInputKeyDown: onInternalInputKeyDown
@@ -114,7 +112,7 @@ var SelectInput_default = /* @__PURE__ */ defineComponent((props, { attrs, expos
 			"onKeydown": props.onKeyDown,
 			"onKeyup": props.onKeyUp,
 			"onFocusin": props.onFocus,
-			"onFocusout": onInternalBlur
+			"onFocusout": props.onBlur
 		}), [
 			createVNode(Affix_default, {
 				"class": clsx(`${prefixCls.value}-prefix`, classNamesConfig.value?.prefix),

package/dist/SelectTrigger.d.ts

@@ -21,6 +21,7 @@ export interface SelectTriggerProps {
     onPopupVisibleChange?: ((visible: boolean) => void) | null;
     onPopupMouseEnter: () => void;
     onPopupMouseDown: (event: MouseEvent) => void;
+    onPopupBlur?: (event: FocusEvent) => void;
 }
 declare const SelectTrigger: import('vue').DefineSetupFnComponent<SelectTriggerProps, {}, {}, SelectTriggerProps & {}, import('vue').PublicProps>;
 export default SelectTrigger;

package/dist/SelectTrigger.js

@@ -54,7 +54,7 @@ var SelectTrigger_default = /* @__PURE__ */ defineComponent((props, { slots, att
 	const triggerPopupRef = shallowRef();
 	expose({ getPopupElement: () => triggerPopupRef.value?.popupElement });
 	return () => {
-		const { prefixCls, popupElement, popupRender, animation, transitionName, popupStyle, popupMatchSelectWidth, onPopupVisibleChange, placement, direction = "ltr", builtinPlacements, onPopupMouseEnter, onPopupMouseDown, popupAlign, visible, getPopupContainer, popupClassName, empty, ...restProps } = props;
+		const { prefixCls, popupElement, popupRender, animation, transitionName, popupStyle, popupMatchSelectWidth, onPopupVisibleChange, placement, direction = "ltr", builtinPlacements, onPopupMouseEnter, onPopupMouseDown, onPopupBlur, popupAlign, visible, getPopupContainer, popupClassName, empty, ...restProps } = props;
 		let popupNode = popupElement;
 		if (popupRender) popupNode = popupRender(popupElement);
 		const popupPrefixCls = `${prefixCls}-dropdown`;
@@ -68,8 +68,9 @@ var SelectTrigger_default = /* @__PURE__ */ defineComponent((props, { slots, att
 			"builtinPlacements": mergedBuiltinPlacements.value,
 			"prefixCls": popupPrefixCls,
 			"popup": createVNode("div", {
+				"onMouseenter": onPopupMouseEnter,
 				"onMousedown": onPopupMouseDown,
-				"onMouseenter": onPopupMouseEnter
+				"onBlur": onPopupBlur
 			}, [popupNode]),
 			"ref": triggerPopupRef,
 			"stretch": stretch.value,
@@ -177,6 +178,11 @@ var SelectTrigger_default = /* @__PURE__ */ defineComponent((props, { slots, att
 			type: Function,
 			required: true,
 			default: void 0
+		},
+		onPopupBlur: {
+			type: Function,
+			required: false,
+			default: void 0
 		}
 	}, { direction: "ltr" }),
 	name: "SelectTrigger",

package/dist/hooks/useBaseProps.d.ts

@@ -5,6 +5,8 @@ export interface BaseSelectContextProps extends BaseSelectProps {
     multiple: boolean;
     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

@@ -1,11 +1,11 @@
 import { Ref } from 'vue';
+export declare function macroTask(fn: VoidFunction, times?: number): void;
 /**
  * Trigger by latest open call, if nextOpen is undefined, means toggle.
  * ignoreNext will skip next call in the macro task queue.
  */
 export type TriggerOpenType = (nextOpen?: boolean, config?: {
-    ignoreNext?: boolean;
-    lazy?: boolean;
+    cancelFun?: () => boolean;
 }) => void;
 /**
  * When `open` is controlled, follow the controlled value;
@@ -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];
+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,45 +13,46 @@ 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;
 	});
+	const lock = shallowRef(false);
 	const ssrSafeOpen = computed(() => rendered.value ? stateOpen.value : false);
 	const mergedOpen = computed(() => postOpen(ssrSafeOpen.value));
 	const taskIdRef = shallowRef(0);
-	const taskLockRef = shallowRef(false);
 	const triggerEvent = (nextOpen) => {
 		if (onOpen && mergedOpen.value !== nextOpen) onOpen(nextOpen);
 		if (propOpen.value !== void 0) return;
 		stateOpen.value = nextOpen;
 	};
 	const toggleOpen = (nextOpen, config = {}) => {
-		const { ignoreNext = false, lazy = false } = config;
+		const { cancelFun } = config;
 		taskIdRef.value += 1;
 		const id = taskIdRef.value;
 		const nextOpenVal = typeof nextOpen === "boolean" ? nextOpen : !mergedOpen.value;
-		if (nextOpenVal !== lazy) {
-			if (!taskLockRef.value) {
+		lock.value = !nextOpenVal;
+		function triggerUpdate() {
+			if (id === taskIdRef.value && !cancelFun?.()) {
 				triggerEvent(nextOpenVal);
-				if (ignoreNext) {
-					taskLockRef.value = ignoreNext;
-					macroTask(() => {
-						taskLockRef.value = false;
-					}, 2);
-				}
+				lock.value = false;
 			}
-			return;
 		}
-		macroTask(() => {
-			if (id === taskIdRef.value && !taskLockRef.value) triggerEvent(nextOpenVal);
+		if (nextOpenVal) triggerUpdate();
+		else macroTask(() => {
+			triggerUpdate();
 		});
 	};
-	return [mergedOpen, toggleOpen];
+	return [
+		ssrSafeOpen,
+		mergedOpen,
+		toggleOpen,
+		lock
+	];
 }
-export { useOpen as default };
+export { useOpen as default, macroTask };

package/dist/hooks/useSelectTriggerControl.d.ts

@@ -1,2 +1,4 @@
 import { Ref } from 'vue';
-export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: Ref<boolean>, triggerOpen: (open: boolean) => void, customizedTrigger: Ref<boolean>): void;
+import { TriggerOpenType } from './useOpen';
+export declare function isInside(elements: (HTMLElement | SVGElement | undefined)[], target: HTMLElement): boolean;
+export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: Ref<boolean>, triggerOpen: TriggerOpenType, customizedTrigger: Ref<boolean>): void;

package/dist/hooks/useSelectTriggerControl.js

@@ -1,10 +1,14 @@
 import { onMounted, onUnmounted } from "vue";
+function isInside(elements, target) {
+	return elements.filter((element) => element).some((element) => element.contains(target) || element === target);
+}
 function useSelectTriggerControl(elements, open, triggerOpen, customizedTrigger) {
 	const onGlobalMouseDown = (event) => {
 		if (customizedTrigger.value) return;
 		let target = event.target;
 		if (target.shadowRoot && event.composed) target = event.composedPath()[0] || target;
-		if (open.value && elements().filter((element) => element).every((element) => !element.contains(target) && element !== target)) triggerOpen(false);
+		if (event._ori_target) target = event._ori_target;
+		if (open.value && !isInside(elements(), target)) triggerOpen(false);
 	};
 	onMounted(() => {
 		window.addEventListener("mousedown", onGlobalMouseDown);
@@ -13,4 +17,4 @@ function useSelectTriggerControl(elements, open, triggerOpen, customizedTrigger)
 		});
 	});
 }
-export { useSelectTriggerControl as default };
+export { useSelectTriggerControl as default, isInside };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/select",
   "type": "module",
-  "version": "1.0.8",
+  "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"
@@ -29,10 +29,10 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/overflow": "^1.0.1",
-    "@v-c/trigger": "^1.0.5",
-    "@v-c/util": "^1.0.8",
-    "@v-c/virtual-list": "^1.0.4"
+    "@v-c/overflow": "^1.0.3",
+    "@v-c/trigger": "^1.0.11",
+    "@v-c/util": "^1.0.14",
+    "@v-c/virtual-list": "^1.0.5"
   },
   "scripts": {
     "build": "vite build",

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;