Giter Site home page Giter Site logo

vue-split-panel's Introduction

Vue-Split-Panel

  • Fast: No overhead or attached window event listeners, uses pure CSS for resizing.
  • Compatible: Works great in IE9, and even loads in IE8 with polyfills. Early Firefox/Chrome/Safari/Opera supported too.

Installation

npm:

$ npm install --save vue-split-panel

Getting Started

// using ES6 modules
import VueSplit from 'vue-split-panel'
Vue.use(VueSplit)

Usage Examples

A split with two elements, starting at 25% and 75% wide.

<Split style="height: 500px;">
    <SplitArea :size="25">
        panel left
    </SplitArea>
    <SplitArea :size="75">
        panel right
    </SplitArea>
</Split>

A split with three elements, starting with even widths with 100px, 100px and 300px minimum widths, respectively.

<Split style="height: 500px;">
    <SplitArea :size="33" :minSize="100">
        panel left
    </SplitArea>
    <SplitArea :size="33" :minSize="100">
        panel center
    </SplitArea>
    <SplitArea :size="33" :minSize="300">
        panel right
    </SplitArea>
</Split>

A vertical split with two elements.

<Split style="height: 500px;" :direction="vertical">
    <SplitArea>
        panel left
    </SplitArea>
    <SplitArea>
        panel center
    </SplitArea>
</Split>

Setting the gutter size to 20px.

<Split style="height: 500px;" :gutterSize="20">
    <SplitArea>
        panel left
    </SplitArea>
    <SplitArea>
        panel center
    </SplitArea>
</Split>

