@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{MoreMenu-D1WFGqGU.js → MoreMenu-CFNqSRev.js}

@@ -1,13 +1,18 @@
 import { n as useLinkComponent } from "./context-C_peZbXf.js";
-import { t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
-import { n as getFocusables, t as focusElement } from "./focus-CpficIgf.js";
-import { t as _sfc_main$5 } from "./IconButton-DDNgNl7B.js";
+import { n as useLayerTeleportTarget } from "./useLayerMountTarget-BmZyeKWE.js";
+import { t as usePositionedLayer } from "./usePositionedLayer-B7cvG-_v.js";
+import { n as focusElement, r as getFocusables } from "./focus-l8jVTcqd.js";
+import { t as _sfc_main$5 } from "./IconButton-DI-XBbtV.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
-import { t as _sfc_main$6 } from "./Heading-BnwWEWkp.js";
-import { t as _sfc_main$7 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$8 } from "./Divider-BtwnL18I.js";
-import { n as _sfc_main$10, t as _sfc_main$9 } from "./ListItem-8RWT8XAG.js";
+import { t as _sfc_main$6 } from "./LayerContentBoundary-CvsKxwwm.js";
+import { t as _sfc_main$7 } from "./Heading-BzBunfN7.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$8 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$9 } from "./Divider-mOZ6vIQw.js";
+import { n as _sfc_main$11, t as _sfc_main$10 } from "./ListItem-BQXMu1Tb.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
+import "../styles/layer.css";
 import "../styles/more-menu.css";
 //#region src/MoreMenu/context.ts
 const moreMenuContextKey = Symbol("astryx-more-menu");
@@ -220,7 +225,7 @@ const _hoisted_6$1 = {
 	key: 2,
 	class: "astryx-more-menu__item-end"
 };
-const _hoisted_7$1 = { class: "astryx-more-menu__item-hint" };
+const _hoisted_7 = { class: "astryx-more-menu__item-hint" };
 const HOVER_OPEN_DELAY = 150;
 const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	name: "AstryxMoreMenuRow",
@@ -348,17 +353,17 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				onPointerleave: handlePointerLeave
 			}, {
 				default: withCtx(() => [
-					item.value.icon != null ? (openBlock(), createElementBlock("span", _hoisted_1$4, [createVNode(_sfc_main$7, {
+					item.value.icon != null ? (openBlock(), createElementBlock("span", _hoisted_1$4, [createVNode(_sfc_main$8, {
 						color: iconColor.value,
 						icon: item.value.icon,
 						size: "sm"
 					}, null, 8, ["color", "icon"])])) : createCommentVNode("v-if", true),
 					createElementVNode("span", _hoisted_2$2, [createElementVNode("span", _hoisted_3$2, toDisplayString(item.value.label), 1), item.value.description != null ? (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(item.value.description), 1)) : createCommentVNode("v-if", true)]),
-					isSubmenu.value ? (openBlock(), createElementBlock("span", _hoisted_5$1, [createVNode(_sfc_main$7, {
+					isSubmenu.value ? (openBlock(), createElementBlock("span", _hoisted_5$1, [createVNode(_sfc_main$8, {
 						class: "astryx-more-menu__caret",
 						icon: "chevronRight",
 						size: "sm"
-					})])) : item.value.endContent != null ? (openBlock(), createElementBlock("span", _hoisted_6$1, [createElementVNode("span", _hoisted_7$1, toDisplayString(item.value.endContent), 1)])) : createCommentVNode("v-if", true)
+					})])) : item.value.endContent != null ? (openBlock(), createElementBlock("span", _hoisted_6$1, [createElementVNode("span", _hoisted_7, toDisplayString(item.value.endContent), 1)])) : createCommentVNode("v-if", true)
 				]),
 				_: 1
 			}, 40, [
@@ -436,6 +441,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		const panel = useTemplateRef("panel");
 		const isPanelOpen = computed(() => props.isOpen);
 		const hasOverflow = useOverflow(panel, isPanelOpen);
+		useScrollbars(panel);
 		const openRowKey = ref(null);
 		const renderedRowKey = ref(null);
 		const flyoutFocus = ref("none");
@@ -559,7 +565,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		const anchor = computed(() => props.isInline ? null : props.anchor ?? null);
 		const isLayerActive = ref(false);
 		const anchorWidth = ref(0);
-		const { position, detach } = usePositionedLayer({
+		const { position, detach, teleportTarget } = usePositionedLayer({
 			anchor,
 			layer,
 			isOpen: isLayerActive,
@@ -626,7 +632,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 			const _component_MoreMenuPanel = resolveComponent("MoreMenuPanel", true);
 			return openBlock(), createBlock(Teleport, {
 				disabled: __props.isInline,
-				to: "body"
+				to: unref(teleportTarget)
 			}, [createVNode(Transition, {
 				appear: "",
 				name: "astryx-more-menu",
@@ -636,7 +642,10 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 					key: 0,
 					ref_key: "layer",
 					ref: layer,
-					class: normalizeClass(["astryx-more-menu__layer", { "astryx-more-menu__layer--inline": __props.isInline }]),
+					class: normalizeClass(["astryx-more-menu__layer", {
+						"astryx-more-menu__layer--inline": __props.isInline,
+						"astryx-layer": !__props.isInline
+					}]),
 					"data-level": __props.level,
 					"data-placement": resolvedPlacement.value,
 					style: normalizeStyle(layerStyle.value),
@@ -656,37 +665,40 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 					tabindex: "-1",
 					onKeydown,
 					onPointermove: onPointerMove
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry) => {
-					return openBlock(), createElementBlock(Fragment, { key: entry.key }, [entry.kind === "divider" ? (openBlock(), createBlock(_sfc_main$8, {
-						key: 0,
-						class: "astryx-more-menu__divider"
-					})) : entry.kind === "section" ? (openBlock(), createElementBlock("div", {
-						key: 1,
-						"aria-label": entry.section.title,
-						class: "astryx-more-menu__group",
-						role: "group"
-					}, [entry.section.title != null && entry.section.title !== "" ? (openBlock(), createElementBlock("div", _hoisted_4$1, toDisplayString(entry.section.title), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(entry.rows, (row) => {
-						return openBlock(), createBlock(_sfc_main$4, {
-							key: row.key,
-							item: row.item,
-							"row-id": row.rowId,
-							"row-key": row.key
+				}, [createVNode(_sfc_main$6, null, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry) => {
+						return openBlock(), createElementBlock(Fragment, { key: entry.key }, [entry.kind === "divider" ? (openBlock(), createBlock(_sfc_main$9, {
+							key: 0,
+							class: "astryx-more-menu__divider"
+						})) : entry.kind === "section" ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							"aria-label": entry.section.title,
+							class: "astryx-more-menu__group",
+							role: "group"
+						}, [entry.section.title != null && entry.section.title !== "" ? (openBlock(), createElementBlock("div", _hoisted_4$1, toDisplayString(entry.section.title), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(entry.rows, (row) => {
+							return openBlock(), createBlock(_sfc_main$4, {
+								key: row.key,
+								item: row.item,
+								"row-id": row.rowId,
+								"row-key": row.key
+							}, null, 8, [
+								"item",
+								"row-id",
+								"row-key"
+							]);
+						}), 128))], 8, _hoisted_3$1)) : (openBlock(), createBlock(_sfc_main$4, {
+							key: 2,
+							item: entry.row.item,
+							"row-id": entry.row.rowId,
+							"row-key": entry.row.key
 						}, null, 8, [
 							"item",
 							"row-id",
 							"row-key"
-						]);
-					}), 128))], 8, _hoisted_3$1)) : (openBlock(), createBlock(_sfc_main$4, {
-						key: 2,
-						item: entry.row.item,
-						"row-id": entry.row.rowId,
-						"row-key": entry.row.key
-					}, null, 8, [
-						"item",
-						"row-id",
-						"row-key"
-					]))], 64);
-				}), 128))], 40, _hoisted_2$1), (openBlock(), createBlock(Teleport, { to: "body" }, [renderedRow.value != null && renderedRow.value.item.items != null ? (openBlock(), createBlock(_component_MoreMenuPanel, {
+						]))], 64);
+					}), 128))]),
+					_: 1
+				})], 40, _hoisted_2$1), (openBlock(), createBlock(Teleport, { to: unref(teleportTarget) }, [renderedRow.value != null && renderedRow.value.item.items != null ? (openBlock(), createBlock(_component_MoreMenuPanel, {
 					key: 0,
 					id: `${menuId.value}-flyout`,
 					alignment: "start",
@@ -710,9 +722,9 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 					"items",
 					"level",
 					"placement"
-				])) : createCommentVNode("v-if", true)]))], 46, _hoisted_1$3)) : createCommentVNode("v-if", true)]),
+				])) : createCommentVNode("v-if", true)], 8, ["to"]))], 46, _hoisted_1$3)) : createCommentVNode("v-if", true)]),
 				_: 1
