bajaniyarohit / vue-split-panel Goto Github PK
View Code? Open in Web Editor NEWVueJS wrapper for the great Split.js library.
License: MIT License
VueJS wrapper for the great Split.js library.
License: MIT License
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
[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]
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>
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>
I've always implement dragging
class for detect the splitter is dragging.
It's very useful for make better experience like transition.
Hey @bajaniyarohit ,
This is really cool plugin, however it's not working on mobile by touch event.
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 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.
Because vnode.tag is actually 'splitarea' during debugging.
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
Vue does not support listening to camelCased events in dom templates. See vuejs/vue#4839 for some discussion.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.