feat(QSplitter): Add @pan event that re-emits the VTouchPan event qua…

…sarframework#5632
pdanpdan · Nov 19, 2019 · e30af9b · e30af9b
1 parent d17fee9
commit e30af9b
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 1 deletion.
diff --git a/ui/dev/components/components/splitter.vue b/ui/dev/components/components/splitter.vue
@@ -34,6 +34,8 @@
       :limits="limits"
       :disable="disable"
 
+      @pan="evt => { panData = evt }"
+
       class="q-mt-md"
       style="height: 700px; border: 1px solid black"
     >
@@ -68,6 +70,7 @@
         </div>
       </template>
     </q-splitter>
+    <pre>Live @pan: {{ panData }}</pre>
 
     <q-splitter
       v-model="model"
@@ -182,7 +185,8 @@ export default {
       modelUnit: '%',
       funkyLimits: false,
       disable: false,
-      showSeparator: true
+      showSeparator: true,
+      panData: null
     }
   },
 

diff --git a/ui/src/components/splitter/QSplitter.js b/ui/src/components/splitter/QSplitter.js
@@ -117,6 +117,9 @@ export default Vue.extend({
         }
 
         this.$el.classList.remove('q-splitter--active')
+
+        this.$listeners.pan !== void 0 && this.$emit('pan', { ...evt, splitValue: this.__normalized })
+
         return
       }
 
@@ -128,6 +131,8 @@ 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)
+
+      this.$listeners.pan !== void 0 && this.$emit('pan', { ...evt, splitValue: this.__normalized })
     },
 
     __normalize (val, limits) {

diff --git a/ui/src/components/splitter/QSplitter.json b/ui/src/components/splitter/QSplitter.json
@@ -120,6 +120,118 @@
           "examples": [ 0.22 ]
         }
       }
+    },
+
+    "pan": {
+      "desc": "Emitted when panning is performed on splitter; Is emitted only if a listener is attached",
+      "params": {
+        "details": {
+          "type": "Object",
+          "desc": "Event details",
+          "definition": {
+            "evt": {
+              "type": "Object",
+              "desc": "Original JS event Object",
+              "__exemption": [ "examples" ]
+            },
+            "touch": {
+              "type": "Boolean",
+              "desc": "Triggered by a touch event"
+            },
+            "mouse": {
+              "type": "Boolean",
+              "desc": "Triggered by a mouse event"
+            },
+            "position": {
+              "type": "Object",
+              "desc": "Event Position Object",
+              "definition": {
+                "top": {
+                  "type": "Number",
+                  "desc": "Vertical offset from top of window",
+                  "examples": [ 235 ]
+                },
+                "left": {
+                  "type": "Number",
+                  "desc": "Horizontal offset from left of window",
+                  "examples": [ 235 ]
+                }
+              }
+            },
+            "direction": {
+              "type": "String",
+              "desc": "Direction of movement",
+              "values": [ "up", "right", "down", "left" ]
+            },
+            "isFirst": {
+              "type": "Boolean",
+              "desc": "Is first time the handler is called since movement started"
+            },
+            "isFinal": {
+              "type": "Boolean",
+              "desc": "Is last time the handler is called since movement ended"
+            },
+            "duration": {
+              "type": "Number",
+              "desc": "How long it took to trigger the event (in milliseconds)",
+              "examples": [ 612 ]
+            },
+            "distance": {
+              "type": "Object",
+              "desc": "Absolute distance (in pixels) since movement started from initial point",
+              "definition": {
+                "x": {
+                  "type": "Number",
+                  "desc": "Absolute distance horizontally",
+                  "examples": [ 231 ]
+                },
+                "y": {
+                  "type": "Number",
+                  "desc": "Absolute distance vertically",
+                  "examples": [ 231 ]
+                }
+              }
+            },
+            "offset": {
+              "type": "Object",
+              "desc": "Distance (in pixels) since movement started from initial point",
+              "definition": {
+                "x": {
+                  "type": "Number",
+                  "desc": "Distance horizontally",
+                  "examples": [ -231, 110 ]
+                },
+                "y": {
+                  "type": "Number",
+                  "desc": "Distance vertically",
+                  "examples": [ -231, 110 ]
+                }
+              }
+            },
+            "delta": {
+              "type": "Object",
+              "desc": "Delta of distance (in pixels) since handler was called last time",
+              "definition": {
+                "x": {
+                  "type": "Number",
+                  "desc": "Distance horizontally",
+                  "examples": [ 2 ]
+                },
+                "y": {
+                  "type": "Number",
+                  "desc": "Distance vertically",
+                  "examples": [ 1 ]
+                }
+              }
+            },
+            "splitValue": {
+              "type": "Number",
+              "desc": "New model value (0.0 < x < 100.0) defining the ratio between panels",
+              "examples": [ 0.22 ]
+            }
+          }
+        }
+      }
     }
   }
 }