Fix issue with event names

demo/src/VerticalPanes.vue

@@ -1,5 +1,5 @@
 <template>
-<multipane class="vertical-panes" layout="vertical">
+<multipane class="vertical-panes" layout="vertical" @resize="paneResize" @resizestart='paneResizeStart' @resizestop='paneResizeStop'>
   <div class="pane" :style="{ minWidth: '100px', width: '150px', maxWidth: '200px' }">
     <div>
       <h6 class="title is-6">Pane 1</h6>
@@ -10,6 +10,9 @@
           minWidth: 100px<br/>
           width: 150px<br/>
           maxWidth: 200px<br/>
+          start resizing: {{ startResizing }}<br/>
+          stop resizing: {{ stopResizing }}<br/>
+          resizing: {{ resizing }}<br/>
         </small>
       </p>
     </div>
@@ -24,6 +27,9 @@
           <strong>Configured with:</strong><br/>
           width: 25%<br/>
           maxWidth: 50%<br/>
+          start resizing: {{ startResizing }}<br/>
+          stop resizing: {{ stopResizing }}<br/>
+          resizing: {{ resizing }}<br/>
         </small>
       </p>
     </div>
@@ -38,6 +44,9 @@
         <small>
           <strong>Configured with:</strong><br/>
           flex-grow: 1<br/>
+          start resizing: {{ startResizing }}<br/>
+          stop resizing: {{ stopResizing }}<br/>
+          resizing: {{ resizing }}<br/>
         </small>
       </p>
     </div>
@@ -47,8 +56,34 @@
 
 <script>
 import { Multipane, MultipaneResizer } from '@/src';
-
+const data = {
+  startResizing: false,
+  stopResizing: true,
+  resizing: false
+}
 export default {
+
+  data() {
+    return data;
+  },
+
+  methods: {
+    paneResizeStart() {
+      this.startResizing = true;
+      this.stopResizing = false;
+    },
+
+    paneResizeStop() {
+      this.stopResizing = true;
+      this.startResizing = false;
+      this.resizing = false;
+    },
+
+    paneResize() {
+      this.resizing = true;
+    }
+  },
+
   components: {
     Multipane,
     MultipaneResizer,

dist/vue-multipane.js

@@ -7,6 +7,10 @@
 var LAYOUT_HORIZONTAL = 'horizontal';
 var LAYOUT_VERTICAL = 'vertical';
 
+var PANE_RESIZE_START = 'resizestart';
+var PANE_RESIZE = 'resize';
+var PANE_RESIZE_STOP = 'resizestop';
+
 var __vue_module__ = {
   name: 'multipane',
 
@@ -23,6 +27,7 @@ var __vue_module__ = {
     };
   },
 
+
   computed: {
     classnames: function classnames() {
       return [
@@ -46,6 +51,7 @@ var __vue_module__ = {
       var initialPageX = ref.pageX;
       var initialPageY = ref.pageY;
 
+
       if (resizer.className && resizer.className.match('multipane-resizer')) {
         var self = this;
         var container = self.$el;
@@ -89,7 +95,7 @@ var __vue_module__ = {
         var size = resize();
 
         // Trigger paneResizeStart event
-        self.$emit('paneResizeStart', pane, resizer, size);
+        self.$emit(PANE_RESIZE_START, pane, resizer, size);
 
         var onMouseMove = function(ref) {
           var pageX = ref.pageX;
@@ -100,7 +106,7 @@ var __vue_module__ = {
               ? resize(initialPaneWidth, pageX - initialPageX)
               : resize(initialPaneHeight, pageY - initialPageY);
 
-          self.$emit('paneResize', pane, resizer, size);
+          self.$emit(PANE_RESIZE, pane, resizer, size);
         };
 
         var onMouseUp = function() {
@@ -116,7 +122,7 @@ var __vue_module__ = {
           removeEventListener('mousemove', onMouseMove);
           removeEventListener('mouseup', onMouseUp);
 
-          self.$emit('paneResizeStop', pane, resizer, size);
+          self.$emit(PANE_RESIZE_STOP, pane, resizer, size);
         };
 
         addEventListener('mousemove', onMouseMove);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-multipane",
   "description": "Resizable split panes for Vue.js.",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "author": "Yan Sern <hey@yansern.io>",
   "main": "dist/vue-multipane.js",
   "unpkg": "dist/vue-multipane.min.js",

src/multipane.js

@@ -1,6 +1,10 @@
 const LAYOUT_HORIZONTAL = 'horizontal';
 const LAYOUT_VERTICAL = 'vertical';
 
+const PANE_RESIZE_START = 'resizestart';
+const PANE_RESIZE = 'resize';
+const PANE_RESIZE_STOP = 'resizestop';
+
 export default {
   name: 'multipane',
 
@@ -17,6 +21,7 @@ export default {
     };
   },
 
+
   computed: {
     classnames() {
       return [
@@ -37,6 +42,7 @@ export default {
 
   methods: {
     onMouseDown({ target: resizer, pageX: initialPageX, pageY: initialPageY }) {
+
       if (resizer.className && resizer.className.match('multipane-resizer')) {
         let self = this;
         let { $el: container, layout } = self;
@@ -78,15 +84,15 @@ export default {
         let size = resize();
 
         // Trigger paneResizeStart event
-        self.$emit('paneResizeStart', pane, resizer, size);
+        self.$emit(PANE_RESIZE_START, pane, resizer, size);
 
         const onMouseMove = function({ pageX, pageY }) {
           size =
             layout == LAYOUT_VERTICAL
               ? resize(initialPaneWidth, pageX - initialPageX)
               : resize(initialPaneHeight, pageY - initialPageY);
 
-          self.$emit('paneResize', pane, resizer, size);
+          self.$emit(PANE_RESIZE, pane, resizer, size);
         };
 
         const onMouseUp = function() {
@@ -102,7 +108,7 @@ export default {
           removeEventListener('mousemove', onMouseMove);
           removeEventListener('mouseup', onMouseUp);
 
-          self.$emit('paneResizeStop', pane, resizer, size);
+          self.$emit(PANE_RESIZE_STOP, pane, resizer, size);
         };
 
         addEventListener('mousemove', onMouseMove);