From 0d2ad97d8dc965da0776133bdd147c28b6a0bfa8 Mon Sep 17 00:00:00 2001 From: antoniandre Date: Tue, 25 Oct 2022 12:28:24 +0200 Subject: [PATCH] Publish documentation on Github. --- docs/assets/example-another-view.65c16b5d.js | 1 + docs/assets/example-another-view.c1f3e4c1.js | 1 - docs/assets/example-home-view.65ea2ede.js | 1 - docs/assets/example-home-view.a0ea393f.js | 1 + docs/assets/index.0dee4a05.js | 321 ------------------ docs/assets/index.5daf31dd.css | 7 - docs/assets/index.8bbf7903.css | 7 + docs/assets/index.da0a2e7c.js | 326 +++++++++++++++++++ docs/assets/isolated-test-view.806b5482.js | 1 + docs/assets/isolated-test-view.ae6e9eed.js | 1 - docs/assets/vendor.0900c3dc.js | 6 - docs/index.html | 5 +- 12 files changed, 338 insertions(+), 340 deletions(-) create mode 100644 docs/assets/example-another-view.65c16b5d.js delete mode 100644 docs/assets/example-another-view.c1f3e4c1.js delete mode 100644 docs/assets/example-home-view.65ea2ede.js create mode 100644 docs/assets/example-home-view.a0ea393f.js delete mode 100644 docs/assets/index.0dee4a05.js delete mode 100644 docs/assets/index.5daf31dd.css create mode 100644 docs/assets/index.8bbf7903.css create mode 100644 docs/assets/index.da0a2e7c.js create mode 100644 docs/assets/isolated-test-view.806b5482.js delete mode 100644 docs/assets/isolated-test-view.ae6e9eed.js delete mode 100644 docs/assets/vendor.0900c3dc.js diff --git a/docs/assets/example-another-view.65c16b5d.js b/docs/assets/example-another-view.65c16b5d.js new file mode 100644 index 0000000..67fd277 --- /dev/null +++ b/docs/assets/example-another-view.65c16b5d.js @@ -0,0 +1 @@ +import{o as e,c as t,a as s,_ as c}from"./index.da0a2e7c.js";const o={class:"blue-light5--bg w-flex align-center justify-center"},n=s("div",{class:"title1"},"This is another view",-1),a=[n];function i(_,l){return e(),t("div",o,a)}const r={},h=c(r,[["render",i]]);export{h as default}; diff --git a/docs/assets/example-another-view.c1f3e4c1.js b/docs/assets/example-another-view.c1f3e4c1.js deleted file mode 100644 index 82d941f..0000000 --- a/docs/assets/example-another-view.c1f3e4c1.js +++ /dev/null @@ -1 +0,0 @@ -import{o as e,c as t,i as s}from"./vendor.0900c3dc.js";import{_ as o}from"./index.0dee4a05.js";const c={class:"blue-light5--bg w-flex align-center justify-center"},r=s("div",{class:"title1"},"This is another view",-1),i=[r];function a(_,l){return e(),t("div",c,i)}const n={};var h=o(n,[["render",a]]);export{h as default}; diff --git a/docs/assets/example-home-view.65ea2ede.js b/docs/assets/example-home-view.65ea2ede.js deleted file mode 100644 index 5de04a4..0000000 --- a/docs/assets/example-home-view.65ea2ede.js +++ /dev/null @@ -1 +0,0 @@ -import{o as e,c as t,i as s}from"./vendor.0900c3dc.js";import{_ as o}from"./index.0dee4a05.js";const c={class:"green-light5--bg w-flex align-center justify-center"},r=s("div",{class:"title1"},"This is home",-1),i=[r];function a(_,l){return e(),t("div",c,i)}const n={};var f=o(n,[["render",a]]);export{f as default}; diff --git a/docs/assets/example-home-view.a0ea393f.js b/docs/assets/example-home-view.a0ea393f.js new file mode 100644 index 0000000..0fb9629 --- /dev/null +++ b/docs/assets/example-home-view.a0ea393f.js @@ -0,0 +1 @@ +import{o as e,c as t,a as s,_ as c}from"./index.da0a2e7c.js";const o={class:"green-light5--bg w-flex align-center justify-center"},n=s("div",{class:"title1"},"This is home",-1),a=[n];function i(_,l){return e(),t("div",o,a)}const r={},f=c(r,[["render",i]]);export{f as default}; diff --git a/docs/assets/index.0dee4a05.js b/docs/assets/index.0dee4a05.js deleted file mode 100644 index 1a131f2..0000000 --- a/docs/assets/index.0dee4a05.js +++ /dev/null @@ -1,321 +0,0 @@ -var U=Object.defineProperty,W=Object.defineProperties;var Y=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var L=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var E=(t,a,o)=>a in t?U(t,a,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[a]=o,A=(t,a)=>{for(var o in a||(a={}))L.call(a,o)&&E(t,o,a[o]);if(N)for(var o of N(a))R.call(a,o)&&E(t,o,a[o]);return t},D=(t,a)=>W(t,Y(a));var H=(t,a)=>{var o={};for(var l in t)L.call(t,l)&&a.indexOf(l)<0&&(o[l]=t[l]);if(t!=null&&N)for(var l of N(t))a.indexOf(l)<0&&R.call(t,l)&&(o[l]=t[l]);return o};import{h as J,o as z,c as y,r as O,n as G,a as v,b as P,w as s,d as n,t as u,e as M,f as K,g as X,i as e,j as i,F as S,k,l as x,s as Z,m as Q,p as ee,q as te,u as j,v as ne,x as se,W as ie}from"./vendor.0900c3dc.js";const ae=function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))l(r);new MutationObserver(r=>{for(const p of r)if(p.type==="childList")for(const d of p.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&l(d)}).observe(document,{childList:!0,subtree:!0});function o(r){const p={};return r.integrity&&(p.integrity=r.integrity),r.referrerpolicy&&(p.referrerPolicy=r.referrerpolicy),r.crossorigin==="use-credentials"?p.credentials="include":r.crossorigin==="anonymous"?p.credentials="omit":p.credentials="same-origin",p}function l(r){if(r.ep)return;r.ep=!0;const p=o(r);fetch(r.href,p)}};ae();const oe="modulepreload",I={},le="/splitpanes/",T=function(a,o){return!o||o.length===0?a():Promise.all(o.map(l=>{if(l=`${le}${l}`,l in I)return;I[l]=!0;const r=l.endsWith(".css"),p=r?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${l}"]${p}`))return;const d=document.createElement("link");if(d.rel=r?"stylesheet":oe,r||(d.as="script",d.crossOrigin=""),d.href=l,document.head.appendChild(d),r)return new Promise((_,g)=>{d.addEventListener("load",_),d.addEventListener("error",g)})})).then(()=>a())};const re={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((t,a)=>(t[a.id]=a)&&t,{})}},methods:{updatePaneComponents(){this.panes.forEach(t=>{t.update&&t.update({[this.horizontal?"height":"width"]:`${this.indexedPanes[t.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(t,a){this.bindEvents(),this.touch.mouseDown=!0,this.touch.activeSplitter=a},onMouseMove(t){this.touch.mouseDown&&(t.preventDefault(),this.touch.dragging=!0,this.calculatePanesSize(this.getCurrentMouseDrag(t)),this.$emit("resize",this.panes.map(a=>({min:a.min,max:a.max,size:a.size}))))},onMouseUp(){this.touch.dragging&&this.$emit("resized",this.panes.map(t=>({min:t.min,max:t.max,size:t.size}))),this.touch.mouseDown=!1,setTimeout(()=>{this.touch.dragging=!1,this.unbindEvents()},100)},onSplitterClick(t,a){"ontouchstart"in window&&(t.preventDefault(),this.dblClickSplitter&&(this.splitterTaps.splitter===a?(clearTimeout(this.splitterTaps.timeoutId),this.splitterTaps.timeoutId=null,this.onSplitterDblClick(t,a),this.splitterTaps.splitter=null):(this.splitterTaps.splitter=a,this.splitterTaps.timeoutId=setTimeout(()=>{this.splitterTaps.splitter=null},500)))),this.touch.dragging||this.$emit("splitter-click",this.panes[a])},onSplitterDblClick(t,a){let o=0;this.panes=this.panes.map((l,r)=>(l.size=r===a?l.max:l.min,r!==a&&(o+=l.min),l)),this.panes[a].size-=o,this.$emit("pane-maximize",this.panes[a]),this.$emit("resized",this.panes.map(l=>({min:l.min,max:l.max,size:l.size})))},onPaneClick(t,a){this.$emit("pane-click",this.indexedPanes[a])},getCurrentMouseDrag(t){const a=this.container.getBoundingClientRect(),{clientX:o,clientY:l}="ontouchstart"in window&&t.touches?t.touches[0]:t;return{x:o-a.left,y:l-a.top}},getCurrentDragPercentage(t){t=t[this.horizontal?"y":"x"];const a=this.container[this.horizontal?"clientHeight":"clientWidth"];return this.rtl&&!this.horizontal&&(t=a-t),t*100/a},calculatePanesSize(t){const a=this.touch.activeSplitter;let o={prevPanesSize:this.sumPrevPanesSize(a),nextPanesSize:this.sumNextPanesSize(a),prevReachedMinPanes:0,nextReachedMinPanes:0};const l=0+(this.pushOtherPanes?0:o.prevPanesSize),r=100-(this.pushOtherPanes?0:o.nextPanesSize),p=Math.max(Math.min(this.getCurrentDragPercentage(t),r),l);let d=[a,a+1],_=this.panes[d[0]]||null,g=this.panes[d[1]]||null;const h=_.max<100&&p>=_.max+o.prevPanesSize,f=g.max<100&&p<=100-(g.max+this.sumNextPanesSize(a+1));if(h||f){h?(_.size=_.max,g.size=Math.max(100-_.max-o.prevPanesSize-o.nextPanesSize,0)):(_.size=Math.max(100-g.max-o.prevPanesSize-this.sumNextPanesSize(a+1),0),g.size=g.max);return}if(this.pushOtherPanes){const m=this.doPushOtherPanes(o,p);if(!m)return;({sums:o,panesToResize:d}=m),_=this.panes[d[0]]||null,g=this.panes[d[1]]||null}_!==null&&(_.size=Math.min(Math.max(p-o.prevPanesSize-o.prevReachedMinPanes,_.min),_.max)),g!==null&&(g.size=Math.min(Math.max(100-p-o.nextPanesSize-o.nextReachedMinPanes,g.min),g.max))},doPushOtherPanes(t,a){const o=this.touch.activeSplitter,l=[o,o+1];return a{p>l[0]&&p<=o&&(r.size=r.min,t.prevReachedMinPanes+=r.min)}),t.prevPanesSize=this.sumPrevPanesSize(l[0]),l[0]===void 0)?(t.prevReachedMinPanes=0,this.panes[0].size=this.panes[0].min,this.panes.forEach((r,p)=>{p>0&&p<=o&&(r.size=r.min,t.prevReachedMinPanes+=r.min)}),this.panes[l[1]].size=100-t.prevReachedMinPanes-this.panes[0].min-t.prevPanesSize-t.nextPanesSize,null):a>100-t.nextPanesSize-this.panes[l[1]].min&&(l[1]=this.findNextExpandedPane(o).index,t.nextReachedMinPanes=0,l[1]>o+1&&this.panes.forEach((r,p)=>{p>o&&p{p=o+1&&(r.size=r.min,t.nextReachedMinPanes+=r.min)}),this.panes[l[0]].size=100-t.prevPanesSize-t.nextReachedMinPanes-this.panes[this.panesCount-1].min-t.nextPanesSize,null):{sums:t,panesToResize:l}},sumPrevPanesSize(t){return this.panes.reduce((a,o,l)=>a+(la+(l>t+1?o.size:0),0)},findPrevExpandedPane(t){return[...this.panes].reverse().find(o=>o.indexo.min)||{}},findNextExpandedPane(t){return this.panes.find(o=>o.index>t+1&&o.size>o.min)||{}},checkSplitpanesNodes(){Array.from(this.container.children).forEach(a=>{const o=a.classList.contains("splitpanes__pane"),l=a.classList.contains("splitpanes__splitter");if(!o&&!l){a.parentNode.removeChild(a),console.warn("Splitpanes: Only elements are allowed at the root of . One of your DOM nodes was removed.");return}})},addSplitter(t,a,o=!1){const l=t-1,r=document.createElement("div");r.classList.add("splitpanes__splitter"),o||(r.onmousedown=p=>this.onMouseDown(p,l),typeof window!="undefined"&&"ontouchstart"in window&&(r.ontouchstart=p=>this.onMouseDown(p,l)),r.onclick=p=>this.onSplitterClick(p,l+1)),this.dblClickSplitter&&(r.ondblclick=p=>this.onSplitterDblClick(p,l+1)),a.parentNode.insertBefore(r,a)},removeSplitter(t){t.onmousedown=void 0,t.onclick=void 0,t.ondblclick=void 0,t.parentNode.removeChild(t)},redoSplitters(){const t=Array.from(this.container.children);t.forEach(o=>{o.className.includes("splitpanes__splitter")&&this.removeSplitter(o)});let a=0;t.forEach(o=>{o.className.includes("splitpanes__pane")&&(!a&&this.firstSplitter?this.addSplitter(a,o,!0):a&&this.addSplitter(a,o),a++)})},requestUpdate(o){var l=o,{target:t}=l,a=H(l,["target"]);const r=this.indexedPanes[t._.uid];Object.entries(a).forEach(([p,d])=>r[p]=d)},onPaneAdd(t){let a=-1;Array.from(t.$el.parentNode.children).some(r=>(r.className.includes("splitpanes__pane")&&a++,r===t.$el));const o=parseFloat(t.minSize),l=parseFloat(t.maxSize);this.panes.splice(a,0,{id:t._.uid,index:a,min:isNaN(o)?0:o,max:isNaN(l)?100:l,size:t.size===null?null:parseFloat(t.size),givenSize:t.size,update:t.update}),this.panes.forEach((r,p)=>r.index=p),this.ready&&this.$nextTick(()=>{this.redoSplitters(),this.resetPaneSizes({addedPane:this.panes[a]}),this.$emit("pane-add",{index:a,panes:this.panes.map(r=>({min:r.min,max:r.max,size:r.size}))})})},onPaneRemove(t){const a=this.panes.findIndex(l=>l.id===t._.uid),o=this.panes.splice(a,1)[0];this.panes.forEach((l,r)=>l.index=r),this.$nextTick(()=>{this.redoSplitters(),this.resetPaneSizes({removedPane:D(A({},o),{index:a})}),this.$emit("pane-remove",{removed:o,panes:this.panes.map(l=>({min:l.min,max:l.max,size:l.size}))})})},resetPaneSizes(t={}){!t.addedPane&&!t.removedPane?this.initialPanesSizing():this.panes.some(a=>a.givenSize!==null||a.min||a.max<100)?this.equalizeAfterAddOrRemove(t):this.equalize(),this.ready&&this.$emit("resized",this.panes.map(a=>({min:a.min,max:a.max,size:a.size})))},equalize(){const t=100/this.panesCount;let a=0,o=[],l=[];this.panes.forEach(r=>{r.size=Math.max(Math.min(t,r.max),r.min),a-=r.size,r.size>=r.max&&o.push(r.id),r.size<=r.min&&l.push(r.id)}),a>.1&&this.readjustSizes(a,o,l)},initialPanesSizing(){100/this.panesCount;let t=100,a=[],o=[],l=0;this.panes.forEach(p=>{t-=p.size,p.size!==null&&l++,p.size>=p.max&&a.push(p.id),p.size<=p.min&&o.push(p.id)});let r=100;t>.1&&(this.panes.forEach(p=>{p.size===null&&(p.size=Math.max(Math.min(t/(this.panesCount-l),p.max),p.min)),r-=p.size}),r>.1&&this.readjustSizes(t,a,o))},equalizeAfterAddOrRemove({addedPane:t,removedPane:a}={}){let o=100/this.panesCount,l=0,r=[],p=[];t&&t.givenSize!==null&&(o=(100-t.givenSize)/(this.panesCount-1)),this.panes.forEach(d=>{l-=d.size,d.size>=d.max&&r.push(d.id),d.size<=d.min&&p.push(d.id)}),!(Math.abs(l)<.1)&&(this.panes.forEach(d=>{t&&t.givenSize!==null&&t.id===d.id||(d.size=Math.max(Math.min(o,d.max),d.min)),l-=d.size,d.size>=d.max&&r.push(d.id),d.size<=d.min&&p.push(d.id)}),l>.1&&this.readjustSizes(l,r,p))},readjustSizes(t,a,o){let l;t>0?l=t/(this.panesCount-a.length):l=t/(this.panesCount-o.length),this.panes.forEach((r,p)=>{if(t>0&&!a.includes(r.id)){const d=Math.max(Math.min(r.size+l,r.max),r.min);t-=d-r.size,r.size=d}else if(!o.includes(r.id)){const d=Math.max(Math.min(r.size+l,r.max),r.min);t-=d-r.size,r.size=d}r.update({[this.horizontal?"height":"width"]:`${this.indexedPanes[r.id].size}%`})}),Math.abs(t)>.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(t){[...this.container.querySelectorAll(".splitpanes__splitter")].forEach((o,l)=>{o.ondblclick=t?r=>this.onSplitterDblClick(r,l):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 J("div",{ref:"container",class:["splitpanes",`splitpanes--${this.horizontal?"horizontal":"vertical"}`,{"splitpanes--dragging":this.touch.dragging}]},this.$slots.default())}};var C=(t,a)=>{const o=t.__vccOpts||t;for(const[l,r]of a)o[l]=r;return o};const pe={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(t){this.style=t}},computed:{sizeNumber(){return this.size||this.size===0?parseFloat(this.size):null},minSizeNumber(){return parseFloat(this.minSize)},maxSizeNumber(){return parseFloat(this.maxSize)}},watch:{sizeNumber(t){this.requestUpdate({target:this,size:t})},minSizeNumber(t){this.requestUpdate({target:this,min:t})},maxSizeNumber(t){this.requestUpdate({target:this,max:t})}}};function de(t,a,o,l,r,p){return z(),y("div",{class:"splitpanes__pane",onClick:a[0]||(a[0]=d=>p.onPaneClick(d,t._.uid)),style:G(t.style)},[O(t.$slots,"default")],4)}var he=C(pe,[["render",de]]);function ce(t,a,o,l,r,p){const d=v("w-icon");return z(),P(X(o.tag),{class:K(`highlight highlight--${o.type}`)},{default:s(()=>[o.noIcon?M("",!0):(z(),P(d,{key:0},{default:s(()=>[n("material-icons "+u(p.icon),1)]),_:1})),O(t.$slots,"default")]),_:3},8,["class"])}const ue={props:{tag:{type:String,default:"p"},type:{type:String,default:"info"},noIcon:{type:Boolean,default:!1}},computed:{icon(){switch(this.type){case"success":return"check";case"error":return"close";case"warning":return"priority_high";case"tips":return"wb_incandescent";case"info":default:return"priority_high"}}}};var me=C(ue,[["render",ce]]);const _e={class:"page-container"},fe=x('

Splitpanes

A Vue.js reliable, simple and touch-ready panes splitter / resizer.

Features

',2),ge={class:"checklist"},ve=n("material-icons check"),ze=n("Light weight & no dependencies other than Vue JS"),be=n("material-icons check"),ye=n("Only worry about your panes, the splitters are automatic"),we=n("material-icons check"),xe=n("Nesting supported"),Se=n("material-icons check"),ke=n("Fully responsive"),Pe=n("material-icons check"),Ne=n("Support for touch devices"),Me=n("material-icons check"),Ce=n("Push other panes or not"),Te=n("material-icons check"),Ve=n("Double click a splitter to maximize pane"),$e=n("material-icons check"),Ee=n("Programmatically set pane width or height"),Le=n("material-icons check"),Re=n("Programmatically add and remove panes"),Ae=n("material-icons check"),De=e("strong",null,"Supports Vue 2 & Vue 3",-1),He=e("h2",{class:"mt12 mb4 title2"},"Github project \xA0&\xA0 important notes",-1),je=n("fab fa-github"),Ie={href:"https://github.com/antoniandre/splitpanes",target:"_blank"},Oe=n("//github.com/antoniandre/splitpanes "),Fe=n("material-icons open_in_new"),qe=n("material-icons report"),Be=e("a",{class:"orange",href:"https://blog.vuejs.org/posts/vue-3-as-the-new-default.html",target:"_blank",style:{"text-decoration":"underline"}},"Vue 3 is the new default",-1),Ue=n(", and so is Splitpanes 3, for Vue 3. "),We=e("span",{class:"title2 ml1"},"\u{1F64C}",-1),Ye=e("br",null,null,-1),Je=n(` -For Vue 2 projects, you should use `),Ge=e("code",null,[n("npm i splitpanes@"),e("strong",null,"legacy")],-1),Ke=n("."),Xe=n("material-icons favorite"),Ze=n("If you like Splitpanes, you can"),Qe=e("a",{class:"pink mx2",href:"https://www.paypal.me/antoniandre1",target:"_blank",style:{"text-decoration":"underline"}},[e("strong",null,"Support the project")],-1),et=n("or"),tt=e("a",{class:"pink ml2",href:"https://github.com/sponsors/antoniandre",target:"_blank",style:{"text-decoration":"underline"}},[e("strong",null,"Sponsor the author")],-1),nt=n("!"),st=e("div",null,[n("Thank you so much to all the backers! "),e("span",{class:"title2 ml1"},"\u{1F64F}")],-1),it=e("svg",{class:"mr4 blue-light1",viewBox:"0 0 725 477",style:{width:"50px",stroke:"#497ca2","stroke-width":"5px"}},[e("path",{fill:"#497ca2",d:"M449 0c-78 5-152 39-217 82-19 13-37 26-54 40-39 1-77 15-110 34-34 21-53 60-61 99-11 52-8 108 6 159 7 23 16 46 33 63 4-4 13-4 13-11-1-5-7-8-9-14-27-48-32-108-11-159 13-32 36-63 68-77 19-9 42-7 58 6 6 7 18 4 24-2 6-4 11-10 19-10-24 25-39 60-38 95 1 15 3 31 8 45 16 36 41 69 76 89 5 2 10 6 16 7 5-2 14-5 14-12-4-9-14-12-21-18-27-23-56-48-67-82-9-29-1-60 8-88 7-15 21-32 39-29 15 1 28 13 43 8 11-5 13-17 16-27 5-17 3-38-10-51-16-18-40-23-62-25l-11-2c23-19 53-26 81-31 21-3 43-5 64-2 18 3 28 21 42 31-33 47-57 102-56 159a170 170 0 0086 149c6-1 13-7 10-14-5-11-17-16-25-25-33-30-52-75-50-121 1-29 11-58 24-84 12-25 25-52 47-71 9-8 22-13 33-7 20 8 42 14 63 13-35 27-55 70-64 113-9 44-7 91 12 133 15 37 45 68 81 85 32 16 67 24 101 27 18 1 36 2 53-4 4-1 6-7 2-9-13-6-28-4-42-6-45-5-92-16-127-45-34-28-54-71-60-114-5-47 7-97 34-137 11-15 26-31 45-34 14-1 25 12 31 23 6 12 16 24 29 28 20-10 40-26 43-50 2-17-6-34-14-49-15-25-40-43-69-48-20-5-41-2-61-6-22-21-54-24-83-24zm6 21c22 0 48 5 62 25 4 7 8 16 8 24-1 10-10 22-21 19-9-7-18-14-30-16-14-4-31-1-43 8-6 6-17 8-24 2-9-6-17-15-28-17-27-7-54 1-81 6a364 364 0 01157-51zm117 29c33 0 66 25 72 58 3 12 3 28-8 35-3 2-6 4-8 1-8-12-12-27-23-37-3-7-12-8-19-9-13-2-26 0-39-4 7-7 6-17 4-25l-3-16 24-3zm-372 92l46 2c18 2 33 16 34 34 1 7 1 17-6 21-6 0-12-4-18-6-21-8-46-14-67-3-6 2-11 9-17 5-10-4-18-14-30-12-30 1-56 21-77 42-16 17-30 37-43 56 0-39 17-80 49-104 26-22 61-30 94-34l35-1z"})],-1),at=e("strong",null,[n("Check out my UI framework for Vue (2 & 3)!"),e("a",{class:"title2 ml4",href:"https://antoniandre.github.io/wave-ui",target:"_blank",style:{width:"50px",color:"#1471b8","text-decoration":"underline"}},[e("strong",null,"Wave UI")])],-1),ot={class:"title4 mt12 pt12 mb2"},lt=n("# Demo -"),rt={class:"ml1 d-inline-flex align-center",href:"https://codepen.io/antoniandre/pen/XybPKP",target:"_blank"},pt=n("try it yourself on Codepen"),dt=n("material-icons open_in_new"),ht=e("span",null,[n("1"),e("br"),e("em",{class:"specs"},"I have a min width of 20%")],-1),ct=e("span",null,"2",-1),ut=e("span",null,"3",-1),mt=e("span",null,"4",-1),_t=e("span",null,"5",-1),ft=n(` - 1 - - - 2 - 3 - 4 - - - 5 -`),gt=n(`.splitpanes__pane { - display: flex; - justify-content: center; - align-items: center; - font-family: Helvetica, Arial, sans-serif; - color: rgba(255, 255, 255, 0.6); - font-size: 5em; -} -`),vt=x('

Installation

You have two options: NPM or <script> tag.

Via NPM

',3),zt=n("npm i splitpanes # For Vue 3"),bt=e("span",{class:"mx2"},"or",-1),yt=n(`npm i splitpanes@legacy # For Vue 2 -`),wt={class:"mt2"},xt=n("material-icons chevron_right"),St=n("View and edit a working"),kt=e("a",{class:"ml2",href:"https://codepen.io/antoniandre/pen/LYNKGWV",target:"_blank"},"Vue 3 example",-1),Pt=n(", or"),Nt=e("a",{class:"mx2",href:"https://codepen.io/antoniandre/pen/XybPKP",target:"_blank"},"Vue 2 example",-1),Mt=n("on Codepen."),Ct=e("div",{class:"mt6"},"Then import the component and CSS:",-1),Tt=n(`// In your Vue component. -import { Splitpanes, Pane } from 'splitpanes' -import 'splitpanes/dist/splitpanes.css' - -export default { - components: { Splitpanes, Pane }, - ... -} -`),Vt=e("h3",{class:"mt12"},[n("Via "),e("span",{class:"code"}," - - + +