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-strong" @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>