webcoreui 0.9.0 → 0.10.0

package/components/Select/Select.astro

@@ -8,7 +8,7 @@ import Popover from '../Popover/Popover.astro'
 
 import { classNames } from '../../utils/classNames'
 
-import ArrowDown from '../../icons/arrow-down.svg?raw'
+import ChevronDown from '../../icons/chevron-down.svg?raw'
 
 import styles from './select.module.scss'
 
@@ -56,7 +56,7 @@ const inputRestProps = Object.fromEntries(
     labelClassName={classes}
     {...inputRestProps}
 >
-    <Fragment set:html={ArrowDown} />
+    <Fragment set:html={ChevronDown} />
 </Input>
 {position === 'modal'
     ? (
@@ -81,78 +81,85 @@ const inputRestProps = Object.fromEntries(
     import { modal } from '../../utils/modal'
     import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
 
-    const selects = document.querySelectorAll('[data-id^="w-select"]')
-    let focusByTab = false
+    const addEventListeners = () => {
+        const selects = document.querySelectorAll('[data-id^="w-select"]')
+        let focusByTab = false
 
-    on(document, 'keydown', (event: KeyboardEvent) => {
-        if (event.key === 'Tab') {
-            focusByTab = true
-        }
-    })
-
-    on(document, 'mousedown', () => focusByTab = false)
-
-    Array.from(selects).forEach(select => {
-        const selectElement = select as HTMLElement
-        const name = selectElement.dataset.id!.split('w-select-')[1]
-        const position = selectElement.dataset.position
-
-        if (position === 'modal') {
-            modal({
-                trigger: `[data-id="${selectElement.dataset.id}"]`,
-                modal: `[data-id="w-options-${name}"]`,
-                onOpen: ({ modal }) => {
-                    const search = modal.querySelector('input')
+        on(document, 'keydown', (event: KeyboardEvent) => {
+            if (event.key === 'Tab') {
+                focusByTab = true
+            }
+        })
 
-                    if (search) {
-                        search.focus()
+        on(document, 'mousedown', () => focusByTab = false)
+
+        Array.from(selects).forEach(select => {
+            const selectElement = select as HTMLElement
+            const name = selectElement.dataset.id!.split('w-select-')[1]
+            const position = selectElement.dataset.position
+
+            if (position === 'modal') {
+                modal({
+                    trigger: `[data-id="${selectElement.dataset.id}"]`,
+                    modal: `[data-id="w-options-${name}"]`,
+                    onOpen: ({ modal }) => {
+                        const search = modal.querySelector('input')
+
+                        if (search) {
+                            search.focus()
+                        }
+                    },
+                    onClose(event) {
+                        dispatch('selectOnClose', event)
                     }
-                },
-                onClose(event) {
-                    dispatch('selectOnClose', event)
-                }
-            })
-        } else {
-            const resize = debounce(() => {
-                const { width } = selectElement.getBoundingClientRect()
-                const dialogElement = document.querySelector(`[data-id="w-options-${name}"]`) as HTMLDialogElement
-
-                if (dialogElement) {
-                    dialogElement.style.width = `${width}px`
-                }
-            })
-
-            new ResizeObserver(() => resize()).observe(document.body)
-
-            popover({
-                trigger: `[data-id="${selectElement.dataset.id}"]`,
-                popover: `[data-id="w-options-${name}"]`,
-                position: position as PopoverPosition || 'bottom',
-                onOpen({ popover }) {
-                    const search = popover.querySelector('input')
-
-                    if (search) {
-                        search.focus()
-                    } else {
-                        popover.focus()
+                })
+            } else {
+                const resize = debounce(() => {
+                    const { width } = selectElement.getBoundingClientRect()
+                    const dialogElement = document.querySelector(`[data-id="w-options-${name}"]`) as HTMLDialogElement
+
+                    if (dialogElement) {
+                        dialogElement.style.width = `${width}px`
                     }
-                },
-                onClose(event) {
-                    dispatch('selectOnClose', event)
+                })
+
+                new ResizeObserver(() => resize()).observe(document.body)
+
+                popover({
+                    trigger: `[data-id="${selectElement.dataset.id}"]`,
+                    popover: `[data-id="w-options-${name}"]`,
+                    position: position as PopoverPosition || 'bottom',
+                    onOpen({ popover }) {
+                        const search = popover.querySelector('input')
+
+                        if (search) {
+                            search.focus()
+                        } else {
+                            popover.focus()
+                        }
+                    },
+                    onClose(event) {
+                        dispatch('selectOnClose', event)
+                    }
+                })
+            }
+
+            on(selectElement, 'focus', (event: Event) => {
+                if (focusByTab) {
+                    (event.currentTarget as HTMLInputElement).click()
                 }
             })
-        }
-
-        on(selectElement, 'focus', (event: Event) => {
-            if (focusByTab) {
-                (event.currentTarget as HTMLInputElement).click()
-            }
         })
-    })
+    }
 
     listen('listOnSelect', payload => {
         const { name, list } = payload
         const dialog = list.closest('dialog')
+
+        if (!dialog) {
+            return
+        }
+
         const popoverId = dialog.dataset.id
         const selectName = popoverId.split('w-options-')[1]
         const selectId = `[data-id="w-select-${selectName}"]`
@@ -169,4 +176,7 @@ const inputRestProps = Object.fromEntries(
             select: selectName
         })
     })
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Select/Select.svelte

@@ -13,26 +13,29 @@
     import { modal } from '../../utils/modal'
     import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
 
-    import ArrowDown from '../../icons/arrow-down.svg?raw'
+    import ChevronDown from '../../icons/chevron-down.svg?raw'
 
     import styles from './select.module.scss'
 
     import type { ListEventType, ListProps } from '../List/list'
 
-    export let name: SvelteSelectProps['name'] = ''
-    export let value: SvelteSelectProps['value'] = ''
-    export let placeholder: SvelteSelectProps['placeholder'] = ''
-    export let label: SvelteSelectProps['label'] = ''
-    export let subText: SvelteSelectProps['subText'] = ''
-    export let disabled: SvelteSelectProps['disabled'] = false
-    export let updateValue: SvelteSelectProps['updateValue'] = true
-    export let position: SvelteSelectProps['position'] = 'bottom'
-    export let className: SvelteSelectProps['className'] = ''
-    export let onChange: SvelteSelectProps['onChange'] = () => {}
-    export let onClose: SvelteSelectProps['onClose'] = () => {}
+    const {
+        name,
+        value,
+        placeholder,
+        label,
+        subText,
+        disabled,
+        updateValue = true,
+        position = 'bottom',
+        className,
+        onChange,
+        onClose,
+        ...rest
+    }: SvelteSelectProps = $props()
 
     let popoverInstance: any
-    let val: string
+    let val: string | undefined = $state('')
     let focusByTab = false
 
     const classes = classNames([
@@ -46,7 +49,7 @@
         styles.popover
     ])
 
-    const inferredValue = $$restProps.itemGroups
+    const inferredValue = rest.itemGroups
         .map((group: ListProps['itemGroups'][0]) => group.items)
         .flat()
         .find((item: ListProps['itemGroups'][0]['items'][0]) => item.value === value)?.name
@@ -54,7 +57,7 @@
     val = (value && inferredValue) ? inferredValue : value
 
     const inputRestProps = Object.fromEntries(
-        Object.entries($$restProps).filter(([key]) => key.includes('data'))
+        Object.entries(rest).filter(([key]) => key.includes('data'))
     )
 
     const select = (event: ListEventType) => {
@@ -100,10 +103,12 @@
             const resize = debounce(() => {
                 const selectElement = document.querySelector(`.w-select-${name}`) as HTMLInputElement
 
-                const { width } = selectElement.getBoundingClientRect()
-                const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
+                if (selectElement) {
+                    const { width } = selectElement.getBoundingClientRect()
+                    const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
 
-                dialogElement.style.width = `${width}px`
+                    dialogElement.style.width = `${width}px`
+                }
             })
 
             observer = new ResizeObserver(() => resize())
@@ -144,24 +149,24 @@
     value={val}
     readonly={true}
     disabled={disabled}
-    placeholder={placeholder || null}
+    placeholder={placeholder}
     label={label}
     subText={subText}
     className={`w-select-${name}`}
     labelClassName={classes}
     {...inputRestProps}
 >
-    {@html ArrowDown}
+    {@html ChevronDown}
 </Input>
 {#if position === 'modal'}
     <Modal
         className={popoverClasses}
         showCloseIcon={false}
     >
-        <List onSelect={select} {...$$restProps} />
+        <List onSelect={select} {...rest} />
     </Modal>
 {:else}
     <Popover className={popoverClasses}>
-        <List onSelect={select} {...$$restProps} />
+        <List onSelect={select} {...rest} />
     </Popover>
 {/if}

package/components/Select/Select.tsx

@@ -12,7 +12,7 @@ import { on } from '../../utils/DOMUtils'
 import { modal } from '../../utils/modal'
 import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
 
-import ArrowDown from '../../icons/arrow-down.svg?raw'
+import ChevronDown from '../../icons/chevron-down.svg?raw'
 
 import styles from './select.module.scss'
 
@@ -99,10 +99,12 @@ const Select = ({
                 const resize = debounce(() => {
                     const selectElement = document.querySelector(`.w-select-${name}`) as HTMLInputElement
 
-                    const { width } = selectElement.getBoundingClientRect()
-                    const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
+                    if (selectElement) {
+                        const { width } = selectElement.getBoundingClientRect()
+                        const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
 
-                    dialogElement.style.width = `${width}px`
+                        dialogElement.style.width = `${width}px`
+                    }
                 })
 
                 observer = new ResizeObserver(() => resize())
@@ -123,7 +125,7 @@ const Select = ({
                         onClose?.(event)
                     }
                 })
-            }, 0)
+            }, 1)
         }
 
         on(`.w-select-${name}`, 'focus', (event: Event) => {
@@ -153,7 +155,7 @@ const Select = ({
                 {...inputRestProps}
             >
                 <span
-                    dangerouslySetInnerHTML={{ __html: ArrowDown }}
+                    dangerouslySetInnerHTML={{ __html: ChevronDown }}
                     style={{
                         right: 0,
                         pointerEvents: 'none'

package/components/Sheet/Sheet.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { SheetProps } from './sheet'
+    import type { SvelteSheetProps } from './sheet'
 
     import Modal from '../Modal/Modal.svelte'
 
@@ -7,8 +7,12 @@
 
     import styles from './sheet.module.scss'
 
-    export let position: SheetProps['position'] = null
-    export let className: SheetProps['className'] = ''
+    const {
+        position,
+        className,
+        children,
+        ...rest
+    }: SvelteSheetProps = $props()
 
     const classes = classNames([
         styles.sheet,
@@ -19,7 +23,7 @@
 
 <Modal
     className={classes}
-    {...$$restProps}
+    {...rest}
 >
-    <slot />
+    {@render children?.()}
 </Modal>

package/components/Sheet/sheet.ts

@@ -1,10 +1,14 @@
-import type { ModalProps, ReactModalProps } from '../Modal/modal'
+import type {
+    ModalProps,
+    ReactModalProps,
+    SvelteModalProps
+} from '../Modal/modal'
 
 export type SheetProps = {
     position?: 'left'
         | 'top'
         | 'bottom'
-        | null
 } & ModalProps
 
+export type SvelteSheetProps = SheetProps & SvelteModalProps
 export type ReactSheetProps = SheetProps & ReactModalProps

package/components/Sidebar/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { SidebarProps } from './sidebar'
+    import type { SvelteSidebarProps } from './sidebar'
 
     import Badge from '../Badge/Badge.svelte'
 
@@ -7,8 +7,11 @@
 
     import styles from './sidebar.module.scss'
 
-    export let groups: SidebarProps['groups'] = []
-    export let className: SidebarProps['className'] = ''
+    const {
+        groups,
+        children,
+        className
+    }: SvelteSidebarProps = $props()
 
     const classes = classNames([
         styles.sidebar,
@@ -46,5 +49,5 @@
         </ul>
     {/each}
 
-    <slot />
+    {@render children?.()}
 </aside>

package/components/Sidebar/sidebar.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 import type { ButtonProps } from '../Button/button'
 
 export type SidebarProps = {
@@ -16,6 +18,10 @@ export type SidebarProps = {
     className?: string
 }
 
+export type SvelteSidebarProps = {
+    children?: Snippet
+} & SidebarProps
+
 export type ReactSidebarProps = {
     children?: React.ReactNode
 } & SidebarProps

package/components/Skeleton/Skeleton.svelte

@@ -5,13 +5,15 @@
 
     import styles from './skeleton.module.scss'
 
-    export let animate: SkeletonProps['animate'] = 'wave'
-    export let type: SkeletonProps['type'] = 'rounded'
-    export let width: SkeletonProps['width'] = 0
-    export let height: SkeletonProps['height'] = 0
-    export let color: SkeletonProps['color'] = ''
-    export let waveColor: SkeletonProps['waveColor'] = ''
-    export let className: SkeletonProps['className'] = ''
+    const {
+        animate = 'wave',
+        type = 'rounded',
+        width,
+        height,
+        color,
+        waveColor,
+        className
+    }: SkeletonProps = $props()
 
     const classes = classNames([
         animate && styles[animate],

package/components/Slider/Slider.svelte

@@ -5,17 +5,19 @@
 
     import styles from './slider.module.scss'
 
-    export let min: SvelteSliderProps['min'] = 0
-    export let max: SvelteSliderProps['max'] = 100
-    export let value: SvelteSliderProps['value'] = 0
-    export let step: SvelteSliderProps['step'] = 1
-    export let disabled: SvelteSliderProps['disabled'] = false
-    export let color: SvelteSliderProps['color'] = ''
-    export let background: SvelteSliderProps['background'] = ''
-    export let thumb: SvelteSliderProps['thumb'] = ''
-    export let id: SvelteSliderProps['id'] = ''
-    export let className: SvelteSliderProps['className'] = ''
-    export let onChange: SvelteSliderProps['onChange'] = () => {}
+    const {
+        min,
+        max,
+        value,
+        step,
+        disabled,
+        color,
+        background,
+        thumb,
+        id,
+        className,
+        onChange
+    }: SvelteSliderProps = $props()
 
     const classes = classNames([
         styles.slider,
@@ -37,7 +39,7 @@
     step={step}
     disabled={disabled}
     class={classes}
-    id={id || null}
+    id={id}
     style={styleVariables || null}
-    on:change={onChange}
+    onchange={onChange}
 />

package/components/Slider/slider.module.scss

@@ -17,6 +17,10 @@ body {
     appearance: none;
     cursor: pointer;
 
+    &[disabled] {
+        cursor: no-drop;
+    }
+
     &[disabled]::-webkit-slider-runnable-track {
         @include background(primary-50);
     }

package/components/Slider/slider.ts

@@ -1,3 +1,5 @@
+import type { InputTarget } from '../Input/input'
+
 export type SliderProps = {
     min: number
     max: number
@@ -12,9 +14,9 @@ export type SliderProps = {
 }
 
 export type SvelteSliderProps = {
-    onChange?: (e: any) => any
+    onChange?: (event: Event & InputTarget) => void
 } & SliderProps
 
 export type ReactSliderProps = {
-    onChange?: (e: any) => any
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 } & SliderProps

package/components/Spinner/Spinner.svelte

@@ -5,11 +5,13 @@
 
     import styles from './spinner.module.scss'
 
-    export let color: SpinnerProps['color'] = ''
-    export let width: SpinnerProps['width'] = 0
-    export let speed: SpinnerProps['speed'] = 0
-    export let size: SpinnerProps['size'] = 0
-    export let dashArray: SpinnerProps['dashArray'] = 0
+    const {
+        color,
+        width,
+        speed,
+        size,
+        dashArray
+    }: SpinnerProps = $props()
 
     const classes = classNames([
         styles.spinner,

package/components/Spoiler/Spoiler.astro

@@ -39,12 +39,17 @@ const style = color
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-spoiler"]', 'click', (event: Event) => {
-        const target = event.currentTarget as HTMLDivElement
-
-        target.dataset.visible = 'true'
-        target.removeAttribute('data-tooltip')
-        target.removeAttribute('role')
-        target.removeAttribute('tabindex')
-    }, true)
+    const addEventListeners = () => {
+        on('[data-id="w-spoiler"]', 'click', (event: Event) => {
+            const target = event.currentTarget as HTMLDivElement
+
+            target.dataset.visible = 'true'
+            target.removeAttribute('data-tooltip')
+            target.removeAttribute('role')
+            target.removeAttribute('tabindex')
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Spoiler/Spoiler.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
-    import type { SpoilerProps } from './spoiler'
+    import type { SvelteSpoilerProps } from './spoiler'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './spoiler.module.scss'
 
-    export let color: SpoilerProps['color'] = ''
-    export let animated: SpoilerProps['animated'] = true
-    export let block: SpoilerProps['block'] = false
-    export let tooltip: SpoilerProps['tooltip'] = ''
-    export let tooltipPosition: SpoilerProps['tooltipPosition'] = null
+    const {
+        color,
+        animated = true,
+        block,
+        tooltip,
+        tooltipPosition,
+        children
+    }: SvelteSpoilerProps = $props()
 
     const classes = classNames([
         styles.spoiler,
@@ -34,12 +37,12 @@
 <span
     class={classes}
     style={style}
-    data-tooltip={tooltip || null}
+    data-tooltip={tooltip}
     data-position={tooltipPosition}
     role="button"
     tabindex="0"
-    on:click={toggle}
-    on:keyup={toggle}
+    onclick={toggle}
+    onkeyup={toggle}
 >
-    <slot />
+    {@render children?.()}
 </span>

package/components/Spoiler/spoiler.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type SpoilerProps = {
     color?: string
     animated?: boolean
@@ -6,6 +8,10 @@ export type SpoilerProps = {
     tooltipPosition?: 'bottom' | null
 }
 
+export type SvelteSpoilerProps = {
+    children: Snippet
+} & SpoilerProps
+
 export type ReactSpoilerProps = {
     children: React.ReactNode
 } & SpoilerProps

package/components/Stepper/Stepper.svelte

@@ -7,13 +7,15 @@
 
     import styles from './stepper.module.scss'
 
-    export let items: StepperProps['items'] = []
-    export let color: StepperProps['color'] = ''
-    export let completedColor: StepperProps['completedColor'] = ''
-    export let activeColor: StepperProps['activeColor'] = ''
-    export let borderless: StepperProps['vertical'] = false
-    export let vertical: StepperProps['vertical'] = false
-    export let className: StepperProps['className'] = ''
+    const {
+        items,
+        color,
+        completedColor,
+        activeColor,
+        borderless,
+        vertical,
+        className
+    }: StepperProps = $props()
 
     const classes = classNames([
         styles.stepper,