State for Splitter

public/themes/arya-blue/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #383838;
 }
 

public/themes/arya-green/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #383838;
 }
 

public/themes/arya-orange/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #383838;
 }
 

public/themes/arya-purple/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #383838;
 }
 

public/themes/bootstrap4-dark-blue/theme.css

@@ -2908,7 +2908,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #3f4b5b;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #3f4b5b;
 }
 

public/themes/bootstrap4-dark-purple/theme.css

@@ -2908,7 +2908,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #3f4b5b;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #3f4b5b;
 }
 

public/themes/bootstrap4-light-blue/theme.css

@@ -2908,7 +2908,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #dee2e6;
 }
 

public/themes/bootstrap4-light-purple/theme.css

@@ -2908,7 +2908,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #dee2e6;
 }
 

public/themes/fluent-light/theme.css

@@ -2871,7 +2871,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #edebe9;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #edebe9;
 }
 

public/themes/luna-amber/theme.css

@@ -2883,7 +2883,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #4b4b4b;
 }
 

public/themes/luna-blue/theme.css

@@ -2883,7 +2883,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #4b4b4b;
 }
 

public/themes/luna-green/theme.css

@@ -2883,7 +2883,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #4b4b4b;
 }
 

public/themes/luna-pink/theme.css

@@ -2883,7 +2883,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #4b4b4b;
 }
 

public/themes/md-dark-deeppurple/theme.css

@@ -2920,7 +2920,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: rgba(255, 255, 255, 0.12);
 }
 

public/themes/md-dark-indigo/theme.css

@@ -2920,7 +2920,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: rgba(255, 255, 255, 0.12);
 }
 

public/themes/md-light-deeppurple/theme.css

@@ -2920,7 +2920,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: rgba(0, 0, 0, 0.12);
 }
 

public/themes/md-light-indigo/theme.css

@@ -2920,7 +2920,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: rgba(0, 0, 0, 0.12);
 }
 

public/themes/mdc-dark-deeppurple/theme.css

@@ -2920,7 +2920,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: rgba(255, 255, 255, 0.12);
 }
 

public/themes/mdc-dark-indigo/theme.css

@@ -2920,7 +2920,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: rgba(255, 255, 255, 0.12);
 }
 

public/themes/mdc-light-deeppurple/theme.css

@@ -2920,7 +2920,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: rgba(0, 0, 0, 0.12);
 }
 

public/themes/mdc-light-indigo/theme.css

@@ -2920,7 +2920,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: rgba(0, 0, 0, 0.12);
 }
 

public/themes/nova-accent/theme.css

@@ -2871,7 +2871,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #d8dae2;
 }
 

public/themes/nova-alt/theme.css

@@ -2883,7 +2883,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #d8dae2;
 }
 

public/themes/nova-vue/theme.css

@@ -2883,7 +2883,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #d8dae2;
 }
 

public/themes/nova/theme.css

@@ -2883,7 +2883,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #d8dae2;
 }
 

public/themes/rhea/theme.css

@@ -2871,7 +2871,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dadada;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #dadada;
 }
 

public/themes/saga-blue/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #dee2e6;
 }
 

public/themes/saga-green/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #dee2e6;
 }
 

public/themes/saga-orange/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #dee2e6;
 }
 

public/themes/saga-purple/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #dee2e6;
 }
 

public/themes/vela-blue/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #304562;
 }
 

public/themes/vela-green/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #304562;
 }
 

public/themes/vela-orange/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #304562;
 }
 

public/themes/vela-purple/theme.css

