Initial commit: PC Builder AdonisJS project

inertia/directives/v-delete-confirm.ts

@@ -0,0 +1,54 @@
+import { createApp, DirectiveBinding, h, ObjectDirective } from 'vue'
+import DeleteConfirmationModal from '~/pages/widgets/DeleteConfirmationModal.vue'
+
+// Interface pour ├®tendre HTMLElement avec _handleClick
+interface HTMLElementWithHandleClick extends HTMLElement {
+  _handleClick?: (event: Event) => void
+}
+
+const deleteConfirmDirective: ObjectDirective<HTMLElementWithHandleClick> = {
+  mounted(el: HTMLElementWithHandleClick, binding: DirectiveBinding) {
+    const handleClick = (event: Event) => {
+      event.stopPropagation() // Emp├¬cher la propagation de l'├®v├®nement
+      event.preventDefault() // Emp├¬cher l'action par d├®faut
+
+      const modalApp = createApp({
+        data() {
+          return { show: true }
+        },
+        methods: {
+          confirm() {
+            this.show = false
+            document.body.removeChild(modalContainer)
+            binding.value() // Ex├®cuter la fonction de suppression
+          },
+          cancel() {
+            this.show = false
+            document.body.removeChild(modalContainer)
+          },
+        },
+        render() {
+          return h(DeleteConfirmationModal, {
+            show: this.show,
+            onConfirm: this.confirm,
+            onCancel: this.cancel,
+          })
+        },
+      })
+
+      const modalContainer = document.createElement('div')
+      document.body.appendChild(modalContainer)
+      modalApp.mount(modalContainer)
+    }
+
+    el.addEventListener('click', handleClick)
+    el._handleClick = handleClick // Stocker la r├®f├®rence pour la suppression ult├®rieure
+  },
+  unmounted(el: HTMLElementWithHandleClick) {
+    if (el._handleClick) {
+      el.removeEventListener('click', el._handleClick)
+    }
+  },
+}
+
+export default deleteConfirmDirective