@v-c/dropdown 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 antdv-community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Dropdown.cjs

@@ -0,0 +1,238 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_useAccessibility = require("./hooks/useAccessibility.cjs");
+const require_Overlay = require("./Overlay.cjs");
+const require_placements = require("./placements.cjs");
+let vue = require("vue");
+let __v_c_trigger = require("@v-c/trigger");
+let __v_c_util = require("@v-c/util");
+let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+}
+var defaults = {
+	prefixCls: "vc-dropdown",
+	arrow: false,
+	placement: "bottomLeft",
+	placements: require_placements.default,
+	trigger: ["hover"]
+};
+var Dropdown = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots }) => {
+	const { autoFocus } = (0, __v_c_util_dist_props_util.toPropsRefs)(props, "autoFocus");
+	const triggerVisible = (0, vue.shallowRef)();
+	const mergedVisible = (0, vue.computed)(() => {
+		return props?.visible ?? triggerVisible.value;
+	});
+	const mergedMotionName = (0, vue.computed)(() => {
+		const { prefixCls, transitionName, animation } = props;
+		return animation ? `${prefixCls}-${animation}` : transitionName;
+	});
+	const triggerRef = (0, vue.shallowRef)();
+	const overlayRef = (0, vue.shallowRef)();
+	const childRef = (0, vue.shallowRef)();
+	expose({ triggerRef });
+	const handleVisibleChange = (visible) => {
+		triggerVisible.value = visible;
+		props.onVisibleChange?.(visible);
+	};
+	require_useAccessibility.default({
+		visible: mergedVisible,
+		triggerRef: childRef,
+		onVisibleChange: handleVisibleChange,
+		autoFocus,
+		overlayRef
+	});
+	const onClick = (e) => {
+		const { onOverlayClick } = props;
+		triggerVisible.value = false;
+		if (onOverlayClick) onOverlayClick(e);
+	};
+	return () => {
+		const { overlay, prefixCls, arrow, hideAction, trigger, placement, placements, overlayClassName, getPopupContainer, showAction, overlayStyle, align,...otherProps } = props;
+		const getMenuElement = () => (0, vue.createVNode)(require_Overlay.default, {
+			"ref": overlayRef,
+			"overlay": overlay,
+			"prefixCls": prefixCls,
+			"arrow": arrow
+		}, null);
+		const getMenuElementOrLambda = () => {
+			if (typeof overlay === "function") return getMenuElement;
+			return getMenuElement();
+		};
+		const getMinOverlayWidthMatchTrigger = () => {
+			const { minOverlayWidthMatchTrigger, alignPoint } = props;
+			if (minOverlayWidthMatchTrigger !== void 0) return minOverlayWidthMatchTrigger;
+			return !alignPoint;
+		};
+		const getOpenClassName = () => {
+			const { openClassName } = props;
+			if (openClassName !== void 0) return openClassName;
+			return `${prefixCls}-open`;
+		};
+		const children = (0, __v_c_util_dist_props_util.filterEmpty)(slots?.default?.() ?? [])?.[0];
+		const childrenNode = (0, vue.createVNode)(children, {
+			class: (0, __v_c_util.clsx)(mergedVisible.value && getOpenClassName()),
+			ref: childRef
+		});
+		let triggerHideAction = hideAction;
+		if (!triggerHideAction && trigger?.includes("contextMenu")) triggerHideAction = ["click"];
+		return (0, vue.createVNode)(__v_c_trigger.Trigger, (0, vue.mergeProps)({ "builtinPlacements": placements }, (0, __v_c_util_dist_props_util.removeUndefined)(otherProps), {
+			"prefixCls": prefixCls,
+			"ref": triggerRef,
+			"popupClassName": (0, __v_c_util.clsx)(overlayClassName, { [`${prefixCls}-show-arrow`]: arrow }),
+			"popupStyle": overlayStyle,
+			"action": trigger,
+			"showAction": showAction,
+			"hideAction": triggerHideAction,
+			"popupPlacement": placement,
+			"popupAlign": align,
+			"popupMotion": { name: mergedMotionName.value },
+			"popupVisible": mergedVisible.value,
+			"stretch": getMinOverlayWidthMatchTrigger() ? "minWidth" : "",
+			"popup": getMenuElementOrLambda(),
+			"onOpenChange": handleVisibleChange,
+			"onPopupClick": onClick,
+			"getPopupContainer": getPopupContainer
+		}), _isSlot(childrenNode) ? childrenNode : { default: () => [childrenNode] });
+	};
+}, { props: /* @__PURE__ */ (0, vue.mergeDefaults)({
+	minOverlayWidthMatchTrigger: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	arrow: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	onVisibleChange: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	onOverlayClick: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	prefixCls: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	transitionName: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	overlayClassName: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	openClassName: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	animation: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	align: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	overlayStyle: {
+		type: null,
+		required: false,
+		default: void 0
+	},
+	placement: {
+		type: null,
+		required: false,
+		default: void 0
+	},
+	placements: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	overlay: {
+		type: [
+			Function,
+			String,
+			Number,
+			null,
+			Array
+		],
+		required: false,
+		skipCheck: true,
+		default: void 0
+	},
+	trigger: {
+		type: [String, Array],
+		required: false,
+		default: void 0
+	},
+	alignPoint: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	showAction: {
+		type: Array,
+		required: false,
+		default: void 0
+	},
+	hideAction: {
+		type: Array,
+		required: false,
+		default: void 0
+	},
+	visible: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	autoFocus: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	getPopupContainer: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	mouseEnterDelay: {
+		type: Number,
+		required: false,
+		default: void 0
+	},
+	mouseLeaveDelay: {
+		type: Number,
+		required: false,
+		default: void 0
+	},
+	onPopupAlign: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	builtinPlacements: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	autoDestroy: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	}
+}, defaults) });
+var Dropdown_default = Dropdown;
+exports.default = Dropdown_default;

