confirm-dialog

Dialog for action confirmation like delete resource action

Usage

Simple usage

<template>
  <!-- simple usage -->
  <we-confirm-dialog
    ref="confirmDialog"  
  />
  <!-- simple usage deletion dialog -->
  <we-confirm-dialog
    ref="confirmDialog"  
    type="delete"
  />
<!-- title and text -->
  <we-confirm-dialog
    ref="confirmDialog"  
    title="Title"
    text="Content"
  />
  <!-- use full custom dialog (slot dialog) -->
  <we-confirm-dialog
    ref="confirmDialog"  
    type="delete"
  >
    <template #dialog="{resolve}">
      <v-card>
        <v-card-title>
          Title
        </v-card-title>
        <v-card-text>
          Content
        </v-card-text>
        <v-card-actions>
          <v-btn @click="resolve(true)">
            Confirm
          </v-btn>
            <v-btn @click="resolve(false)">
            Cancel
          </v-btn>
        </v-card-actions>
      </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']
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
dialog	Full dialog
header	Dialog header
title	Inner text of the header
content	Dialog content
text	Inner text of the content
footer	Dialog footer actions slot
buttons	button list slot

Methods

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