@@ -2896,7 +2896,7 @@
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }
-.p-splitter.p-splitter-resizing .p-splitter-gutter {
+.p-splitter .p-splitter-gutter-resizing {
   background: #304562;
 }
 

src/components/splitter/Splitter.d.ts

@@ -3,6 +3,8 @@ import Vue from 'vue';
 declare class Splitter extends Vue {
     layout?: string;
     gutterSize?: number;
+    stateKey?: string;
+    stateStorage?: string;
 }
 
 export default Splitter;

src/components/splitter/Splitter.vue

@@ -2,7 +2,7 @@
     <div :class="containerClass">
         <template v-for="(panel,i) of panels" :key="i" class="p-splitter-panel">
              <component :is="panel"></component>
-             <div ref="gutter" class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle" @mousedown="onGutterMouseDown($event)">
+             <div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle" @mousedown="onGutterMouseDown($event, i)">
                  <div class="p-splitter-gutter-handle"></div>
              </div>
         </template>
@@ -13,6 +13,7 @@
 import DomHandler from '../utils/DomHandler';
 
 export default {
+    emits: ['resizeend'],
     name: 'splitter',
     props: {
         layout: {
@@ -22,19 +23,49 @@ export default {
         gutterSize: {
             type: Number,
             default: 4
+        },
+        stateKey: {
+            type: String,
+            default: null
+        },
+        stateStorage: {
+            type: String,
+            default: 'session'
         }
     },
     dragging: false,
     mouseMoveListener: null,
     mouseUpListener: null,
     size: null,
+    gutterElement: null,
     startPos: null,
     prevPanelElement: null,
     nextPanelElement: null,
     nextPanelSize: null,
     prevPanelSize: null,
+    panelSizes: null,
+    prevPanelIndex: null, 
     mounted() {
-        this.initialize();
+        if (this.panels && this.panels.length) {
+            let initialized = false;
+            if (this.isStateful()) {
+                initialized = this.restoreState();
+            }
+
+            if (!initialized) {
+                let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel'));
+                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;
+            }
+        }
     },
     beforeUnmount() {
         this.clear();
@@ -44,28 +75,17 @@ export default {
         isSplitterPanel(child) {
             return child.type.name === 'splitterpanel';
         },
-        initialize() {
+        onGutterMouseDown(event, index) {
-            if (this.panels && this.panels.length) {
+            this.gutterElement = event.currentTarget;
-                let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel'));
-
-                this.panels.forEach((panel, i) => {
-                    let panelSize = panel.props && panel.props.size ? panel.props.size: null;
-
-                    if (panelSize)
-                        children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
-                    else
-                        children[i].style.flexBasis = 'calc(' + (100 / this.panels.length) + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
-                });
-            }
-        },
-        onGutterMouseDown(event) {
             this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
             this.dragging = true;
             this.startPos = this.layout === 'horizontal' ? event.pageX : event.pageY;
-            this.prevPanelElement = event.currentTarget.previousElementSibling;
+            this.prevPanelElement = this.gutterElement.previousElementSibling;
-            this.nextPanelElement = event.currentTarget.nextElementSibling;
+            this.nextPanelElement = this.gutterElement.nextElementSibling;
             this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
             this.nextPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true): DomHandler.getOuterHeight(this.nextPanelElement, true)) / this.size;
+            this.prevPanelIndex = index;
+            DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing');
             DomHandler.addClass(this.$el, 'p-splitter-resizing');
             this.bindListeners();
         },
@@ -84,13 +104,22 @@ export default {
                     if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
                         this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
                         this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                        this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
+                        this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
                     }
                 };
                 document.addEventListener('mousemove', this.mouseMoveListener);
             }
 
             if (!this.mouseUpListener) {
-                this.mouseUpListener = () => {
+                this.mouseUpListener = (event) => {
+                    if (this.isStateful()) {
+                        this.saveState();
+                    }
+
+                    this.$emit('resizeend', {originalEvent: event, sizes: this.panelSizes});
+                    DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing');
+                    DomHandler.removeClass(this.$el, 'p-splitter-resizing');
                     this.clear();
                     this.unbindListeners();
                 };
@@ -127,7 +156,42 @@ export default {
             this.nextPanelElement = null;
             this.prevPanelSize = null;
             this.nextPanelSize = null;
-            DomHandler.removeClass(this.$el, 'p-splitter-resizing');
+            this.gutterElement = null;
+            this.prevPanelIndex = null;
+        },
+        isStateful() {
+            return this.stateKey != null;
+        },
+        getStorage() {
+            switch(this.stateStorage) {
+                case 'local':
+                    return window.localStorage;
+
+                case 'session':
+                    return window.sessionStorage;
+
+                default:
+                    throw new Error(this.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
+            }
+        },
+        saveState() {
+            this.getStorage().setItem(this.stateKey, JSON.stringify(this.panelSizes));
+        },
+        restoreState() {
+            const storage = this.getStorage();
+            const stateString = storage.getItem(this.stateKey);
+
+            if (stateString) {
+                this.panelSizes = JSON.parse(stateString);
+                let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel'));
+                children.forEach((child, i) => {
+                    child.style.flexBasis = 'calc(' + this.panelSizes[i] + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+                });
+
+                return true;
+            }
+
+            return false;
         }
     },
     computed: {

src/views/splitter/SplitterDemo.vue

@@ -10,6 +10,15 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Horizontal</h5>
+                <Splitter style="height: 300px" class="p-mb-5">
+                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                        Panel 1
+                    </SplitterPanel>
+                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                        Panel 2
+                    </SplitterPanel>
+                </Splitter>
+
                 <Splitter style="height: 300px">
                     <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
                         Panel 1
@@ -17,6 +26,9 @@
                     <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
                         Panel 2
                     </SplitterPanel>
+                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                        Panel 3
+                    </SplitterPanel>
                 </Splitter>
             </div>
 

src/views/splitter/SplitterDoc.vue

@@ -97,6 +97,23 @@ import SplitterPanel from 'primevue/splitterpanel';
 	</SplitterPanel>
 </Splitter>
 
+</code></pre>
+
+				<h5>Stateful</h5>
+				<p>Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes
+					can be restored. Define a <i>stateKey</i> to enable this feature. Default location of the state is
+					session storage and other option is the local storage which can be configured using the <i>stateStorage</i> property.</p>
+<pre v-code>
+<code>
+&lt;Splitter stateKey="mykey" stateStorage="local"&gt;
+	&lt;SplitterPanel&gt;
+		Panel 1
+	&lt;/SplitterPanel&gt;
+	&lt;SplitterPanel&gt;
+		Panel 2
+	&lt;/SplitterPanel&gt;
+&lt;/Splitter&gt;
+
 </code></pre>
 
 				<h5>Properties of SplitterPanel</h5>
@@ -152,6 +169,18 @@ import SplitterPanel from 'primevue/splitterpanel';
                                 <td>number</td>
                                 <td>4</td>
                                 <td>Size of the divider in pixels.</td>
+                            </tr>
+							<tr>
+                                <td>stateKey</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Storage identifier of a stateful Splitter.</td>
+                            </tr>
+							<tr>
+                                <td>stateStorage</td>
+                                <td>string</td>
+                                <td>session</td>
+                                <td>Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -220,6 +249,18 @@ import SplitterPanel from 'primevue/splitterpanel';
 			Panel 2
 		&lt;/SplitterPanel&gt;
 	&lt;/Splitter&gt;
+
+	&lt;Splitter style="height: 300px"&gt;
+		&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center"&gt;
+			Panel 1
+		&lt;/SplitterPanel&gt;
+		&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center"&gt;
+			Panel 2
+		&lt;/SplitterPanel&gt;
+		&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center"&gt;
+			Panel 3
+		&lt;/SplitterPanel&gt;
+	&lt;/Splitter&gt;
 &lt;/div&gt;
 
 &lt;div class="card"&gt;