t-fighting-design/lib/notification/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),M=require("../../close-btn/index.js"),E=require("../../_utils/index3.js"),v=require("./index3.js"),N=require("../../_components/svg/index4.js"),S=require("../../_components/svg/index7.js"),T=require("../../_components/svg/index11.js"),V=require("../../_components/svg/index13.js"),I=require("../../_components/svg/index14.js"),g=require("../../_hooks/use-message/index.js");require("../../loading-bar/src/index2.js");const D={key:0,class:"f-notification__icon"},L={class:"f-notification__info"},w={class:"f-notification__title"},z={key:1,class:"f-notification__title-text"},$={key:1,class:"f-notification__text"},R=e.defineComponent({name:"FMessage"}),F=e.defineComponent({...R,props:v.Props,emits:v.Emits,setup(_,{expose:k}){const t=_,y={default:T.default,primary:S.default,success:V.default,danger:N.default,warning:I.default},l=e.computed(()=>t.icon?t.icon:t.type?y[t.type]:null),f=e.ref(),d=e.ref(0),i=e.ref(!1),B=e.computed(()=>t.placement.includes("top")),h=e.computed(()=>t.placement.includes("right")),C=e.computed(()=>g.massageManage.getSiblingOffset(t.placement,t.id,!B.value)),a=e.computed(()=>t.offset+C.value),b=e.computed(()=>d.value+a.value);e.onMounted(()=>{e.nextTick(()=>{d.value=f.value.getBoundingClientRect().height})});const j=e.computed(()=>{const{type:o,round:n,close:c,placement:s}=t;return["f-notification",{[`f-notification__${o}`]:o,[`f-notification__${s}`]:s,"f-notification__round":n,"f-notification__hasClose":c}]}),q=e.computed(()=>{const{color:o,background:n,zIndex:c}=t,s={color:o,background:n,zIndex:c};return t.placement.includes("bottom")?s.bottom=a.value+"px":s.top=a.value+"px",s}),r=e.ref(),m=()=>{!r.value||clearTimeout(r.value)},u=()=>{m(),i.value=!1},x=()=>{g.massageManage.removeInstance(t.placement,t.id)},p=()=>{!t.duration||(r.value=setTimeout(()=>{u()},t.duration))};return e.onMounted(()=>{p(),i.value=!0}),k({visible:i,bottom:b,close:u}),(o,n)=>(e.openBlock(),e.createBlock(e.Transition,{mode:"out-in",name:"f-notification-fade"+(e.unref(h)?"-right":"-left"),onBeforeLeave:x,onAfterLeave:n[0]||(n[0]=c=>o.$emit("destroy"))},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"notificationRef",ref:f,class:e.normalizeClass(e.unref(j)),style:e.normalizeStyle(e.unref(q)),onMouseleave:p,onMouseenter:m},[o.showIcon&&e.unref(l)?(e.openBlock(),e.createElementBlock("div",D,[e.isVNode(e.unref(l))?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{key:0,size:28})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",L,[e.createElementVNode("div",w,[e.isVNode(o.title)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.title),{key:0})):(e.openBlock(),e.createElementBlock("h3",z,e.toDisplayString(o.title),1))]),e.isVNode(o.message)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.message),{key:0})):(e.openBlock(),e.createElementBlock("div",$,e.toDisplayString(o.message),1))]),t.close?(e.openBlock(),e.createElementBlock("div",{key:1,class:"f-notification__close",onClick:u},[e.unref(E.isString)(o.closeBtn)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(o.closeBtn),1)],64)):(e.openBlock(),e.createBlock(e.unref(M.FCloseBtn),{key:1,size:16}))])):e.createCommentVNode("",!0)],38),[[e.vShow,i.value]])]),_:1},8,["name"]))}});exports.default=F;