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

@kyvg/vue3-notification

Package Overview
Dependencies
Maintainers
1
Versions
41
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kyvg/vue3-notification - npm Package Compare versions

Comparing version 2.8.0 to 2.9.0

4

dist/index.d.ts

@@ -6,2 +6,6 @@ import { Plugin as Plugin_2 } from 'vue';

export declare type NotificationItem = Pick<NotificationsOptions, 'id' | 'title' | 'text' | 'type' | 'speed' | 'data'> & {
length: number;
};
export declare interface NotificationsOptions {

@@ -8,0 +12,0 @@ id?: number;

2

dist/index.es.js

@@ -300,3 +300,3 @@ import { defineComponent as y, openBlock as a, createBlock as g, TransitionGroup as x, withCtx as $, renderSlot as T, createElementBlock as p, normalizeStyle as b, resolveDynamicComponent as k, Fragment as _, renderList as B, normalizeClass as D, createElementVNode as N, createCommentVNode as H } from "vue";

this.classes,
t.type ?? ""
t.type || ""
];

@@ -303,0 +303,0 @@ },

2

dist/index.umd.js

@@ -1,2 +0,2 @@

(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a.test={},a.Vue))})(this,function(a,n){"use strict";function b(t){return{all:t=t||new Map,on:function(e,i){var o=t.get(e);o?o.push(i):t.set(e,[i])},off:function(e,i){var o=t.get(e);o&&(i?o.splice(o.indexOf(i)>>>0,1):t.set(e,[]))},emit:function(e,i){var o=t.get(e);o&&o.slice().map(function(s){s(i)}),(o=t.get("*"))&&o.slice().map(function(s){s(e,i)})}}}const p=b(),T=new Map,$={x:["left","center","right"],y:["top","bottom"]},A=(t=>()=>t++)(0),C=t=>typeof t!="string"?[]:t.split(/\s+/gi).filter(e=>e),D=t=>{typeof t=="string"&&(t=C(t));let e=null,i=null;return t.forEach(o=>{$.y.indexOf(o)!==-1&&(i=o),$.x.indexOf(o)!==-1&&(e=o)}),{x:e,y:i}};class N{constructor(e,i,o){this.remaining=i,this.callback=e,this.notifyItem=o,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)}}const h={position:["top","right"],cssAnimation:"vn-fade",velocityAnimation:{enter:t=>({height:[t.clientHeight,0],opacity:[1,0]}),leave:{height:0,opacity:[0,1]}}},S=n.defineComponent({name:"velocity-group",emits:["after-leave","leave","enter"],methods:{enter(t,e){this.$emit("enter",t,e)},leave(t,e){this.$emit("leave",t,e)},afterLeave(){this.$emit("after-leave")}}}),y=(t,e)=>{const i=t.__vccOpts||t;for(const[o,s]of e)i[o]=s;return i};function B(t,e,i,o,s,u){return n.openBlock(),n.createBlock(n.TransitionGroup,{tag:"span",css:!1,onEnter:t.enter,onLeave:t.leave,onAfterLeave:t.afterLeave},{default:n.withCtx(()=>[n.renderSlot(t.$slots,"default")]),_:3},8,["onEnter","onLeave","onAfterLeave"])}const w=y(S,[["render",B]]),x=n.defineComponent({name:"css-group",inheritAttrs:!1,props:{name:{type:String,required:!0}}});function L(t,e,i,o,s,u){return n.openBlock(),n.createBlock(n.TransitionGroup,{tag:"span",name:t.name},{default:n.withCtx(()=>[n.renderSlot(t.$slots,"default")]),_:3},8,["name"])}const O=y(x,[["render",L]]),g="[-+]?[0-9]*.?[0-9]+",E=[{name:"px",regexp:new RegExp(`^${g}px$`)},{name:"%",regexp:new RegExp(`^${g}%$`)},{name:"px",regexp:new RegExp(`^${g}$`)}],I=t=>{if(t==="auto")return{type:t,value:0};for(let e=0;e<E.length;e++){const i=E[e];if(i.regexp.test(t))return{type:i.name,value:parseFloat(t)}}return{type:"",value:t}},_=t=>{switch(typeof t){case"number":return{type:"px",value:t};case"string":return I(t);default:return{type:"",value:t}}},f={IDLE:0,DESTROYED:2},M=n.defineComponent({name:"notifications",components:{VelocityGroup:w,CssGroup:O},props:{group:{type:String,default:""},width:{type:[Number,String],default:300},reverse:{type:Boolean,default:!1},position:{type:[String,Array],default:h.position},classes:{type:String,default:"vue-notification"},animationType:{type:String,default:"css"},animation:{type:Object,default:h.velocityAnimation},animationName:{type:String,default:h.cssAnimation},speed:{type:Number,default:300},cooldown:{type:Number,default:0},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}},emits:["click","destroy","start"],data(){return{list:[],velocity:T.get("velocity"),timerControl:null}},computed:{actualWidth(){return _(this.width)},isVA(){return this.animationType==="velocity"},componentName(){return this.isVA?"velocity-group":"css-group"},styles(){const{x:t,y:e}=D(this.position),i=this.actualWidth.value,o=this.actualWidth.type,s={width:i+o};return e&&(s[e]="0px"),t&&(t==="center"?s.left=`calc(50% - ${+i/2}${o})`:s[t]="0px"),s},active(){return this.list.filter(t=>t.state!==f.DESTROYED)},botToTop(){return this.styles.hasOwnProperty("bottom")}},mounted(){p.on("add",this.addItem),p.on("close",this.closeItem)},methods:{destroyIfNecessary(t){this.$emit("click",t),this.closeOnClick&&this.destroy(t)},pauseTimeout(){var t;this.pauseOnHover&&((t=this.timerControl)==null||t.pause())},resumeTimeout(){var t;this.pauseOnHover&&((t=this.timerControl)==null||t.resume())},addItem(t={}){if(t.group||(t.group=""),t.data||(t.data={}),this.group!==t.group)return;if(t.clean||t.clear){this.destroyAll();return}const e=typeof t.duration=="number"?t.duration:this.duration,i=typeof t.speed=="number"?t.speed:this.speed,o=typeof t.ignoreDuplicates=="boolean"?t.ignoreDuplicates:this.ignoreDuplicates,{title:s,text:u,type:r,data:c,id:q}=t,l={id:q||A(),title:s,text:u,type:r,state:f.IDLE,speed:i,length:e+2*i,data:c};e>=0&&(this.timerControl=new N(()=>this.destroy(l),l.length,l));const F=this.reverse?!this.botToTop:this.botToTop;let m=-1;const v=this.active.some(k=>k.title===t.title&&k.text===t.text);(!o||!v)&&(F?(this.list.push(l),this.$emit("start",l),this.active.length>this.max&&(m=0)):(this.list.unshift(l),this.$emit("start",l),this.active.length>this.max&&(m=this.active.length-1)),m!==-1&&this.destroy(this.active[m]))},closeItem(t){this.destroyById(t)},notifyClass(t){return["vue-notification-template",this.classes,t.type??""]},notifyWrapperStyle(t){return this.isVA?void 0:{transition:`all ${t.speed}ms`}},destroy(t){clearTimeout(t.timer),t.state=f.DESTROYED,this.clean(),this.$emit("destroy",t)},destroyById(t){const e=this.list.find(i=>i.id===t);e&&this.destroy(e)},destroyAll(){this.active.forEach(this.destroy)},getAnimation(t,e){var o;const i=(o=this.animation)==null?void 0:o[t];return typeof i=="function"?i.call(this,e):i},enter(t,e){if(!this.isVA)return;const i=this.getAnimation("enter",t);this.velocity(t,i,{duration:this.speed,complete:e})},leave(t,e){if(!this.isVA)return;const i=this.getAnimation("leave",t);this.velocity(t,i,{duration:this.speed,complete:e})},clean(){this.list=this.list.filter(t=>t.state!==f.DESTROYED)}}}),J="",V=["data-id"],H=["onClick"],R=["innerHTML"],j=["innerHTML"];function W(t,e,i,o,s,u){return n.openBlock(),n.createElementBlock("div",{class:"vue-notification-group",style:n.normalizeStyle(t.styles)},[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(t.componentName),{name:t.animationName,onEnter:t.enter,onLeave:t.leave,onAfterLeave:t.clean},{default:n.withCtx(()=>[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(t.active,r=>(n.openBlock(),n.createElementBlock("div",{key:r.id,class:"vue-notification-wrapper",style:n.normalizeStyle(t.notifyWrapperStyle(r)),"data-id":r.id,onMouseenter:e[0]||(e[0]=(...c)=>t.pauseTimeout&&t.pauseTimeout(...c)),onMouseleave:e[1]||(e[1]=(...c)=>t.resumeTimeout&&t.resumeTimeout(...c))},[n.renderSlot(t.$slots,"body",{class:n.normalizeClass([t.classes,r.type]),item:r,close:()=>t.destroy(r)},()=>[n.createElementVNode("div",{class:n.normalizeClass(t.notifyClass(r)),onClick:c=>t.destroyIfNecessary(r)},[r.title?(n.openBlock(),n.createElementBlock("div",{key:0,class:"notification-title",innerHTML:r.title},null,8,R)):n.createCommentVNode("",!0),n.createElementVNode("div",{class:"notification-content",innerHTML:r.text},null,8,j)],10,H)])],44,V))),128))]),_:3},40,["name","onEnter","onLeave","onAfterLeave"]))],4)}const z=y(M,[["render",W]]),d=t=>{typeof t=="string"&&(t={title:"",text:t}),typeof t=="object"&&p.emit("add",t)};d.close=t=>{p.emit("close",t)};const G=()=>({notify:d});function Y(t,e={}){Object.entries(e).forEach(o=>T.set(...o));const i=e.name||"notify";t.config.globalProperties["$"+i]=d,t.component(e.componentName||"Notifications",z)}const P={install:Y};a.default=P,a.notify=d,a.useNotification=G,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a.test={},a.Vue))})(this,function(a,n){"use strict";function b(t){return{all:t=t||new Map,on:function(e,i){var o=t.get(e);o?o.push(i):t.set(e,[i])},off:function(e,i){var o=t.get(e);o&&(i?o.splice(o.indexOf(i)>>>0,1):t.set(e,[]))},emit:function(e,i){var o=t.get(e);o&&o.slice().map(function(s){s(i)}),(o=t.get("*"))&&o.slice().map(function(s){s(e,i)})}}}const p=b(),T=new Map,$={x:["left","center","right"],y:["top","bottom"]},A=(t=>()=>t++)(0),C=t=>typeof t!="string"?[]:t.split(/\s+/gi).filter(e=>e),D=t=>{typeof t=="string"&&(t=C(t));let e=null,i=null;return t.forEach(o=>{$.y.indexOf(o)!==-1&&(i=o),$.x.indexOf(o)!==-1&&(e=o)}),{x:e,y:i}};class N{constructor(e,i,o){this.remaining=i,this.callback=e,this.notifyItem=o,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)}}const h={position:["top","right"],cssAnimation:"vn-fade",velocityAnimation:{enter:t=>({height:[t.clientHeight,0],opacity:[1,0]}),leave:{height:0,opacity:[0,1]}}},S=n.defineComponent({name:"velocity-group",emits:["after-leave","leave","enter"],methods:{enter(t,e){this.$emit("enter",t,e)},leave(t,e){this.$emit("leave",t,e)},afterLeave(){this.$emit("after-leave")}}}),y=(t,e)=>{const i=t.__vccOpts||t;for(const[o,s]of e)i[o]=s;return i};function B(t,e,i,o,s,u){return n.openBlock(),n.createBlock(n.TransitionGroup,{tag:"span",css:!1,onEnter:t.enter,onLeave:t.leave,onAfterLeave:t.afterLeave},{default:n.withCtx(()=>[n.renderSlot(t.$slots,"default")]),_:3},8,["onEnter","onLeave","onAfterLeave"])}const w=y(S,[["render",B]]),x=n.defineComponent({name:"css-group",inheritAttrs:!1,props:{name:{type:String,required:!0}}});function L(t,e,i,o,s,u){return n.openBlock(),n.createBlock(n.TransitionGroup,{tag:"span",name:t.name},{default:n.withCtx(()=>[n.renderSlot(t.$slots,"default")]),_:3},8,["name"])}const O=y(x,[["render",L]]),g="[-+]?[0-9]*.?[0-9]+",E=[{name:"px",regexp:new RegExp(`^${g}px$`)},{name:"%",regexp:new RegExp(`^${g}%$`)},{name:"px",regexp:new RegExp(`^${g}$`)}],I=t=>{if(t==="auto")return{type:t,value:0};for(let e=0;e<E.length;e++){const i=E[e];if(i.regexp.test(t))return{type:i.name,value:parseFloat(t)}}return{type:"",value:t}},_=t=>{switch(typeof t){case"number":return{type:"px",value:t};case"string":return I(t);default:return{type:"",value:t}}},f={IDLE:0,DESTROYED:2},M=n.defineComponent({name:"notifications",components:{VelocityGroup:w,CssGroup:O},props:{group:{type:String,default:""},width:{type:[Number,String],default:300},reverse:{type:Boolean,default:!1},position:{type:[String,Array],default:h.position},classes:{type:String,default:"vue-notification"},animationType:{type:String,default:"css"},animation:{type:Object,default:h.velocityAnimation},animationName:{type:String,default:h.cssAnimation},speed:{type:Number,default:300},cooldown:{type:Number,default:0},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}},emits:["click","destroy","start"],data(){return{list:[],velocity:T.get("velocity"),timerControl:null}},computed:{actualWidth(){return _(this.width)},isVA(){return this.animationType==="velocity"},componentName(){return this.isVA?"velocity-group":"css-group"},styles(){const{x:t,y:e}=D(this.position),i=this.actualWidth.value,o=this.actualWidth.type,s={width:i+o};return e&&(s[e]="0px"),t&&(t==="center"?s.left=`calc(50% - ${+i/2}${o})`:s[t]="0px"),s},active(){return this.list.filter(t=>t.state!==f.DESTROYED)},botToTop(){return this.styles.hasOwnProperty("bottom")}},mounted(){p.on("add",this.addItem),p.on("close",this.closeItem)},methods:{destroyIfNecessary(t){this.$emit("click",t),this.closeOnClick&&this.destroy(t)},pauseTimeout(){var t;this.pauseOnHover&&((t=this.timerControl)==null||t.pause())},resumeTimeout(){var t;this.pauseOnHover&&((t=this.timerControl)==null||t.resume())},addItem(t={}){if(t.group||(t.group=""),t.data||(t.data={}),this.group!==t.group)return;if(t.clean||t.clear){this.destroyAll();return}const e=typeof t.duration=="number"?t.duration:this.duration,i=typeof t.speed=="number"?t.speed:this.speed,o=typeof t.ignoreDuplicates=="boolean"?t.ignoreDuplicates:this.ignoreDuplicates,{title:s,text:u,type:r,data:c,id:q}=t,l={id:q||A(),title:s,text:u,type:r,state:f.IDLE,speed:i,length:e+2*i,data:c};e>=0&&(this.timerControl=new N(()=>this.destroy(l),l.length,l));const F=this.reverse?!this.botToTop:this.botToTop;let m=-1;const v=this.active.some(k=>k.title===t.title&&k.text===t.text);(!o||!v)&&(F?(this.list.push(l),this.$emit("start",l),this.active.length>this.max&&(m=0)):(this.list.unshift(l),this.$emit("start",l),this.active.length>this.max&&(m=this.active.length-1)),m!==-1&&this.destroy(this.active[m]))},closeItem(t){this.destroyById(t)},notifyClass(t){return["vue-notification-template",this.classes,t.type||""]},notifyWrapperStyle(t){return this.isVA?void 0:{transition:`all ${t.speed}ms`}},destroy(t){clearTimeout(t.timer),t.state=f.DESTROYED,this.clean(),this.$emit("destroy",t)},destroyById(t){const e=this.list.find(i=>i.id===t);e&&this.destroy(e)},destroyAll(){this.active.forEach(this.destroy)},getAnimation(t,e){var o;const i=(o=this.animation)==null?void 0:o[t];return typeof i=="function"?i.call(this,e):i},enter(t,e){if(!this.isVA)return;const i=this.getAnimation("enter",t);this.velocity(t,i,{duration:this.speed,complete:e})},leave(t,e){if(!this.isVA)return;const i=this.getAnimation("leave",t);this.velocity(t,i,{duration:this.speed,complete:e})},clean(){this.list=this.list.filter(t=>t.state!==f.DESTROYED)}}}),J="",V=["data-id"],H=["onClick"],R=["innerHTML"],j=["innerHTML"];function W(t,e,i,o,s,u){return n.openBlock(),n.createElementBlock("div",{class:"vue-notification-group",style:n.normalizeStyle(t.styles)},[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(t.componentName),{name:t.animationName,onEnter:t.enter,onLeave:t.leave,onAfterLeave:t.clean},{default:n.withCtx(()=>[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(t.active,r=>(n.openBlock(),n.createElementBlock("div",{key:r.id,class:"vue-notification-wrapper",style:n.normalizeStyle(t.notifyWrapperStyle(r)),"data-id":r.id,onMouseenter:e[0]||(e[0]=(...c)=>t.pauseTimeout&&t.pauseTimeout(...c)),onMouseleave:e[1]||(e[1]=(...c)=>t.resumeTimeout&&t.resumeTimeout(...c))},[n.renderSlot(t.$slots,"body",{class:n.normalizeClass([t.classes,r.type]),item:r,close:()=>t.destroy(r)},()=>[n.createElementVNode("div",{class:n.normalizeClass(t.notifyClass(r)),onClick:c=>t.destroyIfNecessary(r)},[r.title?(n.openBlock(),n.createElementBlock("div",{key:0,class:"notification-title",innerHTML:r.title},null,8,R)):n.createCommentVNode("",!0),n.createElementVNode("div",{class:"notification-content",innerHTML:r.text},null,8,j)],10,H)])],44,V))),128))]),_:3},40,["name","onEnter","onLeave","onAfterLeave"]))],4)}const z=y(M,[["render",W]]),d=t=>{typeof t=="string"&&(t={title:"",text:t}),typeof t=="object"&&p.emit("add",t)};d.close=t=>{p.emit("close",t)};const G=()=>({notify:d});function Y(t,e={}){Object.entries(e).forEach(o=>T.set(...o));const i=e.name||"notify";t.config.globalProperties["$"+i]=d,t.component(e.componentName||"Notifications",z)}const P={install:Y};a.default=P,a.notify=d,a.useNotification=G,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
(function(){var o;"use strict";try{if(typeof document!="undefined"){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)}})();

