vue-amazing-ui/lib/message/Message.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"),a=require("../utils/index.cjs"),L=["onMouseenter","onMouseleave","onClick"],T={key:1,class:"icon-svg",focusable:"false","data-icon":"info-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},D={key:2,class:"icon-svg",focusable:"false","data-icon":"check-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},x={key:3,class:"icon-svg",focusable:"false","data-icon":"close-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true","fill-rule":"evenodd",viewBox:"64 64 896 896"},R={key:4,class:"icon-svg",focusable:"false","data-icon":"exclamation-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},$={key:5,width:"1em",height:"1em",fill:"currentColor",class:"icon-svg circle",viewBox:"0 0 50 50"},j={class:"message-content"},q=e.defineComponent({__name:"Message",props:{content:{default:void 0},duration:{default:3e3},top:{default:30}},emits:["click","close"],setup(k,{expose:g,emit:y}){const u=k,v=e.ref(),r=e.ref([]),i=e.ref([]),t=e.ref([]),d=e.ref(null),f=e.ref(),{colorPalettes:B}=a.useInject("Message"),p=y,w=e.computed(()=>r.value.every(o=>!o));e.watch(w,(o,l)=>{!l&&o&&(v.value=a.rafTimeout(()=>{t.value=[],r.value=[]},300))}),e.onBeforeUnmount(()=>{i.value.forEach(o=>{o&&a.cancelRaf(o)})});function C(o){i.value[o]&&a.cancelRaf(i.value[o])}function E(o){h(o)}function z(o,l){t.value[l].onClick&&t.value[l].onClick(),p("click",o)}function h(o){d.value!==null&&(i.value[o]=a.rafTimeout(()=>{r.value[o]=!1,i.value[o]=null,t.value[o].onClose&&t.value[o].onClose(),p("close")},d.value))}function c(){v.value&&a.cancelRaf(v.value);const o=t.value.length-1,l=t.value[o];l.top!==void 0?f.value=typeof l.top=="number"?`${l.top}px`:l.top:f.value=typeof u.top=="number"?`${u.top}px`:u.top,r.value[o]=!0,l.duration!==null?(d.value=l.duration||u.duration,h(o)):d.value=null}function M(o){typeof o=="string"?t.value.push({content:o,mode:"open"}):t.value.push({...o,mode:"open"}),c()}function _(o){typeof o=="string"?t.value.push({content:o,mode:"info"}):t.value.push({...o,mode:"info"}),c()}function V(o){typeof o=="string"?t.value.push({content:o,mode:"success"}):t.value.push({...o,mode:"success"}),c()}function S(o){typeof o=="string"?t.value.push({content:o,mode:"error"}):t.value.push({...o,mode:"error"}),c()}function N(o){typeof o=="string"?t.value.push({content:o,mode:"warning"}):t.value.push({...o,mode:"warning"}),c()}function b(o){typeof o=="string"?t.value.push({content:o,mode:"loading"}):t.value.push({...o,mode:"loading"}),c()}return g({open:M,info:_,success:V,error:S,warning:N,loading:b}),(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:"message-wrap",style:e.normalizeStyle(`
      top: ${f.value};
      --message-primary-color: ${e.unref(B)[5]};
      --message-success-color: #52c41a;
      --message-warning-color: #faad14;
      --message-error-color: #ff4d4f;
    `)},[e.createVNode(e.TransitionGroup,{name:"slide-fade"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(n,s)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["message-container",n.class]),style:e.normalizeStyle(n.style),key:s},[e.createElementVNode("div",{class:e.normalizeClass(["message-content-wrap",`icon-${n.mode}`]),onMouseenter:m=>C(s),onMouseleave:m=>E(s),onClick:m=>z(m,s)},[n.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.icon),{key:0,class:"icon-svg"})):n.mode==="info"?(e.openBlock(),e.createElementBlock("svg",T,[...l[0]||(l[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 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"},null,-1)])])):n.mode==="success"?(e.openBlock(),e.createElementBlock("svg",D,[...l[1]||(l[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 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"},null,-1)])])):n.mode==="error"?(e.openBlock(),e.createElementBlock("svg",x,[...l[2]||(l[2]=[e.createElementVNode("path",{d:"M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"},null,-1)])])):n.mode==="warning"?(e.openBlock(),e.createElementBlock("svg",R,[...l[3]||(l[3]=[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 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"},null,-1)])])):n.mode==="loading"?(e.openBlock(),e.createElementBlock("svg",$,[...l[4]||(l[4]=[e.createElementVNode("circle",{class:"path",cx:"25",cy:"25",r:"20",fill:"none"},null,-1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",j,e.toDisplayString(n.content||o.content),1)],42,L)],6)),[[e.vShow,r.value[s]]])),128))]),_:1})],4))}});exports.default=q;