webcoreui 0.8.1 → 0.10.0

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],
@@ -21,8 +23,8 @@
     ])
 
     const styleVariables = classNames([
-        width && `width: ${width}px;`,
-        height && `height: ${height}px;`,
+        width && `max-width: ${width}px;`,
+        height && `max-height: ${height}px;`,
         color && `--w-skeleton-color: ${color};`,
         waveColor && `--w-skeleton-wave-color: ${waveColor};`
     ])

package/components/Skeleton/Skeleton.tsx

@@ -22,8 +22,8 @@ const Skeleton = ({
     ])
 
     const styleVariables = {
-        ...(width && { width: `${width}px` }),
-        ...(height && { height: `${height}px` }),
+        ...(width && { maxWidth: `${width}px` }),
+        ...(height && { maxHeight: `${height}px` }),
         ...(color && { '--w-skeleton-color': color }),
         ...(waveColor && { '--w-skeleton-wave-color': waveColor })
     } as React.CSSProperties

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,

package/components/Switch/Switch.astro

@@ -16,7 +16,8 @@ const {
     small,
     square,
     disabled,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -35,7 +36,7 @@ const styleVariables = classNames([
 ---
 
 <label class:list={classes} style={styleVariables}>
-    <input type="checkbox" checked={toggled} disabled={disabled} />
+    <input type="checkbox" checked={toggled} disabled={disabled} {...rest} />
     <span class={styles.toggle}></span>
     {label && <span class={styles.label}>{label}</span>}
 </label>

package/components/Switch/Switch.svelte

@@ -5,16 +5,19 @@
 
     import styles from './switch.module.scss'
 
-    export let label: SvelteSwitchProps['label'] = ''
-    export let toggled: SvelteSwitchProps['toggled'] = false
-    export let offColor: SvelteSwitchProps['offColor'] = ''
-    export let onColor: SvelteSwitchProps['onColor'] = ''
-    export let reverse: SvelteSwitchProps['reverse'] = false
-    export let small: SvelteSwitchProps['small'] = false
-    export let square: SvelteSwitchProps['square'] = false
-    export let disabled: SvelteSwitchProps['disabled'] = false
-    export let className: SvelteSwitchProps['className'] = ''
-    export let onClick: SvelteSwitchProps['onClick'] = () => {}
+    const {
+        label,
+        toggled,
+        offColor,
+        onColor,
+        reverse,
+        small,
+        square,
+        disabled,
+        className,
+        onClick,
+        ...rest
+    }: SvelteSwitchProps = $props()
 
     const classes = classNames([
         styles.switch,
@@ -36,7 +39,8 @@
         type="checkbox"
         checked={toggled}
         disabled={disabled}
-        on:click={onClick}
+        onclick={onClick}
+        {...rest}
     />
     <span class={styles.toggle}></span>
     {#if label}

package/components/Switch/Switch.tsx

@@ -15,7 +15,8 @@ const Switch = ({
     square,
     disabled,
     className,
-    onClick
+    onClick,
+    ...rest
 }: ReactSwitchProps) => {
     const classes = classNames([
         styles.switch,
@@ -38,6 +39,7 @@ const Switch = ({
                 defaultChecked={toggled}
                 disabled={disabled}
                 onClick={onClick}
+                {...rest}
             />
             <span className={styles.toggle}></span>
             {label && <span className={styles.label}>{label}</span>}

package/components/Switch/switch.ts

@@ -10,6 +10,7 @@ export type SwitchProps = {
     onColor?: string
     offColor?: string
     className?: string
+    [key: string]: any
 }
 
 export type SvelteSwitchProps = {

package/components/Table/Table.svelte

@@ -5,15 +5,17 @@
 
     import styles from './table.module.scss'
 
-    export let headings: TableProps['headings'] = []
-    export let footer: TableProps['footer'] = []
-    export let data: TableProps['data'] = []
-    export let hover: TableProps['hover'] = false
-    export let striped: TableProps['striped'] = null
-    export let offsetStripe: TableProps['offsetStripe'] = false
-    export let compact: TableProps['compact'] = false
-    export let maxHeight: TableProps['maxHeight'] = ''
-    export let className: TableProps['className'] = ''
+    const {
+        headings,
+        footer,
+        data,
+        hover,
+        striped,
+        offsetStripe,
+        compact,
+        maxHeight,
+        className
+    }: TableProps = $props()
 
     const classes = classNames([
         styles.table,

package/components/Table/table.ts

@@ -3,7 +3,7 @@ export type TableProps = {
     footer?: string[]
     data: string[][]
     hover?: boolean
-    striped?: 'column' | 'row' | null
+    striped?: 'column' | 'row'
     offsetStripe?: boolean
     compact?: boolean
     maxHeight?: string

package/components/Tabs/Tabs.astro

@@ -42,10 +42,10 @@ const classes = [
 </section>
 
 <script>
-    const tabs = document.querySelectorAll('[data-id="w-tabs"]')
+    import { on } from '../../utils/DOMUtils'
 
-    Array.from(tabs).forEach(element => {
-        element.addEventListener('click', event => {
+    const addEventListeners = () => {
+        on('[data-id="w-tabs"]', 'click', (event: Event) => {
             const target = event.target as HTMLDivElement
 
             if (target.dataset.value) {
@@ -72,6 +72,9 @@ const classes = [
                     }
                 })
             }
-        })
-    })
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Tabs/Tabs.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
-    import type { TabsProps } from './tabs'
+    import type { SvelteTabsProps } from './tabs'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './tabs.module.scss'
 
-    export let items: TabsProps['items'] = []
-    export let theme: TabsProps['theme'] = null
-    export let vertical: TabsProps['vertical'] = false
-    export let even: TabsProps['even'] = false
-    export let className: TabsProps['className'] = ''
+    const {
+        items,
+        theme,
+        vertical,
+        even,
+        className,
+        children
+    }: SvelteTabsProps = $props()
 
-    let active = ''
-    let tabContainer: HTMLDivElement
+    let active = $state('')
+    let tabContainer: HTMLDivElement | undefined = $state()
 
     const classes = classNames([
         styles.tabs,
@@ -23,7 +26,7 @@
     ])
 
     const setTab = (tab: string) => {
-        const tabs = tabContainer.querySelectorAll('[data-tab]')
+        const tabs = tabContainer!.querySelectorAll('[data-tab]')
 
         active = tab
 
@@ -44,7 +47,7 @@
                 <button
                     data-active={active ? active === item.value : item.active}
                     disabled={item.disabled}
-                    on:click={() => setTab(item.value)}
+                    onclick={() => setTab(item.value)}
                 >
                     {@html item.label}
                 </button>
@@ -52,6 +55,6 @@
         </div>
     </div>
     <div class={styles.content} bind:this={tabContainer}>
-        <slot />
+        {@render children?.()}
     </div>
 </section>

package/components/Tabs/tabs.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type TabsProps = {
     items: {
         label: string
@@ -5,12 +7,16 @@ export type TabsProps = {
         active?: boolean
         disabled?: boolean
     }[]
-    theme?: 'boxed' | 'outline' | null
+    theme?: 'boxed' | 'outline'
     vertical?: boolean
     even?: boolean
     className?: string
 }
 
+export type SvelteTabsProps = {
+    children: Snippet
+} & TabsProps
+
 export type ReactTabsProps = {
     children: React.ReactNode
 } & TabsProps

package/components/Textarea/Textarea.astro

@@ -13,7 +13,8 @@ const {
     subText,
     value = '',
     disabled,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -41,5 +42,6 @@ const useLabel = !!(label || subText)
         placeholder={placeholder}
         disabled={disabled}
         class:list={classes}
+        {...rest}
     >{value}</textarea>
 </ConditionalWrapper>

package/components/Textarea/Textarea.svelte

@@ -1,47 +1,51 @@
-<script lang="ts">
-    import type { SvelteTextareaProps } from './textarea'
-
-    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
-
-    import { classNames } from '../../utils/classNames'
-
-    import styles from './textarea.module.scss'
-
-    export let label: SvelteTextareaProps['label'] = ''
-    export let placeholder: SvelteTextareaProps['placeholder'] = ''
-    export let subText: SvelteTextareaProps['subText'] = ''
-    export let value: SvelteTextareaProps['value'] = ''
-    export let disabled: SvelteTextareaProps['disabled'] = false
-    export let className: SvelteTextareaProps['className'] = ''
-    export let onChange: SvelteTextareaProps['onChange'] = () => {}
-    export let onKeyUp: SvelteTextareaProps['onKeyUp'] = () => {}
-
-    const classes = classNames([
-        styles.textarea,
-        className
-    ])
-
-    const useLabel = !!(label || subText)
-</script>
-
-<ConditionalWrapper
-    condition={useLabel}
-    element="label"
-    class={styles['label-wrapper']}
->
-    {#if label}
-        <div class={styles.label}>{label}</div>
-    {/if}
-    <textarea
-        placeholder={placeholder}
-        disabled={disabled}
-        class={classes}
-        on:change={onChange}
-        on:keyup={onKeyUp}
-    >{value}</textarea>
-    {#if subText}
-        <div class={styles.subtext}>
-            {@html subText}
-        </div>
-    {/if}
-</ConditionalWrapper>
+<script lang="ts">
+    import type { SvelteTextareaProps } from './textarea'
+
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './textarea.module.scss'
+
+    const {
+        label,
+        placeholder,
+        subText,
+        value = '',
+        disabled,
+        className,
+        onChange,
+        onKeyUp,
+        ...rest
+    }: SvelteTextareaProps = $props()
+
+    const classes = classNames([
+        styles.textarea,
+        className
+    ])
+
+    const useLabel = !!(label || subText)
+</script>
+
+<ConditionalWrapper
+    condition={useLabel}
+    element="label"
+    class={styles['label-wrapper']}
+>
+    {#if label}
+        <div class={styles.label}>{label}</div>
+    {/if}
+    <textarea
+        placeholder={placeholder}
+        disabled={disabled}
+        class={classes}
+        onchange={onChange}
+        onkeyup={onKeyUp}
+        {...rest}
+    >{value}</textarea>
+    {#if subText}
+        <div class={styles.subtext}>
+            {@html subText}
+        </div>
+    {/if}
+</ConditionalWrapper>

package/components/Textarea/textarea.ts

@@ -1,18 +1,24 @@
-export type TextareaProps = {
-    label?: string
-    placeholder?: string
-    subText?: string
-    value?: string
-    disabled?: boolean
-    className?: string
-}
-
-export type SvelteTextareaProps = {
-    onChange?: (e: any) => any
-    onKeyUp?: (e: any) => any
-} & TextareaProps
-
-export type ReactTextareaProps = {
-    onChange?: (e: any) => any
-    onKeyUp?: (e: any) => any
-} & TextareaProps
+type Target = {
+    target: HTMLTextAreaElement
+    currentTarget: HTMLTextAreaElement
+}
+
+export type TextareaProps = {
+    label?: string
+    placeholder?: string
+    subText?: string
+    value?: string
+    disabled?: boolean
+    className?: string
+    [key: string]: any
+}
+
+export type SvelteTextareaProps = {
+    onChange?: (event: Event & Target) => void
+    onKeyUp?: (event: KeyboardEvent & Target) => void
+} & TextareaProps
+
+export type ReactTextareaProps = {
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement> & Target) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement> & Target) => void
+} & TextareaProps