t-fighting-design/lib/message/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"),x=require("../../svg-icon/index.js"),h=require("../../close-btn/index.js"),g=require("./index3.js"),S=require("../../_utils/index3.js"),v=require("../../_hooks/use-message/index.js");require("../../loading-bar/src/index2.js");const T={key:2,class:"f-message__text"},j=e.defineComponent({name:"FMessage"}),q=e.defineComponent({...j,props:g.Props,emits:g.Emits,setup(k,{expose:B}){const t=k,u=e.ref(),m=e.ref(0),a=e.ref(!1),d=e.computed(()=>t.placement.includes("top")),y=e.computed(()=>v.massageManage.getSiblingOffset(t.placement,t.id,!d.value)),c=e.computed(()=>t.offset+y.value),_=e.computed(()=>m.value+c.value);e.onMounted(()=>{e.nextTick(()=>{m.value=u.value.getBoundingClientRect().height})});const C=e.computed(()=>{const{type:o,round:s,placement:n}=t;return["f-message",{[`f-message__${o}`]:o,[`f-message__${n}`]:n,"f-message__round":s}]}),b=e.computed(()=>{const{color:o,background:s,zIndex:n}=t,i={color:o,background:s,zIndex:n};return t.placement.includes("bottom")?i.bottom=c.value+"px":i.top=c.value+"px",i}),l=e.ref(),f=()=>{!l.value||clearTimeout(l.value)},r=()=>{f(),a.value=!1},M=()=>{v.massageManage.removeInstance(t.placement,t.id)},p=()=>{!t.duration||(l.value=setTimeout(()=>{r()},t.duration))};return e.onMounted(()=>{p(),a.value=!0}),B({visible:a,bottom:_,close:r}),(o,s)=>(e.openBlock(),e.createBlock(e.Transition,{mode:"out-in",name:"f-message-fade"+(e.unref(d)?"-top":"-bottom"),onBeforeLeave:M,onAfterLeave:s[0]||(s[0]=n=>o.$emit("destroy"))},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"messageRef",ref:u,class:e.normalizeClass(e.unref(C)),style:e.normalizeStyle(e.unref(b)),onMouseleave:p,onMouseenter:f},[e.isVNode(o.icon)?(e.openBlock(),e.createBlock(e.unref(x.FSvgIcon),{key:0,size:24,class:"f-message__icon"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon)))]),_:1})):e.createCommentVNode("",!0),e.isVNode(o.message)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.message),{key:1})):(e.openBlock(),e.createElementBlock("div",T,e.toDisplayString(o.message),1)),t.close?(e.openBlock(),e.createElementBlock("div",{key:3,class:"f-message__close",onClick:r},[e.unref(S.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(h.FCloseBtn),{key:1,size:16},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.closeBtn)))]),_:1}))])):e.createCommentVNode("",!0)],38),[[e.vShow,a.value]])]),_:1},8,["name"]))}});exports.default=q;