diff --git a/dist/index.d.ts b/dist/index.d.ts index bcb3b45..9377a1e 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -1,4 +1,5 @@ import { ComponentOptionsMixin } from 'vue'; +import { ComponentProvideOptions } from 'vue'; import { DefineComponent } from 'vue'; import { ExtractPropTypes } from 'vue'; import { HTMLAttributes } from 'vue'; @@ -16,7 +17,7 @@ export declare type NotificationItem = Pick JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, { +}>, () => JSX.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, { click: (item: NotificationItem) => true; destroy: (item: NotificationItem) => true; start: (item: NotificationItem) => true; @@ -182,18 +183,18 @@ dangerouslySetInnerHtml: { type: BooleanConstructor; default: boolean; }; -}>> & { +}>> & Readonly<{ onClick?: ((item: NotificationItem) => any) | undefined; onDestroy?: ((item: NotificationItem) => any) | undefined; onStart?: ((item: NotificationItem) => any) | undefined; -}, { +}>, { speed: number; group: string; duration: number; ignoreDuplicates: boolean; closeOnClick: boolean; -reverse: boolean; width: string | number; +reverse: boolean; position: string | string[]; classes: string | string[]; animationType: "css" | "velocity"; @@ -209,7 +210,7 @@ class: HTMLAttributes["class"]; item: NotificationItem; close: () => void; }) => any; -}>>; +}>, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare interface NotificationsOptions { id?: number; diff --git a/dist/index.es.js b/dist/index.es.js index 0fc6fa5..b50020c 100644 --- a/dist/index.es.js +++ b/dist/index.es.js @@ -1,9 +1,9 @@ (function(){"use strict";var o;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:#fff;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(n){console.error("vite-plugin-css-injected-by-js",n)}})(); -import { defineComponent as S, createVNode as l, TransitionGroup as R, ref as C, computed as g, onMounted as et, Fragment as M, isVNode as nt } from "vue"; +import { defineComponent as Z, ref as M, computed as y, onMounted as tt, createVNode as l, TransitionGroup as et, mergeProps as nt, Fragment as k, isVNode as it } from "vue"; const j = /* @__PURE__ */ new Map(); -class it { - constructor(n, o, a) { - this.remaining = o, this.callback = n, this.notifyItem = a, this.resume(); +class ot { + constructor(i, o, a) { + this.remaining = o, this.callback = i, this.notifyItem = a, this.resume(); } pause() { clearTimeout(this.notifyItem.timer), this.remaining -= Date.now() - this.start; @@ -12,30 +12,30 @@ class it { this.start = Date.now(), clearTimeout(this.notifyItem.timer), this.notifyItem.timer = setTimeout(this.callback, this.remaining); } } -function ot(t) { - return { all: t = t || /* @__PURE__ */ new Map(), on: function(n, o) { - var a = t.get(n); - a ? a.push(o) : t.set(n, [o]); - }, off: function(n, o) { - var a = t.get(n); - a && (o ? a.splice(a.indexOf(o) >>> 0, 1) : t.set(n, [])); - }, emit: function(n, o) { - var a = t.get(n); - a && a.slice().map(function(s) { - s(o); - }), (a = t.get("*")) && a.slice().map(function(s) { - s(n, o); +function at(t) { + return { all: t = t || /* @__PURE__ */ new Map(), on: function(i, o) { + var a = t.get(i); + a ? a.push(o) : t.set(i, [o]); + }, off: function(i, o) { + var a = t.get(i); + a && (o ? a.splice(a.indexOf(o) >>> 0, 1) : t.set(i, [])); + }, emit: function(i, o) { + var a = t.get(i); + a && a.slice().map(function(r) { + r(o); + }), (a = t.get("*")) && a.slice().map(function(r) { + r(i, o); }); } }; } -const b = ot(), T = "[-+]?[0-9]*.?[0-9]+", k = [ +const h = at(), b = "[-+]?[0-9]*.?[0-9]+", H = [ { name: "px", - regexp: new RegExp(`^${T}px$`) + regexp: new RegExp(`^${b}px$`) }, { name: "%", - regexp: new RegExp(`^${T}%$`) + regexp: new RegExp(`^${b}%$`) }, /** * Fallback option @@ -43,16 +43,16 @@ const b = ot(), T = "[-+]?[0-9]*.?[0-9]+", k = [ */ { name: "px", - regexp: new RegExp(`^${T}$`) + regexp: new RegExp(`^${b}$`) } -], at = (t) => { +], st = (t) => { if (t === "auto") return { type: t, value: 0 }; - for (let n = 0; n < k.length; n++) { - const o = k[n]; + for (let i = 0; i < H.length; i++) { + const o = H[i]; if (o.regexp.test(t)) return { type: o.name, @@ -68,20 +68,20 @@ const b = ot(), T = "[-+]?[0-9]*.?[0-9]+", k = [ case "number": return { type: "px", value: t }; case "string": - return at(t); + return st(t); default: return { type: "", value: t }; } -}, H = { +}, R = { x: /* @__PURE__ */ new Set(["left", "center", "right"]), y: /* @__PURE__ */ new Set(["top", "bottom"]) -}, st = /* @__PURE__ */ ((t) => () => t++)(0), lt = (t) => typeof t != "string" ? [] : t.split(/\s+/gi).filter(Boolean), ct = (t) => { - typeof t == "string" && (t = lt(t)); - let n = null, o = null; +}, lt = /* @__PURE__ */ ((t) => () => t++)(0), ct = (t) => typeof t != "string" ? [] : t.split(/\s+/gi).filter(Boolean), ut = (t) => { + typeof t == "string" && (t = ct(t)); + let i = null, o = null; return t.forEach((a) => { - H.y.has(a) && (o = a), H.x.has(a) && (n = a); - }), { x: n, y: o }; -}, E = { + R.y.has(a) && (o = a), R.x.has(a) && (i = a); + }), { x: i, y: o }; +}, T = { position: ["top", "right"], cssAnimation: "vn-fade", velocityAnimation: { @@ -94,75 +94,14 @@ const b = ot(), T = "[-+]?[0-9]*.?[0-9]+", k = [ opacity: [0, 1] } } -}, ut = /* @__PURE__ */ S({ - name: "velocity-group", - inheritAttrs: !1, - props: { - name: { - type: String, - default: "" - } - }, - emits: { - /* eslint-disable @typescript-eslint/no-unused-vars */ - enter: (t, n) => !0, - leave: (t, n) => !0, - afterLeave: () => !0 - /* eslint-enable @typescript-eslint/no-unused-vars */ - }, - setup: (t, { - slots: n, - emit: o - }) => { - const a = (c, u) => { - o("enter", c, u); - }, s = (c, u) => { - o("leave", c, u); - }, h = () => { - o("afterLeave"); - }; - return () => l(R, { - tag: "div", - css: !1, - name: t.name, - onEnter: a, - onLeave: s, - onAfterLeave: h - }, { - default: () => { - var c; - return [(c = n.default) == null ? void 0 : c.call(n)]; - } - }); - } -}), ft = /* @__PURE__ */ S({ - name: "css-group", - inheritAttrs: !1, - props: { - name: { - type: String, - default: "" - } - }, - setup: (t, { - slots: n - }) => () => l(R, { - tag: "div", - name: t.name - }, { - default: () => { - var o; - return [(o = n.default) == null ? void 0 : o.call(n)]; - } - }) -}); -function dt(t) { - return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !nt(t); +}; +function ft(t) { + return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !it(t); } -const x = { +const g = { IDLE: 0, DESTROYED: 2 -}, pt = /* @__PURE__ */ S({ +}, dt = /* @__PURE__ */ Z({ // eslint-disable-next-line vue/multi-word-component-names name: "notifications", props: { @@ -184,7 +123,7 @@ const x = { }, position: { type: [String, Array], - default: () => E.position + default: () => T.position }, classes: { type: [String, Array], @@ -200,12 +139,12 @@ const x = { animation: { type: Object, default() { - return E.velocityAnimation; + return T.velocityAnimation; } }, animationName: { type: String, - default: E.cssAnimation + default: T.cssAnimation }, speed: { type: Number, @@ -251,153 +190,152 @@ const x = { }, slots: Object, setup: (t, { - emit: n, + emit: i, slots: o, expose: a }) => { - const s = C([]), h = C(null), c = j.get("velocity"), u = g(() => t.animationType === "velocity"), B = g(() => u.value ? ut : ft), f = g(() => s.value.filter((e) => e.state !== x.DESTROYED)), N = g(() => rt(t.width)), O = g(() => { + const r = M([]), x = M(null), D = j.get("velocity"), v = y(() => t.animationType === "velocity"), c = y(() => r.value.filter((e) => e.state !== g.DESTROYED)), S = y(() => rt(t.width)), N = y(() => { const { x: e, - y: i - } = ct(t.position), r = N.value.value, d = N.value.type, m = { - width: r + d + y: n + } = ut(t.position), s = S.value.value, u = S.value.type, p = { + width: s + u }; - return i && (m[i] = "0px"), e && (e === "center" ? m.left = `calc(50% - ${+r / 2}${d})` : m[e] = "0px"), m; - }), w = g(() => "bottom" in O.value), V = (e) => { - n("click", e), t.closeOnClick && y(e); - }, Y = () => { + return n && (p[n] = "0px"), e && (e === "center" ? p.left = `calc(50% - ${+s / 2}${u})` : p[e] = "0px"), p; + }), B = y(() => v.value ? { + onEnter: q, + onLeave: z, + onAfterLeave: w + } : {}), C = (e) => { + i("click", e), t.closeOnClick && d(e); + }, L = () => { var e; - t.pauseOnHover && ((e = h.value) == null || e.pause()); - }, G = () => { + t.pauseOnHover && ((e = x.value) == null || e.pause()); + }, P = () => { var e; - t.pauseOnHover && ((e = h.value) == null || e.resume()); - }, _ = (e = {}) => { + t.pauseOnHover && ((e = x.value) == null || e.resume()); + }, Y = (e = {}) => { if (e.group || (e.group = ""), e.data || (e.data = {}), t.group !== e.group) return; if (e.clean || e.clear) { - z(); + W(); return; } - const i = typeof e.duration == "number" ? e.duration : t.duration, r = typeof e.speed == "number" ? e.speed : t.speed, d = typeof e.ignoreDuplicates == "boolean" ? e.ignoreDuplicates : t.ignoreDuplicates, { - title: m, - text: Q, - type: U, - data: X, - id: Z - } = e, p = { - id: Z || st(), - title: m, - text: Q, - type: U, - state: x.IDLE, - speed: r, - length: i + 2 * r, - data: X, + const n = typeof e.duration == "number" ? e.duration : t.duration, s = typeof e.speed == "number" ? e.speed : t.speed, u = typeof e.ignoreDuplicates == "boolean" ? e.ignoreDuplicates : t.ignoreDuplicates, { + title: p, + text: J, + type: K, + data: Q, + id: U + } = e, f = { + id: U || lt(), + title: p, + text: J, + type: K, + state: g.IDLE, + speed: s, + length: n + 2 * s, + data: Q, duplicates: 0 }; - i >= 0 && (h.value = new it(() => y(p), p.length, p)); - const tt = t.reverse ? !w.value : w.value; - let v = -1; - const L = f.value.find(($) => $.title === e.title && $.text === e.text); - if (d && L) { - L.duplicates++; + n >= 0 && (x.value = new ot(() => d(f), f.length, f)); + const I = "bottom" in N.value, X = t.reverse ? !I : I; + let m = -1; + const A = c.value.find(($) => $.title === e.title && $.text === e.text); + if (u && A) { + A.duplicates++; return; } - tt ? (s.value.push(p), n("start", p), f.value.length > t.max && (v = 0)) : (s.value.unshift(p), n("start", p), f.value.length > t.max && (v = f.value.length - 1)), v !== -1 && y(f.value[v]); - }, F = (e) => { - q(e); - }, P = (e) => ["vue-notification-template", t.classes, e.type || ""], W = (e) => u.value ? void 0 : { + X ? (r.value.push(f), i("start", f), c.value.length > t.max && (m = 0)) : (r.value.unshift(f), i("start", f), c.value.length > t.max && (m = c.value.length - 1)), m !== -1 && d(c.value[m]); + }, V = (e) => { + G(e); + }, _ = (e) => ["vue-notification-template", t.classes, e.type || ""], F = (e) => v.value ? void 0 : { transition: `all ${e.speed}ms` - }, y = (e) => { - clearTimeout(e.timer), e.state = x.DESTROYED, I(), n("destroy", e); - }, q = (e) => { - const i = s.value.find((r) => r.id === e); - i && y(i); - }, z = () => { - f.value.forEach(y); - }, A = (e, i) => { - var d; - const r = (d = t.animation) == null ? void 0 : d[e]; - return typeof r == "function" ? r(i) : r; - }, J = (e, i) => { - if (!u.value) - return; - const r = A("enter", e); - c(e, r, { + }, d = (e) => { + clearTimeout(e.timer), e.state = g.DESTROYED, w(), i("destroy", e); + }, G = (e) => { + const n = r.value.find((s) => s.id === e); + n && d(n); + }, W = () => { + c.value.forEach(d); + }, O = (e, n) => { + var u; + const s = (u = t.animation) == null ? void 0 : u[e]; + return typeof s == "function" ? s(n) : s; + }, q = (e, n) => { + const s = O("enter", e); + D(e, s, { duration: t.speed, - complete: i + complete: n }); - }, K = (e, i) => { - if (!u.value) - return; - const r = A("leave", e); - c(e, r, { + }, z = (e, n) => { + const s = O("leave", e); + D(e, s, { duration: t.speed, - complete: i + complete: n }); }; - function I() { - s.value = s.value.filter((e) => e.state !== x.DESTROYED); + function w() { + r.value = r.value.filter((e) => e.state !== g.DESTROYED); } - return et(() => { - b.on("add", _), b.on("close", F); + return tt(() => { + h.on("add", Y), h.on("close", V); }), () => { let e; return l("div", { class: "vue-notification-group", - style: O.value - }, [l(B.value, { - name: t.animationName, - onEnter: J, - onLeave: K, - onAfterLeave: I - }, dt(e = f.value.map((i) => l("div", { - key: i.id, + style: N.value + }, [l(et, nt(B.value, { + tag: "div", + css: !v.value, + name: t.animationName + }), ft(e = c.value.map((n) => l("div", { + key: n.id, class: "vue-notification-wrapper", - style: W(i), - "data-id": i.id, - onMouseenter: Y, - onMouseleave: G + style: F(n), + "data-id": n.id, + onMouseenter: L, + onMouseleave: P }, [o.body ? o.body({ - item: i, - class: [t.classes, i.type], - close: () => y(i) + item: n, + class: [t.classes, n.type], + close: () => d(n) }) : l("div", { - class: P(i), - onClick: () => V(i) - }, [t.dangerouslySetInnerHtml ? l(M, null, [i.title ? l("div", { + class: _(n), + onClick: () => C(n) + }, [t.dangerouslySetInnerHtml ? l(k, null, [n.title ? l("div", { class: "notification-title", - innerHTML: i.title + innerHTML: n.title }, null) : null, l("div", { class: "notification-content", - innerHTML: i.text - }, null)]) : l(M, null, [i.title ? l("div", { + innerHTML: n.text + }, null)]) : l(k, null, [n.title ? l("div", { class: "notification-title" - }, [i.title]) : null, l("div", { + }, [n.title]) : null, l("div", { class: "notification-content" - }, [i.text])])])]))) ? e : { + }, [n.text])])])]))) ? e : { default: () => [e] })]); }; } -}), D = (t) => { - typeof t == "string" && (t = { title: "", text: t }), typeof t == "object" && b.emit("add", t); +}), E = (t) => { + typeof t == "string" && (t = { title: "", text: t }), typeof t == "object" && h.emit("add", t); }; -D.close = (t) => { - b.emit("close", t); +E.close = (t) => { + h.emit("close", t); }; -const ht = () => ({ notify: D }), yt = "Notifications"; -function mt(t, n = {}) { - Object.entries(n).forEach((a) => j.set(...a)); - const o = n.name || "notify"; - t.config.globalProperties["$" + o] = D, t.component(n.componentName || yt, pt); +const gt = () => ({ notify: E }), pt = "Notifications"; +function yt(t, i = {}) { + Object.entries(i).forEach((a) => j.set(...a)); + const o = i.name || "notify"; + t.config.globalProperties["$" + o] = E, t.component(i.componentName || pt, dt); } -const vt = { - install: mt +const ht = { + install: yt }; export { - pt as Notifications, - vt as default, - D as notify, - ht as useNotification + dt as Notifications, + ht as default, + E as notify, + gt as useNotification }; diff --git a/dist/index.umd.js b/dist/index.umd.js index fec123e..0bb6ef9 100644 --- a/dist/index.umd.js +++ b/dist/index.umd.js @@ -1,2 +1,2 @@ (function(){"use strict";var o;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:#fff;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(n){console.error("vite-plugin-css-injected-by-js",n)}})(); -(function(l,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(l=typeof globalThis<"u"?globalThis:l||self,i(l.notifications={},l.Vue))})(this,function(l,i){"use strict";const D=new Map;class j{constructor(n,a,r){this.remaining=a,this.callback=n,this.notifyItem=r,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)}}function k(t){return{all:t=t||new Map,on:function(n,a){var r=t.get(n);r?r.push(a):t.set(n,[a])},off:function(n,a){var r=t.get(n);r&&(a?r.splice(r.indexOf(a)>>>0,1):t.set(n,[]))},emit:function(n,a){var r=t.get(n);r&&r.slice().map(function(c){c(a)}),(r=t.get("*"))&&r.slice().map(function(c){c(n,a)})}}}const x=k(),E="[-+]?[0-9]*.?[0-9]+",O=[{name:"px",regexp:new RegExp(`^${E}px$`)},{name:"%",regexp:new RegExp(`^${E}%$`)},{name:"px",regexp:new RegExp(`^${E}$`)}],H=t=>{if(t==="auto")return{type:t,value:0};for(let n=0;n{switch(typeof t){case"number":return{type:"px",value:t};case"string":return H(t);default:return{type:"",value:t}}},v={x:new Set(["left","center","right"]),y:new Set(["top","bottom"])},B=(t=>()=>t++)(0),_=t=>typeof t!="string"?[]:t.split(/\s+/gi).filter(Boolean),G=t=>{typeof t=="string"&&(t=_(t));let n=null,a=null;return t.forEach(r=>{v.y.has(r)&&(a=r),v.x.has(r)&&(n=r)}),{x:n,y:a}},S={position:["top","right"],cssAnimation:"vn-fade",velocityAnimation:{enter:t=>({height:[t.clientHeight,0],opacity:[1,0]}),leave:{height:0,opacity:[0,1]}}},Y=i.defineComponent({name:"velocity-group",inheritAttrs:!1,props:{name:{type:String,default:""}},emits:{enter:(t,n)=>!0,leave:(t,n)=>!0,afterLeave:()=>!0},setup:(t,{slots:n,emit:a})=>{const r=(u,f)=>{a("enter",u,f)},c=(u,f)=>{a("leave",u,f)},h=()=>{a("afterLeave")};return()=>i.createVNode(i.TransitionGroup,{tag:"div",css:!1,name:t.name,onEnter:r,onLeave:c,onAfterLeave:h},{default:()=>{var u;return[(u=n.default)==null?void 0:u.call(n)]}})}}),F=i.defineComponent({name:"css-group",inheritAttrs:!1,props:{name:{type:String,default:""}},setup:(t,{slots:n})=>()=>i.createVNode(i.TransitionGroup,{tag:"div",name:t.name},{default:()=>{var a;return[(a=n.default)==null?void 0:a.call(n)]}})});function P(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!i.isVNode(t)}const N={IDLE:0,DESTROYED:2},w=i.defineComponent({name:"notifications",props:{group:{type:String,default:""},width:{type:[Number,String],default:300},reverse:{type:Boolean,default:!1},position:{type:[String,Array],default:()=>S.position},classes:{type:[String,Array],default:"vue-notification"},animationType:{type:String,default:"css",validator(t){return t==="css"||t==="velocity"}},animation:{type:Object,default(){return S.velocityAnimation}},animationName:{type:String,default:S.cssAnimation},speed:{type:Number,default:300},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},dangerouslySetInnerHtml:{type:Boolean,default:!1}},emits:{click:t=>!0,destroy:t=>!0,start:t=>!0},slots:Object,setup:(t,{emit:n,slots:a,expose:r})=>{const c=i.ref([]),h=i.ref(null),u=D.get("velocity"),f=i.computed(()=>t.animationType==="velocity"),K=i.computed(()=>f.value?Y:F),d=i.computed(()=>c.value.filter(e=>e.state!==N.DESTROYED)),A=i.computed(()=>R(t.width)),V=i.computed(()=>{const{x:e,y:o}=G(t.position),s=A.value.value,p=A.value.type,g={width:s+p};return o&&(g[o]="0px"),e&&(e==="center"?g.left=`calc(50% - ${+s/2}${p})`:g[e]="0px"),g}),I=i.computed(()=>"bottom"in V.value),Q=e=>{n("click",e),t.closeOnClick&&m(e)},U=()=>{var e;t.pauseOnHover&&((e=h.value)==null||e.pause())},X=()=>{var e;t.pauseOnHover&&((e=h.value)==null||e.resume())},Z=(e={})=>{if(e.group||(e.group=""),e.data||(e.data={}),t.group!==e.group)return;if(e.clean||e.clear){ot();return}const o=typeof e.duration=="number"?e.duration:t.duration,s=typeof e.speed=="number"?e.speed:t.speed,p=typeof e.ignoreDuplicates=="boolean"?e.ignoreDuplicates:t.ignoreDuplicates,{title:g,text:st,type:ct,data:lt,id:ut}=e,y={id:ut||B(),title:g,text:st,type:ct,state:N.IDLE,speed:s,length:o+2*s,data:lt,duplicates:0};o>=0&&(h.value=new j(()=>m(y),y.length,y));const ft=t.reverse?!I.value:I.value;let b=-1;const M=d.value.find($=>$.title===e.title&&$.text===e.text);if(p&&M){M.duplicates++;return}ft?(c.value.push(y),n("start",y),d.value.length>t.max&&(b=0)):(c.value.unshift(y),n("start",y),d.value.length>t.max&&(b=d.value.length-1)),b!==-1&&m(d.value[b])},tt=e=>{it(e)},et=e=>["vue-notification-template",t.classes,e.type||""],nt=e=>f.value?void 0:{transition:`all ${e.speed}ms`},m=e=>{clearTimeout(e.timer),e.state=N.DESTROYED,C(),n("destroy",e)},it=e=>{const o=c.value.find(s=>s.id===e);o&&m(o)},ot=()=>{d.value.forEach(m)},L=(e,o)=>{var p;const s=(p=t.animation)==null?void 0:p[e];return typeof s=="function"?s(o):s},at=(e,o)=>{if(!f.value)return;const s=L("enter",e);u(e,s,{duration:t.speed,complete:o})},rt=(e,o)=>{if(!f.value)return;const s=L("leave",e);u(e,s,{duration:t.speed,complete:o})};function C(){c.value=c.value.filter(e=>e.state!==N.DESTROYED)}return i.onMounted(()=>{x.on("add",Z),x.on("close",tt)}),()=>{let e;return i.createVNode("div",{class:"vue-notification-group",style:V.value},[i.createVNode(K.value,{name:t.animationName,onEnter:at,onLeave:rt,onAfterLeave:C},P(e=d.value.map(o=>i.createVNode("div",{key:o.id,class:"vue-notification-wrapper",style:nt(o),"data-id":o.id,onMouseenter:U,onMouseleave:X},[a.body?a.body({item:o,class:[t.classes,o.type],close:()=>m(o)}):i.createVNode("div",{class:et(o),onClick:()=>Q(o)},[t.dangerouslySetInnerHtml?i.createVNode(i.Fragment,null,[o.title?i.createVNode("div",{class:"notification-title",innerHTML:o.title},null):null,i.createVNode("div",{class:"notification-content",innerHTML:o.text},null)]):i.createVNode(i.Fragment,null,[o.title?i.createVNode("div",{class:"notification-title"},[o.title]):null,i.createVNode("div",{class:"notification-content"},[o.text])])])])))?e:{default:()=>[e]})])}}}),T=t=>{typeof t=="string"&&(t={title:"",text:t}),typeof t=="object"&&x.emit("add",t)};T.close=t=>{x.emit("close",t)};const W=()=>({notify:T}),q="Notifications";function z(t,n={}){Object.entries(n).forEach(r=>D.set(...r));const a=n.name||"notify";t.config.globalProperties["$"+a]=T,t.component(n.componentName||q,w)}const J={install:z};l.Notifications=w,l.default=J,l.notify=T,l.useNotification=W,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); +(function(c,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(c=typeof globalThis<"u"?globalThis:c||self,i(c.notifications={},c.Vue))})(this,function(c,i){"use strict";const S=new Map;class H{constructor(o,a,s){this.remaining=a,this.callback=o,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)}}function R(t){return{all:t=t||new Map,on:function(o,a){var s=t.get(o);s?s.push(a):t.set(o,[a])},off:function(o,a){var s=t.get(o);s&&(a?s.splice(s.indexOf(a)>>>0,1):t.set(o,[]))},emit:function(o,a){var s=t.get(o);s&&s.slice().map(function(l){l(a)}),(s=t.get("*"))&&s.slice().map(function(l){l(o,a)})}}}const m=R(),N="[-+]?[0-9]*.?[0-9]+",D=[{name:"px",regexp:new RegExp(`^${N}px$`)},{name:"%",regexp:new RegExp(`^${N}%$`)},{name:"px",regexp:new RegExp(`^${N}$`)}],B=t=>{if(t==="auto")return{type:t,value:0};for(let o=0;o{switch(typeof t){case"number":return{type:"px",value:t};case"string":return B(t);default:return{type:"",value:t}}},O={x:new Set(["left","center","right"]),y:new Set(["top","bottom"])},L=(t=>()=>t++)(0),P=t=>typeof t!="string"?[]:t.split(/\s+/gi).filter(Boolean),_=t=>{typeof t=="string"&&(t=P(t));let o=null,a=null;return t.forEach(s=>{O.y.has(s)&&(a=s),O.x.has(s)&&(o=s)}),{x:o,y:a}},T={position:["top","right"],cssAnimation:"vn-fade",velocityAnimation:{enter:t=>({height:[t.clientHeight,0],opacity:[1,0]}),leave:{height:0,opacity:[0,1]}}};function Y(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!i.isVNode(t)}const g={IDLE:0,DESTROYED:2},w=i.defineComponent({name:"notifications",props:{group:{type:String,default:""},width:{type:[Number,String],default:300},reverse:{type:Boolean,default:!1},position:{type:[String,Array],default:()=>T.position},classes:{type:[String,Array],default:"vue-notification"},animationType:{type:String,default:"css",validator(t){return t==="css"||t==="velocity"}},animation:{type:Object,default(){return T.velocityAnimation}},animationName:{type:String,default:T.cssAnimation},speed:{type:Number,default:300},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},dangerouslySetInnerHtml:{type:Boolean,default:!1}},emits:{click:t=>!0,destroy:t=>!0,start:t=>!0},slots:Object,setup:(t,{emit:o,slots:a,expose:s})=>{const l=i.ref([]),b=i.ref(null),I=S.get("velocity"),E=i.computed(()=>t.animationType==="velocity"),u=i.computed(()=>l.value.filter(e=>e.state!==g.DESTROYED)),V=i.computed(()=>C(t.width)),A=i.computed(()=>{const{x:e,y:n}=_(t.position),r=V.value.value,f=V.value.type,y={width:r+f};return n&&(y[n]="0px"),e&&(e==="center"?y.left=`calc(50% - ${+r/2}${f})`:y[e]="0px"),y}),z=i.computed(()=>E.value?{onEnter:it,onLeave:ot,onAfterLeave:$}:{}),J=e=>{o("click",e),t.closeOnClick&&p(e)},K=()=>{var e;t.pauseOnHover&&((e=b.value)==null||e.pause())},Q=()=>{var e;t.pauseOnHover&&((e=b.value)==null||e.resume())},U=(e={})=>{if(e.group||(e.group=""),e.data||(e.data={}),t.group!==e.group)return;if(e.clean||e.clear){nt();return}const n=typeof e.duration=="number"?e.duration:t.duration,r=typeof e.speed=="number"?e.speed:t.speed,f=typeof e.ignoreDuplicates=="boolean"?e.ignoreDuplicates:t.ignoreDuplicates,{title:y,text:at,type:st,data:rt,id:ct}=e,d={id:ct||L(),title:y,text:at,type:st,state:g.IDLE,speed:r,length:n+2*r,data:rt,duplicates:0};n>=0&&(b.value=new H(()=>p(d),d.length,d));const j="bottom"in A.value,lt=t.reverse?!j:j;let x=-1;const k=u.value.find(v=>v.title===e.title&&v.text===e.text);if(f&&k){k.duplicates++;return}lt?(l.value.push(d),o("start",d),u.value.length>t.max&&(x=0)):(l.value.unshift(d),o("start",d),u.value.length>t.max&&(x=u.value.length-1)),x!==-1&&p(u.value[x])},X=e=>{et(e)},Z=e=>["vue-notification-template",t.classes,e.type||""],tt=e=>E.value?void 0:{transition:`all ${e.speed}ms`},p=e=>{clearTimeout(e.timer),e.state=g.DESTROYED,$(),o("destroy",e)},et=e=>{const n=l.value.find(r=>r.id===e);n&&p(n)},nt=()=>{u.value.forEach(p)},M=(e,n)=>{var f;const r=(f=t.animation)==null?void 0:f[e];return typeof r=="function"?r(n):r},it=(e,n)=>{const r=M("enter",e);I(e,r,{duration:t.speed,complete:n})},ot=(e,n)=>{const r=M("leave",e);I(e,r,{duration:t.speed,complete:n})};function $(){l.value=l.value.filter(e=>e.state!==g.DESTROYED)}return i.onMounted(()=>{m.on("add",U),m.on("close",X)}),()=>{let e;return i.createVNode("div",{class:"vue-notification-group",style:A.value},[i.createVNode(i.TransitionGroup,i.mergeProps(z.value,{tag:"div",css:!E.value,name:t.animationName}),Y(e=u.value.map(n=>i.createVNode("div",{key:n.id,class:"vue-notification-wrapper",style:tt(n),"data-id":n.id,onMouseenter:K,onMouseleave:Q},[a.body?a.body({item:n,class:[t.classes,n.type],close:()=>p(n)}):i.createVNode("div",{class:Z(n),onClick:()=>J(n)},[t.dangerouslySetInnerHtml?i.createVNode(i.Fragment,null,[n.title?i.createVNode("div",{class:"notification-title",innerHTML:n.title},null):null,i.createVNode("div",{class:"notification-content",innerHTML:n.text},null)]):i.createVNode(i.Fragment,null,[n.title?i.createVNode("div",{class:"notification-title"},[n.title]):null,i.createVNode("div",{class:"notification-content"},[n.text])])])])))?e:{default:()=>[e]})])}}}),h=t=>{typeof t=="string"&&(t={title:"",text:t}),typeof t=="object"&&m.emit("add",t)};h.close=t=>{m.emit("close",t)};const F=()=>({notify:h}),G="Notifications";function W(t,o={}){Object.entries(o).forEach(s=>S.set(...s));const a=o.name||"notify";t.config.globalProperties["$"+a]=h,t.component(o.componentName||G,w)}const q={install:W};c.Notifications=w,c.default=q,c.notify=h,c.useNotification=F,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); diff --git a/package-lock.json b/package-lock.json index 230b8ab..2e5c879 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@kyvg/vue3-notification", - "version": "3.3.0", + "version": "3.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@kyvg/vue3-notification", - "version": "3.3.0", + "version": "3.4.0", "license": "MIT", "devDependencies": { "@typescript-eslint/eslint-plugin": "^8.8.1", diff --git a/package.json b/package.json index d41ee32..0d6f07b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@kyvg/vue3-notification", "description": "Vue.js Notification Library", - "version": "3.3.0", + "version": "3.4.0", "author": "kyvg", "private": false, "publishConfig": {