Initial commit: PC Builder AdonisJS project

2026-06-28 10:41:51 +02:00
commit 648d0af538
144 changed files with 18570 additions and 0 deletions
@@ -0,0 +1,111 @@
+import { createVNode, DirectiveBinding, ObjectDirective, render } from 'vue'
+import ValidationError from '~/pages/widgets/ValidationError.vue'
+
+interface ValidationErrorBinding extends DirectiveBinding {
+  value: string | null
+}
+
+const validationErrorDirective: ObjectDirective<HTMLElement, string | null> = {
+  mounted(el: HTMLElement, binding: ValidationErrorBinding) {
+    const errorMessage = binding.value
+    const fieldName = el.getAttribute('name')
+
+    if (errorMessage && fieldName) {
+      const container = document.createElement('div')
+      container.classList.add(`validation-error-container-${fieldName}`)
+      container.classList.add(
+        'transition-all',
+        'duration-2500',
+        'ease-in-out',
+        'w-0',
+        'opacity-0'
+      ) // Ajout des classes Tailwind pour la transition
+
+      container.style.position = 'absolute'
+      container.style.bottom = '-17px'
+      container.style.right = '0px'
+      container.style.whiteSpace = 'nowrap'
+      container.style.textAlign = 'right'
+
+      if (el.parentNode && el.parentNode instanceof HTMLElement) {
+        el.parentNode.style.position = 'relative'
+        el.parentNode.appendChild(container)
+        const vnode = createVNode(ValidationError, { message: errorMessage })
+        render(vnode, container)
+
+        // Force reflow pour d├®clencher la transition
+        void container.offsetWidth
+        container.classList.remove('w-0', 'opacity-0')
+        container.classList.add('w-full', 'opacity-100')
+
+        // Attach the container to the element for future reference
+        ;(el as any)._validationErrorContainer = container
+      } else {
+        console.error('Parent node is null or not an HTMLElement during mounted')
+      }
+    }
+  },
+  updated(el: HTMLElement, binding: ValidationErrorBinding) {
+    const errorMessage = binding.value
+    const fieldName = el.getAttribute('name')
+    let container = (el as any)._validationErrorContainer
+
+    if (errorMessage && fieldName) {
+      if (container) {
+        const vnode = createVNode(ValidationError, { message: errorMessage })
+        render(vnode, container)
+      } else {
+        const newContainer = document.createElement('div')
+        newContainer.classList.add(`validation-error-container-${fieldName}`)
+        newContainer.classList.add(
+          'transition-all',
+          'duration-2500',
+          'ease-in-out',
+          'w-0',
+          'opacity-0'
+        ) // Ajout des classes Tailwind pour la transition
+
+        newContainer.style.position = 'absolute'
+        newContainer.style.bottom = '-17px'
+        newContainer.style.right = '0px'
+        newContainer.style.whiteSpace = 'nowrap'
+        newContainer.style.textAlign = 'right'
+
+        if (el.parentNode && el.parentNode instanceof HTMLElement) {
+          el.parentNode.style.position = 'relative'
+          el.parentNode.appendChild(newContainer)
+          const vnode = createVNode(ValidationError, { message: errorMessage })
+          render(vnode, newContainer)
+
+          // Force reflow pour d├®clencher la transition
+          void newContainer.offsetWidth
+          newContainer.classList.remove('w-0', 'opacity-0')
+          newContainer.classList.add('w-100', 'opacity-100')
+          // Attach the container to the element for future reference
+          ;(el as any)._validationErrorContainer = newContainer
+        } else {
+          console.error('Parent node is null or not an HTMLElement during updated')
+        }
+      }
+    } else if (container) {
+      container.classList.remove('w-100', 'opacity-100')
+      container.classList.remove('transition-all', 'duration-2500', 'ease-in-out') // Supprimez les classes de transition pour la disparition
+      container.classList.add('w-0', 'opacity-0')
+
+      // Supprimez le conteneur imm├®diatement sans d├®lai
+      render(null, container)
+      container.remove()
+      ;(el as any)._validationErrorContainer = null
+    }
+  },
+  unmounted(el: HTMLElement) {
+    // Clean up the error container when the element is unmounted
+    const container = (el as any)._validationErrorContainer
+    if (container) {
+      render(null, container)
+      container.remove()
+    }
+  },
+}
+
+export default validationErrorDirective