Merge pull request #6394 from mehdirande/fix-5463-reset-splitter-state

Proposal for #5463: Add a resetState method to splitter to manually reset state
primefaces · Sep 24, 2024 · 00d7470 · 00d7470
2 parents 2859a35 + 404771e
commit 00d7470
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 26 deletions.
diff --git a/packages/primevue/src/splitter/Splitter.d.ts b/packages/primevue/src/splitter/Splitter.d.ts
@@ -226,6 +226,13 @@ export interface SplitterEmitsOptions {
 
 export declare type SplitterEmits = EmitFn<SplitterEmitsOptions>;
 
+export interface SplitterMethods {
+    /**
+     * This method resizes all panels by either using the stored state in the case of a stateful Splitter, the size property of each SplitterPanel, or by resetting them to their default values.
+     */
+    resetState(): void;
+}
+
 /**
  * **PrimeVue - Splitter**
  *
@@ -238,7 +245,7 @@ export declare type SplitterEmits = EmitFn<SplitterEmitsOptions>;
  * @group Component
  *
  */
-declare const Splitter: DefineComponent<SplitterProps, SplitterSlots, SplitterEmits>;
+declare const Splitter: DefineComponent<SplitterProps, SplitterSlots, SplitterEmits, SplitterMethods>;
 
 declare module 'vue' {
     export interface GlobalComponents {

diff --git a/packages/primevue/src/splitter/Splitter.vue b/packages/primevue/src/splitter/Splitter.vue
@@ -22,9 +22,9 @@
 </template>
 
 <script>
-import { getVNodeProp } from '@primevue/core/utils';
-import { getWidth, getHeight, getOuterWidth, getOuterHeight } from '@primeuix/utils/dom';
+import { getHeight, getOuterHeight, getOuterWidth, getWidth } from '@primeuix/utils/dom';
 import { isArray } from '@primeuix/utils/object';
+import { getVNodeProp } from '@primevue/core/utils';
 import BaseSplitter from './BaseSplitter.vue';
 
 export default {
@@ -53,29 +53,7 @@ export default {
         };
     },
     mounted() {
-        if (this.panels && this.panels.length) {
-            let initialized = false;
-
-            if (this.isStateful()) {
-                initialized = this.restoreState();
-            }
-
-            if (!initialized) {
-                let children = [...this.$el.children].filter((child) => child.getAttribute('data-pc-name') === 'splitterpanel');
-                let _panelSizes = [];
-
-                this.panels.map((panel, i) => {
-                    let panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
-                    let panelSize = panelInitialSize || 100 / this.panels.length;
-
-                    _panelSizes[i] = panelSize;
-                    children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
-                });
-
-                this.panelSizes = _panelSizes;
-                this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
-            }
-        }
+        this.initializePanels();
     },
     beforeUnmount() {
         this.clear();
@@ -85,6 +63,31 @@ export default {
         isSplitterPanel(child) {
             return child.type.name === 'SplitterPanel';
         },
+        initializePanels() {
+            if (this.panels && this.panels.length) {
+                let initialized = false;
+
+                if (this.isStateful()) {
+                    initialized = this.restoreState();
+                }
+
+                if (!initialized) {
+                    let children = [...this.$el.children].filter((child) => child.getAttribute('data-pc-name') === 'splitterpanel');
+                    let _panelSizes = [];
+
+                    this.panels.map((panel, i) => {
+                        let panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
+                        let panelSize = panelInitialSize || 100 / this.panels.length;
+
+                        _panelSizes[i] = panelSize;
+                        children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
+                    });
+
+                    this.panelSizes = _panelSizes;
+                    this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
+                }
+            }
+        },
         onResizeStart(event, index, isKeyDown) {
             this.gutterElement = event.currentTarget || event.target.parentElement;
             this.size = this.horizontal ? getWidth(this.$el) : getHeight(this.$el);
@@ -348,6 +351,9 @@ export default {
             }
 
             return false;
+        },
+        resetState() {
+            this.initializePanels();
         }
     },
     computed: {