notiwind/dist/index.common.js

A headless Vue 3 notification library to use with Tailwind CSS.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("mitt"),o=require("vue"),c=y();let N=0;const F=()=>{const n=N;return N+=1,n},m=()=>(n,s)=>{const e={...n,id:F(),group:n.group||""};return c.emit("notify",{notification:e,timeout:s}),()=>c.emit("close",e.id)},g="context",a=o.defineComponent({__name:"Notification",props:{maxNotifications:{default:10},enter:{default:""},enterFrom:{default:""},enterTo:{default:""},leave:{default:""},leaveFrom:{default:""},leaveTo:{default:""},move:{default:""},moveDelay:{default:""}},emits:["close"],setup(n,{emit:s}){const e=n,p=s,d=o.inject(g),r=o.reactive({notifications:[],timeouts:{}}),l=o.computed(()=>r.notifications.filter(t=>t.group===d.group)),_=o.computed(()=>d.position==="bottom"?[...l.value]:[...l.value].reverse()),v=(t,i)=>{r.timeouts[t]=window.setTimeout(()=>{i!==-1&&u(t)},Math.max(i||3e3,0))},u=t=>{r.notifications.splice(r.notifications.findIndex(i=>i.id===t),1),clearTimeout(r.timeouts[t])},I=({notification:t,timeout:i})=>{r.notifications.length!==e.maxNotifications&&(r.notifications.push(t),v(t.id,i))},h=t=>{p("close"),u(t)},E=(t,i,T)=>{i?clearTimeout(r.timeouts[t]):v(t,T)};return o.onMounted(()=>{c.on("notify",I),c.on("close",u)}),(t,i)=>(o.openBlock(),o.createBlock(o.TransitionGroup,{"enter-active-class":l.value.length>1?[e.enter,e.moveDelay].join(" "):e.enter,"enter-from-class":e.enterFrom,"enter-to-class":e.enterTo,"leave-active-class":e.leave,"leave-from-class":e.leaveFrom,"leave-to-class":e.leaveTo,"move-class":e.move},{default:o.withCtx(()=>[o.renderSlot(t.$slots,"default",{notifications:_.value,close:h,hovering:E})]),_:3},8,["enter-active-class","enter-from-class","enter-to-class","leave-active-class","leave-from-class","leave-to-class","move-class"]))}}),f=o.defineComponent({inheritAttrs:!1,__name:"NotificationGroup",props:{group:{default:""},position:{default:"top"}},setup(n){const s=n;return o.provide(g,{group:s.group,position:s.position}),(e,p)=>o.renderSlot(e.$slots,"default",{group:e.group})}});function M(n){n.config.globalProperties.$notify=m(),n.component("Notification",a),n.component("NotificationGroup",f),n.component("notification",a),n.component("notificationGroup",f)}const C={install:M};function x(){return o.defineComponent((s,{slots:e})=>()=>o.h(a,s,e))}const G=m();exports.Notification=a;exports.NotificationGroup=f;exports.createNotifier=m;exports.default=C;exports.defineNotificationComponent=x;exports.notify=G;