feat(QSplitter): New Boolean prop ("emit-immediately") quasarframework#5632

Author: rstoenescu

ui/dev/components/components/splitter.vue

@@ -7,6 +7,7 @@
       <q-toggle v-model="disable" label="Disable" />
       <q-toggle v-model="funkyLimits" label="Funky limits" />
       <q-toggle v-model="showSeparator" label="Show separator" />
+      <q-toggle v-model="emitImmediately" label="Emit immediately" />
       <q-input
         v-model="model"
         standout
@@ -33,6 +34,7 @@
       :unit="modelUnit"
       :limits="limits"
       :disable="disable"
+      :emit-immediately="emitImmediately"
 
       class="q-mt-md"
       style="height: 700px; border: 1px solid black"
@@ -75,6 +77,7 @@
       :unit="modelUnit"
       :limits="limits"
       :disable="disable"
+      :emit-immediately="emitImmediately"
 
       class="q-mt-md stylish-splitter"
       separator-class="bg-deep-orange"
@@ -182,7 +185,8 @@ export default {
       modelUnit: '%',
       funkyLimits: false,
       disable: false,
-      showSeparator: true
+      showSeparator: true,
+      emitImmediately: false
     }
   },
 

ui/src/components/splitter/QSplitter.js

@@ -36,6 +36,8 @@ export default Vue.extend({
       }
     },
 
+    emitImmediately: Boolean,
+
     horizontal: Boolean,
     disable: Boolean,
 
@@ -128,6 +130,10 @@ export default Vue.extend({
       this.__normalized = Math.min(this.__maxValue, this.computedLimits[1], Math.max(this.computedLimits[0], val))
 
       this.$refs[this.side].style[this.prop] = this.__getCSSValue(this.__normalized)
+
+      if (this.emitImmediately === true && this.value !== this.__normalized) {
+        this.$emit('input', this.__normalized)
+      }
     },
 
     __normalize (val, limits) {

ui/src/components/splitter/QSplitter.json

@@ -27,6 +27,12 @@
       "addedIn": "v1.2.6"
     },
 
+    "emit-immediately": {
+      "type": "Boolean",
+      "desc": "Emit model while user is panning on the separator",
+      "category": "model"
+    },
+
     "horizontal": {
       "type": "Boolean",
       "desc": "Allows the splitter to split its two panels horizontally, instead of vertically",