@nmorph/nmorph-ui-kit 2.2.58 → 3.0.0

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

@@ -1,39 +1,39 @@
 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";
+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";
 /* empty css                                */
 import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const g = ["title"], k = {
+const b = ["title"], k = {
   key: 0,
   class: "nmorph-notification-provider__duration-value"
 };
-function D(x, n, b, r, C, I) {
-  return i(), t(
+function N(g, l, D, r, w, I) {
+  return e(), i(
     "div",
     {
       class: "nmorph-notification-provider",
-      style: a({ zIndex: r.zIndex })
+      style: n({ zIndex: r.zIndex })
     },
     [
-      (i(!0), t(
-        l,
+      (e(!0), i(
+        a,
         null,
-        d(r.notificationGroups, (e) => (i(), _(h, {
-          key: e.placement,
+        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--${e.placement}`)
+          class: s(`nmorph-notification-provider__list nmorph-notification-provider__list--${t.placement}`)
         }, {
-          default: f(() => [
-            (i(!0), t(
-              l,
+          default: v(() => [
+            (e(!0), i(
+              a,
               null,
-              d(e.notifications, (o) => (i(), t(
+              d(t.notifications, (o) => (e(), i(
                 "div",
                 {
                   key: o.id,
-                  style: a(r.getNotificationStyle(o)),
+                  style: n(r.getNotificationStyle(o)),
                   class: s([
                     "nmorph-notification-provider__notification",
                     r.hasDurationIndicator(o) && "nmorph-notification-provider__notification--with-duration",
@@ -41,19 +41,29 @@ function D(x, n, b, r, C, I) {
                   ])
                 },
                 [
-                  v(r.NmorphAlert, u({
+                  u(r.NmorphAlert, {
+                    id: o.id,
                     class: "nmorph-notification-provider__alert",
-                    style: { width: o.width }
-                  }, { ref_for: !0 }, r.getNotificationAlertProps(o), {
+                    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, 16, ["style", "onClose"]),
-                  r.hasDurationIndicator(o) ? (i(), t("div", {
+                  }, 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"
                   }, [
-                    n[0] || (n[0] = c(
+                    l[0] || (l[0] = c(
                       "span",
                       { class: "nmorph-notification-provider__duration-track" },
                       [
@@ -62,14 +72,14 @@ function D(x, n, b, r, C, I) {
                       -1
                       /* CACHED */
                     )),
-                    r.hasDurationValue(o) ? (i(), t(
+                    r.hasDurationValue(o) ? (e(), i(
                       "span",
                       k,
-                      N(r.getNotificationDurationLabel(o)),
+                      f(r.getNotificationDurationLabel(o)),
                       1
                       /* TEXT */
                     )) : p("v-if", !0)
-                  ], 8, g)) : p("v-if", !0)
+                  ], 8, b)) : p("v-if", !0)
                 ],
                 6
                 /* CLASS, STYLE */
@@ -89,7 +99,7 @@ function D(x, n, b, r, C, I) {
     /* STYLE */
   );
 }
-const B = /* @__PURE__ */ y(m, [["render", D], ["__file", "/builds/ketjo/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
+const B = /* @__PURE__ */ y(m, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
 export {
   B as default
 };

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

@@ -1,8 +1,8 @@
 import './NmorphNotificationProvider.css';
-import { defineComponent as U, ref as v, inject as $, computed as D, watch as q, onBeforeUnmount as C } from "vue";
-import { NmorphNotificationPlacement as F } from "./types.js";
-import G from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
-const k = 500, E = 250, Q = /* @__PURE__ */ U({
+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({
   __name: "NmorphNotificationProvider",
   props: {
     notifications: { type: Array, required: !0 },
@@ -10,33 +10,30 @@ const k = 500, E = 250, Q = /* @__PURE__ */ U({
     zIndex: { type: Number, required: !1, default: void 0 },
     quantity: { type: Number, required: !1, default: 100 }
   },
-  setup(O, { expose: P }) {
-    P();
-    const g = (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();
+  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 T = Object.values(F), m = (e) => typeof e.duration != "number" || !Number.isFinite(e.duration) ? 0 : Math.max(e.duration, 0), y = (e) => m(e) > 0, z = (e) => e.showDurationValue !== !1, _ = (e) => {
+    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);
-    }, w = (e) => e < 1e3 ? `${Math.ceil(e)}ms` : `${Math.ceil(e / 1e3)}s`, S = (e) => w(_(e)), V = (e) => ({
-      "--nmorph-notification-provider-duration": `${m(e)}ms`
-    }), j = (e) => {
-      const t = { ...e };
-      return delete t.duration, delete t.placement, delete t.showDurationValue, delete t.width, t;
-    }, p = (e, t = !1) => {
+    }, 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));
-    }, x = (e) => {
+    }, 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(
         e.id,
         setTimeout(() => h(e.id), t)
       ), c.set(e.id, t)));
-    }, f = O, M = $("nmorph", void 0), B = D(
-      () => T.map((e) => {
+    }, f = O, M = V("nmorph", void 0), L = D(
+      () => g.map((e) => {
         const t = n.value.filter(
           (i) => (i.placement ?? f.placement) === e
         ), r = Math.max(t.length - f.quantity, 0);
@@ -67,7 +64,7 @@ const k = 500, E = 250, Q = /* @__PURE__ */ U({
     ), q(
       () => f.notifications,
       (e) => {
-        const t = e.filter(g).filter((r) => !l.value.includes(r.id));
+        const t = e.filter(T).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;
@@ -75,26 +72,26 @@ const k = 500, E = 250, Q = /* @__PURE__ */ U({
           n.value.some(
             (I) => I.id === r.id
           ) || n.value.push(r);
-        }), t.forEach((r) => x(r)), n.value.filter(
+        }), t.forEach((r) => w(r)), n.value.filter(
           (r) => !t.some((i) => i.id === r.id)
         ).forEach((r) => h(r.id, !1));
       },
       { deep: !0, immediate: !0 }
     );
-    const L = D(() => f.zIndex ?? (M?.zIndex.current.value ?? 1e3) + 1);
-    C(() => {
+    const P = D(() => f.zIndex ?? (M?.zIndex.current.value ?? 1e3) + 1);
+    $(() => {
       s.forEach((e) => clearTimeout(e)), s.clear(), c.clear(), d.clear(), N();
     });
-    const R = { ANIMATION_DURATION: k, DURATION_TICK_INTERVAL: E, hasNotificationId: g, removedIds: l, closingIds: o, renderedNotifications: n, durationTick: u, durationTimers: s, durationById: c, durationStartedAtById: d, get durationTicker() {
+    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;
     }, set durationTicker(e) {
       a = e;
-    }, placementList: T, getNotificationDuration: m, hasDurationIndicator: y, hasDurationValue: z, getNotificationRemainingDuration: _, formatNotificationDuration: w, getNotificationDurationLabel: S, getNotificationStyle: V, getNotificationAlertProps: j, clearDurationTimer: p, removeRenderedNotification: A, closeHandler: h, scheduleDurationTimer: x, props: f, nmorph: M, notificationGroups: B, hasRunningDurationIndicator: b, stopDurationTicker: N, zIndex: L, get NmorphAlert() {
-      return G;
+    }, 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;
     } };
     return Object.defineProperty(R, "__isScriptSetup", { enumerable: !1, value: !0 }), R;
   }
 });
 export {
-  Q as default
+  J as default
 };

package/dist/components/providers/nmorph-notification-provider/types.js

@@ -1,4 +1,11 @@
-var r = /* @__PURE__ */ ((t) => (t["top-left"] = "top-left", t["top-center"] = "top-center", t["top-right"] = "top-right", t["bottom-left"] = "bottom-left", t["bottom-center"] = "bottom-center", t["bottom-right"] = "bottom-right", t))(r || {});
+const t = {
+  "top-left": "top-left",
+  "top-center": "top-center",
+  "top-right": "top-right",
+  "bottom-left": "bottom-left",
+  "bottom-center": "bottom-center",
+  "bottom-right": "bottom-right"
+};
 export {
-  r as NmorphNotificationPlacement
+  t as NmorphNotificationPlacement
 };