From d04840d5045863d3425602827dd4a46cc946146f Mon Sep 17 00:00:00 2001 From: Ice-Hazymoon Date: Sun, 1 Oct 2023 02:59:45 +0900 Subject: [PATCH 1/4] Add resizing event to splitter component --- components/lib/splitter/Splitter.d.ts | 20 ++++++++++++++++++++ components/lib/splitter/Splitter.vue | 4 +++- doc/common/apidoc/index.json | 21 +++++++++++++++++---- doc/splitter/HorizontalDoc.vue | 2 +- 4 files changed, 41 insertions(+), 6 deletions(-) diff --git a/components/lib/splitter/Splitter.d.ts b/components/lib/splitter/Splitter.d.ts index b9f1e0ccf3..60cd766399 100644 --- a/components/lib/splitter/Splitter.d.ts +++ b/components/lib/splitter/Splitter.d.ts @@ -55,6 +55,21 @@ export interface SplitterResizeStartEvent { sizes: number[]; } +/** + * Custom resizing event. + * @see {@link SplitterEmits.resizing} + */ +export interface SplitterResizingEvent { + /** + * 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 when resizing. + * @param {SplitterResizingEvent} event - Custom resizing event. + */ + resizing(event: SplitterResizingEvent): void; /** * Callback to invoke when resize ends. * @param {SplitterResizeEndEvent} event - Custom resize end event. diff --git a/components/lib/splitter/Splitter.vue b/components/lib/splitter/Splitter.vue index 4d3a5a9ea5..cbf4b17a56 100644 --- a/components/lib/splitter/Splitter.vue +++ b/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', 'resizing'], 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('resizing', { originalEvent: event, sizes: this.panelSizes }); }, onResizeEnd(event) { if (this.isStateful()) { diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 12fae68b0b..44c0fe3ed9 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -40427,9 +40427,9 @@ ], "methods": [] }, - "SplitterResizeEndEvent": { - "description": "Custom resize end event.", - "relatedProp": "SplitterEmits.resizeend", + "SplitterResizingEvent": { + "description": "Custom resizing event.", + "relatedProp": "SplitterEmits.resizing", "props": [ { "name": "originalEvent", @@ -40445,7 +40445,7 @@ "readonly": false, "type": "number[]", "default": "", - "description": "Sizes of the panels" + "description": "Sizes of the panels during resizing" } ], "methods": [] @@ -40634,6 +40634,19 @@ "returnType": "void", "description": "Callback to invoke when resize starts." }, + { + "name": "resizing", + "parameters": [ + { + "name": "event", + "optional": false, + "type": "SplitterResizingEvent", + "description": "Custom resizing event." + } + ], + "returnType": "void", + "description": "Callback to invoke when resizing." + }, { "name": "resizeend", "parameters": [ diff --git a/doc/splitter/HorizontalDoc.vue b/doc/splitter/HorizontalDoc.vue index b2da038862..04a0c0058c 100644 --- a/doc/splitter/HorizontalDoc.vue +++ b/doc/splitter/HorizontalDoc.vue @@ -3,7 +3,7 @@

Splitter requires two SplitterPanel components as children which are displayed horizontally by default.

- + Panel 1 Panel 2 From ebc3c9eb072116aa9689af02ce7263c22d345bda Mon Sep 17 00:00:00 2001 From: Ice-Hazymoon Date: Sun, 1 Oct 2023 03:01:32 +0900 Subject: [PATCH 2/4] doc --- doc/splitter/HorizontalDoc.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/splitter/HorizontalDoc.vue b/doc/splitter/HorizontalDoc.vue index 04a0c0058c..b2da038862 100644 --- a/doc/splitter/HorizontalDoc.vue +++ b/doc/splitter/HorizontalDoc.vue @@ -3,7 +3,7 @@

Splitter requires two SplitterPanel components as children which are displayed horizontally by default.

- + Panel 1 Panel 2 From 665faac3dc67700212277e8e5a4526aa3ccd40ec Mon Sep 17 00:00:00 2001 From: Ice-Hazymoon Date: Thu, 5 Oct 2023 22:41:23 +0900 Subject: [PATCH 3/4] 'resize' instead of 'resizing' --- components/lib/splitter/Splitter.d.ts | 6 +++--- components/lib/splitter/Splitter.vue | 4 ++-- doc/common/apidoc/index.json | 16 ++++++++-------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/components/lib/splitter/Splitter.d.ts b/components/lib/splitter/Splitter.d.ts index 60cd766399..3039e78c48 100644 --- a/components/lib/splitter/Splitter.d.ts +++ b/components/lib/splitter/Splitter.d.ts @@ -59,7 +59,7 @@ export interface SplitterResizeStartEvent { * Custom resizing event. * @see {@link SplitterEmits.resizing} */ -export interface SplitterResizingEvent { +export interface SplitterResizeEvent { /** * Browser event */ @@ -202,9 +202,9 @@ export interface SplitterEmits { resizestart(event: SplitterResizeStartEvent): void; /** * Callback to invoke when resizing. - * @param {SplitterResizingEvent} event - Custom resizing event. + * @param {SplitterResizeEvent} event - Custom resizing event. */ - resizing(event: SplitterResizingEvent): void; + resizing(event: SplitterResizeEvent): void; /** * Callback to invoke when resize ends. * @param {SplitterResizeEndEvent} event - Custom resize end event. diff --git a/components/lib/splitter/Splitter.vue b/components/lib/splitter/Splitter.vue index cbf4b17a56..48693d4dcb 100644 --- a/components/lib/splitter/Splitter.vue +++ b/components/lib/splitter/Splitter.vue @@ -28,7 +28,7 @@ import BaseSplitter from './BaseSplitter.vue'; export default { name: 'Splitter', extends: BaseSplitter, - emits: ['resizestart', 'resizeend', 'resizing'], + emits: ['resizestart', 'resizeend', 'resize'], dragging: false, mouseMoveListener: null, mouseUpListener: null, @@ -142,7 +142,7 @@ export default { this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize; } - this.$emit('resizing', { originalEvent: event, sizes: this.panelSizes }); + this.$emit('resize', { originalEvent: event, sizes: this.panelSizes }); }, onResizeEnd(event) { if (this.isStateful()) { diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 44c0fe3ed9..ac24acc1cd 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -40427,9 +40427,9 @@ ], "methods": [] }, - "SplitterResizingEvent": { - "description": "Custom resizing event.", - "relatedProp": "SplitterEmits.resizing", + "SplitterResizeEvent": { + "description": "Custom resize event.", + "relatedProp": "SplitterEmits.resize", "props": [ { "name": "originalEvent", @@ -40445,7 +40445,7 @@ "readonly": false, "type": "number[]", "default": "", - "description": "Sizes of the panels during resizing" + "description": "Sizes of the panels during resize" } ], "methods": [] @@ -40635,17 +40635,17 @@ "description": "Callback to invoke when resize starts." }, { - "name": "resizing", + "name": "resize", "parameters": [ { "name": "event", "optional": false, - "type": "SplitterResizingEvent", - "description": "Custom resizing event." + "type": "SplitterResizeEvent", + "description": "Custom resize event." } ], "returnType": "void", - "description": "Callback to invoke when resizing." + "description": "Callback to invoke during the resizing process." }, { "name": "resizeend", From 4d9ff99dbe61e59158755d296cd4b67d00ad8bdc Mon Sep 17 00:00:00 2001 From: Ice-Hazymoon Date: Fri, 6 Oct 2023 01:34:14 +0000 Subject: [PATCH 4/4] 'resize' instead of 'resizing' --- components/lib/splitter/Splitter.d.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/lib/splitter/Splitter.d.ts b/components/lib/splitter/Splitter.d.ts index 3039e78c48..a308cae673 100644 --- a/components/lib/splitter/Splitter.d.ts +++ b/components/lib/splitter/Splitter.d.ts @@ -56,8 +56,8 @@ export interface SplitterResizeStartEvent { } /** - * Custom resizing event. - * @see {@link SplitterEmits.resizing} + * Custom resize event. + * @see {@link SplitterEmits.resize} */ export interface SplitterResizeEvent { /** @@ -201,10 +201,10 @@ export interface SplitterEmits { */ resizestart(event: SplitterResizeStartEvent): void; /** - * Callback to invoke when resizing. - * @param {SplitterResizeEvent} event - Custom resizing event. + * Callback to invoke during the resizing process. + * @param {SplitterResizeEvent} event - Custom resize event. */ - resizing(event: SplitterResizeEvent): void; + resize(event: SplitterResizeEvent): void; /** * Callback to invoke when resize ends. * @param {SplitterResizeEndEvent} event - Custom resize end event.