package/dist/Dropdown.d.ts

@@ -0,0 +1,28 @@
+import { ActionType, AlignType, AnimationType, BuildInPlacements, TriggerProps } from '../../trigger/src';
+import { VueNode } from '../../util/src/type';
+import { CSSProperties } from 'vue';
+import { default as Placements } from './placements';
+export interface DropdownProps extends Pick<TriggerProps, 'getPopupContainer' | 'mouseEnterDelay' | 'mouseLeaveDelay' | 'onPopupAlign' | 'builtinPlacements' | 'autoDestroy'> {
+    minOverlayWidthMatchTrigger?: boolean;
+    arrow?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    onOverlayClick?: (e: Event) => void;
+    prefixCls?: string;
+    transitionName?: string;
+    overlayClassName?: string;
+    openClassName?: string;
+    animation?: AnimationType;
+    align?: AlignType;
+    overlayStyle?: CSSProperties;
+    placement?: keyof typeof Placements;
+    placements?: BuildInPlacements;
+    overlay?: (() => VueNode) | VueNode;
+    trigger?: ActionType | ActionType[];
+    alignPoint?: boolean;
+    showAction?: ActionType[];
+    hideAction?: ActionType[];
+    visible?: boolean;
+    autoFocus?: boolean;
+}
+declare const Dropdown: import('vue').DefineSetupFnComponent<DropdownProps, {}, {}, DropdownProps & {}, import('vue').PublicProps>;
+export default Dropdown;

package/dist/Dropdown.js

