Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@kyvg/vue3-notification
Advanced tools
@kyvg/vue3-notification - npm Package Compare versions
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" | ||
| } | ||
| } |
New alerts
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
Fixed alerts
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
Improved metrics
- Is type module
Yes
Worsened metrics
- Total package byte prevSize
- decreased by-2.67%
45976
- Lines of code
- decreased by-0.14%
700
No dependency changes