Kevin
112 lines
4.1 KiB
TypeScript
112 lines
4.1 KiB
TypeScript
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
|