@f3ve/vue-notify-components/dist/vue-notify-components.js

Vue Notify components

import { ref as f, defineComponent as a, onMounted as r, onBeforeUnmount as d, createVNode as n, TransitionGroup as m, isVNode as y } from "vue";
import { defineStore as v } from "pinia";
const s = v("vue-notify", () => {
  const o = f([]);
  function i(t, l = "default") {
    const c = o.value.length ? o.value[0].id + 1 : 1;
    o.value.unshift({
      message: t,
      color: l,
      id: c
    });
  }
  function e(t) {
    o.value.splice(t, 1);
  }
  return {
    notifications: o,
    show: i,
    hide: e
  };
}), g = /* @__PURE__ */ a((o) => {
  const i = s();
  let e;
  r(() => {
    e && clearTimeout(e), e = setTimeout(() => {
      i.hide(o.index);
    }, o.delay);
  }), d(() => {
    e && clearTimeout(e);
  });
  function t() {
    e && clearTimeout(e), i.hide(o.index);
  }
  return () => n("output", {
    role: "status",
    class: `vue-notification color-${o.color}`
  }, [n("p", null, [o.message]), n("button", {
    onClick: t
  }, [n("span", {
    class: "vue-notification-close"
  }, null)])]);
}, {
  props: ["color", "message", "index", "delay"]
});
function p(o) {
  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !y(o);
}
const N = /* @__PURE__ */ a((o) => {
  const i = s(), e = o.notifyComponent || g, t = o.delay !== void 0 ? o.delay : 3500;
  return () => {
    let l;
    return n("div", {
      class: "notifications"
    }, [n(m, {
      name: "notifications"
    }, p(l = i.notifications.map((c, u) => n(e, {
      color: c.color,
      message: c.message,
      index: u,
      key: c.id,
      delay: t
    }, null))) ? l : {
      default: () => [l]
    })]);
  };
}, {
  props: ["notifyComponent", "delay"]
});
export {
  g as VNotification,
  N as VNotifications
};