winduum 3.0.0-next.5 → 3.0.0-next.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "3.0.0-next.5",
+  "version": "3.0.0-next.6",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -23,27 +23,27 @@
     "@floating-ui/dom": "^1.7.6",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@stylistic/stylelint-config": "^5.0.0",
-    "@tailwindcss/vite": "^4.3.0",
+    "@tailwindcss/vite": "^4.3.2",
     "@vitejs/plugin-vue": "^6.0.7",
     "@webreflection/custom-elements-builtin": "^0.4.1",
-    "autoprefixer": "^10.5.0",
-    "dts-buddy": "^0.8.0",
-    "eslint": "^10.4.1",
+    "autoprefixer": "^10.5.2",
+    "dts-buddy": "^0.8.2",
+    "eslint": "^10.6.0",
     "fast-glob": "^3.3.3",
-    "globals": "^17.6.0",
+    "globals": "^17.7.0",
     "invokers-polyfill": "^1.0.3",
-    "postcss": "^8.5.15",
+    "postcss": "^8.5.16",
     "postcss-custom-media": "^12.0.1",
     "postcss-import": "^16.1.1",
     "postcss-nesting": "^14.0.0",
     "slide-element": "^2.3.1",
-    "stylelint": "^17.12.0",
+    "stylelint": "^17.14.0",
     "stylelint-config-standard": "^40.0.0",
-    "tailwindcss": "^4.3.0",
+    "tailwindcss": "^4.3.2",
     "typescript": "^6",
