t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
2 lines (1 loc) • 1.68 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("./index3.js"),t=require("../../_utils/index3.js"),h=["onClick"],k=e.defineComponent({name:"FPopup"}),C=e.defineComponent({...k,props:r.Props,emits:r.Emits,setup(p,{emit:l}){const n=p,a=()=>{!n.maskClose||l("update:visible",!1)},d=o=>{n.open&&n.open(o)},c=o=>{n.openEnd&&n.openEnd(o)},u=o=>{n.close&&n.close(o)},m=o=>{n.closeEnd&&n.closeEnd(o)},f=e.computed(()=>{const{direction:o,popupSize:s,padding:i}=n;return o==="top"||o==="bottom"?{height:t.sizeChange(s),padding:t.sizeChange(i)}:{width:t.sizeChange(s),padding:t.sizeChange(i)}});return(o,s)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body",disabled:!o.appendToBody},[e.createVNode(e.Transition,{name:o.direction==="center"?"f-popup-center":"f-popup-other",onBeforeEnter:d,onAfterEnter:c,onBeforeLeave:u,onAfterLeave:m},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"f-popup",style:e.normalizeStyle({zIndex:o.zIndex})},[o.showMask?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["f-popup__mask",{"f-popup__blur":o.maskBlur}]),style:e.normalizeStyle({background:o.maskBackground,opacity:o.maskOpacity})},null,6)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["f-popup__container",{[`f-popup__container-${o.direction}`]:o.direction}]),onClick:e.withModifiers(a,["self"])},[e.createElementVNode("div",{class:"f-popup__wrapper",style:e.normalizeStyle(e.unref(f))},[e.renderSlot(o.$slots,"default")],4)],10,h)],4),[[e.vShow,o.visible]])]),_:3},8,["name"])],8,["disabled"]))}});exports.default=C;