various model-toggle components fixes

Author: rstoenescu

src/components/fab/QFab.vue

@@ -35,6 +35,11 @@ export default {
     QBtn,
     QIcon
   },
+  provide () {
+    return {
+      __qFabClose: this.hide
+    }
+  },
   props: {
     icon: {
       type: String,
@@ -49,9 +54,9 @@ export default {
       default: 'right'
     }
   },
-  provide () {
-    return {
-      __qFabClose: this.hide
+  watch: {
+    $route () {
+      this.hide()
     }
   },
   created () {

src/components/layout/QLayoutDrawer.js

@@ -276,6 +276,7 @@ export default {
     })
   },
   beforeDestroy () {
+    clearTimeout(this.timer)
     this.__update('size', 0)
     this.__update('space', false)
   },
@@ -342,7 +343,8 @@ export default {
         document.body.classList.add(bodyClass)
       }
 
-      setTimeout(() => {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
         this.showPromise && this.showPromiseResolve()
       }, duration)
     },
@@ -353,7 +355,8 @@ export default {
       this.percentage = 0
       document.body.classList.remove(bodyClass)
 
-      setTimeout(() => {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
         this.hidePromise && this.hidePromiseResolve()
       }, duration)
     },

src/components/tooltip/QTooltip.js

@@ -54,6 +54,9 @@ export default {
   },
   methods: {
     __show () {
+      console.log('TOOLTIP show')
+      clearTimeout(this.timer)
+
       document.body.appendChild(this.$el)
       this.scrollTarget = getScrollTarget(this.anchorEl)
       this.scrollTarget.addEventListener('scroll', this.hide)
@@ -66,6 +69,7 @@ export default {
       this.showPromise && this.showPromiseResolve()
     },
     __hide () {
+      console.log('TOOLTIP hide')
       clearTimeout(this.timer)
 
       this.scrollTarget.removeEventListener('scroll', this.hide)
@@ -88,8 +92,13 @@ export default {
       })
     },
     __delayShow () {
+      console.log('TOOLTIP delaying')
       clearTimeout(this.timer)
       this.timer = setTimeout(this.show, this.delay)
+    },
+    __delayHide () {
+      clearTimeout(this.timer)
+      this.hide()
     }
   },
   render (h) {
@@ -123,8 +132,8 @@ export default {
       else {
         this.anchorEl.addEventListener('mouseenter', this.__delayShow)
         this.anchorEl.addEventListener('focus', this.__delayShow)
-        this.anchorEl.addEventListener('mouseleave', this.hide)
-        this.anchorEl.addEventListener('blur', this.hide)
+        this.anchorEl.addEventListener('mouseleave', this.__delayHide)
+        this.anchorEl.addEventListener('blur', this.__delayHide)
       }
 
       if (this.value) {
@@ -133,6 +142,7 @@ export default {
     })
   },
   beforeDestroy () {
+    clearTimeout(this.timer)
     if (!this.anchorEl) {
       return
     }
@@ -142,8 +152,8 @@ export default {
     else {
       this.anchorEl.removeEventListener('mouseenter', this.__delayShow)
       this.anchorEl.removeEventListener('focus', this.__delayShow)
-      this.anchorEl.removeEventListener('mouseleave', this.hide)
-      this.anchorEl.removeEventListener('blur', this.hide)
+      this.anchorEl.removeEventListener('mouseleave', this.__delayHide)
+      this.anchorEl.removeEventListener('blur', this.__delayHide)
     }
   }
 }