eco-vue-js 0.21.2 → 0.21.3

package/dist/components/Button/WButtonAction.vue_vue_type_script_setup_true_lang.js

@@ -91,7 +91,7 @@ var WButtonAction_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						key: 2,
 						class: normalizeClass(["text-3xs mt-1 text-center", { "self-center": !__props.skeleton }])
 					}, [__props.skeleton ? (openBlock(), createBlock(WSkeleton_default, { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.title), 1)], 64))], 2)) : createCommentVNode("", true),
-					__props.tooltipText || !__props.titleText && __props.title ? (openBlock(), createBlock(WTooltip_default, {
+					(__props.tooltipText || !__props.titleText && __props.title) && !__props.active ? (openBlock(), createBlock(WTooltip_default, {
 						key: 3,
 						ref: "tooltip",
 						text: __props.tooltipText ?? (__props.titleText ? void 0 : __props.title),

package/dist/components/Modal/components/OverlayDropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modal/components/OverlayDropdown.vue"],"names":[],"mappings":"AAsGA;AAAA,OAwMO,KAAK,EAAC,aAAa,EAAE,sBAAsB,EAAC,MAAM,iBAAiB,CAAA;AAU1E,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;AAOvD,KAAK,WAAW,GAAG,sBAAsB,GAAG;IACxC,MAAM,EAAE,aAAa,CAAA;IACrB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kGAAkG;IAClG,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAC;AA0UJ,QAAA,IAAuB,QAAQ,IAAW,EAAuB,QAAQ,IAAY,CAAE;AACvF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAShD,QAAA,MAAM,UAAU;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"OverlayDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modal/components/OverlayDropdown.vue"],"names":[],"mappings":"AA2GA;AAAA,OA+MO,KAAK,EAAC,aAAa,EAAE,sBAAsB,EAAC,MAAM,iBAAiB,CAAA;AAU1E,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;AAOvD,KAAK,WAAW,GAAG,sBAAsB,GAAG;IACxC,MAAM,EAAE,aAAa,CAAA;IACrB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kGAAkG;IAClG,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAC;AAgVJ,QAAA,IAAuB,QAAQ,IAAW,EAAuB,QAAQ,IAAY,CAAE;AACvF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAShD,QAAA,MAAM,UAAU;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Modal/components/OverlayDropdown.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ import { Fragment, Teleport, computed, createBlock, createCommentVNode, createEl
 //#region src/components/Modal/components/OverlayDropdown.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
-	class: "shrink-0 px-3 pb-4 pt-3"
+	class: "px-3 pb-4 pt-3"
 };
 var OverlayDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "OverlayDropdown",
@@ -43,7 +43,8 @@ var OverlayDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		});
 		const dropdownRef = useTemplateRef("dropdown");
 		if (props.onTop && !isMobile) watch(() => dropdownRef.value?.isTop ?? false, props.onTop, { immediate: true });
-		const hasTip = computed(() => props.align === void 0 && !props.cornered);
+		const isBeside = computed(() => props.align === HorizontalAlign.LEFT_CENTER || props.align === HorizontalAlign.RIGHT_CENTER);
+		const hasTip = computed(() => (props.align === void 0 || isBeside.value) && !props.cornered);
 		const zIndex = inject(wBaseZIndex, 0) + 2;
 		const dismiss = () => {
 			if (props.busy || props.closing) return;
@@ -96,24 +97,30 @@ var OverlayDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				"horizontal-align": __props.cornered ? unref(HorizontalAlign).RIGHT_INNER : __props.align ?? unref(HorizontalAlign).CENTER,
 				"update-align": !__props.cornered,
 				freeze: __props.detached,
-				"inner-class": hasTip.value ? "w-max tone-surface-raised flex flex-col items-center" : void 0,
+				"inner-class": hasTip.value ? isBeside.value ? "w-max tone-surface-raised flex items-center" : "w-max tone-surface-raised flex flex-col items-center" : void 0,
 				style: normalizeStyle({ zIndex })
 			}, {
 				default: withCtx(({ isTop, isLeft, isRight }) => [hasTip.value ? (openBlock(), createBlock(WDropdownTip_default, {
 					key: 0,
-					top: isTop
-				}, null, 8, ["top"])) : createCommentVNode("", true), createVNode(WClickOutside_default, {
+					top: !isBeside.value && isTop,
+					left: isBeside.value && isLeft,
+					right: isBeside.value && isRight
+				}, null, 8, [
+					"top",
+					"left",
+					"right"
+				])) : createCommentVNode("", true), createVNode(WClickOutside_default, {
 					"no-filter": __props.closeOnClick,
 					class: normalizeClass([[
 						__props.frameClass ?? "w-dropdown-frame",
-						hasTip.value ? "w-tooltip-center-x" : void 0,
+						hasTip.value ? isBeside.value ? "w-tooltip-center-y" : "w-tooltip-center-x" : void 0,
 						__props.cornered && __props.frameClass === void 0 && {
 							"rounded-bl-none": isRight && isTop,
 							"rounded-tl-none": isRight && !isTop,
 							"rounded-br-none": isLeft && isTop,
 							"rounded-tr-none": isLeft && !isTop
 						}
-					], "flex flex-col"]),
+					], "grid grid-rows-[auto_1fr]"]),
 					onClick: dismissOutside
 				}, {
 					default: withCtx(() => [headers.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(headers.value, (render, index) => {

package/dist/components/Notify/WNotify.vue_vue_type_script_setup_true_lang.js

@@ -37,7 +37,7 @@ var WNotify_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterToastEntries), (item) => {
 					return openBlock(), createElementBlock("div", {
 						key: unref(getNotifyItemKey)(item),
-						class: normalizeClass(["grid transition-[translate,opacity,grid-template-rows] duration-500", isCenter.value ? "justify-center" : "justify-end"])
+						class: normalizeClass(["grid transition-[translate,opacity,grid-template-rows] duration-300", isCenter.value ? "justify-center" : "justify-end"])
 					}, [createElementVNode("div", _hoisted_1, [createVNode(NotifyCard_default, {
 						item,
 						"onClick:close": _cache[0] || (_cache[0] = (entry) => (entry.items ?? [entry]).forEach((value) => unref(hideToast)(value.id)))

package/dist/components/Notify/WNotifyCenter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WNotifyCenter.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Notify/WNotifyCenter.vue"],"names":[],"mappings":"AAkFA;AAmHA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAuB9C,KAAK,WAAW,GAAG;IACjB,wHAAwH;IACxH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC;AAoNF,QAAA,MAAM,UAAU,8SAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WNotifyCenter.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Notify/WNotifyCenter.vue"],"names":[],"mappings":"AA6GA;AA8IA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAuB9C,KAAK,WAAW,GAAG;IACjB,wHAAwH;IACxH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC;AAwRF,QAAA,MAAM,UAAU,8SAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Notify/WNotifyCenter.vue_vue_type_script_setup_true_lang.js

@@ -4,22 +4,27 @@ import { clearNotifyHistory, getNotifyItemKey, notifyCenterActionEntries, notify
 import { useOverlayFrame } from "../../utils/Overlay.js";
 import OverlayHeader_default from "../Modal/components/OverlayHeader.vue.js";
 import NotifyCard_default from "./components/NotifyCard.vue.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { Fragment, TransitionGroup, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
 //#region src/components/Notify/WNotifyCenter.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
-var _hoisted_2 = { class: "text-accent font-semibold" };
+var _hoisted_2 = { class: "text-accent font-semibold h-8 flex items-center" };
 var _hoisted_3 = {
 	key: 0,
-	class: "text-description py-10 text-center"
+	class: "text-description py-2 text-center self-center"
 };
-var _hoisted_4 = { class: "tone-negative text-tone px-2 pt-1 text-xs font-semibold uppercase" };
-var _hoisted_5 = {
+var _hoisted_4 = {
 	key: 0,
-	class: "text-description px-2 pt-2 text-xs font-semibold uppercase"
+	class: "tone-negative text-tone py-1 text-xs font-semibold uppercase"
 };
+var _hoisted_5 = { class: "min-h-0" };
 var _hoisted_6 = {
-	key: 0,
-	class: "border-line-subtle border-t border-solid"
+	key: 1,
+	class: "text-description pt-2 pb-1 text-xs font-semibold uppercase"
+};
+var _hoisted_7 = { class: "min-h-0" };
+var _hoisted_8 = {
+	key: 2,
+	class: "border-line-subtle border-t border-solid sticky bottom-0 bg-surface"
 };
 var WNotifyCenter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WNotifyCenter",
@@ -34,18 +39,15 @@ var WNotifyCenter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const frame = useOverlayFrame();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: normalizeClass({
-					"bg-surface border-line-subtle grid max-h-[min(40rem,calc(100vh-2rem))] w-[min(28rem,calc(100vw-1rem))] grid-rows-[auto_1fr_auto] overflow-hidden rounded-2xl border border-solid": unref(frame) === null,
+				class: normalizeClass([{
+					"bg-surface border-line-subtle grid max-h-[min(40rem,calc(100vh-2rem))] w-[min(28rem,calc(100vw-var(--inner-margin,1fr)*2))] grid-rows-[auto_1fr_auto] overflow-hidden rounded-2xl border border-solid": unref(frame) === null,
 					"pb-[50vh]": unref(frame) === "sheet"
-				}),
+				}, "grid grid-rows-[1fr_auto] h-full"]),
 				role: "region",
 				"aria-label": __props.title ?? "Notifications"
 			}, [
 				createVNode(OverlayHeader_default, null, {
-					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex items-center justify-between gap-4", {
-						"border-line-subtle border-b border-solid px-4 py-3": unref(frame) === null,
-						"pb-4": unref(frame) === "sheet"
-					}]) }, [createElementVNode("div", _hoisted_2, toDisplayString(__props.title ?? "Notifications"), 1), unref(notifyCenterActivityItems).length ? (openBlock(), createBlock(WButton_default, {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex items-center justify-between gap-4", unref(frame) === null ? "border-line-subtle border-b border-solid px-4 py-3" : unref(frame) === "sheet" ? "pb-4" : void 0]) }, [createElementVNode("div", _hoisted_2, toDisplayString(__props.title ?? "Notifications"), 1), unref(notifyCenterActivityItems).length ? (openBlock(), createBlock(WButton_default, {
 						key: 0,
 						"semantic-type": unref(SemanticType).SECONDARY,
 						class: "w-button-h-8 text-xs",
@@ -56,30 +58,52 @@ var WNotifyCenter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					}, 8, ["semantic-type", "onClick"])) : createCommentVNode("", true)], 2)]),
 					_: 1
 				}),
-				createElementVNode("div", { class: normalizeClass(["grid content-start gap-2", unref(frame) === null ? "overflow-y-auto overscroll-contain p-4" : unref(frame) === "sheet" ? "px-3" : "p-2"]) }, [
-					!unref(notifyCenterItems).length ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.emptyText ?? "No notifications yet"), 1)) : createCommentVNode("", true),
-					unref(notifyCenterActionItems).length ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-						createElementVNode("div", _hoisted_4, toDisplayString(__props.actionText ?? "Action required"), 1),
-						(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterActionEntries), (item) => {
-							return openBlock(), createBlock(NotifyCard_default, {
+				!unref(notifyCenterItems).length ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.emptyText ?? "No notifications yet"), 1)) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(["grid content-start", unref(frame) === null ? "overflow-y-auto overscroll-contain px-4 py-3" : unref(frame) === "dropdown" ? "px-3 pb-2 pt-1" : "px-3 py-1"])
+				}, [
+					unref(notifyCenterActionItems).length ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(__props.actionText ?? "Action required"), 1)) : createCommentVNode("", true),
+					createVNode(TransitionGroup, {
+						"enter-from-class": "opacity-0 grid-rows-[0fr]",
+						"enter-to-class": "opacity-1 grid-rows-[1fr]",
+						"leave-from-class": "opacity-1 grid-rows-[1fr]",
+						"leave-to-class": "opacity-0 grid-rows-[0fr]"
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterActionEntries), (item) => {
+							return openBlock(), createElementBlock("div", {
 								key: unref(getNotifyItemKey)(item),
+								class: "grid transition-[transform,grid-template-rows] duration-300"
+							}, [createElementVNode("div", _hoisted_5, [createVNode(NotifyCard_default, {
 								item,
 								history: "",
+								class: "my-1",
 								"onClick:close": unref(removeNotifyEntry)
-							}, null, 8, ["item", "onClick:close"]);
-						}), 128)),
-						unref(notifyCenterActivityItems).length ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.activityText ?? "Activity"), 1)) : createCommentVNode("", true)
-					], 64)) : createCommentVNode("", true),
-					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterActivityEntries), (item) => {
-						return openBlock(), createBlock(NotifyCard_default, {
-							key: unref(getNotifyItemKey)(item),
-							item,
-							history: "",
-							"onClick:close": unref(removeNotifyEntry)
-						}, null, 8, ["item", "onClick:close"]);
-					}), 128))
-				], 2),
-				_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
+							}, null, 8, ["item", "onClick:close"])])]);
+						}), 128))]),
+						_: 1
+					}),
+					unref(notifyCenterActivityItems).length && unref(notifyCenterActionItems).length ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(__props.activityText ?? "Activity"), 1)) : createCommentVNode("", true),
+					createVNode(TransitionGroup, {
+						"enter-from-class": "opacity-0 grid-rows-[0fr]",
+						"enter-to-class": "opacity-1 grid-rows-[1fr]",
+						"leave-from-class": "opacity-1 grid-rows-[1fr]",
+						"leave-to-class": "opacity-0 grid-rows-[0fr]"
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterActivityEntries), (item) => {
+							return openBlock(), createElementBlock("div", {
+								key: unref(getNotifyItemKey)(item),
+								class: "grid transition-[transform,grid-template-rows] duration-300"
+							}, [createElementVNode("div", _hoisted_7, [createVNode(NotifyCard_default, {
+								item,
+								history: "",
+								class: "my-1",
+								"onClick:close": unref(removeNotifyEntry)
+							}, null, 8, ["item", "onClick:close"])])]);
+						}), 128))]),
+						_: 1
+					})
+				], 2)),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
 			], 10, _hoisted_1);
 		};
 	}

