From 946f73b6b433f49fc3aef76ac94981927eb8772b Mon Sep 17 00:00:00 2001 From: kyvg Date: Mon, 28 Oct 2024 19:17:48 +0200 Subject: [PATCH] 3.4.1 --- dist/index.es.js | 245 +++++++++++++++++++++++----------------------- dist/index.umd.js | 2 +- package-lock.json | 4 +- package.json | 2 +- 4 files changed, 127 insertions(+), 126 deletions(-) diff --git a/dist/index.es.js b/dist/index.es.js index b50020c..e86c5a2 100644 --- a/dist/index.es.js +++ b/dist/index.es.js @@ -1,41 +1,30 @@ (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 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 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; - } - resume() { - this.start = Date.now(), clearTimeout(this.notifyItem.timer), this.notifyItem.timer = setTimeout(this.callback, this.remaining); - } -} -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); +import { defineComponent as U, ref as X, computed as g, onMounted as Z, createVNode as l, TransitionGroup as tt, mergeProps as et, Fragment as $, isVNode as nt } from "vue"; +const R = /* @__PURE__ */ new Map(); +function ot(t) { + return { all: t = t || /* @__PURE__ */ new Map(), on: function(o, i) { + var a = t.get(o); + a ? a.push(i) : t.set(o, [i]); + }, off: function(o, i) { + var a = t.get(o); + a && (i ? a.splice(a.indexOf(i) >>> 0, 1) : t.set(o, [])); + }, emit: function(o, i) { + var a = t.get(o); a && a.slice().map(function(r) { - r(o); + r(i); }), (a = t.get("*")) && a.slice().map(function(r) { - r(i, o); + r(o, i); }); } }; } -const h = at(), b = "[-+]?[0-9]*.?[0-9]+", H = [ +const v = ot(), T = "[-+]?[0-9]*.?[0-9]+", M = [ { name: "px", - regexp: new RegExp(`^${b}px$`) + regexp: new RegExp(`^${T}px$`) }, { name: "%", - regexp: new RegExp(`^${b}%$`) + regexp: new RegExp(`^${T}%$`) }, /** * Fallback option @@ -43,19 +32,19 @@ const h = at(), b = "[-+]?[0-9]*.?[0-9]+", H = [ */ { name: "px", - regexp: new RegExp(`^${b}$`) + regexp: new RegExp(`^${T}$`) } -], st = (t) => { +], it = (t) => { if (t === "auto") return { type: t, value: 0 }; - for (let i = 0; i < H.length; i++) { - const o = H[i]; - if (o.regexp.test(t)) + for (let o = 0; o < M.length; o++) { + const i = M[o]; + if (i.regexp.test(t)) return { - type: o.name, + type: i.name, value: parseFloat(t) }; } @@ -63,25 +52,25 @@ const h = at(), b = "[-+]?[0-9]*.?[0-9]+", H = [ type: "", value: t }; -}, rt = (t) => { +}, at = (t) => { switch (typeof t) { case "number": return { type: "px", value: t }; case "string": - return st(t); + return it(t); default: return { type: "", value: t }; } -}, R = { +}, H = { x: /* @__PURE__ */ new Set(["left", "center", "right"]), y: /* @__PURE__ */ new Set(["top", "bottom"]) -}, 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; +}, st = /* @__PURE__ */ ((t) => () => t++)(0), rt = (t) => typeof t != "string" ? [] : t.split(/\s+/gi).filter(Boolean), lt = (t) => { + typeof t == "string" && (t = rt(t)); + let o = null, i = null; return t.forEach((a) => { - R.y.has(a) && (o = a), R.x.has(a) && (i = a); - }), { x: i, y: o }; -}, T = { + H.y.has(a) && (i = a), H.x.has(a) && (o = a); + }), { x: o, y: i }; +}, b = { position: ["top", "right"], cssAnimation: "vn-fade", velocityAnimation: { @@ -94,14 +83,25 @@ const h = at(), b = "[-+]?[0-9]*.?[0-9]+", H = [ opacity: [0, 1] } } +}, ct = (t, o) => { + let i, a, r = o; + const y = () => { + a = Date.now(), i = setTimeout(t, r); + }, m = () => { + clearTimeout(i), r -= Date.now() - a; + }; + return y(), { + start: y, + stop: m + }; }; -function ft(t) { - return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !it(t); +function ut(t) { + return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !nt(t); } -const g = { +const x = { IDLE: 0, DESTROYED: 2 -}, dt = /* @__PURE__ */ Z({ +}, ft = /* @__PURE__ */ U({ // eslint-disable-next-line vue/multi-word-component-names name: "notifications", props: { @@ -123,7 +123,7 @@ const g = { }, position: { type: [String, Array], - default: () => T.position + default: () => b.position }, classes: { type: [String, Array], @@ -139,12 +139,12 @@ const g = { animation: { type: Object, default() { - return T.velocityAnimation; + return b.velocityAnimation; } }, animationName: { type: String, - default: T.cssAnimation + default: b.cssAnimation }, speed: { type: Number, @@ -190,126 +190,127 @@ const g = { }, slots: Object, setup: (t, { - emit: i, - slots: o, + emit: o, + slots: i, expose: a }) => { - 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 r = X([]), y = R.get("velocity"), m = g(() => t.animationType === "velocity"), c = g(() => r.value.filter((e) => e.state !== x.DESTROYED)), D = g(() => at(t.width)), S = g(() => { const { x: e, y: n - } = ut(t.position), s = S.value.value, u = S.value.type, p = { + } = lt(t.position), s = D.value.value, u = D.value.type, p = { width: s + u }; 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 = x.value) == null || e.pause()); - }, P = () => { - var e; - t.pauseOnHover && ((e = x.value) == null || e.resume()); - }, Y = (e = {}) => { + }), j = g(() => m.value ? { + onEnter: G, + onLeave: W, + onAfterLeave: O + } : {}), B = (e) => { + o("click", e), t.closeOnClick && d(e); + }, L = (e) => { + var n; + t.pauseOnHover && ((n = e.timer) == null || n.stop()); + }, k = (e) => { + var n; + t.pauseOnHover && ((n = e.timer) == null || n.start()); + }, C = (e = {}) => { if (e.group || (e.group = ""), e.data || (e.data = {}), t.group !== e.group) return; if (e.clean || e.clear) { - W(); + F(); return; } 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 + text: q, + type: z, + data: J, + id: K } = e, f = { - id: U || lt(), + id: K || st(), title: p, - text: J, - type: K, - state: g.IDLE, + text: q, + type: z, + state: x.IDLE, speed: s, length: n + 2 * s, - data: Q, + data: J, duplicates: 0 }; - 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); + n >= 0 && (f.timer = ct(() => d(f), f.length)); + const w = "bottom" in S.value, Q = t.reverse ? !w : w; + let h = -1; + const A = c.value.find((I) => I.title === e.title && I.text === e.text); if (u && A) { A.duplicates++; return; } - 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 : { + Q ? (r.value.push(f), o("start", f), c.value.length > t.max && (h = 0)) : (r.value.unshift(f), o("start", f), c.value.length > t.max && (h = c.value.length - 1)), h !== -1 && d(c.value[h]); + }, P = (e) => { + _(e); + }, Y = (e) => ["vue-notification-template", t.classes, e.type || ""], V = (e) => m.value ? void 0 : { transition: `all ${e.speed}ms` }, d = (e) => { - clearTimeout(e.timer), e.state = g.DESTROYED, w(), i("destroy", e); - }, G = (e) => { + var n; + (n = e.timer) == null || n.stop(), e.state = x.DESTROYED, O(), o("destroy", e); + }, _ = (e) => { const n = r.value.find((s) => s.id === e); n && d(n); - }, W = () => { + }, F = () => { c.value.forEach(d); - }, O = (e, n) => { + }, N = (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, { + }, G = (e, n) => { + const s = N("enter", e); + y(e, s, { duration: t.speed, complete: n }); - }, z = (e, n) => { - const s = O("leave", e); - D(e, s, { + }, W = (e, n) => { + const s = N("leave", e); + y(e, s, { duration: t.speed, complete: n }); }; - function w() { - r.value = r.value.filter((e) => e.state !== g.DESTROYED); + function O() { + r.value = r.value.filter((e) => e.state !== x.DESTROYED); } - return tt(() => { - h.on("add", Y), h.on("close", V); + return Z(() => { + v.on("add", C), v.on("close", P); }), () => { let e; return l("div", { class: "vue-notification-group", - style: N.value - }, [l(et, nt(B.value, { + style: S.value + }, [l(tt, et(j.value, { tag: "div", - css: !v.value, + css: !m.value, name: t.animationName - }), ft(e = c.value.map((n) => l("div", { + }), ut(e = c.value.map((n) => l("div", { key: n.id, class: "vue-notification-wrapper", - style: F(n), + style: V(n), "data-id": n.id, - onMouseenter: L, - onMouseleave: P - }, [o.body ? o.body({ + onMouseenter: () => L(n), + onMouseleave: () => k(n) + }, [i.body ? i.body({ item: n, class: [t.classes, n.type], close: () => d(n) }) : l("div", { - class: _(n), - onClick: () => C(n) - }, [t.dangerouslySetInnerHtml ? l(k, null, [n.title ? l("div", { + class: Y(n), + onClick: () => B(n) + }, [t.dangerouslySetInnerHtml ? l($, null, [n.title ? l("div", { class: "notification-title", innerHTML: n.title }, null) : null, l("div", { class: "notification-content", innerHTML: n.text - }, null)]) : l(k, null, [n.title ? l("div", { + }, null)]) : l($, null, [n.title ? l("div", { class: "notification-title" }, [n.title]) : null, l("div", { class: "notification-content" @@ -319,23 +320,23 @@ const g = { }; } }), E = (t) => { - typeof t == "string" && (t = { title: "", text: t }), typeof t == "object" && h.emit("add", t); + typeof t == "string" && (t = { title: "", text: t }), typeof t == "object" && v.emit("add", t); }; E.close = (t) => { - h.emit("close", t); + v.emit("close", t); }; -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 mt = () => ({ notify: E }), dt = "Notifications"; +function pt(t, o = {}) { + Object.entries(o).forEach((a) => R.set(...a)); + const i = o.name || "notify"; + t.config.globalProperties["$" + i] = E, t.component(o.componentName || dt, ft); } -const ht = { - install: yt +const gt = { + install: pt }; export { - dt as Notifications, - ht as default, + ft as Notifications, + gt as default, E as notify, - gt as useNotification + mt as useNotification }; diff --git a/dist/index.umd.js b/dist/index.umd.js index 0bb6ef9..45b961d 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(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"}})}); +(function(l,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(l=typeof globalThis<"u"?globalThis:l||self,o(l.notifications={},l.Vue))})(this,function(l,o){"use strict";const S=new Map;function R(t){return{all:t=t||new Map,on:function(i,a){var s=t.get(i);s?s.push(a):t.set(i,[a])},off:function(i,a){var s=t.get(i);s&&(a?s.splice(s.indexOf(a)>>>0,1):t.set(i,[]))},emit:function(i,a){var s=t.get(i);s&&s.slice().map(function(c){c(a)}),(s=t.get("*"))&&s.slice().map(function(c){c(i,a)})}}}const h=R(),b="[-+]?[0-9]*.?[0-9]+",D=[{name:"px",regexp:new RegExp(`^${b}px$`)},{name:"%",regexp:new RegExp(`^${b}%$`)},{name:"px",regexp:new RegExp(`^${b}$`)}],B=t=>{if(t==="auto")return{type:t,value:0};for(let i=0;i{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"])},k=(t=>()=>t++)(0),v=t=>typeof t!="string"?[]:t.split(/\s+/gi).filter(Boolean),C=t=>{typeof t=="string"&&(t=v(t));let i=null,a=null;return t.forEach(s=>{O.y.has(s)&&(a=s),O.x.has(s)&&(i=s)}),{x:i,y:a}},E={position:["top","right"],cssAnimation:"vn-fade",velocityAnimation:{enter:t=>({height:[t.clientHeight,0],opacity:[1,0]}),leave:{height:0,opacity:[0,1]}}},P=(t,i)=>{let a,s,c=i;const m=()=>{s=Date.now(),a=setTimeout(t,c)},g=()=>{clearTimeout(a),c-=Date.now()-s};return m(),{start:m,stop:g}};function _(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!o.isVNode(t)}const x={IDLE:0,DESTROYED:2},w=o.defineComponent({name:"notifications",props:{group:{type:String,default:""},width:{type:[Number,String],default:300},reverse:{type:Boolean,default:!1},position:{type:[String,Array],default:()=>E.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 E.velocityAnimation}},animationName:{type:String,default:E.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:i,slots:a,expose:s})=>{const c=o.ref([]),m=S.get("velocity"),g=o.computed(()=>t.animationType==="velocity"),u=o.computed(()=>c.value.filter(e=>e.state!==x.DESTROYED)),V=o.computed(()=>L(t.width)),A=o.computed(()=>{const{x:e,y:n}=C(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}),q=o.computed(()=>g.value?{onEnter:nt,onLeave:ot,onAfterLeave:I}:{}),z=e=>{i("click",e),t.closeOnClick&&p(e)},J=e=>{var n;t.pauseOnHover&&((n=e.timer)==null||n.stop())},K=e=>{var n;t.pauseOnHover&&((n=e.timer)==null||n.start())},Q=(e={})=>{if(e.group||(e.group=""),e.data||(e.data={}),t.group!==e.group)return;if(e.clean||e.clear){et();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:it,type:at,data:st,id:rt}=e,d={id:rt||k(),title:y,text:it,type:at,state:x.IDLE,speed:r,length:n+2*r,data:st,duplicates:0};n>=0&&(d.timer=P(()=>p(d),d.length));const $="bottom"in A.value,ct=t.reverse?!$:$;let T=-1;const j=u.value.find(H=>H.title===e.title&&H.text===e.text);if(f&&j){j.duplicates++;return}ct?(c.value.push(d),i("start",d),u.value.length>t.max&&(T=0)):(c.value.unshift(d),i("start",d),u.value.length>t.max&&(T=u.value.length-1)),T!==-1&&p(u.value[T])},U=e=>{tt(e)},X=e=>["vue-notification-template",t.classes,e.type||""],Z=e=>g.value?void 0:{transition:`all ${e.speed}ms`},p=e=>{var n;(n=e.timer)==null||n.stop(),e.state=x.DESTROYED,I(),i("destroy",e)},tt=e=>{const n=c.value.find(r=>r.id===e);n&&p(n)},et=()=>{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},nt=(e,n)=>{const r=M("enter",e);m(e,r,{duration:t.speed,complete:n})},ot=(e,n)=>{const r=M("leave",e);m(e,r,{duration:t.speed,complete:n})};function I(){c.value=c.value.filter(e=>e.state!==x.DESTROYED)}return o.onMounted(()=>{h.on("add",Q),h.on("close",U)}),()=>{let e;return o.createVNode("div",{class:"vue-notification-group",style:A.value},[o.createVNode(o.TransitionGroup,o.mergeProps(q.value,{tag:"div",css:!g.value,name:t.animationName}),_(e=u.value.map(n=>o.createVNode("div",{key:n.id,class:"vue-notification-wrapper",style:Z(n),"data-id":n.id,onMouseenter:()=>J(n),onMouseleave:()=>K(n)},[a.body?a.body({item:n,class:[t.classes,n.type],close:()=>p(n)}):o.createVNode("div",{class:X(n),onClick:()=>z(n)},[t.dangerouslySetInnerHtml?o.createVNode(o.Fragment,null,[n.title?o.createVNode("div",{class:"notification-title",innerHTML:n.title},null):null,o.createVNode("div",{class:"notification-content",innerHTML:n.text},null)]):o.createVNode(o.Fragment,null,[n.title?o.createVNode("div",{class:"notification-title"},[n.title]):null,o.createVNode("div",{class:"notification-content"},[n.text])])])])))?e:{default:()=>[e]})])}}}),N=t=>{typeof t=="string"&&(t={title:"",text:t}),typeof t=="object"&&h.emit("add",t)};N.close=t=>{h.emit("close",t)};const Y=()=>({notify:N}),F="Notifications";function G(t,i={}){Object.entries(i).forEach(s=>S.set(...s));const a=i.name||"notify";t.config.globalProperties["$"+a]=N,t.component(i.componentName||F,w)}const W={install:G};l.Notifications=w,l.default=W,l.notify=N,l.useNotification=Y,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); diff --git a/package-lock.json b/package-lock.json index 2e5c879..0db5bab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@kyvg/vue3-notification", - "version": "3.4.0", + "version": "3.4.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@kyvg/vue3-notification", - "version": "3.4.0", + "version": "3.4.1", "license": "MIT", "devDependencies": { "@typescript-eslint/eslint-plugin": "^8.8.1", diff --git a/package.json b/package.json index 0d6f07b..4c03caa 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@kyvg/vue3-notification", "description": "Vue.js Notification Library", - "version": "3.4.0", + "version": "3.4.1", "author": "kyvg", "private": false, "publishConfig": {