diff --git a/dist/auto-import-resolver/index.d.ts b/dist/auto-import-resolver/index.d.ts index 68d74c1..ab9a1cb 100644 --- a/dist/auto-import-resolver/index.d.ts +++ b/dist/auto-import-resolver/index.d.ts @@ -1,3 +1,3 @@ -import type { ComponentResolverFunction } from 'unplugin-vue-components'; +import { ComponentResolverFunction } from 'unplugin-vue-components'; declare const autoImportResolver: (name?: string) => ComponentResolverFunction; export default autoImportResolver; diff --git a/dist/index.d.ts b/dist/index.d.ts index 70c669d..bcb3b45 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -1,13 +1,12 @@ -import { AllowedComponentProps } from 'vue'; -import { ComponentCustomProps } from 'vue'; import { ComponentOptionsMixin } from 'vue'; import { DefineComponent } from 'vue'; import { ExtractPropTypes } 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'; declare const _default: Plugin_2; export default _default; @@ -17,199 +16,199 @@ export declare type NotificationItem = Pick; - default: () => string[]; - }; - classes: { - type: PropType; - default: string; - }; - animationType: { - type: PropType<"css" | "velocity">; - default: string; - validator(value: unknown): boolean; - }; - animation: { - type: PropType>; - 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; +default: () => string[]; +}; +classes: { +type: PropType; +default: string; +}; +animationType: { +type: PropType<"css" | "velocity">; +default: string; +validator(value: unknown): value is "css" | "velocity"; +}; +animation: { +type: PropType>; +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; - default: () => string[]; - }; - classes: { - type: PropType; - default: string; - }; - animationType: { - type: PropType<"css" | "velocity">; - default: string; - validator(value: unknown): boolean; - }; - animation: { - type: PropType>; - 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; +default: () => string[]; +}; +classes: { +type: PropType; +default: string; +}; +animationType: { +type: PropType<"css" | "velocity">; +default: string; +validator(value: unknown): value is "css" | "velocity"; +}; +animation: { +type: PropType>; +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; }>>; export declare interface NotificationsOptions { @@ -248,7 +247,7 @@ export declare const useNotification: () => { }; export { } -declare module '@vue/runtime-core' { +declare module 'vue' { export interface ComponentCustomProperties { $notify: typeof notify; } diff --git a/dist/index.es.js b/dist/index.es.js index a7bf291..0fc6fa5 100644 --- a/dist/index.es.js +++ b/dist/index.es.js @@ -1,4 +1,4 @@ -(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"; const j = /* @__PURE__ */ new Map(); class it { @@ -75,7 +75,7 @@ const b = ot(), T = "[-+]?[0-9]*.?[0-9]+", k = [ }, H = { x: /* @__PURE__ */ new Set(["left", "center", "right"]), 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)); let n = null, o = null; return t.forEach((a) => { diff --git a/dist/index.umd.js b/dist/index.umd.js index ed66322..fec123e 100644 --- a/dist/index.umd.js +++ b/dist/index.umd.js @@ -1,2 +1,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{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{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"}})}); diff --git a/package-lock.json b/package-lock.json index 87f29a5..0f96e16 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@kyvg/vue3-notification", - "version": "3.2.1", + "version": "3.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@kyvg/vue3-notification", - "version": "3.2.1", + "version": "3.3.0", "license": "MIT", "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.62.0", diff --git a/package.json b/package.json index d61379e..6c09c67 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@kyvg/vue3-notification", "description": "Vue.js Notification Library", - "version": "3.2.1", + "version": "3.3.0", "author": "kyvg", "private": false, "publishConfig": {