Confirm Dialog

<script setup lang="ts">
const open = ref(false);
const toast = useToast();
</script>

<template>
  <UiButton variant="danger" @click="open = true">Delete project</UiButton>

  <UiConfirmDialog
    v-model:open="open"
    title="Delete this project?"
    description="Its files and history are removed for everyone. This can't be undone."
    confirm-text="Delete"
    danger
    @confirm="toast.error('Project deleted')"
    @cancel="toast.info('Kept the project')"
  />
</template>

<script setup lang="ts">
const open = ref(false);
const deleting = ref(false);
const toast = useToast();

// Stand-in for a delete request.
async function remove() {
  deleting.value = true;
  await new Promise((resolve) => setTimeout(resolve, 1200));
  deleting.value = false;
  open.value = false;
  toast.success("Branch deleted");
}
</script>

<template>
  <UiButton variant="danger" @click="open = true">Delete branch</UiButton>

  <UiConfirmDialog
    v-model:open="open"
    title="Delete feature/login?"
    description="Unmerged commits on it are lost."
    confirm-text="Delete"
    danger
    keep-open
    :loading="deleting"
    @confirm="remove"
  >
    <template #spinner><span class="spinner" /></template>
  </UiConfirmDialog>
</template>