vue-split-view
Version:
Create a resizable split-view to partition the UI
2 lines (1 loc) • 1.93 kB
JavaScript
import{openBlock as t,createBlock as e,createVNode as i,renderSlot as s,withModifiers as r}from"vue";var a={props:{direction:{type:String,default:"horizontal",validator:t=>["vertical","horizontal"].includes(t)},aInit:{type:String,default:"50%"},aMin:{type:String,default:"none"},aMax:{type:String,default:"none"}},data(){return{isDragging:!1,offset:this.aInit}},computed:{isVertical(){return"vertical"===this.direction},offsetA(){return"string"==typeof this.offset?this.offset:`${this.offset}px`},styleA(){const t=this.isVertical?"Height":"Width";return{[t.toLowerCase()]:this.offsetA,[`min${t}`]:this.aMin,[`max${t}`]:this.aMax}}},methods:{dragStart(){this.isDragging=!0,window.addEventListener("mousemove",this.dragging,{passive:!0}),window.addEventListener("mouseup",this.dragStop,{passive:!0,once:!0})},dragStop(){window.removeEventListener("mousemove",this.dragging),this.isDragging=!1},mouseOffset({pageX:t,pageY:e}){const{container:i}=this.$refs,s=function(t){let e=0,i=0;for(;t;)e+=t.offsetLeft-t.scrollLeft+t.clientLeft,i+=t.offsetTop-t.scrollTop+t.clientTop,t=t.offsetParent;return{x:e,y:i}}(i);let r;return this.isVertical?(r=e-s.y,r=Math.min(r,i.offsetHeight)):(r=t-s.x,r=Math.min(r,i.offsetWidth)),Math.max(r,0)},dragging(t){this.offset=this.mouseOffset(t)}}};(a.__cssModules={}).$s={SplitView:"Xotz",isVertical:"_3SaT",Handle:"_3Ok-",isHorizontal:"dNcq",SideA:"_33mC",isLocked:"_25t7",SideB:"_1pOO _33mC"},a.render=function(a,o,n,l,d,f){return t(),e("div",{ref:"container",class:[a.$s.SplitView,{[a.$s.isVertical]:f.isVertical}]},[i("div",{class:[a.$s.SideA,{[a.$s.isLocked]:d.isDragging}],style:f.styleA},[s(a.$slots,"A")],6),i("span",{class:[a.$s.Handle,{[a.$s.isVertical]:f.isVertical,[a.$s.isHorizontal]:!f.isVertical}],onMousedown:o[1]||(o[1]=r(((...t)=>f.dragStart&&f.dragStart(...t)),["prevent"]))},null,34),i("div",{class:[a.$s.SideB,{[a.$s.isLocked]:d.isDragging}]},[s(a.$slots,"B")],2)],2)};export default a;