@astryx-vue/core 0.2.2 → 0.2.4

package/dist/useMenuDrillIn-BgjJcY3K.js

@@ -0,0 +1,520 @@
+import { t as _sfc_main$4 } from "./Icon-bteSId7T.js";
+import { t as _sfc_main$5 } from "./Item-DrYJL1TG.js";
+import { t as _sfc_main$6 } from "./CheckboxIndicator-D37cm2Rh.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeModels, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useSlots, watch, withCtx } from "vue";
+import "../styles/dropdown-menu.css";
+//#region src/DropdownMenu/MenuSelectionMark.vue
+const _hoisted_1$3 = { class: "astryx-dropdown-menu-mark" };
+const _hoisted_2$2 = [
+	"data-checked",
+	"data-disabled",
+	"data-size"
+];
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	name: "AstryxMenuSelectionMark",
+	__name: "MenuSelectionMark",
+	props: {
+		kind: {},
+		checked: { type: Boolean },
+		size: { default: "md" },
+		isDisabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", _hoisted_1$3, [__props.kind === "checkbox" ? (openBlock(), createBlock(_sfc_main$6, {
+				key: 0,
+				"is-disabled": __props.isDisabled,
+				size: __props.size,
+				state: __props.checked ? "checked" : "unchecked"
+			}, null, 8, [
+				"is-disabled",
+				"size",
+				"state"
+			])) : (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: "astryx-dropdown-menu-radio",
+				"data-checked": __props.checked ? "checked" : void 0,
+				"data-disabled": __props.isDisabled || void 0,
+				"data-size": __props.size,
+				"aria-hidden": "true"
+			}, [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "astryx-dropdown-menu-radio-dot" }, null, -1)])], 8, _hoisted_2$2))]);
+		};
+	}
+});
+//#endregion
+//#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);
+}
+/** The row density of the surrounding menu, or the menu default. */
+function useContextMenuSize() {
+	const menu = useContextMenu();
+	return computed(() => menu?.menuSize.value ?? "md");
+}
+//#endregion
+//#region src/DropdownMenu/context.ts
+const dropdownMenuContextKey = Symbol("astryx-dropdown-menu-context");
+/** The surrounding menu, or `undefined` when a row stands alone. */
+function useDropdownMenuContext() {
+	return inject(dropdownMenuContextKey, void 0);
+}
+const dropdownMenuRadioGroupKey = Symbol("astryx-dropdown-menu-radio-group");
+/** The radio group around this row, or `undefined` when there is none. */
+function useDropdownMenuRadioGroup() {
+	return inject(dropdownMenuRadioGroupKey, void 0);
+}
+//#endregion
+//#region src/DropdownMenu/useMenuSelectableRow.ts
+/**
+* Activation shared by a checkbox row and a radio row.
+*
+* The row owns the role and the checked state. The marker is decorative, so
+* the click always lands on the row. A disabled row stays in the tree and
+* refuses the toggle.
+*/
+function useMenuSelectableRow(options) {
+	const dropdown = useDropdownMenuContext();
+	const contextMenu = useContextMenu();
+	const menuSize = computed(() => contextMenu?.menuSize.value ?? dropdown?.menuSize.value ?? "md");
+	const controlSize = computed(() => menuSize.value === "sm" ? "sm" : "md");
+	const density = computed(() => menuSize.value === "sm" ? "compact" : "balanced");
+	const inContextMenu = computed(() => contextMenu != null);
+	function closeHost() {
+		if (!options.hasCloseOnSelect.value) return;
+		if (contextMenu != null) contextMenu.closeMenu();
+		else dropdown?.closeMenu();
+	}
+	function handleClick(event) {
+		if (options.isDisabled.value) {
+			event.preventDefault();
+			return;
+		}
+		options.onActivate();
+		closeHost();
+	}
+	function handlePointerMove(event) {
+		if (options.isDisabled.value || event.pointerType !== "mouse") return;
+		const row = event.currentTarget;
+		if (row instanceof HTMLElement && row !== row.ownerDocument.activeElement) row.focus({ preventScroll: true });
+	}
+	return {
+		controlSize,
+		density,
+		handleClick,
+		handlePointerMove,
+		inContextMenu,
+		menuSize
+	};
+}
+//#endregion
+//#region src/DropdownMenu/DropdownMenuCheckboxItem.vue
+const _hoisted_1$2 = [
+	"aria-checked",
+	"aria-disabled",
+	"data-disabled",
+	"data-size",
+	"tabindex"
+];
+const _hoisted_2$1 = {
+	key: 0,
+	class: "astryx-context-menu-item__start"
+};
+const _hoisted_3$1 = { class: "astryx-context-menu-item__content" };
+const _hoisted_4$1 = {
+	key: 0,
+	class: "astryx-context-menu-item__label",
+	"data-menu-item-label": ""
+};
+const _hoisted_5$1 = {
+	key: 1,
+	class: "astryx-context-menu-item__description"
+};
+const _hoisted_6$1 = {
+	key: 1,
+	class: "astryx-context-menu-item__end"
+};
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	name: "AstryxDropdownMenuCheckboxItem",
+	inheritAttrs: false,
+	__name: "DropdownMenuCheckboxItem",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		description: {},
+		icon: {},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		hasCloseOnSelect: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			required: true
+		},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const checked = useModel(__props, "modelValue");
+		const slots = useSlots();
+		const { controlSize, density, handleClick, handlePointerMove, inContextMenu, menuSize } = useMenuSelectableRow({
+			hasCloseOnSelect: computed(() => props.hasCloseOnSelect),
+			isDisabled: computed(() => props.isDisabled),
+			onActivate: () => {
+				const next = !checked.value;
+				checked.value = next;
+				emit("change", next);
+			}
+		});
+		const hasStart = computed(() => slots.icon != null || props.icon != null);
+		const hasLabel = computed(() => slots.label != null || props.label != null);
+		const hasDescription = computed(() => slots.description != null || props.description != null);
+		const hasEnd = computed(() => slots.endContent != null);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/interactive-supports-focus -- The menu owns Enter, Space, and the arrows. tabindex is -1 while the row is enabled and removed while disabled. "), unref(inContextMenu) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "astryx-context-menu-item",
+				role: "menuitemcheckbox",
+				"aria-checked": checked.value,
+				"aria-disabled": __props.isDisabled || void 0,
+				"data-disabled": __props.isDisabled || void 0,
+				"data-size": unref(menuSize),
+				tabindex: __props.isDisabled ? void 0 : -1,
+				onClick: _cache[0] || (_cache[0] = (...args) => unref(handleClick) && unref(handleClick)(...args)),
+				onPointermove: _cache[1] || (_cache[1] = (...args) => unref(handlePointerMove) && unref(handlePointerMove)(...args))
+			}, [
+				createVNode(_sfc_main$3, {
+					kind: "checkbox",
+					checked: checked.value,
+					"is-disabled": __props.isDisabled,
+					size: unref(controlSize)
+				}, null, 8, [
+					"checked",
+					"is-disabled",
+					"size"
+				]),
+				hasStart.value ? (openBlock(), createElementBlock("span", _hoisted_2$1, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$4, {
+					color: "secondary",
+					icon: __props.icon,
+					size: "sm"
+				}, null, 8, ["icon"])])])) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_3$1, [hasLabel.value ? (openBlock(), createElementBlock("span", _hoisted_4$1, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])) : createCommentVNode("v-if", true), hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_5$1, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("v-if", true)]),
+				hasEnd.value ? (openBlock(), createElementBlock("span", _hoisted_6$1, [renderSlot(_ctx.$slots, "endContent")])) : createCommentVNode("v-if", true)
+			], 40, _hoisted_1$2)) : (openBlock(), createBlock(_sfc_main$5, {
+				key: 1,
+				class: "astryx-dropdown-menu-item",
+				role: "menuitemcheckbox",
+				"aria-checked": checked.value,
+				"data-menu-size": unref(menuSize),
+				"data-variant": "default",
+				density: unref(density),
+				description: __props.description,
+				"is-disabled": __props.isDisabled,
+				label: __props.label,
+				"on-click": unref(handleClick),
+				tabindex: __props.isDisabled ? void 0 : -1,
+				onPointermove: unref(handlePointerMove)
+			}, createSlots({
+				marker: withCtx(() => [createVNode(_sfc_main$3, {
+					kind: "checkbox",
+					checked: checked.value,
+					"is-disabled": __props.isDisabled,
+					size: unref(controlSize)
+				}, null, 8, [
+					"checked",
+					"is-disabled",
+					"size"
+				])]),
+				_: 2
+			}, [
+				hasStart.value ? {
+					name: "startContent",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$4, {
+						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,
+				hasEnd.value ? {
+					name: "endContent",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "endContent")]),
+					key: "3"
+				} : void 0
+			]), 1032, [
+				"aria-checked",
+				"data-menu-size",
+				"density",
+				"description",
+				"is-disabled",
+				"label",
+				"on-click",
+				"tabindex",
+				"onPointermove"
+			]))], 2112);
+		};
+	}
+});
+//#endregion
+//#region src/DropdownMenu/DropdownMenuRadioGroup.vue
+const _hoisted_1$1 = ["aria-label"];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxDropdownMenuRadioGroup",
+	inheritAttrs: false,
+	__name: "DropdownMenuRadioGroup",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		hasCloseOnSelect: {
+			type: Boolean,
+			default: true
+		}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const selected = useModel(__props, "modelValue");
+		provide(dropdownMenuRadioGroupKey, {
+			hasCloseOnSelect: computed(() => props.hasCloseOnSelect),
+			select: (value) => {
+				selected.value = value;
+				emit("change", value);
+			},
+			value: computed(() => selected.value)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "astryx-dropdown-menu-radio-group",
+				role: "group",
+				"aria-label": __props.label
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/DropdownMenu/DropdownMenuRadioItem.vue
+const _hoisted_1 = [
+	"aria-checked",
+	"aria-disabled",
+	"data-disabled",
+	"data-size",
+	"tabindex"
+];
+const _hoisted_2 = {
+	key: 0,
+	class: "astryx-context-menu-item__start"
+};
+const _hoisted_3 = { class: "astryx-context-menu-item__content" };
+const _hoisted_4 = {
+	key: 0,
+	class: "astryx-context-menu-item__label",
+	"data-menu-item-label": ""
+};
+const _hoisted_5 = {
+	key: 1,
+	class: "astryx-context-menu-item__description"
+};
+const _hoisted_6 = {
+	key: 1,
+	class: "astryx-context-menu-item__end"
+};
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxDropdownMenuRadioItem",
+	inheritAttrs: false,
+	__name: "DropdownMenuRadioItem",
+	props: {
+		value: {},
+		label: {},
+		description: {},
+		icon: {},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const group = useDropdownMenuRadioGroup();
+		if (group == null) throw new Error("DropdownMenuRadioItem must be used within a DropdownMenuRadioGroup");
+		const isChecked = computed(() => group.value.value === props.value);
+		const { controlSize, density, handleClick, handlePointerMove, inContextMenu, menuSize } = useMenuSelectableRow({
+			hasCloseOnSelect: group.hasCloseOnSelect,
+			isDisabled: computed(() => props.isDisabled),
+			onActivate: () => group.select(props.value)
+		});
+		const hasStart = computed(() => slots.icon != null || props.icon != null);
+		const hasLabel = computed(() => slots.label != null || props.label != null);
+		const hasDescription = computed(() => slots.description != null || props.description != null);
+		const hasEnd = computed(() => slots.endContent != null);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/interactive-supports-focus -- The menu owns Enter, Space, and the arrows. tabindex is -1 while the row is enabled and removed while disabled. "), unref(inContextMenu) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "astryx-context-menu-item",
+				role: "menuitemradio",
+				"aria-checked": isChecked.value,
+				"aria-disabled": __props.isDisabled || void 0,
+				"data-disabled": __props.isDisabled || void 0,
+				"data-size": unref(menuSize),
+				tabindex: __props.isDisabled ? void 0 : -1,
+				onClick: _cache[0] || (_cache[0] = (...args) => unref(handleClick) && unref(handleClick)(...args)),
+				onPointermove: _cache[1] || (_cache[1] = (...args) => unref(handlePointerMove) && unref(handlePointerMove)(...args))
+			}, [
+				createVNode(_sfc_main$3, {
+					kind: "radio",
+					checked: isChecked.value,
+					"is-disabled": __props.isDisabled,
+					size: unref(controlSize)
+				}, null, 8, [
+					"checked",
+					"is-disabled",
+					"size"
+				]),
+				hasStart.value ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$4, {
+					color: "secondary",
+					icon: __props.icon,
+					size: "sm"
+				}, null, 8, ["icon"])])])) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_3, [hasLabel.value ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])) : createCommentVNode("v-if", true), hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("v-if", true)]),
+				hasEnd.value ? (openBlock(), createElementBlock("span", _hoisted_6, [renderSlot(_ctx.$slots, "endContent")])) : createCommentVNode("v-if", true)
+			], 40, _hoisted_1)) : (openBlock(), createBlock(_sfc_main$5, {
+				key: 1,
+				class: "astryx-dropdown-menu-item",
+				role: "menuitemradio",
+				"aria-checked": isChecked.value,
+				"data-menu-size": unref(menuSize),
+				"data-variant": "default",
+				density: unref(density),
+				description: __props.description,
+				"is-disabled": __props.isDisabled,
+				label: __props.label,
+				"on-click": unref(handleClick),
+				tabindex: __props.isDisabled ? void 0 : -1,
+				onPointermove: unref(handlePointerMove)
+			}, createSlots({
+				marker: withCtx(() => [createVNode(_sfc_main$3, {
+					kind: "radio",
+					checked: isChecked.value,
+					"is-disabled": __props.isDisabled,
+					size: unref(controlSize)
+				}, null, 8, [
+					"checked",
+					"is-disabled",
+					"size"
+				])]),
+				_: 2
+			}, [
+				hasStart.value ? {
+					name: "startContent",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$4, {
+						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,
+				hasEnd.value ? {
+					name: "endContent",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "endContent")]),
+					key: "3"
+				} : void 0
+			]), 1032, [
+				"aria-checked",
+				"data-menu-size",
+				"density",
+				"description",
+				"is-disabled",
+				"label",
+				"on-click",
+				"tabindex",
+				"onPointermove"
+			]))], 2112);
+		};
+	}
+});
+//#endregion
+//#region src/DropdownMenu/useMenuDrillIn.ts
+const EMPTY_HOST = null;
+function matchesQuery(query) {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(query).matches;
+}
+/**
+* Drill-in state for one menu root.
+*
+* `query` is the same media query the root uses to choose a bottom sheet, so
+* a submenu and its menu agree on what "a phone" means.
+*/
+function useMenuDrillIn(isOpen, query) {
+	const isCompactTouch = ref(false);
+	const viewStack = ref([]);
+	const host = ref(EMPTY_HOST);
+	watch(isOpen, (open) => {
+		if (open) {
+			isCompactTouch.value = matchesQuery(query);
+			return;
+		}
+		if (viewStack.value.length > 0) viewStack.value = [];
+	}, { immediate: true });
+	function push(viewId) {
+		if (viewStack.value.includes(viewId)) return;
+		viewStack.value = [...viewStack.value, viewId];
+	}
+	function pop() {
+		if (viewStack.value.length === 0) return;
+		viewStack.value = viewStack.value.slice(0, -1);
+	}
+	return {
+		drillIn: computed(() => ({
+			host: host.value,
+			isCompactTouch: isCompactTouch.value,
+			pop,
+			push,
+			viewStack: viewStack.value
+		})),
+		host,
+		isDrilled: computed(() => viewStack.value.length > 0)
+	};
+}
+//#endregion
+export { dropdownMenuContextKey as a, contextMenuContextKey as c, useContextMenuSize as d, _sfc_main$2 as i, submenuAncestorOpenKey as l, _sfc_main as n, useDropdownMenuContext as o, _sfc_main$1 as r, useDropdownMenuRadioGroup as s, useMenuDrillIn as t, useContextMenu as u };