@astryx-vue/core 0.2.1 → 0.2.3

package/dist/useMenuDrillIn-OaEwjK44.js

@@ -0,0 +1,520 @@
+import { t as _sfc_main$4 } from "./Icon-bteSId7T.js";
+import { t as _sfc_main$5 } from "./Item-C1z6gXn8.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 };

package/dist/useMonthGrid-fGHSSrFc.js

@@ -0,0 +1,43 @@
+import { c as resolveWeekStart } from "./useDateRange-CIXoE_8k.js";
+import { CalendarDate } from "@internationalized/date";
+//#region src/composables/useMonthGrid.ts
+function toISODate(date) {
+	const month = String(date.month).padStart(2, "0");
+	const day = String(date.day).padStart(2, "0");
+	return `${date.year}-${month}-${day}`;
+}
+function parseISODate(value) {
+	const [year, month, day] = value.split("-").map(Number);
+	return new CalendarDate(year, month, day);
+}
+function buildMonthGrid(year, month, weekStartsOn) {
+	const first = new CalendarDate(year, month, 1);
+	const start = resolveWeekStart(weekStartsOn);
+	const offset = (first.toDate("UTC").getUTCDay() - start + 7) % 7;
+	let cursor = first.subtract({ days: offset });
+	const weeks = [];
+	for (let week = 0; week < 6; week += 1) {
+		const days = [];
+		for (let day = 0; day < 7; day += 1) {
+			days.push(toISODate(cursor));
+			cursor = cursor.add({ days: 1 });
+		}
+		weeks.push(days);
+	}
+	return weeks;
+}
+function addMonths(year, month, amount) {
+	const date = new CalendarDate(year, month, 1).add({ months: amount });
+	return {
+		year: date.year,
+		month: date.month
+	};
+}
+function todayISODate() {
+	const now = /* @__PURE__ */ new Date();
+	const month = String(now.getMonth() + 1).padStart(2, "0");
+	const day = String(now.getDate()).padStart(2, "0");
+	return `${now.getFullYear()}-${month}-${day}`;
+}
+//#endregion
+export { todayISODate as a, toISODate as i, buildMonthGrid as n, parseISODate as r, addMonths as t };

package/dist/usePendingChange-ib-h8FZK.js

@@ -0,0 +1,25 @@
+import { computed, ref } from "vue";
+//#region src/composables/usePendingChange.ts
+/**
+* Runs a change action after the value is already committed.
+* Overlapping calls stay busy until the last one settles.
+*/
+function usePendingChange(action) {
+	const pending = ref(0);
+	async function run(value) {
+		const next = action();
+		if (!next) return;
+		pending.value += 1;
+		try {
+			await next(value);
+		} catch {} finally {
+			pending.value -= 1;
+		}
+	}
+	return {
+		busy: computed(() => pending.value > 0),
+		run
+	};
+}
+//#endregion
+export { usePendingChange as t };

package/dist/{useResizable-CeESZS1v.d.ts → useResizable-CUoNPmUw.d.ts}

@@ -1,4 +1,4 @@
-import { n as PixelWidth } from "./types-JktRxujg.js";
+import { n as PixelWidth } from "./types-Cp4liug-.js";
 import { Ref } from "vue";
 //#region src/composables/useResizable.d.ts
 type ResizableDirection = 'horizontal' | 'vertical';

package/dist/useSubmenuMode-CZN9qrUo.js

@@ -0,0 +1,37 @@
+import { computed } from "vue";
+//#region src/DropdownMenu/useSubmenuMode.ts
+/**
+* Whether a submenu flies out beside its row or replaces the menu's rows.
+*
+* `adaptive` drills in only when the menu opened on a compact touch surface.
+* That choice is sampled by the root when the menu opens, so the panel does
+* not change shape while it is open.
+*/
+function useSubmenuMode(options) {
+	const isDrill = computed(() => {
+		const drill = options.drillIn.value;
+		if (drill == null || options.presentation.value === "flyout") return false;
+		if (options.presentation.value === "drill-in") return true;
+		return drill.isCompactTouch;
+	});
+	const isOnStack = computed(() => options.drillIn.value?.viewStack.includes(options.viewId) === true);
+	const isTop = computed(() => isOnStack.value && options.drillIn.value?.viewStack.at(-1) === options.viewId);
+	function openDrill() {
+		options.drillIn.value?.push(options.viewId);
+	}
+	/** Pop this view when it is the top of the stack. Returns whether it popped. */
+	function closeDrill() {
+		if (!isTop.value) return false;
+		options.drillIn.value?.pop();
+		return true;
+	}
+	return {
+		closeDrill,
+		isDrill,
+		isOnStack,
+		isTop,
+		openDrill
+	};
+}
+//#endregion
+export { useSubmenuMode as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Vue components for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -92,6 +92,10 @@
       "types": "./dist/Icon/plugin.d.ts",
       "import": "./dist/Icon/plugin.js"
     },
+    "./Indicator": {
+      "types": "./dist/Indicator/index.d.ts",
+      "import": "./dist/Indicator/index.js"
+    },
     "./Layout": {
       "types": "./dist/Layout/index.d.ts",
       "import": "./dist/Layout/index.js"
@@ -108,6 +112,10 @@
       "types": "./dist/Outline/index.d.ts",
       "import": "./dist/Outline/index.js"
     },
+    "./PowerSearch": {
+      "types": "./dist/PowerSearch/index.d.ts",
+      "import": "./dist/PowerSearch/index.js"
+    },
     "./RadioList": {
       "types": "./dist/RadioList/index.d.ts",
       "import": "./dist/RadioList/index.js"