@nmorph/nmorph-ui-kit 2.2.23 → 2.2.25

package/dist/components/data/nmorph-badge/NmorphBadge.css

@@ -1 +1 @@
-.nmorph-badge{position:relative;display:inline-block;height:fit-content;--dot-size: 4px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__dot{width:var(--dot-size);height:var(--dot-size);border-radius:var(--border-radius-circular)}
+.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-badge-dot-size: 4px;--nmorph-badge-ribbon-height: 24px;--nmorph-badge-ribbon-corner-size: 62px;--nmorph-badge-ribbon-width: 116px;--nmorph-badge-ribbon-offset-x: 0px;--nmorph-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-badge-ribbon-corner-size);height:var(--nmorph-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;padding:0 var(--indentation-03);overflow:hidden;font-weight:600;font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis;transform:translateY(-1px)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-badge-ribbon-offset-y);right:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-badge-ribbon-offset-x);bottom:var(--nmorph-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-badge-dot-size);height:var(--nmorph-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-badge-ribbon-height: 18px;--nmorph-badge-ribbon-corner-size: 50px;--nmorph-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-badge-ribbon-height: 20px;--nmorph-badge-ribbon-corner-size: 56px;--nmorph-badge-ribbon-width: 104px}

package/dist/components/data/nmorph-badge/NmorphBadge.vue.js

@@ -1,54 +1,99 @@
 import './NmorphBadge.css';
-import m from "./NmorphBadge.vue2.js";
-import { openBlock as o, createElementBlock as a, normalizeStyle as i, normalizeClass as d, renderSlot as s, createCommentVNode as l, Fragment as c, createTextVNode as t, toDisplayString as n } from "vue";
+import c from "./NmorphBadge.vue2.js";
+import { openBlock as o, createElementBlock as a, normalizeStyle as r, normalizeClass as i, renderSlot as d, createCommentVNode as s, createElementVNode as n, createTextVNode as t, toDisplayString as y, Fragment as m } from "vue";
 /* empty css                 */
