A tiny library that allows you to work with dialogs as with asynchronous functions

npm install --save vue-promise-dialogs

import { createPromiseDialog } from "vue-promise-dialogs"

const BooleanDialog = Vue.extend({
    template: `
      <div class="dialog">
          <p>{{ params.text }}</p>
          <button name="true" @click="$emit('resolve', true)">True</button>
          <button name="false" @click="$emit('resolve', false)">False</button>
          <button name="cancel" @click="$emit('reject', 'cancel')">Cancel</button>
      </div>
    `,
    props: {
        params: {
            type: Object,
            required: true,
        },
    },
});

// First type argument is the type of params prop that will be passed to component
// Second type argument is the type of value with which the promise will be fulfilled
const openDialog = createPromiseDialog<{ text: string }, boolean>(BooleanDialog);

// When you call this function, dialog will be mounted to `PromiseDialogsWrapper`.
// When user press any button and resolve/reject event emitted, promise will be settled and dialog will be destroyed.
const result: boolean = await openDialog({ text: 'Some text' });

import { Component } from "vue-class-component"
import { BasePromiseDialog, createPromiseDialog } from "vue-promise-dialogs"

@Component({
    template: `
      <div class="dialog">
          <p>{{ params.text }}</p>
          <button name="true" @click="onTrue">True</button>
          <button name="false" @click="onFalse">False</button>
          <button name="cancel" @click="onCancel">Cancel</button>
      </div>
    `,
})
// You need to extend your component from BasePromiseDialog with correct type arguments
class BooleanDialog extends BasePromiseDialog<{ text: string }, boolean> {
    onTrue() {
        this.resolve(true);
    }

    onFalse() {
        this.resolve(true);
    }

    onCancel() {
        this.reject('cancel');
    }
}

// You don't have to specify type arguments because they are inferenced from BooleanDialog
const openDialog = createPromiseDialog(BooleanDialog);

const result: boolean = await openDialog({ text: 'Some text' });