vxe-pc-ui/lib/drawer/src/drawer.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.allActiveDrawers=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn"),_button=_interopRequireDefault(require("../../button/src/button")),_index=_interopRequireDefault(require("../../loading/index"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let allActiveDrawers=exports.allActiveDrawers=[];var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeDrawer",props:{modelValue:Boolean,id:String,title:String,loading:{type:Boolean,default:null},className:String,position:{type:[String,Object],default:()=>(0,_ui.getConfig)().drawer.position},lockView:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.lockView},lockScroll:Boolean,mask:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.mask},maskClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.maskClosable},escClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.escClosable},cancelClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.cancelClosable},confirmClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.confirmClosable},showHeader:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showHeader},showFooter:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showFooter},showClose:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showClose},content:[Number,String],showCancelButton:{type:Boolean,default:null},cancelButtonText:{type:String,default:()=>(0,_ui.getConfig)().drawer.cancelButtonText},showConfirmButton:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showConfirmButton},confirmButtonText:{type:String,default:()=>(0,_ui.getConfig)().drawer.confirmButtonText},destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.destroyOnClose},showTitleOverflow:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showTitleOverflow},width:[Number,String],height:[Number,String],resize:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.resize},zIndex:Number,transfer:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.transfer},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.padding},size:{type:String,default:()=>(0,_ui.getConfig)().drawer.size||(0,_ui.getConfig)().size},beforeHideMethod:{type:Function,default:()=>(0,_ui.getConfig)().drawer.beforeHideMethod},slots:Object},emits:["update:modelValue","show","hide","before-hide","close","confirm","cancel","resize"],setup(g,e){let{slots:p,emit:i}=e;var t=_xeUtils.default.uniqueId();let r=(0,_vue.inject)("$xeModal",null),l=(0,_vue.inject)("$xeDrawer",null),o=(0,_vue.inject)("$xeTable",null),a=(0,_vue.inject)("$xeForm",null),h=(0,_ui.useSize)(g).computeSize,m=(0,_vue.ref)(),x=(0,_vue.ref)(),n=(0,_vue.ref)(),s=(0,_vue.ref)(),b=(0,_vue.reactive)({initialized:!1,visible:!1,contentVisible:!1,drawerZIndex:0,resizeFlag:1}),u={refElem:m},y=(0,_vue.computed)(()=>{var e=g.transfer;if(null===e){var t=(0,_ui.getConfig)().modal.transfer;if(_xeUtils.default.isBoolean(t))return t;if(o||r||l||a)return!0}return e}),C=(0,_vue.computed)(()=>{switch(g.position){case"top":return"sb";case"bottom":return"st";case"left":return"wr"}return"wl"}),d={},B={xID:t,props:g,context:e,reactData:b,getRefMaps:()=>u,getComputeMaps:()=>d},k=()=>x.value,c=()=>{var{width:e,height:t}=g,r=k();return r&&(r.style.width=(0,_dom.toCssUnit)(e),r.style.height=(0,_dom.toCssUnit)(t)),(0,_vue.nextTick)()},v=()=>{var e=g.zIndex,t=b.drawerZIndex;e?b.drawerZIndex=e:t<(0,_utils.getLastZIndex)()&&(b.drawerZIndex=(0,_utils.nextZIndex)())},_=()=>{-1<allActiveDrawers.indexOf(B)&&_xeUtils.default.remove(allActiveDrawers,e=>e===B)},f=e=>{var t=g.beforeHideMethod,r=b.visible;let l={type:e};return r&&Promise.resolve(t?t(l):null).then(e=>{_xeUtils.default.isError(e)||(b.contentVisible=!1,_(),z("before-hide",l,null),setTimeout(()=>{b.visible=!1,i("update:modelValue",!1),z("hide",l,null)},200))}).catch(e=>e),(0,_vue.nextTick)()},w=e=>{var t="close";z(t,{type:t},e),f(t)},E=e=>{var t=g.confirmClosable,r="confirm";z(r,{type:r},e),t&&f(r)},V=e=>{var t=g.cancelClosable,r="cancel";z(r,{type:r},e),t&&f(r)},S=()=>{let r=g.showFooter;var{initialized:e,visible:t}=b;return e||(b.initialized=!0),t||(b.visible=!0,b.contentVisible=!1,v(),allActiveDrawers.push(B),setTimeout(()=>{c(),b.contentVisible=!0,(0,_vue.nextTick)(()=>{r&&(e=n.value,t=s.value,e=e||t)&&e.focus();var e,t={type:""};i("update:modelValue",!0),z("show",t,null)})},10)),(0,_vue.nextTick)()},z=(e,t,r)=>{i(e,(0,_ui.createEvent)(r,{$drawer:B},t))};t={dispatchEvent:z,open:S,close(){return f("close")},getBox:k};let D=e=>{var t=m.value;g.maskClosable&&e.target===t&&f("mask")},N=t=>{if(_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ESCAPE)){let e=_xeUtils.default.max(allActiveDrawers,e=>e.reactData.drawerZIndex);e&&setTimeout(()=>{e===B&&e.props.escClosable&&(z("close",{type:"exit"},t),f("exit"))},10)}},T=()=>{let t=b.drawerZIndex;allActiveDrawers.some(e=>e.reactData.visible&&e.reactData.drawerZIndex>t)&&v()},I=e=>{e.preventDefault();let{visibleHeight:o,visibleWidth:a}=(0,_dom.getDomNode)();let n=e.target.getAttribute("type"),s=a,u=o,d=k(),c=d.clientWidth,v=d.clientHeight,_=e.clientX,f=e.clientY,w=d.offsetTop,g=d.offsetLeft,p={type:"resize"};document.onmousemove=e=>{e.preventDefault();let t,r,l,i;switch(n){case"wl":t=_-e.clientX,l=t+c,0<g-t&&0<l&&(d.style.width=`${l<s?l:s}px`);break;case"st":r=f-e.clientY,i=v+r,0<w-r&&0<i&&(d.style.height=`${i<u?i:u}px`);break;case"wr":t=e.clientX-_,l=t+c,g+l+0<a&&0<l&&(d.style.width=`${l<s?l:s}px`);break;case"sb":r=e.clientY-f,i=r+v,w+i+0<o&&0<i&&(d.style.height=`${i<u?i:u}px`)}d.className=d.className.replace(/\s?is--drag/,"")+" is--drag",z("resize",p,e),b.resizeFlag++},document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null,b.resizeFlag++,setTimeout(()=>{d.className=d.className.replace(/\s?is--drag/,"")},50)}};Object.assign(B,t,{});let $=()=>{var{slots:e={},showClose:t,title:r}=g,l=p.title||e.title,e=p.corner||e.corner;return[(0,_vue.h)("div",{class:"vxe-drawer--header-title"},l?(0,_vn.getSlotVNs)(l({$drawer:B})):r?(0,_utils.getFuncText)(r):(0,_ui.getI18n)("vxe.alert.title")),(0,_vue.h)("div",{class:"vxe-drawer--header-right"},[e?(0,_vue.h)("div",{class:"vxe-drawer--corner-wrapper"},(0,_vn.getSlotVNs)(e({$drawer:B}))):(0,_ui.renderEmptyElement)(B),t?(0,_vue.h)("div",{class:["vxe-drawer--close-btn","trigger--btn"],title:(0,_ui.getI18n)("vxe.drawer.close"),onClick:w},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().DRAWER_CLOSE})]):(0,_ui.renderEmptyElement)(B)])]},q=()=>{var{slots:e={},showCancelButton:t,showConfirmButton:r,loading:l}=g,i=p.leftfoot||e.leftfoot,e=p.rightfoot||e.rightfoot,o=[];return t&&o.push((0,_vue.h)(_button.default,{key:1,ref:s,content:g.cancelButtonText||(0,_ui.getI18n)("vxe.button.cancel"),onClick:V})),r&&o.push((0,_vue.h)(_button.default,{key:2,ref:n,loading:l,status:"primary",content:g.confirmButtonText||(0,_ui.getI18n)("vxe.button.confirm"),onClick:E})),(0,_vue.h)("div",{class:"vxe-drawer--footer-wrapper"},[(0,_vue.h)("div",{class:"vxe-drawer--footer-left"},i?(0,_vn.getSlotVNs)(i({$drawer:B})):[]),(0,_vue.h)("div",{class:"vxe-drawer--footer-right"},e?(0,_vn.getSlotVNs)(e({$drawer:B})):o)])};return(0,_vue.watch)(()=>g.width,c),(0,_vue.watch)(()=>g.height,c),(0,_vue.watch)(()=>g.modelValue,e=>{e?S():f("model")}),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{g.modelValue&&S(),c()}),g.escClosable&&_ui.globalEvents.on(B,"keydown",N)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(B,"keydown"),_()}),(0,_vue.provide)("$xeDrawer",B),B.renderVN=()=>{var{slots:e={},className:t,position:r,loading:l,lockScroll:i,padding:o,lockView:a,mask:n,resize:s,destroyOnClose:u}=g,{initialized:d,contentVisible:c,visible:v}=b,e=p.aside||e.aside,_=h.value,f=C.value,w=y.value;return(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!w||!d},[(0,_vue.h)("div",{ref:m,class:["vxe-drawer--wrapper","pos--"+r,t||"",{["size--"+_]:_,"is--padding":o,"lock--scroll":i,"lock--view":a,"is--resize":s,"is--mask":n,"is--visible":c,"is--active":v,"is--loading":l}],style:{zIndex:b.drawerZIndex},onClick:D},[(0,_vue.h)("div",{ref:x,class:"vxe-drawer--box",onMousedown:T},[e?(0,_vue.h)("div",{class:"vxe-drawer--aside"},(0,_vn.getSlotVNs)(e({$drawer:B}))):(0,_ui.renderEmptyElement)(B),(0,_vue.h)("div",{class:"vxe-drawer--container"},!b.initialized||u&&!b.visible?[]:[(()=>{var{slots:e={},showTitleOverflow:t}=g,e=p.header||e.header;return g.showHeader?(0,_vue.h)("div",{class:["vxe-drawer--header",{"is--ellipsis":t}]},e?(0,_vn.getSlotVNs)(e({$drawer:B})):$()):(0,_ui.renderEmptyElement)(B)})(),(()=>{var{slots:e={},content:t}=g,r=p.default||e.default,l=p.left||e.left,e=p.right||e.right;return(0,_vue.h)("div",{class:"vxe-drawer--body"},[l?(0,_vue.h)("div",{class:"vxe-drawer--body-left"},(0,_vn.getSlotVNs)(l({$drawer:B}))):(0,_ui.renderEmptyElement)(B),(0,_vue.h)("div",{class:"vxe-drawer--body-default"},[(0,_vue.h)("div",{class:"vxe-drawer--content"},r?(0,_vn.getSlotVNs)(r({$drawer:B})):(0,_utils.getFuncText)(t))]),e?(0,_vue.h)("div",{class:"vxe-drawer--body-right"},(0,_vn.getSlotVNs)(e({$drawer:B}))):(0,_ui.renderEmptyElement)(B),(0,_vue.h)(_index.default,{class:"vxe-drawer--loading",modelValue:g.loading})])})(),(()=>{var{slots:e={}}=g,e=p.footer||e.footer;return g.showFooter?(0,_vue.h)("div",{class:"vxe-drawer--footer"},e?(0,_vn.getSlotVNs)(e({$drawer:B})):[q()]):(0,_ui.renderEmptyElement)(B)})(),s?(0,_vue.h)("span",{class:"vxe-drawer--resize"},[(0,_vue.h)("span",{class:f+"-resize",type:f,onMousedown:I})]):(0,_ui.renderEmptyElement)(B)])])])])},B},render(){return this.renderVN()}});