feat(QDrawer): new event - @mini-state - triggered when mini-mode state changes quasarframework#5118

Author: rstoenescu

ui/dev/components/layout/layout.vue

@@ -150,6 +150,7 @@
           side="left"
           :mini="leftMini"
           :mini-width="72"
+          @mini-state="onMiniState"
           :bordered="bordered"
           :elevated="elevated"
           @click.capture="e => {
@@ -571,6 +572,9 @@ export default {
       else {
         console.log('goNormal abort')
       }
+    },
+    onMiniState (val) {
+      console.log('left drawer @mini-state ->', val)
     }
   }
 }

ui/src/components/layout/QDrawer.js

@@ -142,7 +142,7 @@ export default Vue.extend({
     },
 
     onLayout (val) {
-      this.$listeners['on-layout'] !== void 0 && this.$emit('on-layout', val)
+      this.$emit('on-layout', val)
       this.__update('space', val)
     },
 
@@ -168,6 +168,10 @@ export default Vue.extend({
         this.__animateMini()
         this.layout.__animate()
       }
+    },
+
+    isMini (val) {
+      this.$emit('mini-state', val)
     }
   },
 
@@ -501,7 +505,8 @@ export default Vue.extend({
   },
 
   mounted () {
-    this.$listeners['on-layout'] !== void 0 && this.$emit('on-layout', this.onLayout)
+    this.$emit('on-layout', this.onLayout)
+    this.$emit('mini-state', this.isMini)
 
     const fn = () => {
       if (this.showing === true) {

ui/src/components/layout/QDrawer.json

@@ -155,6 +155,17 @@
     "mouseout": {
       "extends": "click",
       "desc": "Emitted when user moves mouse cursor out of the component and drawer is NOT in mobile mode; Useful for when taking a decision to toggle mini mode"
+    },
+
+    "mini-state": {
+      "desc": "Emitted when drawer changes the mini-mode state (sometimes it is forced to do so)",
+      "params": {
+        "state": {
+          "type": "Boolean",
+          "desc": "New state"
+        }
+      },
+      "addedIn": "v1.1.3"
     }
   }
 }