-			})], 8, ["disabled"]);
+			})], 8, ["disabled", "to"]);
 		};
 	}
 });
@@ -768,14 +780,14 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			if (isLink.value) activate(event);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$9, mergeProps({
+			return openBlock(), createBlock(_sfc_main$10, mergeProps({
 				class: { "astryx-more-menu__sheet-item--destructive": isDestructive.value },
 				"data-astryx-sheet-row": __props.rowId,
 				density: "spacious",
 				"on-click": isLink.value ? void 0 : handleClick
 			}, rowProps.value, { onClickCapture: handleClickCapture }), createSlots({ _: 2 }, [item.value.icon != null ? {
 				name: "startContent",
-				fn: withCtx(() => [createVNode(_sfc_main$7, {
+				fn: withCtx(() => [createVNode(_sfc_main$8, {
 					color: iconColor.value,
 					icon: item.value.icon,
 					size: "sm"
@@ -783,7 +795,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 				key: "0"
 			} : void 0, isSubmenu.value ? {
 				name: "endContent",
-				fn: withCtx(() => [createVNode(_sfc_main$7, {
+				fn: withCtx(() => [createVNode(_sfc_main$8, {
 					class: "astryx-more-menu__caret",
 					icon: "chevronRight",
 					size: "sm"
@@ -805,22 +817,21 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 //#region src/MoreMenu/MoreMenuSheet.vue
 const _hoisted_1$1 = {
 	key: 0,
-	class: "astryx-more-menu__sheet-layer"
+	class: "astryx-more-menu__sheet-layer astryx-layer"
 };
 const _hoisted_2 = ["id", "aria-label"];
 const _hoisted_3 = { class: "astryx-more-menu__sheet-header" };
-const _hoisted_4 = { class: "astryx-more-menu__sheet-body" };
-const _hoisted_5 = {
+const _hoisted_4 = {
 	key: 0,
 	class: "astryx-more-menu__sheet-divider",
 	role: "presentation"
 };
-const _hoisted_6 = {
+const _hoisted_5 = {
 	key: 1,
 	class: "astryx-more-menu__sheet-group",
 	role: "presentation"
 };
-const _hoisted_7 = ["aria-label"];
+const _hoisted_6 = ["aria-label"];
 const ROW_CONTROL_SELECTOR = "a[href], button:not([disabled])";
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	name: "AstryxMoreMenuSheet",
@@ -837,7 +848,10 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const teleportTarget = useLayerTeleportTarget();
 		const sheet = useTemplateRef("sheet");
+		const sheetBody = useTemplateRef("sheetBody");
+		useScrollbars(sheetBody);
 		const path = ref([]);
 		const drilledRowIds = ref([]);
 		const currentItems = computed(() => path.value.at(-1)?.items ?? props.items);
@@ -964,7 +978,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			}
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
+			return openBlock(), createBlock(Teleport, { to: unref(teleportTarget) }, [createVNode(Transition, {
 				appear: "",
 				name: "astryx-more-menu-sheet"
 			}, {
@@ -994,35 +1008,39 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						variant: "ghost",
 						onClick: popView
 					}, {
-						default: withCtx(() => [createVNode(_sfc_main$7, {
+						default: withCtx(() => [createVNode(_sfc_main$8, {
 							class: "astryx-more-menu__sheet-back-icon",
 							icon: "chevronLeft",
 							size: "sm"
 						})]),
 						_: 1
-					}, 8, ["label"])) : createCommentVNode("v-if", true), createVNode(_sfc_main$6, {
+					}, 8, ["label"])) : createCommentVNode("v-if", true), createVNode(_sfc_main$7, {
 						class: "astryx-more-menu__sheet-title",
 						level: 3,
 						tabindex: -1
 					}, {
 						default: withCtx(() => [createTextVNode(toDisplayString(title.value), 1)]),
 						_: 1
-					})]), createElementVNode("div", _hoisted_4, [createVNode(_sfc_main$10, {
+					})]), createElementVNode("div", {
+						ref_key: "sheetBody",
+						ref: sheetBody,
+						class: "astryx-more-menu__sheet-body"
+					}, [createVNode(_sfc_main$11, {
 						class: "astryx-more-menu__sheet-list",
 						density: "spacious"
 					}, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry) => {
-							return openBlock(), createElementBlock(Fragment, { key: entry.key }, [entry.kind === "divider" ? (openBlock(), createElementBlock("li", _hoisted_5, [createVNode(_sfc_main$8)])) : entry.kind === "section" ? (openBlock(), createElementBlock("li", _hoisted_6, [createElementVNode("div", {
+							return openBlock(), createElementBlock(Fragment, { key: entry.key }, [entry.kind === "divider" ? (openBlock(), createElementBlock("li", _hoisted_4, [createVNode(_sfc_main$9)])) : entry.kind === "section" ? (openBlock(), createElementBlock("li", _hoisted_5, [createElementVNode("div", {
 								"aria-label": entry.section.title,
 								role: "group"
-							}, [entry.section.title != null && entry.section.title !== "" ? (openBlock(), createBlock(_sfc_main$6, {
+							}, [entry.section.title != null && entry.section.title !== "" ? (openBlock(), createBlock(_sfc_main$7, {
 								key: 0,
 								class: "astryx-more-menu__sheet-heading",
 								level: 4
 							}, {
 								default: withCtx(() => [createTextVNode(toDisplayString(entry.section.title), 1)]),
 								_: 2
-							}, 1024)) : createCommentVNode("v-if", true), createVNode(_sfc_main$10, { density: "spacious" }, {
+							}, 1024)) : createCommentVNode("v-if", true), createVNode(_sfc_main$11, { density: "spacious" }, {
 								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(entry.rows, (row) => {
 									return openBlock(), createBlock(_sfc_main$2, {
 										key: row.key,
@@ -1033,7 +1051,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 									}, null, 8, ["item", "row-id"]);
 								}), 128))]),
 								_: 2
-							}, 1024)], 8, _hoisted_7)])) : (openBlock(), createBlock(_sfc_main$2, {
+							}, 1024)], 8, _hoisted_6)])) : (openBlock(), createBlock(_sfc_main$2, {
 								key: 2,
 								item: entry.row.item,
 								"row-id": entry.row.rowId,
@@ -1042,10 +1060,10 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 							}, null, 8, ["item", "row-id"]))], 64);
 						}), 128))]),
 						_: 1
-					})])], 40, _hoisted_2)
+					})], 512)], 40, _hoisted_2)
 				])) : createCommentVNode("v-if", true)]),
 				_: 1
-			})]);
+			})], 8, ["to"]);
 		};
 	}
 });