-import p from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = {
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = { class: "nmorph-badge__content" }, b = {
   key: 0,
   class: "nmorph-badge__dot"
-}, f = {
+}, g = {
   key: 1,
   class: "nmorph-badge__content"
 };
-function _(r, g, h, e, k, v) {
-  return !e.props.disabled && (!e.props.isTag || e.shouldShowBadge) ? (o(), a(
+function h(l, v, p, e, k, T) {
+  return !e.props.disabled && (!e.isTagType || e.shouldShowBadge) ? (o(), a(
     "div",
     {
       key: 0,
-      class: d(e.modifiers),
-      style: i(e.styles)
+      class: i(e.modifiers),
+      style: r(e.styles)
     },
     [
-      e.props.isTag ? l("v-if", !0) : s(r.$slots, "default", { key: 0 }),
-      e.shouldShowBadge ? (o(), a(
+      e.isTagType ? s("v-if", !0) : d(l.$slots, "default", { key: 0 }),
+      e.shouldShowBadge && e.isRibbon ? (o(), a(
         "div",
         {
           key: 1,
+          class: "nmorph-badge__ribbon-frame",
+          style: r(e.ribbonFrameStyle)
+        },
+        [
+          n(
+            "div",
+            {
+              class: i(e.ribbonCornerModifiers)
+            },
+            [
+              n(
+                "div",
+                {
+                  ref: "badge",
+                  class: i(e.containerModifiers),
+                  style: r(e.containerStyle)
+                },
+                [
+                  n("div", _, [
+                    d(l.$slots, "value", {
+                      value: e.props.value,
+                      displayValue: e.displayValue
+                    }, () => [
+                      t(
+                        y(e.displayValue),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ])
+                ],
+                6
+                /* CLASS, STYLE */
+              )
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        4
+        /* STYLE */
+      )) : e.shouldShowBadge ? (o(), a(
+        "div",
+        {
+          key: 2,
           ref: "badge",
-          class: d(e.containerModifiers),
-          style: i(e.containerStyle)
+          class: i(e.containerModifiers),
+          style: r(e.containerStyle)
         },
         [
-          e.props.isDot ? (o(), a("div", y)) : (o(), a("div", f, [
-            e.props.isTag ? (o(), a(
-              c,
+          e.isDotType ? (o(), a("div", b)) : (o(), a("div", g, [
+            e.isTagType ? (o(), a(
+              m,
               { key: 0 },
               [
                 t(
-                  n(e.displayValue),
+                  y(e.displayValue),
                   1
                   /* TEXT */
                 )
               ],
               64
               /* STABLE_FRAGMENT */
-            )) : s(r.$slots, "value", {
+            )) : d(l.$slots, "value", {
               key: 1,
               value: e.props.value,
               displayValue: e.displayValue
             }, () => [
               t(
-                n(e.displayValue),
+                y(e.displayValue),
                 1
                 /* TEXT */
               )
@@ -57,13 +102,13 @@ function _(r, g, h, e, k, v) {
         ],
         6
         /* CLASS, STYLE */
-      )) : l("v-if", !0)
+      )) : s("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
-  )) : e.props.isTag ? l("v-if", !0) : s(r.$slots, "default", { key: 1 });
+  )) : e.isTagType ? s("v-if", !0) : d(l.$slots, "default", { key: 1 });
 }
-const T = /* @__PURE__ */ p(m, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
+const w = /* @__PURE__ */ f(c, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
 export {
-  T as default
+  w as default
 };

package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js

@@ -1,11 +1,13 @@
 import './NmorphBadge.css';
-import { defineComponent as z, computed as t, ref as n, onMounted as S, watch as q, nextTick as _ } from "vue";
-import { useModifiers as f } from "../../../utils/create-modifiers.js";
-const B = /* @__PURE__ */ z({
+import { defineComponent as C, computed as t, ref as b, onMounted as B, watch as I, nextTick as T } from "vue";
+import { useModifiers as p } from "../../../utils/create-modifiers.js";
+const X = /* @__PURE__ */ C({
   __name: "NmorphBadge",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 },
     max: { type: Number, required: !1, default: 99 },
+    type: { type: String, required: !1, default: "default" },
+    ribbonCorner: { type: String, required: !1, default: "top-right" },
     isDot: { type: Boolean, required: !1, default: !1 },
     isTag: { type: Boolean, required: !1, default: !1 },
     hidden: { type: Boolean, required: !1, default: !1 },
@@ -17,39 +19,58 @@ const B = /* @__PURE__ */ z({
     disabled: { type: Boolean, required: !1, default: !1 },
     dotSize: { type: [Number, String], required: !1, default: void 0 }
   },
-  setup(p, { expose: c }) {
-    c();
-    const e = p, m = t(
-      () => f({
-        "nmorph-badge": [`${e.hidden && "hidden"}`, `${e.isTag && "tag"}`, e.size]
+  setup(m, { expose: g }) {
+    g();
+    const e = m, a = t(() => e.type !== "default" ? e.type : e.isDot ? "dot" : e.isTag ? "tag" : "default"), c = t(() => a.value === "dot"), n = t(() => a.value === "tag"), r = t(() => a.value === "ribbon"), y = t(
+      () => p({
+        "nmorph-badge": [
+          `${e.hidden && "hidden"}`,
+          `${n.value && "tag"}`,
+          `${r.value && "ribbon"}`,
+          `${r.value && `ribbon-${e.ribbonCorner}`}`,
+          e.size
+        ]
       })
-    ), g = t(
-      () => f({
-        "nmorph-badge__container": [`${e.hidden && "hidden"}`, `${e.isTag && "tag"}`]
+    ), h = t(
+      () => p({
+        "nmorph-badge__container": [
+          `${e.hidden && "hidden"}`,
+          `${n.value && "tag"}`,
+          `${r.value && "ribbon"}`,
+          `${r.value && `ribbon-${e.ribbonCorner}`}`
+        ]
       })
-    ), v = t(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), y = t(() => e.isDot || e.value !== void 0), o = t(() => {
-      const a = `${(i?.value / 2 + e.offsetX) * -1}px`, h = `${(s?.value / 2 + e.offsetY) * -1}px`;
+    ), x = t(
+      () => p({
+        "nmorph-badge__ribbon-corner": [`${e.ribbonCorner}`]
+      })
+    ), z = t(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), S = t(() => c.value || e.value !== void 0), d = t(() => {
+      const o = `${(l?.value / 2 + e.offsetX) * -1}px`, N = `${(s?.value / 2 + e.offsetY) * -1}px`;
       return {
-        x: a,
-        y: h
+        x: o,
+        y: N
       };
-    }), b = t(() => e.isTag ? {
+    }), $ = t(() => n.value || r.value ? {
       zIndex: e.zIndex
     } : {
-      right: o.value.x,
-      top: o.value.y,
+      right: d.value.x,
+      top: d.value.y,
       zIndex: e.zIndex
-    }), u = (a) => typeof a == "number" ? `${a}px` : a, x = t(() => ({
+    }), i = (o) => typeof o == "number" ? `${o}px` : o, u = b(null), l = b(0), s = b(0), q = t(() => ({
       "--nmorph-badge-color": e.color,
-      ...e.dotSize !== void 0 && { "--dot-size": u(e.dotSize) }
-    })), r = n(null), i = n(0), s = n(0), d = async () => {
-      await _(), !(!r.value || e.isTag) && (i.value = r.value.clientWidth, s.value = r.value.clientHeight);
-    };
-    S(d), q(() => [e.value, e.max, e.isDot, e.isTag, e.size], d);
-    const l = { props: e, modifiers: m, containerModifiers: g, displayValue: v, shouldShowBadge: y, appliedOffset: o, containerStyle: b, getCssSize: u, styles: x, badge: r, badgeWidth: i, badgeHeight: s, updateBadgeSize: d };
-    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+      ...e.offsetX !== 0 && { "--nmorph-badge-ribbon-offset-x": i(e.offsetX) },
+      ...e.offsetY !== 0 && { "--nmorph-badge-ribbon-offset-y": i(e.offsetY) },
+      ...e.dotSize !== void 0 && { "--nmorph-badge-dot-size": i(e.dotSize) }
+    })), f = async () => {
+      await T(), !(!u.value || n.value || r.value) && (l.value = u.value.clientWidth, s.value = u.value.clientHeight);
+    }, _ = t(() => ({
+      zIndex: e.zIndex
+    }));
+    B(f), I(() => [e.value, e.max, a.value, e.ribbonCorner, e.size], f);
+    const v = { props: e, resolvedType: a, isDotType: c, isTagType: n, isRibbon: r, modifiers: y, containerModifiers: h, ribbonCornerModifiers: x, displayValue: z, shouldShowBadge: S, appliedOffset: d, containerStyle: $, getCssSize: i, badge: u, badgeWidth: l, badgeHeight: s, styles: q, updateBadgeSize: f, ribbonFrameStyle: _ };
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  B as default
+  X as default
 };

package/dist/components/feedback/nmorph-dialog/NmorphDialog.css

@@ -1 +1 @@
-.nmorph-dialog{position:absolute;top:50%;left:50%;width:var(--width);padding:var(--indentation-04);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);transform:translate(-50%,-50%)}.nmorph-dialog .nmorph-dialog__header{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{cursor:pointer}.nmorph-dialog{--width: var(--nmorph-dialog-width)}
+.nmorph-dialog{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;box-sizing:border-box;width:var(--width);max-width:var(--nmorph-dialog-max-width, calc(100vw - 32px) );max-height:var(--nmorph-dialog-max-height, var(--nmorph-dialog-default-max-height));padding:var(--indentation-04);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);transform:translate(-50%,-50%);--width: var(--nmorph-dialog-width);--nmorph-dialog-default-max-height: calc(100vh - 32px) }@supports (height: 100dvh){.nmorph-dialog{--nmorph-dialog-default-max-height: calc(100dvh - 32px) }}.nmorph-dialog .nmorph-dialog__header{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{flex:0 0 auto;cursor:pointer}.nmorph-dialog .nmorph-dialog__content{min-height:0;overflow-y:auto}

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue.js

@@ -1,11 +1,11 @@
 import './NmorphDialog.css';
 import s from "./NmorphDialog.vue2.js";
-import { openBlock as l, createBlock as c, withCtx as i, createElementVNode as e, normalizeStyle as d, normalizeClass as t, renderSlot as a, toDisplayString as m, createElementBlock as p, createVNode as n, createCommentVNode as _ } from "vue";
+import { openBlock as r, createBlock as c, withCtx as a, createElementVNode as e, normalizeStyle as d, normalizeClass as t, renderSlot as i, toDisplayString as m, createElementBlock as _, createVNode as n, createCommentVNode as p } from "vue";
 /* empty css                  */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
 const f = ["aria-label"], g = { class: "nmorph-dialog__header" }, v = { class: "nmorph-dialog__title" }, k = { class: "nmorph-dialog__content" };
-function y(r, N, w, o, C, O) {
-  return l(), c(o.NmorphOverlay, {
+function y(l, N, C, o, O, b) {
+  return r(), c(o.NmorphOverlay, {
     show: o.isVisible,
     "z-index": o.props.zIndex,
     "close-on-escape": o.props.closeOnEscape,
@@ -13,16 +13,16 @@ function y(r, N, w, o, C, O) {
     onOnOutsideClick: o.clickOnOverlay,
     onOnEscapeKeydown: o.closeHandler
   }, {
-    default: i(() => [
+    default: a(() => [
       e("div", {
         class: t(o.modifiers),
-        style: d({ "--nmorph-dialog-width": o.props.width }),
+        style: d(o.dialogStyle),
         role: "dialog",
         "aria-modal": "true",
         "aria-label": o.props.title || void 0
       }, [
         e("div", g, [
-          a(r.$slots, "header", {}, () => [
+          i(l.$slots, "header", {}, () => [
             e(
               "div",
               v,
@@ -30,23 +30,23 @@ function y(r, N, w, o, C, O) {
               1
               /* TEXT */
             ),
-            o.props.showClose ? (l(), p("div", {
+            o.props.showClose ? (r(), _("div", {
               key: 0,
               class: "nmorph-dialog__close-icon",
               onClick: o.closeHandler
             }, [
               n(o.NmorphIcon, null, {
-                default: i(() => [
+                default: a(() => [
                   n(o.NmorphIconCross)
                 ]),
                 _: 1
                 /* STABLE */
               })
-            ])) : _("v-if", !0)
+            ])) : p("v-if", !0)
           ])
         ]),
         e("div", k, [
-          a(r.$slots, "default")
+          i(l.$slots, "default")
         ])
       ], 14, f)
     ]),
@@ -54,7 +54,7 @@ function y(r, N, w, o, C, O) {
     /* FORWARDED */
   }, 8, ["show", "z-index", "close-on-escape"]);
 }
-const V = /* @__PURE__ */ h(s, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-dialog/NmorphDialog.vue"]]);
+const S = /* @__PURE__ */ h(s, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-dialog/NmorphDialog.vue"]]);
 export {
-  V as default
+  S as default
 };

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue2.js

@@ -1,15 +1,16 @@
 import './NmorphDialog.css';
-import { defineComponent as f, computed as c, ref as d, watch as y } from "vue";
-import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { defineComponent as c, computed as s, ref as y, watch as h } from "vue";
+import { useModifiers as g } from "../../../utils/create-modifiers.js";
 import v from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import T from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import h from "../../../assets/icons/cross.svg.js";
-const C = /* @__PURE__ */ f({
+import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import T from "../../../assets/icons/cross.svg.js";
+const C = /* @__PURE__ */ c({
   __name: "NmorphDialog",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
     title: { type: String, required: !1, default: "" },
     width: { type: String, required: !1, default: "330px" },
+    maxHeight: { type: String, required: !1, default: void 0 },
     openDelay: { type: Number, required: !1, default: 0 },
     closeDelay: { type: Number, required: !1, default: 0 },
     closeOnClickModal: { type: Boolean, required: !1, default: !0 },
@@ -19,49 +20,52 @@ const C = /* @__PURE__ */ f({
     closeOnEscape: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["on-close", "update:model-value"],
-  setup(i, { expose: n, emit: m }) {
-    n();
-    const e = i, r = m, p = c(
-      () => O({
+  setup(n, { expose: m, emit: d }) {
+    m();
+    const e = n, r = d, p = s(
+      () => g({
         "nmorph-dialog": []
       })
-    ), u = d(e.modelValue);
-    let t = null, l = null;
-    y(
+    ), f = s(() => ({
+      "--nmorph-dialog-width": e.width,
+      ...e.maxHeight && { "--nmorph-dialog-max-height": e.maxHeight }
+    })), a = y(e.modelValue);
+    let o = null, l = null;
+    h(
       () => e.modelValue,
-      (o) => {
-        o ? (l && clearTimeout(l), t = setTimeout(() => {
-          u.value = !0;
-        }, e.openDelay)) : (t && clearTimeout(t), l = setTimeout(() => {
-          u.value = !1;
+      (t) => {
+        t ? (l && clearTimeout(l), o = setTimeout(() => {
+          a.value = !0;
+        }, e.openDelay)) : (o && clearTimeout(o), l = setTimeout(() => {
+          a.value = !1;
         }, e.closeDelay));
       },
       { immediate: !0 }
     );
-    const a = () => {
-      r("on-close"), t && clearTimeout(t);
-      const o = () => {
+    const i = () => {
+      r("on-close"), o && clearTimeout(o);
+      const t = () => {
         r("update:model-value", !1);
       };
-      e.closeDelay <= 0 ? o() : l = setTimeout(o, e.closeDelay);
-    }, s = { props: e, emit: r, modifiers: p, isVisible: u, get openTimeout() {
-      return t;
-    }, set openTimeout(o) {
-      t = o;
+      e.closeDelay <= 0 ? t() : l = setTimeout(t, e.closeDelay);
+    }, u = { props: e, emit: r, modifiers: p, dialogStyle: f, isVisible: a, get openTimeout() {
+      return o;
+    }, set openTimeout(t) {
+      o = t;
     }, get closeTimeout() {
       return l;
-    }, set closeTimeout(o) {
-      l = o;
-    }, closeHandler: a, clickOnOverlay: () => {
-      e.closeOnOverlay && a();
+    }, set closeTimeout(t) {
+      l = t;
+    }, closeHandler: i, clickOnOverlay: () => {
+      e.closeOnOverlay && i();
     }, get NmorphOverlay() {
-      return T;
+      return O;
     }, get NmorphIcon() {
       return v;
     }, get NmorphIconCross() {
-      return h;
+      return T;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
   }
 });
 export {

package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue2.js

@@ -1,25 +1,25 @@
 import './NmorphNotificationProvider.css';
-import { defineComponent as x, ref as u, computed as v, watch as g } from "vue";
-import { NmorphNotificationPlacement as q } from "./types.js";
-import A from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
-const N = 500, z = /* @__PURE__ */ x({
+import { defineComponent as g, ref as u, inject as q, computed as h, watch as A } from "vue";
+import { NmorphNotificationPlacement as b } from "./types.js";
+import z from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
+const N = 500, P = /* @__PURE__ */ g({
   __name: "NmorphNotificationProvider",
   props: {
     notifications: { type: Array, required: !0 },
     placement: { type: null, required: !1, default: "top-right" },
-    zIndex: { type: Number, required: !1, default: 1e3 },
+    zIndex: { type: Number, required: !1, default: void 0 },
     quantity: { type: Number, required: !1, default: 100 }
   },
-  setup(h, { expose: _ }) {
-    _();
-    const c = (e) => typeof e.id == "string" && e.id.length > 0, a = u([]), n = u([]), r = u([]), d = Object.values(q), f = (e) => {
-      r.value = r.value.filter((i) => i.id !== e), n.value = n.value.filter((i) => i !== e);
+  setup(_, { expose: I }) {
+    I();
+    const c = (e) => typeof e.id == "string" && e.id.length > 0, a = u([]), o = u([]), r = u([]), d = Object.values(b), f = (e) => {
+      r.value = r.value.filter((i) => i.id !== e), o.value = o.value.filter((i) => i !== e);
     }, p = (e, i = !0) => {
-      n.value.includes(e) || (i && !a.value.includes(e) && (a.value = [...a.value, e]), n.value = [...n.value, e], setTimeout(() => f(e), N));
-    }, s = h, y = v(
+      o.value.includes(e) || (i && !a.value.includes(e) && (a.value = [...a.value, e]), o.value = [...o.value, e], setTimeout(() => f(e), N));
+    }, s = _, m = q("nmorph", void 0), y = h(
       () => d.map((e) => {
         const i = r.value.filter(
-          (o) => (o.placement ?? s.placement) === e
+          (n) => (n.placement ?? s.placement) === e
         ), t = Math.max(i.length - s.quantity, 0);
         return {
           placement: e,
@@ -27,29 +27,29 @@ const N = 500, z = /* @__PURE__ */ x({
         };
       })
     );
-    g(
+    A(
       () => s.notifications,
       (e) => {
         const i = e.filter(c).filter((t) => !a.value.includes(t.id));
         r.value = r.value.map((t) => {
-          const o = i.find((l) => l.id === t.id);
-          return o ? { ...t, ...o } : t;
+          const n = i.find((l) => l.id === t.id);
+          return n ? { ...t, ...n } : t;
         }), i.forEach((t) => {
           r.value.some(
             (l) => l.id === t.id
           ) || r.value.push(t);
         }), r.value.filter(
-          (t) => !i.some((o) => o.id === t.id)
+          (t) => !i.some((n) => n.id === t.id)
         ).forEach((t) => p(t.id, !1));
       },
       { deep: !0, immediate: !0 }
     );
-    const I = v(() => s.zIndex), m = { ANIMATION_DURATION: N, hasNotificationId: c, removedIds: a, closingIds: n, renderedNotifications: r, placementList: d, removeRenderedNotification: f, closeHandler: p, props: s, notificationGroups: y, zIndex: I, get NmorphAlert() {
-      return A;
+    const x = h(() => s.zIndex ?? (m?.zIndex.current.value ?? 1e3) + 1), v = { ANIMATION_DURATION: N, hasNotificationId: c, removedIds: a, closingIds: o, renderedNotifications: r, placementList: d, removeRenderedNotification: f, closeHandler: p, props: s, nmorph: m, notificationGroups: y, zIndex: x, get NmorphAlert() {
+      return z;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  z as default
+  P as default
 };