vue-amazing-ui/lib/notification/Notification.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("../utils/index.cjs"),D=["onMouseenter","onMouseleave"],$={key:1,class:"icon-svg",viewBox:"64 64 896 896","data-icon":"info-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",focusable:"false"},H={key:2,class:"icon-svg",viewBox:"64 64 896 896","data-icon":"check-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",focusable:"false"},x={key:3,class:"icon-svg",viewBox:"64 64 896 896","data-icon":"exclamation-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",focusable:"false"},P={key:4,class:"icon-svg",viewBox:"64 64 896 896","data-icon":"close-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",focusable:"false"},j={class:"notification-content"},q={class:"notification-title"},A={class:"notification-description"},F=["onClick"],G=e.defineComponent({__name:"Notification",props:{title:{default:void 0},description:{default:void 0},duration:{default:4500},top:{default:24},bottom:{default:24},placement:{default:"topRight"}},emits:["close"],setup(k,{expose:E,emit:w}){const d=k,m=e.ref(),i=e.ref([]),c=e.ref([]),l=e.ref([]),f=e.ref(null),a=e.ref(),v=e.ref(),{colorPalettes:B}=s.useInject("Notification"),C=w,y=e.computed(()=>["topRight","topLeft"].includes(a.value)?{top:`${d.top}px`}:{}),z=e.computed(()=>["bottomRight","bottomLeft"].includes(a.value)?{bottom:`${d.bottom}px`}:{}),N=e.computed(()=>i.value.length===l.value.length);e.watch(N,(t,o)=>{!o&&t&&(m.value=s.rafTimeout(()=>{i.value=[],l.value=[]},300))},{flush:"post"}),e.watchEffect(()=>{a.value=d.placement}),e.onBeforeUnmount(()=>{c.value.forEach(t=>{t&&s.cancelRaf(t)})});function V(t){b(t)}function _(t){i.value.includes(t)||h(t)}function b(t){c.value[t]&&s.cancelRaf(c.value[t]),c.value[t]=null}function h(t){f.value!==null&&(c.value[t]=s.rafTimeout(()=>{p(t)},f.value))}async function p(t){v.value[t].style.maxHeight=v.value[t].offsetHeight+"px",await e.nextTick(),i.value.push(t),c.value[t]=null,l.value[t].onClose&&l.value[t].onClose(),C("close")}function r(){m.value&&s.cancelRaf(m.value),c.value.push(null);const t=l.value.length-1,o=l.value[t];o.placement&&(a.value=o.placement),o.duration!==null?(f.value=o.duration||d.duration,h(t)):f.value=null}function M(t){l.value.push({...t,mode:"open"}),r()}function S(t){l.value.push({...t,mode:"info"}),r()}function L(t){l.value.push({...t,mode:"success"}),r()}function R(t){l.value.push({...t,mode:"error"}),r()}function T(t){l.value.push({...t,mode:"warning"}),r()}return E({open:M,info:S,success:L,error:R,warning:T}),(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["notification-wrap",`notification-${a.value}`]),style:e.normalizeStyle([y.value,z.value,`
        --notification-primary-color: ${e.unref(B)[5]};
        --notification-success-color: #52c41a;
        --notification-error-color: #ff4d4f;
        --notification-warning-color: #faad14;
      `])},[e.createVNode(e.TransitionGroup,{name:["topRight","bottomRight"].includes(a.value)?"right":"left"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(n,u)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{ref_for:!0,ref_key:"notificationRef",ref:v,class:e.normalizeClass(["notification-container",[`icon-${n.mode}`,n.class]]),style:e.normalizeStyle(n.style),key:u,onMouseenter:g=>V(u),onMouseleave:g=>_(u)},[n.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.icon),{key:0,class:"icon-svg"})):n.mode==="info"?(e.openBlock(),e.createElementBlock("svg",$,[...o[0]||(o[0]=[e.createElementVNode("path",{d:"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"},null,-1),e.createElementVNode("path",{d:"M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"},null,-1)])])):n.mode==="success"?(e.openBlock(),e.createElementBlock("svg",H,[...o[1]||(o[1]=[e.createElementVNode("path",{d:"M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"},null,-1),e.createElementVNode("path",{d:"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"},null,-1)])])):n.mode==="warning"?(e.openBlock(),e.createElementBlock("svg",x,[...o[2]||(o[2]=[e.createElementVNode("path",{d:"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"},null,-1),e.createElementVNode("path",{d:"M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"},null,-1)])])):n.mode==="error"?(e.openBlock(),e.createElementBlock("svg",P,[...o[3]||(o[3]=[e.createElementVNode("path",{d:"M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"},null,-1),e.createElementVNode("path",{d:"M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"},null,-1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",j,[e.createElementVNode("div",q,e.toDisplayString(n.title||t.title),1),e.createElementVNode("div",A,e.toDisplayString(n.description||t.description),1)]),e.createElementVNode("a",{tabindex:"0",class:"notification-close",onClick:g=>p(u)},[...o[4]||(o[4]=[e.createElementVNode("svg",{class:"close-svg",viewBox:"64 64 896 896","data-icon":"close",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",focusable:"false"},[e.createElementVNode("path",{d:"M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"})],-1)])],8,F)],46,D)),[[e.vShow,!i.value.includes(u)]])),128))]),_:1},8,["name"])],6))}});exports.default=G;