app/components/Ui/Button/Delete.vue

<!--
Bouton Delete avec modale de confirmation de la suppression
-->

<template>
  <main>
    <v-btn :icon="true" :flat="flat" @click="alertDeleteItem()">
      <v-icon>fas fa-trash</v-icon>
    </v-btn>

    <UiFormDeletionConfirmationDialog
      v-model="showDialog"
      @delete-clicked="onDeleteClicked"
    />
  </main>
</template>

<script setup lang="ts">
import type { Ref, PropType } from 'vue'
import type ApiResource from '~/models/ApiResource'
import { useDeleteItem } from '~/composables/form/useDeleteItem'

const props = defineProps({
  entity: {
    type: Object as PropType<ApiResource>,
    required: true,
  },
  flat: {
    type: Boolean,
    required: false,
    default: false,
  },
})

const { deleteItem } = useDeleteItem()

const showDialog: Ref<boolean> = ref(false)

const alertDeleteItem = () => {
  showDialog.value = true
}

const onDeleteClicked = async () => {
  await deleteItem(entity)
}
</script>

<style scoped></style>