vue-multipane/dist/vue-multipane.min.js

Resizable split panes for Vue.js.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.Multipane={})}(this,function(e){"use strict";var t={name:"multipane",props:{layout:{type:String,default:"vertical"}},data:function(){return{isResizing:!1}},computed:{classnames:function(){return["multipane","layout-"+this.layout.slice(0,1),this.isResizing?"is-resizing":""]},cursor:function(){return this.isResizing?"vertical"==this.layout?"col-resize":"row-resize":""},userSelect:function(){return this.isResizing?"none":""}},methods:{onMouseDown:function(e){var t=e.target,i=e.pageX,n=e.pageY;if(t.className&&t.className.match("multipane-resizer")){var s=this,o=s.$el,r=s.layout,a=t.previousElementSibling,u=a.offsetWidth,l=a.offsetHeight,c=!!(a.style.width+"").match("%"),d=window.addEventListener,p=window.removeEventListener,m=function(e,t){if(void 0===t&&(t=0),"vertical"==r){var i=o.clientWidth,n=e+t;return a.style.width=c?n/i*100+"%":n+"px"}if("horizontal"==r){var s=o.clientHeight,u=e+t;return a.style.height=c?u/s*100+"%":u+"px"}};s.isResizing=!0;var f=m();s.$emit("paneResizeStart",a,t,f);var h=function(e){var o=e.pageX,c=e.pageY;f="vertical"==r?m(u,o-i):m(l,c-n),s.$emit("paneResize",a,t,f)},y=function(){f=m("vertical"==r?a.clientWidth:a.clientHeight),s.isResizing=!1,p("mousemove",h),p("mouseup",y),s.$emit("paneResizeStop",a,t,f)};d("mousemove",h),d("mouseup",y)}}}};!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),i=".multipane { display: flex; } .multipane.layout-h { flex-direction: column; } .multipane.layout-v { flex-direction: row; } .multipane > div { position: relative; z-index: 1; } .multipane-resizer { display: block; position: relative; z-index: 2; } .layout-h > .multipane-resizer { width: 100%; height: 10px; margin-top: -10px; top: 5px; cursor: row-resize; } .layout-v > .multipane-resizer { width: 10px; height: 100%; margin-left: -10px; left: 5px; cursor: col-resize; } ";t.type="text/css",t.styleSheet?t.styleSheet.cssText=i:t.appendChild(document.createTextNode(i)),e.appendChild(t)}}();var i=Object.assign(t,{render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{class:e.classnames,style:{cursor:e.cursor,userSelect:e.userSelect},on:{mousedown:e.onMouseDown}},[e._t("default")],2)},staticRenderFns:[]});i.prototype=t.prototype,function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText="":t.appendChild(document.createTextNode("")),e.appendChild(t)}}();var n={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"multipane-resizer"},[e._t("default")],2)},staticRenderFns:[]};"undefined"!=typeof window&&window.Vue&&(window.Vue.component("multipane",i),window.Vue.component("multipane-resizer",n)),e.Multipane=i,e.MultipaneResizer=n,Object.defineProperty(e,"__esModule",{value:!0})});