LouisMazel / maz-ui

Vue & Nuxt library of standalone components & tools to build interfaces

Home Page:https://maz-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[FEATURE](MazDialogPromise) Add availability to add custom buttons

LouisMazel opened this issue · comments

commented

And get showDialogAndWaitChoice method from $refs.component.showDialogAndWaitChoice

interface Button {
  text: string
  type: 'resolve' | 'reject'
  color: ''
  btnOptions: {
    // all options of <MazBtn />
  }
  response: string | boolean
}

OR !

<MazPromiseDialog>
  <template v-slot="{ reject, accept }" #footer>
  </template>
</PromiseDialog>

Some code

<template v-if="buttons.length > 0">
  <MazBtn
    v-for="(button, i) in buttons"
    :key="i"
    :color="button.color"
    :pill="false"
    @click="
      button.type === 'resolve'
        ? resolveDialog(button.response)
        : rejectDialog(button.response)
    "
  >
    {{ button.text }}
  </MazBtn>
</template>
async showDialogAndWaitChoice(callback) {
  this.modalValue = true

  try {
    await new Promise((resolve, reject) => {
      this.resolveDialog = async (choice) => {
        await callback?.()
        return resolve(choice)
      }
      this.rejectDialog = (value) => {
        return reject(value)
      }
    })
  } catch (error) {
    throw new Error(`[MazPromiseDialog](showDialogAndWaitChoice) ${error}`)
  }

  this.modalValue = false
}