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

Related tags

UI Layout vue vue3
Overview

Splitpanes

Latest Version on NPM Software License npm npm

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

Installation

npm i splitpanes

Vue 3

npm i [email protected]

Demo & Documentation

https://antoniandre.github.io/splitpanes

Try it yourself

https://codepen.io/antoniandre/pen/XybPKP


Browser Support

Chrome Firefox Safari Opera Edge IE
Latest Latest Latest Latest Latest 10+

Donating

If you like this library, you can buy me a beer!

paypal Thank you!

If you are using this library for profit business, please consider backing me up! It ensures that the project your products rely on keep being actively maintained. :)


Contributing

If you have any idea, feel free to open an issue to discuss a new feature, or fork Splitpanes and submit your changes back to me.


Release Notes

  • Version 2.3.0 Support rtl direction
  • Version 2.2.0 Add firstSplitter option allow v-if on panes and other improvements
  • Version 2.0.0 Fix reactivity issues
  • Version 1.14.0 Programmatically set pane size
  • Version 1.13.0 Emit event on splitter click
  • Version 1.12.0 Double click splitter to maximize is now an option
  • Version 1.11.0 Persist panes size after slots changed
  • Version 1.10.0 Add maximum size feature on panes
  • Version 1.9.0 Emit event on resize & watch slots optional
  • Version 1.8.0 Watch slots
  • Version 1.7.0 Double click splitter to maximize next pane
  • Version 1.6.0 Emit events
  • Version 1.5.0 Add default size feature on panes (max feature coming soon!)
  • Version 1.4.0 Add minimum size feature on panes
  • Version 1.3.0 Splitpanes slots are now reactive (add/remove on the fly)
  • Version 1.2.0 Add a default-theme CSS class to load default theme
  • Version 1.1.0 Allow pushing other panes while dragging splitter
  • Version 1.0.0 First public release
