webcoreui 0.4.1 → 0.5.0

package/components/Pagination/Pagination.astro

@@ -0,0 +1,189 @@
+---
+import type { PaginationProps } from './pagination'
+
+import Button from '../Button/Button.astro'
+
+import ArrowLeft from '../../icons/arrow-left.svg?raw'
+import ArrowRight from '../../icons/arrow-right.svg?raw'
+
+import styles from './pagination.module.scss'
+
+interface Props extends PaginationProps {}
+
+const {
+    type,
+    showChevrons,
+    showDots,
+    disablePrevious,
+    disableNext,
+    previousLink,
+    nextLink,
+    previousPageLabel = 'Previous',
+    nextPageLabel = 'Next',
+    pages,
+    theme = 'outline',
+    totalPages,
+    currentPage,
+    className
+} = Astro.props
+
+const classes = [
+    styles.pagination,
+    theme !== 'outline' && (theme === null ? styles.primary : styles[theme]),
+    type === 'dots' && styles.dots,
+    className
+]
+
+const calculatedCurrentPage = currentPage
+    || (pages?.findIndex(page => page.active) || -1) + 1
+    || 1
+
+const calculatedTotalPages = totalPages
+    || pages?.length
+    || 0
+
+const generatedPages = pages?.length
+    ? pages
+    : Array(totalPages || 0).fill(0).map((_, index) => ({
+        ...(index === 0 && { active: true }),
+        label: index + 1
+    }))
+---
+
+<ul
+    class:list={classes}
+    data-id="w-pagination"
+    data-total-pages={calculatedTotalPages}
+    data-current-page={calculatedCurrentPage}
+>
+    {type === 'dots' ? (
+        <Fragment>
+            {generatedPages?.map(page => (
+                <li>
+                    <button
+                        data-active={page.active ? 'true' : undefined}
+                        data-page={page.label}
+                    />
+                </li>
+            ))}
+        </Fragment>
+    ) : (
+        <li>
+            <Button
+                disabled={disablePrevious || (calculatedCurrentPage === 1 && !previousLink)}
+                href={!disablePrevious ? previousLink : undefined}
+                theme={theme}
+                data-page="prev"
+            >
+                {(showChevrons || type === 'arrows') && <Fragment set:html={ArrowLeft} />}
+                {type !== 'arrows' && previousPageLabel}
+            </Button>
+        </li>
+        <Fragment>
+            {type !== 'arrows' && pages?.slice(0, calculatedTotalPages)?.map((page, index) =>
+                <li>
+                    <Button
+                        href={page.link}
+                        data-active={calculatedCurrentPage === index + 1 ? 'true' : null}
+                        theme={theme}
+                        data-page={page.label}
+                    >
+                        {page.label}
+                    </Button>
+                </li>
+            )}
+            {showDots && (
+                <li>
+                    <Button theme={theme} className={styles.inactive}>
+                        ...
+                    </Button>
+                </li>
+            )}
+        </Fragment>
+        <li>
+            <Button
+                disabled={disableNext || (calculatedCurrentPage === calculatedTotalPages && !nextLink)}
+                href={!disableNext ? nextLink : undefined}
+                theme={theme}
+                data-page="next"
+            >
+                {type !== 'arrows' && nextPageLabel}
+                {(showChevrons || type === 'arrows') && <Fragment set:html={ArrowRight} />}
+            </Button>
+        </li>
+    )}
+</ul>
+
+<script>
+    import { dispatch } from '../../utils/event'
+
+    const getCurrentPage = (pageElements: Element[], current: number, next: string) => {
+        if (next === 'prev') {
+            return current - 1
+        }
+
+        if (next === 'next') {
+            return current + 1
+        }
+
+        return pageElements?.findIndex(child => {
+            const button = child.children[0] as HTMLButtonElement
+
+            return button.dataset.page === next
+        }) + 1
+    }
+
+    const paginations = document.querySelectorAll('[data-id="w-pagination"]')
+
+    Array.from(paginations).forEach(element => {
+        const pagination = element as HTMLUListElement
+        const totalPages = Number(pagination.dataset.totalPages)
+        let currentPage = Number(pagination.dataset.currentPage)
+
+        element.addEventListener('click', event => {
+            const target = event.target as HTMLButtonElement
+            const navigated = target.nodeName === 'BUTTON'
+                && !target.dataset.active
+                && !target.disabled
+
+            if (navigated) {
+                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 pageElements = Array
+                    .from(pagination.children)
+                    .filter(child => {
+                        const button = child.children[0] as HTMLButtonElement
+
+                        return button.dataset.page && !['prev', 'next'].includes(button.dataset.page)
+                    })
+
+                currentPage = getCurrentPage(pageElements, currentPage, target.dataset.page || '')
+                currentPageButton?.removeAttribute('data-active')
+
+                pagination.dataset.currentPage = String(currentPage)
+
+                const activeButton = pageElements
+                    .find((_, index) => index + 1 === currentPage)
+                    ?.children[0] as HTMLButtonElement
+
+                if (activeButton) {
+                    activeButton.dataset.active = 'true'
+                }
+
+                if (prevPageButton && nextPageButton) {
+                    prevPageButton.disabled = currentPage === 1
+                    nextPageButton.disabled = currentPage === totalPages
+                }
+
+                dispatch('paginate', {
+                    page: currentPage,
+                    ...(activeButton?.dataset.page && { label: activeButton?.dataset.page }),
+                    target: element,
+                    trusted: event.isTrusted
+                })
+            }
+        })
+    })
+</script>

