ConfirmDialog

An imperative confirmation dialog: mount <ConfirmDialog /> once, then call showConfirm({...}) anywhere to get a Promise<boolean>.

Built on: shadcn-vue's Dialog.

Code

<script setup lang="ts">
import ConfirmDialog from '@jaltech/vuejs-ui/confirm-dialog'
import { showConfirm } from '@jaltech/vuejs-ui/composables'
import { Button } from '@jaltech/vuejs-ui/button'

async function remove() {
  const ok = await showConfirm({
    title: 'Supprimer le projet ?',
    description: 'Cette action est irréversible.',
    confirmLabel: 'Supprimer',
    variant: 'destructive',
  })
  // ok === true si l'utilisateur a confirmé
}
</script>

<template>
  <!-- Monté une seule fois, généralement à la racine de l'app -->
  <ConfirmDialog />
  <Button variant="destructive" @click="remove">Supprimer</Button>
</template>