webcoreui 0.9.0 → 0.10.0

package/components/List/List.svelte

@@ -1,147 +1,149 @@
-<script lang="ts">
-    import type { ListEventType,SvelteListProps } from './list'
-
-    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
-    import Input from '../Input/Input.svelte'
-
-    import { classNames } from '../../utils/classNames'
-
-    import searchIcon from '../../icons/search.svg?raw'
-
-    import styles from './list.module.scss'
-
-    export let showSearchBar: SvelteListProps['showSearchBar'] = false
-    export let showSearchBarIcon: SvelteListProps['showSearchBarIcon'] = false
-    export let searchBarPlaceholder: SvelteListProps['searchBarPlaceholder'] = ''
-    export let noResultsLabel: SvelteListProps['noResultsLabel'] = 'No results.'
-    export let maxHeight: SvelteListProps['maxHeight'] = ''
-    export let id: SvelteListProps['id'] = ''
-    export let className: SvelteListProps['className'] = ''
-    export let wrapperClassName: SvelteListProps['wrapperClassName'] = ''
-    export let itemGroups: SvelteListProps['itemGroups'] = []
-    export let onSelect: SvelteListProps['onSelect'] = () => {}
-
-    let searchValue = ''
-    let numberOfResults = 1
-
-    const classes = classNames([
-        styles.list,
-        !showSearchBar && styles.container,
-        className
-    ])
-
-    const wrapperClasses = classNames([
-        styles.container,
-        wrapperClassName
-    ])
-
-    const search = (event: InputEvent) => {
-        searchValue = (event.target as HTMLInputElement).value
-
-        numberOfResults = itemGroups
-            .map(group => group.items)
-            .flat()
-            .filter(item => {
-                return item.value?.toLowerCase().includes(searchValue)
-                    || item.subText?.toLowerCase().includes(searchValue)
-                    || item.name.toLowerCase().includes(searchValue)
-            }).length
-    }
-
-    const select = (event: MouseEvent | KeyboardEvent) => {
-        const li = event.target as HTMLLIElement
-
-        itemGroups = itemGroups.map(group => {
-            group.items = group.items.map(item => {
-                item.selected = li.dataset.name === item.name
-
-                return item
-            })
-
-            return group
-        })
-
-        onSelect?.({
-            ...li.dataset,
-            list: li.parentElement
-        } as ListEventType)
-    }
-
-    const selectByKey = (event: KeyboardEvent) => {
-        if (event.key === 'Enter') {
-            select(event)
-        }
-    }
-</script>
-
-<ConditionalWrapper
-    condition={!!showSearchBar}
-    class={wrapperClasses}
->
-    {#if showSearchBar}
-        <Input
-            type="search"
-            placeholder={searchBarPlaceholder}
-            onInput={search}
-        >
-            {#if showSearchBarIcon}
-                {@html searchIcon}
-            {/if}
-        </Input>
-    {/if}
-    <ul
-        class={classes}
-        id={id || null}
-        style={maxHeight ? `max-height: ${maxHeight}` : null}
-    >
-        {#each itemGroups as group}
-            {#if group.title}
-                <li class={styles.title}
-                    data-hidden={searchValue ? true : null}
-                >
-                    {group.title}
-                </li>
-            {/if}
-            {#each group.items as item}
-                <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-                <li
-                    tabIndex={item.href || item.disabled ? undefined : 0}
-                    data-value={item.value}
-                    data-name={item.name}
-                    data-disabled={item.disabled}
-                    data-selected={item.selected ? true : undefined}
-                    data-hidden={(
-                        !item.value?.toLowerCase().includes(searchValue)
-                        && !item.subText?.toLowerCase().includes(searchValue)
-                        && !item.name.toLowerCase().includes(searchValue)
-                    ) ? true : null}
-                    on:click={item.disabled ? null : select}
-                    on:keyup={item.disabled ? null : selectByKey}
-                >
-                    <ConditionalWrapper
-                        condition={!!item.href}
-                        element="a"
-                        href={item.href}
-                        target={item.target}
-                    >
-                        <ConditionalWrapper
-                            condition={!!(item.icon && item.subText)}
-                        >
-                            {#if item.icon}
-                                {@html item.icon}
-                            {/if}
-                            <div>{item.name}</div>
-                        </ConditionalWrapper>
-                        {#if item.subText}
-                            <span>{item.subText}</span>
-                        {/if}
-                    </ConditionalWrapper>
-                </li>
-            {/each}
-        {/each}
-
-        {#if showSearchBar && !numberOfResults}
-            <li data-id="w-no-results">{noResultsLabel}</li>
-        {/if}
-    </ul>
-</ConditionalWrapper>
+<script lang="ts">
+    import type { ListEventType,SvelteListProps } from './list'
+
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+    import Input from '../Input/Input.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import searchIcon from '../../icons/search.svg?raw'
+
+    import styles from './list.module.scss'
+
+    let {
+        showSearchBar,
+        showSearchBarIcon,
+        searchBarPlaceholder,
+        noResultsLabel = 'No results.',
+        maxHeight,
+        id,
+        className,
+        wrapperClassName,
+        itemGroups = $bindable([]),
+        onSelect
+    }: SvelteListProps = $props()
+
+    let searchValue = $state('')
+    let numberOfResults = $state(1)
+
+    const classes = classNames([
+        styles.list,
+        !showSearchBar && styles.container,
+        className
+    ])
+
+    const wrapperClasses = classNames([
+        styles.container,
+        wrapperClassName
+    ])
+
+    const search = (event: InputEvent) => {
+        searchValue = (event.target as HTMLInputElement).value.toLowerCase()
+
+        numberOfResults = itemGroups
+            .map(group => group.items)
+            .flat()
+            .filter(item => {
+                return item.value?.toLowerCase().includes(searchValue)
+                    || item.subText?.toLowerCase().includes(searchValue)
+                    || item.name.toLowerCase().includes(searchValue)
+            }).length
+    }
+
+    const select = (event: MouseEvent | KeyboardEvent) => {
+        const li = event.target as HTMLLIElement
+
+        itemGroups = itemGroups.map(group => {
+            group.items = group.items.map(item => {
+                item.selected = li.dataset.name === item.name
+
+                return item
+            })
+
+            return group
+        })
+
+        onSelect?.({
+            ...li.dataset,
+            list: li.parentElement
+        } as ListEventType)
+    }
+
+    const selectByKey = (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            select(event)
+        }
+    }
+</script>
+
+<ConditionalWrapper
+    condition={!!showSearchBar}
+    class={wrapperClasses}
+>
+    {#if showSearchBar}
+        <Input
+            type="search"
+            placeholder={searchBarPlaceholder}
+            onInput={search}
+        >
+            {#if showSearchBarIcon}
+                {@html searchIcon}
+            {/if}
+        </Input>
+    {/if}
+    <ul
+        class={classes}
+        id={id}
+        style={maxHeight ? `max-height: ${maxHeight}` : null}
+    >
+        {#each itemGroups as group}
+            {#if group.title}
+                <li class={styles.title}
+                    data-hidden={searchValue ? true : null}
+                >
+                    {group.title}
+                </li>
+            {/if}
+            {#each group.items as item}
+                <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+                <li
+                    tabIndex={item.href || item.disabled ? undefined : 0}
+                    data-value={item.value}
+                    data-name={item.name}
+                    data-disabled={item.disabled}
+                    data-selected={item.selected ? true : undefined}
+                    data-hidden={(
+                        !item.value?.toLowerCase().includes(searchValue)
+                        && !item.subText?.toLowerCase().includes(searchValue)
+                        && !item.name.toLowerCase().includes(searchValue)
+                    ) ? true : null}
+                    onclick={item.disabled ? null : select}
+                    onkeyup={item.disabled ? null : selectByKey}
+                >
+                    <ConditionalWrapper
+                        condition={!!item.href}
+                        element="a"
+                        href={item.href}
+                        target={item.target}
+                    >
+                        <ConditionalWrapper
+                            condition={!!(item.icon && item.subText)}
+                        >
+                            {#if item.icon}
+                                {@html item.icon}
+                            {/if}
+                            <div>{item.name}</div>
+                        </ConditionalWrapper>
+                        {#if item.subText}
+                            <span>{item.subText}</span>
+                        {/if}
+                    </ConditionalWrapper>
+                </li>
+            {/each}
+        {/each}
+
+        {#if showSearchBar && !numberOfResults}
+            <li data-id="w-no-results">{noResultsLabel}</li>
+        {/if}
+    </ul>
+</ConditionalWrapper>

package/components/List/List.tsx

@@ -42,7 +42,7 @@ const List = ({
         : undefined
 
     const search = (event: React.FormEvent<HTMLInputElement>) => {
-        const value = (event.target as HTMLInputElement).value
+        const value = (event.target as HTMLInputElement).value.toLowerCase()
 
         setSearchValue(value)
         setNumberOfResults(

package/components/Masonry/Masonry.svelte

@@ -5,12 +5,14 @@
 
     import styles from './masonry.module.scss'
 
-    export let items: SvelteMasonryProps['items'] = []
-    export let element: SvelteMasonryProps['element'] = 'section'
-    export let gap: SvelteMasonryProps['gap'] = ''
-    export let columns: SvelteMasonryProps['columns'] = 3
-    export let sequential: SvelteMasonryProps['sequential'] = false
-    export let className: SvelteMasonryProps['className'] = ''
+    const {
+        items,
+        element = 'section',
+        gap,
+        columns = 3,
+        sequential,
+        className
+    }: SvelteMasonryProps = $props()
 
     const classes = classNames([
         styles.masonry,
@@ -36,15 +38,15 @@
         <div class={styles.column}>
             {#each group as item}
                 {#if item.component}
-                    <svelte:component this={item.component} {...item.props}>
+                    <item.component {...item.props}>
                         {#if typeof item.children === 'object' && item.children.component}
-                            <svelte:component this={item.children.component} {...item.children.props}>
+                            <item.children.component {...item.children.props}>
                                 {@html item.children.children}
-                            </svelte:component>
+                            </item.children.component>
                         {:else}
                             {@html item.children}
                         {/if}
-                    </svelte:component>
+                    </item.component>
                 {:else}
                     {@html item.html}
                 {/if}

package/components/Menu/Menu.astro

@@ -99,9 +99,10 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
 </header>
 
 <script>
-    document
-        .querySelector('[data-id="hamburger"]')
-        ?.addEventListener('click', event => {
+    import { on } from '../../utils/DOMUtils'
+
+    const addToggle = () => {
+        on('[data-id="hamburger"]', 'click', (event: Event) => {
             const hamburger = event.currentTarget as HTMLDivElement
             const header = hamburger.parentElement?.parentElement as HTMLHeadElement
 
@@ -109,4 +110,8 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
                 ? 'false'
                 : 'true'
         })
+    }
+
+    on(document, 'astro:after-swap', addToggle)
+    addToggle()
 </script>

package/components/Menu/Menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { MenuProps } from './menu'
+    import type { SvelteMenuProps } from './menu'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -7,11 +7,14 @@
 
     import styles from './menu.module.scss'
 
-    export let items: MenuProps['items'] = []
-    export let logo: MenuProps['logo'] = null
-    export let centerLogo: MenuProps['centerLogo'] = false
-    export let className: MenuProps['className'] = ''
-    export let wrapperClassName: MenuProps['wrapperClassName'] = ''
+    const {
+        items,
+        logo,
+        centerLogo,
+        className,
+        wrapperClassName,
+        children
+    }: SvelteMenuProps = $props()
 
     const classes = classNames([
         styles.menu,
@@ -23,9 +26,11 @@
         wrapperClassName
     ])
 
-    const wrapMenu = (logo?.url || logo?.html) && items?.length && $$slots.default
+    const wrapMenu = (logo?.url || logo?.html)
+        && items?.length
+        && children
 
-    let active = false
+    let active = $state(false)
 
     const toggleMenu = () => active = !active
 </script>
@@ -70,7 +75,7 @@
         {#if items?.length}
             <button
                 class={styles.hamburger}
-                on:click={toggleMenu}
+                onclick={toggleMenu}
                 aria-label="menu"
             >
                 <span class={styles.meat}></span>
@@ -97,6 +102,6 @@
             </a>
         {/if}
 
-        <slot />
+        {@render children?.()}
     </div>
 </header>

package/components/Menu/Menu.tsx

@@ -28,7 +28,9 @@ const Menu = ({
         wrapperClassName
     ])
 
-    const wrapMenu = (logo?.url || logo?.html) && items?.length && children
+    const wrapMenu = (logo?.url || logo?.html)
+        && items?.length
+        && children
 
     const toggleMenu = () => setActive(!active)
 

package/components/Menu/menu.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 import type { ButtonProps } from '../Button/button'
 
 export type MenuProps = {
@@ -19,6 +21,10 @@ export type MenuProps = {
     wrapperClassName?: string
 }
 
+export type SvelteMenuProps = {
+    children?: Snippet
+} & MenuProps
+
 export type ReactMenuProps = {
     children?: React.ReactNode
 } & MenuProps

package/components/Modal/Modal.astro

@@ -58,6 +58,7 @@ const classes = [
             theme="flat"
             className={styles.close}
             data-id="close"
+            aria-label="close"
         >
             <Fragment set:html={closeIcon} />
         </Button>

package/components/Modal/Modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { ModalProps } from './modal'
+    import type { SvelteModalProps } from './modal'
 
     import Button from '../Button/Button.svelte'
 
@@ -13,15 +13,19 @@
 
     import styles from './modal.module.scss'
 
-    export let title: ModalProps['title'] = ''
-    export let subTitle: ModalProps['subTitle'] = ''
-    export let showCloseIcon: ModalProps['showCloseIcon'] = true
-    export let closeOnEsc: ModalProps['closeOnEsc'] = true
-    export let closeOnOverlay: ModalProps['closeOnOverlay'] = true
-    export let transparent: ModalProps['transparent'] = false
-    export let theme: ModalProps['theme'] = null
-    export let id : ModalProps['className'] = ''
-    export let className: ModalProps['className'] = ''
+    const {
+        title,
+        subTitle,
+        showCloseIcon = true,
+        closeOnEsc = true,
+        closeOnOverlay = true,
+        transparent,
+        theme,
+        id,
+        className,
+        children,
+        ...rest
+    }: SvelteModalProps = $props()
 
     const iconMap = {
         info,
@@ -48,13 +52,14 @@
     class={classes}
     id={id}
     data-close={close.length ? close : undefined}
-    {...$$restProps}
+    {...rest}
 >
     {#if showCloseIcon}
         <Button
             theme="flat"
             className={styles.close}
             data-id="close"
+            aria-label="close"
         >
             {@html closeIcon}
         </Button>
@@ -70,6 +75,6 @@
     {#if subTitle}
         <div class={styles.subTitle}>{subTitle}</div>
     {/if}
-    <slot />
+    {@render children?.()}
 </dialog>
-<div class={styles.overlay} />
+<div class={styles.overlay}></div>

package/components/Modal/Modal.tsx

@@ -58,8 +58,9 @@ const Modal = ({
                     <Button
                         theme="flat"
                         className={styles.close}
-                        data-id="close"
                         dangerouslySetInnerHTML={{ __html: closeIcon }}
+                        data-id="close"
+                        aria-label="close"
                     />
                 )}
                 {title && (

package/components/Modal/modal.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type ModalProps = {
     title?: string
     subTitle?: string
@@ -11,10 +13,13 @@ export type ModalProps = {
         | 'success'
         | 'warning'
         | 'alert'
-        | null
     [key: string]: any
 }
 
+export type SvelteModalProps = {
+    children: Snippet
+} & ModalProps
+
 export type ReactModalProps = {
     children?: React.ReactNode
 } & ModalProps