webcoreui 0.4.1 → 0.6.0

package/components/DataTable/DataTable.astro

@@ -0,0 +1,332 @@
+---
+/* eslint-disable max-lines */
+import type { DataTableProps, HeadingObject } from './datatable'
+
+import Button from '../Button/Button.astro'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+import Input from '../Input/Input.astro'
+import Pagination from '../Pagination/Pagination.astro'
+import Select from '../Select/Select.astro'
+
+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'
+
+interface Props extends DataTableProps {}
+
+const {
+    headings,
+    filterPlaceholder = 'Filter entries',
+    showFilterIcon,
+    noResultsLabel = 'No results.',
+    itemsPerPage,
+    subText,
+    columnToggleLabel = 'Columns',
+    pagination,
+    data,
+    hover,
+    striped,
+    offsetStripe,
+    compact,
+    maxHeight,
+    className,
+    id
+} = Astro.props
+
+const classes = [
+    styles.table,
+    hover && styles.hover,
+    striped && styles[`striped-${striped}s`],
+    offsetStripe && styles.offset,
+    compact && styles.compact,
+    maxHeight && styles.scroll
+]
+
+const footerClasses = [
+    styles.footer,
+    subText && styles.between
+]
+
+const getColumnName = (heading: HeadingObject | string | undefined) => {
+    if (!heading) {
+        return undefined
+    }
+
+    return ((heading as HeadingObject).name || heading as string).toLowerCase().replace(/\s/g, '')
+}
+
+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 => ({
+            name: (heading as HeadingObject).name,
+            value: (heading as HeadingObject).name.toLowerCase(),
+            icon: checkIcon
+        })) : []
+}]
+
+const columnFilterItems = headings?.filter(heading => typeof heading !== 'string')
+    .filter(heading => heading.filterable)
+    .map(heading => heading.name)
+    .map(heading => getColumnName(heading))
+
+const hasPagination = data?.length && itemsPerPage
+    ? data.length > itemsPerPage
+    : false
+---
+
+<section class={className} id={id}>
+    {(!!columnFilterItems?.length || showColumnToggle) && (
+        <div class={styles.filters}>
+            {!!columnFilterItems?.length && (
+                <Input
+                    type="search"
+                    placeholder={filterPlaceholder}
+                    data-id="w-data-table-filter"
+                    data-filter={columnFilterItems}
+                >
+                    <Fragment
+                        set:html={searchIcon}
+                        slot={showFilterIcon ? 'default' : null}
+                    />
+                </Input>
+            )}
+
+            {showColumnToggle && (
+                <Select
+                    name={`data-table-${id || crypto.randomUUID()}`}
+                    itemGroups={columnToggleItems}
+                    position="bottom-end"
+                    value={columnToggleLabel}
+                    updateValue={false}
+                />
+            )}
+        </div>
+    )}
+    <div
+        class:list={classes}
+        style={maxHeight ? `max-height:${maxHeight}` : undefined}
+    >
+        <table data-items-per-page={itemsPerPage} data-page={hasPagination && 1}>
+            {headings?.length && (
+                <thead>
+                    <tr>
+                        {headings.map(heading => (
+                            <th data-name={getColumnName(heading)}>
+                                <ConditionalWrapper condition={!!(heading as HeadingObject).sortable}>
+                                    <Button theme="flat" slot="wrapper" data-id="w-data-table-sort">
+                                        children
+                                        <Fragment set:html={orderIcon} />
+                                    </Button>
+                                    {(heading as HeadingObject).name || heading}
+                                </ConditionalWrapper>
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+            )}
+            <tbody>
+                {data?.map((row, index) => (
+                    <tr
+                        data-page={hasPagination ? Math.ceil((index + 1) / itemsPerPage!) : undefined}
+                        data-hidden={hasPagination && index >= itemsPerPage!}
+                    >
+                        {row.map((column, index) => (
+                            <td data-name={getColumnName(headings?.[index])}>
+                                <Fragment set:html={column} />
+                            </td>
+                        ))}
+                    </tr>
+                ))}
+                <slot />
+            </tbody>
+            {!!columnFilterItems?.length && (
+                <tfoot data-hidden="true">
+                    <tr>
+                        <td colspan={data?.[0].length} class={styles['no-results']}>{noResultsLabel}</td>
+                    </tr>
+                </tfoot>
+            )}
+        </table>
+    </div>
+    {(subText || hasPagination) && (
+        <div class:list={footerClasses}>
+            {subText && <span class={styles.subtext}>{subText}</span>}
+            {hasPagination && (
+                <Pagination
+                    {...pagination}
+                    totalPages={Math.ceil((data?.length || 0) / itemsPerPage!)}
+                    className="w-data-table-pagination"
+                />
+            )}
+        </div>
+    )}
+</section>
+
+<script>
+    import { debounce } from '../../utils/debounce'
+    import { dispatch, listen } from '../../utils/event'
+
+    const filters = document.querySelectorAll('[data-id="w-data-table-filter"]')
+    const sorts = document.querySelectorAll('[data-id="w-data-table-sort"]')
+
+    Array.from(filters).forEach(filter => {
+        filter.addEventListener('input', debounce((event: Event) => {
+            const target = event.target as HTMLInputElement
+            const filterableColumns = target.dataset.filter
+            const table = target.closest('section')?.querySelector('table') as HTMLTableElement
+            const pagination = target.closest('section')?.querySelector('.w-data-table-pagination') as HTMLUListElement
+            const noResults = table.querySelector('tfoot') as HTMLElement
+            const tableRows = Array.from(table.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>)
+
+            tableRows.forEach(row => {
+                const rowValue = Array.from(row.querySelectorAll('td'))
+                    .filter(td => filterableColumns?.includes(td.dataset.name || ''))
+                    .map(td => td.innerText)
+                    .join('')
+                    .toLowerCase()
+
+                if (rowValue.includes(target.value.toLowerCase())) {
+                    row.removeAttribute('data-hidden')
+                } else {
+                    row.dataset.hidden = 'true'
+                }
+            })
+
+            const filteredRows = Array.from(
+                table?.querySelectorAll('tbody tr:not([data-hidden])') as NodeListOf<HTMLTableRowElement>
+            )
+
+            if (!filteredRows.length) {
+                noResults.removeAttribute('data-hidden')
+            } else {
+                noResults.dataset.hidden = 'true'
+            }
+
+            if (table.dataset.itemsPerPage && filteredRows.length >= Number(table.dataset.itemsPerPage)) {
+                filteredRows.forEach((row, index) => {
+                    if (index >= Number(table.dataset.itemsPerPage)) {
+                        row.dataset.hidden = 'true'
+                    }
+                })
+            }
+
+            if (target.value) {
+                pagination.style.display = 'none'
+            } else {
+                pagination.style.display = 'flex'
+
+                tableRows.forEach(row => {
+                    if (row.dataset.page !== table.dataset.page) {
+                        row.dataset.hidden = 'true'
+                    } else {
+                        row.removeAttribute('data-hidden')
+                    }
+                })
+            }
+
+            dispatch('dataTableFilter', {
+                results: filteredRows,
+                numberOfResults: filteredRows.length
+            })
+        }, 400))
+    })
+
+    Array.from(sorts).forEach(sort => {
+        let sortOrder = 1
+
+        sort.addEventListener('click', event => {
+            const target = event.target as HTMLButtonElement
+            const sortBy = target.parentElement?.dataset.name
+            const table = target.closest('section')?.querySelector('table')
+            const tableBody = table?.querySelector('tbody')
+            const sortedTableRows = Array.from(
+                table?.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>
+            ).sort((a, b) => {
+                let aValue: string | number = (a.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
+                    ?.innerText.replace(/\s/g, '')
+                let bValue: string | number = (b.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
+                    ?.innerText.replace(/\s/g, '')
+
+                if (!isNaN(aValue as any)) {
+                    aValue = Number(aValue)
+                }
+
+                if (!isNaN(bValue as any)) {
+                    bValue = Number(bValue)
+                }
+
+                return aValue > bValue
+                    ? sortOrder * -1
+                    : sortOrder
+            }).map((row, index) => {
+                if (table?.dataset.page) {
+                    row.dataset.page = `${Math.ceil((index + 1) / Number(table.dataset.itemsPerPage))}`
+
+                    if (row.dataset.page !== table.dataset.page) {
+                        row.dataset.hidden = 'true'
+                    } else {
+                        row.removeAttribute('data-hidden')
+                    }
+                }
+
+                return row
+            })
+
+            tableBody?.replaceChildren(...sortedTableRows)
+
+            sortOrder = sortOrder === 1 ? -1 : 1
+        })
+    })
+
+    listen('selectOnChange', event => {
+        const eventName = event.name.toLowerCase().replace(/\s/g, '')
+        const table = (document.querySelector(`[data-id="w-select-${event.select}"]`)
+            ?.closest('section') as HTMLElement)
+            .querySelector('table') as HTMLTableElement
+
+        const affectedTableCells = Array.from(table.querySelectorAll(`[data-name=${eventName}]`)) as HTMLElement[]
+
+        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
+
+        svgIcon.style.opacity = svgIcon.style.opacity === '0'
+            ? '1'
+            : '0'
+
+        if (svgIcon.style.opacity === '0') {
+            affectedTableCells.forEach(cell => cell.dataset.hidden = 'true')
+        } else {
+            affectedTableCells.forEach(cell => cell.removeAttribute('data-hidden'))
+        }
+    })
+
+    listen('paginate', event => {
+        const table = event.target
+            .closest('section')
+            .querySelector('table')
+
+        if (!table) {
+            return
+        }
+
+        const tableRows = Array.from(table.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>)
+
+        table.dataset.page = event.page
+
+        tableRows.forEach(row => {
+            if (Number(row.dataset.page) === event.page) {
+                row.removeAttribute('data-hidden')
+            } else {
+                row.dataset.hidden = 'true'
+            }
+        })
+    })
+</script>

package/components/DataTable/DataTable.svelte

@@ -0,0 +1,272 @@
+<script lang="ts">
+    import type { HeadingObject, SvelteDataTableProps } from './datatable'
+
+    import Button from '../Button/Button.svelte'
+    import Input from '../Input/Input.svelte'
+    import Pagination from '../Pagination/Pagination.svelte'
+    import Select from '../Select/Select.svelte'
+
+    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'
+
+    export let headings: SvelteDataTableProps['headings'] = []
+    export let filterPlaceholder: SvelteDataTableProps['filterPlaceholder'] = 'Filter entries'
+    export let showFilterIcon: SvelteDataTableProps['showFilterIcon'] = false
+    export let noResultsLabel: SvelteDataTableProps['noResultsLabel'] = 'No results.'
+    export let itemsPerPage: SvelteDataTableProps['itemsPerPage'] = null
+    export let subText: SvelteDataTableProps['subText'] = ''
+    export let columnToggleLabel: SvelteDataTableProps['columnToggleLabel'] = 'Columns'
+    export let pagination: SvelteDataTableProps['pagination'] = {}
+    export let data: SvelteDataTableProps['data'] = []
+    export let hover: SvelteDataTableProps['hover'] = false
+    export let striped: SvelteDataTableProps['striped'] = null
+    export let offsetStripe: SvelteDataTableProps['offsetStripe'] = false
+    export let compact: SvelteDataTableProps['compact'] = false
+    export let maxHeight: SvelteDataTableProps['maxHeight'] = ''
+    export let className: SvelteDataTableProps['className'] = ''
+    export let id: SvelteDataTableProps['id'] = ''
+    export let onFilter: SvelteDataTableProps['onFilter'] = () => {}
+
+    let filteredData: any = data
+    let toggledData: any = filteredData
+    let filteredHeadings: any = headings
+    let page: number = 1
+    let hasActiveFilter: boolean = false
+    let sortOrder = 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 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
+
+        hasActiveFilter = !!target.value
+
+        filteredData = 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
+
+        svgIcon.style.opacity = svgIcon.style.opacity === '0'
+            ? '1'
+            : '0'
+
+        if (svgIcon.style.opacity === '0') {
+            filteredData = (hasActiveFilter ? data : filteredData)?.map((row: string[]) => {
+                return row.map((column, index) => index === Number(event.value) ? null : column)
+            })
+
+            filteredHeadings = filteredHeadings.map((heading: HeadingObject | string) => {
+                return ((heading as HeadingObject)?.name || heading) === event.name ? null : heading
+            })
+        } else {
+            filteredData = (hasActiveFilter ? data : filteredData)?.map((row: string[], x: number) => {
+                return row.map((column, y) => y === Number(event.value) ? data?.[x][y] : column)
+            })
+
+            filteredHeadings = filteredHeadings.map((heading: HeadingObject | string, index: number) => {
+                return ((headings?.[index] as HeadingObject)?.name || headings?.[index]) === event.name
+                    ? headings?.[index]
+                    : heading
+            })
+        }
+
+        hasActiveFilter = false
+        toggledData = filteredData
+    }
+
+    const sort = (index: number) => {
+        filteredData = 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
+        })
+
+        sortOrder = sortOrder === 1 ? -1 : 1
+    }
+
+    $: 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
+    }
+</script>
+
+<section class={className || null} id={id || null}>
+    {#if columnFilterIndexes?.length || showColumnToggle}
+        <div class={styles.filters}>
+            {#if columnFilterIndexes?.length}
+                {#if showFilterIcon}
+                    <Input
+                        type="search"
+                        placeholder={filterPlaceholder}
+                        onInput={filter}
+                    >
+                        {@html searchIcon}
+                    </Input>
+                {:else}
+                    <Input
+                        type="search"
+                        placeholder={filterPlaceholder}
+                        onInput={filter}
+                    />
+                {/if}
+            {/if}
+            {#if showColumnToggle}
+                <Select
+                    name={`data-table-${id || crypto.randomUUID()}`}
+                    itemGroups={columnToggleItems}
+                    position="bottom-end"
+                    value={columnToggleLabel}
+                    onChange={toggleColumns}
+                    updateValue={false}
+                />
+            {/if}
+        </div>
+    {/if}
+
+    <div
+        class={classes}
+        style={maxHeight ? `max-height:${maxHeight}` : undefined}
+    >
+        <table>
+            {#if filteredHeadings?.length}
+                <thead>
+                    <tr>
+                        {#each filteredHeadings as heading, index}
+                            {#if heading}
+                                <th>
+                                    {#if heading.sortable}
+                                        <Button theme="flat" slot="wrapper" onClick={() => sort(index)}>
+                                            {heading.name || heading}
+                                            {@html orderIcon}
+                                        </Button>
+                                    {:else}
+                                        {heading.name || heading}
+                                    {/if}
+                                </th>
+                            {/if}
+                        {/each}
+                    </tr>
+                </thead>
+            {/if}
+
+            <tbody>
+                {#if filteredData?.length}
+                    {#each filteredData as row, index}
+                        <tr data-hidden={isNextPage(index)}>
+                            {#each row as column}
+                                {#if column}
+                                    <td>
+                                        {@html column}
+                                    </td>
+                                {/if}
+                            {/each}
+                        </tr>
+                    {/each}
+                {/if}
+                <slot />
+            </tbody>
+            {#if columnFilterIndexes?.length && !filteredData.length}
+                <tfoot>
+                    <tr>
+                        <td colspan={data?.[0].length} class={styles['no-results']}>
+                            {noResultsLabel}
+                        </td>
+                    </tr>
+                </tfoot>
+            {/if}
+        </table>
+    </div>
+    {#if subText || hasPagination}
+        <div class={footerClasses}>
+            {#if subText}
+                <span class={styles.subtext}>{subText}</span>
+            {/if}
+            {#if hasPagination && itemsPerPage && !hasActiveFilter}
+                <Pagination
+                    {...pagination}
+                    totalPages={Math.ceil((data?.length || 0) / itemsPerPage)}
+                    currentPage={page}
+                    onChange={event => page = event.page}
+                />
+            {/if}
+        </div>
+    {/if}
+</section>