yansern / vue-multipane Goto Github PK
View Code? Open in Web Editor NEWResizable split panes for Vue.js.
Home Page: https://yansern.github.io/vue-multipane/
License: Other
Resizable split panes for Vue.js.
Home Page: https://yansern.github.io/vue-multipane/
License: Other
Is there a way to prevent the divider from moving to the left each time it is clicked? Issue is reproducible in the live demo on the custom divider.
Maybe I'm crazy, but layout=vertical
to me implies that the panels will stack from top to bottom. The opposite seems to be the case.
It seems that text causes scaling issues. When there is a fair amount of text the resizer jumps back to where it likes to be, instead of where I want it.
This issue can be seen with the vertical panes demo, when you (in the inspector) duplicate the text "Takes remaining available space." lets say 6 times, you can see the problem.
Is there any fix for this?
Hey, im using your vue-multipane project, and i (probably) found a bug (?). I use both layout-v and layout-h and i see that when i resize a layout-v (for example), the width is resizing too (0-o) http://www.giphy.com/gifs/2etBEDUQoaB18BOUyT
Hi, it could be possible to save new size chosen by user, and restore it when user reenter on website?
Thanks
I want to trigger paneresizestart but its not working
`
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link href='https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css' rel='stylesheet'>
</head>
<body class='pointer'>
<div class='xl:relative mx-auto xl:px-0 sm:px-4 grid md:grid-cols-2 items-center bg-white'>
<div class='h-full'>
<img src='https://source.unsplash.com/random/800x600' alt='img' class='w-full h-full object-cover object-left'>
</div>
<div class='max-w-lg container mx-auto px-4 lg:py-6 py-3'>
<h2 class='lg:text-4xl text-2xl font-medium'>Login</h2>
<p class='border-b border-gray-300 lg:text-lg text-sm py-4 text-gray-500'>We Connect and Keep your
Social
data.</p>
<div class='flex flex-col my-4 lg:my-6'>
<div
class='flex justify-center items-center bg-blue-400 hover:bg-blue-500 rounded-sm px-8 lg:py-3 py-2'>
<input type='button' value='Login with Github'
class='bg-transparent text-white lg:text-xl text-base ml-1'>
</div>
<div class='text-center lg:my-3 my-1'>
<samp class='text-xl'>OR</samp>
</div>
<div class='rounded-md px-4 lg:py-3 py-2 border border-gray-300 mb-5'>
<input type='email' placeholder='E-mail' class='outline-none lg:text-xl text-base w-full'>
</div>
<div class='rounded-md px-4 lg:py-3 py-2 border border-gray-300 mb-5'>
<input type='password' placeholder='Password' class='outline-none lg:text-xl text-base'>
</div>
<div
class='text-center bg-blue-400 hover:bg-blue-500 rounded-sm px-8 py-2 my-2'>
<input type='button' value='Sign in' class='bg-transparent text-white lg:text-xl text-base'>
</div>
</div>
<div class='text-center'>
<div class='text-center lg:text-md text-xs font-medium text-blue-500'>
<a href='!#' class='block lg:mb-2 mb-1'>Forgot your Password ?</a>
<a href='!#'>I Want to Sign up</a>
</div>
</div>
</div>
</div>
</body>
</html>"
frameborder="2"
></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="hidden absolute opacity-0 inset-0 mr-4 sm:block pointer-events-none"></div>
</div>
<multipane-resizer></multipane-resizer>
</multipane>
</div>
`
v1.3 is not yet published
Hi,
The panes overlap when the window is resized smaller than the min-width.
Any way you can update the code to prevent this?
UPDATE:
It turns out it's to do with the rightmost panel having content that is larger than the one to the left.
Sorry about the quality. I still have no fix.
Thank you,
Jamie
Thanks for a great component!
I ran into the following issue: I'd like the panes to take up 100% of the available space.
In the demo code (1st example), I tried setting height to 100% instead of 400px.
This seems to disable the slider control and fixes the window height to the content size, rather than available space.
How can I size the panes to occupy the entire available space vertically?
阻止冒泡虽然能解决问题,但不太优雅;
所以希望能从根儿上解决,如:if (typeof t.className === 'string' && t.className.match('multipane-resizer'))
Can't resize on mobile
Hi, Thanks for this great library , can we have touch support to drag and resize?
Thanks,
Abhi
Are there any plans to update this for vue3/nuxt3 🙏?
Hello and thank you for this cool component.
I saw in doc that the resize event is "paneresize".
But when I use it like this :
<multipane id="general-panel" layout="vertical" @paneresize="resized">
the callback method is not fired and I get this warning in browser's console :
vue.esm.js?efeb:580 [Vue tip]: Event "paneresize" is emitted in component <Multipane> but the handler is registered for "paneResize". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "pane-resize" instead of "paneResize".
If I change to @paneResize="resized"
, the callback is now fired and works but the warning still appears.
If I change to @pane-resize="resized"
, the callback is not fired and the warning still appears.
So only the second solution works, (with paneResize) but I don't like to use camelCase with HTML attributes, and the warning remains.
Am I wrong with the way I catch the event ? Is there any solution ?
Thank you for your time, best regards.
How can mix horizontal en vertical panes?
I tried provided demo on touch devices and I could not be able to resize the panes using fingers/touch drag. Touch support or fix would be appreciated. Thanks
`import { Multipane, MultipaneResizer } from 'vue-multipane';
export default {
// ...
components: {
MultiPane,
MultiPaneResizer
}
}`
should be:
`import { Multipane, MultipaneResizer } from 'vue-multipane';
export default {
// ...
components: {
Multipane,
MultipaneResizer
}
}`
I have highchart inside of pane, and when click on it, there error raised with text:
TypeError: t.className.match is not a function
because t is path element and it's className is array, and really array has no function match.
VueComponent.onMouseDown
vue-multipane/dist/vue-multipane.esm.js:3:560
The resizer does not work properly if its left or upper pane has flex-grow of 1.
The following is a test case
<template>
<multipane layout="vertical" class="container">
<div class="left">
<h6 class="title is-6">Pane 1</h6>
<p class="subtitle is-6">Takes remaining available space.</p>
<p>
<small>
<strong>Configured with:</strong><br/>
flex-grow: 1<br/>
</small>
</p>
</div>
<multipane-resizer></multipane-resizer>
<div class="right">
<h6 class="title is-6">Pane 2</h6>
<p class="subtitle is-6">Fluid width.</p>
<p>
<small>
<strong>Configured with:</strong><br/>
width: 50%<br/>
min-width: 20%;<br/>
max-width: 80%;<br/>
</small>
</p>
</div>
</multipane>
</template>
<script>
import { Multipane, MultipaneResizer } from '@/src';
export default {
components: {
Multipane,
MultipaneResizer,
},
};
</script>
<style>
.container {
height: 600px;
width: 100%;
}
.left {
flex-grow: 1;
height: 600px;
border: 1px solid #ccc;
background: #eee;
}
.right {
width: 50%;
min-width: 20%;
max-width: 80%;
height: 600px;
border: 1px solid #ccc;
background: #eee;
}
</style>
Maybe masker should be considered to cover the whole panel after mousedown is triggered, becourse mousemove over an iframe can not be detected.
For example, the following code does not work.
<template>
<multipane layout="vertical" class="container">
<div class="left">
<h6 class="title is-6">Pane 1</h6>
</div>
<multipane-resizer></multipane-resizer>
<multipane layout="horizontal" class="right">
<div class="top">
<h6 class="title is-6">Pane 2</h6>
</div>
<multipane-resizer></multipane-resizer>
<div class="bottom">
<h6 class="title is-6">Pane 3</h6>
</div>
</multipane>
</multipane>
</template>
<script>
import { Multipane, MultipaneResizer } from '@/src';
export default {
components: {
Multipane,
MultipaneResizer,
},
};
</script>
<style>
.container {
height: 600px;
width: 100%;
}
.left {
width: 50%;
min-width: 20%;
max-width: 80%;
height: 600px;
border: 1px solid #ccc;
background: #eee;
}
.right {
flex-grow: 1;
height: 600px;
border: 1px solid #ccc;
background: #eee;
}
.top {
height: 300px;
min-height: 20%;
max-height: 80%;
width: 100%;
border: 1px solid #ccc;
background: #eee;
}
.bottom {
flex-grow: 1;
width: 100%;
border: 1px solid #ccc;
background: #eee;
}
</style>
When resizing the horizontal resizer both the height and the width of the pane 2 will be change.
This is because the multipane
component catch the mouse up and mouse down event on the whole component instead of the resizer.
I think this could be fixed by catching the event of the resizer instead of the whole component.
I am trying to customize my resizer by adding icons as visual indicators. This works surprisingly well, but when the icons are clicked on, nothing happens - the resize doesn't work.
I am using @mdi/font
(for the icons) and Vuetify, all latest versions. My project is pretty much clean - I just started it today.
Here is my code:
<template>
<v-app>
<app-header />
<v-main>
<multipane class="custom-resizer" layout="vertical">
<terms-panel class="pane" style="width: 40vh" />
<multipane-resizer>
<i class="mdi mdi-dots-vertical" />
<i class="mdi mdi-dots-vertical" />
<i class="mdi mdi-dots-vertical" />
</multipane-resizer>
<similar-terms-panel class="pane" style="width: 35vh" />
<multipane-resizer>
<i class="mdi mdi-dots-vertical" />
<i class="mdi mdi-dots-vertical" />
<i class="mdi mdi-dots-vertical" />
</multipane-resizer>
<tag-panel class="pane" style="flex: 1" />
</multipane>
</v-main>
</v-app>
</template>
<script>
import { Multipane, MultipaneResizer } from 'vue-multipane';
import TermsPanel from '@/components/TermsPanel.vue';
import SimilarTermsPanel from '@/components/SimilarTermsPanel.vue';
import TagPanel from '@/components/TagPanel.vue';
import AppHeader from '@/components/AppHeader.vue';
export default {
name: 'App',
components: {
AppHeader,
Multipane,
MultipaneResizer,
SimilarTermsPanel,
TagPanel,
TermsPanel,
},
data: () => ({
//
}),
mount() {
// this is here because when I click on the handle images, it tries to drag the image.
this.$el.querySelector('.multipane-resizer i').forEach((el) => {
el.draggable = false; // eslint-disable-line
});
},
};
</script>
<style lang="scss">
.custom-resizer {
width: 100%;
height: 100%;
}
.custom-resizer > .pane {
text-align: left;
padding: 15px;
overflow: hidden;
background: #ffffff;
border: 1px solid #ccc;
}
.custom-resizer > .pane ~ .pane {
}
.custom-resizer > .multipane-resizer {
margin: 0;
left: 0;
position: relative;
width: 10px;
background-color: var(--v-background-base);
i {
width: 15px;
position: relative;
margin-top: 22vh;
display: block;
left: -25%;
color: var(--v-background-darken3);
&:before {
width: 15px;
}
}
&:hover {
background-color: var(--v-background-lighten1);
}
}
</style>
The error output is:
TypeError: resizer.className.match is not a function
at VueComponent.onMouseDown (multipane.js?77e5:41)
The error happens in this line:
vue-multipane/src/multipane.js
Line 40 in d9a17be
The resizer.className
here is expected to be a string, however, when click a svg tag, the classname returned is a SVGAnimatedString
object. SVGAnimatedString
objects don't implement the match
method, so a error is thrown.
To fix this bug, a simple way is changing resizer.className
into (resizer.className + "")
, this will turn the SVGAnimatedString
objects into null
, and no error occurs in my environment.
https://codesandbox.io/s/vue-pane-chart-datatables-context-ppxlr?file=/src/components/HelloWorld.vue:1801-1816
Every time you click on the chart, errors appear to the console. Apparently the libraries overlap.
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.