@@ -0,0 +1,235 @@
+import useAccessibility from "./hooks/useAccessibility.js";
+import Overlay_default from "./Overlay.js";
+import placements_default from "./placements.js";
+import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef } from "vue";
+import { Trigger } from "@v-c/trigger";
+import { clsx } from "@v-c/util";
+import { filterEmpty, removeUndefined, toPropsRefs } from "@v-c/util/dist/props-util";
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var defaults = {
+	prefixCls: "vc-dropdown",
+	arrow: false,
+	placement: "bottomLeft",
+	placements: placements_default,
+	trigger: ["hover"]
+};
+var Dropdown_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
+	const { autoFocus } = toPropsRefs(props, "autoFocus");
+	const triggerVisible = shallowRef();
+	const mergedVisible = computed(() => {
+		return props?.visible ?? triggerVisible.value;
+	});
+	const mergedMotionName = computed(() => {
+		const { prefixCls, transitionName, animation } = props;
+		return animation ? `${prefixCls}-${animation}` : transitionName;
+	});
+	const triggerRef = shallowRef();
+	const overlayRef = shallowRef();
+	const childRef = shallowRef();
+	expose({ triggerRef });
+	const handleVisibleChange = (visible) => {
+		triggerVisible.value = visible;
+		props.onVisibleChange?.(visible);
+	};
+	useAccessibility({
+		visible: mergedVisible,
+		triggerRef: childRef,
+		onVisibleChange: handleVisibleChange,
+		autoFocus,
+		overlayRef
+	});
+	const onClick = (e) => {
+		const { onOverlayClick } = props;
+		triggerVisible.value = false;
+		if (onOverlayClick) onOverlayClick(e);
+	};
+	return () => {
+		const { overlay, prefixCls, arrow, hideAction, trigger, placement, placements, overlayClassName, getPopupContainer, showAction, overlayStyle, align,...otherProps } = props;
+		const getMenuElement = () => createVNode(Overlay_default, {
+			"ref": overlayRef,
+			"overlay": overlay,
+			"prefixCls": prefixCls,
+			"arrow": arrow
+		}, null);
+		const getMenuElementOrLambda = () => {
+			if (typeof overlay === "function") return getMenuElement;
+			return getMenuElement();
+		};
+		const getMinOverlayWidthMatchTrigger = () => {
+			const { minOverlayWidthMatchTrigger, alignPoint } = props;
+			if (minOverlayWidthMatchTrigger !== void 0) return minOverlayWidthMatchTrigger;
+			return !alignPoint;
+		};
+		const getOpenClassName = () => {
+			const { openClassName } = props;
+			if (openClassName !== void 0) return openClassName;
+			return `${prefixCls}-open`;
+		};
+		const children = filterEmpty(slots?.default?.() ?? [])?.[0];
+		const childrenNode = createVNode(children, {
+			class: clsx(mergedVisible.value && getOpenClassName()),
+			ref: childRef
+		});
+		let triggerHideAction = hideAction;
+		if (!triggerHideAction && trigger?.includes("contextMenu")) triggerHideAction = ["click"];
+		return createVNode(Trigger, mergeProps({ "builtinPlacements": placements }, removeUndefined(otherProps), {
+			"prefixCls": prefixCls,
+			"ref": triggerRef,
+			"popupClassName": clsx(overlayClassName, { [`${prefixCls}-show-arrow`]: arrow }),
+			"popupStyle": overlayStyle,
+			"action": trigger,
+			"showAction": showAction,
+			"hideAction": triggerHideAction,
+			"popupPlacement": placement,
+			"popupAlign": align,
+			"popupMotion": { name: mergedMotionName.value },
+			"popupVisible": mergedVisible.value,
+			"stretch": getMinOverlayWidthMatchTrigger() ? "minWidth" : "",
+			"popup": getMenuElementOrLambda(),
+			"onOpenChange": handleVisibleChange,
+			"onPopupClick": onClick,
+			"getPopupContainer": getPopupContainer
+		}), _isSlot(childrenNode) ? childrenNode : { default: () => [childrenNode] });
+	};
+}, { props: /* @__PURE__ */ mergeDefaults({
+	minOverlayWidthMatchTrigger: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	arrow: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	onVisibleChange: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	onOverlayClick: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	prefixCls: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	transitionName: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	overlayClassName: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	openClassName: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	animation: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	align: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	overlayStyle: {
+		type: null,
+		required: false,
+		default: void 0
+	},
+	placement: {
+		type: null,
+		required: false,
+		default: void 0
+	},
+	placements: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	overlay: {
+		type: [
+			Function,
+			String,
+			Number,
+			null,
+			Array
+		],
+		required: false,
+		skipCheck: true,
+		default: void 0
+	},
+	trigger: {
+		type: [String, Array],
+		required: false,
+		default: void 0
+	},
+	alignPoint: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	showAction: {
+		type: Array,
+		required: false,
+		default: void 0
+	},
+	hideAction: {
+		type: Array,
+		required: false,
+		default: void 0
+	},
+	visible: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	autoFocus: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	getPopupContainer: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	mouseEnterDelay: {
+		type: Number,
+		required: false,
+		default: void 0
+	},
+	mouseLeaveDelay: {
+		type: Number,
+		required: false,
+		default: void 0
+	},
+	onPopupAlign: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	builtinPlacements: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	autoDestroy: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	}
+}, defaults) });
+export { Dropdown_default as default };

package/dist/Overlay.cjs

@@ -0,0 +1,39 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var Overlay = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const overlayRef = (0, vue.shallowRef)();
+	const setRef = (el) => {
+		overlayRef.value = el;
+	};
+	return () => {
+		const { overlay, arrow, prefixCls } = props;
+		const overlayNode = typeof overlay === "function" ? overlay?.() : overlay;
+		return (0, vue.createVNode)(vue.Fragment, null, [arrow && (0, vue.createVNode)("div", { "class": `${prefixCls}-arrow` }, null), (0, vue.createVNode)(overlayNode, { ref: setRef })]);
+	};
+}, { props: {
+	overlay: {
+		type: [
+			Function,
+			String,
+			Number,
+			null,
+			Array
+		],
+		required: false,
+		skipCheck: true,
+		default: void 0
+	},
+	arrow: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	prefixCls: {
+		type: String,
+		required: false,
+		default: void 0
+	}
+} });
+var Overlay_default = Overlay;
+exports.default = Overlay_default;

