@v-c/dropdown 1.0.5 → 1.1.0

package/dist/Dropdown.d.ts

@@ -5,6 +5,8 @@ import { default as Placements } from './placements';
 export interface DropdownProps extends Pick<TriggerProps, 'getPopupContainer' | 'mouseEnterDelay' | 'mouseLeaveDelay' | 'onPopupAlign' | 'builtinPlacements' | 'autoDestroy'> {
     minOverlayWidthMatchTrigger?: boolean;
     arrow?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** @deprecated Use `onOpenChange` instead */
     onVisibleChange?: (visible: boolean) => void;
     onOverlayClick?: (e: Event) => void;
     prefixCls?: string;
@@ -21,6 +23,8 @@ export interface DropdownProps extends Pick<TriggerProps, 'getPopupContainer' |
     alignPoint?: boolean;
     showAction?: ActionType[];
     hideAction?: ActionType[];
+    open?: boolean;
+    /** @deprecated Use `open` instead */
     visible?: boolean;
     autoFocus?: boolean;
 }

package/dist/Dropdown.js

@@ -5,15 +5,16 @@ import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergePr
 import { Trigger } from "@v-c/trigger";
 import { clsx } from "@v-c/util";
 import { filterEmpty, removeUndefined, toPropsRefs } from "@v-c/util/dist/props-util";
+import warning from "@v-c/util/dist/warning";
 //#region src/Dropdown.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 var Dropdown = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 	const { autoFocus } = toPropsRefs(props, "autoFocus");
