winduum 0.7.2 → 0.8.0-next.10

package/src/components/carousel/content.css

@@ -0,0 +1,30 @@
+.c-carousel-content {
+  display: flex;
+  overflow: auto;
+  user-select: none;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-x: none;
+  position: relative;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & > :where(*) {
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+  }
+
+  &:is(.grabbing) {
+    &, & * {
+      cursor: grabbing;
+    }
+
+    & a {
+      pointer-events: none;
+    }
+  }
+}

package/src/components/carousel/default.css

@@ -0,0 +1,3 @@
+.c-carousel {
+  inline-size: 100%;
+}

package/src/components/carousel/index.css

@@ -0,0 +1,2 @@
+@import "default.css";
+@import "content.css";

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

@@ -0,0 +1,40 @@
+export interface ObserveCarouselOptions {
+    visibleClass?: string
+    observerOptions?: {
+        rootMargin?: string
+        threshold?: number | number[]
+    }
+}
+
+export interface PaginationCarouselOptions {
+    element?: HTMLElement | Element
+    itemContent?: string
+    activeClass?: string
+}
+
+export interface ScrollCarouselOptions {
+    observe?: ObserveCarouselOptions
+    pagination?: PaginationCarouselOptions
+    progressElement?: HTMLProgressElement | Element
+    counterMinElement?: HTMLElement | Element
+    counterMaxElement?: HTMLElement | Element
+}
+
+export interface AutoplayCarouselOptions {
+    delay?: number
+    pauseElements?: HTMLElement[] | Element[]
+}
+
+export interface DragCarouselOptions {
+    activeClass?: string
+}
+
+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

package/src/components/carousel/index.js

