webcoreui 0.8.1 → 0.10.0

package/components/Banner/Banner.tsx

@@ -45,6 +45,7 @@ const Banner = ({
                     className={styles.close}
                     dangerouslySetInnerHTML={{ __html: closeIcon }}
                     onClick={() => setVisible(false)}
+                    aria-label="close"
                 />
             )}
         </div>

package/components/Banner/banner.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type BannerProps = {
     top?: number
     bottom?: boolean
@@ -7,6 +9,10 @@ export type BannerProps = {
     className?: string
 }
 
+export type SvelteBannerProps = {
+    children: Snippet
+} & BannerProps
+
 export type ReactBannerProps = {
     children: React.ReactNode
 } & BannerProps

package/components/BottomNavigation/BottomNavigation.astro

@@ -0,0 +1,51 @@
+---
+import type { BottomNavigationProps } from './bottomnavigation'
+
+import Icon from '../Icon/Icon.astro'
+
+import styles from './bottomnavigation.module.scss'
+
+import type { IconProps } from '../Icon/icon'
+
+interface Props extends BottomNavigationProps {}
+
+const {
+    items,
+    separated,
+    floating,
+    maxWidth,
+    className
+} = Astro.props
+
+const classes = [
+    styles.nav,
+    separated && styles.separated,
+    maxWidth && styles.bordered,
+    floating && styles.floating,
+    className
+]
+
+const styleVariable = maxWidth
+    ? `--w-bottom-navigation-max-width: ${maxWidth};`
+    : null
+---
+
+<nav class:list={classes} style={styleVariable}>
+    <ul>
+        {items?.map(item => ({ ...item, element: item.href ? 'a' : 'div' })).map(item => (
+            <li data-tooltip={item.tooltip} class:list={[item.icon && styles['with-icon']]}>
+                <item.element {...{ href: item.href, target: item.target, class: styles.item }}>
+                    {item.icon && (
+                        <Fragment>
+                            {item.icon?.startsWith('<svg')
+                                ? <Fragment set:html={item.icon} />
+                                : <Icon type={item.icon as IconProps['type']} />
+                            }
+                        </Fragment>
+                    )}
+                    {item.name}
+                </item.element>
+            </li>
+        ))}
+    </ul>
+</nav>

package/components/BottomNavigation/BottomNavigation.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import type { BottomNavigationProps } from './bottomnavigation'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './bottomnavigation.module.scss'
+
+    const {
+        items,
+        separated,
+        floating,
+        maxWidth,
+        className
+    }: BottomNavigationProps = $props()
+
+    const classes = classNames([
+        styles.nav,
+        separated && styles.separated,
+        maxWidth && styles.bordered,
+        floating && styles.floating,
+        className
+    ])
+
+    const styleVariable = maxWidth
+        ? `--w-bottom-navigation-max-width: ${maxWidth};`
+        : null
+</script>
+
+<nav class={classes} style={styleVariable}>
+    <ul>
+        {#each items as item}
+            <li data-tooltip={item.tooltip} class={classNames([item.icon && styles['with-icon']])}>
+                <svelte:element
+                    this={item.href ? 'a' : 'div'}
+                    href={item.href}
+                    target={item.target}
+                    class={styles.item}
+                >
+                    {#if item.icon}
+                        {@html item.icon}
+                    {/if}
+                    {item.name}
+                </svelte:element>
+            </li>
+        {/each}
+    </ul>
+</nav>

package/components/BottomNavigation/BottomNavigation.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import type { BottomNavigationProps } from './bottomnavigation'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './bottomnavigation.module.scss'
+
+type ElementType = BottomNavigationProps['items'][0] & {
+    className: string
+    dangerouslySetInnerHTML: {
+        __html: string
+    }
+}
+
+const BottomNavigation = ({
+    items,
+    separated,
+    floating,
+    maxWidth,
+    className
+}: BottomNavigationProps) => {
+    const classes = classNames([
+        styles.nav,
+        separated && styles.separated,
+        maxWidth && styles.bordered,
+        floating && styles.floating,
+        className
+    ])
+
+    const styleVariable = maxWidth
+        ? { '--w-bottom-navigation-max-width': maxWidth } as React.CSSProperties
+        : undefined
+
+    const Element = ({ href, ...rest }: ElementType) => href
+        ? <a {...rest} />
+        : <div {...rest} />
+
+    return (
+        <nav className={classes} style={styleVariable}>
+            <ul>
+                {items?.map((item, index) => (
+                    <li
+                        key={index}
+                        data-tooltip={item.tooltip}
+                        className={classNames([item.icon && styles['with-icon']])}
+                    >
+                        <Element
+                            href={item.href}
+                            target={item.target}
+                            className={styles.item}
+                            dangerouslySetInnerHTML={{ __html: item.icon
+                                ? `${item.icon} ${item.name}`
+                                : (item.name || '')
+                            }}
+                        />
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    )
+}
+
+export default BottomNavigation

package/components/BottomNavigation/bottomnavigation.module.scss

@@ -0,0 +1,70 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-bottom-navigation-max-width: auto;
+}
+
+.nav {
+    @include background(primary-60);
+    @include position(fixed, b0, l0, r0);
+    @include layer(header);
+    @include border(top, primary-50);
+
+    &.separated ul li:not(:last-child) {
+        @include border(right, primary-50);
+    }
+
+    &.separated.bordered ul {
+        @include border(left, primary-50);
+        @include border(right, primary-50);
+    }
+
+    &.floating {
+        @include position(l20px, r20px, b20px);
+        @include border-radius(xl);
+        @include border(0);
+
+        &:not(.bordered) {
+            li:first-child .item {
+                @include border-radius(xl, left);
+            }
+    
+            li:last-child .item {
+                @include border-radius(xl, right);
+            }
+        }
+    }
+
+    ul {
+        @include spacing(none-auto, p0);
+        @include layout(flex, h-center);
+
+        max-width: var(--w-bottom-navigation-max-width);
+        list-style-type: none;
+
+        li {
+            @include spacing(mb-0);
+
+            flex: 1;
+
+            &.with-icon .item {
+                @include spacing(pt-sm, pb-xs);
+            }
+            
+            .item {
+                @include layout(flex, column, center, xs);
+                @include spacing(py-sm);
+                @include size('h100%');
+                @include transition(background);
+                @include typography(md, primary-10, none);
+
+                user-select: none;
+                cursor: pointer;
+
+                &:hover {
+                    @include background(primary-50);
+                }
+            }
+        }
+    }
+}

package/components/BottomNavigation/bottomnavigation.ts

@@ -0,0 +1,16 @@
+import type { ButtonProps } from '../Button/button'
+import type { IconProps } from '../Icon/icon'
+
+export type BottomNavigationProps = {
+    items: {
+        name?: string
+        href?: string
+        target?: ButtonProps['target']
+        icon?: IconProps['type'] | string
+        tooltip?: string
+    }[]
+    separated?: boolean
+    floating?: boolean
+    maxWidth?: string
+    className?: string
+}

package/components/Breadcrumb/Breadcrumb.astro

@@ -43,7 +43,7 @@ const classes = [
         <Fragment>
             {index < items.length - 1 && (
                 <li>
-                    {separator || <Icon type="arrow-right" />}
+                    {separator || <Icon type="chevron-right" />}
                 </li>
             )}
         </Fragment>

package/components/Breadcrumb/Breadcrumb.svelte

@@ -5,13 +5,15 @@
 
     import { classNames } from '../../utils/classNames'
 
-    import ArrowRight from '../../icons/arrow-right.svg?raw'
+    import ChevronRight from '../../icons/chevron-right.svg?raw'
 
     import styles from './breadcrumb.module.scss'
 
-    export let items: BreadcrumbProps['items'] = []
-    export let separator: BreadcrumbProps['separator'] = ''
-    export let className: BreadcrumbProps['className'] = ''
+    const {
+        items,
+        separator,
+        className
+    }: BreadcrumbProps = $props()
 
     const classes = classNames([
         styles.breadcrumb,
@@ -36,9 +38,9 @@
                 {/if}
             </ConditionalWrapper>
         </li>
-        {#if index < items.length - 1 }
+        {#if index < items.length - 1}
             <li>
-                {@html separator || ArrowRight}
+                {@html separator || ChevronRight}
             </li>
         {/if}
     {/each}

package/components/Breadcrumb/Breadcrumb.tsx

@@ -5,7 +5,7 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import { classNames } from '../../utils/classNames'
 
-import ArrowRight from '../../icons/arrow-right.svg?raw'
+import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './breadcrumb.module.scss'
 
@@ -38,7 +38,7 @@ const Breadcrumb = ({
                         <li>
                             {separator
                                 ? separator
-                                : <span dangerouslySetInnerHTML={{ __html: ArrowRight }} />
+                                : <span dangerouslySetInnerHTML={{ __html: ChevronRight }} />
                             }
                         </li>
                     )}

package/components/Button/Button.svelte

@@ -5,10 +5,14 @@
 
     import styles from './button.module.scss'
 
-    export let theme: SvelteButtonProps['theme'] = null
-    export let href: SvelteButtonProps['href'] = ''
-    export let className: SvelteButtonProps['className'] = ''
-    export let onClick: SvelteButtonProps['onClick'] = () => {}
+    const {
+        theme,
+        href,
+        className,
+        onClick,
+        children,
+        ...rest
+    }: SvelteButtonProps = $props()
 
     const classes = classNames([
         styles.button,
@@ -19,11 +23,11 @@
 
 
 {#if href}
-    <a {...$$restProps} href={href} class={classes || null}>
-        <slot />
+    <a {...rest} href={href} class={classes}>
+        {@render children?.()}
     </a>
 {:else}
-    <button {...$$restProps} class={classes || null} on:click={onClick}>
-        <slot />
+    <button {...rest} class={classes} onclick={onClick}>
+        {@render children?.()}
     </button>
 {/if}

package/components/Button/Button.tsx

@@ -21,14 +21,14 @@ const Button = ({
 
     if (href) {
         return (
-            <a {...rest} href={href} className={classes || undefined}>
+            <a {...rest} href={href} className={classes}>
                 {children}
             </a>
         )
     }
 
     return (
-        <button {...rest} className={classes || undefined} onClick={onClick}>
+        <button {...rest} className={classes} onClick={onClick}>
             {children}
         </button>
     )

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.module.scss

@@ -4,6 +4,7 @@
     @include border(primary-50);
     @include border-radius(md);
     @include layout(flex, column);
+    @include background(primary-70);
 
     &.secondary {
         @include background(primary-60);

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.astro

@@ -15,7 +15,8 @@ const {
     subText,
     disabled,
     color,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -34,7 +35,12 @@ const style = color
         <div class={styles.wrapper} slot="wrapper">
             children
         </div>
-        <input type="checkbox" checked={checked} disabled={disabled} />
+        <input
+            type="checkbox"
+            checked={checked}
+            disabled={disabled}
+            {...rest}
+        />
         <span class={styles.check}>
             <Fragment set:html={check} />
         </span>