winduum 0.7.2 → 0.8.0-next.10

package/src/components/drawer/index.js

@@ -0,0 +1,52 @@
+/**
+ * @param {HTMLElement | Element} element
+ * @param {number} distance
+ * @param {'top' | 'left'} direction
+ * @returns void
+ */
+export const showDrawer = (element, distance = 0, direction = 'left') => {
+    element.scroll({ [direction]: distance })
+}
+
+/**
+ * @param {HTMLElement | Element} element
+ * @param {number} distance
+ * @param {'top' | 'left'} direction
+ * @returns void
+ */
+export const closeDrawer = (element, distance = element.scrollWidth, direction = 'left') => {
+    element.scroll({ [direction]: distance })
+}
+
+/**
+ * @param {HTMLElement | Element} element
+ * @param {import("./").ScrollDrawerOptions} options
+ * @returns void
+ */
+export const scrollDrawer = (element, options = {}) => {
+    options = {
+        snapClass: 'snap-x snap-mandatory',
+        opacityProperty: '--tw-bg-opacity',
+        opacityRatio: 1,
+        scrollOpen: 0,
+        scrollClose: element.scrollWidth - element.clientWidth,
+        scrollSize: element.scrollWidth - element.clientWidth,
+        scrollDirection: element.scrollLeft,
+        ...options
+    }
+
+    element.style.setProperty(
+        options.opacityProperty,
+        `${Math.min(Math.abs((options.scrollDirection / options.scrollSize) - options.opacityRatio), 1)}`
+    )
+
+    if (options.scrollDirection === options.scrollOpen) {
+        element.classList.add(...options.snapClass.split(/\s/))
+        element.inert = false
+    }
+
+    if ((options.scrollDirection === options.scrollClose)) {
+        element.classList.remove(...options.snapClass.split(/\s/))
+        element.inert = true
+    }
+}

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

@@ -0,0 +1,26 @@
+export interface ValidateFormOptions {
+    validateSelectors?: string
+    validateOptions?: ValidateFieldOptions
+    submitterLoadingClass?: string
+}
+
+export interface ValidateFieldOptions {
+    validate?: boolean
+    selector?: string
+    ignoreMatch?: RegExp
+    validitySelector?: string
+    infoParentSelector?: string
+    infoSelector?: string
+    infoContent?: string
+    endParentSelector?: string
+    endSelector?: string
+    endContent?: string
+    validClass?: string
+    validIcon?: string | null
+    invalidClass?: string
+    invalidIcon?: string
+    activeClass?: string
+}
+
+export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
+export function validateField(element: HTMLElement | SubmitEvent, options?: ValidateFieldOptions): void

package/src/components/form/index.js