@@ -0,0 +1,221 @@
+/**
+ * @param {HTMLElement | Element} element
+ * @param {number} index
+ * @returns void
+ */
+export const scrollTo = (element, index = 0) => {
+    element.scroll({ left: element?.children[index]?.offsetLeft })
+}
+
+/**
+ * @param {HTMLElement | Element & { _activeIndex: number }} element
+ * @returns void
+ */
+export const scrollPrev = (element) => {
+    scrollTo(element, element._activeIndex - 1)
+}
+
+/**
+ * @param {HTMLElement | Element & { _activeIndex: number }} element
+ * @returns void
+ */
+export const scrollNext = (element) => {
+    scrollTo(element, element._activeIndex + 1)
+}
+
+/**
+ * @param {HTMLElement | Element} element
+ * @param {number} scrollWidth
+ * @param {boolean} mathFloor
+ * @returns number
+ */
+export const getItemCount = (element, scrollWidth = element.scrollWidth - element.clientWidth, mathFloor = false) => {
+    const gap = parseInt(getComputedStyle(element).rowGap)
+    const mathRound = (value, floor) => floor ? Math.floor(value) : Math.ceil(value)
+
+    return [...element.children].reduce((count, children) => {
+        if (mathRound(scrollWidth / (children.offsetWidth + (isNaN(gap) ? 0 : gap)), mathFloor) > count) {
+            return count + 1
+        } else {
+            return count
+        }
+    }, 0) + 1
+}
+
+/**
+ * @param {HTMLElement | Element} element
+ * @param {import("./").ObserveCarouselOptions} options
+ * @returns void
+ */
+export const observeCarousel = (element, options = {}) => {
+    options = {
+        visibleClass: 'visible',
+        observerOptions: {},
+        ...options
+    }
+
+    element._observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            entry.target.classList.toggle(options.visibleClass, entry.isIntersecting)
+        })
+
+        const activeElement = [...element.children].find(children => children.classList.contains(options.visibleClass))
+
+        if (activeElement) {
+            element._activeIndex = [...element.children].indexOf(activeElement)
+        }
+    }, {
+        root: element,
+        threshold: 0.5,
+        ...options.observerOptions
+    })
+
+    ;[...element.children].forEach(children => element._observer.observe(children))
+}
+
+/**
+ * @param {HTMLElement | Element} element
+ * @param {import("./").ScrollCarouselOptions} options
+ * @returns void
+ */
+export const scrollCarousel = (element, options = {}) => {
+    options.pagination = {
+        activeClass: 'active',
+        ...options.pagination
+    }
+
+    const activeItem = getItemCount(element, element.scrollLeft, element.scrollLeft < element._lastScrollLeft)
+    const activeItemMax = getItemCount(element)
+
+    if (options?.pagination?.element) {
+        ;[...options.pagination.element.children].forEach(children => children.classList.remove(options.pagination.activeClass))
+
+        options.pagination.element.children[activeItem - 1]?.classList.add(options.pagination.activeClass)
+    }
+
+    if (options.progressElement) {
+        options.progressElement.value = activeItem / activeItemMax * 100
+    }
+
+    if (options.counterMinElement) {
+        options.counterMinElement.innerHTML = `${activeItem}`
+    }
+
+    if (options.counterMaxElement) {
+        options.counterMaxElement.innerHTML = `${activeItemMax}`
+    }
+
+    element._lastScrollLeft = element.scrollLeft <= 0 ? 0 : element.scrollLeft
+}
+
+/**
+ * @param {HTMLElement | Element} element
+ * @param {import("./").PaginationCarouselOptions} options
+ * @returns void
+ */
+export const paginationCarousel = (element, options = {}) => {
+    options = {
+        itemContent: '<div aria-hidden="true"></div>',
+        activeClass: 'active',
+        ...options
+    }
+
+    if (!options.element) return
+
+    options.element.insertAdjacentHTML('beforeend', [...Array(getItemCount(element))].map(
+        () => options.itemContent
+    ).join(''))
+
+    ;[...options.element.children].forEach((children, i) => {
+        (i === 0) && children.classList.add(options.activeClass)
+        children.addEventListener('click', ({ currentTarget }) => {
+            scrollTo(element, [...options.element.children].indexOf(currentTarget))
+        })
+    })
+}
+
+/**
+ * @param {HTMLElement | Element} element
+ * @param {import("./").AutoplayCarouselOptions} options
+ * @returns void
+ */
+export const autoplayCarousel = (element, options = {}) => {
+    options = {
+        delay: 4000,
+        pauseElements: [],
+        ...options
+    }
+
+    let paused
+
+    options.pauseElements.forEach(element => {
+        element?.addEventListener('mouseenter', () => (paused = true))
+        element?.addEventListener('mouseleave', () => (paused = false))
+    })
+
+    setInterval(() => {
+        if (paused) return
+
+        if (element.scrollLeft < element.scrollWidth - element.clientWidth) {
+            scrollNext(element)
+        } else {
+            scrollTo(element, 0)
+        }
+    }, options.delay)
+}
+
+/**
+ * @param {HTMLElement | Element & { _activeIndex: number }} element
+ * @param {import("./").DragCarouselOptions} options
+ * @returns void
+ */
+export const dragCarousel = (element, options = {}) => {
+    options = {
+        activeClass: 'grabbing',
+        ...options
+    }
+
+    if (!matchMedia('(hover: hover) and (pointer: fine)').matches) {
+        return
+    }
+
+    let isDown
+    let startX
+    let scrollLeft
+    let timeout
+
+    const endGrabbing = () => {
+        isDown = false
+        element.classList.remove(options.activeClass)
+
+        scrollTo(element, element._activeIndex)
+
+        clearTimeout(timeout)
+
+        timeout = setTimeout(() => {
+            element.style.scrollSnapType = ''
+        }, 300)
+    }
+
+    element.addEventListener('mouseleave', endGrabbing)
+
+    element.addEventListener('mouseup', endGrabbing)
+
+    element.addEventListener('mousedown', ({ pageX }) => {
+        isDown = true
+        startX = pageX - element.offsetLeft
+        scrollLeft = element.scrollLeft
+    })
+
+    element.addEventListener('mousemove', e => {
+        if (!isDown) return
+        e.preventDefault()
+
+        const x = e.pageX - element.offsetLeft
+
+        element.classList.add(options.activeClass)
+        element.style.scrollSnapType = 'unset'
+        element.scroll({ left: scrollLeft - ((x - startX) * 1.25), behavior: 'instant' })
+        element.ondragstart = e => e.preventDefault()
+    })
+}

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