package/dist/Overlay.d.ts

@@ -0,0 +1,4 @@
+import { DropdownProps } from './Dropdown.tsx';
+export type OverlayProps = Pick<DropdownProps, 'overlay' | 'arrow' | 'prefixCls'>;
+declare const Overlay: import('vue').DefineSetupFnComponent<OverlayProps, {}, {}, OverlayProps & {}, import('vue').PublicProps>;
+export default Overlay;

package/dist/Overlay.js

@@ -0,0 +1,36 @@
+import { Fragment, createVNode, defineComponent, shallowRef } from "vue";
+var Overlay_default = /* @__PURE__ */ defineComponent((props) => {
+	const overlayRef = shallowRef();
+	const setRef = (el) => {
+		overlayRef.value = el;
+	};
+	return () => {
+		const { overlay, arrow, prefixCls } = props;
+		const overlayNode = typeof overlay === "function" ? overlay?.() : overlay;
+		return createVNode(Fragment, null, [arrow && createVNode("div", { "class": `${prefixCls}-arrow` }, null), createVNode(overlayNode, { ref: setRef })]);
+	};
+}, { props: {
+	overlay: {
+		type: [
+			Function,
+			String,
+			Number,
+			null,
+			Array
+		],
+		required: false,
+		skipCheck: true,
+		default: void 0
+	},
+	arrow: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	prefixCls: {
+		type: String,
+		required: false,
+		default: void 0
+	}
+} });
+export { Overlay_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/hooks/useAccessibility.cjs

@@ -0,0 +1,52 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+__v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(__v_c_util_dist_KeyCode);
+let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
+__v_c_util_dist_raf = require_rolldown_runtime.__toESM(__v_c_util_dist_raf);
+var { ESC, TAB } = __v_c_util_dist_KeyCode.default;
+function useAccessibility({ visible, triggerRef, onVisibleChange, autoFocus, overlayRef }) {
+	const focusMenuRef = (0, vue.shallowRef)(false);
+	const handleCloseMenuAndReturnFocus = () => {
+		if (visible.value) {
+			triggerRef.value?.focus?.();
+			onVisibleChange?.(false);
+		}
+	};
+	const focusMenu = () => {
+		if (overlayRef?.value?.focus) {
+			overlayRef.value.focus();
+			focusMenuRef.value = true;
+			return true;
+		}
+		return false;
+	};
+	const handleKeyDown = (event) => {
+		switch (event.keyCode) {
+			case ESC:
+				handleCloseMenuAndReturnFocus();
+				break;
+			case TAB: {
+				let focusResult = false;
+				if (!focusMenuRef.value) focusResult = focusMenu();
+				if (focusResult) event.preventDefault();
+				else handleCloseMenuAndReturnFocus();
+				break;
+			}
+		}
+	};
+	(0, vue.watch)(visible, (_n, _o, onCleanup) => {
+		if (visible.value) {
+			window.addEventListener("keydown", handleKeyDown);
+			if (autoFocus) (0, __v_c_util_dist_raf.default)(focusMenu, 3);
+			onCleanup(() => {
+				window.removeEventListener("keydown", handleKeyDown);
+				focusMenuRef.value = false;
+			});
+		} else onCleanup(() => {
+			focusMenuRef.value = false;
+		});
+	});
+}
+exports.default = useAccessibility;

package/dist/hooks/useAccessibility.d.ts

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

package/dist/hooks/useAccessibility.js

@@ -0,0 +1,48 @@
+import { shallowRef, watch } from "vue";
+import KeyCode from "@v-c/util/dist/KeyCode";
+import raf from "@v-c/util/dist/raf";
+var { ESC, TAB } = KeyCode;
+function useAccessibility({ visible, triggerRef, onVisibleChange, autoFocus, overlayRef }) {
+	const focusMenuRef = shallowRef(false);
+	const handleCloseMenuAndReturnFocus = () => {
+		if (visible.value) {
+			triggerRef.value?.focus?.();
+			onVisibleChange?.(false);
+		}
+	};
+	const focusMenu = () => {
+		if (overlayRef?.value?.focus) {
+			overlayRef.value.focus();
+			focusMenuRef.value = true;
+			return true;
+		}
+		return false;
+	};
+	const handleKeyDown = (event) => {
+		switch (event.keyCode) {
+			case ESC:
+				handleCloseMenuAndReturnFocus();
+				break;
+			case TAB: {
+				let focusResult = false;
+				if (!focusMenuRef.value) focusResult = focusMenu();
+				if (focusResult) event.preventDefault();
+				else handleCloseMenuAndReturnFocus();
+				break;
+			}
+		}
+	};
+	watch(visible, (_n, _o, onCleanup) => {
+		if (visible.value) {
+			window.addEventListener("keydown", handleKeyDown);
+			if (autoFocus) raf(focusMenu, 3);
+			onCleanup(() => {
+				window.removeEventListener("keydown", handleKeyDown);
+				focusMenuRef.value = false;
+			});
+		} else onCleanup(() => {
+			focusMenuRef.value = false;
+		});
+	});
+}
+export { useAccessibility as default };

package/dist/index.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_Dropdown = require("./Dropdown.cjs");
+var src_default = require_Dropdown.default;
+exports.default = src_default;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { default as Dropdown } from './Dropdown';
+export type { DropdownProps } from './Dropdown';
+export type { OverlayProps } from './Overlay';
+export type { TriggerProps } from '../../trigger/src';
+export default Dropdown;

package/dist/index.js

@@ -0,0 +1,3 @@
+import Dropdown_default from "./Dropdown.js";
+var src_default = Dropdown_default;
+export { src_default as default };

package/dist/placements.cjs

@@ -0,0 +1,46 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+var autoAdjustOverflow = {
+	adjustX: 1,
+	adjustY: 1
+};
+var targetOffset = [0, 0];
+var placements = {
+	topLeft: {
+		points: ["bl", "tl"],
+		overflow: autoAdjustOverflow,
+		offset: [0, -4],
+		targetOffset
+	},
+	top: {
+		points: ["bc", "tc"],
+		overflow: autoAdjustOverflow,
+		offset: [0, -4],
+		targetOffset
+	},
+	topRight: {
+		points: ["br", "tr"],
+		overflow: autoAdjustOverflow,
+		offset: [0, -4],
+		targetOffset
+	},
+	bottomLeft: {
+		points: ["tl", "bl"],
+		overflow: autoAdjustOverflow,
+		offset: [0, 4],
+		targetOffset
+	},
+	bottom: {
+		points: ["tc", "bc"],
+		overflow: autoAdjustOverflow,
+		offset: [0, 4],
+		targetOffset
+	},
+	bottomRight: {
+		points: ["tr", "br"],
+		overflow: autoAdjustOverflow,
+		offset: [0, 4],
+		targetOffset
+	}
+};
+var placements_default = placements;
+exports.default = placements_default;

package/dist/placements.d.ts

@@ -0,0 +1,57 @@
+declare const placements: {
+    topLeft: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        offset: number[];
+        targetOffset: number[];
+    };
+    top: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        offset: number[];
+        targetOffset: number[];
+    };
+    topRight: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        offset: number[];
+        targetOffset: number[];
+    };
+    bottomLeft: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        offset: number[];
+        targetOffset: number[];
+    };
+    bottom: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        offset: number[];
+        targetOffset: number[];
+    };
+    bottomRight: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        offset: number[];
+        targetOffset: number[];
+    };
+};
+export default placements;

