app/components/Ui/Form/DeletionConfirmationDialog.vue

<template>
  <LazyLayoutDialog :show="modelValue" theme="danger">
    <template #dialogTitle>
      {{ $t('caution') }}
    </template>

    <template #dialogText>
      <v-card-text>
        <p>{{ $t('confirm_to_delete') }}</p>
      </v-card-text>
    </template>

    <template #dialogBtn>
      <v-btn class="mr-4 submitBtn theme-neutral" @click="onCancelClicked">
        {{ $t('cancel') }}
      </v-btn>
      <v-btn class="mr-4 submitBtn theme-danger" @click="onDeleteClicked">
        {{ $t('delete') }}
      </v-btn>
    </template>
  </LazyLayoutDialog>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: Boolean,
  },
})

const emit = defineEmits([
  'cancelClicked',
  'deleteClicked',
  'update:modelValue',
])

const onCancelClicked = () => {
  emit('cancelClicked')
  emit('update:modelValue', false)
}

const onDeleteClicked = () => {
  emit('deleteClicked')
  emit('update:modelValue', false)
}
</script>

<style scoped lang="scss"></style>