webcoreui 0.9.0 → 0.10.0

package/components/Pagination/Pagination.astro

@@ -3,8 +3,8 @@ 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 ChevronLeft from '../../icons/chevron-left.svg?raw'
+import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './pagination.module.scss'
 
@@ -58,11 +58,12 @@ const generatedPages = pages?.length
 >
     {type === 'dots' ? (
         <Fragment>
-            {generatedPages?.map(page => (
+            {generatedPages?.map((page, index) => (
                 <li>
                     <button
                         data-active={page.active ? 'true' : undefined}
                         data-page={page.label}
+                        aria-label={`page ${index + 1}`}
                     />
                 </li>
             ))}
@@ -75,7 +76,7 @@ const generatedPages = pages?.length
                 theme={theme}
                 data-page="prev"
             >
-                {(showChevrons || type === 'arrows') && <Fragment set:html={ArrowLeft} />}
+                {(showChevrons || type === 'arrows') && <Fragment set:html={ChevronLeft} />}
                 {type !== 'arrows' && previousPageLabel}
             </Button>
         </li>
@@ -108,7 +109,7 @@ const generatedPages = pages?.length
                 data-page="next"
             >
                 {type !== 'arrows' && nextPageLabel}
-                {(showChevrons || type === 'arrows') && <Fragment set:html={ArrowRight} />}
+                {(showChevrons || type === 'arrows') && <Fragment set:html={ChevronRight} />}
             </Button>
         </li>
     )}
@@ -117,75 +118,80 @@ const generatedPages = pages?.length
 <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)
+    const addEventListeners = () => {
+        const getCurrentPage = (pageElements: Element[], current: number, next: string) => {
+            if (next === 'prev') {
+                return current - 1
+            }
 
-        element.addEventListener('click', event => {
-            const target = event.target as HTMLButtonElement
-            const navigated = target.nodeName === 'BUTTON'
-                && !target.dataset.active
-                && !target.disabled
+            if (next === 'next') {
+                return current + 1
+            }
 
-            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 previousPage = currentPage
+            return pageElements?.findIndex(child => {
+                const button = child.children[0] as HTMLButtonElement
 
-                const pageElements = Array
-                    .from(pagination.children)
-                    .filter(child => {
-                        const button = child.children[0] as HTMLButtonElement
+                return button.dataset.page === next
+            }) + 1
+        }
 
-                        return button.dataset.page && !['prev', 'next'].includes(button.dataset.page)
+        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 previousPage = currentPage
+
+                    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,
+                        direction: previousPage > currentPage ? 'prev' : 'next',
+                        ...(activeButton?.dataset.page && { label: activeButton?.dataset.page }),
+                        target: element,
+                        trusted: event.isTrusted
                     })
-
-                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,
-                    direction: previousPage > currentPage ? 'prev' : 'next',
-                    ...(activeButton?.dataset.page && { label: activeButton?.dataset.page }),
-                    target: element,
-                    trusted: event.isTrusted
-                })
-            }
+            })
         })
-    })
+    }
+
+    document.addEventListener('astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Pagination/Pagination.svelte

@@ -5,26 +5,28 @@
 
     import { classNames } from '../../utils/classNames'
 
-    import ArrowLeft from '../../icons/arrow-left.svg?raw'
-    import ArrowRight from '../../icons/arrow-right.svg?raw'
+    import ChevronLeft from '../../icons/chevron-left.svg?raw'
+    import ChevronRight from '../../icons/chevron-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 {
+        type,
+        showChevrons,
+        showDots,
+        disablePrevious,
+        disableNext,
+        previousLink,
+        nextLink,
+        previousPageLabel = 'Previous',
+        nextPageLabel = 'Next',
+        pages,
+        theme = 'outline',
+        totalPages,
+        currentPage,
+        onChange,
+        className
+    }: SveltePaginationProps = $props()
 
     const classes = classNames([
         styles.pagination,
@@ -64,9 +66,11 @@
         })
     }
 
-    $: calculatedCurrentPage = currentPage
-        || (pages?.findIndex(page => page.active) || -1) + 1
-        || 1
+    let calculatedCurrentPage = $state(
+        currentPage
+            || (pages?.findIndex(page => page.active) || -1) + 1
+            || 1
+    )
 </script>
 
 <ul class={classes}>
@@ -76,11 +80,10 @@
                 <button
                     aria-label={`page ${index + 1}`}
                     data-active={calculatedCurrentPage === index + 1 ? 'true' : null}
