@astryx-vue/core 0.1.0 → 0.1.1

package/dist/{ContextMenu-BJh99Exj.js → ContextMenu-dA-ppaRQ.js}

@@ -1,13 +1,22 @@
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
 import { t as useDismiss } from "./useDismiss-CAiHU6QD.js";
 import { t as useLongPress } from "./useLongPress-Cyxwa73s.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
-import { t as _sfc_main$6 } from "./Icon-B6qNgBP9.js";
+import { t as _sfc_main$6 } from "./Icon-5MdZQ18k.js";
 import { t as _sfc_main$7 } from "./Divider-BtwnL18I.js";
 import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import "../styles/context-menu.css";
 //#region src/ContextMenu/context.ts
 const contextMenuContextKey = Symbol("astryx-context-menu");
+/**
+* Whether the submenu flyout that contains this one is showing.
+*
+* Nested flyouts are teleported to `body`, so hiding an ancestor's DOM does
+* not hide them. Each submenu provides its own `showsFlyout` for the next
+* level; a row with no ancestor submenu reads as open.
+*/
+const submenuAncestorOpenKey = Symbol("astryx-submenu-ancestor-open");
 /** The surrounding menu, or `undefined` when the row stands alone. */
 function useContextMenu() {
 	return inject(contextMenuContextKey, void 0);
@@ -385,6 +394,229 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		};
 	}
 });
