vexip-ui/lib/components/modal/modal.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../button/index.cjs");require("../icon/index.cjs");require("../masker/index.cjs");require("../renderer/index.cjs");require("../resize-observer/index.cjs");const s=require("@vexip-ui/config"),D=require("@vexip-ui/hooks"),v=require("@vexip-ui/utils"),h=require("./props.cjs"),ae=require("../masker/masker.vue2.cjs"),se=require("../resize-observer/resize-observer.cjs"),b=require("../renderer/renderer.cjs"),le=require("../icon/icon.cjs"),I=require("../button/button.cjs"),ue=["aria-modal","aria-labelledby","aria-describedby"],fe=["id"],de=["id"],ce=e.defineComponent({name:"Modal",__name:"modal",props:h.modalProps,emits:["update:active"],setup(L,{expose:j,emit:A}){const i=s.useNameHelper("modal"),U=L,r=s.useProps("modal",U,{locale:null,transfer:!1,active:{default:!1,static:!0},width:h.positionProp,height:h.positionProp,top:h.positionProp,left:h.positionProp,right:h.positionProp,bottom:h.positionProp,title:"",closable:!0,inner:!1,maskClose:!0,modalClass:null,modalStyle:null,noFooter:!1,hideMask:!1,draggable:!1,resizable:!1,onBeforeClose:{default:null,isFunc:!0},loading:!1,minWidth:150,minHeight:120,transitionName:()=>i.ns("ease"),confirmText:null,cancelText:null,autoRemove:!1,confirmType:"primary",confirmProps:null,cancelType:"default",cancelProps:null,actionSize:s.createSizeProp("small"),undivided:!1,xOffset:0,yOffset:0,disableEsc:!1,slots:()=>({})}),X=A,V=e.useSlots(),T=s.useLocale("modal",e.toRef(r,"locale")),H=s.useIcons();function u(t){return!v.isNull(t)&&t!=="auto"}function d(t){return v.isValidNumber(t,!0)?`${v.toNumber(t)}px`:v.isNull(t)?"auto":String(t)}const c=e.ref(r.active),n=e.reactive({top:d(r.top),right:d(r.right),bottom:d(r.bottom),left:d(r.left),width:d(r.width),height:d(r.height)}),x=e.reactive({width:0,height:0}),p=e.reactive({width:0,height:0}),w=e.ref(!1),y=e.ref(),l=e.ref(),z=e.ref(),E=e.computed(()=>r.top==="auto"&&u(r.bottom)&&u(r.height)),$=e.computed(()=>r.left==="auto"&&u(r.right)&&u(r.width)),{target:C,moving:P}=D.useMoving({capture:!1,onStart:(t,o)=>{if(!l.value||!r.draggable||o.button>0)return!1;W(!1),w.value=!0,t.xStart=parseFloat(n.left),t.yStart=parseFloat(n.top),s.emitEvent(r.onDragStart,{top:t.yStart,left:t.xStart})},onMove:t=>{n.left=`${t.xEnd}px`,n.top=`${t.yEnd}px`,s.emitEvent(r.onDragMove,{top:t.yEnd,left:t.xEnd})},onEnd:t=>{s.emitEvent(r.onDragEnd,{top:t.yEnd,left:t.xEnd})}}),{target:_,moving:k}=D.useMoving({onStart:(t,o)=>{if(!l.value||!r.resizable||o.button>0)return!1;W();let a=32;C.value&&(a+=C.value.offsetHeight),z.value&&(a+=z.value.offsetHeight),w.value=!0,t.xStart=parseFloat(n.width),t.yStart=parseFloat(n.height),t.minHeight=Math.max(a,r.minHeight),s.emitEvent(r.onResizeStart,{width:t.xStart,height:t.yStart})},onMove:t=>{const o=Math.max(r.minWidth,t.xEnd,32),a=Math.max(t.minHeight,t.yEnd);n.width=`${o}px`,n.height=`${a}px`,s.emitEvent(r.onResizeMove,{width:o,height:a})},onEnd:t=>{const o=Math.max(r.minWidth,t.xEnd,32),a=Math.max(t.minHeight,t.yEnd);s.emitEvent(r.onResizeEnd,{width:o,height:a})}}),Y=e.computed(()=>[i.b(),i.bs("vars"),{[i.bm("inherit")]:r.inherit,[i.bm("inner")]:r.inner,[i.bm("draggable")]:r.draggable,[i.bm("resizable")]:r.resizable,[i.bm("undivided")]:r.undivided}]),Z=e.computed(()=>[i.be("wrapper"),{[i.bem("wrapper","closable")]:r.closable,[i.bem("wrapper","dragging")]:P.value,[i.bem("wrapper","resizing")]:k.value},r.modalClass]),G=e.computed(()=>{const t=[];return r.xOffset&&t.push(`translateX(${d(r.xOffset)})`),r.yOffset&&t.push(`translateY(${d(r.yOffset)})`),t.length&&t.push("translateZ(0)"),t.length?t.join(" "):void 0}),J=e.computed(()=>[r.modalStyle,{...n,height:n.height!=="auto"?n.height:void 0,transform:G.value}]),K=e.computed(()=>{const t={x:"50%",y:"50%"};if(w.value)t.x=`${parseFloat(n.left)+.5*p.width}px`,t.y=`${parseFloat(n.top)+.5*p.height}px`;else{if(E.value)t.y=`calc(100% - ${parseFloat(n.bottom)+.5*parseFloat(n.height)}px)`;else if(u(r.top)){const o=parseFloat(n.top);if(u(r.height))t.y=`${o+.5*parseFloat(n.height)}px`;else if(u(r.bottom)){const a=parseFloat(n.bottom),g=x.height-o-a;t.y=`${o+.5*g}px`}else t.y=`${parseFloat(n.top)+.5*p.height}px`}if($.value)t.x=`calc(100% - ${parseFloat(n.right)+.5*parseFloat(n.width)}px)`;else if(u(r.left)){const o=parseFloat(n.left);if(u(r.width))t.x=`${o+.5*parseFloat(n.width)}px`;else if(u(r.right)){const a=parseFloat(n.right),g=x.width-o-a;t.x=`${o+.5*g}px`}else t.x=`${parseFloat(n.left)+.5*p.width}px`}}return`${t.x} ${t.y}`}),Q=e.computed(()=>!!(V.header||V.title||r.title||r.slots.header||r.slots.title)),N=s.useId(),F=s.useId();for(const t of Object.keys(n))e.watch(()=>r[t],o=>{n[t]=d(o)});e.watch(()=>r.active,t=>{c.value=t}),e.watch(c,t=>{r.hideMask&&t&&S()}),e.watch([()=>r.top,()=>r.bottom,()=>r.height],()=>{c.value&&e.nextTick(B)}),e.watch([()=>r.left,()=>r.right,()=>r.width],()=>{c.value&&e.nextTick(O)});const S=()=>{var t;c.value&&!w.value&&e.nextTick(()=>{B(),O()}),(t=y.value)!=null&&t.wrapper&&(x.width=y.value.wrapper.offsetWidth,x.height=y.value.wrapper.offsetHeight)};j({dragging:P,resizing:k,titleId:N,bodyId:F,wrapper:l,header:C,footer:z,resizer:_,handleResize:S,handleConfirm:M,handleCancel:R,handleClose:m});const f=e.shallowReadonly(e.reactive({dragging:P,resizing:k,handleResize:S,handleConfirm:M,handleCancel:R,handleClose:m}));function ee(t){c.value!==t&&(c.value=t,X("update:active",t),s.emitEvent(r.onToggle,t))}function q(){if(!l.value)return document.body;let t=l.value.parentElement;for(;t&&t!==document.body;){if(getComputedStyle(t).position!=="static")return t;t=t.parentElement}return t}function B(){if(!l.value||r.top!=="auto"||E.value)return;const t=l.value.offsetHeight;r.inner?n.top=`${(q().offsetHeight-t)/2}px`:n.top=`${(window.innerHeight-t)/2-20}px`}function O(){if(!l.value||r.left!=="auto"||$.value)return;const t=l.value.offsetWidth;r.inner?n.left=`${(q().offsetWidth-t)/2}px`:n.left=`${(window.innerWidth-t)/2}px`}function W(t=!0){if(!l.value)return;const{offsetWidth:o,offsetHeight:a,offsetTop:g,offsetLeft:ie}=l.value;!t&&(!E.value&&r.bottom!=="auto"||!$.value&&r.right!=="auto")&&(t=!0),Object.assign(n,{top:`${g}px`,right:"auto",bottom:"auto",left:`${ie}px`},t?{width:`${o}px`,height:`${a}px`}:{})}function M(){m(!0),s.emitEvent(r.onConfirm)}function R(){m(!1),s.emitEvent(r.onCancel)}async function m(t=!1){let o=!0;return typeof r.onBeforeClose=="function"&&(o=r.onBeforeClose(t),v.isPromise(o)&&(o=await o)),o!==!1&&await e.nextTick(()=>{ee(!1),s.emitEvent(r.onClose)}),o}function te(){s.emitEvent(r.onShow)}function re(){s.emitEvent(r.onHide)}function oe(){if(r.maskClose)return m(!1)}function ne(t){var a;const o=(a=t.borderBoxSize)==null?void 0:a[0];o?(p.width=o.inlineSize,p.height=o.blockSize):(p.width=t.contentRect.width,p.height=t.contentRect.height)}return(t,o)=>(e.openBlock(),e.createBlock(e.unref(ae),{ref_key:"masker",ref:y,active:c.value,"onUpdate:active":o[4]||(o[4]=a=>c.value=a),inherit:e.unref(r).inherit,class:e.normalizeClass(Y.value),inner:e.unref(r).inner,"transition-name":e.unref(r).transitionName,closable:e.unref(r).maskClose,disabled:e.unref(r).hideMask,"on-before-close":oe,transfer:e.unref(r).transfer,"auto-remove":e.unref(r).autoRemove,"disable-esc":e.unref(r).disableEsc,onShow:te,onHide:re,onResize:S},{default:e.withCtx(({show:a})=>[e.withDirectives(e.createElementVNode("section",{class:e.normalizeClass(e.unref(i).be("transform")),style:e.normalizeStyle({transformOrigin:K.value})},[e.createVNode(e.unref(se),{onResize:ne},{default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"wrapper",ref:l,class:e.normalizeClass(Z.value),role:"dialog",style:e.normalizeStyle(J.value),"aria-modal":a?"true":void 0,"aria-labelledby":e.unref(N),"aria-describedby":e.unref(F)},[Q.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"header",ref:C,class:e.normalizeClass(e.unref(i).be("header"))},[e.renderSlot(t.$slots,"header",e.normalizeProps(e.guardReactiveProps(e.unref(f))),()=>[e.createVNode(e.unref(b),{renderer:e.unref(r).slots.header,data:e.unref(f)},{default:e.withCtx(()=>[e.createElementVNode("div",{id:e.unref(N),class:e.normalizeClass(e.unref(i).be("title"))},[e.renderSlot(t.$slots,"title",e.normalizeProps(e.guardReactiveProps(e.unref(f))),()=>[e.createVNode(e.unref(b),{renderer:e.unref(r).slots.title,data:e.unref(f)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r).title),1)]),_:1},8,["renderer","data"])])],10,fe),e.unref(r).closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass(e.unref(i).be("close")),onPointerdown:o[0]||(o[0]=e.withModifiers(()=>{},["stop"])),onMousedown:o[1]||(o[1]=e.withModifiers(()=>{},["stop"])),onTouchstart:o[2]||(o[2]=e.withModifiers(()=>{},["stop"])),onClick:o[3]||(o[3]=g=>m(!1))},[e.renderSlot(t.$slots,"close",e.normalizeProps(e.guardReactiveProps(e.unref(f))),()=>[e.createVNode(e.unref(b),{renderer:e.unref(r).slots.close,data:e.unref(f)},{default:e.withCtx(()=>[e.createVNode(e.unref(le),e.mergeProps(e.unref(H).close,{scale:+(e.unref(H).close.scale||1)*1.2,label:"close"}),null,16,["scale"])]),_:1},8,["renderer","data"])])],34)):e.createCommentVNode("",!0)]),_:3},8,["renderer","data"])])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{id:e.unref(F),class:e.normalizeClass(e.unref(i).be("content")),style:e.normalizeStyle({overflow:e.unref(k)?"hidden":void 0})},[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps(e.unref(f))),()=>[e.createVNode(e.unref(b),{renderer:e.unref(r).slots.default,data:e.unref(f)},null,8,["renderer","data"])])],14,de),e.unref(r).noFooter?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"footer",ref:z,class:e.normalizeClass(e.unref(i).be("footer"))},[e.renderSlot(t.$slots,"footer",e.normalizeProps(e.guardReactiveProps(e.unref(f))),()=>[e.createVNode(e.unref(b),{renderer:e.unref(r).slots.footer,data:e.unref(f)},{default:e.withCtx(()=>[e.createVNode(e.unref(I),e.mergeProps({class:[e.unref(i).be("button"),e.unref(i).bem("button","cancel")],inherit:"",text:"",type:e.unref(r).cancelType,size:e.unref(r).actionSize},e.unref(r).cancelProps,{onClick:R}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r).cancelText||e.unref(T).cancel),1)]),_:1},16,["class","type","size"]),e.createVNode(e.unref(I),e.mergeProps({class:[e.unref(i).be("button"),e.unref(i).bem("button","confirm")],inherit:"",type:e.unref(r).confirmType,size:e.unref(r).actionSize,loading:e.unref(r).loading},e.unref(r).confirmProps,{onClick:M}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r).confirmText||e.unref(T).confirm),1)]),_:1},16,["class","type","size","loading"])]),_:1},8,["renderer","data"])])],2)),e.unref(r).resizable?(e.openBlock(),e.createElementBlock("div",{key:2,ref_key:"resizer",ref:_,class:e.normalizeClass(e.unref(i).be("resizer"))},null,2)):e.createCommentVNode("",!0)],14,ue)]),_:2},1024)],6),[[e.vShow,a]])]),_:3},8,["active","inherit","class","inner","transition-name","closable","disabled","transfer","auto-remove","disable-esc"]))}});module.exports=ce;
//# sourceMappingURL=modal.vue2.cjs.map