Add resize event to splitter (#4526)

* Add resizing event to splitter component

* doc

* 'resize' instead of 'resizing'

* 'resize' instead of 'resizing'

components/lib/splitter/Splitter.d.ts

@@ -55,6 +55,21 @@ export interface SplitterResizeStartEvent {
     sizes: number[];
 }
 
+/**
+ * Custom resize event.
+ * @see {@link SplitterEmits.resize}
+ */
+export interface SplitterResizeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Sizes of the panels
+     */
+    sizes: number[];
+}
+
 /**
  * Custom resize end event.
  * @see {@link SplitterEmits.resizeend}
@@ -185,6 +200,11 @@ export interface SplitterEmits {
      * @param {SplitterResizeStartEvent} event - Custom resize start event.
      */
     resizestart(event: SplitterResizeStartEvent): void;
+    /**
+     * Callback to invoke during the resizing process.
+     * @param {SplitterResizeEvent} event - Custom resize event.
+     */
+    resize(event: SplitterResizeEvent): void;
     /**
      * Callback to invoke when resize ends.
      * @param {SplitterResizeEndEvent} event - Custom resize end event.

components/lib/splitter/Splitter.vue

@@ -28,7 +28,7 @@ import BaseSplitter from './BaseSplitter.vue';
 export default {
     name: 'Splitter',
     extends: BaseSplitter,
-    emits: ['resizestart', 'resizeend'],
+    emits: ['resizestart', 'resizeend', 'resize'],
     dragging: false,
     mouseMoveListener: null,
     mouseUpListener: null,
@@ -141,6 +141,8 @@ export default {
                 this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
                 this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
             }
+
+            this.$emit('resize', { originalEvent: event, sizes: this.panelSizes });
         },
         onResizeEnd(event) {
             if (this.isStateful()) {

doc/common/apidoc/index.json

@@ -45040,9 +45040,9 @@
                     ],
                     "methods": []
                 },
-                "SplitterResizeEndEvent": {
-                    "description": "Custom resize end event.",
-                    "relatedProp": "SplitterEmits.resizeend",
+                "SplitterResizeEvent": {
+                    "description": "Custom resize event.",
+                    "relatedProp": "SplitterEmits.resize",
                     "props": [
                         {
                             "name": "originalEvent",
@@ -45058,7 +45058,7 @@
                             "readonly": false,
                             "type": "number[]",
                             "default": "",
-                            "description": "Sizes of the panels"
+                            "description": "Sizes of the panels during resize"
                         }
                     ],
                     "methods": []
@@ -45247,6 +45247,19 @@
                             "returnType": "void",
                             "description": "Callback to invoke when resize starts."
                         },
+                        {
+                            "name": "resize",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SplitterResizeEvent",
+                                    "description": "Custom resize event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke during the resizing process."
+                        },
                         {
                             "name": "resizeend",
                             "parameters": [