vue-split-view/dist/vue3.umd.js

Create a resizable split-view to partition the UI

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).SplitView=t(e.vue)}(this,(function(e){"use strict";var t={props:{direction:{type:String,default:"horizontal",validator:e=>["vertical","horizontal"].includes(e)},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 e=this.isVertical?"Height":"Width";return{[e.toLowerCase()]:this.offsetA,[`min${e}`]:this.aMin,[`max${e}`]: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:e,pageY:t}){const{container:i}=this.$refs,s=function(e){let t=0,i=0;for(;e;)t+=e.offsetLeft-e.scrollLeft+e.clientLeft,i+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:t,y:i}}(i);let o;return this.isVertical?(o=t-s.y,o=Math.min(o,i.offsetHeight)):(o=e-s.x,o=Math.min(o,i.offsetWidth)),Math.max(o,0)},dragging(e){this.offset=this.mouseOffset(e)}}};return(t.__cssModules={}).$s={SplitView:"Xotz",isVertical:"_3SaT",Handle:"_3Ok-",isHorizontal:"dNcq",SideA:"_33mC",isLocked:"_25t7",SideB:"_1pOO _33mC"},t.render=function(t,i,s,o,r,n){return e.openBlock(),e.createBlock("div",{ref:"container",class:[t.$s.SplitView,{[t.$s.isVertical]:n.isVertical}]},[e.createVNode("div",{class:[t.$s.SideA,{[t.$s.isLocked]:r.isDragging}],style:n.styleA},[e.renderSlot(t.$slots,"A")],6),e.createVNode("span",{class:[t.$s.Handle,{[t.$s.isVertical]:n.isVertical,[t.$s.isHorizontal]:!n.isVertical}],onMousedown:i[1]||(i[1]=e.withModifiers(((...e)=>n.dragStart&&n.dragStart(...e)),["prevent"]))},null,34),e.createVNode("div",{class:[t.$s.SideB,{[t.$s.isLocked]:r.isDragging}]},[e.renderSlot(t.$slots,"B")],2)],2)},t}));