@@ -0,0 +1,8 @@
+export interface SetPositionOptions {
+    selector?: string
+    positionProperty?: string
+}
+
+export function setPosition(event: Event, options?: SetPositionOptions): void
+export function setKeyboardStep(event: KeyboardEvent, step?: string): void
+export function setMouseStep(event: MouseEvent, step?: string): void

package/src/components/compare/index.js

@@ -1,6 +1,6 @@
 /**
- * @param {import("./types/index").Position} event
- * @param {import("./types/index").PositionOptions} options
+ * @param {Event & { currentTarget: HTMLElement | Element }} event
+ * @param {import("./").SetPositionOptions} options
  * @returns void
  */
 export const setPosition = ({ currentTarget }, options = {}) => {
@@ -10,31 +10,25 @@ export const setPosition = ({ currentTarget }, options = {}) => {
         ...options
     }
 
-    currentTarget.closest(selector).style.setProperty(positionProperty, `${currentTarget.value}%`)
+    currentTarget?.closest(selector)?.style.setProperty(positionProperty, `${currentTarget.value}%`)
 }
 
 /**
- * @param {import("./types/index").KeyboardStep} event
- * @param {Number} step
+ * @param {KeyboardEvent & { currentTarget: HTMLInputElement | EventTarget }} event
+ * @param {string} step
  * @returns void
  */
