@nmorph/nmorph-ui-kit 3.0.7 → 3.0.8

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

@@ -1,105 +1,110 @@
 import './NmorphNotificationProvider.css';
-import m from "./NmorphNotificationProvider.vue2.js";
-import { openBlock as e, createElementBlock as i, normalizeStyle as n, Fragment as a, renderList as d, createBlock as h, TransitionGroup as _, normalizeClass as s, withCtx as v, createVNode as u, createElementVNode as c, toDisplayString as f, createCommentVNode as p } from "vue";
+import h from "./NmorphNotificationProvider.vue2.js";
+import { openBlock as e, createBlock as d, Teleport as _, createElementVNode as l, normalizeStyle as n, createElementBlock as i, Fragment as s, renderList as c, TransitionGroup as v, normalizeClass as p, withCtx as u, createVNode as b, toDisplayString as f, createCommentVNode as m } from "vue";
 /* empty css                                */
 import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const b = ["title"], k = {
+const k = ["title"], N = {
   key: 0,
   class: "nmorph-notification-provider__duration-value"
 };
-function N(g, l, D, r, w, I) {
-  return e(), i(
-    "div",
-    {
-      class: "nmorph-notification-provider",
-      style: n({ zIndex: r.zIndex })
-    },
-    [
-      (e(!0), i(
-        a,
-        null,
-        d(r.notificationGroups, (t) => (e(), h(_, {
-          key: t.placement,
-          appear: "",
-          name: "nmorph-notification",
-          tag: "div",
-          class: s(`nmorph-notification-provider__list nmorph-notification-provider__list--${t.placement}`)
-        }, {
-          default: v(() => [
-            (e(!0), i(
-              a,
-              null,
-              d(t.notifications, (o) => (e(), i(
-                "div",
-                {
-                  key: o.id,
-                  style: n(r.getNotificationStyle(o)),
-                  class: s([
-                    "nmorph-notification-provider__notification",
-                    r.hasDurationIndicator(o) && "nmorph-notification-provider__notification--with-duration",
-                    r.closingIds.includes(o.id) && "nmorph-notification-provider__notification--closing"
-                  ])
-                },
-                [
-                  u(r.NmorphAlert, {
-                    id: o.id,
-                    class: "nmorph-notification-provider__alert",
-                    style: n({ width: o.width }),
-                    type: o.type,
-                    closable: o.closable,
-                    title: o.title,
-                    content: o.content,
-                    fill: o.fill,
-                    "show-icon": o.showIcon,
-                    bordered: o.bordered,
-                    html: o.html,
-                    "close-icon-position": o.closeIconPosition,
-                    "background-color": o.backgroundColor,
-                    onClose: () => r.closeHandler(o.id)
-                  }, null, 8, ["id", "style", "type", "closable", "title", "content", "fill", "show-icon", "bordered", "html", "close-icon-position", "background-color", "onClose"]),
-                  r.hasDurationIndicator(o) ? (e(), i("div", {
-                    key: `${o.id}-${r.getNotificationDuration(o)}`,
-                    class: "nmorph-notification-provider__duration",
-                    title: r.hasDurationValue(o) ? r.getNotificationDurationLabel(o) : void 0,
-                    "aria-hidden": "true"
-                  }, [
-                    l[0] || (l[0] = c(
-                      "span",
-                      { class: "nmorph-notification-provider__duration-track" },
-                      [
-                        c("span", { class: "nmorph-notification-provider__duration-bar" })
-                      ],
-                      -1
-                      /* CACHED */
-                    )),
-                    r.hasDurationValue(o) ? (e(), i(
-                      "span",
-                      k,
-                      f(r.getNotificationDurationLabel(o)),
-                      1
-                      /* TEXT */
-                    )) : p("v-if", !0)
-                  ], 8, b)) : p("v-if", !0)
-                ],
-                6
-                /* CLASS, STYLE */
-              ))),
-              128
-              /* KEYED_FRAGMENT */
-            ))
-          ]),
-          _: 2
-          /* DYNAMIC */
-        }, 1032, ["class"]))),
-        128
-        /* KEYED_FRAGMENT */
-      ))
-    ],
-    4
-    /* STYLE */
-  );
+function g(D, a, w, r, I, x) {
+  return e(), d(_, {
+    to: r.props.teleportTo,
+    disabled: r.teleportDisabled
+  }, [
+    l(
+      "div",
+      {
+        class: "nmorph-notification-provider",
+        style: n({ zIndex: r.zIndex })
+      },
+      [
+        (e(!0), i(
+          s,
+          null,
+          c(r.notificationGroups, (t) => (e(), d(v, {
+            key: t.placement,
+            appear: "",
+            name: "nmorph-notification",
+            tag: "div",
+            class: p(`nmorph-notification-provider__list nmorph-notification-provider__list--${t.placement}`)
+          }, {
+            default: u(() => [
+              (e(!0), i(
+                s,
+                null,
+                c(t.notifications, (o) => (e(), i(
+                  "div",
+                  {
+                    key: o.id,
+                    style: n(r.getNotificationStyle(o)),
+                    class: p([
+                      "nmorph-notification-provider__notification",
+                      r.hasDurationIndicator(o) && "nmorph-notification-provider__notification--with-duration",
+                      r.closingIds.includes(o.id) && "nmorph-notification-provider__notification--closing"
+                    ])
+                  },
+                  [
+                    b(r.NmorphAlert, {
+                      id: o.id,
+                      class: "nmorph-notification-provider__alert",
+                      style: n({ width: o.width }),
+                      type: o.type,
+                      closable: o.closable,
+                      title: o.title,
+                      content: o.content,
+                      fill: o.fill,
+                      "show-icon": o.showIcon,
+                      bordered: o.bordered,
+                      html: o.html,
+                      "close-icon-position": o.closeIconPosition,
+                      "background-color": o.backgroundColor,
+                      onClose: () => r.closeHandler(o.id)
+                    }, null, 8, ["id", "style", "type", "closable", "title", "content", "fill", "show-icon", "bordered", "html", "close-icon-position", "background-color", "onClose"]),
+                    r.hasDurationIndicator(o) ? (e(), i("div", {
+                      key: `${o.id}-${r.getNotificationDuration(o)}`,
+                      class: "nmorph-notification-provider__duration",
+                      title: r.hasDurationValue(o) ? r.getNotificationDurationLabel(o) : void 0,
+                      "aria-hidden": "true"
+                    }, [
+                      a[0] || (a[0] = l(
+                        "span",
+                        { class: "nmorph-notification-provider__duration-track" },
+                        [
+                          l("span", { class: "nmorph-notification-provider__duration-bar" })
+                        ],
+                        -1
+                        /* CACHED */
+                      )),
+                      r.hasDurationValue(o) ? (e(), i(
+                        "span",
+                        N,
+                        f(r.getNotificationDurationLabel(o)),
+                        1
+                        /* TEXT */
+                      )) : m("v-if", !0)
+                    ], 8, k)) : m("v-if", !0)
+                  ],
+                  6
+                  /* CLASS, STYLE */
+                ))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1032, ["class"]))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ],
+      4
+      /* STYLE */
+    )
+  ], 8, ["to", "disabled"]);
 }
-const B = /* @__PURE__ */ y(m, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
+const L = /* @__PURE__ */ y(h, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
 export {
-  B as default
+  L as default
 };

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

@@ -1,97 +1,121 @@
 import './NmorphNotificationProvider.css';
-import { defineComponent as U, ref as v, inject as V, computed as D, watch as q, onBeforeUnmount as $ } from "vue";
-import { NmorphNotificationPlacement as C } from "./types.js";
-import F from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
-const k = 500, E = 250, J = /* @__PURE__ */ U({
+import { defineComponent as H, ref as s, inject as K, computed as f, watch as T, onMounted as J, onBeforeUnmount as Q } from "vue";
+import { NmorphNotificationPlacement as W } from "./types.js";
+import X from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
+const j = 500, L = 250, re = /* @__PURE__ */ H({
   __name: "NmorphNotificationProvider",
   props: {
     notifications: { type: Array, required: !0 },
     placement: { type: null, required: !1, default: "top-right" },
     zIndex: { type: Number, required: !1, default: void 0 },
-    quantity: { type: Number, required: !1, default: 100 }
+    quantity: { type: Number, required: !1, default: 100 },
+    teleportTo: { type: null, required: !1, default: "body" },
+    disabledTeleport: { type: Boolean, required: !1, default: !1 }
   },
-  setup(O, { expose: z }) {
-    z();
-    const T = (e) => typeof e.id == "string" && e.id.length > 0, l = v([]), o = v([]), n = v([]), u = v(Date.now()), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map();
-    let a;
-    const g = Object.values(C), m = (e) => typeof e.duration != "number" || !Number.isFinite(e.duration) ? 0 : Math.max(e.duration, 0), y = (e) => m(e) > 0, S = (e) => e.showDurationValue !== !1, _ = (e) => {
-      const t = m(e), r = d.get(e.id);
-      return !t || !r ? t : Math.max(t - (u.value - r), 0);
-    }, x = (e) => e < 1e3 ? `${Math.ceil(e)}ms` : `${Math.ceil(e / 1e3)}s`, j = (e) => x(_(e)), B = (e) => ({
-      "--nmorph-private-notification-provider-duration": `${m(e)}ms`
-    }), p = (e, t = !1) => {
-      const r = s.get(e);
-      r && clearTimeout(r), s.delete(e), c.delete(e), t || d.delete(e);
-    }, A = (e) => {
-      n.value = n.value.filter((t) => t.id !== e), o.value = o.value.filter((t) => t !== e), p(e);
-    }, h = (e, t = !0) => {
-      o.value.includes(e) || (p(e, !0), t && !l.value.includes(e) && (l.value = [...l.value, e]), o.value = [...o.value, e], setTimeout(() => A(e), k));
-    }, w = (e) => {
-      const t = m(e);
-      c.get(e.id) !== t && (p(e.id), t && (u.value = Date.now(), d.set(e.id, u.value), s.set(
+  setup(P, { expose: U }) {
+    U();
+    const y = (e) => typeof e.id == "string" && e.id.length > 0, l = s([]), o = s([]), n = s([]), c = s(Date.now()), d = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
+    let i;
+    const w = Object.values(W), p = (e) => typeof e.duration != "number" || !Number.isFinite(e.duration) ? 0 : Math.max(e.duration, 0), R = (e) => p(e) > 0, V = (e) => e.showDurationValue !== !1, q = (e) => {
+      const t = p(e), r = v.get(e.id);
+      return !t || !r ? t : Math.max(t - (c.value - r), 0);
+    }, z = (e) => e < 1e3 ? `${Math.ceil(e)}ms` : `${Math.ceil(e / 1e3)}s`, Z = (e) => z(q(e)), $ = (e) => ({
+      "--nmorph-private-notification-provider-duration": `${p(e)}ms`
+    }), h = (e, t = !1) => {
+      const r = d.get(e);
+      r && clearTimeout(r), d.delete(e), m.delete(e), t || v.delete(e);
+    }, k = (e) => {
+      n.value = n.value.filter((t) => t.id !== e), o.value = o.value.filter((t) => t !== e), h(e);
+    }, D = (e, t = !0) => {
+      o.value.includes(e) || (h(e, !0), t && !l.value.includes(e) && (l.value = [...l.value, e]), o.value = [...o.value, e], setTimeout(() => k(e), j));
+    }, E = (e) => {
+      const t = p(e);
+      m.get(e.id) !== t && (h(e.id), t && (c.value = Date.now(), v.set(e.id, c.value), d.set(
         e.id,
-        setTimeout(() => h(e.id), t)
-      ), c.set(e.id, t)));
-    }, f = O, M = V("nmorph", void 0), L = D(
-      () => g.map((e) => {
+        setTimeout(() => D(e.id), t)
+      ), m.set(e.id, t)));
+    }, a = P, g = s(!1), x = K("nmorph"), I = s(x?.zIndex.current.value ?? 1e3), N = s(!1), _ = () => {
+      a.zIndex !== void 0 || N.value || (I.value = x?.zIndex.next() ?? I.value + 1, N.value = !0);
+    }, C = f(
+      () => w.map((e) => {
         const t = n.value.filter(
-          (i) => (i.placement ?? f.placement) === e
-        ), r = Math.max(t.length - f.quantity, 0);
+          (u) => (u.placement ?? a.placement) === e
+        ), r = Math.max(t.length - a.quantity, 0);
         return {
           placement: e,
           notifications: t.slice(r)
         };
       })
-    ), b = D(
+    ), O = f(
       () => n.value.some(
-        (e) => y(e) && !o.value.includes(e.id)
+        (e) => R(e) && !o.value.includes(e.id)
       )
-    ), N = () => {
-      a && (clearInterval(a), a = void 0);
+    ), b = f(() => n.value.length > 0), B = f(
+      () => b.value || a.notifications.some(
+        (e) => y(e) && !l.value.includes(e.id)
+      )
+    ), F = f(() => a.zIndex ?? I.value), G = f(() => !g.value || a.disabledTeleport), A = () => {
+      i && (clearInterval(i), i = void 0);
     };
-    q(
+    T(
+      () => a.notifications,
+      () => {
+        B.value && _();
+      },
+      { deep: !0, immediate: !0, flush: "sync" }
+    ), T(
       b,
+      (e) => {
+        if (e) {
+          _();
+          return;
+        }
+        N.value = !1;
+      },
+      { immediate: !0, flush: "sync" }
+    ), T(
+      O,
       (e) => {
         if (!e) {
-          N();
+          A();
           return;
         }
-        a || (u.value = Date.now(), a = setInterval(() => {
-          u.value = Date.now();
-        }, E));
+        i || (c.value = Date.now(), i = setInterval(() => {
+          c.value = Date.now();
+        }, L));
       },
       { immediate: !0 }
-    ), q(
-      () => f.notifications,
+    ), T(
+      () => a.notifications,
       (e) => {
-        const t = e.filter(T).filter((r) => !l.value.includes(r.id));
+        const t = e.filter(y).filter((r) => !l.value.includes(r.id));
         n.value = n.value.map((r) => {
-          const i = t.find((I) => I.id === r.id);
-          return i ? { ...r, ...i } : r;
+          const u = t.find((M) => M.id === r.id);
+          return u ? { ...r, ...u } : r;
         }), t.forEach((r) => {
           n.value.some(
-            (I) => I.id === r.id
-          ) || n.value.push(r);
-        }), t.forEach((r) => w(r)), n.value.filter(
-          (r) => !t.some((i) => i.id === r.id)
-        ).forEach((r) => h(r.id, !1));
+            (M) => M.id === r.id
+          ) || (n.value = [...n.value, r]);
+        }), t.forEach((r) => E(r)), n.value.filter(
+          (r) => !t.some((u) => u.id === r.id)
+        ).forEach((r) => D(r.id, !1));
       },
       { deep: !0, immediate: !0 }
-    );
-    const P = D(() => f.zIndex ?? (M?.zIndex.current.value ?? 1e3) + 1);
-    $(() => {
-      s.forEach((e) => clearTimeout(e)), s.clear(), c.clear(), d.clear(), N();
+    ), J(() => {
+      g.value = !0;
+    }), Q(() => {
+      d.forEach((e) => clearTimeout(e)), d.clear(), m.clear(), v.clear(), A();
     });
-    const R = { ANIMATION_DURATION: k, DURATION_TICK_INTERVAL: E, hasNotificationId: T, removedIds: l, closingIds: o, renderedNotifications: n, durationTick: u, durationTimers: s, durationById: c, durationStartedAtById: d, get durationTicker() {
-      return a;
+    const S = { ANIMATION_DURATION: j, DURATION_TICK_INTERVAL: L, hasNotificationId: y, removedIds: l, closingIds: o, renderedNotifications: n, durationTick: c, durationTimers: d, durationById: m, durationStartedAtById: v, get durationTicker() {
+      return i;
     }, set durationTicker(e) {
-      a = e;
-    }, placementList: g, getNotificationDuration: m, hasDurationIndicator: y, hasDurationValue: S, getNotificationRemainingDuration: _, formatNotificationDuration: x, getNotificationDurationLabel: j, getNotificationStyle: B, clearDurationTimer: p, removeRenderedNotification: A, closeHandler: h, scheduleDurationTimer: w, props: f, nmorph: M, notificationGroups: L, hasRunningDurationIndicator: b, stopDurationTicker: N, zIndex: P, get NmorphAlert() {
-      return F;
+      i = e;
+    }, placementList: w, getNotificationDuration: p, hasDurationIndicator: R, hasDurationValue: V, getNotificationRemainingDuration: q, formatNotificationDuration: z, getNotificationDurationLabel: Z, getNotificationStyle: $, clearDurationTimer: h, removeRenderedNotification: k, closeHandler: D, scheduleDurationTimer: E, props: a, isMounted: g, nmorph: x, dynamicZIndex: I, activeZIndexAllocated: N, allocateZIndex: _, notificationGroups: C, hasRunningDurationIndicator: O, hasRenderedNotifications: b, hasActiveNotifications: B, zIndex: F, teleportDisabled: G, stopDurationTicker: A, get NmorphAlert() {
+      return X;
     } };
-    return Object.defineProperty(R, "__isScriptSetup", { enumerable: !1, value: !0 }), R;
+    return Object.defineProperty(S, "__isScriptSetup", { enumerable: !1, value: !0 }), S;
   }
 });
 export {
-  J as default
+  re as default
 };

package/dist/hooks/use-z-index.js

@@ -1,14 +1,14 @@
-import { inject as u, ref as c, watch as m, computed as a } from "vue";
-const i = (r, n) => {
-  const t = u("nmorph"), e = c(t?.zIndex.current.value ?? 1e3);
-  return m(
-    r,
-    (o) => {
-      o && n() === void 0 && (e.value = t?.zIndex.next() ?? e.value + 1);
+import { inject as o, ref as r, watch as i, computed as s } from "vue";
+const d = (e, t) => {
+  const u = o("nmorph"), n = r(u?.zIndex.current.value ?? 1e3);
+  return i(
+    () => typeof e == "function" ? e() : e.value,
+    (c) => {
+      c && t() === void 0 && (n.value = u?.zIndex.next() ?? n.value + 1);
     },
-    { immediate: !0 }
-  ), a(() => n() ?? e.value);
+    { immediate: !0, flush: "sync" }
+  ), s(() => t() ?? n.value);
 };
 export {
-  i as useZIndex
+  d as useZIndex
 };