winduum 3.0.0-next.5 → 3.0.0-next.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "3.0.0-next.5",
+  "version": "3.0.0-next.7",
   "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
@@ -7,23 +7,16 @@ export interface ValidateFormOptions {
 }
 
 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
+    iconParentSelector?: string
+    iconSelector?: string
+    iconContent?: 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,30 +5,26 @@
  */
 export const validateForm = (event, options = {}) => {
   options = {
-    validateSelectors: '.x-control, .x-check, .x-switch, .x-rating, .x-color',
-    validateOptions: {
-      validate: true,
-    },
+    validateSelector: '.x-field',
+    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.validateSelectors).forEach((element) => {
+  event.target.querySelectorAll(options.validateSelector).forEach((element) => {
     options.validateField(element, options.validateOptions)
   })
 }
@@ -40,74 +36,42 @@ 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>',
-    endParentSelector: '.x-control',
-    endSelector: '.ms-auto',
-    endContent: '<div class="ms-auto"></div>',
-    validAttribute: 'data-valid',
+    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>',
+    iconParentSelector: '.x-control',
+    iconSelector: '.ms-auto',
+    iconContent: '<div class="ms-auto"></div>',
     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="#heroicons-outline/exclamation-circle"></use></svg>',
     ...options,
   }
 
-  const validationElement = /** @type {HTMLInputElement} */ (element.querySelector(options.selector))
-
-  if (!validationElement) return
+  const validationElements = [...element.querySelectorAll(options.selector)]
 
-  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}`
+  if (!validationElements.length) return
 
-  const insertIcon = (icon) => {
-    if (!endParentElement || !icon) return
+  element.querySelectorAll(options.validitySelector).forEach(el => el.remove())
 
-    if (!element?.querySelector(options.endSelector)) {
-      element?.insertAdjacentHTML('beforeend', options.endContent)
-    }
+  const invalidElements = validationElements.filter(validationElement => !validationElement.checkValidity())
 
-    element.querySelector(options.endSelector).insertAdjacentHTML('afterbegin', icon)
-  }
+  validationElements.forEach((validationElement) => {
+    const icon = invalidElements.includes(validationElement) ? options.invalidIcon : options.validIcon
+    const iconParentElement = validationElement.closest(options.iconParentSelector)
 
-  if (validationElement.value !== '') {
-    element.setAttribute(options.activeAttribute, '')
-  }
-  else {
-    element.removeAttribute(options.activeAttribute)
-  }
+    if (!iconParentElement || !icon) return
 
-  if (!validationElement.outerHTML.match(options.ignoreMatch) && options.validate) {
-    element?.removeAttribute(options.validAttribute)
-    element?.removeAttribute(options.invalidAttribute)
-
-    infoParentElement?.querySelector(infoSelector)?.remove()
-    endParentElement?.querySelector(endSelector)?.remove()
-
-    if (validationElement.checkValidity()) {
-      element.setAttribute(options.validAttribute, '')
-
-      insertIcon(options.validIcon)
+    if (!iconParentElement.querySelector(options.iconSelector)) {
+      iconParentElement.insertAdjacentHTML('beforeend', options.iconContent)
     }
-    else {
-      element.setAttribute(options.invalidAttribute, '')
 
-      insertIcon(options.invalidIcon)
+    iconParentElement.querySelector(options.iconSelector).insertAdjacentHTML('afterbegin', icon)
+  })
 
-      if (infoParentElement) {
-        infoParentElement.insertAdjacentHTML('beforeend', options.infoContent)
-        infoParentElement.querySelector(infoSelector).textContent = validationMessage
-      }
-    }
-  }
+  if (!invalidElements.length) return
+
+  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
@@ -129,26 +129,19 @@ declare module 'winduum/src/components/form' {
 	}
 
 	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
+		iconParentSelector?: string
+		iconSelector?: string
+		iconContent?: 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 {};
 }