-    "vite": "^8.0.16",
-    "vue": "^3.5.35",
-    "webuum": "^0.1.0"
+    "vite": "^8.1.3",
+    "vue": "^3.5.39",
+    "webuum": "^0.2.1"
   },
   "files": [
     "index.js",

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

@@ -1,5 +1,5 @@
 export interface ValidateFormOptions {
-    validateSelectors?: string
+    validateSelector?: string
     validateOptions?: ValidateFieldOptions
     validateField?: typeof validateField
     scrollOptions?: ScrollIntoViewOptions
@@ -10,20 +10,13 @@ export interface ValidateFieldOptions {
     validate?: boolean
     validationMessage?: string
     selector?: string
-    ignoreMatch?: RegExp
     validitySelector?: string
-    infoParentSelector?: string
-    infoSelector?: string
     infoContent?: string
     endParentSelector?: string
     endSelector?: string
     endContent?: string
-    validAttribute?: string
-    validIcon?: string | null
-    invalidAttribute?: string
     invalidIcon?: string
-    activeAttribute?: string
 }
 
 export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
-export function validateField(element: HTMLElement | SubmitEvent, options?: ValidateFieldOptions): void
+export function validateField(element: HTMLElement, options?: ValidateFieldOptions): void

package/src/components/form/index.js

@@ -5,7 +5,7 @@
  */
 export const validateForm = (event, options = {}) => {
   options = {
-    validateSelectors: '.x-control, .x-check, .x-switch, .x-rating, .x-color',
+    validateSelector: '.x-field',
     validateOptions: {
       validate: true,
     },
@@ -28,7 +28,7 @@ export const validateForm = (event, options = {}) => {
     }
   }
 
-  event.target.querySelectorAll(options.validateSelectors).forEach((element) => {
+  event.target.querySelectorAll(options.validateSelector).forEach((element) => {
     options.validateField(element, options.validateOptions)
   })
 }
@@ -41,73 +41,40 @@ export const validateForm = (event, options = {}) => {
 export const validateField = (element, options = {}) => {
   options = {
     validate: true,
-    selector: 'input:not([type="hidden"]), textarea, select',
-    ignoreMatch: /(data-novalidate|readonly)/,
-    validitySelector: '.validity',
-    infoParentSelector: '.x-field',
-    infoSelector: '.x-info',
-    infoContent: '<div class="x-info text-error validity"></div>',
+    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>',
-    validAttribute: 'data-valid',
-    validIcon: null,
-    invalidAttribute: 'data-invalid',
-    invalidIcon: '<svg class="text-error validity" aria-hidden="true"><use href="#icon-exclamation-circle"></use></svg>',
-    activeAttribute: 'data-active',
+    invalidIcon: '<svg class="text-error" data-validity aria-hidden="true"><use href="#icon-exclamation-circle"></use></svg>',
     ...options,
   }
 
-  const validationElement = /** @type {HTMLInputElement} */ (element.querySelector(options.selector))
+  const validationElements = /** @type {HTMLInputElement[]} */ ([...element.querySelectorAll(options.selector)])
 
-  if (!validationElement) return
+  if (!validationElements.length || !options.validate) return
 
-  const validationMessage = options.validationMessage ?? validationElement.dataset.validationMessage ?? validationElement.validationMessage
-  const infoParentElement = validationElement?.closest(options.infoParentSelector)
-  const endParentElement = validationElement.closest(options.endParentSelector)
-  const infoSelector = options.infoSelector + options.validitySelector
-  const endSelector = `${options.endSelector} ${options.validitySelector}`
+  element.querySelectorAll(options.validitySelector).forEach(el => el.remove())
 
-  const insertIcon = (icon) => {
-    if (!endParentElement || !icon) return
+  const invalidElements = validationElements.filter(validationElement => !validationElement.checkValidity())
 
-    if (!element?.querySelector(options.endSelector)) {
-      element?.insertAdjacentHTML('beforeend', options.endContent)
-    }
-
-    element.querySelector(options.endSelector).insertAdjacentHTML('afterbegin', icon)
-  }
-
-  if (validationElement.value !== '') {
-    element.setAttribute(options.activeAttribute, '')
-  }
-  else {
-    element.removeAttribute(options.activeAttribute)
-  }
-
-  if (!validationElement.outerHTML.match(options.ignoreMatch) && options.validate) {
-    element?.removeAttribute(options.validAttribute)
-    element?.removeAttribute(options.invalidAttribute)
+  if (!invalidElements.length) return
 
-    infoParentElement?.querySelector(infoSelector)?.remove()
-    endParentElement?.querySelector(endSelector)?.remove()
+  invalidElements.forEach((validationElement) => {
+    const endParentElement = validationElement.closest(options.endParentSelector)
 
-    if (validationElement.checkValidity()) {
-      element.setAttribute(options.validAttribute, '')
+    if (!endParentElement || !options.invalidIcon) return
 
-      insertIcon(options.validIcon)
+    if (!endParentElement.querySelector(options.endSelector)) {
+      endParentElement.insertAdjacentHTML('beforeend', options.endContent)
     }
-    else {
-      element.setAttribute(options.invalidAttribute, '')
 
-      insertIcon(options.invalidIcon)
+    endParentElement.querySelector(options.endSelector).insertAdjacentHTML('afterbegin', options.invalidIcon)
+  })
 
-      if (infoParentElement) {
-        infoParentElement.insertAdjacentHTML('beforeend', options.infoContent)
-        infoParentElement.querySelector(infoSelector).textContent = validationMessage
-      }
-    }
-  }
+  element.insertAdjacentHTML('beforeend', options.infoContent)
+  element.lastElementChild.textContent = options.validationMessage ?? invalidElements[0].dataset.validationMessage ?? invalidElements[0].validationMessage
 }
 
 export default {

package/types/index.d.ts

@@ -121,7 +121,7 @@ declare module 'winduum/src/components/drawer' {
 
 declare module 'winduum/src/components/form' {
 	export interface ValidateFormOptions {
-		validateSelectors?: string
+		validateSelector?: string
 		validateOptions?: ValidateFieldOptions
 		validateField?: typeof validateField
 		scrollOptions?: ScrollIntoViewOptions
@@ -132,23 +132,16 @@ declare module 'winduum/src/components/form' {
 		validate?: boolean
 		validationMessage?: string
 		selector?: string
-		ignoreMatch?: RegExp
 		validitySelector?: string
-		infoParentSelector?: string
-		infoSelector?: string
 		infoContent?: string
 		endParentSelector?: string
 		endSelector?: string
 		endContent?: string
-		validAttribute?: string
-		validIcon?: string | null
-		invalidAttribute?: string
 		invalidIcon?: string
-		activeAttribute?: string
 	}
 
 	export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
-	export function validateField(element: HTMLElement | SubmitEvent, options?: ValidateFieldOptions): void
+	export function validateField(element: HTMLElement, options?: ValidateFieldOptions): void
 
 	export {};
 }