winduum 3.0.0-next.6 → 3.0.0-next.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "3.0.0-next.6",
+  "version": "3.0.0-next.7",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",

package/src/components/form/index.d.ts

@@ -7,14 +7,14 @@ export interface ValidateFormOptions {
 }
 
 export interface ValidateFieldOptions {
-    validate?: boolean
     validationMessage?: string
     selector?: string
     validitySelector?: string
     infoContent?: string
-    endParentSelector?: string
-    endSelector?: string
-    endContent?: string
+    iconParentSelector?: string
+    iconSelector?: string
+    iconContent?: string
+    validIcon?: string | null
     invalidIcon?: string
 }
 

package/src/components/form/index.js

@@ -6,26 +6,22 @@
 export const validateForm = (event, options = {}) => {
   options = {
     validateSelector: '.x-field',
-    validateOptions: {
-      validate: true,
-    },
+    validateOptions: {},
     validateField,
     submitterLoadingAttribute: 'data-loading',
     scrollOptions: { behavior: 'smooth', block: 'center' },
     ...options,
   }
 
-  if (options.validateOptions.validate) {
-    if (!event.target.checkValidity()) {
-      event.preventDefault()
-      event.stopImmediatePropagation()
+  if (!event.target.checkValidity()) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
 
-      event.target.querySelector(':invalid').scrollIntoView(options.scrollOptions)
-      event.target.querySelector(':invalid').focus()
-    }
-    else if (options.submitterLoadingAttribute) {
-      event?.submitter?.setAttribute(options.submitterLoadingAttribute, '')
-    }
+    event.target.querySelector(':invalid').scrollIntoView(options.scrollOptions)
+    event.target.querySelector(':invalid').focus()
+  }
+  else if (options.submitterLoadingAttribute) {
+    event?.submitter?.setAttribute(options.submitterLoadingAttribute, '')
   }
 
   event.target.querySelectorAll(options.validateSelector).forEach((element) => {
@@ -40,39 +36,40 @@ export const validateForm = (event, options = {}) => {
  */
 export const validateField = (element, options = {}) => {
   options = {
-    validate: true,
     selector: ':is(input:not([type="hidden"]), textarea, select):not([readonly], [data-novalidate])',
     validitySelector: '[data-validity]',
     infoContent: '<div class="x-info text-error" data-validity></div>',
-    endParentSelector: '.x-control',
-    endSelector: '.ms-auto',
-    endContent: '<div class="ms-auto"></div>',
-    invalidIcon: '<svg class="text-error" data-validity aria-hidden="true"><use href="#icon-exclamation-circle"></use></svg>',
+    iconParentSelector: '.x-control',
+    iconSelector: '.ms-auto',
+    iconContent: '<div class="ms-auto"></div>',
+    validIcon: null,
+    invalidIcon: '<svg class="text-error" data-validity aria-hidden="true"><use href="#heroicons-outline/exclamation-circle"></use></svg>',
     ...options,
   }
 
-  const validationElements = /** @type {HTMLInputElement[]} */ ([...element.querySelectorAll(options.selector)])
+  const validationElements = [...element.querySelectorAll(options.selector)]
 
-  if (!validationElements.length || !options.validate) return
+  if (!validationElements.length) return
 
   element.querySelectorAll(options.validitySelector).forEach(el => el.remove())
 
   const invalidElements = validationElements.filter(validationElement => !validationElement.checkValidity())
 
-  if (!invalidElements.length) return
+  validationElements.forEach((validationElement) => {
+    const icon = invalidElements.includes(validationElement) ? options.invalidIcon : options.validIcon
+    const iconParentElement = validationElement.closest(options.iconParentSelector)
 
-  invalidElements.forEach((validationElement) => {
-    const endParentElement = validationElement.closest(options.endParentSelector)
+    if (!iconParentElement || !icon) return
 
-    if (!endParentElement || !options.invalidIcon) return
-
-    if (!endParentElement.querySelector(options.endSelector)) {
-      endParentElement.insertAdjacentHTML('beforeend', options.endContent)
+    if (!iconParentElement.querySelector(options.iconSelector)) {
+      iconParentElement.insertAdjacentHTML('beforeend', options.iconContent)
     }
 
-    endParentElement.querySelector(options.endSelector).insertAdjacentHTML('afterbegin', options.invalidIcon)
+    iconParentElement.querySelector(options.iconSelector).insertAdjacentHTML('afterbegin', icon)
   })
 
+  if (!invalidElements.length) return
+
   element.insertAdjacentHTML('beforeend', options.infoContent)
   element.lastElementChild.textContent = options.validationMessage ?? invalidElements[0].dataset.validationMessage ?? invalidElements[0].validationMessage
 }

package/types/index.d.ts

@@ -129,14 +129,14 @@ declare module 'winduum/src/components/form' {
 	}
 
 	export interface ValidateFieldOptions {
-		validate?: boolean
 		validationMessage?: string
 		selector?: string
 		validitySelector?: string
 		infoContent?: string
-		endParentSelector?: string
-		endSelector?: string
-		endContent?: string
+		iconParentSelector?: string
+		iconSelector?: string
+		iconContent?: string
+		validIcon?: string | null
 		invalidIcon?: string
 	}