webcoreui 0.6.0 → 0.6.1

package/components/Button/button.ts

@@ -15,7 +15,7 @@ export type ButtonProps = {
         | '_parent'
         | '_top'
         | '_unfencedTop'
-        | null
+        | ''
         | undefined
     href?: string
     className?: string

package/components/Carousel/Carousel.astro

@@ -13,7 +13,7 @@ interface Props extends CarouselProps {}
 
 const {
     items,
-    visibleItems = 1,
+    itemsPerSlide = 1,
     subText,
     scrollSnap = true,
     progress,
@@ -38,6 +38,7 @@ const containerClasses = [
 const wrapperClasses = [
     styles.wrapper,
     effect && styles[effect],
+    itemsPerSlide > 1 && styles['no-snap'],
     wrapperClassName
 ]
 
@@ -51,10 +52,10 @@ const paginationClasses = classNames([
     !subText && paginationClassName
 ])
 
-const totalPages = Math.ceil(items / visibleItems)
+const totalPages = Math.ceil(items / itemsPerSlide)
 const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-const style = visibleItems > 1
-    ? `--w-slide-width: ${100 / visibleItems}%;`
+const style = itemsPerSlide > 1
+    ? `--w-slide-width: calc(${100 / itemsPerSlide}% - 5px);`
     : null
 ---
 
@@ -67,7 +68,7 @@ const style = visibleItems > 1
         <ul
             class:list={wrapperClasses}
             style={style}
-            data-visible-items={visibleItems > 1 ? visibleItems : null}
+            data-visible-items={itemsPerSlide > 1 ? itemsPerSlide : null}
         >
             <slot />
         </ul>
@@ -159,8 +160,16 @@ const style = visibleItems > 1
 
         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 itemsPerSlide = Number(carousel.dataset.visibleItems) || 1
+        const totalItems = carousel.children.length
+        const indexes = Array.from({ length: Math.ceil(totalItems / itemsPerSlide) }, (_, i) => {
+            return Array.from({ length: itemsPerSlide }, (_, j) => (i * itemsPerSlide) + j)
+                .filter(index => index < totalItems)
+        })
+
+        const pageIndex = event.direction === 'prev'
+            ? indexes[event.page - 1][0]
+            : indexes[event.page - 1][indexes[event.page - 1].length - 1]
 
         const liElement = carousel.children[pageIndex]
         const subText = event.target.nextElementSibling

package/components/Carousel/Carousel.svelte

@@ -14,7 +14,7 @@
     import type { PaginationEventType } from '../Pagination/pagination'
 
     export let items: SvelteCarouselProps['items'] = 0
-    export let visibleItems: SvelteCarouselProps['visibleItems'] = 1
+    export let itemsPerSlide: SvelteCarouselProps['itemsPerSlide'] = 1
     export let subText: SvelteCarouselProps['subText'] = ''
     export let scrollSnap: SvelteCarouselProps['scrollSnap'] = true
     export let progress: SvelteCarouselProps['progress'] = false
@@ -46,6 +46,7 @@
     const wrapperClasses = classNames([
         styles.wrapper,
         effect && styles[effect],
+        itemsPerSlide! > 1 && styles['no-snap'],
         wrapperClassName
     ])
 
@@ -59,10 +60,10 @@
         !subText && paginationClassName
     ])
 
-    const totalPages = Math.ceil(items / visibleItems!)
+    const totalPages = Math.ceil(items / itemsPerSlide!)
     const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-    const style = visibleItems! > 1
-        ? `--w-slide-width: ${100 / visibleItems!}%;`
+    const style = itemsPerSlide! > 1
+        ? `--w-slide-width: calc(${100 / itemsPerSlide!}% - 5px);`
         : null
 
     const updateValues = () => {
@@ -100,7 +101,16 @@
     }, debounce)
 
     const paginate = (event: PaginationEventType) => {
-        const liElement = carouselItems[event.page - 1] as HTMLLIElement
+        const indexes = Array.from({ length: Math.ceil(items / itemsPerSlide!) }, (_, i) => {
+            return Array.from({ length: itemsPerSlide! }, (_, j) => (i * itemsPerSlide!) + j)
+                .filter(index => index < items)
+        })
+
+        const pageIndex = event.direction === 'prev'
+            ? indexes[event.page - 1][0]
+            : indexes[event.page - 1][indexes[event.page - 1].length - 1]
+
+        const liElement = carouselItems[pageIndex] as HTMLLIElement
 
         liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 

package/components/Carousel/Carousel.tsx

@@ -14,7 +14,7 @@ import type { PaginationEventType } from '../Pagination/pagination'
 
 const Carousel = ({
     items,
-    visibleItems = 1,
+    itemsPerSlide = 1,
     subText,
     scrollSnap = true,
     progress,
@@ -49,6 +49,7 @@ const Carousel = ({
     const wrapperClasses = classNames([
         styles.wrapper,
         effect && styles[effect],
+        itemsPerSlide! > 1 && styles['no-snap'],
         wrapperClassName
     ])
 
@@ -62,10 +63,10 @@ const Carousel = ({
         !subText && paginationClassName
     ])
 
-    const totalPages = Math.ceil(items / visibleItems!)
+    const totalPages = Math.ceil(items / itemsPerSlide!)
     const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-    const style = visibleItems > 1
-        ? { '--w-slide-width': `${100 / visibleItems}%;` } as React.CSSProperties
+    const style = itemsPerSlide > 1
+        ? { '--w-slide-width': `calc(${100 / itemsPerSlide!}% - 5px);` } as React.CSSProperties
         : undefined
 
     const updateValues = (page: number) => {
@@ -105,7 +106,16 @@ const Carousel = ({
     }, debounce)
 
     const paginate = (event: PaginationEventType) => {
-        const liElement = carouselItems.current[event.page - 1]
+        const indexes = Array.from({ length: Math.ceil(items / itemsPerSlide!) }, (_, i) => {
+            return Array.from({ length: itemsPerSlide! }, (_, j) => (i * itemsPerSlide!) + j)
+                .filter(index => index < items)
+        })
+
+        const pageIndex = event.direction === 'prev'
+            ? indexes[event.page - 1][0]
+            : indexes[event.page - 1][indexes[event.page - 1].length - 1]
+
+        const liElement = carouselItems.current[pageIndex]
 
         liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 

package/components/Carousel/carousel.module.scss

@@ -34,12 +34,15 @@ body {
         filter: saturate(0);
     }
 
+    &:not(.no-snap) li {
+        scroll-snap-align: center;
+    }
+
     li {
         @include transition();
         @include spacing(m0);
         @include layout(flex, h-center);
 
-        scroll-snap-align: center;
         min-width: var(--w-slide-width);
     }
 }

package/components/Carousel/carousel.ts

@@ -2,7 +2,7 @@ import type { PaginationProps } from '../Pagination/pagination'
 
 export type CarouselProps = {
     items: number
-    visibleItems?: number
+    itemsPerSlide?: number
     subText?: string
     autoplay?: boolean
     vertical?: boolean

package/components/DataTable/DataTable.astro

@@ -72,8 +72,8 @@ const columnToggleItems = [{
 }]
 
 const columnFilterItems = headings?.filter(heading => typeof heading !== 'string')
-    .filter(heading => heading.filterable)
-    .map(heading => heading.name)
+    .filter(heading => (heading as HeadingObject).filterable)
+    .map(heading => (heading as HeadingObject).name)
     .map(heading => getColumnName(heading))
 
 const hasPagination = data?.length && itemsPerPage

package/components/DataTable/DataTable.tsx

@@ -1,287 +1,287 @@
-import React, { useState } from 'react'
-import type { HeadingObject, ReactDataTableProps } from './datatable'
-
-import Button from '../Button/Button.tsx'
-import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
-import Input from '../Input/Input.tsx'
-import Pagination from '../Pagination/Pagination.tsx'
-import Select from '../Select/Select.tsx'
-
-import { classNames } from '../../utils/classNames'
-import { debounce } from '../../utils/debounce'
-
-import checkIcon from '../../icons/check.svg?raw'
-import orderIcon from '../../icons/order.svg?raw'
-import searchIcon from '../../icons/search.svg?raw'
-
-import styles from './datatable.module.scss'
-
-import type { ListEventType } from '../List/list'
-
-// eslint-disable-next-line complexity
-const DataTable = ({
-    headings,
-    filterPlaceholder = 'Filter entries',
-    showFilterIcon,
-    noResultsLabel = 'No results.',
-    itemsPerPage,
-    subText,
-    columnToggleLabel = 'Columns',
-    pagination,
-    data,
-    hover,
-    striped,
-    offsetStripe,
-    compact,
-    maxHeight,
-    className,
-    id,
-    onFilter,
-    children
-}: ReactDataTableProps) => {
-    const [filteredData, setFilteredData] = useState<any>(data)
-    const [toggledData, setToggledData] = useState(filteredData)
-    const [filteredHeadings, setFilteredHeadings] = useState<any>(headings)
-    const [page, setPage] = useState(1)
-    const [hasActiveFilter, setHasActiveFilter] = useState(false)
-    const [sortOrder, setSortOrder] = useState(1)
-
-    const classes = classNames([
-        styles.table,
-        hover && styles.hover,
-        striped && styles[`striped-${striped}s`],
-        offsetStripe && styles.offset,
-        compact && styles.compact,
-        maxHeight && styles.scroll
-    ])
-
-    const footerClasses = classNames([
-        styles.footer,
-        subText && styles.between
-    ])
-
-    const styleVariables = {
-        ...(maxHeight && { 'max-height': maxHeight })
-    } as React.CSSProperties
-
-    const showColumnToggle = headings?.some(heading => {
-        return typeof heading === 'string' ? false : heading.toggleable
-    })
-
-    const columnToggleItems = [{
-        items: headings?.length ? headings
-            .filter(heading => typeof heading !== 'string' && heading.toggleable)
-            .map(heading => ({
-                icon: checkIcon,
-                name: (heading as HeadingObject).name,
-                value: String(headings.findIndex(h => {
-                    return (h as HeadingObject).name === (heading as HeadingObject).name
-                }))
-            })) : []
-    }]
-
-    const columnFilterIndexes = headings?.map(heading => (heading as HeadingObject).filterable)
-        .map((heading, index) => heading ? index : null)
-        .filter(heading => heading !== null) || []
-
-    const hasPagination = data?.length && itemsPerPage
-        ? data.length > itemsPerPage
-        : false
-
-    const filter = debounce((event: Event) => {
-        const target = event.target as HTMLInputElement
-
-        setHasActiveFilter(!!target.value)
-
-        setFilteredData(toggledData?.filter((row: string[]) => {
-            const rowValue = row.filter((_, index) => columnFilterIndexes.includes(index))
-                .join('')
-                .toLowerCase()
-
-            return rowValue.includes(target.value.toLowerCase())
-        }))
-
-        onFilter?.({
-            results: filteredData,
-            numberOfResults: filteredData.length
-        })
-    }, 400)
-
-    const toggleColumns = (event: ListEventType) => {
-        const columnToggleListElement = Array.from(event.list.children)
-            .find(child => (child as HTMLLIElement).dataset.name === event.name) as HTMLLIElement
-        const svgIcon = columnToggleListElement.children[0] as HTMLElement
-        let mappedData
-
-        svgIcon.style.opacity = svgIcon.style.opacity === '0'
-            ? '1'
-            : '0'
-
-        if (svgIcon.style.opacity === '0') {
-            mappedData = (hasActiveFilter ? data : filteredData)?.map((row: string[]) => {
-                return row.map((column, index) => index === Number(event.value) ? null : column)
-            })
-
-            setFilteredData(mappedData)
-
-            setFilteredHeadings(filteredHeadings.map((heading: HeadingObject | string) => {
-                return ((heading as HeadingObject)?.name || heading) === event.name ? null : heading
-            }))
-        } else {
-            mappedData = (hasActiveFilter ? data : filteredData)?.map((row: string[], x: number) => {
-                return row.map((column, y) => y === Number(event.value) ? data?.[x][y] : column)
-            })
-
-            setFilteredData(mappedData)
-
-            setFilteredHeadings(filteredHeadings.map((heading: HeadingObject | string, index: number) => {
-                return ((headings?.[index] as HeadingObject)?.name || headings?.[index]) === event.name
-                    ? headings?.[index]
-                    : heading
-            }))
-        }
-
-        setToggledData(mappedData)
-    }
-
-    const sort = (index: number) => {
-        const sortedData = filteredData.sort((a: string[], b: string[]) => {
-            let aValue: string | number = a[index]
-            let bValue: string | number = b[index]
-
-            if (!isNaN(aValue as any)) {
-                aValue = Number(aValue)
-            }
-
-            if (!isNaN(bValue as any)) {
-                bValue = Number(bValue)
-            }
-
-            return aValue > bValue
-                ? sortOrder * -1
-                : sortOrder
-        })
-
-        setFilteredData(sortedData)
-        setSortOrder(sortOrder === 1 ? -1 : 1)
-    }
-
-    const isNextPage = (index: number) => {
-        if (hasPagination && itemsPerPage && !hasActiveFilter) {
-            const currentPage = Math.ceil((index + 1) / itemsPerPage)
-
-            return currentPage !== page ? 'true' : undefined
-        }
-
-        if (hasActiveFilter && itemsPerPage) {
-            return index >= itemsPerPage ? 'true' : undefined
-        }
-
-        return undefined
-    }
-
-    return (
-        <section className={className} id={id}>
-            {(!!columnFilterIndexes?.length || showColumnToggle) && (
-                <div className={styles.filters}>
-                    {!!columnFilterIndexes?.length && (
-                        <Input
-                            type="search"
-                            placeholder={filterPlaceholder}
-                            onInput={filter}
-                        >
-                            {showFilterIcon && (
-                                <span dangerouslySetInnerHTML={{ __html: searchIcon }} />
-                            )}
-                        </Input>
-                    )}
-                    {showColumnToggle && (
-                        <Select
-                            name={`data-table-${id || crypto.randomUUID()}`}
-                            itemGroups={columnToggleItems}
-                            position="bottom-end"
-                            value={columnToggleLabel}
-                            onChange={toggleColumns}
-                            updateValue={false}
-                        />
-                    )}
-                </div>
-            )}
-
-            <div className={classes} style={styleVariables}>
-                <table>
-                    {!!filteredHeadings?.length && (
-                        <thead>
-                            <tr>
-                                {filteredHeadings?.map((heading: HeadingObject | string, index: number) => {
-                                    if (!heading) {
-                                        return null
-                                    }
-
-                                    return (
-                                        <th key={index}>
-                                            <ConditionalWrapper
-                                                condition={!!(heading as HeadingObject).sortable}
-                                                wrapper={children => (
-                                                    <Button theme="flat" slot="wrapper" onClick={() => sort(index)}>
-                                                        {children}
-                                                        <span dangerouslySetInnerHTML={{ __html: orderIcon }} />
-                                                    </Button>
-                                                )}
-                                            >
-                                                {(heading as HeadingObject).name || heading as string}
-                                            </ConditionalWrapper>
-                                        </th>
-                                    )
-                                })}
-                            </tr>
-                        </thead>
-                    )}
-
-                    <tbody>
-                        {filteredData?.map((row: string[], rowIndex: number) => (
-                            <tr key={rowIndex} data-hidden={isNextPage(rowIndex)}>
-                                {row.filter(Boolean).map((column, columnIndex) => (
-                                    <td
-                                        key={columnIndex}
-                                        dangerouslySetInnerHTML={{ __html: column }}
-                                    />
-                                ))}
-                            </tr>
-                        ))}
-                        {children}
-                    </tbody>
-                    {!filteredData?.length && (
-                        <tfoot>
-                            <tr>
-                                <td
-                                    colSpan={data?.[0].length}
-                                    className={styles['no-results']}
-                                >
-                                    {noResultsLabel}
-                                </td>
-                            </tr>
-                        </tfoot>
-                    )}
-                </table>
-            </div>
-            {(subText || hasPagination) && (
-                <div className={footerClasses}>
-                    {subText && (
-                        <span className={styles.subtext}>{subText}</span>
-                    )}
-                    {(hasPagination && itemsPerPage && !hasActiveFilter) && (
-                        <Pagination
-                            {...pagination}
-                            totalPages={Math.ceil((data?.length || 0) / itemsPerPage)}
-                            currentPage={page}
-                            onChange={event => setPage(event.page)}
-                        />
-                    )}
-                </div>
-            )}
-        </section>
-    )
-}
-
-export default DataTable
+import React, { useState } from 'react'
+import type { HeadingObject, ReactDataTableProps } from './datatable'
+
+import Button from '../Button/Button.tsx'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+import Input from '../Input/Input.tsx'
+import Pagination from '../Pagination/Pagination.tsx'
+import Select from '../Select/Select.tsx'
+
+import { classNames } from '../../utils/classNames'
+import { debounce } from '../../utils/debounce'
+
+import checkIcon from '../../icons/check.svg?raw'
+import orderIcon from '../../icons/order.svg?raw'
+import searchIcon from '../../icons/search.svg?raw'
+
+import styles from './datatable.module.scss'
+
+import type { ListEventType } from '../List/list'
+
+// eslint-disable-next-line complexity
+const DataTable = ({
+    headings,
+    filterPlaceholder = 'Filter entries',
+    showFilterIcon,
+    noResultsLabel = 'No results.',
+    itemsPerPage,
+    subText,
+    columnToggleLabel = 'Columns',
+    pagination,
+    data,
+    hover,
+    striped,
+    offsetStripe,
+    compact,
+    maxHeight,
+    className,
+    id,
+    onFilter,
+    children
+}: ReactDataTableProps) => {
+    const [filteredData, setFilteredData] = useState<any>(data)
+    const [toggledData, setToggledData] = useState(filteredData)
+    const [filteredHeadings, setFilteredHeadings] = useState<any>(headings)
+    const [page, setPage] = useState(1)
+    const [hasActiveFilter, setHasActiveFilter] = useState(false)
+    const [sortOrder, setSortOrder] = useState(1)
+
+    const classes = classNames([
+        styles.table,
+        hover && styles.hover,
+        striped && styles[`striped-${striped}s`],
+        offsetStripe && styles.offset,
+        compact && styles.compact,
+        maxHeight && styles.scroll
+    ])
+
+    const footerClasses = classNames([
+        styles.footer,
+        subText && styles.between
+    ])
+
+    const styleVariables = {
+        ...(maxHeight && { maxHeight })
+    } as React.CSSProperties
+
+    const showColumnToggle = headings?.some(heading => {
+        return typeof heading === 'string' ? false : heading.toggleable
+    })
+
+    const columnToggleItems = [{
+        items: headings?.length ? headings
+            .filter(heading => typeof heading !== 'string' && heading.toggleable)
+            .map(heading => ({
+                icon: checkIcon,
+                name: (heading as HeadingObject).name,
+                value: String(headings.findIndex(h => {
+                    return (h as HeadingObject).name === (heading as HeadingObject).name
+                }))
+            })) : []
+    }]
+
+    const columnFilterIndexes = headings?.map(heading => (heading as HeadingObject).filterable)
+        .map((heading, index) => heading ? index : null)
+        .filter(heading => heading !== null) || []
+
+    const hasPagination = data?.length && itemsPerPage
+        ? data.length > itemsPerPage
+        : false
+
+    const filter = debounce((event: Event) => {
+        const target = event.target as HTMLInputElement
+
+        setHasActiveFilter(!!target.value)
+
+        setFilteredData(toggledData?.filter((row: string[]) => {
+            const rowValue = row.filter((_, index) => columnFilterIndexes.includes(index))
+                .join('')
+                .toLowerCase()
+
+            return rowValue.includes(target.value.toLowerCase())
+        }))
+
+        onFilter?.({
+            results: filteredData,
+            numberOfResults: filteredData.length
+        })
+    }, 400)
+
+    const toggleColumns = (event: ListEventType) => {
+        const columnToggleListElement = Array.from(event.list.children)
+            .find(child => (child as HTMLLIElement).dataset.name === event.name) as HTMLLIElement
+        const svgIcon = columnToggleListElement.children[0] as HTMLElement
+        let mappedData
+
+        svgIcon.style.opacity = svgIcon.style.opacity === '0'
+            ? '1'
+            : '0'
+
+        if (svgIcon.style.opacity === '0') {
+            mappedData = (hasActiveFilter ? data : filteredData)?.map((row: string[]) => {
+                return row.map((column, index) => index === Number(event.value) ? null : column)
+            })
+
+            setFilteredData(mappedData)
+
+            setFilteredHeadings(filteredHeadings.map((heading: HeadingObject | string) => {
+                return ((heading as HeadingObject)?.name || heading) === event.name ? null : heading
+            }))
+        } else {
+            mappedData = (hasActiveFilter ? data : filteredData)?.map((row: string[], x: number) => {
+                return row.map((column, y) => y === Number(event.value) ? data?.[x][y] : column)
+            })
+
+            setFilteredData(mappedData)
+
+            setFilteredHeadings(filteredHeadings.map((heading: HeadingObject | string, index: number) => {
+                return ((headings?.[index] as HeadingObject)?.name || headings?.[index]) === event.name
+                    ? headings?.[index]
+                    : heading
+            }))
+        }
+
+        setToggledData(mappedData)
+    }
+
+    const sort = (index: number) => {
+        const sortedData = filteredData.sort((a: string[], b: string[]) => {
+            let aValue: string | number = a[index]
+            let bValue: string | number = b[index]
+
+            if (!isNaN(aValue as any)) {
+                aValue = Number(aValue)
+            }
+
+            if (!isNaN(bValue as any)) {
+                bValue = Number(bValue)
+            }
+
+            return aValue > bValue
+                ? sortOrder * -1
+                : sortOrder
+        })
+
+        setFilteredData(sortedData)
+        setSortOrder(sortOrder === 1 ? -1 : 1)
+    }
+
+    const isNextPage = (index: number) => {
+        if (hasPagination && itemsPerPage && !hasActiveFilter) {
+            const currentPage = Math.ceil((index + 1) / itemsPerPage)
+
+            return currentPage !== page ? 'true' : undefined
+        }
+
+        if (hasActiveFilter && itemsPerPage) {
+            return index >= itemsPerPage ? 'true' : undefined
+        }
+
+        return undefined
+    }
+
+    return (
+        <section className={className} id={id}>
+            {(!!columnFilterIndexes?.length || showColumnToggle) && (
+                <div className={styles.filters}>
+                    {!!columnFilterIndexes?.length && (
+                        <Input
+                            type="search"
+                            placeholder={filterPlaceholder}
+                            onInput={filter}
+                        >
+                            {showFilterIcon && (
+                                <span dangerouslySetInnerHTML={{ __html: searchIcon }} />
+                            )}
+                        </Input>
+                    )}
+                    {showColumnToggle && (
+                        <Select
+                            name={`data-table-${id || crypto.randomUUID()}`}
+                            itemGroups={columnToggleItems}
+                            position="bottom-end"
+                            value={columnToggleLabel}
+                            onChange={toggleColumns}
+                            updateValue={false}
+                        />
+                    )}
+                </div>
+            )}
+
+            <div className={classes} style={styleVariables}>
+                <table>
+                    {!!filteredHeadings?.length && (
+                        <thead>
+                            <tr>
+                                {filteredHeadings?.map((heading: HeadingObject | string, index: number) => {
+                                    if (!heading) {
+                                        return null
+                                    }
+
+                                    return (
+                                        <th key={index}>
+                                            <ConditionalWrapper
+                                                condition={!!(heading as HeadingObject).sortable}
+                                                wrapper={children => (
+                                                    <Button theme="flat" slot="wrapper" onClick={() => sort(index)}>
+                                                        {children}
+                                                        <span dangerouslySetInnerHTML={{ __html: orderIcon }} />
+                                                    </Button>
+                                                )}
+                                            >
+                                                {(heading as HeadingObject).name || heading as string}
+                                            </ConditionalWrapper>
+                                        </th>
+                                    )
+                                })}
+                            </tr>
+                        </thead>
+                    )}
+
+                    <tbody>
+                        {filteredData?.map((row: string[], rowIndex: number) => (
+                            <tr key={rowIndex} data-hidden={isNextPage(rowIndex)}>
+                                {row.filter(Boolean).map((column, columnIndex) => (
+                                    <td
+                                        key={columnIndex}
+                                        dangerouslySetInnerHTML={{ __html: column }}
+                                    />
+                                ))}
+                            </tr>
+                        ))}
+                        {children}
+                    </tbody>
+                    {!filteredData?.length && (
+                        <tfoot>
+                            <tr>
+                                <td
+                                    colSpan={data?.[0].length}
+                                    className={styles['no-results']}
+                                >
+                                    {noResultsLabel}
+                                </td>
+                            </tr>
+                        </tfoot>
+                    )}
+                </table>
+            </div>
+            {(subText || hasPagination) && (
+                <div className={footerClasses}>
+                    {subText && (
+                        <span className={styles.subtext}>{subText}</span>
+                    )}
+                    {(hasPagination && itemsPerPage && !hasActiveFilter) && (
+                        <Pagination
+                            {...pagination}
+                            totalPages={Math.ceil((data?.length || 0) / itemsPerPage)}
+                            currentPage={page}
+                            onChange={event => setPage(event.page)}
+                        />
+                    )}
+                </div>
+            )}
+        </section>
+    )
+}
+
+export default DataTable

package/components/Pagination/Pagination.astro

@@ -150,6 +150,7 @@ const generatedPages = pages?.length
                 const prevPageButton = element.querySelector('[data-page="prev"]') as HTMLButtonElement
                 const nextPageButton = element.querySelector('[data-page="next"]') as HTMLButtonElement
                 const currentPageButton = element.querySelector('[data-active]') as HTMLButtonElement
+                const previousPage = currentPage
 
                 const pageElements = Array
                     .from(pagination.children)
@@ -179,6 +180,7 @@ const generatedPages = pages?.length
 
                 dispatch('paginate', {
                     page: currentPage,
+                    direction: previousPage > currentPage ? 'prev' : 'next',
                     ...(activeButton?.dataset.page && { label: activeButton?.dataset.page }),
                     target: element,
                     trusted: event.isTrusted

package/components/Pagination/Pagination.svelte

@@ -45,6 +45,8 @@
         }))
 
     const paginate = (to: string | number) => {
+        const previousPage = calculatedCurrentPage
+
         if (to === 'prev') {
             calculatedCurrentPage = calculatedCurrentPage - 1
         } else if (to === 'next') {
@@ -57,6 +59,7 @@
 
         onChange?.({
             page: calculatedCurrentPage,
+            direction: previousPage > calculatedCurrentPage ? 'prev' : 'next',
             ...(label && { label })
         })
     }
@@ -87,7 +90,7 @@
                 theme={theme}
                 onClick={!(disablePrevious || (calculatedCurrentPage === 1 && !previousLink))
                     ? () => paginate('prev')
-                    : null
+                    : undefined
                 }
             >
                 {#if showChevrons || type === 'arrows'}
@@ -107,7 +110,7 @@
                         theme={theme}
                         onClick={calculatedCurrentPage !== index + 1
                             ? () => paginate(index + 1)
-                            : null
+                            : undefined
                         }
                     >
                         {page.label}
@@ -129,7 +132,7 @@
                 theme={theme}
                 onClick={!disableNext
                     ? () => paginate('next')
-                    : null
+                    : undefined
                 }
             >
                 {#if type !== 'arrows'}

package/components/Pagination/Pagination.tsx

@@ -53,6 +53,7 @@ const Pagination = ({
         }))
 
     const paginate = (to: string | number) => {
+        const previousPage = calculatedCurrentPage
         let currentPage = calculatedCurrentPage
 
         if (to === 'prev') {
@@ -69,6 +70,7 @@ const Pagination = ({
 
         onChange?.({
             page: currentPage,
+            direction: previousPage > currentPage ? 'prev' : 'next',
             ...(label && { label })
         })
     }
@@ -104,7 +106,7 @@ const Pagination = ({
                             theme={theme}
                             onClick={!(disablePrevious || (calculatedCurrentPage === 1 && !previousLink))
                                 ? () => paginate('prev')
-                                : null
+                                : undefined
                             }
                         >
                             {(showChevrons || type === 'arrows') && (
@@ -122,7 +124,7 @@ const Pagination = ({
                                     theme={theme}
                                     onClick={calculatedCurrentPage !== index + 1
                                         ? () => paginate(index + 1)
-                                        : null
+                                        : undefined
                                     }
                                 >
                                     {page.label}
@@ -144,7 +146,7 @@ const Pagination = ({
                             theme={theme}
                             onClick={!disableNext
                                 ? () => paginate('next')
-                                : null
+                                : undefined
                             }
                         >
                             {type !== 'arrows' && nextPageLabel}

package/components/Pagination/pagination.ts

@@ -2,6 +2,7 @@ import type { ButtonProps } from '../Button/button'
 
 export type PaginationEventType = {
     page: number
+    direction: 'prev' | 'next'
     label?: string | number | undefined
 }
 

package/index.d.ts

@@ -68,6 +68,14 @@ declare module 'webcoreui' {
         cancel: () => void
     }
 
+    export const get: (selector: string, all: boolean) => Element | NodeListOf<Element> | null
+    export const on: (
+        selector: string | HTMLElement,
+        event: string,
+        callback: any,
+        all?: boolean
+    ) => void
+
     export const dispatch: (event: string, detail: unknown) => void
     export const listen: (event: string, callback: (e: any) => unknown) => {
         remove: () => void

package/index.js

@@ -1,6 +1,7 @@
 export * from './utils/classNames.ts'
 export * from './utils/cookies.ts'
 export * from './utils/debounce.ts'
+export * from './utils/DOMUtils.ts'
 export * from './utils/event.ts'
 export * from './utils/interpolate.ts'
 export * from './utils/modal.ts'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.6.0",
+    "version": "0.6.1",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
@@ -14,6 +14,7 @@
     },
     "devDependencies": {
         "@astrojs/check": "0.7.0",
+        "@astrojs/node": "8.3.4",
         "@astrojs/react": "3.5.0",
         "@astrojs/svelte": "5.5.0",
         "@eslint/js": "9.9.1",

package/scss/config/typography.scss

@@ -11,7 +11,9 @@ $fontSizes: (
     'lg':       18px,
     'xl':       21px,
     '2xl':      24px,
-    '3xl':      28px
+    '3xl':      28px,
+    '4xl':      32px,
+    '5xl':      36px
 ) !default;
 
 $lineHeights: (

package/scss/global/utility.scss

@@ -5,7 +5,7 @@
 @use '../config' as *;
 
 $breakpointMap: (
-    'xs': 3,
+    'xs': 4,
     'sm': 4,
     'md': 6,
     'lg': 8

package/utils/DOMUtils.ts

@@ -0,0 +1,28 @@
+export const get = (selector: string, all: boolean = false) => all
+    ? document?.querySelectorAll(selector)
+    : document?.querySelector(selector)
+
+export const on = (
+    selector: string | HTMLElement,
+    event: string,
+    callback: any,
+    all?: boolean
+) => {
+    if (all) {
+        const elements = document.querySelectorAll(selector as string)
+
+        elements?.forEach(element => {
+            element.addEventListener(event, callback)
+        })
+
+        return
+    }
+
+    if (typeof selector === 'string') {
+        (get(selector) as HTMLElement)?.addEventListener(event, callback)
+
+        return
+    }
+
+    selector?.addEventListener(event, callback)
+}

package/scss/global/elements.scss

@@ -1,31 +0,0 @@
-@import '../config';
-
-@mixin elements() {
-    code {
-        display: inline-block;
-        padding: 2px 10px;
-        border-radius: 5px;
-        border: 1px solid var(--w-color-primary-50);
-        font-size: 14px;
-    }
-
-    figure {
-        margin: 0;
-    }
-
-    p {
-        font-size: 16px;
-        line-height: 1.7;
-        margin: 20px 0;
-    }
-
-    ul, ol {
-        line-height: 1.7;
-        font-size: 16px;
-        margin: 20px 0;
-
-        li {
-            margin-bottom: 10px;
-        }
-    }
-}