45 lines
No EOL
1 KiB
Vue
45 lines
No EOL
1 KiB
Vue
<template>
|
|
<dialog
|
|
ref="dialog"
|
|
closedby="none"
|
|
>
|
|
<form method="dialog" class="wrapper" ref="wrapper">
|
|
<header class="flex-row">
|
|
Wirklich löschen?
|
|
<PpButton class="round text">
|
|
<Icon name="uil:times" mode="svg" />
|
|
</PpButton>
|
|
</header>
|
|
<main>
|
|
<div class="flex-col">
|
|
<p>Bist du dir sicher, dass du diesen Eintrag löschen möchtest?</p>
|
|
</div>
|
|
</main>
|
|
<footer class="flex-row">
|
|
<PpButton class="text">
|
|
<span>Abbrechen</span>
|
|
</PpButton>
|
|
<PpButton class="danger raised" @click="$emit('delete')">
|
|
<span>Löschen</span>
|
|
</PpButton>
|
|
</footer>
|
|
</form>
|
|
</dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Props = {
|
|
currentCardIndex : number
|
|
}
|
|
|
|
defineProps<Props>()
|
|
defineEmits(['delete'])
|
|
|
|
const dialog = useTemplateRef<HTMLDialogElement>('dialog')
|
|
const wrapper = useTemplateRef<HTMLElement>('wrapper')
|
|
|
|
onMounted(() => {
|
|
onClickOutside(wrapper, () => dialog.value?.close())
|
|
})
|
|
|
|
</script> |