webcoreui 0.4.0 → 0.5.0

package/components/Carousel/Carousel.astro

@@ -0,0 +1,198 @@
+---
+import type { CarouselProps } from './carousel'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+import Pagination from '../Pagination/Pagination.astro'
+import Progress from '../Progress/Progress.astro'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './carousel.module.scss'
+
+interface Props extends CarouselProps {}
+
+const {
+    items,
+    visibleItems = 1,
+    subText,
+    scrollSnap = true,
+    progress,
+    pagination,
+    effect,
+    debounce = 20,
+    className,
+    wrapperClassName,
+    paginationClassName
+} = Astro.props
+
+const classes = [
+    styles.carousel,
+    className
+]
+
+const containerClasses = [
+    styles.container,
+    scrollSnap && styles.snap
+]
+
+const wrapperClasses = [
+    styles.wrapper,
+    effect && styles[effect],
+    wrapperClassName
+]
+
+const paginationWrapperClasses = [
+    styles['pagination-wrapper'],
+    paginationClassName
+]
+
+const paginationClasses = classNames([
+    styles.pagination,
+    !subText && paginationClassName
+])
+
+const totalPages = Math.ceil(items / visibleItems)
+const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
+const style = visibleItems > 1
+    ? `--w-slide-width: ${100 / visibleItems}%;`
+    : null
+---
+
+<section class:list={classes}>
+    <div
+        class:list={containerClasses}
+        data-id="w-carousel"
+        data-debounce={debounce !== 20 && debounce}
+    >
+        <ul
+            class:list={wrapperClasses}
+            style={style}
+            data-visible-items={visibleItems > 1 ? visibleItems : null}
+        >
+            <slot />
+        </ul>
+    </div>
+    <ConditionalWrapper condition={!!(subText || progress)}>
+        <div slot="wrapper" class:list={paginationWrapperClasses}>children</div>
+        {progress && (
+            <Progress
+                className="w-carousel-progress"
+                value={0}
+            />
+        )}
+        <Pagination
+            type="arrows"
+            {...pagination}
+            totalPages={totalPages}
+            className={paginationClasses}
+        />
+        {subText && (
+            <span class={styles.subtext} data-text={subTextValue}>
+                {subText
+                    .replace('{0}', '1')
+                    .replace('{1}', String(totalPages))
+                }
+            </span>
+        )}
+    </ConditionalWrapper>
+</section>
+
+<script>
+    import { debounce } from '../../utils/debounce'
+    import { listen } from '../../utils/event'
+
+    const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
+
+    const scroll = (event: Event) => {
+        const target = event.target as HTMLDivElement
+
+        if (!target.dataset.paginated) {
+            const scrollLeft = target.scrollLeft
+            const itemWidth = target.children[0].clientWidth
+            const page = Math.round(scrollLeft / itemWidth) + 1
+            const carouselElement = target.children[0]
+            const paginationElement = target.parentElement
+                ?.querySelector('[data-id="w-pagination"]') as HTMLUListElement
+            const currentPage = Number(paginationElement.dataset.currentPage)
+            const diff = Math.abs(currentPage - page)
+
+            let triggerButton = currentPage > page
+                ? paginationElement.querySelector('[data-page="prev"]') as HTMLButtonElement
+                : paginationElement.querySelector('[data-page="next"]') as HTMLButtonElement
+
+            if (!triggerButton) {
+                triggerButton = paginationElement.querySelector(`[data-page="${page}"]`) as HTMLButtonElement
+            }
+
+            for (let i = 0; i < diff; i++) {
+                triggerButton.click()
+            }
+
+            Array.from(carouselElement.children).forEach(li => {
+                (li as HTMLLIElement).removeAttribute('data-active')
+            })
+
+            const activeElement = carouselElement.children[page - 1] as HTMLLIElement
+
+            activeElement.dataset.active = 'true'
+        }
+    }
+
+    carousels.forEach(carousel => {
+        const carouselElement = carousel as HTMLDivElement
+        const debounceAmount = carouselElement.dataset.debounce
+            ? Number(carouselElement.dataset.debounce)
+            : 20
+
+        carousel.addEventListener('scroll', debounce((event: Event) => {
+            scroll(event)
+        }, debounceAmount))
+    })
+
+    listen('paginate', event => {
+        const target = event.target
+        const carousel = target.closest('section').querySelector('[data-id="w-carousel"] ul')
+
+        if (!carousel) {
+            return
+        }
+
+        const progress = target.closest('section').querySelector('.w-carousel-progress')
+        const progressValue = (100 / (Number(target.dataset.totalPages) - 1))
+        const visibleItems = Number(carousel.dataset.visibleItems) || 0
+        const pageIndex = (event.page + visibleItems) - 1
+
+        const liElement = carousel.children[pageIndex]
+        const subText = event.target.nextElementSibling
+
+        Array.from(carousel.children).forEach(li => {
+            (li as HTMLLIElement).removeAttribute('data-active')
+        })
+
+        if (subText?.dataset.text) {
+            subText.innerText = subText.dataset.text
+                .replace('{0}', event.page)
+                .replace('{1}', target.dataset.totalPages)
+        }
+
+        if (progress) {
+            const updatedProgress = progressValue * (Number(event.page) - 1)
+
+            progress.children[0]
+                .style.setProperty('--w-progress-width', `${updatedProgress}%`)
+        }
+
+        if (event.trusted) {
+            const carouselContaienr = target.closest('section').querySelector('[data-id="w-carousel"]')
+
+            liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+            liElement.dataset.active = 'true'
+
+            carouselContaienr.dataset.paginated = 'true'
+
+            setTimeout(() => {
+                carouselContaienr.removeAttribute('data-paginated')
+            }, 300)
+        }
+    })
+</script>

