35 lines
1.4 KiB
Vue
35 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title?: string;
|
|
message?: string;
|
|
confirmLabel?: string;
|
|
danger?: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits(['confirm', 'cancel']);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-4.5 p-6 w-screen md:w-110 max-w-full h-full md:h-auto" role="alertdialog"
|
|
aria-labelledby="confirm-title" aria-describedby="confirm-message">
|
|
<h2 id="confirm-title" class="text-lg font-semibold">{{ title ?? 'Are you sure?' }}</h2>
|
|
|
|
<p v-if="message" id="confirm-message" class="text-sm leading-normal text-[var(--text-secondary)]">
|
|
{{ message }}
|
|
</p>
|
|
|
|
<footer class="flex justify-between gap-2 mt-auto">
|
|
<button type="button"
|
|
class="flex items-center h-10 px-4 rounded-md border border-[var(--color-border)] text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] transition-[background-color] duration-200"
|
|
@click="emit('cancel')">
|
|
Cancel
|
|
</button>
|
|
<button type="button" class="flex items-center h-10 px-4 rounded-md font-semibold"
|
|
:class="danger ? 'bg-red-600 text-white' : 'bg-[var(--color-accent)] text-[var(--color-accent-text)]'"
|
|
@click="emit('confirm', true)">
|
|
{{ confirmLabel ?? 'Confirm' }}
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</template>
|