refactor: Model toggle updates

Author: rstoenescu

dev/components/global/dialog.vue

@@ -43,16 +43,16 @@ export default {
       this.showDialog = !this.showDialog
     },
     onOk (data) {
-      console.log('onOK', data)
+      console.log('>>> onOK', data)
     },
     onCancel (data) {
-      console.log('onCancel', data)
+      console.log('>>> onCancel', data)
     },
     onHide (data) {
-      console.log('onHide', data)
+      console.log('>>> onHide', data)
     },
     onShow (data) {
-      console.log('onShow', data)
+      console.log('>>> onShow', data)
     },
     adHoc () {
       this.$q.dialog({
@@ -66,9 +66,9 @@ export default {
         // preventClose: true,
         color: 'secondary'
       }).then(data => {
-        console.log('OK, received:', data)
+        console.log('>>>> OK, received:', data)
       }).catch(() => {
-        console.log('dismissed')
+        console.log('>>>> Cancel')
       })
     },
     adHoc2 () {
@@ -89,9 +89,9 @@ export default {
         preventClose: true,
         color: 'secondary'
       }).then(data => {
-        console.log('OK, received:', data)
+        console.log('>>>> OK, received:', data)
       }).catch(() => {
-        console.log('dismissed')
+        console.log('>>>> Cancel')
       })
     },
     adHoc3 () {
@@ -101,9 +101,9 @@ export default {
         cancel: true,
         preventClose: true
       }).then(() => {
-        console.log('OK')
+        console.log('>>> OK')
       }).catch(() => {
-        console.log('Cancel')
+        console.log('>>> Cancel')
       })
     }
   }

src/components/dialog/QDialog.js

@@ -25,11 +25,6 @@ export default {
       default: 'primary'
     }
   },
-  watch: {
-    value (val) {
-      this[val ? 'show' : 'hide']()
-    }
-  },
   render (h) {
     const
       child = [],
@@ -90,19 +85,38 @@ export default {
     return h(QModal, {
       ref: 'modal',
       props: {
+        value: this.value,
         minimized: true,
         noBackdropDismiss: this.preventClose,
         noEscDismiss: this.preventClose,
         position: this.position
       },
       on: {
+        input: val => {
+          this.$emit('input', val)
+        },
         show: () => {
+          console.log('DIALOG show emitting show')
           this.$emit('show')
-          this.$emit('input', true)
+
+          if (!this.$q.platform.is.desktop) {
+            return
+          }
+
+          let node = this.$refs.modal.$el.getElementsByTagName('INPUT')
+          if (node.length) {
+            node[0].focus()
+            return
+          }
+
+          node = this.$refs.modal.$el.getElementsByTagName('INPUT')
+          if (node.length) {
+            node[node.length - 1].focus()
+          }
         },
         hide: () => {
+          console.log('DIALOG hide emitting hide')
           this.$emit('hide')
-          this.$emit('input', false)
         },
         dismiss: () => {
           console.log('DIALOG received dismiss, hiding then emitting cancel')
@@ -135,24 +149,7 @@ export default {
   methods: {
     show () {
       console.log('DIALOG show')
-      return this.$refs.modal.show().then(() => {
-        console.log('DIALOG show emitting show')
-
-        if (!this.$q.platform.is.desktop) {
-          return
-        }
-
-        let node = this.$refs.modal.$el.getElementsByTagName('INPUT')
-        if (node.length) {
-          node[0].focus()
-          return
-        }
-
-        node = this.$refs.modal.$el.getElementsByTagName('INPUT')
-        if (node.length) {
-          node[node.length - 1].focus()
-        }
-      })
+      return this.$refs.modal.show()
     },
     hide () {
       let data
@@ -163,7 +160,7 @@ export default {
       console.log('DIALOG hide')
 
       return this.$refs.modal.hide().then(() => {
-        console.log('DIALOG hide', data)
+        console.log('DIALOG hide data:', data)
         return data
       })
     },

src/components/modal/QModal.js

@@ -49,6 +49,10 @@ let openedModalNumber = 0
 export default {
   name: 'q-modal',
   mixins: [ModelToggleMixin],
+  modelToggle: {
+    history: true,
+    showOnMount: true
+  },
   props: {
     position: {
       type: String,
@@ -133,7 +137,7 @@ export default {
       })
     },
     __show () {
-      console.log('MODAL show')
+      console.log('MODAL __show')
       const body = document.body
 
       body.appendChild(this.$el)
@@ -147,21 +151,18 @@ export default {
         }
       })
 
-      this.$once('show', () => {
-        console.log('trigger')
-        let content = this.$refs.content
-        content.scrollTop = 0
-        ;['modal-scroll', 'layout-view'].forEach(c => {
-          [].slice.call(content.getElementsByClassName(c)).forEach(el => {
-            el.scrollTop = 0
-          })
+      openedModalNumber++
+
+      let content = this.$refs.content
+      content.scrollTop = 0
+      ;['modal-scroll', 'layout-view'].forEach(c => {
+        [].slice.call(content.getElementsByClassName(c)).forEach(el => {
+          el.scrollTop = 0
         })
       })
-
-      openedModalNumber++
     },
     __hide () {
-      console.log('MODAL hide')
+      console.log('MODAL __hide')
       EscapeKey.pop()
       openedModalNumber--
 
@@ -173,11 +174,6 @@ export default {
       }
     }
   },
-  mounted () {
-    if (this.value) {
-      this.show()
-    }
-  },
   beforeDestroy () {
     if (this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el)
@@ -192,19 +188,19 @@ export default {
       },
       on: {
         afterEnter: () => {
-          console.log('show resolve')
+          console.log('MODAL show resolve')
           this.showPromise && this.showPromiseResolve()
         },
         enterCancelled: () => {
-          console.log('show cancel')
+          console.log('MODAL show cancel')
           this.showPromise && this.showPromiseReject()
         },
         afterLeave: () => {
-          console.log('hide resolve')
+          console.log('MODAL hide resolve')
           this.hidePromise && this.hidePromiseResolve()
         },
         leaveCancelled: () => {
-          console.log('hide reject')
+          console.log('MODAL hide reject')
           this.hidePromise && this.hidePromiseReject()
         }
       }