package/dist/placements.js

@@ -0,0 +1,44 @@
+var autoAdjustOverflow = {
+	adjustX: 1,
+	adjustY: 1
+};
+var targetOffset = [0, 0];
+var placements_default = {
+	topLeft: {
+		points: ["bl", "tl"],
+		overflow: autoAdjustOverflow,
+		offset: [0, -4],
+		targetOffset
+	},
+	top: {
+		points: ["bc", "tc"],
+		overflow: autoAdjustOverflow,
+		offset: [0, -4],
+		targetOffset
+	},
+	topRight: {
+		points: ["br", "tr"],
+		overflow: autoAdjustOverflow,
+		offset: [0, -4],
+		targetOffset
+	},
+	bottomLeft: {
+		points: ["tl", "bl"],
+		overflow: autoAdjustOverflow,
+		offset: [0, 4],
+		targetOffset
+	},
+	bottom: {
+		points: ["tc", "bc"],
+		overflow: autoAdjustOverflow,
+		offset: [0, 4],
+		targetOffset
+	},
+	bottomRight: {
+		points: ["tr", "br"],
+		overflow: autoAdjustOverflow,
+		offset: [0, 4],
+		targetOffset
+	}
+};
+export { placements_default as default };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@v-c/dropdown",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "dropdown ui component for vue",
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "dropdown"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/trigger": "0.0.13",
+    "@v-c/util": "0.0.13"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublish": "pnpm build",
+    "test": "vitest run",
+    "bump": "bumpp --release patch"
+  }
+}