-	const triggerVisible = shallowRef();
-	const mergedVisible = computed(() => {
-		return props?.visible ?? triggerVisible.value;
+	const triggerOpen = shallowRef();
+	const mergedOpen = computed(() => {
+		return props?.open ?? props?.visible ?? triggerOpen.value;
 	});
 	const mergedMotionName = computed(() => {
 		const { prefixCls, transitionName, animation } = props;
@@ -23,24 +24,29 @@ var Dropdown = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 	const overlayRef = shallowRef();
 	const childRef = shallowRef();
 	expose({ triggerRef });
-	const handleVisibleChange = (visible) => {
-		triggerVisible.value = visible;
-		props.onVisibleChange?.(visible);
+	const handleOpenChange = (open) => {
+		triggerOpen.value = open;
+		props.onOpenChange?.(open);
+		props.onVisibleChange?.(open);
 	};
 	useAccessibility({
-		visible: mergedVisible,
+		open: mergedOpen,
 		triggerRef: childRef,
-		onVisibleChange: handleVisibleChange,
+		onOpenChange: handleOpenChange,
 		autoFocus,
 		overlayRef
 	});
 	const onClick = (e) => {
 		const { onOverlayClick } = props;
-		triggerVisible.value = false;
+		triggerOpen.value = false;
 		if (onOverlayClick) onOverlayClick(e);
 	};
 	return () => {
-		const { overlay, prefixCls, arrow, hideAction, trigger, placement, placements, overlayClassName, getPopupContainer, showAction, overlayStyle, align, disabled: _disabled, ...otherProps } = props;
+		if (process.env.NODE_ENV !== "production") {
+			warning(props.visible === void 0, "`visible` is deprecated. Please use `open` instead.");
+			warning(props.onVisibleChange === void 0, "`onVisibleChange` is deprecated. Please use `onOpenChange` instead.");
+		}
+		const { overlay, prefixCls, arrow, hideAction, trigger, placement, placements, overlayClassName, getPopupContainer, showAction, overlayStyle, align, disabled: _disabled, open: _open, visible: _visible, onOpenChange: _onOpenChange, onVisibleChange: _onVisibleChange, ...otherProps } = props;
 		const getMenuElement = () => createVNode(Overlay, {
 			"ref": overlayRef,
 			"overlay": overlay,
@@ -63,7 +69,7 @@ var Dropdown = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 		};
 		const children = filterEmpty(slots?.default?.() ?? [])?.[0];
 		const childrenNode = createVNode(children, {
-			class: clsx(mergedVisible.value && getOpenClassName()),
+			class: clsx(mergedOpen.value && getOpenClassName()),
 			ref: childRef
 		});
 		let triggerHideAction = hideAction;
@@ -79,10 +85,10 @@ var Dropdown = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 			"popupPlacement": placement,
 			"popupAlign": align,
 			"popupMotion": { name: mergedMotionName.value },
-			"popupVisible": mergedVisible.value,
+			"popupVisible": mergedOpen.value,
 			"stretch": getMinOverlayWidthMatchTrigger() ? "minWidth" : "",
 			"popup": getMenuElementOrLambda(),
-			"onOpenChange": handleVisibleChange,
+			"onOpenChange": handleOpenChange,
 			"onPopupClick": onClick,
 			"getPopupContainer": getPopupContainer
 		}), _isSlot(childrenNode) ? childrenNode : { default: () => [childrenNode] });
@@ -98,6 +104,11 @@ var Dropdown = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 		required: false,
 		default: void 0
 	},
+	onOpenChange: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
 	onVisibleChange: {
 		type: Function,
 		required: false,
@@ -185,6 +196,11 @@ var Dropdown = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
 		required: false,
 		default: void 0
 	},
+	open: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
 	visible: {
 		type: Boolean,
 		required: false,

package/dist/hooks/useAccessibility.d.ts

@@ -1,10 +1,10 @@
 import { Ref } from 'vue';
 interface UseAccessibilityProps {
-    visible: Ref<boolean>;
+    open: Ref<boolean>;
     triggerRef: Ref<any>;
-    onVisibleChange?: (visible: boolean) => void;
+    onOpenChange?: (open: boolean) => void;
     autoFocus?: Ref<boolean>;
     overlayRef?: Ref<any>;
 }
-export default function useAccessibility({ visible, triggerRef, onVisibleChange, autoFocus, overlayRef, }: UseAccessibilityProps): void;
+export default function useAccessibility({ open, triggerRef, onOpenChange, autoFocus, overlayRef, }: UseAccessibilityProps): void;
 export {};

package/dist/hooks/useAccessibility.js

@@ -3,12 +3,12 @@ import KeyCode from "@v-c/util/dist/KeyCode";
 import raf from "@v-c/util/dist/raf";
 //#region src/hooks/useAccessibility.ts
 var { ESC, TAB } = KeyCode;
-function useAccessibility({ visible, triggerRef, onVisibleChange, autoFocus, overlayRef }) {
+function useAccessibility({ open, triggerRef, onOpenChange, autoFocus, overlayRef }) {
 	const focusMenuRef = shallowRef(false);
 	const handleCloseMenuAndReturnFocus = () => {
-		if (visible.value) {
+		if (open.value) {
 			triggerRef.value?.focus?.();
-			onVisibleChange?.(false);
+			onOpenChange?.(false);
 		}
 	};
 	const focusMenu = () => {
@@ -33,8 +33,8 @@ function useAccessibility({ visible, triggerRef, onVisibleChange, autoFocus, ove
 			}
 		}
 	};
-	watch(visible, (_n, _o, onCleanup) => {
-		if (visible.value) {
+	watch(open, (_n, _o, onCleanup) => {
+		if (open.value) {
 			window.addEventListener("keydown", handleKeyDown);
 			if (autoFocus) raf(focusMenu, 3);
 			onCleanup(() => {
@@ -44,7 +44,7 @@ function useAccessibility({ visible, triggerRef, onVisibleChange, autoFocus, ove
 		} else onCleanup(() => {
 			focusMenuRef.value = false;
 		});
-	});
+	}, { immediate: true });
 }
 //#endregion
 export { useAccessibility as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/dropdown",
   "type": "module",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "dropdown ui component for vue",
   "author": "",
   "license": "MIT",
@@ -34,8 +34,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/trigger": "^1.1.0",
-    "@v-c/util": "^1.1.0"
+    "@v-c/trigger": "^1.1.1",
+    "@v-c/util": "^1.2.0"
   },
   "scripts": {
     "build": "vite build",