Appearance

ConfirmationDialog Component ​

File Information ​

  • Path: app/components/dialogs/ConfirmationDialog.vue
  • Purpose: Generic confirmation dialog for destructive actions
  • Type: Dialog Component

Overview ​

The ConfirmationDialog component provides a reusable confirmation dialog for destructive actions like delete, remove, or other operations requiring user confirmation.

Features ​

  • Customizable Message: Custom heading and message text
  • HTML Support: Message supports HTML content
  • Customizable Buttons: Custom text for Yes/No buttons
  • Loading State: Loading indicator on confirm button
  • Persistent: Dialog stays open until user confirms or cancels
  • Customizable Styling: Custom classes for header, message, footer, and buttons
  • Max Width: Configurable dialog width

Props ​

typescript
{
  dialog: boolean           // Dialog visibility (required)
  heading?: string          // Dialog heading (default: "Are you sure?")
  msg?: string             // Message text, supports HTML (default: "Are you sure to delete Collage")
  noText?: string          // No button text (default: "No")
  yesText?: string         // Yes button text (default: "Yes")
  maxWidth?: number        // Dialog max width (default: 500)
  headerClass?: string     // Header CSS class (default: "v-dialog-global")
  msgClass?: string        // Message CSS class (default: "v-dialog-body customscrollbar")
  footerClass?: string     // Footer CSS class (default: "v-dialog-footer")
  yesBtnClass?: string     // Yes button CSS class (default: "btn-primary")
  noBtnClass?: string      // No button CSS class (default: "btn-primary-invert")
}

Events ​

typescript
{
  confirm: []  // User confirmed (clicked Yes)
  cancel: []  // User cancelled (clicked No or close)
}

Key Functionality ​

Confirmation Flow ​

  1. Dialog opens with message
  2. User clicks "Yes" → emits confirm event, shows loading
  3. User clicks "No" or close → emits cancel event, closes dialog
  4. Loading state resets when dialog closes

Loading State ​

  • Shows loading spinner on Yes button when loading is true
  • Prevents multiple clicks during confirmation
  • Resets when dialog closes

HTML Support ​

  • Message supports HTML via v-html
  • Allows formatted messages
  • Use with caution for security

Usage Example ​

vue
<template>
  <ConfirmationDialog
    :dialog="showConfirm"
    heading="Delete Asset"
    msg="Are you sure you want to delete this asset? This action cannot be undone."
    yes-text="Delete"
    no-text="Cancel"
    @confirm="handleConfirm"
    @cancel="showConfirm = false"
  />
</template>

<script setup lang="ts">
import ConfirmationDialog from '~/components/dialogs/ConfirmationDialog.vue'

const showConfirm = ref(false)

const handleConfirm = async () => {
  // Perform delete action
  await deleteAsset()
  showConfirm.value = false
}
</script>

Styling ​

Uses global SCSS classes:

  • .v-dialog-global - Dialog container (default)
  • .v-dialog-body - Dialog body (default)
  • .v-dialog-footer - Dialog footer (default)
  • .btn-primary - Yes button (default)
  • .btn-primary-invert - No button (default)
  • .closeIcon - Close button
  • .h-bg-purple-light - Close button hover
  • Used by components that need confirmation for destructive actions