webcoreui 0.4.1 → 0.6.0

package/components/Modal/modal.module.scss

@@ -28,28 +28,11 @@
         }
     }
 
-    .close {
-        @include position(absolute, t10px, r10px);
-        @include spacing(p-xs);
-
-        svg {
-            @include size(10px);
-        }
-    }
-
-    .title {
-        @include typography(lg);
-        @include spacing(mb-xs);
-        @include layout(flex, v-center, xs);
-
-        svg {
-            @include size(20px);
-        }
-    }
-
-    .subTitle {
-        @include typography(primary-20);
-        @include spacing(mb-xs);
+    &.transparent {
+        @include border(0);
+        @include spacing(p0);
+        @include size('wfit-content');
+        @include background(transparent);
     }
 
     &.info {
@@ -83,6 +66,30 @@
             @include typography(alert);
         }
     }
+
+    .close {
+        @include position(absolute, t10px, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+
+    .title {
+        @include typography(lg);
+        @include spacing(mb-xs);
+        @include layout(flex, v-center, xs);
+
+        svg {
+            @include size(20px);
+        }
+    }
+
+    .subTitle {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
 }
 
 .overlay {

package/components/Modal/modal.ts

@@ -4,6 +4,7 @@ export type ModalProps = {
     showCloseIcon?: boolean
     closeOnEsc?: boolean
     closeOnOverlay?: boolean
+    transparent?: boolean
     id?: string
     className?: string
     theme?: 'info'

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/Rating/rating.ts

@@ -1,3 +1,5 @@
+import type { ButtonProps } from '../Button/button'
+
 export type RatingProps = {
     score: number
     total?: number
@@ -8,7 +10,7 @@ export type RatingProps = {
     reviewCount?: number
     reviewText?: string
     reviewLink?: string
-    reviewTarget?: string
+    reviewTarget?: ButtonProps['target']
     color?: string
     emptyColor?: string
     size?: number