@@ -0,0 +1,105 @@
+/**
+ * @param {Event | SubmitEvent} event
+ * @param {import("./").ValidateFormOptions} options
+ * @returns void
+ */
+export const validateForm = (event, options = {}) => {
+    options = {
+        validateSelectors: '.ui-control, .ui-check, .ui-switch, .ui-rating, .ui-color',
+        validateOptions: {},
+        submitterLoadingClass: 'loading',
+        ...options
+    }
+
+    if (!event.target.checkValidity()) {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+
+        event.target.querySelector(':invalid').scrollIntoView({ behavior: 'smooth', block: 'center' })
+        event.target.querySelector(':invalid').focus()
+    } else {
+        event?.submitter?.classList.add(options.submitterLoadingClass)
+    }
+
+    event.target.querySelectorAll(options.validateSelectors).forEach(element => {
+        validateField(element, options.validateOptions)
+    })
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {import("./").ValidateFieldOptions} options
+ * @returns void
+ */
+export const validateField = (element, options = {}) => {
+    options = {
+        validate: true,
+        selector: 'input:not([type="hidden"]), textarea, select',
+        ignoreMatch: /(data-novalidate|readonly)/,
+        validitySelector: '.validity',
+        infoParentSelector: '.c-field',
+        infoSelector: '.ui-info',
+        infoContent: '<div class="ui-info text-error validity"></div>',
+        endParentSelector: '.ui-control',
+        endSelector: '.ms-auto',
+        endContent: '<div class="ms-auto"></div>',
+        validClass: 'valid',
+        validIcon: null,
+        invalidClass: 'invalid',
+        invalidIcon: '<svg class="text-error validity" aria-hidden="true"><use href="#icon-exclamation-circle"></use></svg>',
+        activeClass: 'active',
+        ...options
+    }
+
+    if (!element.querySelector(options.selector)) return
+
+    const validationElement = element.querySelector(options.selector)
+    const 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}`
+
+    const insertIcon = icon => {
+        if (!endParentElement || !icon) return
+
+        if (!element?.querySelector(options.endSelector)) {
+            element?.insertAdjacentHTML('beforeend', options.endContent)
+        }
+
+        element.querySelector(options.endSelector).insertAdjacentHTML('afterbegin', icon)
+    }
+
+    if (validationElement.value !== '') {
+        element.classList.add(options.activeClass)
+    } else {
+        element.classList.remove(options.activeClass)
+    }
+
+    if (!validationElement.outerHTML.match(options.ignoreMatch) && options.validate) {
+        element?.classList?.remove(options.validClass, options.invalidClass)
+
+        infoParentElement?.querySelector(infoSelector)?.remove()
+        endParentElement?.querySelector(endSelector)?.remove()
+
+        if (validationElement.checkValidity()) {
+            element.classList.add(options.validClass)
+
+            insertIcon(options.validIcon)
+        } else {
+            element.classList.add(options.invalidClass)
+
+            insertIcon(options.invalidIcon)
+
+            if (infoParentElement) {
+                infoParentElement.insertAdjacentHTML('beforeend', options.infoContent)
+                infoParentElement.querySelector(infoSelector).textContent = validationMessage
+            }
+        }
+    }
+}
+
+export default {
+    validateForm,
+    validateField
+}

package/src/components/index.css

@@ -1,6 +1,8 @@
 @import "card/index.css";
 @import "dialog/index.css";
+@import "drawer/index.css";
 @import "field/index.css";
+@import "carousel/index.css";
 @import "compare/index.css";
 @import "popover/index.css";
 @import "tooltip/index.css";

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

@@ -0,0 +1,30 @@
+export interface ShowToastOptions {
+    visibleClass?: string
+    autoHide?: number | null
+    heightProperty?: string
+    close?: CloseToastOptions
+}
+
+export interface CloseToastOptions {
+    hiddenClass?: string
+    heightProperty?: string
+}
+
+export interface InsertToasterOptions {
+    classes?: string
+}
+
+export interface InsertToastOptions {
+    classes?: string
+    title?: string
+    text?: string
+    start?: string
+    end?: string
+    show?: ShowToastOptions
+}
+
+export function closeToast(element: HTMLElement, options?: CloseToastOptions): Promise<void>
+export function showToast(element: HTMLElement, options?: ShowToastOptions): Promise<void>
+export function insertToaster(element: HTMLElement, options?: InsertToasterOptions): Promise<void>
+export function insertToast(element: HTMLElement, options?: InsertToastOptions): Promise<void>
+export function closeToaster(element: HTMLElement, options?: CloseToastOptions): Promise<void>

package/src/components/toaster/index.js

@@ -2,7 +2,7 @@ import { animationsFinished, nextRepaint } from '../../common.js'
 
 /**
  * @param {HTMLElement} element
- * @param {import('./types/index').CloseToastOptions} options
+ * @param {import('./index').CloseToastOptions} options
  * @returns Promise<void>
  */
 export const closeToast = async (element, options = {}) => {
@@ -14,7 +14,7 @@ export const closeToast = async (element, options = {}) => {
 
     const toaster = element.parentElement
 
-    element.style.setProperty(options.toastHeightProperty, `${element.offsetHeight}px`)
+    element.style.setProperty(options.heightProperty, `${element.offsetHeight}px`)
 
     await nextRepaint()
 
@@ -29,7 +29,7 @@ export const closeToast = async (element, options = {}) => {
 
 /**
  * @param {HTMLElement} element
- * @param {import('./types/index').ShowToastOptions} options
+ * @param {import('./').ShowToastOptions} options
  * @returns Promise<void>
  */
 export const showToast = async (element, options = {}) => {
@@ -56,7 +56,7 @@ export const showToast = async (element, options = {}) => {
 
 /**
  * @param {HTMLElement} element
- * @param {import('./types/index').InsertToasterOptions} options
+ * @param {import('./').InsertToasterOptions} options
  * @returns Promise<void>
  */
 export const insertToaster = async (element, options = {}) => {
@@ -72,7 +72,7 @@ export const insertToaster = async (element, options = {}) => {
 
 /**
  * @param {HTMLElement} element
- * @param {import('./types/index').InsertToastOptions} options
+ * @param {import('./').InsertToastOptions} options
  * @returns Promise<void>
  */
 export const insertToast = async (element, options = {}) => {
@@ -104,7 +104,7 @@ export const insertToast = async (element, options = {}) => {
 
 /**
  * @param {HTMLElement} element
- * @param {import('./types/index').CloseToastOptions} options
+ * @param {import('./').CloseToastOptions} options
  * @returns Promise<void>
  */
 export const closeToaster = (element, options = {}) => {
@@ -112,11 +112,3 @@ export const closeToaster = (element, options = {}) => {
         closeToast(toast, options)
     )
 }
-
-export default {
-    closeToast,
-    showToast,
-    insertToast,
-    insertToaster,
-    closeToaster
-}

package/src/ui/control/invalid.css

@@ -1,5 +1,5 @@
 .ui-control {
-  &.invalid, .validated &:has(:invalid) {
+  &.invalid, &:has(:user-invalid), .validated &:has(:invalid) {
     --ui-control-border-color: var(--color-error);
     --ui-control-color: var(--color-error);
     --ui-control-bg: var(--color-error);

package/src/ui/control/select.css

@@ -1,7 +1,7 @@
 .ui-control:has(select:not([multiple])) {
   --ui-control-pe: calc(var(--ui-control-select-icon-size) + var(--ui-control-select-icon-me));
 
-  &:has(.end) {
+  &:has(.ms-auto) {
     --ui-control-icon-count-e: 2;
   }
 
@@ -17,7 +17,7 @@
     content: "";
   }
 
-  :where(.end) {
+  :where(.ms-auto) {
     margin-inline-end: var(--ui-control-select-icon-size);
   }
 }

package/src/ui/progress/default.css

@@ -1,6 +1,7 @@
 .ui-progress {
   --tw-bg-opacity: 0.1;
   --tw-bg-mix: var(--color-body);
+  --duration: 0.3s;
 
   inline-size: 100%;
   block-size: var(--ui-progress-height);
@@ -12,20 +13,22 @@
   &::-moz-progress-bar {
     background-color: var(--color-accent);
     border-radius: inherit;
+    transition: all var(--duration) var(--ease-in-out);
   }
 
-  &::-webkit-progress-inner-element {
+  &::-webkit-progress-bar {
+    background-color: transparent;
     border-radius: inherit;
   }
 
-  &::-webkit-progress-bar {
-    background-color: transparent;
+  &::-webkit-progress-inner-element {
     border-radius: inherit;
   }
 
   &::-webkit-progress-value {
     background-color: var(--color-accent);
     border-radius: inherit;
+    transition: all var(--duration) var(--ease-in-out);
   }
 
   &:indeterminate {

package/src/ui/range/index.d.ts

@@ -0,0 +1,19 @@
+export interface SetTrackPropertyOptions {
+    element: HTMLElement | Element
+    value: string
+    max?: number
+}
+
+export interface SetValueOptions {
+    selector?: string
+    track?: 'start' | 'end'
+}
+
+export interface SetOutputOptions {
+    lang?: string
+    formatOptions?: Intl.NumberFormatOptions
+}
+
+export function setTrackProperty(options: SetTrackPropertyOptions, track: 'start' | 'end'): void
+export function setValue(element: HTMLInputElement, options?: SetValueOptions): void
+export function setOutputValue(element: HTMLInputElement, outputElement: HTMLOutputElement | Element, options?: SetOutputOptions): void

package/src/ui/range/index.js

@@ -1,66 +1,59 @@
 /**
- * @type {import("./types/index").DefaultOptions}
- */
-export const defaultOptions = {
-    selector: '.ui-range',
-    track: 'start'
-}
-
-/**
- * @param {import("./types/index").TrackOptions} options
+ * @param {import("./").SetTrackPropertyOptions} options
  * @param {'start' | 'end'} track
  * @returns void
  */
-export const setTrackProperty = ({ element, value, max }, track = defaultOptions.track) => {
+export const setTrackProperty = ({ element, value, max }, track = 'start') => {
     element.style.setProperty('--ui-range-track-' + track, `${(value / max * 100).toString()}%`)
 }
 
 /**
- * @param {HTMLInputElement} target
- * @param {import("./types/index").DefaultOptions} options
+ * @param {HTMLInputElement} element
+ * @param {import("./").SetValueOptions} options
  * @returns void
  */
-export const setValue = (target, options = {}) => {
+export const setValue = (element, options = {}) => {
     const { selector, track } = {
-        ...defaultOptions,
+        selector: '.ui-range',
+        track: 'start',
         ...options
     }
 
-    const element = target.closest(selector)
+    const parentElement = element.closest(selector)
 
-    if (!element._trackValues) {
-        element._trackValues = {
+    if (!parentElement._trackValues) {
+        parentElement._trackValues = {
             start: 0,
             end: Infinity
         }
     }
 
-    if (Object.keys(element._trackValues).length > 1) {
+    if (Object.keys(parentElement._trackValues).length > 1) {
         if (
-            (track === 'start' && target.value < element._trackValues.end) ||
-            (track === 'end' && element._trackValues.start < target.value)
+            (track === 'start' && element.value < parentElement._trackValues.end) ||
+            (track === 'end' && parentElement._trackValues.start < element.value)
         ) {
-            element._trackValues[track] = Number(target.value)
+            parentElement._trackValues[track] = Number(element.value)
         }
 
-        target.value = element._trackValues[track]
+        element.value = parentElement._trackValues[track]
     }
 
     setTrackProperty({
-        element,
-        value: target.value,
-        max: target.max || 100
+        element: parentElement,
+        value: element.value,
+        max: Number(element.max) || 100
     }, track)
 }
 
 /**
- * @param {HTMLInputElement} target
- * @param {import("./types/index").OutputOptions} options
+ * @param {HTMLInputElement} element
+ * @param {HTMLOutputElement | Element} outputElement
+ * @param {import("./").SetOutputOptions} options
  * @returns void
  */
-export const setOutputValue = (target, options = {}) => {
-    const { element, lang, formatOptions } = {
-        element: null,
+export const setOutputValue = (element, outputElement, options = {}) => {
+    options = {
         lang: document.documentElement.lang,
         formatOptions: {
             style: 'decimal',
@@ -70,12 +63,5 @@ export const setOutputValue = (target, options = {}) => {
         ...options
     }
 
-    element.innerHTML = Number(target.value).toLocaleString(lang, formatOptions)
-}
-
-export default {
-    defaultOptions,
-    setTrackProperty,
-    setValue,
-    setOutputValue
+    outputElement.innerHTML = Number(element.value).toLocaleString(options.lang, options.formatOptions)
 }

package/src/utilities/ripple/index.d.ts

@@ -0,0 +1 @@
+export function showRipple(event: MouseEvent, element: HTMLElement): void

package/src/utilities/ripple/index.js

@@ -1,29 +1,25 @@
 /**
  * Shows a ripple effect.
  * @param {MouseEvent<HTMLElement>} event - The dialog element to dismiss.
- * @param {HTMLElement} selector - The options for closing the dialog.
+ * @param {HTMLElement} element - The options for closing the dialog.
  * @returns void
  */
-export const showRipple = ({ currentTarget, offsetX, offsetY }, selector = currentTarget.querySelector('.ripple')) => {
-    if (!selector) {
+export const showRipple = ({ currentTarget, offsetX, offsetY }, element = currentTarget.querySelector('.ripple')) => {
+    if (!element) {
         currentTarget.insertAdjacentHTML('beforeend', "<div class='ripple'></div>")
-        selector = currentTarget.querySelector('.ripple')
+        element = currentTarget.querySelector('.ripple')
     }
 
-    selector.classList.remove('animation-ripple')
+    element.classList.remove('animation-ripple')
 
-    if (selector.clientWidth === 0 && selector.clientHeight === 0) {
+    if (element.clientWidth === 0 && element.clientHeight === 0) {
         const d = Math.max(currentTarget.offsetWidth, currentTarget.offsetHeight)
 
-        selector.style.width = d + 'px'
-        selector.style.height = d + 'px'
+        element.style.width = d + 'px'
+        element.style.height = d + 'px'
     }
 
-    selector.style.top = offsetY - (selector.clientHeight / 2) + 'px'
-    selector.style.left = offsetX - (selector.clientWidth / 2) + 'px'
-    selector.classList.add('animation-ripple')
-}
-
-export default {
-    showRipple
+    element.style.top = offsetY - (element.clientHeight / 2) + 'px'
+    element.style.left = offsetX - (element.clientWidth / 2) + 'px'
+    element.classList.add('animation-ripple')
 }

package/src/utilities/swap/index.d.ts

@@ -0,0 +1 @@
+export function toggleSwap(element: HTMLElement): void

package/src/utilities/swap/index.js

@@ -10,7 +10,3 @@ export const toggleSwap = (element) => {
     ariaVisible.ariaHidden = 'true'
     ariaHidden.ariaHidden = 'false'
 }
-
-export default {
-    toggleSwap
-}

package/tailwind.config.js

@@ -1,4 +1,4 @@
-import winduum from './plugin/tailwind.js'
+import winduum from './plugin/index.js'
 import containerQueries from '@tailwindcss/container-queries'
 import animate from 'tailwindcss-animate'