-export const setKeyboardStep = ({ key, currentTarget }, step = 10) => {
+export const setKeyboardStep = ({ key, currentTarget }, step = '10') => {
     if (key?.toLowerCase() !== 'arrowright' && key?.toLowerCase() !== 'arrowleft') return
 
     currentTarget.step = step
 }
 
 /**
- * @param {import("./types/index").MouseStep} event
- * @param {Number} step
+ * @param {MouseEvent & { currentTarget: HTMLInputElement | EventTarget }} event
+ * @param {string} step
  * @returns void
  */
-export const setMouseStep = ({ currentTarget }, step = 0.1) => {
+export const setMouseStep = ({ currentTarget }, step = '0.1') => {
     currentTarget.step = step
 }
-
-export default {
-    setPosition,
-    setKeyboardStep,
-    setMouseStep
-}

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

@@ -0,0 +1,9 @@
+export interface DefaultOptions {
+    selector?: string
+    summarySelector?: string
+}
+
+export const defaultOptions: DefaultOptions
+export function showDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
+export function closeDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
+export function toggleDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>

package/src/components/details/index.js

@@ -1,5 +1,5 @@
 /**
- * @type {import("./types/index").DefaultDetailsOptions}
+ * @type {import("./").DefaultOptions}
  */
 export const defaultOptions = {
     selector: 'details',
@@ -8,7 +8,7 @@ export const defaultOptions = {
 
 /**
  * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./types/index").DefaultDetailsOptions} options
+ * @param {import("./").DefaultOptions} options
  * @returns Promise<void>
  */
 export const showDetails = async (element, options = {}) => {
@@ -31,7 +31,7 @@ export const showDetails = async (element, options = {}) => {
 
 /**
  * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./types/index").DefaultDetailsOptions} options
+ * @param {import("./").DefaultOptions} options
  * @returns Promise<void>
  */
 export const closeDetails = async (element, options = {}) => {
@@ -56,7 +56,7 @@ export const closeDetails = async (element, options = {}) => {
 
 /**
  * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./types/index").DefaultDetailsOptions} options
+ * @param {import("./").DefaultOptions} options
  * @returns Promise<void>
  */
 export const toggleDetails = async (element, options = {}) => {
@@ -75,9 +75,3 @@ export const toggleDetails = async (element, options = {}) => {
         await closeDetails(element, options)
     }
 }
-
-export default {
-    showDetails,
-    closeDetails,
-    toggleDetails
-}

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

@@ -0,0 +1,30 @@
+export interface DialogElement extends HTMLDialogElement {
+    _dialogHasEvents: boolean
+}
+
+export interface DefaultOptions {
+    remove?: boolean | null
+    closable?: boolean | null
+    openClass?: string
+    scrollbarWidthProperty?: string
+}
+
+export interface InsertDialogOptions {
+    selector?: string | null
+    class?: string | null
+    append?: boolean | null
+    show?: DefaultOptions
+}
+
+export interface FetchDialogOptions {
+    url: string
+    insert?: InsertDialogOptions
+}
+
+export const defaultOptions: DefaultOptions
+export function dialogSelector(selector: string): HTMLDialogElement
+export function dismissDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
+export function showDialog(element: DialogElement, options?: DefaultOptions): Promise<void>
+export function closeDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
+export function insertDialog(content: string, options?: InsertDialogOptions): Promise<void>
+export function fetchDialog({ url, insert }: FetchDialogOptions): Promise<void>

package/src/components/dialog/index.js

@@ -1,7 +1,7 @@
 import { animationsFinished } from '../../common.js'
 
 /**
- * @type {import("./types/index").DefaultOptions}
+ * @type {import("./").DefaultOptions}
 */
 export const defaultOptions = {
     openClass: 'visible',
@@ -11,22 +11,23 @@ export const defaultOptions = {
 
 /**
  * @param {string} selector.
+ * @return HTMLDialogElement
  */
 export const dialogSelector = selector => document.querySelectorAll(selector)[document.querySelectorAll(selector).length - 1]
 
 /**
  * Dismisses a dialog.
- * @param {HTMLDialogElement} selector - The dialog element to dismiss.
- * @param {import("./types/index").DefaultOptions} options - The options for closing the dialog.
+ * @param {HTMLDialogElement} element - The dialog element to dismiss.
+ * @param {import("./").DefaultOptions} options - The options for closing the dialog.
  * @returns Promise<void>
  */
-export const dismissDialog = async (selector, options = defaultOptions) => {
-    await animationsFinished(selector)
-    selector.inert = true
-    selector.classList.remove(options.openClass)
-    selector.dispatchEvent(new CustomEvent('c-dialog:dismiss'))
+export const dismissDialog = async (element, options = defaultOptions) => {
+    await animationsFinished(element)
+    element.inert = true
+    element.classList.remove(options.openClass)
+    element.dispatchEvent(new CustomEvent('c-dialog:dismiss'))
 
-    options.remove && selector.remove()
+    options.remove && element.remove()
 
     if (!document.querySelector('dialog[open]')) {
         document.documentElement.style.removeProperty(options.scrollbarWidthProperty)
@@ -35,11 +36,11 @@ export const dismissDialog = async (selector, options = defaultOptions) => {
 
 /**
  * Shows a dialog.
- * @param {import("./types/index").DialogElement} selector - The dialog element to show.
- * @param {import("./types/index").DefaultOptions} options - The options for showing the dialog.
+ * @param {HTMLDialogElement | import("./").DialogElement} element - The dialog element to show.
+ * @param {import("./").DefaultOptions} options - The options for showing the dialog.
  * @returns Promise<void>
  */
-export const showDialog = async (selector, options = {}) => {
+export const showDialog = async (element, options = {}) => {
     options = {
         closable: true,
         ...defaultOptions,
@@ -48,54 +49,54 @@ export const showDialog = async (selector, options = {}) => {
 
     document.documentElement.style.setProperty(options.scrollbarWidthProperty, `${window.innerWidth - document.body.clientWidth}px`)
 
-    if (!selector?._dialogHasEvents) {
-        selector.addEventListener('keydown', (e) => {
+    if (!element?._dialogHasEvents) {
+        element.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
                 e.preventDefault()
-                options.closable && closeDialog(selector, options)
+                options.closable && closeDialog(element, options)
             }
         })
 
-        selector.addEventListener('click', ({ target }) => {
+        element.addEventListener('click', ({ target }) => {
             if (target.nodeName === 'DIALOG' && options.closable) {
-                closeDialog(selector, options)
+                closeDialog(element, options)
             }
         })
 
-        selector._dialogHasEvents = true
+        element._dialogHasEvents = true
     }
 
-    selector.inert = false
-    selector.classList.add(options.openClass)
+    element.inert = false
+    element.classList.add(options.openClass)
 
     window.HTMLDialogElement
-        ? selector.showModal()
-        : selector.setAttribute('open', '')
+        ? element.showModal()
+        : element.setAttribute('open', '')
 }
 
 /**
  * Closes and dismisses a dialog.
- * @param {HTMLDialogElement} selector - The dialog element to dismiss.
- * @param {import("./types/index").DefaultOptions} options - The options for closing the dialog.
+ * @param {HTMLDialogElement} element - The dialog element to dismiss.
+ * @param {import("./").DefaultOptions} options - The options for closing the dialog.
  * @returns Promise<void>
  */
-export const closeDialog = async (selector, options = {}) => {
+export const closeDialog = async (element, options = {}) => {
     options = {
         ...defaultOptions,
         ...options
     }
 
     window.HTMLDialogElement
-        ? selector.close()
-        : selector.removeAttribute('open')
+        ? element.close()
+        : element.removeAttribute('open')
 
-    await dismissDialog(selector, options)
+    await dismissDialog(element, options)
 }
 
 /**
  * Inserts a dialog into the DOM.
  * @param {string} content - The HTML content to insert into the dialog.
- * @param {import("./types/index").InsertOptions} options - The options for inserting the dialog.
+ * @param {import("./").InsertDialogOptions} options - The options for inserting the dialog.
  * @returns Promise<void>
  */
 export const insertDialog = async (content, options = {}) => {
@@ -109,7 +110,7 @@ export const insertDialog = async (content, options = {}) => {
         ...options
     }
 
-    const dialog = new DOMParser().parseFromString(content, 'text/html').body.firstChild
+    const dialog = new DOMParser().parseFromString(content, 'text/html').body.firstElementChild
     dialog.classList.add(options.class)
 
     if (!dialogSelector(options.selector) || options.append) {
@@ -123,19 +124,10 @@ export const insertDialog = async (content, options = {}) => {
 
 /**
  * Fetches a dialog from a URL and inserts it into the DOM.
- * @param {import("./types/index").FetchOptions} options - The options for fetching and inserting the dialog.
+ * @param {import("./").FetchDialogOptions} options - The options for fetching and inserting the dialog.
  */
 export const fetchDialog = async ({ url, insert = {} }) => {
     await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
         .then(response => response.json())
         .then(async ({ content }) => await insertDialog(content, insert))
 }
-
-export default {
-    defaultOptions,
-    dismissDialog,
-    showDialog,
-    closeDialog,
-    insertDialog,
-    fetchDialog
-}

package/src/components/drawer/content.css

@@ -0,0 +1,10 @@
+.c-drawer-content {
+  --c-drawer-content-width: calc(100vw - 4rem);
+  --c-drawer-content-height: 100%;
+
+  width: var(--c-drawer-content-width);
+  height: var(--c-drawer-content-height);
+  flex-shrink: 0;
+  scroll-snap-align: end;
+  background-color: var(--color-body-primary);
+}

package/src/components/drawer/default.css

@@ -0,0 +1,37 @@
+.c-drawer {
+  --c-drawer-bg-opacity: 0.75;
+  --tw-bg-opacity: 0;
+
+  z-index: var(--z-30);
+  position: fixed;
+  inset: 0;
+  display: flex;
+  overflow: auto hidden;
+  background-color: color-mix(in srgb, var(--color-dark) calc(var(--tw-bg-opacity) * var(--c-drawer-bg-opacity) * 100%), transparent);
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::after {
+    content: "";
+    min-width: 100vw;
+    scroll-snap-align: end;
+  }
+
+  &[inert] {
+    pointer-events: none;
+  }
+
+  &.flex-col {
+    overflow: hidden auto;
+
+    &::after {
+      min-height: 100dvh;
+    }
+  }
+}

package/src/components/drawer/index.css

@@ -0,0 +1,2 @@
+@import "default.css";
+@import "content.css";

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

@@ -0,0 +1,13 @@
+export interface ScrollDrawerOptions {
+    snapClass?: string
+    opacityProperty?: string
+    opacityRatio?: number
+    scrollOpen?: number
+    scrollClose?: number
+    scrollSize?: number
+    scrollDirection?:number
+}
+
+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 scrollDrawer(element: HTMLElement | Element, options: ScrollDrawerOptions): void