package/dist/components/Notify/WNotifyCenterButton.vue.d.ts

@@ -1,10 +1,13 @@
 import { NotifyCenterProps } from './types';
+import { HorizontalAlign } from '../../utils/HorizontalAlign';
 import { VNode } from 'vue';
 interface Props extends NotifyCenterProps {
     /** Tooltip of the button and heading of the notify center. Defaults to `Notifications`. */
     title?: string;
     /** Icon of the button. Defaults to a bell. */
     icon?: SVGComponent;
+    /** Aligns the notify center to the button — such as `HorizontalAlign.LEFT_INNER` to grow left from its right edge, without a tip, or `HorizontalAlign.LEFT_CENTER` beside it with a tip, for a button in a side rail. Defaults to centered under the button with a tip. */
+    horizontalAlign?: HorizontalAlign;
 }
 type __VLS_Slots = {
     /** Footer of the notify center. Close the center from it with `closeNotifyCenter`. */

package/dist/components/Notify/WNotifyCenterButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WNotifyCenterButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Notify/WNotifyCenterButton.vue"],"names":[],"mappings":"AAYA;AAsDA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAE9C,OAAO,EAAC,KAAK,KAAK,EAAiB,MAAM,KAAK,CAAA;AAS9C,UAAU,KAAM,SAAQ,iBAAiB;IACvC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAKD,KAAK,WAAW,GAAG;IACjB,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;CACvB,CAAC;AA8EF,QAAA,MAAM,UAAU,sRAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WNotifyCenterButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Notify/WNotifyCenterButton.vue"],"names":[],"mappings":"AAYA;AA0DA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;AAE5D,OAAO,EAAC,KAAK,KAAK,EAAiB,MAAM,KAAK,CAAA;AAS9C,UAAU,KAAM,SAAQ,iBAAiB;IACvC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,2QAA2Q;IAC3Q,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC;AAKD,KAAK,WAAW,GAAG;IACjB,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;CACvB,CAAC;AA+EF,QAAA,MAAM,UAAU,sRAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Notify/WNotifyCenterButton.vue_vue_type_script_setup_true_lang.js

@@ -9,6 +9,7 @@ var WNotifyCenterButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 	props: {
 		title: {},
 		icon: {},
+		horizontalAlign: {},
 		clearText: {},
 		emptyText: {},
 		actionText: {},
@@ -26,7 +27,8 @@ var WNotifyCenterButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				actionText: props.actionText,
 				activityText: props.activityText
 			}),
