@kyvg/vue3-notification
Advanced tools
Comparing version 3.2.1 to 3.3.0
@@ -1,3 +0,3 @@ | ||
import type { ComponentResolverFunction } from 'unplugin-vue-components'; | ||
import { ComponentResolverFunction } from 'unplugin-vue-components'; | ||
declare const autoImportResolver: (name?: string) => ComponentResolverFunction; | ||
export default autoImportResolver; |
@@ -1,3 +0,1 @@ | ||
import { AllowedComponentProps } from 'vue'; | ||
import { ComponentCustomProps } from 'vue'; | ||
import { ComponentOptionsMixin } from 'vue'; | ||
@@ -7,6 +5,7 @@ import { DefineComponent } from 'vue'; | ||
import { HTMLAttributes } from 'vue'; | ||
import type { Plugin as Plugin_2 } from 'vue'; | ||
import { JSX } from 'vue/jsx-runtime'; | ||
import { Plugin as Plugin_2 } from 'vue'; | ||
import { PropType } from 'vue'; | ||
import { PublicProps } from 'vue'; | ||
import { SlotsType } from 'vue'; | ||
import { VNodeProps } from 'vue'; | ||
@@ -21,195 +20,195 @@ declare const _default: Plugin_2; | ||
export declare const Notifications: DefineComponent<{ | ||
group: { | ||
type: StringConstructor; | ||
default: string; | ||
}; | ||
/** | ||
* Width of notification holder, can be `%`, `px` string or number. | ||
* @example '100%', '200px', 200 | ||
* */ | ||
width: { | ||
type: (StringConstructor | NumberConstructor)[]; | ||
default: number; | ||
}; | ||
reverse: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
position: { | ||
type: PropType<string | string[]>; | ||
default: () => string[]; | ||
}; | ||
classes: { | ||
type: PropType<string | string[]>; | ||
default: string; | ||
}; | ||
animationType: { | ||
type: PropType<"css" | "velocity">; | ||
default: string; | ||
validator(value: unknown): boolean; | ||
}; | ||
animation: { | ||
type: PropType<Record<"enter" | "leave", unknown>>; | ||
default(): { | ||
enter: (el: Element) => { | ||
height: number[]; | ||
opacity: number[]; | ||
}; | ||
leave: { | ||
height: number; | ||
opacity: number[]; | ||
}; | ||
}; | ||
}; | ||
animationName: { | ||
type: StringConstructor; | ||
default: string; | ||
}; | ||
speed: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
/** Time (in ms) to keep the notification on screen (if **negative** - notification will stay **forever** or until clicked) */ | ||
duration: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
delay: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
max: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
ignoreDuplicates: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
closeOnClick: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
pauseOnHover: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
/** Use [v-html](https://vuejs.org/api/built-in-directives.html#v-html) to set `title` and `text` */ | ||
dangerouslySetInnerHtml: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
export declare const Notifications: DefineComponent< { | ||
group: { | ||
type: StringConstructor; | ||
default: string; | ||
}; | ||
/** | ||
* Width of notification holder, can be `%`, `px` string or number. | ||
* @example '100%', '200px', 200 | ||
* */ | ||
width: { | ||
type: (StringConstructor | NumberConstructor)[]; | ||
default: number; | ||
}; | ||
reverse: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
position: { | ||
type: PropType<string | string[]>; | ||
default: () => string[]; | ||
}; | ||
classes: { | ||
type: PropType<string | string[]>; | ||
default: string; | ||
}; | ||
animationType: { | ||
type: PropType<"css" | "velocity">; | ||
default: string; | ||
validator(value: unknown): value is "css" | "velocity"; | ||
}; | ||
animation: { | ||
type: PropType<Record<"enter" | "leave", unknown>>; | ||
default(): { | ||
enter: (el: Element) => { | ||
height: number[]; | ||
opacity: number[]; | ||
}; | ||
leave: { | ||
height: number; | ||
opacity: number[]; | ||
}; | ||
}; | ||
}; | ||
animationName: { | ||
type: StringConstructor; | ||
default: string; | ||
}; | ||
speed: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
/** Time (in ms) to keep the notification on screen (if **negative** - notification will stay **forever** or until clicked) */ | ||
duration: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
delay: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
max: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
ignoreDuplicates: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
closeOnClick: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
pauseOnHover: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
/** Use [v-html](https://vuejs.org/api/built-in-directives.html#v-html) to set `title` and `text` */ | ||
dangerouslySetInnerHtml: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
}, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, { | ||
click: (item: NotificationItem) => true; | ||
destroy: (item: NotificationItem) => true; | ||
start: (item: NotificationItem) => true; | ||
}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{ | ||
group: { | ||
type: StringConstructor; | ||
default: string; | ||
}; | ||
/** | ||
* Width of notification holder, can be `%`, `px` string or number. | ||
* @example '100%', '200px', 200 | ||
* */ | ||
width: { | ||
type: (StringConstructor | NumberConstructor)[]; | ||
default: number; | ||
}; | ||
reverse: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
position: { | ||
type: PropType<string | string[]>; | ||
default: () => string[]; | ||
}; | ||
classes: { | ||
type: PropType<string | string[]>; | ||
default: string; | ||
}; | ||
animationType: { | ||
type: PropType<"css" | "velocity">; | ||
default: string; | ||
validator(value: unknown): boolean; | ||
}; | ||
animation: { | ||
type: PropType<Record<"enter" | "leave", unknown>>; | ||
default(): { | ||
enter: (el: Element) => { | ||
height: number[]; | ||
opacity: number[]; | ||
}; | ||
leave: { | ||
height: number; | ||
opacity: number[]; | ||
}; | ||
}; | ||
}; | ||
animationName: { | ||
type: StringConstructor; | ||
default: string; | ||
}; | ||
speed: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
/** Time (in ms) to keep the notification on screen (if **negative** - notification will stay **forever** or until clicked) */ | ||
duration: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
delay: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
max: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
ignoreDuplicates: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
closeOnClick: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
pauseOnHover: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
/** Use [v-html](https://vuejs.org/api/built-in-directives.html#v-html) to set `title` and `text` */ | ||
dangerouslySetInnerHtml: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
click: (item: NotificationItem) => true; | ||
destroy: (item: NotificationItem) => true; | ||
start: (item: NotificationItem) => true; | ||
}, string, PublicProps, Readonly<ExtractPropTypes< { | ||
group: { | ||
type: StringConstructor; | ||
default: string; | ||
}; | ||
/** | ||
* Width of notification holder, can be `%`, `px` string or number. | ||
* @example '100%', '200px', 200 | ||
* */ | ||
width: { | ||
type: (StringConstructor | NumberConstructor)[]; | ||
default: number; | ||
}; | ||
reverse: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
position: { | ||
type: PropType<string | string[]>; | ||
default: () => string[]; | ||
}; | ||
classes: { | ||
type: PropType<string | string[]>; | ||
default: string; | ||
}; | ||
animationType: { | ||
type: PropType<"css" | "velocity">; | ||
default: string; | ||
validator(value: unknown): value is "css" | "velocity"; | ||
}; | ||
animation: { | ||
type: PropType<Record<"enter" | "leave", unknown>>; | ||
default(): { | ||
enter: (el: Element) => { | ||
height: number[]; | ||
opacity: number[]; | ||
}; | ||
leave: { | ||
height: number; | ||
opacity: number[]; | ||
}; | ||
}; | ||
}; | ||
animationName: { | ||
type: StringConstructor; | ||
default: string; | ||
}; | ||
speed: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
/** Time (in ms) to keep the notification on screen (if **negative** - notification will stay **forever** or until clicked) */ | ||
duration: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
delay: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
max: { | ||
type: NumberConstructor; | ||
default: number; | ||
}; | ||
ignoreDuplicates: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
closeOnClick: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
pauseOnHover: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
/** Use [v-html](https://vuejs.org/api/built-in-directives.html#v-html) to set `title` and `text` */ | ||
dangerouslySetInnerHtml: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
}; | ||
}>> & { | ||
onClick?: ((item: NotificationItem) => any) | undefined; | ||
onDestroy?: ((item: NotificationItem) => any) | undefined; | ||
onStart?: ((item: NotificationItem) => any) | undefined; | ||
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; | ||
position: string | string[]; | ||
classes: string | string[]; | ||
animationType: "css" | "velocity"; | ||
animation: Record<"enter" | "leave", unknown>; | ||
animationName: string; | ||
delay: number; | ||
max: number; | ||
pauseOnHover: boolean; | ||
dangerouslySetInnerHtml: boolean; | ||
speed: number; | ||
group: string; | ||
duration: number; | ||
ignoreDuplicates: boolean; | ||
closeOnClick: boolean; | ||
reverse: boolean; | ||
width: string | number; | ||
position: string | string[]; | ||
classes: string | string[]; | ||
animationType: "css" | "velocity"; | ||
animation: Record<"enter" | "leave", unknown>; | ||
animationName: string; | ||
delay: number; | ||
max: number; | ||
pauseOnHover: boolean; | ||
dangerouslySetInnerHtml: boolean; | ||
}, SlotsType<{ | ||
body?: ((props: { | ||
class: HTMLAttributes['class']; | ||
item: NotificationItem; | ||
close: () => void; | ||
}) => any) | undefined; | ||
body?: (props: { | ||
class: HTMLAttributes["class"]; | ||
item: NotificationItem; | ||
close: () => void; | ||
}) => any; | ||
}>>; | ||
@@ -253,3 +252,3 @@ | ||
export { } | ||
declare module '@vue/runtime-core' { | ||
declare module 'vue' { | ||
export interface ComponentCustomProperties { | ||
@@ -256,0 +255,0 @@ $notify: typeof notify; |
@@ -1,2 +0,2 @@ | ||
(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(){"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"; | ||
@@ -78,3 +78,3 @@ const j = /* @__PURE__ */ new Map(); | ||
y: /* @__PURE__ */ new Set(["top", "bottom"]) | ||
}, st = ((t) => () => t++)(0), lt = (t) => typeof t != "string" ? [] : t.split(/\s+/gi).filter(Boolean), ct = (t) => { | ||
}, st = /* @__PURE__ */ ((t) => () => t++)(0), lt = (t) => typeof t != "string" ? [] : t.split(/\s+/gi).filter(Boolean), ct = (t) => { | ||
typeof t == "string" && (t = lt(t)); | ||
@@ -81,0 +81,0 @@ let n = null, o = null; |
@@ -1,2 +0,2 @@ | ||
(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(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<O.length;n++){const a=O[n];if(a.regexp.test(t))return{type:a.name,value:parseFloat(t)}}return{type:"",value:t}},R=t=>{switch(typeof t){case"number":return{type:"px",value:t};case"string":return H(t);default:return{type:"",value:t}}},w={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=>{w.y.has(r)&&(a=r),w.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)]}})}),dt="";function P(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!i.isVNode(t)}const N={IDLE:0,DESTROYED:2},A=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)),V=i.computed(()=>R(t.width)),v=i.computed(()=>{const{x:e,y:o}=G(t.position),s=V.value.value,p=V.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,A)}const J={install:z};l.Notifications=A,l.default=J,l.notify=T,l.useNotification=W,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); | ||
(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<O.length;n++){const a=O[n];if(a.regexp.test(t))return{type:a.name,value:parseFloat(t)}}return{type:"",value:t}},R=t=>{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"}})}); |
{ | ||
"name": "@kyvg/vue3-notification", | ||
"description": "Vue.js Notification Library", | ||
"version": "3.2.1", | ||
"version": "3.3.0", | ||
"author": "kyvg", | ||
@@ -10,2 +10,3 @@ "private": false, | ||
}, | ||
"type": "module", | ||
"vetur": { | ||
@@ -69,22 +70,22 @@ "tags": "vetur/tags.json", | ||
"devDependencies": { | ||
"@typescript-eslint/eslint-plugin": "^5.41.0", | ||
"@typescript-eslint/parser": "^5.41.0", | ||
"@vitejs/plugin-vue-jsx": "^3.1.0", | ||
"@vue/compiler-sfc": "^3.3.4", | ||
"@vue/server-renderer": "^3.2.37", | ||
"@vue/test-utils": "^2.2.1", | ||
"eslint": "^8.26.0", | ||
"eslint-plugin-vue": "^9.13.0", | ||
"jsdom": "^22.0.0", | ||
"mitt": "^3.0.0", | ||
"sass": "^1.57.1", | ||
"typescript": "^5.0.4", | ||
"unplugin-vue-components": "^0.26.0", | ||
"vite": "^4.3.8", | ||
"vite-plugin-css-injected-by-js": "^3.1.1", | ||
"vite-plugin-dts": "^3.6.4", | ||
"vitepress": "^1.0.0-rc.44", | ||
"vitest": "^1.0.2", | ||
"vue": "^3.3.4" | ||
"@typescript-eslint/eslint-plugin": "^5.62.0", | ||
"@typescript-eslint/parser": "^5.62.0", | ||
"@vitejs/plugin-vue-jsx": "^4.0.1", | ||
"@vue/compiler-sfc": "^3.4.38", | ||
"@vue/server-renderer": "^3.4.38", | ||
"@vue/test-utils": "^2.4.6", | ||
"eslint": "^8.57.0", | ||
"eslint-plugin-vue": "^9.27.0", | ||
"jsdom": "^24.1.1", | ||
"mitt": "^3.0.1", | ||
"sass": "^1.77.8", | ||
"typescript": "^5.5.4", | ||
"unplugin-vue-components": "^0.27.4", | ||
"vite": "^5.4.2", | ||
"vite-plugin-css-injected-by-js": "^3.5.1", | ||
"vite-plugin-dts": "^4.0.3", | ||
"vitepress": "^1.3.3", | ||
"vitest": "^2.0.5", | ||
"vue": "^3.4.38" | ||
} | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Yes
45976
700