2

dist/src/index.d.ts
import { Plugin } from 'vue';
export { notify, useNotification } from './notify';
export type { NotificationsOptions, NotificationsPluginOptions } from './types';
export type { NotificationsOptions, NotificationsPluginOptions, NotificationItem } from './types';
declare const _default: Plugin;
export default _default;

2

package.json
{
"name": "@kyvg/vue3-notification",
"description": "Vue.js Notification Library",
"version": "2.8.0",
"version": "2.9.0",
"author": "kyvg",

@@ -6,0 +6,0 @@ "private": false,

6

README.md

@@ -144,2 +144,8 @@ [![npm](https://img.shields.io/npm/dm/@kyvg/vue3-notification)](https://www.npmjs.com/package/@kyvg/vue3-notification)

### Component events
| Name | Type | Description |
| ---------------- | -------------------------------- | -------------------------------------------- |
| click | (item: NotificationItem) => void | The callback function that is triggered when notification was clicked
| destroy | (item: NotificationItem) => void | The callback function that is triggered when notification was destroyes
| start | (item: NotificationItem) => void | The callback function that is triggered when notification was appeared
### API

@@ -146,0 +152,0 @@

2

src/index.ts
import { Plugin } from 'vue';
import { install } from './plugin';
export { notify, useNotification } from './notify';
export type { NotificationsOptions, NotificationsPluginOptions } from './types';
export type { NotificationsOptions, NotificationsPluginOptions, NotificationItem } from './types';

@@ -6,0 +6,0 @@ export default {

2

src/util.ts

@@ -62,3 +62,3 @@ import type { NotificationItem } from './types';

private notifyItem: NotificationItemWithTimer;
private callback: () => void
private callback: () => void;

@@ -65,0 +65,0 @@ constructor(callback: () => void, delay: number, notifItem: NotificationItemWithTimer) {

src/Notifications.vue

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc