bajaniyarohit / vue-split-panel Goto Github PK

View Code? Open in Web Editor NEW

104.0 104.0 28.0 18 KB

VueJS wrapper for the great Split.js library.

License: MIT License

JavaScript 58.32% Vue 37.77% Less 3.91%

vue-split-panel's People

Contributors

Stargazers

Watchers

vue-split-panel's Issues

camelCase event names should be changed to kebab case

Vue does not support listening to camelCased events in dom templates. See vuejs/vue#4839 for some discussion.

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.

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>

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

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.

vnode.tag.indexOf('SplitArea') is always -1

Because vnode.tag is actually 'splitarea' during debugging.

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>

Resizer does not reacting on touch events (mobile support)

Hey @bajaniyarohit ,

This is really cool plugin, however it's not working on mobile by touch event.

Do you have any plans to support vue3?

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!

Is the supported version of node 10? .12,14,16 are not supported?

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]

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

bajaniyarohit / vue-split-panel Goto Github PK

vue-split-panel's People

Contributors

Stargazers

Watchers

Forkers

vue-split-panel's Issues

Recommend Projects

Recommend Topics

Recommend Org