feat: Add v-close-overlay directive

Author: rstoenescu

dev/components/components/context-menu.vue

@@ -35,12 +35,13 @@
       >
         Target area
 
-        <q-context-menu ref="context">
+        <q-context-menu>
           <q-list link separator no-border style="min-width: 150px; max-height: 300px;">
             <q-item
               v-for="n in 10"
               :key="n"
-              @click="showNotify(), $refs.context.hide()"
+              v-close-overlay
+              @click.native="showNotify()"
             >
               <q-item-main label="Label" sublabel="Value" />
             </q-item>

dev/components/components/popover.vue

@@ -15,14 +15,30 @@
               <q-item
                 v-for="n in 20"
                 :key="n"
-                @click.native="showNotify(), $refs.popover1.hide()"
+                v-close-overlay
+                @click.native="showNotify()"
               >
                 <q-item-main label="Label" sublabel="Click me" />
               </q-item>
             </q-list>
           </q-popover>
         </q-btn>
 
+        <q-btn color="primary" icon="map">
+          <q-popover>
+            <q-list link separator class="scroll" style="min-width: 100px">
+              <q-item
+                v-for="n in 20"
+                :key="n"
+                v-close-overlay
+                @click.native="showNotify()"
+              >
+                <q-item-main label="X Label" sublabel="X Click me" />
+              </q-item>
+            </q-list>
+          </q-popover>
+        </q-btn>
+
         <q-btn ref="target4" color="negative" label="Disabled Popover">
           <q-popover disable>
             This Popover content won't be shown because of "disable"

dev/components/other/v-close-overlay.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="layout-padding">
+    <!--
+      This is for fast tests.
+      Use this page but don't add it into your commits (leave it outside
+      of your commit).
+
+      For some test that you think it should be persistent,
+      make a new *.vue file here or in another folder under /dev/components.
+    -->
+    <q-btn color="primary" icon="map">
+      <q-popover>
+        <q-list link separator class="scroll" style="min-width: 100px">
+          <!--<q-item
+            v-close-overlay
+            @click.native="showNotify"
+          >
+            <q-item-main label="Closable" sublabel="Closes" />
+          </q-item>-->
+          <q-btn color="primary" v-close-overlay label="Shut up" icon="map" />
+          <q-item
+            @click.native="showNotify"
+          >
+            <q-item-main label="Does nothing" sublabel="sublabel" />
+          </q-item>
+        </q-list>
+      </q-popover>
+    </q-btn>
+
+    <q-btn color="primary" icon="map" :label="popover ? 'yes' : 'no'">
+      <q-popover v-model="popover">
+        <q-list link separator class="scroll" style="min-width: 100px">
+          <q-btn color="primary" v-close-overlay label="X Shut up" icon="map" @click.native="showNotify" />
+          <q-item @click.native="showNotify">
+            <q-item-main label="X Does nothing" sublabel="sublabel" />
+          </q-item>
+        </q-list>
+      </q-popover>
+    </q-btn>
+
+
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      popover: false
+    }
+  },
+  methods: {
+    showNotify () {
+      console.log('@click')
+    }
+  }
+}
+</script>

src/components/knob/QKnob.js

@@ -175,7 +175,7 @@ export default {
         this.min,
         this.max
       )
-      
+
       if (this.computedDecimals) {
         value = parseFloat(value.toFixed(this.computedDecimals))
       }

src/components/popover/QPopover.js

@@ -117,7 +117,7 @@ export default {
 
       this.hide(evt)
     },
-    __hide (evt) {
+    __hide () {
       clearTimeout(this.timer)
 
       document.body.removeEventListener('click', this.__bodyHide, true)

src/directives.js

@@ -1,4 +1,5 @@
 import BackToTop from './directives/back-to-top'
+import CloseOverlay from './directives/close-overlay'
 import GoBack from './directives/go-back'
 import Move from './directives/move'
 import Ripple from './directives/ripple'
@@ -10,6 +11,7 @@ import TouchSwipe from './directives/touch-swipe'
 
 export {
   BackToTop,
+  CloseOverlay,
   GoBack,
   Move,
   Ripple,

src/directives/close-overlay.js

@@ -0,0 +1,43 @@
+
+/* function updateBinding (el, { value, modifiers }) {
+  const ctx = el.__qclose
+} */
+
+/* ,
+  update (el, binding) {
+    if (binding.oldValue !== binding.value) {
+      updateBinding(el, binding)
+    }
+  } */
+
+export default {
+  name: 'close-overlay',
+  bind (el, binding, vnode) {
+    console.log('bind')
+
+    let vm = vnode.componentInstance
+    while ((vm = vm.$parent)) {
+      const name = vm.$options.name
+      if (name === 'q-popover' || name === 'q-modal') {
+        break
+      }
+    }
+
+    el.__qclose = {
+      handler () {
+        vm && vm.hide()
+      }
+    }
+  },
+  inserted (el) {
+    console.log('inserted')
+    let ctx = el.__qclose
+    el.addEventListener('click', ctx.handler)
+  },
+  unbind (el) {
+    console.log('unbind')
+    let ctx = el.__qclose
+    el.removeEventListener('click', ctx.handler)
+    delete el.__qclose
+  }
+}