@astryx-vue/core 0.2.2 → 0.2.4

package/dist/DropdownMenu-6E9jFdFe.js

@@ -0,0 +1,325 @@
+import { t as useDismiss } from "./useDismiss-Cj8x_51F.js";
+import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
+import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
+import { t as _sfc_main$1 } from "./Icon-bteSId7T.js";
+import { t as _sfc_main$2 } from "./Item-DrYJL1TG.js";
+import { a as dropdownMenuContextKey, o as useDropdownMenuContext } from "./useMenuDrillIn-BgjJcY3K.js";
+import { n as useMenuFocus, o as MENU_ITEM_ROLES, r as _sfc_main$3, s as activateMenuItem } from "./DropdownMenu--lnUeJEG.js";
+import { t as _sfc_main$4 } from "./Spinner-9cYUCnDy.js";
+import { t as useSubmenuMode } from "./useSubmenuMode-CZN9qrUo.js";
+import { Fragment, Teleport, computed, createBlock, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, nextTick, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, unref, useId, useSlots, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import "../styles/dropdown-menu.css";
+//#region src/DropdownMenu/DropdownMenuSubMenu.vue
+const _hoisted_1 = {
+	key: 0,
+	class: "astryx-dropdown-menu-spinner",
+	"aria-hidden": "true"
+};
+const _hoisted_2 = ["aria-label", "hidden"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxDropdownMenuSubMenu",
+	inheritAttrs: false,
+	__name: "DropdownMenuSubMenu",
+	props: {
+		label: {},
+		icon: {},
+		description: {},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		hasSpinner: {
+			type: Boolean,
+			default: false
+		},
+		menuWidth: {},
+		presentation: { default: "adaptive" }
+	},
+	emits: ["openChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const INTRINSIC_SIZE = /^(?:auto|min-content|max-content|fit-content|fit-content\(.*\)|inherit|initial|unset|revert|revert-layer)$/i;
+		const slots = useSlots();
+		const messages = useAstryxMessages();
+		const menu = useDropdownMenuContext();
+		const rowComponent = ref(null);
+		const rowRef = computed(() => rowComponent.value?.element ?? null);
+		const flyoutRef = ref(null);
+		const drillRef = ref(null);
+		const flyoutOpen = ref(false);
+		const viewId = useId();
+		const menuSize = computed(() => menu?.menuSize.value ?? "md");
+		const density = computed(() => menuSize.value === "sm" ? "compact" : "balanced");
+		const hasStart = computed(() => slots.icon != null || props.icon != null);
+		const stringLabel = computed(() => typeof props.label === "string" ? props.label : void 0);
+		const focus = useMenuFocus({ list: flyoutRef });
+		const drillFocus = useMenuFocus({ list: drillRef });
+		const mode = useSubmenuMode({
+			drillIn: computed(() => menu?.drillIn.value),
+			presentation: computed(() => props.presentation),
+			viewId
+		});
+		const isDrill = mode.isDrill;
+		const drillOnStack = mode.isOnStack;
+		const drillIsTop = mode.isTop;
+		const isShown = computed(() => isDrill.value ? drillOnStack.value : flyoutOpen.value);
+		const backLabel = computed(() => {
+			const parent = menu?.menuLabel.value;
+			return parent != null && parent !== "" ? messages.value.dropdownMenu.backTo(parent) : messages.value.dropdownMenu.back;
+		});
+		const { position } = usePositionedLayer({
+			anchor: rowRef,
+			layer: flyoutRef,
+			isOpen: flyoutOpen,
+			placement: computed(() => "end"),
+			alignment: computed(() => "start"),
+			gap: 4
+		});
+		const flyoutStyle = computed(() => {
+			const style = {
+				top: `${position.value.top}px`,
+				left: `${position.value.left}px`,
+				zIndex: 1001
+			};
+			if (props.menuWidth == null) return style;
+			const width = (typeof props.menuWidth === "number" ? `${props.menuWidth}px` : props.menuWidth).trim();
+			if (INTRINSIC_SIZE.test(width)) style.width = width;
+			else style.minWidth = `min(${width}, calc(100vw - 16px))`;
+			return style;
+		});
+		const drillHost = computed(() => isDrill.value ? menu?.drillIn.value.host ?? null : null);
+		let closeTimer = 0;
+		function cancelClose() {
+			if (closeTimer !== 0) window.clearTimeout(closeTimer);
+			closeTimer = 0;
+		}
+		function scheduleClose() {
+			if (isDrill.value) return;
+			cancelClose();
+			closeTimer = window.setTimeout(() => {
+				closeFlyout(false);
+			}, 120);
+		}
+		async function focusDrillFirst() {
+			await nextTick();
+			if (!drillFocus.focusFirst()) drillRef.value?.focus({ preventScroll: true });
+		}
+		async function openFlyout() {
+			if (props.isDisabled) return;
+			if (isDrill.value) {
+				const wasOpen = drillOnStack.value;
+				mode.openDrill();
+				if (!wasOpen) emit("openChange", true);
+				await focusDrillFirst();
+				return;
+			}
+			cancelClose();
+			if (!flyoutOpen.value) emit("openChange", true);
+			flyoutOpen.value = true;
+			await nextTick();
+			focus.focusFirst();
+		}
+		function closeFlyout(focusRow = true) {
+			cancelClose();
+			if (isDrill.value) {
+				if (!mode.closeDrill()) return;
+				emit("openChange", false);
+				if (focusRow) rowComponent.value?.focus();
+				return;
+			}
+			if (!flyoutOpen.value) return;
+			flyoutOpen.value = false;
+			emit("openChange", false);
+			if (focusRow) rowComponent.value?.focus();
+		}
+		function onDrillKeydown(event) {
+			if (event.key === "Tab" && menu?.hasRegions.value) {
+				event.preventDefault();
+				event.stopPropagation();
+				closeFlyout(false);
+				menu.focusRegion(event.shiftKey ? "previous" : "next");
+				return;
+			}
+			if (event.key === "ArrowLeft" || event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				closeFlyout(true);
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				event.stopPropagation();
+				if (event.repeat) return;
+				const focused = document.activeElement;
+				if (focused instanceof HTMLElement && MENU_ITEM_ROLES.has(focused.getAttribute("role") ?? "")) activateMenuItem(focused, event);
+				return;
+			}
+			event.stopPropagation();
+			drillFocus.handleKeyDown(event);
+		}
+		function onFlyoutKeydown(event) {
+			if (event.key === "Tab" && menu?.hasRegions.value) {
+				event.preventDefault();
+				closeFlyout(false);
+				menu.focusRegion(event.shiftKey ? "previous" : "next");
+				return;
+			}
+			if (event.key === "ArrowLeft" || event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				closeFlyout(true);
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				event.stopPropagation();
+				if (event.repeat) return;
+				const focused = document.activeElement;
+				if (focused instanceof HTMLElement && MENU_ITEM_ROLES.has(focused.getAttribute("role") ?? "")) activateMenuItem(focused, event);
+				return;
+			}
+			event.stopPropagation();
+			focus.handleKeyDown(event);
+		}
+		const emptyDrill = {
+			host: null,
+			isCompactTouch: false,
+			pop: () => {},
+			push: () => {},
+			viewStack: []
+		};
+		provide(dropdownMenuContextKey, {
+			closeMenu: () => {
+				closeFlyout(false);
+				menu?.closeMenu();
+			},
+			drillIn: computed(() => menu?.drillIn.value ?? emptyDrill),
+			focusRegion: (direction) => menu?.focusRegion(direction) ?? false,
+			hasRegions: computed(() => menu?.hasRegions.value ?? false),
+			isOpen: computed(() => (menu?.isOpen.value ?? true) && isShown.value),
+			menuLabel: computed(() => stringLabel.value ?? menu?.menuLabel.value),
+			menuSize
+		});
+		useDismiss({
+			container: flyoutRef,
+			trigger: rowRef,
+			isEnabled: computed(() => flyoutOpen.value && !isDrill.value),
+			onDismiss: () => closeFlyout(false)
+		});
+		useDismiss({
+			container: drillRef,
+			isEnabled: drillIsTop,
+			onDismiss: () => {
+				if (drillIsTop.value) closeFlyout(true);
+			}
+		});
+		watch(() => menu?.isOpen.value, (open) => {
+			if (!open) flyoutOpen.value = false;
+		});
+		watch(drillOnStack, (onStack, wasOnStack) => {
+			if (wasOnStack === true && !onStack && menu?.isOpen.value) rowComponent.value?.focus();
+		});
+		onBeforeUnmount(cancelClose);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$2, {
+				ref_key: "rowComponent",
+				ref: rowComponent,
+				class: "astryx-dropdown-menu-item",
+				role: "menuitem",
+				"aria-haspopup": "menu",
+				"aria-expanded": isShown.value,
+				"data-menu-size": menuSize.value,
+				"data-variant": "default",
+				density: density.value,
+				description: __props.description,
+				"is-disabled": __props.isDisabled,
+				label: __props.label,
+				tabindex: __props.isDisabled ? void 0 : -1,
+				"on-click": openFlyout,
+				onKeydown: [
+					withKeys(withModifiers(openFlyout, ["prevent", "stop"]), ["right"]),
+					withKeys(withModifiers(openFlyout, ["prevent", "stop"]), ["enter"]),
+					withKeys(withModifiers(openFlyout, ["prevent", "stop"]), ["space"])
+				],
+				onPointerenter: openFlyout,
+				onPointerleave: scheduleClose
+			}, createSlots({
+				endContent: withCtx(() => [__props.hasSpinner ? (openBlock(), createElementBlock("span", _hoisted_1, [createVNode(_sfc_main$4, { size: "sm" })])) : (openBlock(), createBlock(_sfc_main$1, {
+					key: 1,
+					color: "secondary",
+					icon: "chevronRight",
+					size: "sm"
+				}))]),
+				_: 2
+			}, [
+				hasStart.value ? {
+					name: "startContent",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$1, {
+						color: "secondary",
+						icon: __props.icon,
+						size: "sm"
+					}, null, 8, ["icon"])])]),
+					key: "0"
+				} : void 0,
+				unref(slots).label ? {
+					name: "label",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "label")]),
+					key: "1"
+				} : void 0,
+				unref(slots).description ? {
+					name: "description",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
+					key: "2"
+				} : void 0
+			]), 1032, [
+				"aria-expanded",
+				"data-menu-size",
+				"density",
+				"description",
+				"is-disabled",
+				"label",
+				"tabindex",
+				"onKeydown"
+			]), drillHost.value ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: drillHost.value
+			}, [withDirectives(createElementVNode("div", {
+				ref_key: "drillRef",
+				ref: drillRef,
+				class: "astryx-dropdown-menu-drill",
+				role: "menu",
+				"aria-label": stringLabel.value,
+				hidden: unref(drillIsTop) ? void 0 : true,
+				tabindex: "-1",
+				onKeydown: onDrillKeydown
+			}, [createVNode(_sfc_main$3, {
+				"has-close-on-select": false,
+				label: backLabel.value,
+				onClick: _cache[0] || (_cache[0] = ($event) => closeFlyout(true))
+			}, {
+				icon: withCtx(() => [createVNode(_sfc_main$1, {
+					color: "secondary",
+					icon: "chevronLeft",
+					size: "sm"
+				})]),
+				_: 1
+			}, 8, ["label"]), renderSlot(_ctx.$slots, "default")], 40, _hoisted_2), [[vShow, unref(drillOnStack)]])], 8, ["to"])) : (openBlock(), createBlock(Teleport, {
+				key: 1,
+				to: "body"
+			}, [withDirectives(createElementVNode("div", {
+				ref_key: "flyoutRef",
+				ref: flyoutRef,
+				class: "astryx-dropdown-menu astryx-dropdown-submenu",
+				role: "menu",
+				style: normalizeStyle(flyoutStyle.value),
+				tabindex: "-1",
+				onKeydown: onFlyoutKeydown,
+				onPointerenter: cancelClose,
+				onPointerleave: scheduleClose
+			}, [renderSlot(_ctx.$slots, "default")], 36), [[vShow, flyoutOpen.value]])]))], 64);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };