ropav 0.2.0 → 0.3.0

package/dist/components/dropdown/dropdown-root.js

@@ -0,0 +1,62 @@
+import { providePressResponder } from "../../composables/press-responder.js";
+import { useMenuTriggerState } from "../../composables/use-overlay-trigger-state.js";
+import { useMenuTrigger } from "../../composables/use-menu-trigger.js";
+import { provideDropdownContext, provideDropdownPopoverTarget } from "./dropdown.context.js";
+import { computed, createSlot, defineVaporComponent } from "vue";
+import { dropdownVariants } from "@ropav/styles";
+//#region src/components/dropdown/dropdown-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var dropdown_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "dropdown-root",
+	props: {
+		trigger: {},
+		isOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: { type: Boolean },
+		isDisabled: { type: Boolean }
+	},
+	emits: ["openChange", "update:isOpen"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		/**
+		* The whole menu tree's open state lives here, on the root.
+		*
+		* A submenu does not hold its own: it asks the root whether its trigger is the one expanded at its
+		* level. Keeping the stack in one place is what makes "only one path through the tree is open"
+		* true by construction rather than by every submenu closing its siblings.
+		*/
+		const state = useMenuTriggerState({
+			defaultOpen: props.defaultOpen,
+			isOpen: () => props.isOpen,
+			onOpenChange: (isOpen) => {
+				emit("openChange", isOpen);
+				emit("update:isOpen", isOpen);
+			}
+		});
+		const trigger = useMenuTrigger({
+			isDisabled: () => props.isDisabled,
+			trigger: () => props.trigger
+		}, state);
+		providePressResponder(trigger.responder);
+		provideDropdownContext({
+			slots: computed(() => dropdownVariants()),
+			state
+		});
+		provideDropdownPopoverTarget({
+			autoFocus: trigger.autoFocus,
+			closeAll: state.close,
+			isNonModal: false,
+			labelledBy: trigger.triggerId,
+			overlayId: trigger.overlayId,
+			placement: "bottom start",
+			state,
+			trigger: "MenuTrigger",
+			triggerElement: trigger.triggerElement
+		});
+		return createSlot();
+	}
+});
+//#endregion
+export { dropdown_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/dropdown/dropdown-root.vue.d.vue.ts

@@ -0,0 +1,24 @@
+import type { DropdownRootProps } from "./dropdown.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DropdownRootProps & {
+        onOpenChange?: ((isOpen: boolean) => any) | undefined;
+        "onUpdate:isOpen"?: ((isOpen: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/dropdown/dropdown-submenu-trigger.js

@@ -0,0 +1,163 @@
+import { useId as useId$1 } from "../../composables/use-id.js";
+import { useSubmenuTriggerState } from "../../composables/use-overlay-trigger-state.js";
+import { provideMenuItemPopupContext } from "../menu-item/menu-item.context.js";
+import { useMenuContext } from "../menu/menu.context.js";
+import { provideDropdownPopoverTarget, useDropdownContext } from "./dropdown.context.js";
+import { useSafelyMouseToSubmenu } from "../../composables/use-safely-mouse-to-submenu.js";
+import { computed, createSlot, defineVaporComponent, onScopeDispose, shallowRef, watch } from "vue";
+var dropdown_submenu_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "dropdown-submenu-trigger",
+	props: {
+		delay: { default: 200 },
+		isDisabled: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const parentMenu = useMenuContext();
+		const dropdown = useDropdownContext();
+		const overlayId = useId$1();
+		/**
+		* The item that opens this submenu.
+		*
+		* Reported by the item rather than passed in, because the item and the submenu are siblings in the
+		* markup: this component wraps both, but cannot read the item's `id` out of its own slot content.
+		* Until the item has said so the submenu has no identity and stays closed.
+		*/
+		const triggerKey = shallowRef(null);
+		const triggerId = shallowRef("");
+		const triggerElement = shallowRef(null);
+		const submenuElement = shallowRef(null);
+		/**
+		* The submenu's open state, derived from the root's stack.
+		*
+		* The level is fixed when this trigger is created, which is what places it in the tree; the key
+		* decides whether the submenu open at that level is this one.
+		*/
+		const state = useSubmenuTriggerState({ triggerKey }, dropdown.state);
+		const isDisabled = computed(() => Boolean(props.isDisabled));
+		let openTimeout;
+		const cancelOpenTimeout = () => {
+			if (openTimeout !== void 0) clearTimeout(openTimeout);
+			openTimeout = void 0;
+		};
+		onScopeDispose(() => cancelOpenTimeout(), true);
+		const openSubmenu = (strategy) => {
+			cancelOpenTimeout();
+			state.open(strategy ?? null);
+		};
+		const closeSubmenu = () => {
+			cancelOpenTimeout();
+			state.close();
+		};
+		const focusTrigger = () => {
+			triggerElement.value?.focus({ preventScroll: true });
+		};
+		/**
+		* Close the submenu when focus lands somewhere else in the menu that opened it.
+		*
+		* Hovering another item moves focus to it, and a submenu left open beside an unrelated item reads
+		* as that item's submenu. Driven by the focus event rather than by watching the focused key,
+		* because the key settles a tick later and by then it can no longer be told apart from focus that
+		* moved into the submenu itself.
+		*/
+		watch(() => parentMenu.element.value, (menu, _previous, onCleanup) => {
+			if (!menu) return;
+			const onFocusin = (event) => {
+				if (!state.isOpen.value) return;
+				const focused = event.target;
+				if (!(focused instanceof Node) || !menu.contains(focused)) return;
+				if (focused === triggerElement.value) return;
+				closeSubmenu();
+			};
+			menu.addEventListener("focusin", onFocusin);
+			onCleanup(() => menu.removeEventListener("focusin", onFocusin));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		useSafelyMouseToSubmenu({
+			isDisabled,
+			isOpen: () => state.isOpen.value,
+			menuRef: () => parentMenu.element.value,
+			submenuRef: () => submenuElement.value
+		});
+		/** ArrowRight opens the submenu and steps into it; the mirror image in a right-to-left document. */
+		const onTriggerKeydown = (event) => {
+			if (isDisabled.value) return;
+			const direction = triggerElement.value && getComputedStyle(triggerElement.value).direction === "rtl" ? "rtl" : "ltr";
+			const forwards = direction === "ltr" ? "ArrowRight" : "ArrowLeft";
+			const backwards = direction === "ltr" ? "ArrowLeft" : "ArrowRight";
+			if (event.key === forwards) {
+				event.preventDefault();
+				event.stopPropagation();
+				if (!state.isOpen.value) openSubmenu("first");
+				else submenuElement.value?.focus({ preventScroll: true });
+				return;
+			}
+			if (event.key === backwards && state.isOpen.value) {
+				event.preventDefault();
+				event.stopPropagation();
+				closeSubmenu();
+				focusTrigger();
+			}
+		};
+		/** Inside the submenu, the same key going the other way steps back out. */
+		const onSubmenuKeydown = (event) => {
+			const submenu = submenuElement.value;
+			if (!submenu) return;
+			const backwards = (getComputedStyle(submenu).direction === "rtl" ? "rtl" : "ltr") === "ltr" ? "ArrowLeft" : "ArrowRight";
+			if (event.key !== backwards) return;
+			event.preventDefault();
+			event.stopPropagation();
+			closeSubmenu();
+			focusTrigger();
+		};
+		provideMenuItemPopupContext({
+			isOpen: state.isOpen,
+			onActivate: (source) => {
+				if (isDisabled.value) return;
+				openSubmenu(source === "keyboard" ? "first" : void 0);
+			},
+			onKeydown: onTriggerKeydown,
+			onPointerenter: () => {
+				if (isDisabled.value || state.isOpen.value || openTimeout !== void 0) return;
+				openTimeout = setTimeout(() => {
+					openTimeout = void 0;
+					state.open(null);
+				}, props.delay);
+			},
+			onPointerleave: () => cancelOpenTimeout(),
+			popupId: computed(() => state.isOpen.value ? overlayId.value : void 0),
+			registerTrigger: ({ element, id, key }) => {
+				triggerKey.value = key;
+				triggerId.value = id;
+				triggerElement.value = element();
+				return () => {
+					if (triggerKey.value !== key) return;
+					triggerKey.value = null;
+					triggerId.value = "";
+					triggerElement.value = null;
+				};
+			}
+		});
+		provideDropdownPopoverTarget({
+			autoFocus: computed(() => state.focusStrategy.value ?? true),
+			closeAll: state.closeAll,
+			isNonModal: true,
+			labelledBy: computed(() => triggerId.value),
+			onKeydown: onSubmenuKeydown,
+			overlayId,
+			placement: "end top",
+			registerOverlayElement: (element) => {
+				submenuElement.value = element;
+			},
+			shouldCloseOnInteractOutside: (element) => element !== triggerElement.value,
+			state,
+			trigger: "SubmenuTrigger",
+			triggerElement: computed(() => triggerElement.value)
+		});
+		return createSlot();
+	}
+});
+//#endregion
+export { dropdown_submenu_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/dropdown/dropdown-submenu-trigger.vue.d.vue.ts

@@ -0,0 +1,23 @@
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        delay?: number;
+        isDisabled?: boolean;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/dropdown/dropdown-trigger.js

@@ -0,0 +1,48 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
+import { useDropdownContext } from "./dropdown.context.js";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+//#region src/components/dropdown/dropdown-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<button>", 1);
+var dropdown_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "dropdown-trigger",
+	props: {
+		class: {},
+		type: { default: "button" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { slots } = useDropdownContext();
+		const responder = usePressResponder();
+		const styles = computed(() => slots.value.trigger({ class: props.class }));
+		const setElement = (element) => {
+			responder?.registerElement(element ?? null);
+		};
+		const press = composePressResponder(responder);
+		const n1 = t0();
+		renderEffect(() => {
+			const _responder = unref(responder);
+			setDynamicProps(n1, [{
+				class: styles.value,
+				"data-pressed": unref(dataAttr)(_responder?.isPressed.value),
+				"data-slot": "dropdown-trigger",
+				tabindex: "0",
+				type: props.type
+			}, _responder?.attrs.value]);
+		});
+		setInsertionState(n1);
+		createSlot();
+		on(n1, "click", (e) => unref(press).onClick(e));
+		on(n1, "dragstart", (e) => unref(press).onDragstart(e));
+		on(n1, "keydown", (e) => unref(press).onKeydown(e));
+		on(n1, "mousedown", (e) => unref(press).onMousedown(e));
+		on(n1, "pointerdown", (e) => unref(press).onPointerdown(e));
+		on(n1, "pointerenter", (e) => unref(press).onPointerenter(e));
+		on(n1, "pointerleave", (e) => unref(press).onPointerleave(e));
+		on(n1, "pointerup", (e) => unref(press).onPointerup(e));
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
+	}
+});
+//#endregion
+export { dropdown_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/dropdown/dropdown-trigger.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { DropdownTriggerProps } from "./dropdown.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DropdownTriggerProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/dropdown/dropdown.context.d.ts

@@ -0,0 +1,26 @@
+import type { RootMenuTriggerState } from "../../composables/use-overlay-trigger-state";
+import type { OverlayTargetContext } from "../overlay";
+import type { dropdownVariants } from "@ropav/styles";
+import type { ComputedRef } from "vue";
+export interface DropdownContext {
+    /**
+     * The whole tree's open state, held on the root.
+     *
+     * A submenu asks it whether its own trigger is the one expanded at its level rather than holding
+     * a flag of its own, which is what keeps a single path through the tree open.
+     */
+    state: RootMenuTriggerState;
+    slots: ComputedRef<ReturnType<typeof dropdownVariants>>;
+}
+/** Strict: every part of a dropdown needs the state the root holds. */
+export declare const useDropdownContext: () => DropdownContext, provideDropdownContext: (value: DropdownContext) => DropdownContext;
+/**
+ * What one popover in the tree is for: which trigger opened it, where it goes, and what it names.
+ *
+ * The shared overlay context under another name. Provided by the dropdown root for the outermost
+ * popover and overridden by each submenu trigger, so a popover reads its own role from whatever is
+ * nearest above it and needs to know nothing about how deep it sits.
+ */
+export type DropdownPopoverTarget = OverlayTargetContext;
+export declare const useDropdownPopoverTarget: () => OverlayTargetContext;
+export declare const provideDropdownPopoverTarget: (value: OverlayTargetContext) => OverlayTargetContext;

package/dist/components/dropdown/dropdown.context.js

@@ -0,0 +1,9 @@
+import { createContext } from "../../utils/create-context.js";
+import { provideOverlayTargetContext, useOverlayTargetContext } from "../overlay/overlay.context.js";
+//#region src/components/dropdown/dropdown.context.ts
+/** Strict: every part of a dropdown needs the state the root holds. */
+var [useDropdownContext, provideDropdownContext] = createContext({ name: "DropdownContext" });
+var useDropdownPopoverTarget = useOverlayTargetContext;
+var provideDropdownPopoverTarget = provideOverlayTargetContext;
+//#endregion
+export { provideDropdownContext, provideDropdownPopoverTarget, useDropdownContext, useDropdownPopoverTarget };

package/dist/components/dropdown/dropdown.types.d.ts

@@ -0,0 +1,42 @@
+import type { MenuTriggerType } from "../../composables/use-menu-trigger";
+import type { Placement } from "../../utils/position";
+import type { MenuRootProps } from "../menu/menu.types";
+export interface DropdownRootProps {
+    /** How the menu is opened. @default "press" */
+    trigger?: MenuTriggerType;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    /** Disables the trigger, so the menu cannot be opened. */
+    isDisabled?: boolean;
+}
+export interface DropdownRootEmits {
+    openChange: [isOpen: boolean];
+    "update:isOpen": [isOpen: boolean];
+}
+export interface DropdownTriggerProps {
+    class?: string;
+    /** Native button type. @default "button" */
+    type?: "button" | "reset" | "submit";
+}
+export interface DropdownPopoverProps {
+    class?: string;
+    /** Overrides where the popover sits relative to its trigger. */
+    placement?: Placement;
+    /** Distance along the main axis, between the popover and its trigger. @default 8 */
+    offset?: number;
+    /** Distance along the cross axis. @default 0 */
+    crossOffset?: number;
+    /** Whether the popover may flip to the other side when it does not fit. @default true */
+    shouldFlip?: boolean;
+    /** Distance kept between the popover and the edge of the viewport. @default 12 */
+    containerPadding?: number;
+    /** Distance kept between the arrow and the corner of the popover. @default 0 */
+    arrowBoundaryOffset?: number;
+    /** @default false */
+    isKeyboardDismissDisabled?: boolean;
+}
+/**
+ * The menu inside a dropdown. Everything a standalone menu takes, minus the ids and the focus
+ * strategy, which the trigger decides.
+ */
+export type DropdownMenuProps = Omit<MenuRootProps, "ariaLabelledby" | "autoFocus" | "id">;