@astryx-vue/core 0.3.0 → 0.4.1

package/dist/{MoreMenu-Dlb7MLlW.js → MoreMenu-C8BEt6-O.js}

@@ -1,14 +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 "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$6 } from "./IconButton-DI-XBbtV.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.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 "./LayerContentBoundary-CvsKxwwm.js";
+import { t as _sfc_main$8 } from "./Heading-BzBunfN7.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.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$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");
@@ -349,13 +353,13 @@ 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$5, {
 						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$5, {
 						class: "astryx-more-menu__caret",
 						icon: "chevronRight",
 						size: "sm"
@@ -561,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,
@@ -628,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",
@@ -638,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),
@@ -658,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$7, 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",
@@ -712,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"]);
 		};
 	}
 });
@@ -770,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$5, {
 					color: iconColor.value,
 					icon: item.value.icon,
 					size: "sm"
@@ -785,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$5, {
 					class: "astryx-more-menu__caret",
 					icon: "chevronRight",
 					size: "sm"
@@ -807,7 +817,7 @@ 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" };
@@ -838,6 +848,7 @@ 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);
@@ -967,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"
 			}, {
@@ -989,7 +1000,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						"aria-label": title.value,
 						tabindex: -1,
 						onKeydown
-					}, [createElementVNode("div", _hoisted_3, [path.value.length > 0 ? (openBlock(), createBlock(_sfc_main$5, {
+					}, [createElementVNode("div", _hoisted_3, [path.value.length > 0 ? (openBlock(), createBlock(_sfc_main$6, {
 						key: 0,
 						class: "astryx-more-menu__sheet-back",
 						label: __props.backLabel,
@@ -997,13 +1008,13 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						variant: "ghost",
 						onClick: popView
 					}, {
-						default: withCtx(() => [createVNode(_sfc_main$7, {
+						default: withCtx(() => [createVNode(_sfc_main$5, {
 							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$8, {
 						class: "astryx-more-menu__sheet-title",
 						level: 3,
 						tabindex: -1
@@ -1014,22 +1025,22 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						ref_key: "sheetBody",
 						ref: sheetBody,
 						class: "astryx-more-menu__sheet-body"
-					}, [createVNode(_sfc_main$10, {
+					}, [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_4, [createVNode(_sfc_main$8)])) : entry.kind === "section" ? (openBlock(), createElementBlock("li", _hoisted_5, [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$8, {
 								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,
@@ -1052,7 +1063,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					})], 512)], 40, _hoisted_2)
 				])) : createCommentVNode("v-if", true)]),
 				_: 1
-			})]);
+			})], 8, ["to"]);
 		};
 	}
 });
@@ -1072,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: {
@@ -1098,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,21 +1262,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"data-presentation": resolvedPresentation.value,
 				"data-size": __props.size,
 				"data-variant": __props.variant
-			}, [createVNode(_sfc_main$5, {
+			}, [createVNode(_sfc_main$6, {
 				ref_key: "trigger",
 				ref: trigger,
 				"aria-controls": isSheet.value ? sheetId : menuId,
 				"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$5, { icon: "moreHorizontal" })])]),
 				_: 3
 			}, 8, [
 				"aria-controls",
@@ -1285,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, [
@@ -1303,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-D41_xqjs.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-DTuhnqHb.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-BtAUfQ3t.js";
+import { n as SELECT_ALL_VALUE, r as flattenOptions, t as _sfc_main } from "../MultiSelector-C7NCAtwW.js";
 export { _sfc_main as MultiSelector, SELECT_ALL_VALUE, flattenOptions };