@hz-libs/bpe-ui-confirm

Confirmation dialog primitive for Vue 3.

Docs

Install

pnpm add @hz-libs/bpe-ui-confirm

The app must already depend on Vue ^3.5.0. This package depends on @hz-libs/bpe-ui-loading-spinner. Component CSS is included in the JavaScript import.

Use

type="danger" is for a destructive confirm button. Leave type unset for a normal confirmation. cancellable set to false offers only the confirm action.

<script setup>
import { ref } from 'vue'
import { ConfirmModal } from '@hz-libs/bpe-ui-confirm'

const open = ref(false)
</script>

<template>
  <button type="button" @click="open = true">Delete item</button>
  <ConfirmModal
    v-if="open"
    title="Delete this item?"
    message="This cannot be undone."
    confirm-text="Delete"
    type="danger"
    @confirm="open = false"
    @cancel="open = false"
  />
</template>

Exports

ConfirmModal.