From 8f0db108ced17ccfd290277be85e03ac835d556d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 4 Dec 2020 12:39:16 +0300
Subject: [PATCH] State for Splitter

---
 public/themes/arya-blue/theme.css             |   2 +-
 public/themes/arya-green/theme.css            |   2 +-
 public/themes/arya-orange/theme.css           |   2 +-
 public/themes/arya-purple/theme.css           |   2 +-
 public/themes/bootstrap4-dark-blue/theme.css  |   2 +-
 .../themes/bootstrap4-dark-purple/theme.css   |   2 +-
 public/themes/bootstrap4-light-blue/theme.css |   2 +-
 .../themes/bootstrap4-light-purple/theme.css  |   2 +-
 public/themes/fluent-light/theme.css          |   2 +-
 public/themes/luna-amber/theme.css            |   2 +-
 public/themes/luna-blue/theme.css             |   2 +-
 public/themes/luna-green/theme.css            |   2 +-
 public/themes/luna-pink/theme.css             |   2 +-
 public/themes/md-dark-deeppurple/theme.css    |   2 +-
 public/themes/md-dark-indigo/theme.css        |   2 +-
 public/themes/md-light-deeppurple/theme.css   |   2 +-
 public/themes/md-light-indigo/theme.css       |   2 +-
 public/themes/mdc-dark-deeppurple/theme.css   |   2 +-
 public/themes/mdc-dark-indigo/theme.css       |   2 +-
 public/themes/mdc-light-deeppurple/theme.css  |   2 +-
 public/themes/mdc-light-indigo/theme.css      |   2 +-
 public/themes/nova-accent/theme.css           |   2 +-
 public/themes/nova-alt/theme.css              |   2 +-
 public/themes/nova-vue/theme.css              |   2 +-
 public/themes/nova/theme.css                  |   2 +-
 public/themes/rhea/theme.css                  |   2 +-
 public/themes/saga-blue/theme.css             |   2 +-
 public/themes/saga-green/theme.css            |   2 +-
 public/themes/saga-orange/theme.css           |   2 +-
 public/themes/saga-purple/theme.css           |   2 +-
 public/themes/vela-blue/theme.css             |   2 +-
 public/themes/vela-green/theme.css            |   2 +-
 public/themes/vela-orange/theme.css           |   2 +-
 public/themes/vela-purple/theme.css           |   2 +-
 src/components/splitter/Splitter.d.ts         |   2 +
 src/components/splitter/Splitter.vue          | 106 ++++++++++++++----
 src/views/splitter/SplitterDemo.vue           |  12 ++
 src/views/splitter/SplitterDoc.vue            |  41 +++++++
 38 files changed, 174 insertions(+), 55 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 96ea80685..ba3e7f8c0 100644
--- a/public/themes/arya-blue/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 37b5aaa8c..c8cfe2365 100644
--- a/public/themes/arya-green/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 1f4bd9ee9..acb3b1f06 100644
--- a/public/themes/arya-orange/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 2b076e16c..f40c670c2 100644
--- a/public/themes/arya-purple/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index f9c459691..6425acf7d 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 790ae8abc..4bee34305 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 2bfaa3cba..8ba177989 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index d8f3b302e..71af6c0ba 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index ac6b4b3be..830cdc975 100644
--- a/public/themes/fluent-light/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index dd2a0574a..b696bacd6 100644
--- a/public/themes/luna-amber/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index d544788a9..02d186f33 100644
--- a/public/themes/luna-blue/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 6e61f484f..3de6c3c31 100644
--- a/public/themes/luna-green/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index ffb76de04..9b52bb85c 100644
--- a/public/themes/luna-pink/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index d3cf67c93..630282271 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/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);
 }
 
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index aba558117..8a784edd8 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/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);
 }
 
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 04bea28d1..949ee12cf 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/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);
 }
 
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index d3a8f6198..2a9cbd0a4 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/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);
 }
 
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 086fb27a4..b296f40e5 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/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);
 }
 
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index a2bd1ccda..b8c9f0df8 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/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);
 }
 
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 4f79d420a..c56908559 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/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);
 }
 
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index a504423ce..2bdc75940 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/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);
 }
 
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 36e5608d4..e05c266b4 100644
--- a/public/themes/nova-accent/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 6cfeb3467..4e5b1c526 100644
--- a/public/themes/nova-alt/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 74cdc36a6..36d93bf5e 100644
--- a/public/themes/nova-vue/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index a07c6205b..81611be84 100644
--- a/public/themes/nova/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 3d8032041..41e21beb8 100644
--- a/public/themes/rhea/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 4c0be0838..2a431e2f5 100644
--- a/public/themes/saga-blue/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index df50778ad..976cfd2da 100644
--- a/public/themes/saga-green/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 0d8668782..f2659370b 100644
--- a/public/themes/saga-orange/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 621c143ab..c19d0e32d 100644
--- a/public/themes/saga-purple/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 84e69fcde..233c871f3 100644
--- a/public/themes/vela-blue/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index bb769023e..baf906117 100644
--- a/public/themes/vela-green/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 29544d368..54868cd36 100644
--- a/public/themes/vela-orange/theme.css
+++ b/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;
 }
 
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index a14aae9b3..ed640b8fe 100644
--- a/public/themes/vela-purple/theme.css
+++ b/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;
 }
 
diff --git a/src/components/splitter/Splitter.d.ts b/src/components/splitter/Splitter.d.ts
index cfb326655..8726d6392 100644
--- a/src/components/splitter/Splitter.d.ts
+++ b/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;
\ No newline at end of file
diff --git a/src/components/splitter/Splitter.vue b/src/components/splitter/Splitter.vue
index 318ca4a58..4c0d88b46 100644
--- a/src/components/splitter/Splitter.vue
+++ b/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() {
-            if (this.panels && this.panels.length) {
-                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) {
+        onGutterMouseDown(event, index) {
+            this.gutterElement = event.currentTarget;
             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.nextPanelElement = event.currentTarget.nextElementSibling;
+            this.prevPanelElement = this.gutterElement.previousElementSibling;
+            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: {
diff --git a/src/views/splitter/SplitterDemo.vue b/src/views/splitter/SplitterDemo.vue
index a180cf00a..a3cba3ff2 100644
--- a/src/views/splitter/SplitterDemo.vue
+++ b/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>
 
diff --git a/src/views/splitter/SplitterDoc.vue b/src/views/splitter/SplitterDoc.vue
index f59def706..900848319 100644
--- a/src/views/splitter/SplitterDoc.vue
+++ b/src/views/splitter/SplitterDoc.vue
@@ -97,6 +97,23 @@ import SplitterPanel from 'primevue/splitterpanel';
 	&lt;/SplitterPanel&gt;
 &lt;/Splitter&gt;
 
+</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;