feat(quasar): Allow disabling VCloseDialog and VCloseMenu using value

close quasarframework#3404
pdanpdan · Feb 27, 2019 · e61a7b1 · e61a7b1
1 parent 562598f
commit e61a7b1
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 37 deletions.
diff --git a/docs/src/examples/CloseDialog/Basic.vue b/docs/src/examples/CloseDialog/Basic.vue
@@ -9,9 +9,14 @@
           <span class="q-ml-sm">You are currently not connected to any network.</span>
         </q-card-section>
 
+        <q-card-section class="row items-center">
+          <q-toggle v-model="cancelEnabled" label="Cancel button enabled" />
+        </q-card-section>
+
+
         <!-- Notice v-close-dialog -->
         <q-card-actions align="right">
-          <q-btn flat label="Cancel" color="primary" v-close-dialog />
+          <q-btn flat label="Cancel" color="primary" v-close-dialog="cancelEnabled" :disable="!cancelEnabled" />
           <q-btn flat label="Turn on Wifi" color="primary" v-close-dialog />
         </q-card-actions>
       </q-card>
@@ -23,7 +28,8 @@
 export default {
   data () {
     return {
-      dialog: false
+      dialog: false,
+      cancelEnabled: false,
     }
   }
 }

diff --git a/docs/src/examples/CloseMenu/Basic.vue b/docs/src/examples/CloseMenu/Basic.vue
@@ -3,14 +3,22 @@
     <q-btn label="Open Menu" color="primary">
       <q-menu>
         <q-list>
+          <q-item tag="label">
+            <q-item-section avatar>
+              <q-checkbox v-model="firstItemEnabled" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>First Item Enabled</q-item-label>
+            </q-item-section>
+          </q-item>
           <q-item
             v-for="n in 5"
             :key="n"
-            v-close-menu
-            clickable
+            v-close-menu="n > 1 || firstItemEnabled"
+            :clickable="n > 1 || firstItemEnabled"
             @click="onClick(n)"
           >
-            <q-item-section>Menu Item</q-item-section>
+            <q-item-section>Menu Item {{n}}</q-item-section>
           </q-item>
         </q-list>
       </q-menu>
@@ -20,12 +28,19 @@
 
 <script>
 export default {
+  data () {
+    return {
+      firstItemEnabled: false
+    }
+  },
   methods: {
     onClick (index) {
-      this.$q.notify({
-        message: `Clicked on menu item #${index + 1} and closed QMenu`,
-        color: 'primary'
-      })
+      if (index > 1 || this.firstItemEnabled) {
+        this.$q.notify({
+          message: `Clicked on menu item #${index} and closed QMenu`,
+          color: 'primary'
+        })
+      }
     }
   }
 }

diff --git a/quasar/dev/components/global/dialog.vue b/quasar/dev/components/global/dialog.vue
@@ -35,8 +35,12 @@
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
         </q-card-section>
 
+        <q-card-section>
+          <q-toggle v-model="preventCloseToggle" label="Prevent closing with button" />
+        </q-card-section>
+
         <q-card-actions align="right">
-          <q-btn flat label="OK" color="primary" v-close-dialog />
+          <q-btn flat label="OK" color="primary" v-close-dialog="!preventCloseToggle" :disable="preventCloseToggle" />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -631,6 +635,7 @@ export default {
       sliders: false,
 
       maximizedToggle: true,
+      preventCloseToggle: false,
 
       address: '',
 

diff --git a/quasar/src/directives/CloseDialog.js b/quasar/src/directives/CloseDialog.js
@@ -1,28 +1,34 @@
 export default {
   name: 'close-dialog',
 
-  bind (el, _, vnode) {
-    const
-      handler = ev => {
+  bind (el, { value }, vnode) {
+    const ctx = {
+      enabled: value !== false,
+      handler: ev => {
         const vm = vnode.componentInstance.$root
 
-        if (vm.__qPortalClose !== void 0) {
+        if (ctx.enabled !== false && vm.__qPortalClose !== void 0) {
           vm.__qPortalClose(ev)
         }
       },
-      handlerKey = ev => {
-        if (ev.keyCode === 13) {
-          handler(ev)
-        }
+      handlerKey: ev => {
+        ev.keyCode === 13 && ctx.handler(ev)
       }
+    }
 
     if (el.__qclosedialog) {
       el.__qclosedialog_old = el.__qclosedialog
     }
 
-    el.__qclosedialog = { handler, handlerKey }
-    el.addEventListener('click', handler)
-    el.addEventListener('keyup', handlerKey)
+    el.__qclosedialog = ctx
+    el.addEventListener('click', ctx.handler)
+    el.addEventListener('keyup', ctx.handlerKey)
+  },
+
+  update (el, { value }) {
+    if (el.__qclosedialog !== void 0) {
+      el.__qclosedialog.enabled = value !== false
+    }
   },
 
   unbind (el) {

diff --git a/quasar/src/directives/CloseDialog.json b/quasar/src/directives/CloseDialog.json
@@ -1 +1,9 @@
-{}
+{
+  "value": {
+    "type": "Boolean",
+    "desc": "Set value to false to disable the directive",
+    "examples": [
+      "v-close-dialog=\"booleanState\""
+    ]
+  }
+}
diff --git a/quasar/src/directives/CloseMenu.js b/quasar/src/directives/CloseMenu.js
@@ -3,30 +3,38 @@ import { closeRootMenu } from '../components/menu/menu-tree.js'
 export default {
   name: 'close-menu',
 
-  bind (el, _, vnode) {
-    const
-      handler = () => {
-        closeRootMenu(vnode.componentInstance.$root.portalParentId)
+  bind (el, { value }, vnode) {
+    const ctx = {
+      enabled: value !== false,
+      handler: () => {
+        ctx.enabled !== false && closeRootMenu(vnode.componentInstance.$root.portalParentId)
       },
-      handlerKey = evt => {
-        evt.keyCode === 13 && handler(evt)
+      handlerKey: ev => {
+        ev.keyCode === 13 && ctx.handler(ev)
       }
+    }
 
     if (el.__qclosemenu) {
       el.__qclosemenu_old = el.__qclosemenu
     }
 
-    el.__qclosemenu = { handler, handlerKey }
-    el.addEventListener('click', handler)
-    el.addEventListener('keyup', handlerKey)
+    el.__qclosemenu = ctx
+    el.addEventListener('click', ctx.handler)
+    el.addEventListener('keyup', ctx.handlerKey)
+  },
+
+  update (el, { value }) {
+    if (el.__qclosemenu !== void 0) {
+      el.__qclosemenu.enabled = value !== false
+    }
   },
 
   unbind (el) {
     const ctx = el.__qclosemenu_old || el.__qclosemenu
-    if (ctx !== void 0) {
-      el.removeEventListener('click', ctx.handler)
-      el.removeEventListener('keyup', ctx.handlerKey)
-      delete el[el.__qclosemenu_old ? '__qclosemenu_old' : '__qclosemenu']
-    }
+    if (ctx === void 0) { return }
+
+    el.removeEventListener('click', ctx.handler)
+    el.removeEventListener('keyup', ctx.handlerKey)
+    delete el[el.__qclosemenu_old ? '__qclosemenu_old' : '__qclosemenu']
   }
 }
diff --git a/quasar/src/directives/CloseMenu.json b/quasar/src/directives/CloseMenu.json
@@ -1 +1,9 @@
-{}
+{
+  "value": {
+    "type": "Boolean",
+    "desc": "Set value to false to disable the directive",
+    "examples": [
+      "v-close-menu=\"booleanState\""
+    ]
+  }
+}