Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@kyvg/vue3-notification

Package Overview
Dependencies
Maintainers
0
Versions
41
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kyvg/vue3-notification - npm Package Compare versions

Comparing version 3.2.1 to 3.3.0

2

dist/auto-import-resolver/index.d.ts

@@ -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"
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc