| 123 |
- import{al as g,o as P,a as S,O as M,Q as C,M as f,j as y,am as x,_ as p,U as l,u as d,Y as m}from"./vue.aade88c7.js";import{_ as E}from"./index.f6b6c69f.js";const v={name:"splitpanes",emits:["ready","resize","resized","pane-click","pane-maximize","pane-add","pane-remove","splitter-click"],props:{horizontal:{type:Boolean},pushOtherPanes:{type:Boolean,default:!0},dblClickSplitter:{type:Boolean,default:!0},rtl:{type:Boolean,default:!1},firstSplitter:{type:Boolean}},provide(){return{requestUpdate:this.requestUpdate,onPaneAdd:this.onPaneAdd,onPaneRemove:this.onPaneRemove,onPaneClick:this.onPaneClick}},data:()=>({container:null,ready:!1,panes:[],touch:{mouseDown:!1,dragging:!1,activeSplitter:null},splitterTaps:{splitter:null,timeoutId:null}}),computed:{panesCount(){return this.panes.length},indexedPanes(){return this.panes.reduce((e,s)=>(e[s.id]=s)&&e,{})}},methods:{updatePaneComponents(){this.panes.forEach(e=>{e.update&&e.update({[this.horizontal?"height":"width"]:`${this.indexedPanes[e.id].size}%`})})},bindEvents(){document.addEventListener("mousemove",this.onMouseMove,{passive:!1}),document.addEventListener("mouseup",this.onMouseUp),"ontouchstart"in window&&(document.addEventListener("touchmove",this.onMouseMove,{passive:!1}),document.addEventListener("touchend",this.onMouseUp))},unbindEvents(){document.removeEventListener("mousemove",this.onMouseMove,{passive:!1}),document.removeEventListener("mouseup",this.onMouseUp),"ontouchstart"in window&&(document.removeEventListener("touchmove",this.onMouseMove,{passive:!1}),document.removeEventListener("touchend",this.onMouseUp))},onMouseDown(e,s){this.bindEvents(),this.touch.mouseDown=!0,this.touch.activeSplitter=s},onMouseMove(e){this.touch.mouseDown&&(e.preventDefault(),this.touch.dragging=!0,this.calculatePanesSize(this.getCurrentMouseDrag(e)),this.$emit("resize",this.panes.map(s=>({min:s.min,max:s.max,size:s.size}))))},onMouseUp(){this.touch.dragging&&this.$emit("resized",this.panes.map(e=>({min:e.min,max:e.max,size:e.size}))),this.touch.mouseDown=!1,setTimeout(()=>{this.touch.dragging=!1,this.unbindEvents()},100)},onSplitterClick(e,s){"ontouchstart"in window&&(e.preventDefault(),this.dblClickSplitter&&(this.splitterTaps.splitter===s?(clearTimeout(this.splitterTaps.timeoutId),this.splitterTaps.timeoutId=null,this.onSplitterDblClick(e,s),this.splitterTaps.splitter=null):(this.splitterTaps.splitter=s,this.splitterTaps.timeoutId=setTimeout(()=>{this.splitterTaps.splitter=null},500)))),this.touch.dragging||this.$emit("splitter-click",this.panes[s])},onSplitterDblClick(e,s){let n=0;this.panes=this.panes.map((i,t)=>(i.size=t===s?i.max:i.min,t!==s&&(n+=i.min),i)),this.panes[s].size-=n,this.$emit("pane-maximize",this.panes[s]),this.$emit("resized",this.panes.map(i=>({min:i.min,max:i.max,size:i.size})))},onPaneClick(e,s){this.$emit("pane-click",this.indexedPanes[s])},getCurrentMouseDrag(e){const s=this.container.getBoundingClientRect(),{clientX:n,clientY:i}="ontouchstart"in window&&e.touches?e.touches[0]:e;return{x:n-s.left,y:i-s.top}},getCurrentDragPercentage(e){e=e[this.horizontal?"y":"x"];const s=this.container[this.horizontal?"clientHeight":"clientWidth"];return this.rtl&&!this.horizontal&&(e=s-e),e*100/s},calculatePanesSize(e){const s=this.touch.activeSplitter;let n={prevPanesSize:this.sumPrevPanesSize(s),nextPanesSize:this.sumNextPanesSize(s),prevReachedMinPanes:0,nextReachedMinPanes:0};const i=0+(this.pushOtherPanes?0:n.prevPanesSize),t=100-(this.pushOtherPanes?0:n.nextPanesSize),a=Math.max(Math.min(this.getCurrentDragPercentage(e),t),i);let o=[s,s+1],r=this.panes[o[0]]||null,h=this.panes[o[1]]||null;const c=r.max<100&&a>=r.max+n.prevPanesSize,_=h.max<100&&a<=100-(h.max+this.sumNextPanesSize(s+1));if(c||_){c?(r.size=r.max,h.size=Math.max(100-r.max-n.prevPanesSize-n.nextPanesSize,0)):(r.size=Math.max(100-h.max-n.prevPanesSize-this.sumNextPanesSize(s+1),0),h.size=h.max);return}if(this.pushOtherPanes){const z=this.doPushOtherPanes(n,a);if(!z)return;({sums:n,panesToResize:o}=z),r=this.panes[o[0]]||null,h=this.panes[o[1]]||null}r!==null&&(r.size=Math.min(Math.max(a-n.prevPanesSize-n.prevReachedMinPanes,r.min),r.max)),h!==null&&(h.size=Math.min(Math.max(100-a-n.nextPanesSize-n.nextReachedMinPanes,h.min),h.max))},doPushOtherPanes(e,s){const n=this.touch.activeSplitter,i=[n,n+1];return s<e.prevPanesSize+this.panes[i[0]].min&&(i[0]=this.findPrevExpandedPane(n).index,e.prevReachedMinPanes=0,i[0]<n&&this.panes.forEach((t,a)=>{a>i[0]&&a<=n&&(t.size=t.min,e.prevReachedMinPanes+=t.min)}),e.prevPanesSize=this.sumPrevPanesSize(i[0]),i[0]===void 0)?(e.prevReachedMinPanes=0,this.panes[0].size=this.panes[0].min,this.panes.forEach((t,a)=>{a>0&&a<=n&&(t.size=t.min,e.prevReachedMinPanes+=t.min)}),this.panes[i[1]].size=100-e.prevReachedMinPanes-this.panes[0].min-e.prevPanesSize-e.nextPanesSize,null):s>100-e.nextPanesSize-this.panes[i[1]].min&&(i[1]=this.findNextExpandedPane(n).index,e.nextReachedMinPanes=0,i[1]>n+1&&this.panes.forEach((t,a)=>{a>n&&a<i[1]&&(t.size=t.min,e.nextReachedMinPanes+=t.min)}),e.nextPanesSize=this.sumNextPanesSize(i[1]-1),i[1]===void 0)?(e.nextReachedMinPanes=0,this.panes[this.panesCount-1].size=this.panes[this.panesCount-1].min,this.panes.forEach((t,a)=>{a<this.panesCount-1&&a>=n+1&&(t.size=t.min,e.nextReachedMinPanes+=t.min)}),this.panes[i[0]].size=100-e.prevPanesSize-e.nextReachedMinPanes-this.panes[this.panesCount-1].min-e.nextPanesSize,null):{sums:e,panesToResize:i}},sumPrevPanesSize(e){return this.panes.reduce((s,n,i)=>s+(i<e?n.size:0),0)},sumNextPanesSize(e){return this.panes.reduce((s,n,i)=>s+(i>e+1?n.size:0),0)},findPrevExpandedPane(e){return[...this.panes].reverse().find(s=>s.index<e&&s.size>s.min)||{}},findNextExpandedPane(e){return this.panes.find(s=>s.index>e+1&&s.size>s.min)||{}},checkSplitpanesNodes(){Array.from(this.container.children).forEach(e=>{const s=e.classList.contains("splitpanes__pane"),n=e.classList.contains("splitpanes__splitter");!s&&!n&&(e.parentNode.removeChild(e),console.warn("Splitpanes: Only <pane> elements are allowed at the root of <splitpanes>. One of your DOM nodes was removed."))})},addSplitter(e,s,n=!1){const i=e-1,t=document.createElement("div");t.classList.add("splitpanes__splitter"),n||(t.onmousedown=a=>this.onMouseDown(a,i),typeof window<"u"&&"ontouchstart"in window&&(t.ontouchstart=a=>this.onMouseDown(a,i)),t.onclick=a=>this.onSplitterClick(a,i+1)),this.dblClickSplitter&&(t.ondblclick=a=>this.onSplitterDblClick(a,i+1)),s.parentNode.insertBefore(t,s)},removeSplitter(e){e.onmousedown=void 0,e.onclick=void 0,e.ondblclick=void 0,e.parentNode.removeChild(e)},redoSplitters(){const e=Array.from(this.container.children);e.forEach(n=>{n.className.includes("splitpanes__splitter")&&this.removeSplitter(n)});let s=0;e.forEach(n=>{n.className.includes("splitpanes__pane")&&(!s&&this.firstSplitter?this.addSplitter(s,n,!0):s&&this.addSplitter(s,n),s++)})},requestUpdate({target:e,...s}){const n=this.indexedPanes[e._.uid];Object.entries(s).forEach(([i,t])=>n[i]=t)},onPaneAdd(e){let s=-1;Array.from(e.$el.parentNode.children).some(t=>(t.className.includes("splitpanes__pane")&&s++,t===e.$el));const n=parseFloat(e.minSize),i=parseFloat(e.maxSize);this.panes.splice(s,0,{id:e._.uid,index:s,min:isNaN(n)?0:n,max:isNaN(i)?100:i,size:e.size===null?null:parseFloat(e.size),givenSize:e.size,update:e.update}),this.panes.forEach((t,a)=>t.index=a),this.ready&&this.$nextTick(()=>{this.redoSplitters(),this.resetPaneSizes({addedPane:this.panes[s]}),this.$emit("pane-add",{index:s,panes:this.panes.map(t=>({min:t.min,max:t.max,size:t.size}))})})},onPaneRemove(e){const s=this.panes.findIndex(i=>i.id===e._.uid),n=this.panes.splice(s,1)[0];this.panes.forEach((i,t)=>i.index=t),this.$nextTick(()=>{this.redoSplitters(),this.resetPaneSizes({removedPane:{...n,index:s}}),this.$emit("pane-remove",{removed:n,panes:this.panes.map(i=>({min:i.min,max:i.max,size:i.size}))})})},resetPaneSizes(e={}){!e.addedPane&&!e.removedPane?this.initialPanesSizing():this.panes.some(s=>s.givenSize!==null||s.min||s.max<100)?this.equalizeAfterAddOrRemove(e):this.equalize(),this.ready&&this.$emit("resized",this.panes.map(s=>({min:s.min,max:s.max,size:s.size})))},equalize(){const e=100/this.panesCount;let s=0;const n=[],i=[];this.panes.forEach(t=>{t.size=Math.max(Math.min(e,t.max),t.min),s-=t.size,t.size>=t.max&&n.push(t.id),t.size<=t.min&&i.push(t.id)}),s>.1&&this.readjustSizes(s,n,i)},initialPanesSizing(){let e=100;const s=[],n=[];let i=0;this.panes.forEach(a=>{e-=a.size,a.size!==null&&i++,a.size>=a.max&&s.push(a.id),a.size<=a.min&&n.push(a.id)});let t=100;e>.1&&(this.panes.forEach(a=>{a.size===null&&(a.size=Math.max(Math.min(e/(this.panesCount-i),a.max),a.min)),t-=a.size}),t>.1&&this.readjustSizes(e,s,n))},equalizeAfterAddOrRemove({addedPane:e,removedPane:s}={}){let n=100/this.panesCount,i=0;const t=[],a=[];e&&e.givenSize!==null&&(n=(100-e.givenSize)/(this.panesCount-1)),this.panes.forEach(o=>{i-=o.size,o.size>=o.max&&t.push(o.id),o.size<=o.min&&a.push(o.id)}),!(Math.abs(i)<.1)&&(this.panes.forEach(o=>{e&&e.givenSize!==null&&e.id===o.id||(o.size=Math.max(Math.min(n,o.max),o.min)),i-=o.size,o.size>=o.max&&t.push(o.id),o.size<=o.min&&a.push(o.id)}),i>.1&&this.readjustSizes(i,t,a))},readjustSizes(e,s,n){let i;e>0?i=e/(this.panesCount-s.length):i=e/(this.panesCount-n.length),this.panes.forEach((t,a)=>{if(e>0&&!s.includes(t.id)){const o=Math.max(Math.min(t.size+i,t.max),t.min),r=o-t.size;e-=r,t.size=o}else if(!n.includes(t.id)){const o=Math.max(Math.min(t.size+i,t.max),t.min),r=o-t.size;e-=r,t.size=o}t.update({[this.horizontal?"height":"width"]:`${this.indexedPanes[t.id].size}%`})}),Math.abs(e)>.1&&this.$nextTick(()=>{this.ready&&console.warn("Splitpanes: Could not resize panes correctly due to their constraints.")})}},watch:{panes:{deep:!0,immediate:!1,handler(){this.updatePaneComponents()}},horizontal(){this.updatePaneComponents()},firstSplitter(){this.redoSplitters()},dblClickSplitter(e){[...this.container.querySelectorAll(".splitpanes__splitter")].forEach((s,n)=>{s.ondblclick=e?i=>this.onSplitterDblClick(i,n):void 0})}},beforeUnmount(){this.ready=!1},mounted(){this.container=this.$refs.container,this.checkSplitpanesNodes(),this.redoSplitters(),this.resetPaneSizes(),this.$emit("ready"),this.ready=!0},render(){return g("div",{ref:"container",class:["splitpanes",`splitpanes--${this.horizontal?"horizontal":"vertical"}`,{"splitpanes--dragging":this.touch.dragging}]},this.$slots.default())}},b=(e,s)=>{const n=e.__vccOpts||e;for(const[i,t]of s)n[i]=t;return n},k={name:"pane",inject:["requestUpdate","onPaneAdd","onPaneRemove","onPaneClick"],props:{size:{type:[Number,String],default:null},minSize:{type:[Number,String],default:0},maxSize:{type:[Number,String],default:100}},data:()=>({style:{}}),mounted(){this.onPaneAdd(this)},beforeUnmount(){this.onPaneRemove(this)},methods:{update(e){this.style=e}},computed:{sizeNumber(){return this.size||this.size===0?parseFloat(this.size):null},minSizeNumber(){return parseFloat(this.minSize)},maxSizeNumber(){return parseFloat(this.maxSize)}},watch:{sizeNumber(e){this.requestUpdate({target:this,size:e})},minSizeNumber(e){this.requestUpdate({target:this,min:e})},maxSizeNumber(e){this.requestUpdate({target:this,max:e})}}};function w(e,s,n,i,t,a){return P(),S("div",{class:"splitpanes__pane",onClick:s[0]||(s[0]=o=>a.onPaneClick(o,e._.uid)),style:C(e.style)},[M(e.$slots,"default")],4)}const u=b(k,[["render",w]]);const N={class:"splitpanes-container layout-pd"},R=f({name:"funSplitpanes"}),$=f({...R,setup(e){const s=y(50);return(n,i)=>{const t=x("el-alert"),a=x("el-card");return P(),S("div",N,[p(a,{shadow:"hover",header:"splitpanes 窗格拆分器"},{default:l(()=>[p(t,{title:"感谢优秀的 `splitpanes`，项目地址：https://github.com/antoniandre/splitpanes",type:"success",closable:!1,class:"mb15"}),p(d(v),{class:"default-theme",onResize:i[0]||(i[0]=o=>s.value=o[0].size),style:{height:"500px"}},{default:l(()=>[p(d(u),{size:32},{default:l(()=>[m(" 1 ")]),_:1}),p(d(u),{size:36},{default:l(()=>[p(d(v),{class:"default-theme",horizontal:!0},{default:l(()=>[p(d(u),{size:100},{default:l(()=>[m(" 2 ")]),_:1}),p(d(u),{size:100},{default:l(()=>[m(" 3 ")]),_:1})]),_:1})]),_:1}),p(d(u),{size:32},{default:l(()=>[m(" 4 ")]),_:1})]),_:1})]),_:1})])}}});const U=E($,[["__scopeId","data-v-f735f120"]]);export{U as default};
- //# sourceMappingURL=index.70510476.js.map
|