-			footer: slots.footer ? () => slots.footer?.() : void 0
+			footer: slots.footer ? () => slots.footer?.() : void 0,
+			horizontalAlign: () => props.horizontalAlign
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(WButtonAction_default, {

package/dist/components/Notify/use/useNotifyCenter.d.ts

@@ -1,4 +1,5 @@
 import { NotifyCenterProps } from '../types';
+import { HorizontalAlign } from '../../../utils/HorizontalAlign';
 import { VNode } from 'vue';
 import { OverlayAnchor } from '../../../utils/Overlay';
 type NotifyCenterOptions = {
@@ -6,6 +7,11 @@ type NotifyCenterOptions = {
     props?: () => NotifyCenterProps;
     /** Footer of WNotifyCenter, such as a component's slot. */
     footer?: () => VNode[] | undefined;
+    /**
+     * Aligns the center to the anchor, read as it opens — such as `HorizontalAlign.LEFT_INNER` to grow left from its right edge, without a tip.
+     * `LEFT_CENTER` and `RIGHT_CENTER` open it beside the anchor with a tip, kept on screen — for a button in a side rail. Defaults to centered under the anchor with a tip.
+     */
+    horizontalAlign?: () => HorizontalAlign | undefined;
 };
 /**
  * Opens WNotifyCenter as a dropdown at an anchor — a bottom sheet on phones — for a custom trigger. Called in setup; needs WModal on the page.

package/dist/components/Notify/use/useNotifyCenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNotifyCenter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Notify/use/useNotifyCenter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAC,KAAK,KAAK,EAAuB,MAAM,KAAK,CAAA;AAEpD,OAAO,EAAC,KAAK,aAAa,EAAa,MAAM,iBAAiB,CAAA;AAK9D,KAAK,mBAAmB,GAAG;IACzB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,iBAAiB,CAAA;IAC/B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAA;CACnC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,UAAS,mBAAwB;;mBAQzC,aAAa,KAAG,IAAI;;qBAqBlB,aAAa,KAAG,IAAI;CAW7C,CAAA"}
+{"version":3,"file":"useNotifyCenter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Notify/use/useNotifyCenter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAA;AAC/C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;AAE5D,OAAO,EAAC,KAAK,KAAK,EAAuB,MAAM,KAAK,CAAA;AAEpD,OAAO,EAAC,KAAK,aAAa,EAAa,MAAM,iBAAiB,CAAA;AAK9D,KAAK,mBAAmB,GAAG;IACzB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,iBAAiB,CAAA;IAC/B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAA;IAClC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,eAAe,GAAG,SAAS,CAAA;CACpD,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,UAAS,mBAAwB;;mBAQzC,aAAa,KAAG,IAAI;;qBAyBlB,aAAa,KAAG,IAAI;CAW7C,CAAA"}

package/dist/components/Notify/use/useNotifyCenter.js

@@ -16,7 +16,10 @@ var useNotifyCenter = (options = {}) => {
 			present: "dropdown",
 			anchor,
 			content,
-			dropdown: { frameClass: "w-dropdown-frame min-h-0 max-h-160 w-[min(28rem,calc(100vw-1rem))]" },
+			dropdown: {
+				frameClass: "w-dropdown-frame min-h-80 max-h-[min(40rem,calc(100vh-1.5rem))] w-[min(28rem,calc(100vw-1rem))]",
+				align: options.horizontalAlign?.()
+			},
 			onClose: () => {
 				if (closeCenter !== value) return;
 				closeCenter = null;

package/dist/utils/Overlay.d.ts

@@ -20,7 +20,10 @@ export type OverlayDropdownOptions = {
      * Otherwise the dropdown is centered on the anchor with a tip pointing at it, and shifts aside near the edge of the screen while the tip stays.
      */
     cornered?: boolean;
-    /** Aligns the dropdown to the anchor without a tip, such as a field's menu with `HorizontalAlign.FILL`. */
+    /**
+     * Aligns the dropdown to the anchor without a tip, such as a field's menu with `HorizontalAlign.FILL`.
+     * `LEFT_CENTER` and `RIGHT_CENTER` open it beside the anchor with a tip pointing at it, such as from a button in a side rail; near the top or bottom of the screen the box shifts while the tip stays.
+     */
     align?: HorizontalAlign;
     /** Classes of the dropdown's box, replacing the default frame. */
     frameClass?: string;

package/dist/utils/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../src/utils/Overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAA;AAC9D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;AAE5D,OAAO,EAAC,KAAK,SAAS,EAAoD,MAAM,KAAK,CAAA;AAiBrF,2GAA2G;AAC3G,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;AAE1D;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,UAAU,CAAA;AAEtD,iFAAiF;AACjF,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAA;AAEzD,wCAAwC;AACxC,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2GAA2G;IAC3G,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qKAAqK;IACrK,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+GAA+G;IAC/G,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACjC,CAAA;AAED,KAAK,qBAAqB,GAAG;IAC3B,6FAA6F;IAC7F,OAAO,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yJAAyJ;IACzJ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,GAAG,CACrD;IACA,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GACC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,aAAa,CAAC;IAAC,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAAC,SAAS,CAAC,EAAE,SAAS,CAAA;CAAC,CACzG,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU;IA4BnB,2HAA2H;kBAC7G,kBAAkB,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;IAItD,gDAAgD;QAC5C,KAAK,aAAa,cAAc,CAAC,KAAK,CAAC,UAAU,KAAK,OAAO,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;IAIjG,uGAAuG;oBACvF,KAAK,aAAa,cAAc,CAAC,KAAK,CAAC,UAAU,KAAK,OAAO,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;IAI7G,mJAAmJ;sBACjI,iBAAiB,OAAO,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;CAO7E,CAAA;AAED,iLAAiL;AACjL,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,OAAO,KAAG,IAcpD,CAAA;AAED,iFAAiF;AACjF,eAAO,MAAM,eAAe,QAAO,YAAY,GAAG,IAAmC,CAAA;AAErF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,OAAO,EAAE,SAAS,MAAM,EAAE,SAAS,MAAM,KAAG,aAatF,CAAA"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../src/utils/Overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAA;AAC9D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;AAE5D,OAAO,EAAC,KAAK,SAAS,EAAoD,MAAM,KAAK,CAAA;AAiBrF,2GAA2G;AAC3G,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;AAE1D;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,UAAU,CAAA;AAEtD,iFAAiF;AACjF,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAA;AAEzD,wCAAwC;AACxC,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qKAAqK;IACrK,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+GAA+G;IAC/G,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACjC,CAAA;AAED,KAAK,qBAAqB,GAAG;IAC3B,6FAA6F;IAC7F,OAAO,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yJAAyJ;IACzJ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,GAAG,CACrD;IACA,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GACC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,aAAa,CAAC;IAAC,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAAC,SAAS,CAAC,EAAE,SAAS,CAAA;CAAC,CACzG,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU;IA4BnB,2HAA2H;kBAC7G,kBAAkB,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;IAItD,gDAAgD;QAC5C,KAAK,aAAa,cAAc,CAAC,KAAK,CAAC,UAAU,KAAK,OAAO,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;IAIjG,uGAAuG;oBACvF,KAAK,aAAa,cAAc,CAAC,KAAK,CAAC,UAAU,KAAK,OAAO,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;IAI7G,mJAAmJ;sBACjI,iBAAiB,OAAO,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;CAO7E,CAAA;AAED,iLAAiL;AACjL,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,OAAO,KAAG,IAcpD,CAAA;AAED,iFAAiF;AACjF,eAAO,MAAM,eAAe,QAAO,YAAY,GAAG,IAAmC,CAAA;AAErF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,OAAO,EAAE,SAAS,MAAM,EAAE,SAAS,MAAM,KAAG,aAatF,CAAA"}

package/docs/components/notify.md

@@ -91,7 +91,7 @@ A pending notification can't be closed in the notify center; closing its toast o
 
 ## Notify center
 
-Every notification is also kept in a history of the last 50, shown by `WNotifyCenter`. `WNotifyCenterButton` is a bell for the [actions bar](../guide/app-shell.md) that opens it as a dropdown — a bottom sheet on phones. It counts the notifications that need action and runs a shimmer while any is pending. Toasts are hidden while the center is open.
+Every notification is also kept in a history of the last 50, shown by `WNotifyCenter`. `WNotifyCenterButton` is a bell for the [actions bar](../guide/app-shell.md) that opens it as a dropdown — a bottom sheet on phones. It counts the notifications that need action and runs a shimmer while any is pending. Toasts are hidden while the center is open. The center opens under the button with a tip; `horizontal-align` places it otherwise. `HorizontalAlign.LEFT_INNER` suits a bell at the right end of the header — it grows left from the button's right edge, without a tip. `HorizontalAlign.LEFT_CENTER` suits a bell in a side rail — it opens beside the button with the tip pointing at it, and near the top or bottom of the screen only the box shifts, keeping a margin from the edge.
 
 ```vue
 <template>
@@ -120,12 +120,16 @@ import WNotifyCenterButton from 'eco-vue-js/dist/components/Notify/WNotifyCenter
 </script>
 ```
 
-For a trigger of your own, such as the bell in this site's header, open it with `useNotifyCenter`, called in setup. It returns `isOpen`, `open(anchor)`, `close` and `toggle(anchor)`, and takes the center's props and footer:
+For a trigger of your own, such as the bell in this site's header, open it with `useNotifyCenter`, called in setup. It returns `isOpen`, `open(anchor)`, `close` and `toggle(anchor)`, and takes the center's props, footer and `horizontalAlign`:
 
 ```ts
+import {HorizontalAlign} from 'eco-vue-js/dist/utils/HorizontalAlign'
 import {useNotifyCenter} from 'eco-vue-js/dist/utils/NotifyCenter'
 
-const {isOpen, toggle} = useNotifyCenter({props: () => ({title: 'Alerts'})})
+const {isOpen, toggle} = useNotifyCenter({
+  props: () => ({title: 'Alerts'}),
+  horizontalAlign: () => HorizontalAlign.LEFT_INNER,
+})
 ```
 
 `WNotifyCenter` can also be placed on a page as it is. Notifications on the `ACTION` channel need the user: they are pinned on top under their own heading, their toast stays until closed, and clearing the history keeps them — as it keeps pending ones.
@@ -269,6 +273,7 @@ import WNotifyCenterButton from 'eco-vue-js/dist/components/Notify/WNotifyCenter
 | --- | --- | --- | --- |
 | `title` | `string` | — | Tooltip of the button and heading of the notify center. Defaults to `Notifications`. |
 | `icon` | `SVGComponent` | — | Icon of the button. Defaults to a bell. |
+| `horizontalAlign` | `HorizontalAlign` | — | Aligns the notify center to the button — such as `HorizontalAlign.LEFT_INNER` to grow left from its right edge, without a tip, or `HorizontalAlign.LEFT_CENTER` beside it with a tip, for a button in a side rail. Defaults to centered under the button with a tip. |
 | `clearText` | `string` | — | Text of the button that clears the history. Defaults to `Clear`. |
 | `emptyText` | `string` | — | Shown when there are no notifications. Defaults to `No notifications yet`. |
 | `actionText` | `string` | — | Heading of the notifications that need action (`NotifyChannel.ACTION`). Defaults to `Action required`. |

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eco-vue-js
 
-> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.21.2, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
+> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.21.3, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
 
 Release notes, for what changed between versions: https://github.com/rsmple/eco-vue-js/releases. The docs site, with live demos: https://rsmple.github.io/eco-vue-js/
 

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.21.2",
+  "version": "0.21.3",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",