winduum 3.0.0-next.6 → 3.0.0-next.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "3.0.0-next.6",
+  "version": "3.0.0-next.8",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -82,7 +82,6 @@
       "default": "./src/components/details/index.js"
     },
     "./src/components/dialog": {
-      "types": "./src/components/dialog/index.d.ts",
       "default": "./src/components/dialog/index.js"
     },
     "./src/components/drawer": {

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

@@ -1,40 +1,19 @@
-export interface ObserveCarouselOptions {
-    visibleAttribute?: string
-    observerOptions?: {
-        rootMargin?: string
-        threshold?: number | number[]
-    }
-}
-
-export interface PaginationCarouselOptions {
-    element?: HTMLElement | Element
-    itemContent?: string
-    activeAttribute?: string
-}
-
-export interface ScrollCarouselOptions {
-    observe?: ObserveCarouselOptions
-    pagination?: PaginationCarouselOptions
-    progressElement?: HTMLProgressElement | Element
-    counterMinElement?: HTMLElement | Element
-    counterMaxElement?: HTMLElement | Element
-}
+export type CarouselPlacement = 'left' | 'right' | 'top' | 'bottom'
 
-export interface AutoplayCarouselOptions {
-    delay?: number
-    pauseElements?: HTMLElement[] | Element[]
+export interface ScrollByOptions {
+    direction?: number
+    vertical?: boolean
+    ratio?: number
 }
 
-export interface DragCarouselOptions {
-    activeAttribute?: string
+export interface ToggleScrollStateOptions {
+    prevElement?: HTMLButtonElement | null
+    nextElement?: HTMLButtonElement | null
+    vertical?: boolean
 }
 
-export function scrollPrev(element: HTMLElement | Element): void
-export function scrollNext(element: HTMLElement | Element): void
-export function scrollTo(element: HTMLElement | Element, selected?: number): void
-export function getItemCount(element: HTMLElement | Element, scrollWidth?: number, mathFloor?: boolean): number
-export function observeCarousel(element: HTMLElement | Element, options?: ObserveCarouselOptions): void
-export function scrollCarousel(element: HTMLElement | Element, options?: ScrollCarouselOptions): void
-export function paginationCarousel(element: HTMLElement | Element, options?: PaginationCarouselOptions): void
-export function autoplayCarousel(element: HTMLElement | Element, options?: AutoplayCarouselOptions): void
-export function dragCarousel(element: HTMLElement | Element, options?: DragCarouselOptions): void
+export function scrollBy(element: HTMLElement, options?: ScrollByOptions): void
+export function toggleScrollState(element: HTMLElement, options?: ToggleScrollStateOptions): void
+export function setCurrentAttribute(element: HTMLElement, index: number, attributeName?: string): void
+export function setSnappedAttribute(element: HTMLElement, target: HTMLElement, markerGroupElement?: HTMLElement | null): void
+export function scrollToMarker(element: HTMLElement, target: HTMLElement, markerGroupElement: HTMLElement, scrollIntoViewOptions?: ScrollIntoViewOptions): void

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

@@ -0,0 +1,5 @@
+export interface ToggleDetailsOptions {
+    selector?: string
+}
+
+export function toggleDetails(element: HTMLInputElement, options?: ToggleDetailsOptions): void

package/src/components/details/index.js

@@ -0,0 +1,13 @@
+/**
+ * @param {HTMLInputElement} element
+ * @param {import("./").ToggleDetailsOptions} options
+ * @returns void
+ */
+export const toggleDetails = (element, options = {}) => {
+  const { selector } = {
+    selector: 'details',
+    ...options,
+  }
+
+  element?.closest(selector)?.toggleAttribute('open', element.checked)
+}

package/src/components/details/readme.md

@@ -1,8 +1,5 @@
 # [Details](https://winduum.dev/docs/components/details.html)
 
-## Dependencies
-* [slide-element](https://www.npmjs.com/package/slide-element)
-
 ## Installation
 ```shell
 npm i winduum
@@ -10,7 +7,7 @@ npm i winduum
 Learn more how to set up Winduum [here](https://winduum.dev/docs/).
 
 ```js
-import { showDetails } from 'winduum/src/components/details/index.js'
+import { toggleDetails } from 'winduum/src/components/details/index.js'
 ```
 
 ### Local imports
@@ -18,7 +15,7 @@ By default, imports are directly from `npm` so you can leverage updates.
 You can also copy and paste the code from this directory to your project and remap the imports to local.
 
 ```js
-import { showDetails } from '@/components/details/assets/index.js'
+import { toggleDetails } from '@/components/details/assets/index.js'
 ```
 
 ### Docs

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

@@ -1,16 +1,9 @@
-export interface ScrollDrawerOptions {
-    snapClass?: string
-    opacityProperty?: string
-    opacityRatio?: number
-    scrollOpen?: number
-    scrollClose?: number
-    scrollSize?: number
-    scrollDirection?:number
-}
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom'
 
-export function showDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
-export function closeDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
-export function scrollInitDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
-export function toggleDrawerAttributes(element: HTMLDialogElement | Element, state?: 'open' | 'close', snapClass?: string): void
-export function scrollDrawerState(scrollState: number, scrollDirection: number): boolean
-export function scrollDrawer(element: HTMLDialogElement | Element, options?: ScrollDrawerOptions): void
+export function isVerticalDrawer(placement: DrawerPlacement): boolean
+export function scrollDrawer(element: HTMLElement | Element, placement: DrawerPlacement, reverse?: boolean, behavior?: 'auto' | 'instant'): void
+export function showDrawer(element: HTMLElement | Element, placement: DrawerPlacement): Promise<void>
+export function closeDrawer(element: HTMLElement | Element, placement: DrawerPlacement): void
+export function drawerEvents(element: HTMLDialogElement | Element, contentElement: HTMLElement | Element, placement: DrawerPlacement, signal?: AbortSignal): void
+export function drawerObserver(element: HTMLDialogElement | Element, placement: DrawerPlacement): IntersectionObserver
+export function drawerProperties(element: HTMLElement | Element, placement: DrawerPlacement): ['top' | 'left', number, number]

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
 	}