webcoreui 0.9.0 → 0.10.0

package/components/Footer/Footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { FooterProps } from './footer'
+    import type { SvelteFooterProps } from './footer'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -7,12 +7,15 @@
 
     import styles from './footer.module.scss'
 
-    export let logo: FooterProps['logo'] = null
-    export let columns: FooterProps['columns'] = []
-    export let subText: FooterProps['subText'] = ''
-    export let className: FooterProps['className'] = ''
-    export let wrapperClassName: FooterProps['wrapperClassName'] = ''
-    export let subTextClassName: FooterProps['subTextClassName'] = ''
+    const {
+        logo,
+        columns,
+        subText,
+        className,
+        wrapperClassName,
+        subTextClassName,
+        children
+    }: SvelteFooterProps = $props()
 
     const classes = classNames([
         styles.footer,
@@ -82,12 +85,12 @@
                 </ConditionalWrapper>
             {/if}
         </ConditionalWrapper>
-        {#if subText || $$slots.default}
+        {#if subText || children}
             <div class={subTextClasses}>
                 {#if subText}
                     <span>{@html subText}</span>
                 {/if}
-                <slot />
+                {@render children?.()}
             </div>
         {/if}
     </div>

package/components/Footer/footer.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 import type { ButtonProps } from '../Button/button'
 
 export type FooterProps = {
@@ -24,6 +26,10 @@ export type FooterProps = {
     subTextClassName?: string
 }
 
+export type SvelteFooterProps = {
+    children?: Snippet
+} & FooterProps
+
 export type ReactFooterProps = {
     children?: React.ReactNode
 } & FooterProps

package/components/Grid/Grid.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
-    import type { GridProps } from './grid'
+    import type { SvelteGridProps } from './grid'
 
     import { classNames } from '../../utils/classNames'
     import { getLayoutClasses } from '../../utils/getLayoutClasses'
 
-    export let element: GridProps['className'] = 'div'
-    export let gap: GridProps['gap'] = ''
-    export let column: GridProps['column'] = null
-    export let className: GridProps['className'] = ''
+    const {
+        element = 'div',
+        gap,
+        column,
+        className,
+        children,
+        ...rest
+    }: SvelteGridProps = $props()
 
     const classes = classNames([
         'grid',
@@ -15,11 +19,11 @@
         className
     ])
 
-    const props = {
+    const componentProps = {
         class: classes
     }
 </script>
 
-<svelte:element this={element} {...props} {...$$restProps}>
-    <slot />
+<svelte:element this={element} {...componentProps} {...rest}>
+    {@render children?.()}
 </svelte:element>

package/components/Grid/grid.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 import type {
     Column,
     Gap,
@@ -12,6 +14,10 @@ export type GridProps = {
     [key: string]: any
 }
 
+export type SvelteGridProps = {
+    children: Snippet
+} & GridProps
+
 export type ReactGridProps = {
     Element?: keyof JSX.IntrinsicElements
     children: React.ReactNode

package/components/Group/Group.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
-    import type { GroupProps } from './group'
+    import type { SvelteGroupProps } from './group'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './group.module.scss'
 
-    export let withSeparator: GroupProps['withSeparator'] = false
-    export let className: GroupProps['className'] = ''
+    const {
+        withSeparator,
+        className,
+        children
+    }: SvelteGroupProps = $props()
 
     const classes = classNames([
         styles.group,
@@ -16,5 +19,5 @@
 </script>
 
 <div class={classes}>
-    <slot />
+    {@render children?.()}
 </div>

package/components/Group/group.ts

@@ -1,8 +1,14 @@
+import type { Snippet } from 'svelte'
+
 export type GroupProps = {
     withSeparator?: boolean
     className?: string
 }
 
+export type SvelteGroupProps = {
+    children: Snippet
+} & GroupProps
+
 export type ReactGroupProps = {
     children: React.ReactNode
 } & GroupProps

package/components/Icon/Icon.astro

@@ -7,13 +7,27 @@ interface Props extends IconProps {}
 const {
     type,
     size = 24,
-    color
+    color,
+    theme,
+    iconSet
 } = Astro.props
 
-const icon = iconMap[type as keyof typeof iconMap]
-    .replace('width="24"', `width=${size}`)
-    .replace('height="24"', color
-        ? `height=${size} color=${color}`
+const icons = {
+    ...iconMap,
+    ...(iconSet || {})
+}
+
+const svg = icons[type as keyof typeof iconMap]
+
+if (!svg) {
+    // eslint-disable-next-line no-console
+    console.error('Cannot find icon type:', type)
+}
+
+const icon = svg
+    ?.replace('width="24"', `width=${size}`)
+    ?.replace('height="24"', color || theme
+        ? `height=${size} color=${color || `var(--w-color-${theme})`}`
         : `height=${size}`)
 ---
 

package/components/Icon/Icon.svelte

@@ -2,14 +2,30 @@
     import type { IconProps } from './icon'
     import iconMap from './map'
 
-    export let type: IconProps['type'] = 'alert'
-    export let size: IconProps['size'] = 24
-    export let color: IconProps['color'] = ''
+    const {
+        type,
+        size = 24,
+        color,
+        theme,
+        iconSet
+    }: IconProps = $props()
 
-    const icon = iconMap[type as keyof typeof iconMap]
-        .replace('width="24"', `width=${size}`)
-        .replace('height="24"', color
-            ? `height=${size} color=${color}`
+    const icons = {
+        ...iconMap,
+        ...(iconSet || {})
+    }
+
+    const svg = icons[type as keyof typeof iconMap]
+
+    if (!svg) {
+        // eslint-disable-next-line no-console
+        console.error('Cannot find icon type:', type)
+    }
+
+    const icon = svg
+        ?.replace('width="24"', `width=${size}`)
+        ?.replace('height="24"', color || theme
+            ? `height=${size} color=${color || `var(--w-color-${theme})`}`
             : `height=${size}`)
 </script>
 

package/components/Icon/Icon.tsx

@@ -5,12 +5,26 @@ import iconMap from './map'
 const Icon = ({
     type,
     size = 24,
-    color
+    color,
+    theme,
+    iconSet
 }: IconProps) => {
-    const icon = iconMap[type as keyof typeof iconMap]
-        .replace('width="24"', `width=${size}`)
-        .replace('height="24"', color
-            ? `height=${size} color=${color}`
+    const icons = {
+        ...iconMap,
+        ...(iconSet || {})
+    }
+
+    const svg = icons[type as keyof typeof iconMap]
+
+    if (!svg) {
+        // eslint-disable-next-line no-console
+        console.error('Cannot find icon type:', type)
+    }
+
+    const icon = svg
+        ?.replace('width="24"', `width=${size}`)
+        ?.replace('height="24"', color || theme
+            ? `height=${size} color=${color || `var(--w-color-${theme})`}`
             : `height=${size}`)
 
     return <span dangerouslySetInnerHTML={{ __html: icon }} />

package/components/Icon/icon.ts

@@ -1,9 +1,10 @@
 export type IconProps = {
     type: 'alert'
-        | 'arrow-down'
-        | 'arrow-left'
-        | 'arrow-right'
         | 'check'
+        | 'chevron-down'
+        | 'chevron-left'
+        | 'chevron-right'
+        | 'chevron-up'
         | 'circle-check'
         | 'circle-close'
         | 'close'
@@ -18,6 +19,11 @@ export type IconProps = {
         | 'search'
         | 'sun'
         | 'warning'
+        | string
     size?: number
     color?: string
+    theme?: 'info' | 'success' | 'warning' | 'alert'
+    iconSet?: {
+        [key: string]: string
+    }
 }

package/components/Icon/map.ts

@@ -1,14 +1,13 @@
 import Alert from '../../icons/alert.svg?raw'
-import ArrowDown from '../../icons/arrow-down.svg?raw'
-import ArrowLeft from '../../icons/arrow-left.svg?raw'
-import ArrowRight from '../../icons/arrow-right.svg?raw'
 import Check from '../../icons/check.svg?raw'
+import ChevronDown from '../../icons/chevron-down.svg?raw'
+import ChevronLeft from '../../icons/chevron-left.svg?raw'
+import ChevronRight from '../../icons/chevron-right.svg?raw'
+import ChevronUp from '../../icons/chevron-up.svg?raw'
 import CircleCheck from '../../icons/circle-check.svg?raw'
 import CircleClose from '../../icons/circle-close.svg?raw'
 import Close from '../../icons/close.svg?raw'
-import Components from '../../icons/components.svg?raw'
 import Copy from '../../icons/copy.svg?raw'
-import File from '../../icons/file.svg?raw'
 import Github from '../../icons/github.svg?raw'
 import Home from '../../icons/home.svg?raw'
 import Info from '../../icons/info.svg?raw'
@@ -21,16 +20,15 @@ import Warning from '../../icons/warning.svg?raw'
 
 const iconMap = {
     'alert': Alert,
-    'arrow-down': ArrowDown,
-    'arrow-left': ArrowLeft,
-    'arrow-right': ArrowRight,
     'check': Check,
+    'chevron-down': ChevronDown,
+    'chevron-left': ChevronLeft,
+    'chevron-right': ChevronRight,
+    'chevron-up': ChevronUp,
     'circle-check': CircleCheck,
     'circle-close': CircleClose,
     'close': Close,
-    'components': Components,
     'copy': Copy,
-    'file': File,
     'github': Github,
     'home': Home,
     'info': Info,

package/components/Input/Input.svelte

@@ -7,17 +7,21 @@
 
     import styles from './input.module.scss'
 
-    export let type: SvelteInputProps['type'] = 'text'
-    export let theme: SvelteInputProps['theme'] = null
-    export let label: SvelteInputProps['label'] = ''
-    export let value: SvelteInputProps['value'] = ''
-    export let subText: SvelteInputProps['subText'] = ''
-    export let className: SvelteInputProps['className'] = ''
-    export let labelClassName: SvelteInputProps['labelClassName'] = ''
-    export let onChange: SvelteInputProps['onChange'] = () => {}
-    export let onKeyUp: SvelteInputProps['onKeyUp'] = () => {}
-    export let onInput: SvelteInputProps['onInput'] = () => {}
-    export let onClick: SvelteInputProps['onClick'] = () => {}
+    let {
+        type = 'text',
+        theme,
+        label,
+        value = $bindable(''),
+        subText,
+        className,
+        labelClassName,
+        onChange,
+        onKeyUp,
+        onInput,
+        onClick,
+        children,
+        ...rest
+    }: SvelteInputProps = $props()
 
     const classes = classNames([
         styles.input,
@@ -30,7 +34,7 @@
         labelClassName
     ])
 
-    const useLabel = !!(label || subText || $$slots.default)
+    const useLabel = !!(label || subText || children)
 </script>
 
 <ConditionalWrapper
@@ -42,20 +46,20 @@
         <div class={styles.label}>{@html label}</div>
     {/if}
     <ConditionalWrapper
-        condition={$$slots.default}
+        condition={!!children}
         element="div"
         class={styles.wrapper}
     >
-        <slot />
+        {@render children?.()}
         <input
-            class={classes}
             bind:value
-            on:change={onChange}
-            on:keyup={onKeyUp}
-            on:input={onInput}
-            on:click={onClick}
+            class={classes}
+            onchange={onChange}
+            onkeyup={onKeyUp}
+            oninput={onInput}
+            onclick={onClick}
             {...{ type }}
-            {...$$restProps}
+            {...rest}
         />
     </ConditionalWrapper>
     {#if subText}

package/components/Input/input.ts

@@ -1,3 +1,9 @@
+import type { Snippet } from 'svelte'
+
+export type InputTarget = {
+    currentTarget: HTMLInputElement
+}
+
 export type InputProps = {
     type?: 'text'
         | 'email'
@@ -40,10 +46,11 @@ export type InputProps = {
 }
 
 export type SvelteInputProps = {
-    onChange?: (event: Event & { currentTarget: HTMLInputElement }) => void
-    onKeyUp?: (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => void
+    onChange?: (event: Event & InputTarget) => void
+    onKeyUp?: (event: KeyboardEvent & InputTarget) => void
     onInput?: (event: any) => void
-    onClick?: (event: MouseEvent & { currentTarget: HTMLInputElement }) => void
+    onClick?: (event: MouseEvent & InputTarget) => void
+    children?: Snippet
 } & InputProps
 
 export type ReactInputProps = {

package/components/Kbd/Kbd.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-    import type { KbdProps } from './kbd'
+    import type { SvelteKbdProps } from './kbd'
     import { keyMap } from './keyMap'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './kbd.module.scss'
 
-    export let keys: KbdProps['keys'] = []
-    export let className: KbdProps['className'] = ''
+    const {
+        keys,
+        className,
+        children
+    }: SvelteKbdProps = $props()
 
     const classes = classNames([
         styles.kbd,
@@ -15,4 +18,4 @@
     ])
 </script>
 
-<kbd class={classes}>{keys?.map(key => keyMap[key]).join('')}<slot /></kbd>
+<kbd class={classes}>{keys?.map(key => keyMap[key]).join('')}{@render children?.()}</kbd>

package/components/Kbd/kbd.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type KbdProps = {
     keys?: ('cmd'
         | 'shift'
@@ -21,6 +23,10 @@ export type KbdProps = {
     className?: string
 }
 
+export type SvelteKbdProps = {
+    children?: Snippet
+} & KbdProps
+
 export type ReactKbdProps = {
     children?: React.ReactNode
 } & KbdProps

package/components/List/List.astro

@@ -93,77 +93,82 @@ const wrapperClasses = [
 <script>
     import { dispatch } from '../../utils/event'
 
-    const lists = document.querySelectorAll('[data-id="w-list"]')
-    const searchInputs = document.querySelectorAll('[data-id="w-list-search"]')
-
-    const handleClick = (list: Element, items: Element[], event: Event) => {
-        const target = event.target as HTMLElement
-
-        if (target.dataset.value && !target.dataset.disabled) {
-            dispatch('listOnSelect', {
-                value: target.dataset.value,
-                name: target.dataset.name,
-                list
-            })
+    const addEventListeners = () => {
+        const lists = document.querySelectorAll('[data-id="w-list"]')
+        const searchInputs = document.querySelectorAll('[data-id="w-list-search"]')
+
+        const handleClick = (list: Element, items: Element[], event: Event) => {
+            const target = event.target as HTMLElement
+
+            if (target.dataset.value && !target.dataset.disabled) {
+                dispatch('listOnSelect', {
+                    value: target.dataset.value,
+                    name: target.dataset.name,
+                    list
+                })
 
-            items.forEach(item => item.removeAttribute('data-selected'))
-            target.dataset.selected = 'true'
+                items.forEach(item => item.removeAttribute('data-selected'))
+                target.dataset.selected = 'true'
+            }
         }
-    }
 
-    Array.from(lists).forEach(list => {
-        const items = Array.from(list.children)
+        Array.from(lists).forEach(list => {
+            const items = Array.from(list.children)
 
-        list.addEventListener('click', event => handleClick(list, items, event))
-        list.addEventListener('keyup', event => {
-            if ((event as KeyboardEvent).key === 'Enter') {
-                handleClick(list, items, event)
-            }
-        })
-    })
-
-    Array.from(searchInputs).forEach(element => {
-        element.addEventListener('input', event => {
-            const target = event.target as HTMLInputElement
-            const ul = target.closest('[data-id="w-list-wrapper"]')
-                ?.querySelector('ul') as HTMLUListElement
-
-            const noResults = ul.querySelector('[data-id="w-no-results"]')
-            const items = Array.from(ul.children)
-            const value = target.value.toLowerCase()
-
-            items.forEach(item => {
-                const li = item as HTMLLIElement
-                const hideItem = (!li.dataset.value?.toLowerCase().includes(value)
-                    && !li.innerText.toLowerCase().includes(value))
-                    || li.dataset.id === 'w-list-title'
-                    || li.dataset.id === 'w-no-results'
-
-                if (hideItem) {
-                    li.dataset.hidden = 'true'
-                } else if (li.dataset.id !== 'w-no-results') {
-                    li.removeAttribute('data-hidden')
+            list.addEventListener('click', event => handleClick(list, items, event))
+            list.addEventListener('keyup', event => {
+                if ((event as KeyboardEvent).key === 'Enter') {
+                    handleClick(list, items, event)
                 }
             })
+        })
 
-            const numberOfResults = items.filter(item => {
-                const li = item as HTMLLIElement
-                return li.dataset.name && !li.dataset.hidden
-            }).length
+        Array.from(searchInputs).forEach(element => {
+            element.addEventListener('input', event => {
+                const target = event.target as HTMLInputElement
+                const ul = target.closest('[data-id="w-list-wrapper"]')
+                    ?.querySelector('ul') as HTMLUListElement
 
-            if (!numberOfResults) {
-                noResults?.removeAttribute('data-hidden')
-            }
+                const noResults = ul.querySelector('[data-id="w-no-results"]')
+                const items = Array.from(ul.children)
+                const value = target.value.toLowerCase()
 
-            if (!value) {
                 items.forEach(item => {
                     const li = item as HTMLLIElement
-
-                    li.dataset.id === 'w-no-results'
-                        ? li.dataset.hidden = 'true'
-                        : li.removeAttribute('data-hidden')
+                    const hideItem = (!li.dataset.value?.toLowerCase().includes(value)
+                        && !li.innerText.toLowerCase().includes(value))
+                        || li.dataset.id === 'w-list-title'
+                        || li.dataset.id === 'w-no-results'
+
+                    if (hideItem) {
+                        li.dataset.hidden = 'true'
+                    } else if (li.dataset.id !== 'w-no-results') {
+                        li.removeAttribute('data-hidden')
+                    }
                 })
-            }
+
+                const numberOfResults = items.filter(item => {
+                    const li = item as HTMLLIElement
+                    return li.dataset.name && !li.dataset.hidden
+                }).length
+
+                if (!numberOfResults) {
+                    noResults?.removeAttribute('data-hidden')
+                }
+
+                if (!value) {
+                    items.forEach(item => {
+                        const li = item as HTMLLIElement
+
+                        li.dataset.id === 'w-no-results'
+                            ? li.dataset.hidden = 'true'
+                            : li.removeAttribute('data-hidden')
+                    })
+                }
+            })
         })
-    })
+    }
+
+    document.addEventListener('astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>