52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import { toast } from 'vue-sonner'
|
|
|
|
import { ModalClose, ModalDescription, ModalFooter, ModalHeader, ModalTitle } from '@/components/prop-ui/modal'
|
|
|
|
import type { User } from '../data/schema'
|
|
|
|
const { user } = defineProps<{
|
|
user: User
|
|
}>()
|
|
|
|
const emits = defineEmits<{
|
|
(e: 'remove'): void
|
|
}>()
|
|
|
|
function handleRemove() {
|
|
toast(`The following task has been deleted:`, {
|
|
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(user, null, 2))),
|
|
})
|
|
|
|
emits('remove')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<ModalHeader>
|
|
<ModalTitle>
|
|
Delete this user: {{ user.username }} ?
|
|
</ModalTitle>
|
|
|
|
<ModalDescription>
|
|
You are about to delete a user with the ID {{ user.id }}. This action cannot be undone.
|
|
</ModalDescription>
|
|
</ModalHeader>
|
|
|
|
<ModalFooter>
|
|
<ModalClose as-child>
|
|
<UiButton variant="outline">
|
|
Cancel
|
|
</UiButton>
|
|
</ModalClose>
|
|
|
|
<ModalClose as-child>
|
|
<UiButton variant="destructive" @click="handleRemove">
|
|
Delete
|
|
</UiButton>
|
|
</ModalClose>
|
|
</ModalFooter>
|
|
</div>
|
|
</template>
|