Merge branch 'master' of https://github.com/vibou/vue-multipane into …

…fix#19-yansern#15-yansern#14-yansern#7-yansern#17-yansern#1 * 'master' of https://github.com/vibou/vue-multipane: 0.96 fix issue with event names. Renamed: resize resizestart and resizestop since kebab case is not working either 0.96 0.96 0.96 Change version Change events name from camelcase to kebab-case # Conflicts: # demo/main.js # dist/vue-multipane.esm.js # dist/vue-multipane.js # dist/vue-multipane.min.js # src/multipane.js
jhlee8804 · Apr 1, 2019 · 738b022 · 738b022
2 parents a04370a + beaa3e6
commit 738b022
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 11 deletions.
diff --git a/demo/src/VerticalPanes.vue b/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,

diff --git a/dist/vue-multipane.esm.js b/dist/vue-multipane.esm.js
diff --git a/dist/vue-multipane.js b/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 [
@@ -99,7 +104,7 @@ var __vue_module__ = {
                     : resize(initialPaneHeight));
 
         // 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;
@@ -109,7 +114,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() {
@@ -124,7 +129,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);

diff --git a/dist/vue-multipane.min.js b/dist/vue-multipane.min.js
diff --git a/package.json b/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 <[email protected]>",
   "main": "dist/vue-multipane.js",
   "unpkg": "dist/vue-multipane.min.js",

diff --git a/src/multipane.js b/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 [
@@ -88,14 +93,14 @@ export default {
                     : resize(initialPaneHeight));
 
         // Trigger paneResizeStart event
-        self.$emit('paneResizeStart', pane, resizer, size);
+        self.$emit(PANE_RESIZE_START, pane, resizer, size);
 
         const onMouseMove = function({ pageX, pageY }) {
           let 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() {
@@ -110,7 +115,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);