feat: quasarframework#40 Polished Modal: <quasar-modal> component

Author: rstoenescu

dev/app.js

@@ -21,6 +21,7 @@ router.map({
       '/card': { component: require('view/card.vue') },
       '/chat': { component: require('view/chat.vue') },
       '/collapsible': { component: require('view/collapsible.vue') },
+      '/context-menu': { component: require('view/context-menu.vue') },
       '/css-elements': { component: require('view/css-elements.vue') },
       '/dialog': { component: require('view/dialog.vue') },
       '/fab': { component: require('view/fab.vue') },

dev/views/context-menu.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="layout-padding">
+      <p class="caption">
+        <span class="desktop-only">
+          Right click anywhere on the Page below (not on header though).
+          <br>
+          On a real mobile device it works different by opening a minimized Modal triggered by a long tap.
+        </span>
+        <span class="mobile-only">
+          Long Tap anywhere on the Page below (not on header though).
+          <br>
+          On a desktop it works different by opening a Popover.
+        </span>
+      </p>
+      <blockquote>
+        <small>
+          Works with any elements you want. It doesn't have to be a List.
+        </small>
+      </blockquote>
+    </div>
+
+    <quasar-context-menu v-ref:context>
+      <div class="list item-delimiter highlight">
+        <div
+          class="item item-link"
+          v-for="n in 30"
+          @click="showToast(), $refs.context.close()"
+        >
+          <div class="item-content">
+            <div class="item-label">Label</div>
+            <div class="item-value">Value</div>
+          </div>
+        </div>
+      </div>
+    </quasar-context-menu>
+  </div>
+</template>
+
+<script>
+import { Platform, Toast } from 'quasar'
+
+export default {
+  methods: {
+    showToast () {
+      Toast.create((Platform.is.desktop ? 'Clicked' : 'Tapped') + ' on a context menu item.')
+    }
+  }
+}
+</script>

dev/views/index.vue

@@ -20,6 +20,7 @@ export default {
         'Card',
         'Chat',
         'Collapsible',
+        'Context Menu',
         'CSS Elements',
         'Dialog',
         'Fab',

dev/views/modal.vue

@@ -9,7 +9,17 @@
   </p>
   <p>
     <button class="primary" @click="toggleModal()">Toggle Modal</button>
+    <button class="primary" @click="showInlineModal()">Show Inline Modal</button>
   </p>
+
+  <quasar-modal :config="{minimized: true}" v-ref:modal>
+    <div style="padding: 50px">
+      <div>Some simple Modal</div>
+      <div>Variable from parent Vue scope: {{ modalVariable }}</div>
+      <br><br>
+      <button class="primary" @click="$refs.modal.close()">Close</button>
+    </div>
+  </quasar-modal>
 </template>
 
 <script>
@@ -30,7 +40,15 @@ export default {
   beforeDestroy () {
     this.modal.destroy()
   },
+  data () {
+    return {
+      modalVariable: 5
+    }
+  },
   methods: {
+    showInlineModal () {
+      this.$refs.modal.show()
+    },
     toggleModal () {
       this.modal.show()
       setTimeout(() => {

src/components/modal/modal.js

@@ -11,15 +11,23 @@ class Modal {
     if (!userVm) {
       throw new Error('Modal needs a VueModel.')
     }
-    if (!userVm.el && !userVm.template) {
+
+    if (userVm.nodeType) {
+      this.__customElement = userVm
+    }
+    else if (!userVm.template) {
+      console.error('Error in Modal create object:', userVm)
       throw new Error('Modal needs a template.')
     }
+    else if (userVm.el) {
+      console.error('Error in Modal create object:', userVm)
+      throw new Error('Specifying "el" property for VM in a Modal is forbidden')
+    }
 
     let vm
-    this.__customElement = typeof userVm.el !== 'undefined'
 
     if (this.__customElement) {
-      vm = userVm
+      vm = {el: this.__customElement}
     }
     else {
       vm = Utils.extend(true, userVm)
@@ -69,7 +77,7 @@ class Modal {
       this.$content.classList.add('maximized')
     }
 
-    if (this.__customElement) {
+    if (this.closeWithBackdrop) {
       this.$backdrop.addEventListener('click', this.close)
     }
 
@@ -155,7 +163,7 @@ class Modal {
       }
 
       this.$backdrop.classList.remove('active')
-      if (this.__customElement) {
+      if (this.closeWithBackdrop) {
         this.$backdrop.removeEventListener('click', this.close)
       }
       if (!Platform.within.iframe) {

src/components/modal/modal.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="modal hidden fullscreen flex items-center justify-center">
+    <div class="modal-backdrop backdrop"></div>
+    <div class="modal-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Modal from './modal'
+
+export default {
+  props: {
+    config: {
+      type: Object
+    }
+  },
+  methods: {
+    show (onShow) {
+      if (this.modal) {
+        console.warn('Trying to show modal while it is being displayed.')
+        return
+      }
+
+      this.modal = Modal.create(this.$el)
+        .set(this.config || {})
+        .onClose(() => {
+          this.modal = null
+        })
+        .show(onShow)
+    },
+    close (onClose) {
+      if (!this.modal) {
+        console.warn('Trying to close modal but no modal exists.')
+      }
+
+      this.modal.close(onClose)
+    }
+  },
+  beforeDestroy () {
+    if (this.modal) {
+      this.modal.destroy()
+    }
+  }
+}
+</script>

src/install.js

@@ -27,6 +27,7 @@ import GridTable from './vue-components/grid/grid-table.vue'
 import InfiniteScroll from './vue-components/infinite-scroll/infinite-scroll.vue'
 import Layout from './vue-components/layout/layout.vue'
 import ToolbarTitle from './vue-components/layout/toolbar-title.vue'
+import Modal from './components/modal/modal.vue'
 import Numeric from './vue-components/numeric/numeric.vue'
 import Pagination from './vue-components/pagination/pagination.vue'
 import Parallax from './vue-components/parallax/parallax.vue'
@@ -81,6 +82,7 @@ function registerComponents (_Vue) {
   _Vue.component('quasar-infinite-scroll', InfiniteScroll)
   _Vue.component('quasar-layout', Layout)
   _Vue.component('quasar-toolbar-title', ToolbarTitle)
+  _Vue.component('quasar-modal', Modal)
   _Vue.component('quasar-numeric', Numeric)
   _Vue.component('quasar-pagination', Pagination)
   _Vue.component('quasar-parallax', Parallax)

src/vue-components/context-menu/context-menu-mobile.vue

@@ -23,11 +23,12 @@ export default {
     this.target = this.$el.parentNode
 
     this.handler = () => {
-      this.modal = Modal.create({
-        el: this.$el
-      }).set({
-        minimized: true
-      }).show()
+      this.modal = Modal.create(this.$el)
+        .set({
+          minimized: true,
+          closeWithBackdrop: true
+        })
+        .show()
     }
 
     this.touchStartHandler = (event) => {