Comments
  • Panes always starts with size 50%

    Panes always starts with size 50%

    On page load, panes does not obey the size property. On the example below I use two panes with the respective sizes: 20 and 80. When loading page, the pane is adjusted. Take a look at the GIF below:

    insigh

    How to make the pane starts with the defined sizes?

    bug 
    opened by calebeaires 13
  • Resetting size of panes after data change

    Resetting size of panes after data change

    I've seen similar bugs in the history of issues but this may be some unknown edge case not reported yet. Bug shows only when attribute watch-slots is used.

    Example: https://codesandbox.io/s/54xm1m42wn

    1. Double click on splitter so 2nd pane is at full size (as shown at the picture) image
    2. Make change in the input (eg. add letter a to the input box)
    3. Panes are automatically getting back to the previous sizes image

    Note: If I manually set sizes of panes, eg. 27:73. Then double click on splitter and add text to the input textbox then it gets back to the 27:73 setting, not the default 50:50.

    opened by pprzetacznik 13
  • Release ESM format lib and Vue3 support

    Release ESM format lib and Vue3 support

    Hi there,

    I have been recently using vite to do my development. It requires all modules to be in ESM format because vite uses ESM in the browser instead of a bundler.

    I noticed there is umd and common, but not ESM.

    Can you export ESM format too? Or at the very lease also include the src/ folder when releasing so that we can use import {...} 'src/components/'.

    Feature request 
    opened by amir20 9
  • IE11 does not support version 2.0 after the upgrade?

    IE11 does not support version 2.0 after the upgrade?

    IE is supported at 1.45.What's the problem?

    Because before method IE does not support. solution: rewrite before().

     Object.defineProperty(child, "before", {
          configurable: true,
          enumerable: true,
          writable: true,
          value: function before() {
            var argArr = Array.prototype.slice.call(arguments),
              docFrag = document.createDocumentFragment();
    
            argArr.forEach(function(argItem) {
              var isNode = argItem instanceof Node;
              docFrag.appendChild(
                isNode ? argItem : document.createTextNode(String(argItem))
              );
            });
    
            this.parentNode.insertBefore(docFrag, this);
          }
        });
    
    opened by helpceo 9
  • forEach is a not a function

    forEach is a not a function

    I am testing next branch with vuejs.

    I am getting the following error.

    Uncaught TypeError: this.container.children.forEach is not a function
        at Proxy.checkSplitpanesNodes (splitpanes.vue:307)
        at Proxy.mounted (splitpanes.vue:675)
        at callWithErrorHandling (runtime-dom.esm-bundler-22e9c19c.js:1215)
        at callWithAsyncErrorHandling (runtime-dom.esm-bundler-22e9c19c.js:1224)
        at Array.hook.__weh.hook.__weh (runtime-dom.esm-bundler-22e9c19c.js:3267)
        at flushPostFlushCbs (runtime-dom.esm-bundler-22e9c19c.js:1343)
        at render (runtime-dom.esm-bundler-22e9c19c.js:5789)
        at mount (runtime-dom.esm-bundler-22e9c19c.js:4175)
        at Object.app.mount (runtime-dom.esm-bundler-22e9c19c.js:8401)
        at main.js:52
    

    I believe it is this line

    checkSplitpanesNodes () {
          this.container.children.forEach(child => {...
    

    There is no forEach on HTMLCollection. I believe you want something like [...this.container.children].forEach.

    Maybe this was getting fixed with webpack?

    bug vue 3 
    opened by amir20 8
  • Applying default pane size on pane add/remove

    Applying default pane size on pane add/remove

    I think I have found a bug when hiding panes programmatically on the mobile.

    I have something that looks like this:

    <splitpanes>
      <pane v-if="!mobile" size="15">menu</pane>
      <pane size="85">main app</pane>
    </splitpanes>
    

    All works fine. When I resize to smaller width, the second pane takes 100%. However, if load the page while the width is small, then the second pane will be 85%. Even though, only one pane is shown.

    See screenshot of my dom below: Screen Shot 2019-12-18 at 10 49 30 AM

    I noticed width for all panes is required. One possible solution would be to not make that required and just calculate the remaining width.

    A workaround would be to set width on second pane to 100% if mobile==true but that's hacky for sure.

    opened by amir20 8
  • Pane doesn't resize correctly after pane deletion

    Pane doesn't resize correctly after pane deletion

    Hello,

    I am not sure if I have discovered a bug. But when I go from two panes to one, then the width of the remaining pane is still 50%.

    My code looks like this:

    <splitpanes class="default-theme">
            <pane>
              <router-view></router-view>
            </pane>
            <pane v-for="other in activeContainers" :key="other.id">
              <div class="name columns is-marginless">
                <span class="column">{{ other.name }}</span>
                <span class="column is-narrow">
                  <button class="delete is-medium" @click="removeActiveContainer(other)"></button>
                </span>
              </div>
              <log-event-source :id="other.id" v-slot="eventSource">
                <log-viewer :messages="eventSource.messages"></log-viewer>
              </log-event-source>
            </pane>
          </splitpanes>
    

    After adding a new pane it looks like this.

    Screen Shot 2019-11-15 at 12 00 13 PM

    However, after removing the last pane, I still see 50 width.

    Screen Shot 2019-11-15 at 12 00 21 PM

    Is there a way to refresh the size?

    bug 
    opened by amir20 8
  • rename resize event / add double click on splitter to maximize pane

    rename resize event / add double click on splitter to maximize pane

    Hello, we're actively using your plugin in our project. But there are few issues we would like to address here.

    1. resize is actually should be named as resizeStop event. A true resize event should be fired everytime I am moving splitter with left mouse btn clicked.

    2. Could you please add a double click event when double clicking on splitters?

    opened by R3veng3R 8
  • Resize problem when reactive field is in pane

    Resize problem when reactive field is in pane

    Hi @antoniandre,

    I ran into another issue with the component after the latest update (v1.8.1).

    See the gif for the problem:

    dec-29-2018 02-22-53

    Description:

    • I have a blue div in the top right pane (2). It resizes to the size of the top right pane when the horizontal splitter resizes the split between the two right fields (linked to a resize event).
    • In the bottom right pane (3) I have a reactive field "divHeight" which should contain the current height of the top right pane.

    Problem: The splitter always jumps back to the horizontal center position if the reactive field in pane 3 is included. If the reactive field is excluded, everything works as expected.

    I have created both a pen and a repo for this: Codepen: https://codepen.io/tandrew-the-bold/pen/ZVXvMP Repo: https://github.com/tandrew/vue-splitpanes-reactive-issue/tree/master/src/components

    If you comment out either or both line 16 and 49 in the repo everything works as expected.

    Please let me know whether I have done something wrong or if there is indeed an issue.

    Best Andrew

    opened by tandrew 7
  • Workaround for circular references

    Workaround for circular references

    Because your library is the most usable with this resize function, but useless without "watch-slots", I searched a workaround for the circular reference situation.

    I combined the recommendation from MDN with your discardProps Solution, which works in our case.

    Because we currently started with Vue.JS it's not fully clear for me, why JSON.stringify is necessary to transfer changes to nested components, because this looks like a performance bottleneck.

    But because we will invest some more time into our Vue.JS project, I probably can provide a better solution for this. Let me know, when you see some problems with the workaround.

    opened by swarnat 6
  • Watch-slots related issue: not updating vars or JSON circular reference error

    Watch-slots related issue: not updating vars or JSON circular reference error

    I am aware of this error and explained it here: #38. I am considering to do a new version when I will have some time.

    Until then if you face this issue, consider it as a limitation or do a pull request to fix it.

    Please refrain yourself from creating other issues about this.

    bug 
    opened by antoniandre 6
  • There's something wrong that I don't know. I'm using Vue 3 but it's not working

    There's something wrong that I don't know. I'm using Vue 3 but it's not working

    This is my code

    <template>
    <splitpanes vertical style="height: 400px">
      <pane min-size="20">1</pane>
      <pane>
        <splitpanes horizontal>
          <pane>2</pane>
          <pane>3</pane>
          <pane>4</pane>
        </splitpanes>
      </pane>
      <pane>5</pane>
    </splitpanes>
    </template>
    
    <script setup>
    import { Splitpanes, Pane } from 'splitpanes'
    import 'splitpanes/dist/splitpanes.css'
    </script>
    

    And it shows me this error image And these warnings image This is my package.json

    {
      "dependencies": {
        "@popperjs/core": "^2.11.5",
        "bootstrap": "^5.2.0",
        "connect-history-api-fallback": "^2.0.0",
        "express": "^4.18.1",
        "splitpanes": "^3.1.0",
        "vue": "^3.2.37",
        "vue-router": "^4.0.13"
      },
      "devDependencies": {
        "@babel/core": "^7.18.10",
        "@babel/preset-env": "^7.18.10",
        "babel-loader": "^8.2.5",
        "compression-webpack-plugin": "^10.0.0",
        "css-loader": "^6.7.1",
        "html-webpack-plugin": "^5.5.0",
        "nodemon": "^2.0.19",
        "sass": "^1.54.3",
        "sass-loader": "^13.0.2",
        "unplugin-auto-import": "^0.11.2",
        "unplugin-vue-components": "^0.22.4",
        "vue-loader": "^17.0.0",
        "vue-style-loader": "^4.1.3",
        "vue-template-compiler": "^2.7.8",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-middleware": "^5.3.3",
        "webpack-dev-server": "^4.9.3",
        "webpack-hot-middleware": "^2.25.1",
        "webpack-merge": "^5.8.0"
      }
    }
    
    
    opened by kylehue 0
  • Selection issue on start dragging

    Selection issue on start dragging

    There is a bug while trying to start dragging. The user can accidentally select one pane content, if he is fast enough. In Firefox, if the user goes to the edge of the split and drag fast enough, he may be able to select (wasn't happen in Edge.) Here is a demo in Firefox:

    https://user-images.githubusercontent.com/1467072/174041311-d70ff787-fcd0-4c83-8b5c-86db553a40e3.mov

    The user is unable to select it after the "first frame" of the dragging, because of the following lines in the css conf: https://github.com/antoniandre/splitpanes/blob/adc50968a386402917ffe702bb447dd0c3409151/src/components/splitpanes/splitpanes.vue#L690-L706 and the following css def: https://github.com/antoniandre/splitpanes/blob/adc50968a386402917ffe702bb447dd0c3409151/src/components/splitpanes/splitpanes.vue#L719-L727

    However, the user can do on the "first frame" (in Firefox at least) if he is fast enough. The reason is bacause The reason it happen is because this.touch.dragging is set to true only in: https://github.com/antoniandre/splitpanes/blob/adc50968a386402917ffe702bb447dd0c3409151/src/components/splitpanes/splitpanes.vue#L89-L97 but rather should be set to true starting from onMouseDown. This way, the browser would immediately forbid the user to select the panes, and wouldn't wait for the next onMouseMove event.

    opened by Tal500 0
  • Automatic RTL detection

    Automatic RTL detection

    Following #89, I am wondering why can't the library detect automatically whether it's in RTL or not. The discussion has started because of the following discussion in the Svelte port of this library.

    The idea I said there is to detect automatically the direction by the expression getComputedStyle(container).direction === 'rtl', instead of the manual API property rtl (discussed there in more details). I am a native Hebrew speaker, so I have an experience with those types of issues.

    Sometimes it is even essential to detect this automatically, since the component using this library might be contained in a different component, which allow the end user switch dynamically the text direction (e.g. changing the language from English to Hebrew shall change the text direction from LTR to RTL), and the inner component might not be aware of this change, so it couldn't change the API property rtl.

    If for some reason(that makes no sense for me) you'd like to give the user a control to override this automatic RTL detection, I'm suggesting then to convert the type of the API property rtl to boolean | undefined, with a default value of undefined (meaning automatic detection).

    I would like to here your opinion 🙂

    opened by Tal500 0
  • resize splitpanes when user resize window screen

    resize splitpanes when user resize window screen

    Hello, I have a problem, maybe somebody can help me.

    I have two panes, [][], one with text on the left and an image on the right

    when the user resizes splitpanes by splitter I compute the available width and truncate text on the left 'image.....next.png'

    The problem is that resize event doesn't catch when the user resizes the screen or opens the console (yes, I have such a requirement). I tried to call different methods using ref logic, didn't help, also tried to update the key on splitpanes component.

    opened by kyrylo93 0
Owner
Antoni
Open-sourcer at heart. 💚
Antoni
Simple vue implementation of Slideout.js touch sidebar / sidemenu library

vue-slideout This component is a simple vue implementation of Slideout.js Demo Install npm install vue-slideout Usage App.vue <template> <div id=

null 157 Jul 30, 2022
A pure vue native horizontal list implementation for mobile/touch and responsive web.

?? You might want to use Vue Horizontal instead! Vue Horizontal is another take on the horizontal layout written by me with an ultra simple implementa

Fuxing Loh 174 Sep 30, 2022
LayoutDesigner(svg editor) 基于 vue3.0 开发的,可以自定义拖入的图形,实现拖拽绘制设备layout

LayoutDesigner(svg editor) 基于 vue3.0 开发的,可以自定义拖入的图形,实现拖拽绘制设备layout

YRK 3 May 13, 2022
Vue3 仿Win10 UI 框架

vue3-win10 Vue3 仿Win10 UI 框架 推荐 Vue 3 + Typescript + Vite + Using <script setup> 文档|官网|Demo 本框架可以让你的页面像win10视窗系统一样,变为一个网页上的win10系统。 Demo|Demo|Demo Usa

null 166 Oct 1, 2022
模仿windows10的vue3框架. windows10 in vue3

vue3-win10 Vue3 仿Win10 UI 框架 推荐 Vue 3 + Typescript + Vite + Using <script setup> 文档|官网|Demo 本框架可以让你的页面像win10视窗系统一样,变为一个网页上的win10系统。 Demo|Demo|Demo Usa

null 167 Sep 23, 2022
Vue3 component layout waterfall

Vue3 component layout waterfall

lsh 6 Jul 5, 2022
Simple, Light-weight and Flexible Vue.js component for grid layout.

vue-grd Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd. Install npm install --save vue-grd Usage You can use <

Shogo Sensui 43 Jun 30, 2022
This simple calculate-app on Vue-3 and Vite

vue-calculate This simple calculate-app on Vue-3 and Vite You can see it by link: Vue.js-Calculator Build with Vue-3 Vite Getting Started Installation

Kirill 0 Dec 25, 2021
Simple two sides layout with small icon sidebar, header, and body perfect for application

Vue Layout Components Simple two sides layout with small icon sidebar, header, and body perfect for application. Documentation Read our detailed and c

Adrijan Mitrov 0 Aug 14, 2021
Vue Virtual Keyboard - Simple-keyboard Vue.js Demos

This is a repository for simple-keyboard's Vue.js demos https://virtual-keyboard.js.org/vuejs Have an issue or question? Please post it in the main re

simple-keyboard 40 Aug 30, 2022
A simple Vue blog template that displays posts from any WordPress REST API endpoint.

WP Vue This is just a simple Vue application (scaffolded using the Vue CLI) that pulls posts from a WordPress REST API endpoint. Clone or fork this su

Alex MacArthur 444 Sep 15, 2022
An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. (SPA/SSG/SSR)

An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. (SPA/SSG/SSR)

Fuxing Loh 180 Sep 21, 2022
A simple, lightweight Javascript library for dynamic grid layouts.

Magic Grid A simple, lightweight Javascript library for dynamic grid layouts. Creating a dynamic grid layout has never been easier. With Magic Grid, a

Emmanuel Olaojo 3k Sep 25, 2022
A Project which can be deployed to a local network and provides a way to view and upload files (Video, Audio and Images)

Best-README-Template An awesome README template to jumpstart your projects! Explore the docs » View Demo · Report Bug · Request Feature Table of Conte

Shubham Sharma 1 Dec 16, 2021
This is an invoice app that you can create, read, update and delete invoices, save draft invoices and mark pending invoices as paid, filter invoices by status (draft/pending/paid).

Vue Invoice App This is the solution for Frontend Mentor Invoice App. You can keep track of your personal invoices with this app. You can create a new

Fatih 12 Sep 19, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 5.9k Oct 3, 2022
⚡️A vue component support big amount data list with high render performance and efficient.

Table of contents Advantages Live demo Simple usage Props type Required props Optional props Public methods Attentions Advantages Only 3 required prop

Stephan Tang 3.7k Sep 28, 2022
A pure vue responsive masonry layout without direct dom manipulation and ssr support.

vue-masonry-wall A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending. I created this becaus

Fuxing Loh 182 Sep 14, 2022
:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Yev Vlasenko 935 Sep 28, 2022