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

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSplitter",props:{width:[Number,String],height:[Number,String],vertical:{type:Boolean,default:()=>(0,_ui.getConfig)().splitter.vertical},border:{type:Boolean,default:()=>(0,_ui.getConfig)().splitter.border},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().splitter.padding},resize:{type:Boolean,default:()=>(0,_ui.getConfig)().splitter.resize},items:Array,itemConfig:Object,barConfig:Object,resizeConfig:Object,actionConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().splitter.size||(0,_ui.getConfig)().size}},emits:["action-dblclick","action-click","toggle-expand","resize-start","resize-drag","resize-end"],setup(u,e){let{emit:l,slots:a}=e;var t=_xeUtils.default.uniqueId();let h=(0,_vue.ref)(),p=(0,_vue.ref)(),O=(0,_vue.ref)(),d=(0,_ui.useSize)(u).computeSize,g=(0,_vue.reactive)({staticItems:[],itemList:[],barWidth:0,barHeight:0}),v={wrapperWidth:0,wrapperHeight:0},A=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().splitter.itemConfig,u.itemConfig)),r=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().splitter.barConfig,u.barConfig)),M=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().splitter.resizeConfig,u.resizeConfig)),m=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().splitter.actionConfig,u.actionConfig)),H=(0,_vue.computed)(()=>g.itemList.filter(e=>e.isExpand)),I=(0,_vue.computed)(()=>{var e=u.vertical;let n=[],o=0,a=0;return g.itemList.forEach(e?e=>{var{renderHeight:t,resizeHeight:i,foldHeight:l,isExpand:r,height:s}=e,r=r?l||i||t:0;s||n.push(e),o+=r}:e=>{var{renderWidth:t,resizeWidth:i,foldWidth:l,isExpand:r,width:s}=e,r=r?l||i||t:0;s||n.push(e),a+=r}),{autoItems:n,heightCount:o,heightRatio:o/100,widthCount:a,widthRatio:a/100}}),f=(0,_vue.computed)(()=>{var{width:e,height:t}=r.value,i={};return t&&(i.height=(0,_dom.toCssUnit)(t)),e&&(i.width=(0,_dom.toCssUnit)(e)),i}),i={computeItemOpts:A,computeBarOpts:r,computeActionOpts:m},s={refElem:h},c={xID:t,props:u,context:e,reactData:g,internalData:v,getRefMaps:()=>s,getComputeMaps:()=>i},P=(e,t,i)=>{l(e,(0,_ui.createEvent)(i,{$splitter:c},t))},W=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=a[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],x=(e,t,i)=>{var l=u.vertical,r="SPLIT_TOP_ACTION",s="SPLIT_BOTTOM_ACTION",n="SPLIT_LEFT_ACTION",o="SPLIT_RIGHT_ACTION";let a="";return(a=l?i?t.isExpand?s:r:e.isExpand?r:s:i?t.isExpand?o:n:e.isExpand?n:o)?(0,_ui.getIcon)()[a]:""};let n=(e,t)=>{var i=g.staticItems,{showPrevButton:l,showNextButton:r}=m.value;let s={isExpand:!0,renderWidth:0,resizeWidth:0,foldWidth:0,renderHeight:0,resizeHeight:0,foldHeight:0};return g.itemList=e.map(e=>(e.showAction&&(0,_log.warnLog)("vxe.error.removeProp",["[splitter] show-action"]),e.slots&&_xeUtils.default.each(e.slots,e=>{_xeUtils.default.isFunction(e)||a[e]||(0,_log.errLog)("vxe.error.notSlot",["[splitter] "+e])}),Object.assign({},t?null:s,e,t?s:null,{id:_xeUtils.default.uniqueId()}))),i.length&&(0,_log.errLog)("vxe.error.errConflicts",["<vxe-splitter-panel ...>","items"]),(l||r)&&2<g.itemList.length&&(0,_log.errLog)("vxe.error.errConflicts",["action-config.showPrevButton | action-config.showNextButton","Only supports 2 item"]),D()},o=e=>n(e||[],!1);let _=t=>{var i=g.itemList;let l=-1,r=null,s=null,n=null;for(let e=0;e<i.length;e++){var o=i[e];if(o.name===t){l=e,r=o,s=i[e-1]||null,n=i[e+1]||null;break}}return{index:l,currItem:r,prevItem:s,nextItem:n}},b=(e,t)=>{var i,l,e=_(e);return e&&({currItem:e,prevItem:i,nextItem:l}=e,e)&&(t?!e.isExpand:e.isExpand)&&(l?l.isExpand&&z(null,e,l,!1):i&&i.isExpand&&z(null,i,e,!0)),(0,_vue.nextTick)()};let D=()=>(0,_vue.nextTick)().then(()=>{var e=u.vertical,t=g.itemList,l=h.value,a=p.value;if(l){var d=l.clientWidth,l=l.clientHeight;if(d&&l){a&&(g.barWidth=a.offsetWidth,g.barHeight=a.offsetHeight);let r=d-(e?0:g.barWidth*(t.length-1)),s=l-(e?g.barHeight*(t.length-1):0);a=A.value;let i=_xeUtils.default.toNumber(a.minWidth),n=_xeUtils.default.toNumber(a.minHeight),o=[];if(e){let l=0;if(t.forEach(e=>{var t=e.height;let i=0;t?(i=(0,_dom.isScale)(t)?s*_xeUtils.default.toNumber(t)/100:_xeUtils.default.toNumber(t),e.renderHeight=i):o.push(e),l+=i}),o.length){let t=(s-l)/o.length;o.forEach(e=>{e.renderHeight=Math.max(_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(e.minHeight,n)),t)})}}else{let l=0;if(t.forEach(e=>{var t=e.width;let i=0;t?(i=(0,_dom.isScale)(t)?r*_xeUtils.default.toNumber(t)/100:_xeUtils.default.toNumber(t),e.renderWidth=i):o.push(e),l+=i}),o.length){let t=(r-l)/o.length;o.forEach(e=>{e.renderWidth=Math.max(_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(e.minWidth,i)),t)})}}v.wrapperWidth=r,v.wrapperHeight=s}}}),E=e=>{let{resize:t,vertical:L}=u;var N=g.itemList;if(t){e.preventDefault();var S=e.currentTarget,T=S.parentElement;let U=h.value;if(U){let I=T.previousElementSibling,W=T.nextElementSibling;if(I&&W){let t=I.getAttribute("itemid"),i=W.getAttribute("itemid"),y=N.find(e=>e.id===t),H=N.find(e=>e.id===i);if(y&&H){let s=U.getBoundingClientRect();T=S.getBoundingClientRect();let n=O.value,o=n?n.children[0]:null;N=A.value;let t=M.value.immediate;var S=_xeUtils.default.toNumber(N.minWidth),N=_xeUtils.default.toNumber(N.minHeight),k=Math.ceil(T.width-(e.clientX-T.left)),T=Math.ceil(e.clientY-T.top);let i=I.offsetWidth,l=W.offsetWidth;var B=_xeUtils.default.toNumber(y?(0,_utils.getGlobalDefaultConfig)(y.minWidth,S):S),S=_xeUtils.default.toNumber(H?(0,_utils.getGlobalDefaultConfig)(H.minWidth,S):S);let r=I.offsetLeft+B-k,a=W.offsetLeft+W.offsetWidth-S-k,d=e.clientX-s.left,u=-1,h=0,p=0,g=d,v=I.offsetHeight,m=W.offsetHeight;B=_xeUtils.default.toNumber(y?(0,_utils.getGlobalDefaultConfig)(y.minHeight,N):N),S=_xeUtils.default.toNumber(H?(0,_utils.getGlobalDefaultConfig)(H.minHeight,N):N);let f=I.offsetTop+B+T,c=W.offsetTop+W.offsetHeight-S+T,x=e.clientY-s.top,_=-1,b=0,E=0,z=x,C=i=>{if(n){var l=o?o.children[0]:null,r=o?o.children[1]:null;if(L){let e=0,t=(l&&(_<0?l.style.display="none":(l.textContent=Math.floor(b)+"px",l.style.display="block",e=l.offsetWidth)),r&&(_<0?(r.textContent=Math.floor(E)+"px",r.style.display="block",e=r.offsetWidth):r.style.display="none"),Math.max(1,i.clientX-s.left-e/2));t>s.width-e-1&&(t=s.width-e-1),n.style.left="0",n.style.top=z+"px",o&&(o.style.left=t+"px")}else{let e=0,t=(l&&(u<0?l.style.display="none":(l.textContent=Math.floor(h)+"px",l.style.display="block",e=l.offsetHeight)),r&&(u<0?(r.textContent=Math.floor(p)+"px",r.style.display="block",e=r.offsetHeight):r.style.display="none"),Math.max(1,i.clientY-s.top-e/2));t>s.height-e-1&&(t=s.height-e-1),n.style.top="0",n.style.left=g+"px",o&&(o.style.top=t+"px")}}},w=e=>{L?((z=(z=e.clientY-s.top)<f?f:z)>c&&(z=c),_=z-x,b=v+_,E=m-_):((g=(g=e.clientX-s.left)<r?r:g)>a&&(g=a),u=g-d,h=i+u,p=l-u),t&&(L?(I.style.height=(0,_dom.toCssUnit)(b),W.style.height=(0,_dom.toCssUnit)(E)):(I.style.width=(0,_dom.toCssUnit)(h),W.style.width=(0,_dom.toCssUnit)(p))),n&&C(e),P("resize-drag",{prevItem:y,nextItem:H,offsetHeight:_,offsetWidth:u},e)};document.onmousemove=e=>{e.preventDefault(),w(e)},document.onmouseup=e=>{document.onmousemove=null,document.onmouseup=null,n&&(n.style.display=""),L?(y.resizeHeight=b,H.resizeHeight=E):(y.resizeWidth=h,H.resizeWidth=p),(0,_dom.removeClass)(U,"is--drag"),P("resize-end",{prevItem:y,nextItem:H,offsetHeight:_,offsetWidth:u},e),D()},n&&(n.style.display="block",C(e)),w(e),(0,_dom.addClass)(U,"is--drag"),P("resize-start",{prevItem:y,nextItem:H},e)}}}}},z=(e,t,i,l)=>{var r=u.vertical;let s=!1,n=t;l?(n=i,s=!i.isExpand,i.isExpand=s):(s=!t.isExpand,t.isExpand=s),r?t.isExpand&&i.isExpand?(t.foldHeight=0,i.foldHeight=0):t.isExpand?(i.foldHeight=0,t.foldHeight=(t.resizeHeight||t.renderHeight)+(i.resizeHeight||i.renderHeight)):(t.foldHeight=0,i.foldHeight=(t.resizeHeight||t.renderHeight)+(i.resizeHeight||i.renderHeight)):t.isExpand&&i.isExpand?(t.foldWidth=0,i.foldWidth=0):t.isExpand?(i.foldWidth=0,t.foldWidth=(t.resizeWidth||t.renderWidth)+(i.resizeWidth||i.renderWidth)):(t.foldWidth=0,i.foldWidth=(t.resizeWidth||t.renderWidth)+(i.resizeWidth||i.renderWidth)),e&&P("toggle-expand",{prevItem:t,nextItem:i,expanded:s,item:n},e),D()},C=e=>{var t=g.itemList,i=m.value,l=e.currentTarget.parentElement.parentElement;let r=l.previousElementSibling.getAttribute("itemid");var s=t.find(e=>e.id===r);let n=l.nextElementSibling.getAttribute("itemid");l=t.find(e=>e.id===n);"dblclick"===i.trigger&&s&&l&&l.isExpand&&z(e,s,l,!1),P("action-dblclick",{prevItem:s,nextItem:l},e)},w=e=>{var t=g.itemList,i=m.value,l=e.currentTarget.parentElement.parentElement;let r=l.previousElementSibling.getAttribute("itemid");var s=t.find(e=>e.id===r);let n=l.nextElementSibling.getAttribute("itemid");l=t.find(e=>e.id===n);"dblclick"!==i.trigger&&s&&l&&l.isExpand&&z(e,s,l,!1),P("action-click",{prevItem:s,nextItem:l},e)},y=e=>{var t=g.itemList,i=m.value,l=e.currentTarget.parentElement.parentElement;let r=l.previousElementSibling.getAttribute("itemid");var s=t.find(e=>e.id===r);let n=l.nextElementSibling.getAttribute("itemid");l=t.find(e=>e.id===n);"dblclick"===i.trigger&&s&&l&&s.isExpand&&z(e,s,l,!0),P("action-dblclick",{prevItem:s,nextItem:l},e)},N=e=>{var t=g.itemList,i=m.value,l=e.currentTarget.parentElement.parentElement;let r=l.previousElementSibling.getAttribute("itemid");var s=t.find(e=>e.id===r);let n=l.nextElementSibling.getAttribute("itemid");l=t.find(e=>e.id===n);"dblclick"!==i.trigger&&s&&l&&s.isExpand&&z(e,s,l,!0),P("action-click",{prevItem:s,nextItem:l},e)},S=()=>{D()};t={dispatchEvent:P,setItemExpand:b,toggleItemExpand:e=>{var t=_(e);if(t){t=t.currItem;if(t)return b(e,!t.isExpand)}return(0,_vue.nextTick)()},getItemExpand:e=>{e=_(e);if(e){e=e.currItem;if(e)return e.isExpand}return!1},recalculate:D,reset:()=>{var e=g.itemList;return e.forEach(e=>{e.isExpand=!0,e.foldHeight=0,e.foldWidth=0,e.resizeHeight=0,e.resizeWidth=0}),(0,_vue.nextTick)()},loadItem:o,reloadItem:e=>n(e||[],!0)};Object.assign(c,t,{});let T=(e,t)=>{var{border:i,resize:l,vertical:r}=u,s=g.itemList,n=f.value,o=m.value,a=o.direction,d=_xeUtils.default.isBoolean(o.showPrevButton)?o.showPrevButton:s.some(e=>e.showAction),o=_xeUtils.default.isBoolean(o.showNextButton)?o.showNextButton:"next"===a&&s.some(e=>e.showAction),a=M.value.immediate;return(0,_vue.h)("div",{class:["vxe-splitter-panel-handle",r?"is--vertical":"is--horizontal",a?"is-resize--immediate":"is-resize--lazy",{"is--resize":l,"is--border":i}]},[(0,_vue.h)("div",{class:"vxe-splitter-panel-handle-bar",style:n,onMousedown:E}),2===s.length?(0,_vue.h)("div",{class:"vxe-splitter-panel-action-btn-wrapper"},[d&&t.isExpand?(0,_vue.h)("div",{class:"vxe-splitter-panel-action-btn",onDblclick:C,onClick:w},[(0,_vue.h)("i",{class:x(e,t,!1)})]):(0,_ui.renderEmptyElement)(c),o&&e.isExpand?(0,_vue.h)("div",{class:"vxe-splitter-panel-action-btn",onDblclick:y,onClick:N},[(0,_vue.h)("i",{class:x(e,t,!0)})]):(0,_ui.renderEmptyElement)(c)]):(0,_ui.renderEmptyElement)(c)])};let U=(0,_vue.ref)(0);(0,_vue.watch)(()=>u.items?u.items.length:-1,()=>{U.value++}),(0,_vue.watch)(()=>u.items,()=>{U.value++}),(0,_vue.watch)(U,()=>{o(u.items||[])}),(0,_vue.watch)(()=>g.staticItems,e=>{var{showPrevButton:t,showNextButton:i}=m.value;u.items&&u.items.length&&(0,_log.errLog)("vxe.error.errConflicts",["<vxe-splitter-panel ...>","items"]),g.itemList=e||[],(t||i)&&2<g.itemList.length&&(0,_log.errLog)("vxe.error.modelConflicts",["[splitter] action-config.showPrevButton | action-config.showNextButton","<vxe-splitter-panel ...> Only supports 2 panel"]),g.itemList.forEach(e=>{e.showAction&&(0,_log.warnLog)("vxe.error.removeProp",["[splitter] showAction"])}),D()});let L;return(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{D()});var e=h.value,e=(e&&(L=_ui.globalResize.create(()=>{D()})).observe(e),m.value);e.direction&&(0,_log.errLog)("vxe.error.delProp",["[splitter] action-config.direction","action-config.showPrevButton | action-config.showNextButton"]),_ui.globalEvents.on(c,"resize",S)}),(0,_vue.onUnmounted)(()=>{L&&L.disconnect(),_ui.globalEvents.off(c,"resize")}),(0,_vue.onActivated)(()=>{D()}),u.items&&o(u.items),(0,_vue.provide)("$xeSplitter",c),c.renderVN=()=>{var{vertical:e,width:t,height:i}=u,l=d.value,{immediate:r,showTip:s}=M.value,n=a.default,o={};return i&&(o.height=(0,_dom.toCssUnit)(i)),t&&(o.width=(0,_dom.toCssUnit)(t)),(0,_vue.h)("div",{ref:h,class:["vxe-splitter",e?"is--vertical":"is--horizontal",r?"is-resize--immediate":"is-resize--lazy",{["size--"+l]:l}],style:o},[(0,_vue.h)("div",{class:"vxe-splitter-slots"},n?n({}):[]),(()=>{let{border:f,padding:c,resize:x,vertical:_}=u,b=g.itemList,E=d.value;let z=M.value.immediate,C=H.value,w=I.value.autoItems,y=[];return b.forEach((e,t)=>{var{id:i,name:l,slots:r,renderHeight:s,resizeHeight:n,foldHeight:o,renderWidth:a,resizeWidth:d,foldWidth:u,isExpand:h}=e,t=b[t+1],r=r?r.default:null,p={};let g=h?u||d||a:0,v=h?o||n||s:0,m=(1===w.length&&(_?e.height||(v=0):e.width||(g=0)),!0);_?v&&1<C.length&&(m=!1,p.height=(0,_dom.toCssUnit)(v)):g&&1<C.length&&(m=!1,p.width=(0,_dom.toCssUnit)(g)),y.push((0,_vue.h)("div",{itemid:i,class:["vxe-splitter-panel",_?"is--vertical":"is--horizontal",z?"is-resize--immediate":"is-resize--lazy",{["size--"+E]:E,"is--resize":x,"is--padding":c,"is--border":f,"is--height":v,"is--width":g,"is--visible":h,"is--hidden":!h,"is--fill":h&&m}],style:p},[(0,_vue.h)("div",{itemid:i,class:"vxe-splitter-panel--wrapper"},[(0,_vue.h)("div",{class:"vxe-splitter-panel--inner"},r?W(r,{name:l,isExpand:h}):[])])])),t&&y.push(T(e,t))}),(0,_vue.h)("div",{class:"vxe-splitter-wrapper"},y)})(),(0,_vue.h)("div",{ref:O,class:["vxe-splitter--resizable-splitter-tip",e?"is--vertical":"is--horizontal",r?"is-resize--immediate":"is-resize--lazy"]},s?[(0,_vue.h)("div",{class:"vxe-splitter--resizable-splitter-tip-number"},[(0,_vue.h)("div",{class:"vxe-splitter--resizable-splitter-number-prev"}),(0,_vue.h)("div",{class:"vxe-splitter--resizable-splitter-number-next"})])]:[]),(0,_vue.h)("div",{class:"vxe-splitter--render-vars"},[(0,_vue.h)("div",{ref:p,class:"vxe-splitter--handle-bar-info"})])])},c},render(){return this.renderVN()}});