+function sign(p1, p2, p3) {
+	return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
+}
+function isPointInTriangle(p, a, b, c) {
+	const d1 = sign(p, a, b);
+	const d2 = sign(p, b, c);
+	const d3 = sign(p, c, a);
+	return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
+}
+/**
+* Whether `point` lies inside the triangle from `origin` (where the pointer
+* left the row) to the flyout's near edge — the edge facing the origin.
+*/
+function isPointInSafeTriangle(point, origin, flyout) {
+	const pad = 8;
+	let edgeStart;
+	let edgeEnd;
+	if (origin.x <= flyout.left) {
+		edgeStart = {
+			x: flyout.left,
+			y: flyout.top - pad
+		};
+		edgeEnd = {
+			x: flyout.left,
+			y: flyout.bottom + pad
+		};
+	} else if (origin.x >= flyout.right) {
+		edgeStart = {
+			x: flyout.right,
+			y: flyout.top - pad
+		};
+		edgeEnd = {
+			x: flyout.right,
+			y: flyout.bottom + pad
+		};
+	} else if (origin.y <= flyout.top) {
+		edgeStart = {
+			x: flyout.left - pad,
+			y: flyout.top
+		};
+		edgeEnd = {
+			x: flyout.right + pad,
+			y: flyout.top
+		};
+	} else if (origin.y >= flyout.bottom) {
+		edgeStart = {
+			x: flyout.left - pad,
+			y: flyout.bottom
+		};
+		edgeEnd = {
+			x: flyout.right + pad,
+			y: flyout.bottom
+		};
+	} else return false;
+	return isPointInTriangle(point, origin, edgeStart, edgeEnd);
+}
+function useSubmenuHover(options) {
+	const hasHover = useMediaQuery("(hover: hover)");
+	let showTimer;
+	let hideTimer;
+	let stopTriangle = null;
+	/** Hover opened this flyout, so leaving may close it. */
+	let provenance = null;
+	let hoverOpenedAt = 0;
+	/** When the flyout last closed. A pointer enter inside the suppress window is ignored. */
+	let closedAt = 0;
+	/** While true, a point inside `isInsideTriangle` is still heading for the flyout. */
+	let isTracking = false;
+	let isInsideTriangle = () => false;
+	function clearShowTimer() {
+		if (showTimer != null) clearTimeout(showTimer);
+		showTimer = void 0;
+	}
+	function clearHideTimer() {
+		if (hideTimer != null) clearTimeout(hideTimer);
+		hideTimer = void 0;
+	}
+	function clearTriangle() {
+		stopTriangle?.();
+		stopTriangle = null;
+		isTracking = false;
+		isInsideTriangle = () => false;
+	}
+	function cancelTimers() {
+		clearShowTimer();
+		clearHideTimer();
+		clearTriangle();
+	}
+	function markClosed() {
+		const shouldStamp = options.isOpen() || provenance != null;
+		cancelTimers();
+		provenance = null;
+		hoverOpenedAt = 0;
+		if (shouldStamp) closedAt = Date.now();
+	}
+	function closeNow() {
+		cancelTimers();
+		provenance = null;
+		hoverOpenedAt = 0;
+		if (options.isOpen()) options.closeFromPointer();
+	}
+	function notePinned() {
+		cancelTimers();
+		provenance = "pinned";
+		hoverOpenedAt = 0;
+		closedAt = 0;
+	}
+	function noteHoverOpened() {
+		provenance = "hover";
+		hoverOpenedAt = Date.now();
+		closedAt = 0;
+	}
+	function scheduleHide(event) {
+		if (provenance !== "hover") return;
+		clearHideTimer();
+		clearTriangle();
+		let lastPoint = null;
+		const arm = () => {
+			clearHideTimer();
+			hideTimer = setTimeout(() => {
+				if (isTracking && lastPoint != null && isInsideTriangle(lastPoint)) {
+					arm();
+					return;
+				}
+				closeNow();
+			}, 200);
+		};
+		arm();
+		const menu = unref(options.flyout);
+		const apex = event != null ? {
+			x: event.clientX,
+			y: event.clientY
+		} : null;
+		if (menu == null || apex == null || !options.isOpen()) return;
+		const rect = menu.getBoundingClientRect();
+		if (rect.width <= 0 || rect.height <= 0) return;
+		const doc = menu.ownerDocument;
+		isInsideTriangle = (point) => isPointInSafeTriangle(point, apex, rect);
+		isTracking = true;
+		lastPoint = apex;
+		const onPointerMove = (move) => {
+			const point = {
+				x: move.clientX,
+				y: move.clientY
+			};
+			lastPoint = point;
+			if (isInsideTriangle(point)) {
+				arm();
+				return;
+			}
+			isTracking = false;
+			clearTriangle();
+		};
+		doc.addEventListener("pointermove", onPointerMove, true);
+		stopTriangle = () => {
+			doc.removeEventListener("pointermove", onPointerMove, true);
+		};
+	}
+	function onTriggerPointerEnter(event) {
+		if (event.pointerType !== "mouse" || !hasHover.value) return;
+		if (options.isOpen()) {
+			clearHideTimer();
+			clearTriangle();
+			return;
+		}
+		if (closedAt > 0 && Date.now() - closedAt < 300) return;
+		clearShowTimer();
+		if (!options.isEnabled()) return;
+		showTimer = setTimeout(() => {
+			showTimer = void 0;
+			if (!options.isEnabled() || options.isOpen()) return;
+			options.openFromHover();
+		}, 150);
+	}
+	function onTriggerPointerLeave(event) {
+		if (event.pointerType !== "mouse") return;
+		closedAt = 0;
+		clearShowTimer();
+		scheduleHide(event);
+	}
+	function onFlyoutPointerEnter(event) {
+		if (event.pointerType !== "mouse") return;
+		clearShowTimer();
+		clearHideTimer();
+		clearTriangle();
+	}
+	function onFlyoutPointerLeave(event) {
+		if (event.pointerType !== "mouse") return;
+		closedAt = 0;
+		scheduleHide(event);
+	}
+	function onTriggerClick(event) {
+		if (!options.isEnabled()) return;
+		if (event.detail === 0) {
+			if (!options.isOpen()) options.openPinned();
+			return;
+		}
+		cancelTimers();
+		if (!options.isOpen()) {
+			options.openPinned();
+			return;
+		}
+		if (provenance === "hover" && hoverOpenedAt > 0 && Date.now() - hoverOpenedAt < 500) {
+			provenance = "pinned";
+			hoverOpenedAt = 0;
+			return;
+		}
+		options.closeFromPointer();
+	}
+	onScopeDispose(cancelTimers);
+	return {
+		cancel: cancelTimers,
+		isHoverDriven: () => provenance === "hover",
+		markClosed,
+		noteHoverOpened,
+		notePinned,
+		onFlyoutPointerEnter,
+		onFlyoutPointerLeave,
+		onTriggerClick,
+		onTriggerPointerEnter,
+		onTriggerPointerLeave
+	};
+}
 //#endregion
 //#region src/ContextMenu/ContextMenuSubMenu.vue
 const _hoisted_1$1 = [
@@ -441,7 +673,9 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		const isOpen = ref(false);
 		const flyoutId = `astryx-context-menu-submenu-${useId()}`;
 		const flyoutLabel = computed(() => typeof props.label === "string" ? props.label : menu?.menuLabel.value ?? "Submenu");
-		const showsFlyout = computed(() => isOpen.value && (menu?.isOpen.value ?? true));
+		const ancestorOpen = inject(submenuAncestorOpenKey, computed(() => true));
+		const showsFlyout = computed(() => isOpen.value && (menu?.isOpen.value ?? true) && ancestorOpen.value);
+		provide(submenuAncestorOpenKey, showsFlyout);
 		const { position } = usePositionedLayer({
 			anchor: row,
 			layer: flyout,
@@ -469,6 +703,14 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			enableEscape: computed(() => true),
 			onDismiss: () => close(true)
 		});
+		const hover = useSubmenuHover({
+			isEnabled: () => !props.isDisabled,
+			isOpen: () => isOpen.value,
+			flyout,
+			openFromHover,
+			openPinned: () => open(false),
+			closeFromPointer: () => close(false)
+		});
 		function open(focusFirstRow) {
 			if (props.isDisabled) return;
 			if (isOpen.value) {
@@ -477,10 +719,19 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			}
 			isOpen.value = true;
 			emit("openChange", true);
+			hover.notePinned();
 			if (focusFirstRow) nextTick(() => nav.focusFirst());
 		}
+		function openFromHover() {
+			if (props.isDisabled || isOpen.value) return;
+			isOpen.value = true;
+			emit("openChange", true);
+			hover.noteHoverOpened();
+		}
 		function close(focusRow) {
-			if (!isOpen.value) return;
+			const wasOpen = isOpen.value;
+			hover.markClosed();
+			if (!wasOpen) return;
 			isOpen.value = false;
 			nav.resetTypeahead();
 			emit("openChange", false);
@@ -496,12 +747,22 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			close(false);
 		}
 		function onRowFocusOut() {
-			if (!isOpen.value) return;
+			if (!isOpen.value || hover.isHoverDriven()) return;
 			nextTick(() => {
+				if (!isOpen.value || hover.isHoverDriven()) return;
 				const active = row.value?.ownerDocument.activeElement;
 				if (!(active instanceof Node && (row.value?.contains(active) === true || flyout.value?.contains(active) === true))) close(false);
 			});
 		}
+		function onRowClick(event) {
+			hover.onTriggerClick(event);
+		}
+		function onRowPointerMove(event) {
+			if (props.isDisabled || event.pointerType !== "mouse") return;
+			const element = row.value;
+			if (element == null || element === element.ownerDocument.activeElement) return;
+			element.focus({ preventScroll: true });
+		}
 		function onFlyoutKeyDown(event) {
 			if (event.isComposing) return;
 			if (event.key === "ArrowLeft") {
@@ -515,11 +776,18 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			emit("select", item, event);
 		}
 		function onRowPointerEnter(event) {
-			if (event.pointerType !== "mouse") return;
-			open(false);
+			hover.onTriggerPointerEnter(event);
 		}
-		watch(() => menu?.isOpen.value, (open) => {
-			if (open === false) close(false);
+		watch(() => menu?.isOpen.value, (menuOpen) => {
+			if (menuOpen === false) {
+				hover.cancel();
+				close(false);
+			}
+		});
+		watch(ancestorOpen, (visible) => {
+			if (visible) return;
+			hover.cancel();
+			close(false);
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
@@ -538,10 +806,12 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 					role: "menuitem",
 					style: unref(attrs).style,
 					tabindex: __props.isDisabled ? void 0 : -1,
-					onClick: _cache[0] || (_cache[0] = ($event) => open(false)),
+					onClick: onRowClick,
 					onFocusout: onRowFocusOut,
 					onKeydown: onRowKeyDown,
-					onPointerenter: onRowPointerEnter
+					onPointerenter: onRowPointerEnter,
+					onPointerleave: _cache[0] || (_cache[0] = (...args) => unref(hover).onTriggerPointerLeave && unref(hover).onTriggerPointerLeave(...args)),
+					onPointermove: onRowPointerMove
 				}), [
 					__props.icon != null || _ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$6, {
 						icon: __props.icon,
@@ -573,7 +843,9 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 						style: normalizeStyle(flyoutStyle.value),
 						tabindex: "-1",
 						onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
-						onKeydown: onFlyoutKeyDown
+						onKeydown: onFlyoutKeyDown,
+						onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(hover).onFlyoutPointerEnter && unref(hover).onFlyoutPointerEnter(...args)),
+						onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(hover).onFlyoutPointerLeave && unref(hover).onFlyoutPointerLeave(...args))
 					}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(_sfc_main$1, {
 						items: __props.items ?? [],
 						onSelect: onNestedSelect

package/dist/DateInput/index.d.ts

@@ -1,2 +1,2 @@
-import { i as DateInputSlots, n as DateInputEmits, r as DateInputProps, t as _default } from "../index-Cdi82rTW.js";
+import { i as DateInputSlots, n as DateInputEmits, r as DateInputProps, t as _default } from "../index-12ObcW99.js";
 export { _default as DateInput, type DateInputEmits, type DateInputProps, type DateInputSlots };

package/dist/DateInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../DateInput-zJAdXByM.js";
+import { t as _sfc_main } from "../DateInput-BOIb0zAp.js";
 export { _sfc_main as DateInput };

package/dist/{DateInput-zJAdXByM.js → DateInput-BOIb0zAp.js}

@@ -1,5 +1,5 @@
-import { t as _sfc_main$1 } from "./Calendar-DpYFXwgb.js";
-import { a as useAstryxMessages } from "./locale-56lkR7OK.js";
+import { t as _sfc_main$1 } from "./Calendar-BEyrkUtr.js";
+import { a as useAstryxMessages } from "./context-BshXcNYX.js";
 import { t as _sfc_main$2 } from "./Popover-Crhk9PNP.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, useId, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/date-input.css";
@@ -11,10 +11,13 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = ["disabled", "aria-label"];
 const _hoisted_4 = [
+	"id",
 	"value",
 	"placeholder",
 	"disabled",
 	"aria-label",
+	"aria-describedby",
+	"aria-controls",
 	"aria-expanded",
 	"title"
 ];
@@ -23,11 +26,14 @@ const _hoisted_6 = {
 	key: 2,
 	class: "astryx-date-input-suffix"
 };
-const _hoisted_7 = ["name", "value"];
+const _hoisted_7 = ["id"];
+const _hoisted_8 = ["name", "value"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxDateInput",
 	__name: "DateInput",
 	props: {
+		id: {},
+		describedBy: {},
 		modelValue: { default: null },
 		placeholder: {},
 		min: {},
@@ -52,8 +58,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const inputId = `astryx-date-input-${useId()}`;
-		const popupId = `${inputId}-popup`;
+		const generatedId = `astryx-date-input-${useId()}`;
+		const inputId = computed(() => props.id ?? generatedId);
+		const popupId = computed(() => `${inputId.value}-popup`);
 		const messages = useAstryxMessages();
 		const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.dateInput.placeholder);
 		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.dateInput.clear(props.label));
@@ -133,7 +140,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				label: dialogLabel.value,
 				onOpenChange
 			}, {
-				content: withCtx(() => [createElementVNode("div", { id: popupId }, [createVNode(_sfc_main$1, {
+				content: withCtx(() => [createElementVNode("div", { id: popupId.value }, [createVNode(_sfc_main$1, {
 					"model-value": props.modelValue,
 					min: props.min,
 					max: props.max,
@@ -144,7 +151,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"min",
 					"max",
 					"is-date-disabled"
-				])])]),
+				])], 8, _hoisted_7)]),
 				default: withCtx(() => [createElementVNode("div", {
 					class: "astryx-date-input-wrapper",
 					"data-disabled": props.disabled ? "true" : void 0,
@@ -185,7 +192,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						})
 					], -1)])], 8, _hoisted_3),
 					createElementVNode("input", {
-						id: inputId,
+						id: inputId.value,
 						ref_key: "inputRef",
 						ref: inputRef,
 						type: "text",
@@ -195,7 +202,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						placeholder: resolvedPlaceholder.value,
 						disabled: props.disabled,
 						"aria-label": props.label,
-						"aria-controls": popupId,
+						"aria-describedby": props.describedBy,
+						"aria-controls": popupId.value,
 						"aria-expanded": isOpen.value,
 						"aria-haspopup": "dialog",
 						title: props.disabledReason,
@@ -234,7 +242,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				type: "hidden",
 				name: props.name,
 				value: formatDate(props.modelValue)
-			}, null, 8, _hoisted_7)) : createCommentVNode("v-if", true)], 2);
+			}, null, 8, _hoisted_8)) : createCommentVNode("v-if", true)], 2);
 		};
 	}
 });

package/dist/DateRangeInput/index.d.ts

@@ -0,0 +1,2 @@
+import { Gn as DateRange, Jn as DateRangePreset, Kn as DateRangeInputEmits, Wn as _default, qn as DateRangeInputProps } from "../index-CQ9F1f_F.js";
+export { type DateRange, _default as DateRangeInput, type DateRangeInputEmits, type DateRangeInputProps, type DateRangePreset };

package/dist/DateRangeInput/index.js

@@ -0,0 +1,2 @@
+import { t as _sfc_main } from "../DateRangeInput-DLcbgUBi.js";
+export { _sfc_main as DateRangeInput };