Quasar dialog

Dialog.vue

<template>
  <q-dialog ref="dialog" @hide="onDialogHide">
    <q-card style="min-width: 450px">
      <q-card-section>

        <span v-if="title">
          {{ title }}
          <q-space style="height: 10px"/>
        </span>

        <q-input
            dense
            v-model="data"
            autofocus
            outlined
        />

      </q-card-section>

      <q-card-actions align="right" class="text-primary">
        <q-btn flat label="OK" v-close-popup @click="onOKClick"/>
        <q-btn flat label="Cancel" v-close-popup @click="onCancelClick"/>
      </q-card-actions>

    </q-card>
  </q-dialog>
</template>

<script>

export default {
  name: 'InputDialog',

  data: function () {
    return {
      data: ''
    }
  },

  props: ['title'],

  methods: {
    show () {
      this.$refs.dialog.show()
    },

    hide () {
      this.$refs.dialog.hide()
    },

    onDialogHide () {
      this.$emit('hide')
    },

    onOKClick () {
      this.$emit('ok', this.data)
      this.hide()
    },

    onCancelClick () {
      this.hide()
    }
  }
}
</script>

dialog_boot.js

export default async ({ Vue }) => {
  Vue.mixin({
    methods: {
      showDialog (options) {
        return new Promise((resolve, reject) => {
          this.$q.dialog(options).onOk((data) => {
            resolve({ ok: true, data: data })
          }).onCancel(() => {
            resolve({ ok: false })
          }).onDismiss(() => {
            resolve({ ok: false })
          })
        })
      }
    }
  })
}

Example.vue

methods: {
  ...
  async callDialog () {
    const response = await this.showDialog({
      component: InputDialog,
      parent: this,
      persistent: true,
      title: 'Dialog title'
    })
    if (response.ok) {
      console.log(response.data)
    }
  }      
  ...
}