confirm-dialog

Dialog for action confirmation like delete resource action

Usage

Simple usage

Composition Api

<script setup>

const confirmDialog = ref(null)

async function confirm() {
  confirm = await confirmDialog.value.confirm()
  if(!confirm) { return }
}

</script>

<template>
  <!-- simple usage -->
  <WeConfirmDialog
    ref="confirmDialog"  
  />
  <!-- simple usage deletion dialog -->
  <WeConfirmDialog
    ref="confirmDialog"
    type="delete"
  />

  <!-- title and text -->
  <WeConfirmDialog
    ref="confirmDialog"  
    title="Title"
    text="Content"
  />

  <!-- custom default confirm and delete button (slot actions) -->

  <WeConfirmDialog ref="confirmDialog">
    <template #actions="{ resolve }">
      <v-btn @click="resolve(true)">
        Confirm btn custom
      </v-btn>
      <v-btn @click="resolve(false)">
        Cancel btn custom
      </v-btn>
    </template>
  </WeConfirmDialog>

  <!-- use full custom dialog (slot dialog) -->
  <we-confirm-dialog
    ref="confirmDialog"  
    type="confirm"
  >
    <template #dialog="{resolve}">
      <v-card>
        <v-card-title>
          Title
        </v-card-title>
        <v-card-text>
          Content
        </v-card-text>
        <template #cancel="{ resolve }">
          <v-btn @click="resolve(true)">
            Confirm
          </v-btn>
          <v-btn @click="resolve(false)"
          >
            Cancel
          </v-btn>
        </template>
      </v-card>
    </template>
  </we-confirm-dialog>
</template>
<script>

Legacy

<template>
  <!-- simple usage -->
  <WeConfirmDialog
    ref="confirmDialog"  
  />
  <!-- simple usage deletion dialog -->
  <WeConfirmDialog
    ref="confirmDialog"
    type="delete"
  />

  <!-- title and text -->
  <WeConfirmDialog
    ref="confirmDialog"  
    title="Title"
    text="Content"
  />

  <!-- custom default confirm and delete button (slot actions) -->

  <WeConfirmDialog ref="confirmDialog">
    <template #actions="{ resolve }">
      <v-btn @click="resolve(true)">
        Confirm btn custom
      </v-btn>
      <v-btn @click="resolve(false)">
        Cancel btn custom
      </v-btn>
    </template>
  </WeConfirmDialog>

  <!-- use full custom dialog (slot dialog) -->
  <we-confirm-dialog
    ref="confirmDialog"  
    type="custom"
  >
    <template #dialog="{resolve}">
      <v-card>
        <v-card-title>
          Title
        </v-card-title>
        <v-card-text>
          Content
        </v-card-text>
        <v-btn @click="resolve(true)">
          Confirm
        </v-btn>
        <v-btn @click="resolve(false)"
        >
          Cancel
        </v-btn>
      </v-card>
    </template>
  </we-confirm-dialog>
</template>
<script>

export default {
  methods: {
    action() {
      const confirm = await this.$refs.confirmDialog.confirm()
      if(!confirm) { return }

      // execute action
    }
  }
};

</script>

TIP

You can use resolve() function on button when slots dialog/footer/buttons is used

Props

Name	Type	Default	Description
type	String	confirm	Set defaults for title/text/icon/color. Types: ['confirm', 'delete', 'custom']
title	String	undefined	Title of the dialog
text	String	undefined	Content of the dialog
confirmButtonText	String	undefined	Confirm button text
cancelButtonText	String	undefined	Cancel button text
icon	String	undefined	Confirm button icon
color	String	undefined	Confirm button color

Slots

Name	Description
content	Dialog content slot
actions	Dialog actions slot

WARNING

Compared with the previous version, this management has been simplified; the following slots are no longer used:

• header
• title
• text
• footer
• buttons

Methods

Name	Description
confirm()	Promise that return (if resolved) `true/false` based on the user input