From c55bf5100ed73f53a10d5d4d4f36aa3b52373019 Mon Sep 17 00:00:00 2001
From: Jeff Galbraith <jeff.galbraith@xendra.com>
Date: Wed, 13 Feb 2019 16:32:54 -0700
Subject: [PATCH 1/4] feat(docs): Splitter Image examples - remove scrollbars

Got it figured out...
---
 docs/src/examples/QSplitter/ImageFun.vue       | 7 ++++---
 docs/src/examples/QSplitter/ReactiveImages.vue | 6 ++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/docs/src/examples/QSplitter/ImageFun.vue b/docs/src/examples/QSplitter/ImageFun.vue
index 83f4cf4befa..bdbab55e09e 100644
--- a/docs/src/examples/QSplitter/ImageFun.vue
+++ b/docs/src/examples/QSplitter/ImageFun.vue
@@ -5,6 +5,7 @@
       v-model="splitterModel"
       :limits="[0, 100]"
       style="height: 300px; width: 400px;"
+      class="no-scroll"
     >
 
       <template v-slot:before class="no-scroll">
@@ -38,7 +39,7 @@ export default {
 }
 </script>
 <style>
-/* .q-splitter__before, .q-splitter__after { */
-  /* overflow: hidden !important; */
-/* } */
+.no-scroll > .q-splitter__before, .no-scroll > .q-splitter__after {
+  overflow: hidden !important;
+}
 </style>
diff --git a/docs/src/examples/QSplitter/ReactiveImages.vue b/docs/src/examples/QSplitter/ReactiveImages.vue
index c46af5680e9..1fe9815e60b 100644
--- a/docs/src/examples/QSplitter/ReactiveImages.vue
+++ b/docs/src/examples/QSplitter/ReactiveImages.vue
@@ -3,6 +3,7 @@
     <q-splitter
       v-model="splitterModel"
       style="height: 400px"
+      class="no-scroll"
     >
 
       <template v-slot:before>
@@ -32,3 +33,8 @@ export default {
   }
 }
 </script>
+<style>
+.no-scroll > .q-splitter__before, .no-scroll > .q-splitter__after {
+  overflow: hidden !important;
+}
+</style>

From d82d4506f66741a7c1cb3810d65782a5bf231a6d Mon Sep 17 00:00:00 2001
From: Jeff Galbraith <jeff.galbraith@xendra.com>
Date: Wed, 13 Feb 2019 17:29:28 -0700
Subject: [PATCH 2/4] feat(docs): Splitter - Image Fun example now
 mobile-friendly

---
 docs/src/examples/QSplitter/ImageFun.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/docs/src/examples/QSplitter/ImageFun.vue b/docs/src/examples/QSplitter/ImageFun.vue
index bdbab55e09e..d47741e0ad1 100644
--- a/docs/src/examples/QSplitter/ImageFun.vue
+++ b/docs/src/examples/QSplitter/ImageFun.vue
@@ -1,10 +1,11 @@
 <template>
   <div>
+    <q-resize-observer @resize="onResize" />
     <q-splitter
       id="photos"
       v-model="splitterModel"
       :limits="[0, 100]"
-      style="height: 300px; width: 400px;"
+      :style="splitterStyle"
       class="no-scroll"
     >
 
@@ -35,6 +36,21 @@ export default {
       width: 400,
       splitterModel: 50 // start at 50%
     }
+  },
+  methods: {
+    // we are using q-resize-observer to keep this example mobile-friendly
+    onResize (size) {
+      let potentialWidth = Math.abs(size.width)
+      this.width = Math.min(potentialWidth, 400)
+    }
+  },
+  computed: {
+    splitterStyle () {
+      return {
+        height: '300px',
+        width: this.width + 'px'
+      }
+    }
   }
 }
 </script>

From caf3f114b2f18fe155425613f3eb6fccdf668f34 Mon Sep 17 00:00:00 2001
From: Jeff Galbraith <jeff.galbraith@xendra.com>
Date: Wed, 13 Feb 2019 18:10:11 -0700
Subject: [PATCH 3/4] Feat(quasar): splitter json api - Fixed "beetween" and
 added "percent"

Keeping this all in one PR as it is related
---
 quasar/src/components/splitter/QSplitter.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quasar/src/components/splitter/QSplitter.json b/quasar/src/components/splitter/QSplitter.json
index f93492199b4..d7a8d8840b0 100644
--- a/quasar/src/components/splitter/QSplitter.json
+++ b/quasar/src/components/splitter/QSplitter.json
@@ -2,7 +2,7 @@
   "props": {
     "value": {
       "type": "Number",
-      "desc": "Model of the component defining the split ratio (0.0 < x < 100.0) beetween panes; Either use this property (along with a listener for 'input' event) OR use v-model directive",
+      "desc": "Model of the component defining the split ratio percent (0.0 < x < 100.0) between panes; Either use this property (along with a listener for 'input' event) OR use v-model directive",
       "examples": [ "v-model=\"ratio\"" ]
     },
 

From 8c0455bcf22dd074e276c413fb6b74d49164012c Mon Sep 17 00:00:00 2001
From: Jeff Galbraith <jeff.galbraith@xendra.com>
Date: Wed, 13 Feb 2019 18:18:06 -0700
Subject: [PATCH 4/4] feat(docs): Splitter - adding related

---
 docs/src/pages/vue-components/splitter.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/src/pages/vue-components/splitter.md b/docs/src/pages/vue-components/splitter.md
index a02a883bc31..ee9b930df0e 100644
--- a/docs/src/pages/vue-components/splitter.md
+++ b/docs/src/pages/vue-components/splitter.md
@@ -1,5 +1,9 @@
 ---
 title: QSplitter
+related:
+  - /vue-components/expansion-item
+  - /vue-components/slide-item
+  - /vue-components/separator
 ---
 
 The QSplitter component allow containers to be split vertically and/or horizontally through a draggable separator bar.