webcoreui 0.9.0 → 0.10.0

package/components/Button/button.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte'
 import type { MouseEventHandler } from 'svelte/elements'
 
 export type ButtonProps = {
@@ -8,15 +9,12 @@ export type ButtonProps = {
         | 'success'
         | 'warning'
         | 'alert'
-        | null
-        | undefined
     target?: '_self'
         | '_blank'
         | '_parent'
         | '_top'
         | '_unfencedTop'
         | ''
-        | undefined
     href?: string
     className?: string
     [key: string]: any
@@ -24,6 +22,7 @@ export type ButtonProps = {
 
 export type SvelteButtonProps = {
     onClick?: MouseEventHandler<HTMLButtonElement>
+    children: Snippet
 } & ButtonProps
 
 export type ReactButtonProps = {

package/components/Card/Card.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
-    import type { CardProps } from './card'
+    import type { SvelteCardProps } from './card'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './card.module.scss'
 
-    export let element: CardProps['element'] = 'section'
-    export let title: CardProps['title'] = ''
-    export let titleTag: CardProps['titleTag'] = 'span'
-    export let compact: CardProps['compact'] = false
-    export let className: CardProps['className'] = ''
-    export let bodyClassName: CardProps['bodyClassName'] = ''
-    export let secondary: CardProps['secondary'] = false
+    const {
+        element = 'section',
+        title,
+        titleTag = 'span',
+        compact,
+        className,
+        bodyClassName,
+        secondary,
+        children,
+        ...rest
+    }: SvelteCardProps = $props()
 
     const classes = classNames([
         styles.card,
@@ -26,13 +30,13 @@
     ])
 </script>
 
-<svelte:element this={element} class={classes} {...$$restProps}>
+<svelte:element this={element} class={classes} {...rest}>
     {#if title}
         <svelte:element this={titleTag} class={styles.title}>
             {title}
         </svelte:element>
     {/if}
     <div class={bodyClasses}>
-        <slot />
+        {@render children?.()}
     </div>
 </svelte:element>

package/components/Card/card.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type CardProps = {
     element?: string
     title?: string
@@ -9,6 +11,10 @@ export type CardProps = {
     [key: string]: any
 }
 
+export type SvelteCardProps = {
+    children: Snippet
+} & CardProps
+
 export type ReactCardProps = {
     Element?: keyof JSX.IntrinsicElements
     TitleTag?: keyof JSX.IntrinsicElements

package/components/Carousel/Carousel.astro

@@ -102,53 +102,55 @@ const style = itemsPerSlide > 1
     import { debounce } from '../../utils/debounce'
     import { listen } from '../../utils/event'
 
-    const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
-
-    const scroll = (event: Event) => {
-        const target = event.target as HTMLDivElement
-
-        if (!target.dataset.paginated) {
-            const scrollLeft = target.scrollLeft
-            const itemWidth = target.children[0].clientWidth
-            const page = Math.round(scrollLeft / itemWidth) + 1
-            const carouselElement = target.children[0]
-            const paginationElement = target.parentElement
-                ?.querySelector('[data-id="w-pagination"]') as HTMLUListElement
-            const currentPage = Number(paginationElement.dataset.currentPage)
-            const diff = Math.abs(currentPage - page)
-
-            let triggerButton = currentPage > page
-                ? paginationElement.querySelector('[data-page="prev"]') as HTMLButtonElement
-                : paginationElement.querySelector('[data-page="next"]') as HTMLButtonElement
-
-            if (!triggerButton) {
-                triggerButton = paginationElement.querySelector(`[data-page="${page}"]`) as HTMLButtonElement
-            }
+    const addEventListeners = () => {
+        const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
+
+        const scroll = (event: Event) => {
+            const target = event.target as HTMLDivElement
+
+            if (!target.dataset.paginated) {
+                const scrollLeft = target.scrollLeft
+                const itemWidth = target.children[0].clientWidth
+                const page = Math.round(scrollLeft / itemWidth) + 1
+                const carouselElement = target.children[0]
+                const paginationElement = target.parentElement
+                    ?.querySelector('[data-id="w-pagination"]') as HTMLUListElement
+                const currentPage = Number(paginationElement.dataset.currentPage)
+                const diff = Math.abs(currentPage - page)
+
+                let triggerButton = currentPage > page
+                    ? paginationElement.querySelector('[data-page="prev"]') as HTMLButtonElement
+                    : paginationElement.querySelector('[data-page="next"]') as HTMLButtonElement
+
+                if (!triggerButton) {
+                    triggerButton = paginationElement.querySelector(`[data-page="${page}"]`) as HTMLButtonElement
+                }
 
-            for (let i = 0; i < diff; i++) {
-                triggerButton.click()
-            }
+                for (let i = 0; i < diff; i++) {
+                    triggerButton.click()
+                }
 
-            Array.from(carouselElement.children).forEach(li => {
-                (li as HTMLLIElement).removeAttribute('data-active')
-            })
+                Array.from(carouselElement.children).forEach(li => {
+                    (li as HTMLLIElement).removeAttribute('data-active')
+                })
 
-            const activeElement = carouselElement.children[page - 1] as HTMLLIElement
+                const activeElement = carouselElement.children[page - 1] as HTMLLIElement
 
-            activeElement.dataset.active = 'true'
+                activeElement.dataset.active = 'true'
+            }
         }
-    }
 
-    carousels.forEach(carousel => {
-        const carouselElement = carousel as HTMLDivElement
-        const debounceAmount = carouselElement.dataset.debounce
-            ? Number(carouselElement.dataset.debounce)
-            : 20
+        carousels.forEach(carousel => {
+            const carouselElement = carousel as HTMLDivElement
+            const debounceAmount = carouselElement.dataset.debounce
+                ? Number(carouselElement.dataset.debounce)
+                : 20
 
-        carousel.addEventListener('scroll', debounce((event: Event) => {
-            scroll(event)
-        }, debounceAmount))
-    })
+            carousel.addEventListener('scroll', debounce((event: Event) => {
+                scroll(event)
+            }, debounceAmount))
+        })
+    }
 
     listen('paginate', event => {
         const target = event.target
@@ -172,7 +174,7 @@ const style = itemsPerSlide > 1
             : indexes[event.page - 1][indexes[event.page - 1].length - 1]
 
         const liElement = carousel.children[pageIndex]
-        const subText = event.target.nextElementSibling
+        const subText = event.target.parentElement.querySelector('span')
 
         Array.from(carousel.children).forEach(li => {
             (li as HTMLLIElement).removeAttribute('data-active')
@@ -204,4 +206,7 @@ const style = itemsPerSlide > 1
             }, 300)
         }
     })
+
+    document.addEventListener('astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Carousel/carousel.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 import type { PaginationProps } from '../Pagination/pagination'
 
 export type CarouselProps = {
@@ -18,6 +20,7 @@ export type CarouselProps = {
 
 export type SvelteCarouselProps = {
     onScroll?: (event: number) => void
+    children: Snippet
 } & CarouselProps
 
 export type ReactCarouselProps = {

package/components/Checkbox/Checkbox.svelte

@@ -9,13 +9,16 @@
 
     import styles from './checkbox.module.scss'
 
-    export let checked: SvelteCheckboxProps['checked'] = false
-    export let label: SvelteCheckboxProps['label'] = ''
-    export let subText: SvelteCheckboxProps['subText'] = ''
-    export let disabled: SvelteCheckboxProps['disabled'] = false
-    export let color: SvelteCheckboxProps['color'] = ''
-    export let className: SvelteCheckboxProps['className'] = ''
-    export let onClick: SvelteCheckboxProps['onClick'] = () => {}
+    const {
+        checked,
+        label,
+        subText,
+        disabled,
+        color,
+        className,
+        onClick,
+        ...rest
+    }: SvelteCheckboxProps = $props()
 
     const classes = classNames([
         styles.checkbox,
@@ -38,8 +41,8 @@
             type="checkbox"
             checked={checked}
             disabled={disabled}
-            on:click={onClick}
-            {...$$restProps}
+            onclick={onClick}
+            {...rest}
         />
         <span class={styles.check}>
             {@html check}

package/components/Checkbox/checkbox.module.scss

@@ -52,6 +52,10 @@ body {
 
         svg {
             @include visibility(none);
+
+            path {
+                stroke-width: 4px;
+            }
         }
     }
 

package/components/Collapsible/Collapsible.astro

@@ -45,10 +45,10 @@ const styleVariables = classNames([
 </div>
 
 <script>
-    const collapsibles = document.querySelectorAll('[data-id="w-collapsible"]')
+    import { on } from '../../utils/DOMUtils'
 
-    Array.from(collapsibles).forEach(element => {
-        element.addEventListener('click', event => {
+    const addEventListeners = () => {
+        on('[data-id="w-collapsible"]', 'click', (event: Event) => {
             const collapsible = event.currentTarget as HTMLDivElement
             const target = event.target as HTMLDivElement
 
@@ -59,6 +59,9 @@ const styleVariables = classNames([
             if (target.parentElement?.dataset.toggleOff) {
                 collapsible.dataset.toggled = 'false'
             }
-        })
-    })
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Collapsible/Collapsible.svelte

@@ -1,49 +1,54 @@
-<script lang="ts">
-    import type { CollapsibleProps } from './collapsible'
-
-    import { classNames } from '../../utils/classNames'
-
-    import styles from './collapsible.module.scss'
-
-    export let initialHeight: CollapsibleProps['initialHeight'] = ''
-    export let maxHeight: CollapsibleProps['maxHeight'] = ''
-    export let toggled: CollapsibleProps['toggled'] = false
-    export let className: CollapsibleProps['className'] = ''
-    export let togglesClassName: CollapsibleProps['togglesClassName'] = ''
-
-    const classes = classNames([
-        styles.collapsible,
-        maxHeight && styles.animated,
-        className
-    ])
-
-    const styleVariables = classNames([
-        initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
-        maxHeight && `--w-collapsible-max-height: ${maxHeight};`
-    ])
-</script>
-
-<div
-    class={classes}
-    data-toggled={toggled ? 'true' : undefined}
->
-    <div
-        class={styles.wrapper}
-        style={styleVariables}
-    >
-        <slot />
-    </div>
-    <div
-        on:click={() => toggled = !toggled}
-        on:keyup={() => toggled = !toggled}
-        role="button"
-        tabindex={0}
-        class={togglesClassName}
-    >
-        {#if toggled}
-            <slot name="off" />
-        {:else}
-            <slot name="on" />
-        {/if}
-    </div>
-</div>
+<script lang="ts">
+    import type { SvelteCollapsibleProps } from './collapsible'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './collapsible.module.scss'
+
+    let {
+        initialHeight,
+        maxHeight,
+        toggled = $bindable(),
+        className,
+        togglesClassName,
+        children,
+        off,
+        on
+    }: SvelteCollapsibleProps = $props()
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = classNames([
+        initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
+        maxHeight && `--w-collapsible-max-height: ${maxHeight};`
+    ])
+</script>
+
+<div
+    class={classes}
+    data-toggled={toggled ? 'true' : undefined}
+>
+    <div
+        class={styles.wrapper}
+        style={styleVariables}
+    >
+        {@render children?.()}
+    </div>
+    <div
+        onclick={() => toggled = !toggled}
+        onkeyup={() => toggled = !toggled}
+        role="button"
+        tabindex={0}
+        class={togglesClassName}
+    >
+        {#if toggled}
+            {@render off?.()}
+        {:else}
+            {@render on?.()}
+        {/if}
+    </div>
+</div>

package/components/Collapsible/collapsible.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type CollapsibleProps = {
     initialHeight?: string
     maxHeight?: string
@@ -6,6 +8,12 @@ export type CollapsibleProps = {
     togglesClassName?: string
 }
 
+export type SvelteCollapsibleProps = {
+    on: Snippet
+    off: Snippet
+    children: Snippet
+} & CollapsibleProps
+
 export type ReactCollapsibleProps = {
     on: React.ReactNode
     off: React.ReactNode

package/components/ConditionalWrapper/ConditionalWrapper.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-    import type { ConditionalWrapperProps } from './conditionalwrapper'
+    import type { SvelteConditionalWrapperProps } from './conditionalwrapper'
 
-    export let condition: ConditionalWrapperProps['condition']
-    export let element: string = 'div'
+    const {
+        condition,
+        element = 'div',
+        children,
+        ...rest
+    }: SvelteConditionalWrapperProps = $props()
 </script>
 
 {#if condition}
-    <svelte:element this={element} {...$$restProps}>
-        <slot />
+    <svelte:element this={element} {...rest}>
+        {@render children?.()}
     </svelte:element>
 {:else}
-    <slot />
+    {@render children?.()}
 {/if}

package/components/ConditionalWrapper/conditionalwrapper.ts

@@ -1,8 +1,14 @@
+import type { Snippet } from 'svelte'
+
 export type ConditionalWrapperProps = {
     condition: boolean
     [key: string]: any
 }
 
+export type SvelteConditionalWrapperProps = {
+    children: Snippet
+} & ConditionalWrapperProps
+
 export type ReactConditionalWrapperProps = {
     wrapper: (_: React.ReactNode) => any
     children: React.ReactNode

package/components/Copy/Copy.astro

@@ -38,6 +38,7 @@ const classes = classNames([
         <button
             class={styles['copy-icon']}
             data-id="w-copy"
+            aria-label="copy"
         >
             {copyIcon?.startsWith('<svg')
                 ? <Fragment set:html={copyIcon} />
@@ -56,19 +57,24 @@ const classes = classNames([
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-copy"]', 'click', (event: Event) => {
-        const copy = event.currentTarget as HTMLButtonElement
-        const copied = copy.nextElementSibling as HTMLSpanElement
-        const badge = copy.parentElement?.parentElement as HTMLElement
+    const addEventListeners = () => {
+        on('[data-id="w-copy"]', 'click', (event: Event) => {
+            const copy = event.currentTarget as HTMLButtonElement
+            const copied = copy.nextElementSibling as HTMLSpanElement
+            const badge = copy.parentElement?.parentElement as HTMLElement
 
-        const text = copy.parentElement?.previousSibling?.textContent?.trim()
+            const text = copy.parentElement?.previousSibling?.textContent?.trim()
 
-        copy.style.opacity = '0'
-        copy.style.pointerEvents = 'none'
+            copy.style.opacity = '0'
+            copy.style.pointerEvents = 'none'
 
-        copied.style.opacity = '1'
-        badge.removeAttribute('data-tooltip')
+            copied.style.opacity = '1'
+            badge.removeAttribute('data-tooltip')
 
-        navigator.clipboard.writeText(text as string)
-    }, true)
+            navigator.clipboard.writeText(text as string)
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Copy/Copy.svelte

@@ -1,61 +1,68 @@
-<script lang="ts">
-    import type { CopyProps } from './copy'
-
-    import Badge from '../Badge/Badge.svelte'
-
-    import { classNames } from '../../utils/classNames'
-
-    import circleCheck from '../../icons/circle-check.svg?raw'
-    import copy from '../../icons/copy.svg?raw'
-
-    import styles from './copy.module.scss'
-
-    export let tooltip: CopyProps['tooltip'] = ''
-    export let tooltipPosition: CopyProps['tooltipPosition'] = null
-    export let copyIcon: CopyProps['copyIcon'] = ''
-    export let copiedIcon: CopyProps['copiedIcon'] = ''
-    export let className: CopyProps['className'] = ''
-
-    const classes = classNames([
-        styles.copy,
-        className
-    ])
-
-    let copyButton: HTMLButtonElement
-    let copiedButton: HTMLSpanElement
-
-    const copyText = () => {
-        const text = copyButton.parentElement?.previousSibling?.textContent?.trim()
-            || (copyButton.parentElement?.previousSibling as Text)?.wholeText?.trim()
-            || copyButton.parentElement?.previousElementSibling?.textContent?.trim()
-
-        copyButton.style.opacity = '0'
-        copyButton.style.pointerEvents = 'none'
-
-        copiedButton.style.opacity = '1'
-        tooltip = ''
-
-        navigator.clipboard.writeText(text as string)
-    }
-</script>
-
-<Badge
-    {...$$restProps}
-    className={classes}
-    data-tooltip={tooltip || undefined}
-    data-position={tooltipPosition}
->
-    <slot />
-    <div class={styles.icons}>
-        <button
-            class={styles['copy-icon']}
-            bind:this={copyButton}
-            on:click={copyText}
-        >
-            {@html copyIcon || copy}
-        </button>
-        <span class={styles.copied} bind:this={copiedButton}>
-            {@html copiedIcon || circleCheck}
-        </span>
-    </div>
-</Badge>
+<script lang="ts">
+    import type { SvelteCopyProps } from './copy'
+
+    import Badge from '../Badge/Badge.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import circleCheck from '../../icons/circle-check.svg?raw'
+    import copy from '../../icons/copy.svg?raw'
+
+    import styles from './copy.module.scss'
+
+    let {
+        tooltip = $bindable(''),
+        tooltipPosition,
+        copyIcon,
+        copiedIcon,
+        className,
+        children,
+        ...rest
+    }: SvelteCopyProps = $props()
+
+    const classes = classNames([
+        styles.copy,
+        className
+    ])
+
+    let copyButton: HTMLButtonElement | undefined = $state()
+    let copiedButton: HTMLSpanElement | undefined = $state()
+
+    const copyText = () => {
+        const text = copyButton
+            ?.parentElement
+            ?.parentElement
+            ?.querySelector('[data-id="text"]')
+            ?.textContent?.trim()
+
+        copyButton!.style.opacity = '0'
+        copyButton!.style.pointerEvents = 'none'
+
+        copiedButton!.style.opacity = '1'
+        tooltip = ''
+
+        navigator.clipboard.writeText(text as string)
+    }
+</script>
+
+<Badge
+    {...rest}
+    className={classes}
+    data-tooltip={tooltip || undefined}
+    data-position={tooltipPosition}
+>
+    <span data-id="text">{@render children?.()}</span>
+    <div class={styles.icons}>
+        <button
+            bind:this={copyButton}
+            class={styles['copy-icon']}
+            onclick={copyText}
+            aria-label="copy"
+        >
+            {@html copyIcon || copy}
+        </button>
+        <span class={styles.copied} bind:this={copiedButton}>
+            {@html copiedIcon || circleCheck}
+        </span>
+    </div>
+</Badge>

package/components/Copy/Copy.tsx

@@ -58,6 +58,7 @@ const Copy = ({
                     className={styles['copy-icon']}
                     ref={copyButton}
                     onClick={copyText}
+                    aria-label="copy"
                     dangerouslySetInnerHTML={{ __html: copyIcon || copy }}
                 />
                 <span