Setting the snap offset to 20px (the distance at which the gutter snaps to either area's minSize).

<Split style="height: 500px;" :snapOffset="20">
    <SplitArea>
        panel left
    </SplitArea>
    <SplitArea>
        panel center
    </SplitArea>
</Split>

Callbacks that can be added on drag (fired continously), drag start and drag end. If doing more than basic operations in onDrag, add a debounce function to rate limit the callback.

<Split style="height: 500px;" @onDragEnd="onDragEnd" @onDragStart="onDragStart" onDrag="onDrag">
    <SplitArea>
        panel left
    </SplitArea>
    <SplitArea>
        panel center
    </SplitArea>
</Split>
methods: {
    onDragStart (size) {
        console.log('Drag Start', size) // callback existing size
    },
    onDrag (size) {
        console.log('on Drag', size) // callback new size
    },
    onDragEnd (size) {
        console.log('Drag End', size) // callback new size
    }
}

A Reset the panel and get new sizes

<Split style="height: 500px;" ref="mySplit">
    <SplitArea>
        panel left
    </SplitArea>
    <SplitArea>
        panel center
    </SplitArea>
</Split>
methods: {
    Reset () {
        console.log(this.$refs.mySplit.reset())
    }
    getSizes () {
        console.log(this.$refs.mySplit.getSizes())
    }
}

API

Split props

Property Type Default Description
direction String 'horizontal' Direction to split: horizontal or vertical.
gutterSize Number 10 Gutter size in pixels.
snapOffset Number 30 Snap offset in pixels.

Split events

Event Name Description Return Value
onDrag Callback on drag. current size
onDragStart Callback on drag start. new size
onDragEnd Callback on drag end. new size

Split methods

Method Name Description Arguments
reset Reset panel. none

SplitArea props

Property Type Default Description
sizes Array Initial sizes of each element in percents or CSS values.
minSize Number or Array 100 Minimum size of each element.

Important Note

vue-split-panel does not set CSS beyond the minimum needed to manage the width or height of the elements.

Browser Support

This library uses Split.js. These features are supported in the following browsers:

Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo BrowserStack logo
22+ ✔ 6+ ✔ 9+ ✔ 15+ ✔ 6.2+ ✔ Sponsored ✔

Built With

  • Webpack - The web framework used
  • gulp - Automated development toolkit

License

This project is licensed under the MIT License - see the LICENSE.md file for details

vue-split-panel's People

Contributors

bajaniyarohit avatar rbajaniya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vue-split-panel's Issues

yarn install fails due to opencollective in split.js

I am using the vue-split-panel in my project which depends on split.js. When I try to install the dependencies for the project I get the following error.

[4/4] 📃  Building fresh packages...
[1/6] ⡀ split.js
[2/6] ⡀ fsevents
[3/6] ⡀ cypress
[4/6] ⡀ nodent-runtime
error /Users/tecoholic/my_app/node_modules/split.js: Command failed.
Exit code: 127
Command: opencollective postinstall
Arguments:

I think the post install command of split.js is preventing the proper installation of the vue plugin.

I have reported the same issue with split.js as well nathancahill/split#153

npm run lint error

[CORP\sano@a-ngft53r34ong vue-split-panel]$ npm run lint

> [email protected] lint /home/sano/dkwork3/a/vue-split-panel
> eslint --fix --ext .js,.vue src


/home/sano/dkwork3/a/vue-split-panel/src/components/split/split-area.vue
  11:5   error  Expected indentation of 4 spaces but found 2  indent
  12:5   error  Expected indentation of 4 spaces but found 2  indent
  13:5   error  Expected indentation of 4 spaces but found 2  indent
  14:7   error  Expected indentation of 6 spaces but found 4  indent
  15:9   error  Expected indentation of 8 spaces but found 6  indent
  16:9   error  Expected indentation of 8 spaces but found 6  indent
  18:7   error  Expected indentation of 6 spaces but found 4  indent
  19:9   error  Expected indentation of 8 spaces but found 6  indent
  20:9   error  Expected indentation of 8 spaces but found 6  indent
  23:5   error  Expected indentation of 4 spaces but found 2  indent
  25:20  error  Strings must use singlequote                  quotes
  25:59  error  Missing semicolon                             semi
  28:5   error  Expected indentation of 4 spaces but found 2  indent
  29:17  error  'val' is defined but never used               no-unused-vars
  30:42  error  Missing semicolon                             semi
  32:20  error  'val' is defined but never used               no-unused-vars
  33:42  error  Missing semicolon                             semi

/home/sano/dkwork3/a/vue-split-panel/src/components/split/split.vue
   9:31  error  Missing semicolon                             semi
  11:5   error  Expected indentation of 4 spaces but found 2  indent
  12:5   error  Expected indentation of 4 spaces but found 2  indent
  13:5   error  Expected indentation of 4 spaces but found 2  indent
  14:7   error  Expected indentation of 6 spaces but found 4  indent
  15:9   error  Expected indentation of 8 spaces but found 6  indent
  16:9   error  Expected indentation of 8 spaces but found 6  indent
  18:7   error  Expected indentation of 6 spaces but found 4  indent
  22:7   error  Expected indentation of 6 spaces but found 4  indent
  27:5   error  Expected indentation of 4 spaces but found 2  indent
  33:10  error  Missing semicolon                             semi
  35:5   error  Expected indentation of 4 spaces but found 2  indent
  39:40  error  Missing semicolon                             semi
  41:33  error  Missing semicolon                             semi
  55:38  error  'str' is defined but never used               no-unused-vars
  58:15  error  Missing semicolon                             semi
  61:28  error  Missing semicolon                             semi
  62:28  error  Missing semicolon                             semi
  63:31  error  Missing semicolon                             semi
  66:66  error  Missing semicolon                             semi
  67:72  error  Missing semicolon                             semi
  69:15  error  Missing semicolon                             semi
  70:24  error  Missing semicolon                             semi
  73:24  error  Missing semicolon                             semi
  76:44  error  Missing semicolon                             semi
  79:5   error  Expected indentation of 4 spaces but found 2  indent
  80:24  error  Missing semicolon                             semi
  81:27  error  Missing semicolon                             semi
  82:24  error  Missing semicolon                             semi
  83:27  error  Missing semicolon                             semi
  87:46  error  Missing semicolon                             semi
  88:62  error  Missing semicolon                             semi
  89:68  error  Missing semicolon                             semi
  91:11  error  Missing semicolon                             semi
  92:20  error  Missing semicolon                             semi
  94:5   error  Expected indentation of 4 spaces but found 2  indent
  95:22  error  'val' is defined but never used               no-unused-vars
  96:24  error  Missing semicolon                             semi
  98:23  error  'val' is defined but never used               no-unused-vars
  99:24  error  Missing semicolon                             semi

/home/sano/dkwork3/a/vue-split-panel/src/index.js
  8:32  error  'opts' is assigned a value but never used  no-unused-vars

✖ 58 problems (58 errors, 0 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint: `eslint --fix --ext .js,.vue src`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/sano/.npm/_logs/2022-01-23T16_06_39_189Z-debug.log
[CORP\sano@a-ngft53r34ong vue-split-panel]

Add a screenshot to the documentation!

As someone who is shopping around for a resizable split panel view, I would love to see what it looks like before taking the time to install the package. Please add a screenshot in your README.md!

How to inject SplitArea dynamically

based on some condition i would like to inject SplitArea dynamically in horizontal view. Its adding at wrong place. Under Split tag i have following code:

  <SplitArea
    v-for="(child, index) in childrenplitAreas"
    :parentData="child.componentData"
    :key="index + 1"
    :size="20"
    :minSize="100"
  >
    {{ child.componentData.myProp}}
  </SplitArea>

inject for dragging class

I've always implement dragging class for detect the splitter is dragging.
It's very useful for make better experience like transition.

Cannot Nest horizontal/vertical splits

I cannot seem to nest splits with different directions. I would like to set up 3 outer panels with horizontal splits, and two inner vertical splits on the center (something like this). As is, it seems to ignore the direction on the inner split, and renders as horizontal. Am I doing something wrong?

<template>
<div>
  <Split style="height:100vh">
    <SplitArea :size="20">
      Left Area
    </SplitArea>
    <SplitArea :size="60">
        <Split :direction="vertical">
          <SplitArea :size="80">
           Center Panel
          </SplitArea>
          <SplitArea :size="20">
            Bottom Panel
          </SplitArea>
        </Split>
    </SplitArea>
    <SplitArea :size="20">
      Right Area
    </SplitArea>
  </Split>
</div>
</template>

Pixel sizes instead of percents?

Is there any built-in possibility to rather use pixel sizing instead of percentages?

I have a split panel within a split panel, and when I resize the outer panels I'd rather have the inner panels stay the size I've set them to (it's a 3 "column" layout) than scale along with the resizing of the outer one.

If they were all in the same split panel this would be fine, but this is a router-view thing with various panels inside other modular components so the inner splitter doesn't really know about the outer one.

Wrong cursor while dragging horizontally

The cursor has no chance to ever become a col-resize one.

When you hover a gutter, the cursor appropriately changes to either col-resize of row-resize, according to the css. But as soon as you start dragging, the cursor always switch to row-resize, regardless the direction.

Actually, line 43 of split.vue reads

cursor: 'row-resize',

whereas it should read something like

cursor: self.direction === 'horizontal' ? 'col-resize' : 'row-resize',

TIA

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.