package/components/Pagination/Pagination.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+    import type { SveltePaginationProps } from './pagination'
+
+    import Button from '../Button/Button.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import ArrowLeft from '../../icons/arrow-left.svg?raw'
+    import ArrowRight from '../../icons/arrow-right.svg?raw'
+
+    import styles from './pagination.module.scss'
+
+    export let type: SveltePaginationProps['type'] = null
+    export let showChevrons: SveltePaginationProps['showChevrons'] = false
+    export let showDots: SveltePaginationProps['showDots'] = false
+    export let disablePrevious: SveltePaginationProps['disablePrevious'] = false
+    export let disableNext: SveltePaginationProps['disableNext'] = false
+    export let previousLink: SveltePaginationProps['previousLink'] = ''
+    export let nextLink: SveltePaginationProps['nextLink'] = ''
+    export let previousPageLabel: SveltePaginationProps['previousPageLabel'] = 'Previous'
+    export let nextPageLabel: SveltePaginationProps['nextPageLabel'] = 'Next'
+    export let pages: SveltePaginationProps['pages'] = []
+    export let theme: SveltePaginationProps['theme'] = 'outline'
+    export let totalPages: SveltePaginationProps['totalPages'] = null
+    export let currentPage: SveltePaginationProps['currentPage'] = null
+    export let className: SveltePaginationProps['className'] = ''
+    export let onChange: SveltePaginationProps['onChange'] = () => {}
+
+    const classes = classNames([
+        styles.pagination,
+        theme !== 'outline' && (theme === null || theme === undefined ? styles.primary : styles[theme]),
+        type === 'dots' && styles.dots,
+        className
+    ])
+
+    const calculatedTotalPages = totalPages
+        || pages?.length
+        || 0
+
+    const generatedPages = pages?.length
+        ? pages
+        : Array(totalPages || 0).fill(0).map((_, index) => ({
+            ...(index === 0 && { active: true }),
+            label: index + 1
+        }))
+
+    const paginate = (to: string | number) => {
+        if (to === 'prev') {
+            calculatedCurrentPage = calculatedCurrentPage - 1
+        } else if (to === 'next') {
+            calculatedCurrentPage = calculatedCurrentPage + 1
+        } else {
+            calculatedCurrentPage = to as number
+        }
+
+        const label = pages?.[calculatedCurrentPage - 1]?.label
+
+        onChange?.({
+            page: calculatedCurrentPage,
+            ...(label && { label })
+        })
+    }
+
+    $: calculatedCurrentPage = currentPage
+        || (pages?.findIndex(page => page.active) || -1) + 1
+        || 1
+</script>
+
+<ul class={classes}>
+    {#if type === 'dots' && generatedPages?.length}
+        {#each generatedPages as _, index}
+            <li>
+                <button
+                    data-active={calculatedCurrentPage === index + 1 ? 'true' : null}
+                    on:click={calculatedCurrentPage !== index + 1
+                        ? () => paginate(index + 1)
+                        : null
+                    }
+                />
+            </li>
+        {/each}
+    {:else}
+        <li>
+            <Button
+                disabled={(disablePrevious || (calculatedCurrentPage === 1 && !previousLink)) ? true : null}
+                href={!disablePrevious ? previousLink : undefined}
+                theme={theme}
+                onClick={!(disablePrevious || (calculatedCurrentPage === 1 && !previousLink))
+                    ? () => paginate('prev')
+                    : null
+                }
+            >
+                {#if showChevrons || type === 'arrows'}
+                    {@html ArrowLeft}
+                {/if}
+                {#if type !== 'arrows'}
+                    {previousPageLabel}
+                {/if}
+            </Button>
+        </li>
+        {#if type !== 'arrows' && pages?.length}
+            {#each pages?.slice(0, calculatedTotalPages) as page, index}
+                <li>
+                    <Button
+                        href={page.link}
+                        data-active={calculatedCurrentPage === index + 1 ? 'true' : null}
+                        theme={theme}
+                        onClick={calculatedCurrentPage !== index + 1
+                            ? () => paginate(index + 1)
+                            : null
+                        }
+                    >
+                        {page.label}
+                    </Button>
+                </li>
+            {/each}
+        {/if}
+        {#if showDots}
+            <li>
+                <Button theme={theme} className={styles.inactive}>
+                    ...
+                </Button>
+            </li>
+        {/if}
+        <li>
+            <Button
+                disabled={(disableNext || calculatedCurrentPage === calculatedTotalPages) ? true : null}
+                href={!disableNext ? nextLink : undefined}
+                theme={theme}
+                onClick={!disableNext
+                    ? () => paginate('next')
+                    : null
+                }
+            >
+                {#if type !== 'arrows'}
+                    {nextPageLabel}
+                {/if}
+                {#if showChevrons || type === 'arrows'}
+                    {@html ArrowRight}
+                {/if}
+            </Button>
+        </li>
+    {/if}
+</ul>

package/components/Pagination/Pagination.tsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from 'react'
+import type { ReactPaginationProps } from './pagination'
+
+import Button from '../Button/Button.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import ArrowLeft from '../../icons/arrow-left.svg?raw'
+import ArrowRight from '../../icons/arrow-right.svg?raw'
+
+import styles from './pagination.module.scss'
+
+// eslint-disable-next-line complexity
+const Pagination = ({
+    type,
+    showChevrons,
+    showDots,
+    disablePrevious,
+    disableNext,
+    previousLink,
+    nextLink,
+    previousPageLabel = 'Previous',
+    nextPageLabel = 'Next',
+    pages,
+    theme = 'outline',
+    totalPages,
+    currentPage,
+    onChange,
+    className
+}: ReactPaginationProps) => {
+    const [calculatedCurrentPage, setCalculatedCurrentPage] = useState(
+        currentPage
+            || (pages?.findIndex(page => page.active) || -1) + 1
+            || 1
+    )
+
+    const classes = classNames([
+        styles.pagination,
+        theme !== 'outline' && (theme === null || theme === undefined ? styles.primary : styles[theme]),
+        type === 'dots' && styles.dots,
+        className
+    ])
+
+    const calculatedTotalPages = totalPages
+        || pages?.length
+        || 0
+
+    const generatedPages = pages?.length
+        ? pages
+        : Array(totalPages || 0).fill(0).map((_, index) => ({
+            ...(index === 0 && { active: true }),
+            label: index + 1
+        }))
+
+    const paginate = (to: string | number) => {
+        let currentPage = calculatedCurrentPage
+
+        if (to === 'prev') {
+            currentPage = calculatedCurrentPage - 1
+        } else if (to === 'next') {
+            currentPage = calculatedCurrentPage + 1
+        } else {
+            currentPage = to as number
+        }
+
+        const label = pages?.[currentPage - 1]?.label
+
+        setCalculatedCurrentPage(currentPage)
+
+        onChange?.({
+            page: currentPage,
+            ...(label && { label })
+        })
+    }
+
+    useEffect(() => {
+        if (currentPage) {
+            setCalculatedCurrentPage(currentPage)
+        }
+    }, [currentPage])
+
+    return (
+        <ul className={classes}>
+            {type === 'dots' ? (
+                <React.Fragment>
+                    {generatedPages?.map((_, index) => (
+                        <li key={index}>
+                            <button
+                                data-active={calculatedCurrentPage === index + 1 ? 'true' : null}
+                                onClick={calculatedCurrentPage !== index + 1
+                                    ? () => paginate(index + 1)
+                                    : undefined
+                                }
+                            />
+                        </li>
+                    ))}
+                </React.Fragment>
+            ) : (
+                <React.Fragment>
+                    <li>
+                        <Button
+                            disabled={disablePrevious || (calculatedCurrentPage === 1 && !previousLink)}
+                            href={!disablePrevious ? previousLink : undefined}
+                            theme={theme}
+                            onClick={!(disablePrevious || (calculatedCurrentPage === 1 && !previousLink))
+                                ? () => paginate('prev')
+                                : null
+                            }
+                        >
+                            {(showChevrons || type === 'arrows') && (
+                                <span dangerouslySetInnerHTML={{ __html: ArrowLeft }} />
+                            )}
+                            {type !== 'arrows' && previousPageLabel}
+                        </Button>
+                    </li>
+                    <React.Fragment>
+                        {type !== 'arrows' && pages?.slice(0, calculatedTotalPages)?.map((page, index) =>
+                            <li key={index}>
+                                <Button
+                                    href={page.link}
+                                    data-active={calculatedCurrentPage === index + 1 ? 'true' : null}
+                                    theme={theme}
+                                    onClick={calculatedCurrentPage !== index + 1
+                                        ? () => paginate(index + 1)
+                                        : null
+                                    }
+                                >
+                                    {page.label}
+                                </Button>
+                            </li>
+                        )}
+                        {showDots && (
+                            <li>
+                                <Button theme={theme} className={styles.inactive}>
+                                    ...
+                                </Button>
+                            </li>
+                        )}
+                    </React.Fragment>
+                    <li>
+                        <Button
+                            disabled={disableNext || calculatedCurrentPage === calculatedTotalPages}
+                            href={!disableNext ? nextLink : undefined}
+                            theme={theme}
+                            onClick={!disableNext
+                                ? () => paginate('next')
+                                : null
+                            }
+                        >
+                            {type !== 'arrows' && nextPageLabel}
+                            {(showChevrons || type === 'arrows') && (
+                                <span dangerouslySetInnerHTML={{ __html: ArrowRight }} />
+                            )}
+                        </Button>
+                    </li>
+                </React.Fragment>
+            )}
+        </ul>
+    )
+}
+
+export default Pagination

package/components/Pagination/pagination.module.scss

@@ -0,0 +1,49 @@
+@import '../../scss/config.scss';
+
+.pagination {
+    @include layout(flex, xs, wrap);
+    @include spacing(0);
+
+    list-style-type: none;
+
+    &.primary [data-active] {
+        @include typography(primary-70);
+        @include background(primary-20);
+    }
+
+    &.dots button {
+        @include transition();
+        @include border-radius(max);
+        @include size(12px);
+        @include border(0);
+        @include spacing(p0);
+        @include background(primary-30);
+
+        cursor: pointer;
+
+        &[data-active] {
+            @include background(primary);
+            @include size(w20px);
+            @include border-radius(lg);
+        }
+    }
+
+    li {
+        @include spacing(m0);
+    }
+
+    svg {
+        @include size(10px);
+        pointer-events: none;
+    }
+
+    [data-active] {
+        @include typography(primary);
+        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
+    }
+
+    .inactive {
+        pointer-events: none;
+        box-shadow: none;
+    }
+}

package/components/Pagination/pagination.ts

@@ -0,0 +1,35 @@
+import type { ButtonProps } from '../Button/button'
+
+export type PaginationEventType = {
+    page: number
+    label?: string | number | undefined
+}
+
+export type PaginationProps = {
+    type?: 'arrows' | 'dots' | null
+    showChevrons?: boolean
+    showDots?: boolean
+    disablePrevious?: boolean
+    disableNext?: boolean
+    previousLink?: string
+    nextLink?: string
+    previousPageLabel?: string
+    nextPageLabel?: string
+    className?: string
+    theme?: ButtonProps['theme']
+    totalPages?: number | null
+    currentPage?: number | null
+    pages?: {
+        label: number | string
+        active?: boolean
+        link?: string
+    }[]
+}
+
+export type SveltePaginationProps = {
+    onChange?: (event: PaginationEventType) => void
+} & PaginationProps
+
+export type ReactPaginationProps = {
+    onChange?: (event: PaginationEventType) => void
+} & PaginationProps

package/components/Select/Select.astro

@@ -21,8 +21,9 @@ const {
     label,
     subText,
     disabled,
-    className,
     position,
+    updateValue = true,
+    className,
     ...rest
 } = Astro.props
 
@@ -42,6 +43,7 @@ const classes = classNames([
     label={label}
     subText={subText}
     data-id={`w-select-${name}`}
+    data-no-update={!updateValue ? 'true' : undefined}
     data-position={position}
     labelClassName={classes}
 >
@@ -125,11 +127,13 @@ const classes = classNames([
 
         closePopover(`[data-id="${popoverId}"]`)
 
-        selectElement.value = name
+        if (!selectElement.dataset.noUpdate) {
+            selectElement.value = name
+        }
 
         dispatch('selectOnChange', {
-            select: selectName,
-            ...payload
+            ...payload,
+            select: selectName
         })
     })
 </script>

package/components/Select/Select.svelte

@@ -16,14 +16,17 @@
 
     import styles from './select.module.scss'
 
+    import type { ListEventType } from '../List/list'
+
     export let name: SvelteSelectProps['name'] = ''
     export let value: SvelteSelectProps['value'] = ''
     export let placeholder: SvelteSelectProps['placeholder'] = ''
     export let label: SvelteSelectProps['label'] = ''
     export let subText: SvelteSelectProps['subText'] = ''
     export let disabled: SvelteSelectProps['disabled'] = false
-    export let className: SvelteSelectProps['className'] = ''
+    export let updateValue: SvelteSelectProps['updateValue'] = true
     export let position: SvelteSelectProps['position'] = 'bottom'
+    export let className: SvelteSelectProps['className'] = ''
     export let onChange: SvelteSelectProps['onChange'] = () => {}
 
     let popoverInstance: any
@@ -39,18 +42,22 @@
         styles.popover
     ])
 
-    const select = (payload: any) => {
+    const select = (event: ListEventType) => {
         closePopover(`.w-options-${name}`)
 
-        value = payload.name
+        if (updateValue) {
+            value = event.name
+        }
 
         onChange?.({
-            select: name,
-            ...payload
+            ...event,
+            select: name
         })
     }
 
     onMount(() => {
+        let observer: ResizeObserver | undefined
+
         if (position === 'modal') {
             modal({
                 trigger: `.w-select-${name}`,
@@ -73,7 +80,8 @@
                 dialogElement.style.width = `${width}px`
             })
 
-            new ResizeObserver(() => resize()).observe(document.body)
+            observer = new ResizeObserver(() => resize())
+            observer.observe(document.body)
 
             popoverInstance = popover({
                 trigger: `.w-select-${name}`,
@@ -91,6 +99,7 @@
 
         return () => {
             popoverInstance?.remove()
+            observer?.unobserve(document.body)
         }
     })
 </script>