@nmorph/nmorph-ui-kit 3.0.16 → 3.0.18

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

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

package/dist/hooks/use-common-styles.js

@@ -1,6 +1,6 @@
-import { nmorphPlainSurface as h, nmorphCombined as l, nmorphInset as t, nmorphOutset as p, title1 as s, title2 as m, title3 as c, title4 as g, body1 as n, body2 as d, body3 as b, body4 as v, typography as o } from "../utils/theme-style.js";
-const y = {
-  "nmorph-body-4": v,
+import { nmorphPlainSurface as h, nmorphCombined as l, nmorphInset as t, nmorphOutset as p, title1 as s, title2 as m, title3 as c, title4 as g, body1 as n, body2 as d, body3 as b, body4 as y, typography as o } from "../utils/theme-style.js";
+const v = {
+  "nmorph-body-4": y,
   "nmorph-body-3": b,
   "nmorph-body-2": d,
   "nmorph-body-1": n,
@@ -134,7 +134,7 @@ const y = {
           var(--nmorph-dark-shade-color);
       --nmorph-wrapper-padding: calc(var(--base-shadow-width) * 1.5);
       --nmorph-plain-border-color: color-mix(in srgb, var(--nmorph-text-color) 18%, transparent);
-      --nmorph-plain-border: 1.5px solid var(--nmorph-plain-border-color);
+      --nmorph-plain-border: 1px solid var(--nmorph-plain-border-color);
 
       --transition-04: 0.4s;
       --transition-03: 0.3s;
@@ -528,6 +528,18 @@ const y = {
       font-weight: var(--font-weight-extrabold);
     }
 
+    .nmorph-typography--not-selectable {
+      user-select: none;
+    }
+
+    .nmorph-typography--italic {
+      font-style: italic;
+    }
+
+    .nmorph-typography--no-line-height {
+      line-height: 0;
+    }
+
     .nmorph-typography--truncate {
       overflow: hidden;
       white-space: nowrap;
@@ -668,7 +680,7 @@ const y = {
     }
 
   `;
-  for (const [a, i] of Object.entries(y))
+  for (const [a, i] of Object.entries(v))
     e += `
 .${a} {
   ${i()}