v1.3 is not yet published

https://www.npmjs.com/package/@meforma/vue-toaster

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

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.

How can mix horizontal en vertical panes?

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.

阻止冒泡虽然能解决问题，但不太优雅；
所以希望能从根儿上解决，如：if (typeof t.className === 'string' && t.className.match('multipane-resizer'))

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.

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.

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>

`import { Multipane, MultipaneResizer } from 'vue-multipane';

export default {
// ...
components: {
MultiPane,
MultiPaneResizer
}
}`

should be:

`import { Multipane, MultipaneResizer } from 'vue-multipane';

export default {
// ...
components: {
Multipane,
MultipaneResizer
}
}`

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:

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.

Maybe masker should be considered to cover the whole panel after mousedown is triggered, becourse mousemove over an iframe can not be detected.

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

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.

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?

Can't resize on mobile

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

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>

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>

`

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

Hi, it could be possible to save new size chosen by user, and restore it when user reenter on website?
Thanks

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 🙏?