-                    on:click={calculatedCurrentPage !== index + 1
+                    onclick={calculatedCurrentPage !== index + 1
                         ? () => paginate(index + 1)
-                        : null
-                    }
-                />
+                        : null}
+                ></button>
             </li>
         {/each}
     {:else}
@@ -95,7 +98,7 @@
                 }
             >
                 {#if showChevrons || type === 'arrows'}
-                    {@html ArrowLeft}
+                    {@html ChevronLeft}
                 {/if}
                 {#if type !== 'arrows'}
                     {previousPageLabel}
@@ -140,7 +143,7 @@
                     {nextPageLabel}
                 {/if}
                 {#if showChevrons || type === 'arrows'}
-                    {@html ArrowRight}
+                    {@html ChevronRight}
                 {/if}
             </Button>
         </li>

package/components/Pagination/Pagination.tsx

@@ -5,8 +5,8 @@ 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 ChevronLeft from '../../icons/chevron-left.svg?raw'
+import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './pagination.module.scss'
 
@@ -88,6 +88,7 @@ const Pagination = ({
                     {generatedPages?.map((_, index) => (
                         <li key={index}>
                             <button
+                                aria-label={`page ${index + 1}`}
                                 data-active={calculatedCurrentPage === index + 1 ? 'true' : null}
                                 onClick={calculatedCurrentPage !== index + 1
                                     ? () => paginate(index + 1)
@@ -110,7 +111,7 @@ const Pagination = ({
                             }
                         >
                             {(showChevrons || type === 'arrows') && (
-                                <span dangerouslySetInnerHTML={{ __html: ArrowLeft }} />
+                                <span dangerouslySetInnerHTML={{ __html: ChevronLeft }} />
                             )}
                             {type !== 'arrows' && previousPageLabel}
                         </Button>
@@ -151,7 +152,7 @@ const Pagination = ({
                         >
                             {type !== 'arrows' && nextPageLabel}
                             {(showChevrons || type === 'arrows') && (
-                                <span dangerouslySetInnerHTML={{ __html: ArrowRight }} />
+                                <span dangerouslySetInnerHTML={{ __html: ChevronRight }} />
                             )}
                         </Button>
                     </li>

package/components/Pagination/pagination.module.scss

@@ -35,6 +35,10 @@
     svg {
         @include size(10px);
         pointer-events: none;
+
+        path {
+            stroke-width: 3px;
+        }
     }
 
     [data-active] {

package/components/Popover/Popover.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-    import type { PopoverProps } from './popover'
+    import type { SveltePopoverProps } from './popover'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './popover.module.scss'
 
-    export let id: PopoverProps['id'] = ''
-    export let className: PopoverProps['className'] = ''
+    const {
+        id,
+        className,
+        children,
+        ...rest
+    }: SveltePopoverProps = $props()
 
     const classes = classNames([
         styles.popover,
@@ -16,8 +20,8 @@
 
 <dialog
     class={classes}
-    id={id || null}
-    {...$$restProps}
+    id={id}
+    {...rest}
 >
-    <slot />
+    {@render children?.()}
 </dialog>

package/components/Popover/popover.ts

@@ -1,9 +1,15 @@
+import type { Snippet } from 'svelte'
+
 export type PopoverProps = {
     id?: string
     className?: string
     [key: string]: any
 }
 
+export type SveltePopoverProps = {
+    children: Snippet
+} & PopoverProps
+
 export type ReactPopoverProps = {
     isInteractive?: boolean
     children?: React.ReactNode

package/components/Progress/Progress.svelte

@@ -5,16 +5,18 @@
 
     import styles from './progress.module.scss'
 
-    export let value: ProgressProps['value'] = 0
-    export let size: ProgressProps['size'] = null
-    export let label: ProgressProps['label'] = false
-    export let color: ProgressProps['color'] = ''
-    export let background: ProgressProps['background'] = ''
-    export let square: ProgressProps['square'] = false
-    export let striped: ProgressProps['striped'] = false
-    export let stripeLight: ProgressProps['stripeLight'] = ''
-    export let stripeDark: ProgressProps['stripeDark'] = ''
-    export let className: ProgressProps['className'] = ''
+    const {
+        value,
+        size,
+        label,
+        color,
+        background,
+        square,
+        striped,
+        stripeLight,
+        stripeDark,
+        className
+    }: ProgressProps = $props()
 
     const classes = classNames([
         styles['w-progress'],

package/components/Progress/progress.ts

@@ -1,6 +1,6 @@
 export type ProgressProps = {
     value: number
-    size?: 'medium' | 'large' | null
+    size?: 'medium' | 'large'
     label?: boolean
     color?: string
     background?: string

package/components/Radio/Radio.svelte

@@ -7,12 +7,15 @@
 
     import styles from './radio.module.scss'
 
-    export let name: SvelteRadioProps['name'] = ''
-    export let items: SvelteRadioProps['items'] = []
-    export let color: SvelteRadioProps['color'] = ''
-    export let inline: SvelteRadioProps['inline'] = false
-    export let className: SvelteRadioProps['className'] = ''
-    export let onChange: SvelteRadioProps['onChange'] = () => {}
+    const {
+        name,
+        items,
+        color,
+        inline,
+        className,
+        onChange,
+        ...rest
+    }: SvelteRadioProps = $props()
 
     const classes = classNames([
         styles.radio,
@@ -43,10 +46,10 @@
                     value={item.value}
                     checked={item.selected}
                     disabled={item.disabled}
-                    on:change={onChange}
-                    {...$$restProps}
+                    onchange={onChange}
+                    {...rest}
                 />
-                <span class={styles.icon} />
+                <span class={styles.icon}></span>
                 <span class={styles.label}>
                     {@html item.label}
                 </span>

package/components/Radio/radio.ts

@@ -1,3 +1,5 @@
+import type { InputTarget } from '../Input/input'
+
 export type RadioProps = {
     items: {
         label: string
@@ -14,9 +16,9 @@ export type RadioProps = {
 }
 
 export type SvelteRadioProps = {
-    onChange?: (key: any) => any
+    onChange?: (event: Event & InputTarget) => void
 } & RadioProps
 
 export type ReactRadioProps = {
-    onChange?: (key: any) => any
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 } & RadioProps

package/components/Rating/Rating.svelte

@@ -7,20 +7,22 @@
 
     import styles from './rating.module.scss'
 
-    export let score: RatingProps['score']
-    export let total: RatingProps['total'] = 5
-    export let showText: RatingProps['showText'] = false
-    export let text: RatingProps['text'] = '{0} out of {1}'
-    export let showEmpty: RatingProps['showEmpty'] = true
-    export let outline: RatingProps['outline'] = true
-    export let reviewCount: RatingProps['reviewCount'] = 0
-    export let reviewText: RatingProps['reviewText'] = '{0} reviews'
-    export let reviewLink: RatingProps['reviewLink'] = ''
-    export let reviewTarget: RatingProps['reviewTarget'] = ''
-    export let color: RatingProps['color'] = ''
-    export let emptyColor: RatingProps['emptyColor'] = ''
-    export let size: RatingProps['size'] = 0
-    export let className: RatingProps['className'] = ''
+    const {
+        score,
+        total = 5,
+        showText,
+        text = '{0} out of {1}',
+        showEmpty = true,
+        outline = true,
+        reviewCount,
+        reviewText = '{0} reviews',
+        reviewLink,
+        reviewTarget,
+        color,
+        emptyColor,
+        size,
+        className
+    }: RatingProps = $props()
 
     const classes = classNames([
         styles.rating,

package/components/Ribbon/Ribbon.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
-    import type { RibbonProps } from './ribbon'
+    import type { SvelteRibbonProps } from './ribbon'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './ribbon.module.scss'
 
-    export let offset: RibbonProps['offset'] = 0
-    export let type: RibbonProps['type'] = null
-    export let theme: RibbonProps['theme'] = null
-    export let className: RibbonProps['className'] = ''
+    const {
+        offset,
+        type,
+        theme,
+        className,
+        children
+    }: SvelteRibbonProps = $props()
 
     const classes = classNames([
         styles.ribbon,
@@ -22,5 +25,5 @@
     class={classes}
     style={offset ? `top:${offset}px;left:${offset}px` : null}
 >
-    <slot />
+    {@render children?.()}
 </span>

package/components/Ribbon/ribbon.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type RibbonProps = {
     offset?: number
     type?: 'folded' | null
@@ -11,6 +13,10 @@ export type RibbonProps = {
     className?: string
 }
 
+export type SvelteRibbonProps = {
+    children: Snippet
+} & RibbonProps
+
 export type ReactRibbonProps = {
     children: React.ReactNode
 } & RibbonProps