Confirm Dialog

<pa-confirm-dialog> | PaConfirmDialog

A specialized modal dialog component for confirmations that provides a consistent way to display confirmation prompts in your Vue 3 applications. The confirm dialog includes built-in icon support for different confirmation types and extends the base modal functionality with result handling.

<pa-confirm-dialog title="Confirm Action" text="Are you sure you want to proceed?" />

Examples

Basic Confirmation

<template>
  <div>
    <pa-button variant="primary" @click="showConfirmation">Show Confirmation</pa-button>
    
    <pa-confirm-dialog
      ref="confirmDialog"
      title="Confirm Action"
      text="Are you sure you want to proceed with this action?"
      ok-title="Yes, Continue"
      cancel-title="Cancel"
      @close="onConfirmationResult"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const confirmDialog = ref()

const showConfirmation = () => {
  confirmDialog.value?.show()
}

const onConfirmationResult = (result) => {
  console.log('User confirmed:', result)
}
</script>

Warning Type Confirmation

The confirm dialog supports a warning type that displays a warning icon to emphasize the importance of the confirmation.

<template>
  <div>
    <pa-button variant="danger" @click="showDeleteConfirmation">Delete Item</pa-button>
    
    <pa-confirm-dialog
      ref="deleteDialog"
      title="Delete Confirmation"
      text="This action cannot be undone. Are you sure you want to delete this item?"
      type="warning"
      ok-title="Delete"
      cancel-title="Keep Item"
      @close="onDeleteConfirmation"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const deleteDialog = ref()

const showDeleteConfirmation = () => {
  deleteDialog.value?.show()
}

const onDeleteConfirmation = (confirmed) => {
  if (confirmed) {
    // Proceed with delete
    console.log('Item deleted')
  } else {
    console.log('Delete cancelled')
  }
}
</script>

Custom Content with Slot

You can override the default text content by using the default slot for more complex content.

<template>
  <div>
    <pa-button variant="primary" @click="showCustomConfirmation">Show Custom Content</pa-button>
    
    <pa-confirm-dialog
      ref="customDialog"
      title="Custom Confirmation"
      type="warning"
      ok-title="Proceed"
      cancel-title="Cancel"
      @close="onCustomConfirmation"
    >
      <div>
        <h5>Important Changes</h5>
        <p>The following changes will be made:</p>
        <ul>
          <li>User permissions will be updated</li>
          <li>Email notifications will be sent</li>
          <li>Audit log entries will be created</li>
        </ul>
        <p><strong>Do you want to continue?</strong></p>
      </div>
    </pa-confirm-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const customDialog = ref()

const showCustomConfirmation = () => {
  customDialog.value?.show()
}

const onCustomConfirmation = (confirmed) => {
  console.log('Custom confirmation result:', confirmed)
}
</script>

Disabled OK Button

You can disable the OK button when certain conditions aren't met.

<template>
  <div>
    <pa-button variant="primary" @click="showTermsConfirmation">Show Terms Agreement</pa-button>
    
    <pa-confirm-dialog
      ref="termsDialog"
      title="Terms Agreement"
      text="You must agree to the terms and conditions before continuing."
      ok-title="I Agree"
      cancel-title="Cancel"
      :ok-disabled="!termsAccepted"
      @close="onTermsConfirmation"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const termsDialog = ref()
const termsAccepted = ref(false)

const showTermsConfirmation = () => {
  termsDialog.value?.show()
}

const onTermsConfirmation = (confirmed) => {
  console.log('Terms accepted:', confirmed)
}
</script>

Importing

import { PaConfirmDialog } from '@payadvantage/ui-components'

Slots

Name	Description
default	Main content area of the confirmation dialog. If not provided, displays the text prop content. Can contain any HTML or Vue components.

Properties

Property	Type	Default	Description
title	String	required	The title displayed in the dialog header
text	String	null	The confirmation message text. Not displayed if default slot is used
okTitle	String	'Okay'	Text for the OK/confirm button
okSubmittingTitle	String	'Okay'	Text for the OK button when in submitting state
cancelTitle	String	'Cancel'	Text for the cancel button
canSupportSubmitting	Boolean	true	Whether the dialog supports submitting states
okDisabled	Boolean	false	Whether to disable the OK button
hideOkButton	Boolean	false	Whether to hide the OK button completely
type	String	null	Dialog type for visual styling. Currently supports 'warning' which displays a warning icon
sfSelector	String	null	Salesforce selector for integration purposes
submitDelegate	Function	null	Custom submit handler function. Can return boolean or Promise<boolean> to control dialog closing

Events

Event	Description	Event Detail
close	Emitted when the dialog is closed with the result of the user's choice	boolean - true if OK was clicked, false for cancel or other dismissal
hide	Emitted when the dialog is hidden	{ trigger: string } - The trigger that caused the hide event
shown	Emitted when the dialog is fully shown	Object - Modal shown event details
hidden	Emitted when the dialog is fully hidden	Object - Modal hidden event details

Methods

The component extends PaModal functionality through mixins, providing access to standard modal methods:

Method	Parameters	Description
show()	None	Programmatically show the confirmation dialog
hide(trigger?)	trigger?: string	Programmatically hide the dialog

Dependencies

• PaModal - Base modal component that provides the modal functionality
• PaIcon - Used to display type-specific icons (e.g., warning icon)
• PaResultModalMixin - Provides result handling functionality

Usage Notes

• The confirm dialog automatically handles result tracking - when the user clicks OK, the close event emits true, when they cancel or dismiss otherwise, it emits false
• The warning type displays a yellow warning triangle icon to emphasize the importance of the confirmation
• The component inherits all the positioning and sizing features from PaModal through v-bind="$attrs"
• Custom submit logic can be provided via the submitDelegate prop for async operations before the dialog closes