AbpConfirmHost

AbpConfirmHost renders the current question from ConfirmationService. It is also used for modal discard confirmation.

Wait for an answer

<template>
  <div class="d-flex gap-2">
    <AbpButton @click="notify">Show notification</AbpButton>
    <AbpButton variant="danger" outline @click="confirm">Ask for confirmation</AbpButton>
  </div>
  <AbpToastHost container-key="example" />
  <AbpConfirmHost />
  <output aria-live="polite">{{ result }}</output>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  AbpButton,
  AbpConfirmHost,
  AbpToastHost,
  ConfirmationStatus,
  useConfirmation,
  useToaster,
} from '@lsw-abpvue/theme-shared';
const toaster = useToaster();
const confirmation = useConfirmation();
const result = ref('No answer yet');
function notify(): void {
  toaster.success({ key: 'Demo::Saved', defaultValue: 'Changes saved' }, undefined, {
    containerKey: 'example',
    life: 3000,
  });
}
async function confirm(): Promise<void> {
  const answer = await confirmation.warn(
    { key: 'Demo::Delete', defaultValue: 'Delete this book?' },
    { key: 'Demo::Title', defaultValue: 'Confirm deletion' },
  );
  result.value =
    answer === ConfirmationStatus.confirm
      ? 'Confirmed; the application would now call its delete API.'
      : `No deletion: ${answer}`;
}
</script>

Only ConfirmationStatus.confirm permits the intended mutation. Cancel returns reject; closing with Esc or backdrop returns dismiss when allowed. Treat both as “do not proceed”, rather than using a truthiness check on the returned string.

Host placement

The application layout supplies a confirmation host. Add one when using a custom shell or isolated view that has none, not once per nested component. The host and service must use the same injector so the question and answer belong to the same state.

Configure a question

Use warn, info, success, error or show according to the meaning of the question. Options can set localized button texts, hide a button, specify an icon and disable backdrop/Esc dismissal. Give a meaningful message and title; interpolated record names belong in the localization parameters.

The service handles one question at a time. A new question dismisses the previous one; destroying its injector dismisses any pending question. Await the result before calling a delete API. Do not open an unrelated second confirmation from the first one's handler. See modal closing and notifications.

Props, events and slots

Source

Types come from the public contract and defaults from the current implementation. A dash means no explicit default; optional boolean props are normally false when omitted.

Props

No component-specific props.

Events

No component-specific events are declared.

Slots

No named slots.