Fixed primefaces#5463 - Splitter/SplitterPanel: size not updated

fcbtech · Apr 1, 2024 · cd18096 · cd18096
1 parent 99ca280
commit cd18096
Showing 1 changed file with 30 additions and 23 deletions.
diff --git a/components/lib/splitter/Splitter.vue b/components/lib/splitter/Splitter.vue
@@ -2,6 +2,7 @@
     <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptmi('root', getPTOptions)">
         <template v-for="(panel, i) of panels" :key="i">
             <component :is="panel" tabindex="-1"></component>
+
             <div
                 v-if="i !== panels.length - 1"
                 ref="gutter"
@@ -51,29 +52,10 @@ 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();
+    },
+    updated() {
+        this.initializePanels();
     },
     beforeUnmount() {
         this.clear();
@@ -83,6 +65,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 ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);