@kyvg/vue3-notification - npm Package Compare versions

Comparing version 2.9.1 to 3.0.0

dist/index.es.js

@@ -1,31 +0,32 @@
-import { defineComponent as y, openBlock as a, createBlock as g, TransitionGroup as x, withCtx as $, renderSlot as T, createElementBlock as p, normalizeStyle as b, resolveDynamicComponent as k, Fragment as _, renderList as B, normalizeClass as D, createElementVNode as N, createCommentVNode as H } from "vue";
-function M(t) {
-  return { all: t = t || /* @__PURE__ */ new Map(), on: function(e, i) {
-    var s = t.get(e);
-    s ? s.push(i) : t.set(e, [i]);
-  }, off: function(e, i) {
-    var s = t.get(e);
-    s && (i ? s.splice(s.indexOf(i) >>> 0, 1) : t.set(e, []));
-  }, emit: function(e, i) {
-    var s = t.get(e);
-    s && s.slice().map(function(n) {
-      n(i);
-    }), (s = t.get("*")) && s.slice().map(function(n) {
-      n(e, i);
+(function(){var o;"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.nonce=(o=document.head.querySelector("meta[property=csp-nonce]"))==null?void 0:o.content,e.appendChild(document.createTextNode(".vue-notification-group{display:block;position:fixed;z-index:5000}.vue-notification-wrapper{display:block;overflow:hidden;width:100%;margin:0;padding:0}.notification-title{font-weight:600}.vue-notification-template{display:block;box-sizing:border-box;background:white;text-align:left}.vue-notification{display:block;box-sizing:border-box;text-align:left;font-size:12px;padding:10px;margin:0 5px 5px;color:#fff;background:#44A4FC;border-left:5px solid #187FE7}.vue-notification.warn{background:#ffb648;border-left-color:#f48a06}.vue-notification.error{background:#E54D42;border-left-color:#b82e24}.vue-notification.success{background:#68CD86;border-left-color:#42a85f}.vn-fade-enter-active,.vn-fade-leave-active,.vn-fade-move{transition:all .5s}.vn-fade-enter-from,.vn-fade-leave-to{opacity:0}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+import { defineComponent as $, openBlock as d, createBlock as w, TransitionGroup as Y, withCtx as A, renderSlot as b, ref as T, computed as h, onMounted as at, createElementBlock as _, normalizeStyle as B, resolveDynamicComponent as rt, Fragment as lt, renderList as ct, normalizeClass as H, createElementVNode as R, createCommentVNode as ut } from "vue";
+function ft(e) {
+  return { all: e = e || /* @__PURE__ */ new Map(), on: function(o, n) {
+    var i = e.get(o);
+    i ? i.push(n) : e.set(o, [n]);
+  }, off: function(o, n) {
+    var i = e.get(o);
+    i && (n ? i.splice(i.indexOf(n) >>> 0, 1) : e.set(o, []));
+  }, emit: function(o, n) {
+    var i = e.get(o);
+    i && i.slice().map(function(r) {
+      r(n);
+    }), (i = e.get("*")) && i.slice().map(function(r) {
+      r(o, n);
     });
   } };
 }
-const d = M(), C = /* @__PURE__ */ new Map(), w = {
+const x = ft(), G = /* @__PURE__ */ new Map(), S = {
   x: ["left", "center", "right"],
   y: ["top", "bottom"]
-}, R = ((t) => () => t++)(0), V = (t) => typeof t != "string" ? [] : t.split(/\s+/gi).filter((e) => e), W = (t) => {
-  typeof t == "string" && (t = V(t));
-  let e = null, i = null;
-  return t.forEach((s) => {
-    w.y.indexOf(s) !== -1 && (i = s), w.x.indexOf(s) !== -1 && (e = s);
-  }), { x: e, y: i };
+}, pt = ((e) => () => e++)(0), dt = (e) => typeof e != "string" ? [] : e.split(/\s+/gi).filter((o) => o), mt = (e) => {
+  typeof e == "string" && (e = dt(e));
+  let o = null, n = null;
+  return e.forEach((i) => {
+    S.y.indexOf(i) !== -1 && (n = i), S.x.indexOf(i) !== -1 && (o = i);
+  }), { x: o, y: n };
 };
-class Y {
-  constructor(e, i, s) {
-    this.remaining = i, this.callback = e, this.notifyItem = s, this.resume();
+class yt {
+  constructor(o, n, i) {
+    this.remaining = n, this.callback = o, this.notifyItem = i, this.resume();
   }
@@ -39,8 +40,8 @@ pause() {
 }
-const m = {
+const E = {
   position: ["top", "right"],
   cssAnimation: "vn-fade",
   velocityAnimation: {
-    enter: (t) => ({
-      height: [t.clientHeight, 0],
+    enter: (e) => ({
+      height: [e.clientHeight, 0],
       opacity: [1, 0]
@@ -53,62 +54,51 @@ }),
   }
-}, j = y({
-  name: "velocity-group",
-  emits: ["after-leave", "leave", "enter"],
-  methods: {
-    enter(t, e) {
-      this.$emit("enter", t, e);
-    },
-    leave(t, e) {
-      this.$emit("leave", t, e);
-    },
-    afterLeave() {
-      this.$emit("after-leave");
-    }
+}, ht = /* @__PURE__ */ $({
+  __name: "VelocityGroup",
+  emits: ["enter", "leave", "after-leave"],
+  setup(e, { emit: o }) {
+    const n = (l, u) => {
+      o("enter", l, u);
+    }, i = (l, u) => {
+      o("leave", l, u);
+    }, r = () => {
+      o("after-leave");
+    };
+    return (l, u) => (d(), w(Y, {
+      tag: "span",
+      css: !1,
+      onEnter: n,
+      onLeave: i,
+      onAfterLeave: r
+    }, {
+      default: A(() => [
+        b(l.$slots, "default")
+      ]),
+      _: 3
+    }));
   }
-}), v = (t, e) => {
-  const i = t.__vccOpts || t;
-  for (const [s, n] of e)
-    i[s] = n;
-  return i;
-};
-function G(t, e, i, s, n, c) {
-  return a(), g(x, {
-    tag: "span",
-    css: !1,
-    onEnter: t.enter,
-    onLeave: t.leave,
-    onAfterLeave: t.afterLeave
-  }, {
-    default: $(() => [
-      T(t.$slots, "default")
-    ]),
-    _: 3
-  }, 8, ["onEnter", "onLeave", "onAfterLeave"]);
-}
-const z = /* @__PURE__ */ v(j, [["render", G]]), F = y({
-  name: "css-group",
+}), gt = /* @__PURE__ */ $({
   inheritAttrs: !1,
+  __name: "CssGroup",
   props: {
-    name: { type: String, required: !0 }
+    name: {}
+  },
+  setup(e) {
+    return (o, n) => (d(), w(Y, {
+      tag: "span",
+      name: o.name
+    }, {
+      default: A(() => [
+        b(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["name"]));
   }
-});
-function P(t, e, i, s, n, c) {
-  return a(), g(x, {
-    tag: "span",
-    name: t.name
-  }, {
-    default: $(() => [
-      T(t.$slots, "default")
-    ]),
-    _: 3
-  }, 8, ["name"]);
-}
-const q = /* @__PURE__ */ v(F, [["render", P]]), h = "[-+]?[0-9]*.?[0-9]+", L = [
+}), D = "[-+]?[0-9]*.?[0-9]+", V = [
   {
     name: "px",
-    regexp: new RegExp(`^${h}px$`)
+    regexp: new RegExp(`^${D}px$`)
   },
   {
     name: "%",
-    regexp: new RegExp(`^${h}%$`)
+    regexp: new RegExp(`^${D}%$`)
   },
@@ -121,16 +111,16 @@ /**
     name: "px",
-    regexp: new RegExp(`^${h}$`)
+    regexp: new RegExp(`^${D}$`)
   }
-], J = (t) => {
-  if (t === "auto")
+], vt = (e) => {
+  if (e === "auto")
     return {
-      type: t,
+      type: e,
       value: 0
     };
-  for (let e = 0; e < L.length; e++) {
-    const i = L[e];
-    if (i.regexp.test(t))
+  for (let o = 0; o < V.length; o++) {
+    const n = V[o];
+    if (n.regexp.test(e))
       return {
-        type: i.name,
-        value: parseFloat(t)
+        type: n.name,
+        value: parseFloat(e)
       };
@@ -140,276 +130,176 @@ }
     type: "",
-    value: t
+    value: e
   };
-}, K = (t) => {
-  switch (typeof t) {
+}, _t = (e) => {
+  switch (typeof e) {
     case "number":
-      return { type: "px", value: t };
+      return { type: "px", value: e };
     case "string":
-      return J(t);
+      return vt(e);
     default:
-      return { type: "", value: t };
+      return { type: "", value: e };
   }
-}, f = {
-  IDLE: 0,
-  DESTROYED: 2
-}, Q = y({
-  name: "notifications",
-  components: {
-    VelocityGroup: z,
-    CssGroup: q
-  },
+}, xt = ["data-id"], Tt = ["onClick"], Et = ["innerHTML"], Dt = ["innerHTML"], $t = /* @__PURE__ */ $({
+  __name: "Notifications",
   props: {
-    group: {
-      type: String,
-      default: ""
-    },
-    width: {
-      type: [Number, String],
-      default: 300
-    },
-    reverse: {
-      type: Boolean,
-      default: !1
-    },
-    position: {
-      type: [String, Array],
-      default: m.position
-    },
-    classes: {
-      type: String,
-      default: "vue-notification"
-    },
-    animationType: {
-      type: String,
-      default: "css"
-    },
-    animation: {
-      type: Object,
-      default: m.velocityAnimation
-    },
-    animationName: {
-      type: String,
-      default: m.cssAnimation
-    },
-    speed: {
-      type: Number,
-      default: 300
-    },
-    /* Todo */
-    cooldown: {
-      type: Number,
-      default: 0
-    },
-    duration: {
-      type: Number,
-      default: 3e3
-    },
-    delay: {
-      type: Number,
-      default: 0
-    },
-    max: {
-      type: Number,
-      default: 1 / 0
-    },
-    ignoreDuplicates: {
-      type: Boolean,
-      default: !1
-    },
-    closeOnClick: {
-      type: Boolean,
-      default: !0
-    },
-    pauseOnHover: {
-      type: Boolean,
-      default: !1
-    }
+    group: { default: "" },
+    width: { default: 300 },
+    reverse: { type: Boolean, default: !1 },
+    position: { default: E.position },
+    classes: { default: "vue-notification" },
+    animationType: { default: "css" },
+    animation: { default: E.velocityAnimation },
+    animationName: { default: E.cssAnimation },
+    speed: { default: 300 },
+    duration: { default: 3e3 },
+    delay: { default: 0 },
+    max: { default: 1 / 0 },
+    ignoreDuplicates: { type: Boolean, default: !1 },
+    closeOnClick: { type: Boolean, default: !0 },
+    pauseOnHover: { type: Boolean, default: !1 }
   },
   emits: ["click", "destroy", "start"],
-  data() {
-    return {
-      list: [],
-      velocity: C.get("velocity"),
-      timerControl: null
-    };
-  },
-  computed: {
-    actualWidth() {
-      return K(this.width);
-    },
-    isVA() {
-      return this.animationType === "velocity";
-    },
-    componentName() {
-      return this.isVA ? "velocity-group" : "css-group";
-    },
-    styles() {
-      const { x: t, y: e } = W(this.position), i = this.actualWidth.value, s = this.actualWidth.type, n = {
-        width: i + s
+  setup(e, { emit: o }) {
+    const n = e, i = {
+      IDLE: 0,
+      DESTROYED: 2
+    }, r = T([]), l = T(null), u = T(G.get("velocity")), g = h(() => n.animationType === "velocity"), j = h(() => g.value ? ht : gt), f = h(() => r.value.filter((t) => t.state !== i.DESTROYED)), L = h(() => _t(n.width)), O = h(() => {
+      const { x: t, y: a } = mt(n.position), s = L.value.value, c = L.value.type, y = {
+        width: s + c
       };
-      return e && (n[e] = "0px"), t && (t === "center" ? n.left = `calc(50% - ${+i / 2}${s})` : n[t] = "0px"), n;
-    },
-    active() {
-      return this.list.filter((t) => t.state !== f.DESTROYED);
-    },
-    botToTop() {
-      return this.styles.hasOwnProperty("bottom");
-    }
-  },
-  mounted() {
-    d.on("add", this.addItem), d.on("close", this.closeItem);
-  },
-  methods: {
-    destroyIfNecessary(t) {
-      this.$emit("click", t), this.closeOnClick && this.destroy(t);
-    },
-    pauseTimeout() {
+      return a && (y[a] = "0px"), t && (t === "center" ? y.left = `calc(50% - ${+s / 2}${c})` : y[t] = "0px"), y;
+    }), C = h(() => "bottom" in O.value), z = (t) => {
+      o("click", t), n.closeOnClick && m(t);
+    }, F = () => {
       var t;
-      this.pauseOnHover && ((t = this.timerControl) == null || t.pause());
-    },
-    resumeTimeout() {
+      n.pauseOnHover && ((t = l.value) == null || t.pause());
+    }, W = () => {
       var t;
-      this.pauseOnHover && ((t = this.timerControl) == null || t.resume());
-    },
-    addItem(t = {}) {
-      if (t.group || (t.group = ""), t.data || (t.data = {}), this.group !== t.group)
+      n.pauseOnHover && ((t = l.value) == null || t.resume());
+    }, P = (t = {}) => {
+      if (t.group || (t.group = ""), t.data || (t.data = {}), n.group !== t.group)
         return;
       if (t.clean || t.clear) {
-        this.destroyAll();
+        U();
         return;
       }
-      const e = typeof t.duration == "number" ? t.duration : this.duration, i = typeof t.speed == "number" ? t.speed : this.speed, s = typeof t.ignoreDuplicates == "boolean" ? t.ignoreDuplicates : this.ignoreDuplicates, { title: n, text: c, type: o, data: l, id: I } = t, r = {
-        id: I || R(),
-        title: n,
-        text: c,
-        type: o,
-        state: f.IDLE,
-        speed: i,
-        length: e + 2 * i,
-        data: l
+      const a = typeof t.duration == "number" ? t.duration : n.duration, s = typeof t.speed == "number" ? t.speed : n.speed, c = typeof t.ignoreDuplicates == "boolean" ? t.ignoreDuplicates : n.ignoreDuplicates, { title: y, text: tt, type: et, data: nt, id: ot } = t, p = {
+        id: ot || pt(),
+        title: y,
+        text: tt,
+        type: et,
+        state: i.IDLE,
+        speed: s,
+        length: a + 2 * s,
+        data: nt
       };
-      e >= 0 && (this.timerControl = new Y(() => this.destroy(r), r.length, r));
-      const O = this.reverse ? !this.botToTop : this.botToTop;
-      let u = -1;
-      const S = this.active.some((E) => E.title === t.title && E.text === t.text);
-      (!s || !S) && (O ? (this.list.push(r), this.$emit("start", r), this.active.length > this.max && (u = 0)) : (this.list.unshift(r), this.$emit("start", r), this.active.length > this.max && (u = this.active.length - 1)), u !== -1 && this.destroy(this.active[u]));
-    },
-    closeItem(t) {
-      this.destroyById(t);
-    },
-    notifyClass(t) {
-      return [
-        "vue-notification-template",
-        this.classes,
-        t.type || ""
-      ];
-    },
-    notifyWrapperStyle(t) {
-      return this.isVA ? void 0 : { transition: `all ${t.speed}ms` };
-    },
-    destroy(t) {
-      clearTimeout(t.timer), t.state = f.DESTROYED, this.clean(), this.$emit("destroy", t);
-    },
-    destroyById(t) {
-      const e = this.list.find((i) => i.id === t);
-      e && this.destroy(e);
-    },
-    destroyAll() {
-      this.active.forEach(this.destroy);
-    },
-    getAnimation(t, e) {
-      var s;
-      const i = (s = this.animation) == null ? void 0 : s[t];
-      return typeof i == "function" ? i.call(this, e) : i;
-    },
-    enter(t, e) {
-      if (!this.isVA)
+      a >= 0 && (l.value = new yt(() => m(p), p.length, p));
+      const it = n.reverse ? !C.value : C.value;
+      let v = -1;
+      const st = f.value.some((M) => M.title === t.title && M.text === t.text);
+      (!c || !st) && (it ? (r.value.push(p), o("start", p), f.value.length > n.max && (v = 0)) : (r.value.unshift(p), o("start", p), f.value.length > n.max && (v = f.value.length - 1)), v !== -1 && m(f.value[v]));
+    }, q = (t) => {
+      Q(t);
+    }, J = (t) => [
+      "vue-notification-template",
+      n.classes,
+      t.type || ""
+    ], K = (t) => g.value ? void 0 : { transition: `all ${t.speed}ms` }, m = (t) => {
+      clearTimeout(t.timer), t.state = i.DESTROYED, N(), o("destroy", t);
+    }, Q = (t) => {
+      const a = r.value.find((s) => s.id === t);
+      a && m(a);
+    }, U = () => {
+      f.value.forEach(m);
+    }, I = (t, a) => {
+      var c;
+      const s = (c = n.animation) == null ? void 0 : c[t];
+      return typeof s == "function" ? s(a) : s;
+    }, X = (t, a) => {
+      if (!g.value)
         return;
-      const i = this.getAnimation("enter", t);
-      this.velocity(t, i, {
-        duration: this.speed,
-        complete: e
+      const s = I("enter", t);
+      u.value(t, s, {
+        duration: n.speed,
+        complete: a
       });
-    },
-    leave(t, e) {
-      if (!this.isVA)
+    }, Z = (t, a) => {
+      if (!g.value)
         return;
-      const i = this.getAnimation("leave", t);
-      this.velocity(t, i, {
-        duration: this.speed,
-        complete: e
+      const s = I("leave", t);
+      u.value(t, s, {
+        duration: n.speed,
+        complete: a
       });
-    },
-    clean() {
-      this.list = this.list.filter((t) => t.state !== f.DESTROYED);
+    };
+    function N() {
+      r.value = r.value.filter((t) => t.state !== i.DESTROYED);
     }
+    return at(() => {
+      x.on("add", P), x.on("close", q);
+    }), (t, a) => (d(), _("div", {
+      class: "vue-notification-group",
+      style: B(O.value)
+    }, [
+      (d(), w(rt(j.value), {
+        name: t.animationName,
+        onEnter: X,
+        onLeave: Z,
+        onAfterLeave: N
+      }, {
+        default: A(() => [
+          (d(!0), _(lt, null, ct(f.value, (s) => (d(), _("div", {
+            key: s.id,
+            class: "vue-notification-wrapper",
+            style: B(K(s)),
+            "data-id": s.id,
+            onMouseenter: F,
+            onMouseleave: W
+          }, [
+            b(t.$slots, "body", {
+              class: H([t.classes, s.type]),
+              item: s,
+              close: () => m(s)
+            }, () => [
+              R("div", {
+                class: H(J(s)),
+                onClick: (c) => z(s)
+              }, [
+                s.title ? (d(), _("div", {
+                  key: 0,
+                  class: "notification-title",
+                  innerHTML: s.title
+                }, null, 8, Et)) : ut("", !0),
+                R("div", {
+                  class: "notification-content",
+                  innerHTML: s.text
+                }, null, 8, Dt)
+              ], 10, Tt)
+            ])
+          ], 44, xt))), 128))
+        ]),
+        _: 3
+      }, 40, ["name"]))
+    ], 4));
   }
 });
-const U = ["data-id"], X = ["onClick"], Z = ["innerHTML"], tt = ["innerHTML"];
-function et(t, e, i, s, n, c) {
-  return a(), p("div", {
-    class: "vue-notification-group",
-    style: b(t.styles)
-  }, [
-    (a(), g(k(t.componentName), {
-      name: t.animationName,
-      onEnter: t.enter,
-      onLeave: t.leave,
-      onAfterLeave: t.clean
-    }, {
-      default: $(() => [
-        (a(!0), p(_, null, B(t.active, (o) => (a(), p("div", {
-          key: o.id,
-          class: "vue-notification-wrapper",
-          style: b(t.notifyWrapperStyle(o)),
-          "data-id": o.id,
-          onMouseenter: e[0] || (e[0] = (...l) => t.pauseTimeout && t.pauseTimeout(...l)),
-          onMouseleave: e[1] || (e[1] = (...l) => t.resumeTimeout && t.resumeTimeout(...l))
-        }, [
-          T(t.$slots, "body", {
-            class: D([t.classes, o.type]),
-            item: o,
-            close: () => t.destroy(o)
-          }, () => [
-            N("div", {
-              class: D(t.notifyClass(o)),
-              onClick: (l) => t.destroyIfNecessary(o)
-            }, [
-              o.title ? (a(), p("div", {
-                key: 0,
-                class: "notification-title",
-                innerHTML: o.title
-              }, null, 8, Z)) : H("", !0),
-              N("div", {
-                class: "notification-content",
-                innerHTML: o.text
-              }, null, 8, tt)
-            ], 10, X)
-          ])
-        ], 44, U))), 128))
-      ]),
-      _: 3
-    }, 40, ["name", "onEnter", "onLeave", "onAfterLeave"]))
-  ], 4);
-}
-const it = /* @__PURE__ */ v(Q, [["render", et]]), A = (t) => {
-  typeof t == "string" && (t = { title: "", text: t }), typeof t == "object" && d.emit("add", t);
+const k = (e) => {
+  typeof e == "string" && (e = { title: "", text: e }), typeof e == "object" && x.emit("add", e);
 };
-A.close = (t) => {
-  d.emit("close", t);
+k.close = (e) => {
+  x.emit("close", e);
 };
-const rt = () => ({ notify: A });
-function st(t, e = {}) {
-  Object.entries(e).forEach((s) => C.set(...s));
-  const i = e.name || "notify";
-  t.config.globalProperties["$" + i] = A, t.component(e.componentName || "Notifications", it);
+const kt = () => ({ notify: k });
+function wt(e, o = {}) {
+  Object.entries(o).forEach((i) => G.set(...i));
+  const n = o.name || "notify";
+  e.config.globalProperties["$" + n] = k, e.component(o.componentName || "Notifications", $t);
 }
-const at = {
-  install: st
+const Lt = {
+  install: wt
 };
 export {
-  at as default,
-  A as notify,
-  rt as useNotification
+  Lt as default,
+  k as notify,
+  kt as useNotification
 };
-(function(){var o;"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.nonce=(o=document.head.querySelector("meta[property=csp-nonce]"))==null?void 0:o.content,e.appendChild(document.createTextNode(".vue-notification-group{display:block;position:fixed;z-index:5000}.vue-notification-wrapper{display:block;overflow:hidden;width:100%;margin:0;padding:0}.notification-title{font-weight:600}.vue-notification-template{display:block;box-sizing:border-box;background:white;text-align:left}.vue-notification{display:block;box-sizing:border-box;text-align:left;font-size:12px;padding:10px;margin:0 5px 5px;color:#fff;background:#44A4FC;border-left:5px solid #187FE7}.vue-notification.warn{background:#ffb648;border-left-color:#f48a06}.vue-notification.error{background:#E54D42;border-left-color:#b82e24}.vue-notification.success{background:#68CD86;border-left-color:#42a85f}.vn-fade-enter-active,.vn-fade-leave-active,.vn-fade-move{transition:all .5s}.vn-fade-enter-from,.vn-fade-leave-to{opacity:0}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();

dist/index.umd.js

@@ -1,2 +0,2 @@
-(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a.test={},a.Vue))})(this,function(a,n){"use strict";function b(t){return{all:t=t||new Map,on:function(e,i){var o=t.get(e);o?o.push(i):t.set(e,[i])},off:function(e,i){var o=t.get(e);o&&(i?o.splice(o.indexOf(i)>>>0,1):t.set(e,[]))},emit:function(e,i){var o=t.get(e);o&&o.slice().map(function(s){s(i)}),(o=t.get("*"))&&o.slice().map(function(s){s(e,i)})}}}const p=b(),T=new Map,$={x:["left","center","right"],y:["top","bottom"]},A=(t=>()=>t++)(0),C=t=>typeof t!="string"?[]:t.split(/\s+/gi).filter(e=>e),D=t=>{typeof t=="string"&&(t=C(t));let e=null,i=null;return t.forEach(o=>{$.y.indexOf(o)!==-1&&(i=o),$.x.indexOf(o)!==-1&&(e=o)}),{x:e,y:i}};class N{constructor(e,i,o){this.remaining=i,this.callback=e,this.notifyItem=o,this.resume()}pause(){clearTimeout(this.notifyItem.timer),this.remaining-=Date.now()-this.start}resume(){this.start=Date.now(),clearTimeout(this.notifyItem.timer),this.notifyItem.timer=setTimeout(this.callback,this.remaining)}}const h={position:["top","right"],cssAnimation:"vn-fade",velocityAnimation:{enter:t=>({height:[t.clientHeight,0],opacity:[1,0]}),leave:{height:0,opacity:[0,1]}}},S=n.defineComponent({name:"velocity-group",emits:["after-leave","leave","enter"],methods:{enter(t,e){this.$emit("enter",t,e)},leave(t,e){this.$emit("leave",t,e)},afterLeave(){this.$emit("after-leave")}}}),y=(t,e)=>{const i=t.__vccOpts||t;for(const[o,s]of e)i[o]=s;return i};function B(t,e,i,o,s,u){return n.openBlock(),n.createBlock(n.TransitionGroup,{tag:"span",css:!1,onEnter:t.enter,onLeave:t.leave,onAfterLeave:t.afterLeave},{default:n.withCtx(()=>[n.renderSlot(t.$slots,"default")]),_:3},8,["onEnter","onLeave","onAfterLeave"])}const w=y(S,[["render",B]]),x=n.defineComponent({name:"css-group",inheritAttrs:!1,props:{name:{type:String,required:!0}}});function L(t,e,i,o,s,u){return n.openBlock(),n.createBlock(n.TransitionGroup,{tag:"span",name:t.name},{default:n.withCtx(()=>[n.renderSlot(t.$slots,"default")]),_:3},8,["name"])}const O=y(x,[["render",L]]),g="[-+]?[0-9]*.?[0-9]+",E=[{name:"px",regexp:new RegExp(`^${g}px$`)},{name:"%",regexp:new RegExp(`^${g}%$`)},{name:"px",regexp:new RegExp(`^${g}$`)}],I=t=>{if(t==="auto")return{type:t,value:0};for(let e=0;e<E.length;e++){const i=E[e];if(i.regexp.test(t))return{type:i.name,value:parseFloat(t)}}return{type:"",value:t}},_=t=>{switch(typeof t){case"number":return{type:"px",value:t};case"string":return I(t);default:return{type:"",value:t}}},f={IDLE:0,DESTROYED:2},M=n.defineComponent({name:"notifications",components:{VelocityGroup:w,CssGroup:O},props:{group:{type:String,default:""},width:{type:[Number,String],default:300},reverse:{type:Boolean,default:!1},position:{type:[String,Array],default:h.position},classes:{type:String,default:"vue-notification"},animationType:{type:String,default:"css"},animation:{type:Object,default:h.velocityAnimation},animationName:{type:String,default:h.cssAnimation},speed:{type:Number,default:300},cooldown:{type:Number,default:0},duration:{type:Number,default:3e3},delay:{type:Number,default:0},max:{type:Number,default:1/0},ignoreDuplicates:{type:Boolean,default:!1},closeOnClick:{type:Boolean,default:!0},pauseOnHover:{type:Boolean,default:!1}},emits:["click","destroy","start"],data(){return{list:[],velocity:T.get("velocity"),timerControl:null}},computed:{actualWidth(){return _(this.width)},isVA(){return this.animationType==="velocity"},componentName(){return this.isVA?"velocity-group":"css-group"},styles(){const{x:t,y:e}=D(this.position),i=this.actualWidth.value,o=this.actualWidth.type,s={width:i+o};return e&&(s[e]="0px"),t&&(t==="center"?s.left=`calc(50% - ${+i/2}${o})`:s[t]="0px"),s},active(){return this.list.filter(t=>t.state!==f.DESTROYED)},botToTop(){return this.styles.hasOwnProperty("bottom")}},mounted(){p.on("add",this.addItem),p.on("close",this.closeItem)},methods:{destroyIfNecessary(t){this.$emit("click",t),this.closeOnClick&&this.destroy(t)},pauseTimeout(){var t;this.pauseOnHover&&((t=this.timerControl)==null||t.pause())},resumeTimeout(){var t;this.pauseOnHover&&((t=this.timerControl)==null||t.resume())},addItem(t={}){if(t.group||(t.group=""),t.data||(t.data={}),this.group!==t.group)return;if(t.clean||t.clear){this.destroyAll();return}const e=typeof t.duration=="number"?t.duration:this.duration,i=typeof t.speed=="number"?t.speed:this.speed,o=typeof t.ignoreDuplicates=="boolean"?t.ignoreDuplicates:this.ignoreDuplicates,{title:s,text:u,type:r,data:c,id:q}=t,l={id:q||A(),title:s,text:u,type:r,state:f.IDLE,speed:i,length:e+2*i,data:c};e>=0&&(this.timerControl=new N(()=>this.destroy(l),l.length,l));const F=this.reverse?!this.botToTop:this.botToTop;let m=-1;const v=this.active.some(k=>k.title===t.title&&k.text===t.text);(!o||!v)&&(F?(this.list.push(l),this.$emit("start",l),this.active.length>this.max&&(m=0)):(this.list.unshift(l),this.$emit("start",l),this.active.length>this.max&&(m=this.active.length-1)),m!==-1&&this.destroy(this.active[m]))},closeItem(t){this.destroyById(t)},notifyClass(t){return["vue-notification-template",this.classes,t.type||""]},notifyWrapperStyle(t){return this.isVA?void 0:{transition:`all ${t.speed}ms`}},destroy(t){clearTimeout(t.timer),t.state=f.DESTROYED,this.clean(),this.$emit("destroy",t)},destroyById(t){const e=this.list.find(i=>i.id===t);e&&this.destroy(e)},destroyAll(){this.active.forEach(this.destroy)},getAnimation(t,e){var o;const i=(o=this.animation)==null?void 0:o[t];return typeof i=="function"?i.call(this,e):i},enter(t,e){if(!this.isVA)return;const i=this.getAnimation("enter",t);this.velocity(t,i,{duration:this.speed,complete:e})},leave(t,e){if(!this.isVA)return;const i=this.getAnimation("leave",t);this.velocity(t,i,{duration:this.speed,complete:e})},clean(){this.list=this.list.filter(t=>t.state!==f.DESTROYED)}}}),J="",V=["data-id"],H=["onClick"],R=["innerHTML"],j=["innerHTML"];function W(t,e,i,o,s,u){return n.openBlock(),n.createElementBlock("div",{class:"vue-notification-group",style:n.normalizeStyle(t.styles)},[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(t.componentName),{name:t.animationName,onEnter:t.enter,onLeave:t.leave,onAfterLeave:t.clean},{default:n.withCtx(()=>[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(t.active,r=>(n.openBlock(),n.createElementBlock("div",{key:r.id,class:"vue-notification-wrapper",style:n.normalizeStyle(t.notifyWrapperStyle(r)),"data-id":r.id,onMouseenter:e[0]||(e[0]=(...c)=>t.pauseTimeout&&t.pauseTimeout(...c)),onMouseleave:e[1]||(e[1]=(...c)=>t.resumeTimeout&&t.resumeTimeout(...c))},[n.renderSlot(t.$slots,"body",{class:n.normalizeClass([t.classes,r.type]),item:r,close:()=>t.destroy(r)},()=>[n.createElementVNode("div",{class:n.normalizeClass(t.notifyClass(r)),onClick:c=>t.destroyIfNecessary(r)},[r.title?(n.openBlock(),n.createElementBlock("div",{key:0,class:"notification-title",innerHTML:r.title},null,8,R)):n.createCommentVNode("",!0),n.createElementVNode("div",{class:"notification-content",innerHTML:r.text},null,8,j)],10,H)])],44,V))),128))]),_:3},40,["name","onEnter","onLeave","onAfterLeave"]))],4)}const z=y(M,[["render",W]]),d=t=>{typeof t=="string"&&(t={title:"",text:t}),typeof t=="object"&&p.emit("add",t)};d.close=t=>{p.emit("close",t)};const G=()=>({notify:d});function Y(t,e={}){Object.entries(e).forEach(o=>T.set(...o));const i=e.name||"notify";t.config.globalProperties["$"+i]=d,t.component(e.componentName||"Notifications",z)}const P={install:Y};a.default=P,a.notify=d,a.useNotification=G,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
-(function(){var o;"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.nonce=(o=document.head.querySelector("meta[property=csp-nonce]"))==null?void 0:o.content,e.appendChild(document.createTextNode(".vue-notification-group{display:block;position:fixed;z-index:5000}.vue-notification-wrapper{display:block;overflow:hidden;width:100%;margin:0;padding:0}.notification-title{font-weight:600}.vue-notification-template{display:block;box-sizing:border-box;background:white;text-align:left}.vue-notification{display:block;box-sizing:border-box;text-align:left;font-size:12px;padding:10px;margin:0 5px 5px;color:#fff;background:#44A4FC;border-left:5px solid #187FE7}.vue-notification.warn{background:#ffb648;border-left-color:#f48a06}.vue-notification.error{background:#E54D42;border-left-color:#b82e24}.vue-notification.success{background:#68CD86;border-left-color:#42a85f}.vn-fade-enter-active,.vn-fade-leave-active,.vn-fade-move{transition:all .5s}.vn-fade-enter-from,.vn-fade-leave-to{opacity:0}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+(function(){var o;"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.nonce=(o=document.head.querySelector("meta[property=csp-nonce]"))==null?void 0:o.content,e.appendChild(document.createTextNode(".vue-notification-group{display:block;position:fixed;z-index:5000}.vue-notification-wrapper{display:block;overflow:hidden;width:100%;margin:0;padding:0}.notification-title{font-weight:600}.vue-notification-template{display:block;box-sizing:border-box;background:white;text-align:left}.vue-notification{display:block;box-sizing:border-box;text-align:left;font-size:12px;padding:10px;margin:0 5px 5px;color:#fff;background:#44A4FC;border-left:5px solid #187FE7}.vue-notification.warn{background:#ffb648;border-left-color:#f48a06}.vue-notification.error{background:#E54D42;border-left-color:#b82e24}.vue-notification.success{background:#68CD86;border-left-color:#42a85f}.vn-fade-enter-active,.vn-fade-leave-active,.vn-fade-move{transition:all .5s}.vn-fade-enter-from,.vn-fade-leave-to{opacity:0}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.test={},c.Vue))})(this,function(c,e){"use strict";function S(n){return{all:n=n||new Map,on:function(i,o){var s=n.get(i);s?s.push(o):n.set(i,[o])},off:function(i,o){var s=n.get(i);s&&(o?s.splice(s.indexOf(o)>>>0,1):n.set(i,[]))},emit:function(i,o){var s=n.get(i);s&&s.slice().map(function(l){l(o)}),(s=n.get("*"))&&s.slice().map(function(l){l(i,o)})}}}const g=S(),D=new Map,B={x:["left","center","right"],y:["top","bottom"]},I=(n=>()=>n++)(0),N=n=>typeof n!="string"?[]:n.split(/\s+/gi).filter(i=>i),M=n=>{typeof n=="string"&&(n=N(n));let i=null,o=null;return n.forEach(s=>{B.y.indexOf(s)!==-1&&(o=s),B.x.indexOf(s)!==-1&&(i=s)}),{x:i,y:o}};class H{constructor(i,o,s){this.remaining=o,this.callback=i,this.notifyItem=s,this.resume()}pause(){clearTimeout(this.notifyItem.timer),this.remaining-=Date.now()-this.start}resume(){this.start=Date.now(),clearTimeout(this.notifyItem.timer),this.notifyItem.timer=setTimeout(this.callback,this.remaining)}}const E={position:["top","right"],cssAnimation:"vn-fade",velocityAnimation:{enter:n=>({height:[n.clientHeight,0],opacity:[1,0]}),leave:{height:0,opacity:[0,1]}}},R=e.defineComponent({__name:"VelocityGroup",emits:["enter","leave","after-leave"],setup(n,{emit:i}){const o=(f,p)=>{i("enter",f,p)},s=(f,p)=>{i("leave",f,p)},l=()=>{i("after-leave")};return(f,p)=>(e.openBlock(),e.createBlock(e.TransitionGroup,{tag:"span",css:!1,onEnter:o,onLeave:s,onAfterLeave:l},{default:e.withCtx(()=>[e.renderSlot(f.$slots,"default")]),_:3}))}}),V=e.defineComponent({inheritAttrs:!1,__name:"CssGroup",props:{name:{}},setup(n){return(i,o)=>(e.openBlock(),e.createBlock(e.TransitionGroup,{tag:"span",name:i.name},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3},8,["name"]))}}),k="[-+]?[0-9]*.?[0-9]+",w=[{name:"px",regexp:new RegExp(`^${k}px$`)},{name:"%",regexp:new RegExp(`^${k}%$`)},{name:"px",regexp:new RegExp(`^${k}$`)}],j=n=>{if(n==="auto")return{type:n,value:0};for(let i=0;i<w.length;i++){const o=w[i];if(o.regexp.test(n))return{type:o.name,value:parseFloat(n)}}return{type:"",value:n}},z=n=>{switch(typeof n){case"number":return{type:"px",value:n};case"string":return j(n);default:return{type:"",value:n}}},G=["data-id"],Y=["onClick"],F=["innerHTML"],P=["innerHTML"],W=e.defineComponent({__name:"Notifications",props:{group:{default:""},width:{default:300},reverse:{type:Boolean,default:!1},position:{default:E.position},classes:{default:"vue-notification"},animationType:{default:"css"},animation:{default:E.velocityAnimation},animationName:{default:E.cssAnimation},speed:{default:300},duration:{default:3e3},delay:{default:0},max:{default:1/0},ignoreDuplicates:{type:Boolean,default:!1},closeOnClick:{type:Boolean,default:!0},pauseOnHover:{type:Boolean,default:!1}},emits:["click","destroy","start"],setup(n,{emit:i}){const o=n,s={IDLE:0,DESTROYED:2},l=e.ref([]),f=e.ref(null),p=e.ref(D.get("velocity")),x=e.computed(()=>o.animationType==="velocity"),K=e.computed(()=>x.value?R:V),d=e.computed(()=>l.value.filter(t=>t.state!==s.DESTROYED)),C=e.computed(()=>z(o.width)),$=e.computed(()=>{const{x:t,y:r}=M(o.position),a=C.value.value,u=C.value.type,h={width:a+u};return r&&(h[r]="0px"),t&&(t==="center"?h.left=`calc(50% - ${+a/2}${u})`:h[t]="0px"),h}),b=e.computed(()=>"bottom"in $.value),Q=t=>{i("click",t),o.closeOnClick&&y(t)},U=()=>{var t;o.pauseOnHover&&((t=f.value)==null||t.pause())},X=()=>{var t;o.pauseOnHover&&((t=f.value)==null||t.resume())},Z=(t={})=>{if(t.group||(t.group=""),t.data||(t.data={}),o.group!==t.group)return;if(t.clean||t.clear){it();return}const r=typeof t.duration=="number"?t.duration:o.duration,a=typeof t.speed=="number"?t.speed:o.speed,u=typeof t.ignoreDuplicates=="boolean"?t.ignoreDuplicates:o.ignoreDuplicates,{title:h,text:rt,type:lt,data:ct,id:ft}=t,m={id:ft||I(),title:h,text:rt,type:lt,state:s.IDLE,speed:a,length:r+2*a,data:ct};r>=0&&(f.value=new H(()=>y(m),m.length,m));const ut=o.reverse?!b.value:b.value;let T=-1;const pt=d.value.some(L=>L.title===t.title&&L.text===t.text);(!u||!pt)&&(ut?(l.value.push(m),i("start",m),d.value.length>o.max&&(T=0)):(l.value.unshift(m),i("start",m),d.value.length>o.max&&(T=d.value.length-1)),T!==-1&&y(d.value[T]))},tt=t=>{ot(t)},et=t=>["vue-notification-template",o.classes,t.type||""],nt=t=>x.value?void 0:{transition:`all ${t.speed}ms`},y=t=>{clearTimeout(t.timer),t.state=s.DESTROYED,O(),i("destroy",t)},ot=t=>{const r=l.value.find(a=>a.id===t);r&&y(r)},it=()=>{d.value.forEach(y)},A=(t,r)=>{var u;const a=(u=o.animation)==null?void 0:u[t];return typeof a=="function"?a(r):a},st=(t,r)=>{if(!x.value)return;const a=A("enter",t);p.value(t,a,{duration:o.speed,complete:r})},at=(t,r)=>{if(!x.value)return;const a=A("leave",t);p.value(t,a,{duration:o.speed,complete:r})};function O(){l.value=l.value.filter(t=>t.state!==s.DESTROYED)}return e.onMounted(()=>{g.on("add",Z),g.on("close",tt)}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"vue-notification-group",style:e.normalizeStyle($.value)},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(K.value),{name:t.animationName,onEnter:st,onLeave:at,onAfterLeave:O},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,a=>(e.openBlock(),e.createElementBlock("div",{key:a.id,class:"vue-notification-wrapper",style:e.normalizeStyle(nt(a)),"data-id":a.id,onMouseenter:U,onMouseleave:X},[e.renderSlot(t.$slots,"body",{class:e.normalizeClass([t.classes,a.type]),item:a,close:()=>y(a)},()=>[e.createElementVNode("div",{class:e.normalizeClass(et(a)),onClick:u=>Q(a)},[a.title?(e.openBlock(),e.createElementBlock("div",{key:0,class:"notification-title",innerHTML:a.title},null,8,F)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"notification-content",innerHTML:a.text},null,8,P)],10,Y)])],44,G))),128))]),_:3},40,["name"]))],4))}}),dt="",_=n=>{typeof n=="string"&&(n={title:"",text:n}),typeof n=="object"&&g.emit("add",n)};_.close=n=>{g.emit("close",n)};const q=()=>({notify:_});function v(n,i={}){Object.entries(i).forEach(s=>D.set(...s));const o=i.name||"notify";n.config.globalProperties["$"+o]=_,n.component(i.componentName||"Notifications",W)}const J={install:v};c.default=J,c.notify=_,c.useNotification=q,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "@kyvg/vue3-notification",
   "description": "Vue.js Notification Library",
-  "version": "2.9.1",
+  "version": "3.0.0",
   "author": "kyvg",
@@ -66,4 +66,4 @@ "private": false,
     "@typescript-eslint/parser": "^5.41.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/compiler-sfc": "^3.2.37",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
     "@vue/server-renderer": "^3.2.37",
@@ -76,3 +76,3 @@ "@vue/test-utils": "^2.2.1",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^9.7.0",
+    "eslint-plugin-vue": "^9.13.0",
     "jest": "^29.2.2",
@@ -83,8 +83,8 @@ "jest-environment-jsdom": "^29.2.2",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.8.4",
+    "typescript": "^5.0.4",
     "velocity-animate": "^1.5.2",
-    "vite": "^4.0.4",
-    "vite-plugin-css-injected-by-js": "^2.3.1",
-    "vue": "^3.2.37"
+    "vite": "^4.3.8",
+    "vite-plugin-css-injected-by-js": "^3.1.1",
+    "vue": "^3.3.4"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

53811

decreased by-6.88%

Lines of code

700

decreased by-14.11%

No dependency changes