vexip-ui/lib/components/drawer/drawer.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");const o=require("@vexip-ui/config"),Y=require("@vexip-ui/hooks"),i=require("@vexip-ui/utils"),A=require("./props.cjs"),F=require("./symbol.cjs"),L=require("../masker/masker.vue2.cjs"),m=require("../renderer/renderer.cjs"),U=require("../icon/icon.cjs"),x=require("../button/button.cjs"),j=["aria-modal","aria-labelledby","aria-describedby"],G=["id"],J=["id"],K=e.defineComponent({name:"Drawer",__name:"drawer",props:A.drawerProps,emits:["update:active"],setup(E,{expose:V,emit:_}){const T=E,r=o.useProps("drawer",T,{locale:null,transfer:!1,active:{default:!1,static:!0},width:{default:280,validator:t=>typeof t=="string"||t>0},height:{default:280,validator:t=>typeof t=="string"||t>0},placement:{default:"right",validator:t=>F.drawerPlacements.includes(t)},title:"",closable:!0,inner:!1,maskClose:!0,drawerClass:null,hideMask:!1,onBeforeClose:{default:null,isFunc:!0},resizable:!1,autoRemove:!1,footer:!1,confirmText:null,confirmProps:null,cancelText:null,cancelProps:null,loading:!1,confirmType:"primary",cancelType:"default",actionSize:o.createSizeProp("small"),undivided:!1,disableEsc:!1,slots:()=>({})}),q=_,b=e.useSlots(),n=o.useNameHelper("drawer"),N=o.useIcons(),S=o.useLocale("drawer",e.toRef(r,"locale")),p=e.ref(r.active),u=e.ref(r.width),c=e.ref(r.height),h=e.ref(),{target:P,moving:v}=Y.useMoving({onStart:(t,a)=>{if(!r.resizable||a.button>0||!h.value)return!1;const l=`${u.value}`.endsWith("%")?h.value.offsetWidth:i.toNumber(u.value),f=`${c.value}`.endsWith("%")?h.value.offsetHeight:i.toNumber(c.value);t.xStart=l,t.yStart=f,o.emitEvent(r.onResizeStart,{width:l,height:f})},onMove:(t,a)=>{const l=a.clientX-t.clientX,f=a.clientY-t.clientY;let z=i.toNumber(u.value),k=i.toNumber(c.value);switch(r.placement){case"top":{k=t.yStart+f;break}case"right":{z=t.xStart-l;break}case"bottom":{k=t.yStart-f;break}default:z=t.xStart+l}u.value=Math.max(z,100),c.value=Math.max(k,100),o.emitEvent(r.onResizeMove,{width:i.toNumber(u.value),height:i.toNumber(c.value)})},onEnd:()=>{o.emitEvent(r.onResizeEnd,{width:i.toNumber(u.value),height:i.toNumber(c.value)})}}),$=e.computed(()=>[n.b(),n.bs("vars"),{[n.bm("inherit")]:r.inherit,[n.bm("inner")]:r.inner,[n.bm("closable")]:r.closable,[n.bm("resizable")]:r.resizable,[n.bm("undivided")]:r.undivided}]),B=e.computed(()=>n.ns(`move-${r.placement}`)),R=e.computed(()=>[n.be("wrapper"),n.bem("wrapper",r.placement),{[n.bem("wrapper","hide-mask")]:r.hideMask,[n.bem("wrapper","resizing")]:v.value},r.drawerClass]),M=e.computed(()=>{const t=r.placement;if(t==="top"||t==="bottom"){const l=c.value;return{height:`${l}`.endsWith("%")?l:`${l}px`}}const a=u.value;return{width:`${a}`.endsWith("%")?a:`${a}px`}}),H=e.computed(()=>!!(b.header||b.title||r.title||r.slots.header||r.slots.title)),w=o.useId(),g=o.useId();e.watch(()=>r.active,t=>{p.value=t}),e.watch(()=>r.width,t=>{u.value=t}),e.watch(()=>r.height,t=>{c.value=t}),V({resizing:v,titleId:w,bodyId:g,wrapper:h,resizer:P,handleConfirm:C,handleCancel:y,handleClose:d});const s=e.shallowReadonly(e.reactive({resizing:v,handleConfirm:C,handleCancel:y,handleClose:d}));function W(t){p.value!==t&&(p.value=t,q("update:active",t),o.emitEvent(r.onToggle,t))}async function d(t=!1){let a=!0;return typeof r.onBeforeClose=="function"&&(a=r.onBeforeClose(t),i.isPromise(a)&&(a=await a)),a!==!1&&e.nextTick(()=>{W(!1),o.emitEvent(r.onClose)}),a}function D(){if(r.maskClose)return d()}function I(){o.emitEvent(r.onShow)}function X(){o.emitEvent(r.onHide)}function C(){d(!0),o.emitEvent(r.onConfirm)}function y(){d(!1),o.emitEvent(r.onCancel)}return(t,a)=>(e.openBlock(),e.createBlock(e.unref(L),{active:p.value,"onUpdate:active":a[1]||(a[1]=l=>p.value=l),inherit:e.unref(r).inherit,class:e.normalizeClass($.value),inner:e.unref(r).inner,"transition-name":B.value,closable:e.unref(r).maskClose,disabled:e.unref(r).hideMask,"on-before-close":D,transfer:e.unref(r).transfer,"auto-remove":e.unref(r).autoRemove,"disable-esc":e.unref(r).disableEsc,onShow:I,onHide:X},{default:e.withCtx(({show:l})=>[e.withDirectives(e.createElementVNode("section",{ref_key:"wrapper",ref:h,class:e.normalizeClass(R.value),style:e.normalizeStyle(M.value),role:"dialog","aria-modal":l?"true":void 0,"aria-labelledby":e.unref(w),"aria-describedby":e.unref(g)},[H.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(n).be("header"))},[e.renderSlot(t.$slots,"header",e.normalizeProps(e.guardReactiveProps(e.unref(s))),()=>[e.createVNode(e.unref(m),{renderer:e.unref(r).slots.header,data:e.unref(s)},{default:e.withCtx(()=>[e.createElementVNode("div",{id:e.unref(w),class:e.normalizeClass(e.unref(n).be("title"))},[e.renderSlot(t.$slots,"title",e.normalizeProps(e.guardReactiveProps(e.unref(s))),()=>[e.createVNode(e.unref(m),{renderer:e.unref(r).slots.title,data:e.unref(s)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r).title),1)]),_:1},8,["renderer","data"])])],10,G),e.unref(r).closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass(e.unref(n).be("close")),onClick:a[0]||(a[0]=f=>d())},[e.renderSlot(t.$slots,"close",e.normalizeProps(e.guardReactiveProps(e.unref(s))),()=>[e.createVNode(e.unref(m),{renderer:e.unref(r).slots.close,data:e.unref(s)},{default:e.withCtx(()=>[e.createVNode(e.unref(U),e.mergeProps(e.unref(N).close,{scale:+(e.unref(N).close.scale||1)*1.2,label:"close"}),null,16,["scale"])]),_:1},8,["renderer","data"])])],2)):e.createCommentVNode("",!0)]),_:3},8,["renderer","data"])])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{id:e.unref(g),class:e.normalizeClass(e.unref(n).be("content"))},[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps(e.unref(s))),()=>[e.createVNode(e.unref(m),{renderer:e.unref(r).slots.default,data:e.unref(s)},null,8,["renderer","data"])])],10,J),e.unref(r).footer||b.footer||e.unref(r).slots.footer?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(n).be("footer"))},[e.renderSlot(t.$slots,"footer",e.normalizeProps(e.guardReactiveProps(e.unref(s))),()=>[e.createVNode(e.unref(m),{renderer:e.unref(r).slots.footer,data:e.unref(s)},{default:e.withCtx(()=>[e.createVNode(e.unref(x),e.mergeProps({class:[e.unref(n).be("button"),e.unref(n).bem("button","cancel")],inherit:"",text:"",type:e.unref(r).cancelType,size:e.unref(r).actionSize},e.unref(r).cancelProps,{onClick:y}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r).cancelText||e.unref(S).cancel),1)]),_:1},16,["class","type","size"]),e.createVNode(e.unref(x),e.mergeProps({class:[e.unref(n).be("button"),e.unref(n).bem("button","confirm")],inherit:"",type:e.unref(r).confirmType,size:e.unref(r).actionSize,loading:e.unref(r).loading},e.unref(r).confirmProps,{onClick:C}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r).confirmText||e.unref(S).confirm),1)]),_:1},16,["class","type","size","loading"])]),_:1},8,["renderer","data"])])],2)):e.createCommentVNode("",!0),e.unref(r).resizable?(e.openBlock(),e.createElementBlock("div",{key:2,ref_key:"resizer",ref:P,class:e.normalizeClass([e.unref(n).be("handler"),e.unref(n).bem("handler",e.unref(r).placement),{[e.unref(n).bem("handler","resizing")]:e.unref(v)}])},[e.renderSlot(t.$slots,"handler",e.normalizeProps(e.guardReactiveProps(e.unref(s))),()=>[e.createVNode(e.unref(m),{renderer:e.unref(r).slots.handler,data:e.unref(s)},null,8,["renderer","data"])])],2)):e.createCommentVNode("",!0)],14,j),[[e.vShow,l]])]),_:3},8,["active","inherit","class","inner","transition-name","closable","disabled","transfer","auto-remove","disable-esc"]))}});module.exports=K;
//# sourceMappingURL=drawer.vue2.cjs.map