@nmorph/nmorph-ui-kit 2.2.9 → 2.2.12

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue.js

@@ -0,0 +1,30 @@
+import './NmorphOverlay.css';
+import t from "./NmorphOverlay.vue2.js";
+import { openBlock as n, createElementBlock as i, withModifiers as e, normalizeStyle as s, normalizeClass as m, createElementVNode as a, renderSlot as p } from "vue";
+/* empty css                   */
+import c from "../../../_virtual/_plugin-vue_export-helper.js";
+function d(l, r, f, o, _, v) {
+  return n(), i(
+    "div",
+    {
+      class: m(o.modifiers),
+      style: s({ "--nmorph-overlay-z-index": o.zIndex }),
+      onClick: e(o.clickHandler, ["stop"])
+    },
+    [
+      a("div", {
+        class: "nmorph-overlay__slot",
+        onClick: r[0] || (r[0] = e(() => {
+        }, ["stop"]))
+      }, [
+        p(l.$slots, "default")
+      ])
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const x = /* @__PURE__ */ c(t, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
+export {
+  x as default
+};

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue2.js

@@ -0,0 +1,30 @@
+import './NmorphOverlay.css';
+import { defineComponent as d, computed as t } from "vue";
+import { useModifiers as m } from "../../../utils/create-modifiers.js";
+import { useZIndex as c } from "../../../hooks/use-z-index.js";
+const h = /* @__PURE__ */ d({
+  __name: "NmorphOverlay",
+  props: {
+    show: { type: Boolean, required: !0 },
+    transparent: { type: Boolean, required: !1, default: !1 },
+    zIndex: { type: Number, required: !1 }
+  },
+  emits: ["on-outside-click"],
+  setup(n, { expose: s, emit: i }) {
+    s();
+    const e = n, p = c(
+      t(() => e.show),
+      () => e.zIndex
+    ), a = t(
+      () => m({
+        "nmorph-overlay": [`${e.show && "show"}`, `${e.transparent && "transparent"}`]
+      })
+    ), u = () => {
+      r("on-outside-click");
+    }, r = i, o = { props: e, zIndex: p, modifiers: a, clickHandler: u, emit: r };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+  }
+});
+export {
+  h as default
+};

package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.css

@@ -0,0 +1 @@
+.nmorph-notification-provider{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__notification{width:fit-content;height:fit-content;margin:1rem;pointer-events:all;transition:transform .5s ease,opacity .5s ease-in-out}.nmorph-notification-provider .nmorph-notification-provider__list{display:flex;flex-direction:column;width:fit-content;max-width:100vw;position:fixed;pointer-events:none}.nmorph-notification-provider .nmorph-notification-move{transition:transform .5s ease}.nmorph-notification-provider .nmorph-notification-provider__list--top-left{top:0;left:0;align-items:flex-start}.nmorph-notification-provider .nmorph-notification-provider__list--top-right{top:0;right:0;align-items:flex-end}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left{bottom:0;left:0;align-items:flex-start}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right{right:0;bottom:0;align-items:flex-end}.nmorph-notification-provider .nmorph-notification-provider__list--top-center{top:0;left:50%;align-items:center;transform:translate(-50%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center{bottom:0;left:50%;align-items:center;transform:translate(-50%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-leave-active{transition:transform .5s ease,opacity .5s ease-in-out}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-enter-from,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-enter-from{transform:translate(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-enter-from,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-enter-from{transform:translate(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-enter-from{transform:translateY(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-enter-from{transform:translateY(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-leave-to,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-leave-to{transform:translate(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-leave-to,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-leave-to{transform:translate(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-leave-to{transform:translateY(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-leave-to{transform:translateY(100%)}.nmorph-notification-provider .nmorph-notification-enter-from{opacity:0}.nmorph-notification-provider .nmorph-notification-enter-to{transform:translate(0);opacity:1}.nmorph-notification-provider .nmorph-notification-leave-active{overflow:hidden}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon{--color: var(--nmorph-text-color);display:flex;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--large{--width: 32px;--height: 32px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon__content{display:flex;align-items:center;justify-content:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);overflow:hidden}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__close .nmorph-icon,.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__content,.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__content-title{--color: var(--nmorph-white-color)}.nmorph-notification-provider .nmorph-notification-leave-active.nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-success-color)}.nmorph-notification-provider .nmorph-notification-leave-active.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-error-color)}.nmorph-notification-provider .nmorph-notification-leave-active.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-warn-color)}.nmorph-notification-provider .nmorph-notification-leave-active.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-info-color)}.nmorph-notification-provider .nmorph-notification-leave-active svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-notification-provider .nmorph-notification-leave-active path{stroke:var(--color)}.nmorph-notification-provider .nmorph-notification-leave-to{opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-provider__notification--closing,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-provider__notification--closing{position:absolute;transform:translate(-100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-provider__notification--closing,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-provider__notification--closing{position:absolute;transform:translate(100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-provider__notification--closing{position:absolute;transform:translateY(-100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-provider__notification--closing{position:absolute;transform:translateY(100%);opacity:0;pointer-events:none}

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

@@ -0,0 +1,56 @@
+import './NmorphNotificationProvider.css';
+import c from "./NmorphNotificationProvider.vue2.js";
+import { openBlock as i, createElementBlock as n, normalizeStyle as a, Fragment as t, renderList as l, createBlock as s, TransitionGroup as d, normalizeClass as m, withCtx as p, mergeProps as f } from "vue";
+/* empty css                                */
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+function h(v, u, y, o, k, x) {
+  return i(), n(
+    "div",
+    {
+      class: "nmorph-notification-provider",
+      style: a({ zIndex: o.zIndex })
+    },
+    [
+      (i(!0), n(
+        t,
+        null,
+        l(o.notificationGroups, (e) => (i(), s(d, {
+          key: e.placement,
+          name: "nmorph-notification",
+          tag: "div",
+          class: m(`nmorph-notification-provider__list nmorph-notification-provider__list--${e.placement}`)
+        }, {
+          default: p(() => [
+            (i(!0), n(
+              t,
+              null,
+              l(e.notifications, (r) => (i(), s(o.NmorphAlert, f({
+                key: r.id,
+                style: { width: r.width },
+                class: [
+                  "nmorph-notification-provider__notification",
+                  o.closingIds.includes(r.id) && "nmorph-notification-provider__notification--closing"
+                ],
+                ref_for: !0
+              }, r, {
+                onClose: () => o.closeHandler(r.id)
+              }), null, 16, ["style", "class", "onClose"]))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ]),
+          _: 2
+          /* DYNAMIC */
+        }, 1032, ["class"]))),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ],
+    4
+    /* STYLE */
+  );
+}
+const w = /* @__PURE__ */ _(c, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue"]]);
+export {
+  w as default
+};

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

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

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

@@ -0,0 +1,4 @@
+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 || {});
+export {
+  r as NmorphNotificationPlacement
+};