@@ -1065,7 +1083,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "MoreMenu",
 	props: /*@__PURE__*/ mergeModels({
 		items: {},
-		label: { default: "More options" },
+		label: {},
 		variant: { default: "ghost" },
 		size: { default: "md" },
 		isDisabled: {
@@ -1091,6 +1109,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const openModel = useModel(__props, "isMenuOpen");
+		const messages = useAstryxMessages();
+		const menuLabel = computed(() => props.label ?? messages.value.moreMenu.label);
 		const root = useTemplateRef("root");
 		const trigger = useTemplateRef("trigger");
 		const panel = useTemplateRef("panel");
@@ -1249,14 +1269,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"aria-expanded": isOpen.value,
 				"aria-haspopup": isSheet.value ? "dialog" : "menu",
 				"is-disabled": __props.isDisabled,
-				label: __props.label,
+				label: menuLabel.value,
 				size: __props.size,
-				tooltip: isOpen.value ? void 0 : __props.label,
+				tooltip: isOpen.value ? void 0 : menuLabel.value,
 				variant: __props.variant,
 				onClick: onTriggerClick,
 				onKeydown: onTriggerKeydown
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$7, { icon: "moreHorizontal" })])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$8, { icon: "moreHorizontal" })])]),
 				_: 3
 			}, 8, [
 				"aria-controls",
@@ -1278,7 +1298,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"is-inline": __props.isInline,
 				"is-open": isOpen.value,
 				items: __props.items,
-				label: __props.label,
+				label: menuLabel.value,
 				placement: __props.placement,
 				onClose: _cache[0] || (_cache[0] = ($event) => closeMenu())
 			}, null, 8, [
@@ -1296,7 +1316,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"initial-focus": pendingFocus.value,
 				"is-open": isOpen.value,
 				items: __props.items,
-				label: __props.label,
+				label: menuLabel.value,
 				onClose: _cache[1] || (_cache[1] = ($event) => closeMenu())
 			}, null, 8, [
 				"initial-focus",

package/dist/MultiSelector/index.d.ts

@@ -1,2 +1,2 @@
-import { _ as MultiSelectorSlots, a as MultiSelectorCreateChange, b as MultiSelectorTriggerDisplay, c as MultiSelectorHandle, d as MultiSelectorOptionData, f as MultiSelectorPresentation, g as MultiSelectorSize, h as MultiSelectorSelectedItem, i as MultiSelectorCheckboxPosition, l as MultiSelectorHandleRef, m as MultiSelectorSection, n as flattenOptions, o as MultiSelectorDivider, p as MultiSelectorProps, r as _default, s as MultiSelectorEmits, t as SELECT_ALL_VALUE, u as MultiSelectorOption, v as MultiSelectorStatus, x as MultiSelectorVariant, y as MultiSelectorStatusVariant } from "../index-jW-mP58D.js";
+import { _ as MultiSelectorSlots, a as MultiSelectorCreateChange, b as MultiSelectorTriggerDisplay, c as MultiSelectorHandle, d as MultiSelectorOptionData, f as MultiSelectorPresentation, g as MultiSelectorSize, h as MultiSelectorSelectedItem, i as MultiSelectorCheckboxPosition, l as MultiSelectorHandleRef, m as MultiSelectorSection, n as flattenOptions, o as MultiSelectorDivider, p as MultiSelectorProps, r as _default, s as MultiSelectorEmits, t as SELECT_ALL_VALUE, u as MultiSelectorOption, v as MultiSelectorStatus, x as MultiSelectorVariant, y as MultiSelectorStatusVariant } from "../index-Dr4b_oji.js";
 export { _default as MultiSelector, type MultiSelectorCheckboxPosition, type MultiSelectorCreateChange, type MultiSelectorDivider, type MultiSelectorEmits, type MultiSelectorHandle, type MultiSelectorHandleRef, type MultiSelectorOption, type MultiSelectorOptionData, type MultiSelectorPresentation, type MultiSelectorProps, type MultiSelectorSection, type MultiSelectorSelectedItem, type MultiSelectorSize, type MultiSelectorSlots, type MultiSelectorStatus, type MultiSelectorStatusVariant, type MultiSelectorTriggerDisplay, type MultiSelectorVariant, SELECT_ALL_VALUE, flattenOptions };

package/dist/MultiSelector/index.js

@@ -1,2 +1,2 @@
-import { n as SELECT_ALL_VALUE, r as flattenOptions, t as _sfc_main } from "../MultiSelector-BeV98x7X.js";
+import { n as SELECT_ALL_VALUE, r as flattenOptions, t as _sfc_main } from "../MultiSelector-DuVatmq5.js";
 export { _sfc_main as MultiSelector, SELECT_ALL_VALUE, flattenOptions };