✨ Add responsive itemsPerSlide to Carousel

Author: Frontendland

README.md

@@ -145,6 +145,7 @@ The `setup` mixin can also accept the following options:
 | `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |
 | `includeTooltip` | `true` | Adds styles for using tooltips.
 | `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
+| `includeBreakpoints` | `true` | Exposes breakpoint variables in CSS for JS. Used by components for responsiveness.
 
 Default component styles can be changed by overriding the following CSS variables:
 

scripts/utilityTypes.js

@@ -1,4 +1,9 @@
 export const utilityTypes = `
+export type Breakpoint = 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+
 export type Gap = 'none'
     | 'xxs'
     | 'xs'
@@ -153,6 +158,8 @@ declare module 'webcoreui' {
         remove: () => void
     }
 
+    export const getBreakpoint: () => string
+
     export const getLayoutClasses: (config: getLayoutClassesConfig) => string
 
     export const clamp: (num: number, min: number, max: number) => number
@@ -164,6 +171,8 @@ declare module 'webcoreui' {
         output: [start: number, end: number]
     ) => number
 
+    export const isOneOf: <T extends string>(values: readonly T[]) => (value: string) => value is T
+
     export const modal: (config: Modal | string) => {
         open: () => void
         remove: () => void

src/components/Carousel/Carousel.astro

@@ -35,10 +35,14 @@ const containerClasses = [
     scrollSnap && styles.snap
 ]
 
+const getItemsPerSlide = () => typeof itemsPerSlide === 'number'
+    ? itemsPerSlide
+    : itemsPerSlide.default || 1
+
 const wrapperClasses = [
     styles.wrapper,
     effect && styles[effect],
-    itemsPerSlide > 1 && styles['no-snap'],
+    getItemsPerSlide() > 1 && styles['no-snap'],
     wrapperClassName
 ]
 
@@ -52,10 +56,10 @@ const paginationClasses = classNames([
     !subText && paginationClassName
 ])
 
-const totalPages = Math.ceil(items / itemsPerSlide)
+const totalPages = Math.ceil(items / getItemsPerSlide())
 const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-const style = itemsPerSlide > 1
-    ? `--w-slide-width: calc(${100 / itemsPerSlide}% - 5px);`
+const style = getItemsPerSlide() > 1
+    ? `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
     : null
 ---
 
@@ -68,7 +72,8 @@ const style = itemsPerSlide > 1
         <ul
             class:list={wrapperClasses}
             style={style}
-            data-visible-items={itemsPerSlide > 1 ? itemsPerSlide : null}
+            data-visible-items={getItemsPerSlide() > 1 ? getItemsPerSlide() : null}
+            data-breakpoint-items={typeof itemsPerSlide !== 'number' ? JSON.stringify(itemsPerSlide) : null}
         >
             <slot />
         </ul>
@@ -101,6 +106,7 @@ const style = itemsPerSlide > 1
 <script>
     import { debounce } from '../../utils/debounce'
     import { listen } from '../../utils/event'
+    import { getBreakpoint } from '../../utils/getBreakpoint'
 
     const addEventListeners = () => {
         const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
@@ -127,7 +133,7 @@ const style = itemsPerSlide > 1
                 }
 
                 for (let i = 0; i < diff; i++) {
-                    triggerButton.click()
+                    triggerButton?.click()
                 }
 
                 Array.from(carouselElement.children).forEach(li => {
@@ -140,12 +146,72 @@ const style = itemsPerSlide > 1
             }
         }
 
+        const updateOnResize = (entries: ResizeObserverEntry[]) => {
+            const target = entries[0].target
+            const carousel = target.querySelector<HTMLUListElement>('ul')
+            const pagination = target.parentElement?.querySelector<HTMLUListElement>('[data-id="w-pagination"]')
+            const breakpoint = getBreakpoint()
+
+            if (!target || !carousel || !pagination) {
+                return
+            }
+
+            if (carousel.dataset.currentBreakpoint === breakpoint) {
+                return
+            }
+
+            const progress = target.parentElement?.querySelector<HTMLDivElement>('.w-carousel-progress')
+            const prevPageButton = pagination.querySelector<HTMLButtonElement>('[data-page="prev"]')
+            const nextPageButton = pagination.querySelector<HTMLButtonElement>('[data-page="next"]')
+            const subText = pagination.nextElementSibling
+            const breakpoints = JSON.parse(carousel.dataset.breakpointItems || '')
+            const itemsPerSlide = breakpoints[breakpoint] || breakpoints.default
+            const totalItems = carousel.children.length
+            const totalPages = Math.ceil(totalItems / itemsPerSlide)
+
+            carousel.dataset.currentBreakpoint = breakpoint
+            carousel.dataset.visibleItems = itemsPerSlide
+            carousel.children[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+            carousel.style.setProperty('--w-slide-width', `calc(${100 / itemsPerSlide}% - 5px)`)
+
+            pagination.dataset.totalPages = String(totalPages)
+
+            if (!(prevPageButton && nextPageButton)) {
+                pagination.innerHTML = Array.from({ length: totalPages }, (_, i) => i + 1)
+                    .map(i => `
+                        <li>
+                            <button
+                                data-active="${i - 1 === 0}"
+                                data-page="${i}"
+                                aria-label="${`page ${i}`}"
+                            ></button>
+                        </li>
+                    `).join('')
+            }
+
+            if (progress && progress.children[0] instanceof HTMLDivElement) {
+                progress.children[0].style.setProperty('--w-progress-width', '0%')
+            }
+
+            if (subText instanceof HTMLSpanElement && subText?.dataset.text) {
+                subText.innerText = subText.dataset.text
+                    .replace('{0}', '1')
+                    .replace('{1}', String(totalPages))
+            }
+        }
+
         carousels.forEach(carousel => {
             const carouselElement = carousel as HTMLDivElement
+            const carouselList = carousel.querySelector<HTMLUListElement>('ul')
+            const observer = new ResizeObserver(updateOnResize)
             const debounceAmount = carouselElement.dataset.debounce
                 ? Number(carouselElement.dataset.debounce)
                 : 20
 
+            if (carouselList?.dataset.breakpointItems) {
+                observer.observe(carouselElement)
+            }
+
             carousel.addEventListener('scroll', debounce((event: Event) => {
                 scroll(event)
             }, debounceAmount))
@@ -169,6 +235,10 @@ const style = itemsPerSlide > 1
                 .filter(index => index < totalItems)
         })
 
+        if (indexes.length < event.page) {
+            return
+        }
+
         const pageIndex = event.direction === 'prev'
             ? indexes[event.page - 1][0]
             : indexes[event.page - 1][indexes[event.page - 1].length - 1]
@@ -194,15 +264,15 @@ const style = itemsPerSlide > 1
         }
 
         if (event.trusted) {
-            const carouselContaienr = target.closest('section').querySelector('[data-id="w-carousel"]')
+            const carouselContainer = target.closest('section').querySelector('[data-id="w-carousel"]')
 
             liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
             liElement.dataset.active = 'true'
 
-            carouselContaienr.dataset.paginated = 'true'
+            carouselContainer.dataset.paginated = 'true'
 
             setTimeout(() => {
-                carouselContaienr.removeAttribute('data-paginated')
+                carouselContainer.removeAttribute('data-paginated')
             }, 300)
         }
     })

