Quasar v2 dialog

BootDialog.js

import { boot } from 'quasar/wrappers'

export default boot(({ app }) => {
  const $q = app.config.globalProperties.$q

  app.config.globalProperties.showDialog = (options) => {
    return new Promise((resolve, reject) => {
      $q.dialog(options).onOk((data) => {
        resolve({
          ok: true,
          data: data
        })
      }).onCancel(() => {
        resolve({ ok: false })
      }).onDismiss(() => {
        resolve({ ok: false })
      })
    })
  }
})

Example.js

  const result = await this.showDialog({
    component: ShareDialog,
    componentProps: {
      email: user.user_guest.email,
      write: (user.permissions & 1) === 1,
      disableInput: true,
      title: 'Permissions:'
    }
  })
  if (!result.ok) {
    return
  }
  const requestBody = {
    calc_id: [calcId.value],
    email: result.data.email,
    permissions: result.data.permissions
  }

ShareDialog.js

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card style="min-width: 450px">
      <q-card-section>
        <span v-if="title">
          {{ title }}
          <q-space style="height: 10px"/>
        </span>
        <q-input
            :disable="disableInput"
            dense
            hide-bottom-space
            v-model="data.email"
            autofocus
            outlined
        />
        <q-checkbox v-model="data.write" label="Enable data change"/>
      </q-card-section>
      <q-card-actions align="right" class="text-primary">
        <q-btn flat label="OK" @click="onOKClick"/>
        <q-btn flat label="Cancel" v-close-popup @click="onDialogCancel"/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
import { computed, defineComponent, reactive } from 'vue'
import { useDialogPluginComponent } from 'quasar'

export default defineComponent({
  name: 'ShareDialog',

  emits: [
    ...useDialogPluginComponent.emits
  ],

  props: {
    title: {
      default: null
    },
    email: {
      default: null
    },
    write: {
      default: false
    },
    disableInput: {
      default: false
    }
  },

  setup (props) {
    const data = reactive({
      email: props.email,
      write: props.write
    })
    const {
      dialogRef,
      onDialogHide,
      onDialogOK,
      onDialogCancel
    } = useDialogPluginComponent()
    const permissions = computed(() => {
      let result = 0
      if (data.write) {
        result += 1
      }
      return result
    })
    return {
      data,
      dialogRef,
      onDialogHide,
      onOKClick () {
        onDialogOK({
          email: data.email,
          permissions: permissions.value
        })
      },
      onDialogCancel
    }
  }
})
</script>