package/components/Carousel/Carousel.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import type { SvelteCarouselProps } from './carousel'
+
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+    import Pagination from '../Pagination/Pagination.svelte'
+    import Progress from '../Progress/Progress.svelte'
+
+    import { classNames } from '../../utils/classNames'
+    import { debounce as debounceScroll } from '../../utils/debounce'
+
+    import styles from './carousel.module.scss'
+
+    import type { PaginationEventType } from '../Pagination/pagination'
+
+    export let items: SvelteCarouselProps['items'] = 0
+    export let visibleItems: SvelteCarouselProps['visibleItems'] = 1
+    export let subText: SvelteCarouselProps['subText'] = ''
+    export let scrollSnap: SvelteCarouselProps['scrollSnap'] = true
+    export let progress: SvelteCarouselProps['progress'] = false
+    export let pagination: SvelteCarouselProps['pagination'] = {}
+    export let effect: SvelteCarouselProps['effect'] = null
+    export let debounce: SvelteCarouselProps['debounce'] = 20
+    export let className: SvelteCarouselProps['className'] = ''
+    export let wrapperClassName: SvelteCarouselProps['wrapperClassName'] = ''
+    export let paginationClassName: SvelteCarouselProps['paginationClassName'] = ''
+    export let onScroll: SvelteCarouselProps['onScroll'] = () => {}
+
+    let carouselContainer: HTMLDivElement
+    let carousel: HTMLUListElement
+    let carouselItems: HTMLCollection | NodeListOf<HTMLLIElement>
+    let progressValue = 0
+    let paginated = false
+    let currentPage = 1
+
+    const classes = classNames([
+        styles.carousel,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        scrollSnap && styles.snap
+    ])
+
+    const wrapperClasses = classNames([
+        styles.wrapper,
+        effect && styles[effect],
+        wrapperClassName
+    ])
+
+    const paginationWrapperClasses = classNames([
+        styles['pagination-wrapper'],
+        paginationClassName
+    ])
+
+    const paginationClasses = classNames([
+        styles.pagination,
+        !subText && paginationClassName
+    ])
+
+    const totalPages = Math.ceil(items / visibleItems!)
+    const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
+    const style = visibleItems! > 1
+        ? `--w-slide-width: ${100 / visibleItems!}%;`
+        : null
+
+    const updateValues = () => {
+        const activeElement = carouselItems[currentPage - 1] as HTMLLIElement
+
+        Array.from(carouselItems).forEach(li => li.removeAttribute('data-active'))
+        activeElement.dataset.active = 'true'
+
+        if (subTextValue) {
+            subText = subTextValue
+                .replace('{0}', String(currentPage))
+                .replace('{1}', String(totalPages))
+        }
+
+        if (progress) {
+            const percentage = (100 / (totalPages - 1))
+
+            progressValue = percentage * (currentPage - 1)
+        }
+
+        onScroll?.(currentPage)
+    }
+
+    const scroll = debounceScroll((event: Event) => {
+        if (!paginated) {
+            const target = event.target as HTMLDivElement
+            const scrollLeft = target.scrollLeft
+            const itemWidth = target.children[0].clientWidth
+            const page = Math.round(scrollLeft / itemWidth) + 1
+
+            currentPage = page
+
+            updateValues()
+        }
+    }, debounce)
+
+    const paginate = (event: PaginationEventType) => {
+        const liElement = carouselItems[event.page - 1] as HTMLLIElement
+
+        liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+
+        currentPage = event.page
+        paginated = true
+
+        updateValues()
+        setTimeout(() => {
+            paginated = false
+        }, 300)
+    }
+
+    onMount(() => {
+        const usedInAstro = carousel.children[0].nodeName === 'ASTRO-SLOT'
+
+        carouselContainer.addEventListener('scroll', scroll)
+
+        carouselItems = usedInAstro
+            ? carousel.querySelectorAll('li')
+            : carousel.children
+
+        return () => {
+            carouselContainer.removeEventListener('scroll', scroll)
+        }
+    })
+</script>
+
+<section class={classes}>
+    <div class={containerClasses} bind:this={carouselContainer}>
+        <ul class={wrapperClasses} style={style} bind:this={carousel}>
+            <slot />
+        </ul>
+    </div>
+    <ConditionalWrapper
+        condition={!!(subText || progress)}
+        class={paginationWrapperClasses}
+    >
+        {#if progress}
+            <Progress value={progressValue} />
+        {/if}
+        <Pagination
+            type="arrows"
+            {...pagination}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            className={paginationClasses}
+            onChange={paginate}
+        />
+        {#if subText}
+            <span class={styles.subtext}>
+                {subText
+                    .replace('{0}', '1')
+                    .replace('{1}', String(totalPages))
+                }
+            </span>
+        {/if}
+    </ConditionalWrapper>
+</section>

package/components/Carousel/Carousel.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useRef, useState } from 'react'
+import type { ReactCarouselProps } from './carousel'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+import Pagination from '../Pagination/Pagination.tsx'
+import Progress from '../Progress/Progress.tsx'
+
+import { classNames } from '../../utils/classNames'
+import { debounce as debounceScroll } from '../../utils/debounce'
+
+import styles from './carousel.module.scss'
+
+import type { PaginationEventType } from '../Pagination/pagination'
+
+const Carousel = ({
+    items,
+    visibleItems = 1,
+    subText,
+    scrollSnap = true,
+    progress,
+    pagination,
+    effect,
+    debounce = 20,
+    className,
+    wrapperClassName,
+    paginationClassName,
+    onScroll,
+    children
+}: ReactCarouselProps) => {
+    const carouselContainer = useRef<HTMLDivElement>(null)
+    const carousel = useRef<HTMLUListElement>(null)
+    const carouselItems = useRef<any>(null)
+    const paginated = useRef(false)
+    const currentPage = useRef(1)
+
+    const [progressValue, setProgressValue] = useState(0)
+    const [updatedSubText, setUpdatedSubText] = useState(subText)
+
+    const classes = classNames([
+        styles.carousel,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        scrollSnap && styles.snap
+    ])
+
+    const wrapperClasses = classNames([
+        styles.wrapper,
+        effect && styles[effect],
+        wrapperClassName
+    ])
+
+    const paginationWrapperClasses = classNames([
+        styles['pagination-wrapper'],
+        paginationClassName
+    ])
+
+    const paginationClasses = classNames([
+        styles.pagination,
+        !subText && paginationClassName
+    ])
+
+    const totalPages = Math.ceil(items / visibleItems!)
+    const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
+    const style = visibleItems > 1
+        ? { '--w-slide-width': `${100 / visibleItems}%;` } as React.CSSProperties
+        : undefined
+
+    const updateValues = (page: number) => {
+        const activeElement = carouselItems.current[page - 1]
+
+        Array.from(carouselItems.current).forEach(li => (li as HTMLLIElement).removeAttribute('data-active'))
+        activeElement.dataset.active = 'true'
+
+        if (subTextValue) {
+            setUpdatedSubText(
+                subTextValue
+                    .replace('{0}', String(page))
+                    .replace('{1}', String(totalPages))
+            )
+        }
+
+        if (progress) {
+            const percentage = (100 / (totalPages - 1))
+
+            setProgressValue(percentage * (page - 1))
+        }
+
+        onScroll?.(page)
+    }
+
+    const scroll = debounceScroll((event: Event) => {
+        if (!paginated.current) {
+            const target = event.target as HTMLDivElement
+            const scrollLeft = target.scrollLeft
+            const itemWidth = target.children[0].clientWidth
+            const page = Math.round(scrollLeft / itemWidth) + 1
+
+            currentPage.current = page
+
+            updateValues(page)
+        }
+    }, debounce)
+
+    const paginate = (event: PaginationEventType) => {
+        const liElement = carouselItems.current[event.page - 1]
+
+        liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+
+        currentPage.current = event.page
+        paginated.current = true
+
+        updateValues(event.page)
+        setTimeout(() => {
+            paginated.current = false
+        }, 300)
+    }
+
+    useEffect(() => {
+        const usedInAstro = carousel.current?.children[0].nodeName === 'ASTRO-SLOT'
+
+        carouselItems.current = usedInAstro
+            ? carousel.current.querySelectorAll('li')
+            : carousel.current?.children
+
+        carouselContainer.current?.addEventListener('scroll', scroll)
+
+        return () => {
+            carouselContainer.current?.removeEventListener('scroll', scroll)
+        }
+    }, [])
+
+    return (
+        <section className={classes}>
+            <div className={containerClasses} ref={carouselContainer}>
+                <ul className={wrapperClasses} style={style} ref={carousel}>
+                    {children}
+                </ul>
+            </div>
+            <ConditionalWrapper
+                condition={!!(subText || progress)}
+                wrapper={children => (
+                    <div className={paginationWrapperClasses}>{children}</div>
+                )}
+            >
+                {progress && (
+                    <Progress value={progressValue} />
+                )}
+                <Pagination
+                    type="arrows"
+                    {...pagination}
+                    currentPage={currentPage.current}
+                    totalPages={totalPages}
+                    className={paginationClasses}
+                    onChange={paginate}
+                />
+                {updatedSubText && (
+                    <span className={styles.subtext}>
+                        {updatedSubText
+                            .replace('{0}', '1')
+                            .replace('{1}', String(totalPages))
+                        }
+                    </span>
+                )}
+            </ConditionalWrapper>
+        </section>
+    )
+}
+
+export default Carousel

package/components/Carousel/carousel.module.scss

@@ -0,0 +1,58 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-slide-width: 100%;
+}
+
+.carousel {
+    @include layout(flex, sm, column);
+}
+
+.container {
+    @include layout(flex, sm);
+    @include visibility(auto);
+
+    scrollbar-width: none;
+
+    &.snap {
+        scroll-snap-type: x mandatory;
+    }
+}
+
+.wrapper {
+    @include layout(flex, sm);
+    @include spacing(0);
+    @include size('w100%');
+
+    list-style-type: none;
+
+    &.opacity li:not([data-active]) {
+        opacity: .5;
+    }
+
+    &.saturate li:not([data-active]) {
+        filter: saturate(0);
+    }
+
+    li {
+        @include transition();
+        @include spacing(m0);
+        @include layout(flex, h-center);
+
+        scroll-snap-align: center;
+        min-width: var(--w-slide-width);
+    }
+}
+
+.pagination-wrapper {
+    @include layout(flex, sm, column);
+}
+
+.pagination {
+    @include layout(h-center);
+}
+
+.subtext {
+    @include layout(flex, h-center);
+    @include typography(md, primary-20);
+}

package/components/Carousel/carousel.ts

@@ -0,0 +1,26 @@
+import type { PaginationProps } from '../Pagination/pagination'
+
+export type CarouselProps = {
+    items: number
+    visibleItems?: number
+    subText?: string
+    autoplay?: boolean
+    vertical?: boolean
+    scrollSnap?: boolean
+    progress?: boolean
+    pagination?: PaginationProps
+    effect?: 'opacity' | 'saturate' | null
+    debounce?: number
+    className?: string
+    wrapperClassName?: string
+    paginationClassName?: string
+}
+
+export type SvelteCarouselProps = {
+    onScroll?: (event: number) => void
+} & CarouselProps
+
+export type ReactCarouselProps = {
+    onScroll?: (event: number) => void
+    children?: React.ReactNode
+} & CarouselProps