src/components/Carousel/Carousel.svelte

@@ -8,6 +8,7 @@
 
     import { classNames } from '../../utils/classNames'
     import { debounce as debounceScroll } from '../../utils/debounce'
+    import { getBreakpoint } from '../../utils/getBreakpoint'
 
     import styles from './carousel.module.scss'
 
@@ -29,12 +30,28 @@
         onScroll
     }: SvelteCarouselProps = $props()
 
+    const getItemsPerSlide = () => {
+        if (carousel) {
+            return typeof itemsPerSlide === 'number'
+                ? itemsPerSlide
+                : itemsPerSlide[getBreakpoint()] || itemsPerSlide.default || 1
+        }
+
+        return typeof itemsPerSlide === 'number'
+            ? itemsPerSlide
+            : itemsPerSlide.default || 1
+    }
+
     let carouselContainer: HTMLDivElement
     let carousel: HTMLUListElement
     let carouselItems: HTMLCollection | NodeListOf<HTMLLIElement>
     let progressValue = $state(0)
     let paginated = false
     let currentPage = $state(1)
+    let totalPages = $state(Math.ceil(items / getItemsPerSlide()))
+    let style = $state(getItemsPerSlide() > 1
+        ? `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+        : null)
 
     const classes = classNames([
         styles.carousel,
@@ -49,7 +66,7 @@
     const wrapperClasses = classNames([
         styles.wrapper,
         effect && styles[effect],
-        itemsPerSlide! > 1 && styles['no-snap'],
+        getItemsPerSlide() > 1 && styles['no-snap'],
         wrapperClassName
     ])
 
@@ -63,11 +80,7 @@
         !subText && paginationClassName
     ])
 
-    const totalPages = Math.ceil(items / itemsPerSlide!)
     const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-    const style = itemsPerSlide! > 1
-        ? `--w-slide-width: calc(${100 / itemsPerSlide!}% - 5px);`
-        : null
 
     const updateValues = () => {
         const activeElement = carouselItems[currentPage - 1] as HTMLLIElement
@@ -104,8 +117,8 @@
     }, debounce)
 
     const paginate = (event: PaginationEventType) => {
-        const indexes = Array.from({ length: Math.ceil(items / itemsPerSlide!) }, (_, i) => {
-            return Array.from({ length: itemsPerSlide! }, (_, j) => (i * itemsPerSlide!) + j)
+        const indexes = Array.from({ length: Math.ceil(items / getItemsPerSlide()) }, (_, i) => {
+            return Array.from({ length: getItemsPerSlide() }, (_, j) => (i * getItemsPerSlide()) + j)
                 .filter(index => index < items)
         })
 
@@ -126,15 +139,33 @@
         }, 300)
     }
 
+    const updateOnResize = () => {
+        currentPage = 1
+        progressValue = 0
+        totalPages = Math.ceil(items / getItemsPerSlide())
+        style = `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+
+        if (subTextValue) {
+            subText = subTextValue
+                .replace('{0}', '1')
+                .replace('{1}', String(totalPages))
+        }
+    }
+
     onMount(() => {
         const usedInAstro = carousel.children[0].nodeName === 'ASTRO-SLOT'
-
-        carouselContainer.addEventListener('scroll', scroll)
+        const observer = new ResizeObserver(updateOnResize)
 
         carouselItems = usedInAstro
             ? carousel.querySelectorAll('li')
             : carousel.children
 
+        carouselContainer.addEventListener('scroll', scroll)
+
+        if (typeof itemsPerSlide !== 'number') {
+            observer.observe(carouselContainer)
+        }
+
         return () => {
             carouselContainer.removeEventListener('scroll', scroll)
         }