@nmorph/nmorph-ui-kit 2.2.53 → 2.2.55

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

@@ -1,95 +1,137 @@
 import './NmorphNotificationProvider.css';
-import m from "./NmorphNotificationProvider.vue2.js";
-import { openBlock as i, createElementBlock as t, normalizeStyle as a, Fragment as l, renderList as d, createBlock as _, TransitionGroup as h, normalizeClass as s, withCtx as f, createVNode as v, mergeProps as u, createElementVNode as c, toDisplayString as N, createCommentVNode as p } from "vue";
-/* empty css                                */
-import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const g = ["title"], k = {
+import { defineComponent as G, ref as h, inject as H, computed as g, watch as x, onBeforeUnmount as K, openBlock as a, createElementBlock as s, normalizeStyle as k, Fragment as M, renderList as A, createBlock as J, TransitionGroup as Q, normalizeClass as R, withCtx as W, createVNode as X, unref as Y, mergeProps as Z, createElementVNode as z, toDisplayString as ee, createCommentVNode as C } from "vue";
+import { NmorphNotificationPlacement as te } from "./types.js";
+import re from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
+/* empty css                                           */
+const ne = ["title"], oe = {
   key: 0,
   class: "nmorph-notification-provider__duration-value"
-};
-function D(x, n, b, r, C, I) {
-  return i(), t(
-    "div",
-    {
+}, ie = 500, ae = 250, de = /* @__PURE__ */ G({
+  __name: "NmorphNotificationProvider",
+  props: {
+    notifications: {},
+    placement: { default: "top-right" },
+    zIndex: { default: void 0 },
+    quantity: { default: 100 }
+  },
+  setup(E) {
+    const V = (e) => typeof e.id == "string" && e.id.length > 0, m = h([]), i = h([]), o = h([]), l = h(Date.now()), u = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
+    let c;
+    const $ = Object.values(te), d = (e) => typeof e.duration != "number" || !Number.isFinite(e.duration) ? 0 : Math.max(e.duration, 0), _ = (e) => d(e) > 0, y = (e) => e.showDurationValue !== !1, B = (e) => {
+      const t = d(e), r = v.get(e.id);
+      return !t || !r ? t : Math.max(t - (l.value - r), 0);
+    }, b = (e) => e < 1e3 ? `${Math.ceil(e)}ms` : `${Math.ceil(e / 1e3)}s`, T = (e) => b(B(e)), P = (e) => ({
+      "--nmorph-notification-provider-duration": `${d(e)}ms`
+    }), L = (e) => {
+      const t = { ...e };
+      return delete t.duration, delete t.placement, delete t.showDurationValue, delete t.width, t;
+    }, N = (e, t = !1) => {
+      const r = u.get(e);
+      r && clearTimeout(r), u.delete(e), p.delete(e), t || v.delete(e);
+    }, O = (e) => {
+      o.value = o.value.filter((t) => t.id !== e), i.value = i.value.filter((t) => t !== e), N(e);
+    }, I = (e, t = !0) => {
+      i.value.includes(e) || (N(e, !0), t && !m.value.includes(e) && (m.value = [...m.value, e]), i.value = [...i.value, e], setTimeout(() => O(e), ie));
+    }, S = (e) => {
+      const t = d(e);
+      p.get(e.id) !== t && (N(e.id), t && (l.value = Date.now(), v.set(e.id, l.value), u.set(
+        e.id,
+        setTimeout(() => I(e.id), t)
+      ), p.set(e.id, t)));
+    }, f = E, U = H("nmorph", void 0), j = g(
+      () => $.map((e) => {
+        const t = o.value.filter(
+          (n) => (n.placement ?? f.placement) === e
+        ), r = Math.max(t.length - f.quantity, 0);
+        return {
+          placement: e,
+          notifications: t.slice(r)
+        };
+      })
+    ), q = g(
+      () => o.value.some(
+        (e) => _(e) && !i.value.includes(e.id)
+      )
+    ), w = () => {
+      c && (clearInterval(c), c = void 0);
+    };
+    x(
+      q,
+      (e) => {
+        if (!e) {
+          w();
+          return;
+        }
+        c || (l.value = Date.now(), c = setInterval(() => {
+          l.value = Date.now();
+        }, ae));
+      },
+      { immediate: !0 }
+    ), x(
+      () => f.notifications,
+      (e) => {
+        const t = e.filter(V).filter((r) => !m.value.includes(r.id));
+        o.value = o.value.map((r) => {
+          const n = t.find((D) => D.id === r.id);
+          return n ? { ...r, ...n } : r;
+        }), t.forEach((r) => {
+          o.value.some(
+            (D) => D.id === r.id
+          ) || o.value.push(r);
+        }), t.forEach((r) => S(r)), o.value.filter(
+          (r) => !t.some((n) => n.id === r.id)
+        ).forEach((r) => I(r.id, !1));
+      },
+      { deep: !0, immediate: !0 }
+    );
+    const F = g(() => f.zIndex ?? (U?.zIndex.current.value ?? 1e3) + 1);
+    return K(() => {
+      u.forEach((e) => clearTimeout(e)), u.clear(), p.clear(), v.clear(), w();
+    }), (e, t) => (a(), s("div", {
       class: "nmorph-notification-provider",
-      style: a({ zIndex: r.zIndex })
-    },
-    [
-      (i(!0), t(
-        l,
-        null,
-        d(r.notificationGroups, (e) => (i(), _(h, {
-          key: e.placement,
-          appear: "",
-          name: "nmorph-notification",
-          tag: "div",
-          class: s(`nmorph-notification-provider__list nmorph-notification-provider__list--${e.placement}`)
-        }, {
-          default: f(() => [
-            (i(!0), t(
-              l,
-              null,
-              d(e.notifications, (o) => (i(), t(
-                "div",
-                {
-                  key: o.id,
-                  style: a(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"
-                  ])
-                },
-                [
-                  v(r.NmorphAlert, u({
-                    class: "nmorph-notification-provider__alert",
-                    style: { width: o.width }
-                  }, { ref_for: !0 }, r.getNotificationAlertProps(o), {
-                    onClose: () => r.closeHandler(o.id)
-                  }), null, 16, ["style", "onClose"]),
-                  r.hasDurationIndicator(o) ? (i(), t("div", {
-                    key: `${o.id}-${r.getNotificationDuration(o)}`,
-                    class: "nmorph-notification-provider__duration",
-                    title: r.hasDurationValue(o) ? r.getNotificationDurationLabel(o) : void 0,
-                    "aria-hidden": "true"
-                  }, [
-                    n[0] || (n[0] = c(
-                      "span",
-                      { class: "nmorph-notification-provider__duration-track" },
-                      [
-                        c("span", { class: "nmorph-notification-provider__duration-bar" })
-                      ],
-                      -1
-                      /* CACHED */
-                    )),
-                    r.hasDurationValue(o) ? (i(), t(
-                      "span",
-                      k,
-                      N(r.getNotificationDurationLabel(o)),
-                      1
-                      /* TEXT */
-                    )) : p("v-if", !0)
-                  ], 8, g)) : p("v-if", !0)
-                ],
-                6
-                /* CLASS, STYLE */
-              ))),
-              128
-              /* KEYED_FRAGMENT */
-            ))
-          ]),
-          _: 2
-          /* DYNAMIC */
-        }, 1032, ["class"]))),
-        128
-        /* KEYED_FRAGMENT */
-      ))
-    ],
-    4
-    /* STYLE */
-  );
-}
-const B = /* @__PURE__ */ y(m, [["render", D], ["__file", "/builds/ketjo/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
+      style: k({ zIndex: F.value })
+    }, [
+      (a(!0), s(M, null, A(j.value, (r) => (a(), J(Q, {
+        key: r.placement,
+        appear: "",
+        name: "nmorph-notification",
+        tag: "div",
+        class: R(`nmorph-notification-provider__list nmorph-notification-provider__list--${r.placement}`)
+      }, {
+        default: W(() => [
+          (a(!0), s(M, null, A(r.notifications, (n) => (a(), s("div", {
+            key: n.id,
+            style: k(P(n)),
+            class: R([
+              "nmorph-notification-provider__notification",
+              _(n) && "nmorph-notification-provider__notification--with-duration",
+              i.value.includes(n.id) && "nmorph-notification-provider__notification--closing"
+            ])
+          }, [
+            X(Y(re), Z({
+              class: "nmorph-notification-provider__alert",
+              style: { width: n.width }
+            }, { ref_for: !0 }, L(n), {
+              onClose: () => I(n.id)
+            }), null, 16, ["style", "onClose"]),
+            _(n) ? (a(), s("div", {
+              key: `${n.id}-${d(n)}`,
+              class: "nmorph-notification-provider__duration",
+              title: y(n) ? T(n) : void 0,
+              "aria-hidden": "true"
+            }, [
+              t[0] || (t[0] = z("span", { class: "nmorph-notification-provider__duration-track" }, [
+                z("span", { class: "nmorph-notification-provider__duration-bar" })
+              ], -1)),
+              y(n) ? (a(), s("span", oe, ee(T(n)), 1)) : C("", !0)
+            ], 8, ne)) : C("", !0)
+          ], 6))), 128))
+        ]),
+        _: 2
+      }, 1032, ["class"]))), 128))
+    ], 4));
+  }
+});
 export {
-  B as default
+  de as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphNotificationProvider.css';
+import o from "./NmorphNotificationProvider.vue.js";
+/* empty css                                */
+export {
+  o as default
+};