webcoreui 1.3.0 → 1.5.0-0

package/components/Slider/Slider.svelte

@@ -6,9 +6,9 @@
     import styles from './slider.module.scss'
 
     const {
-        min,
-        max,
-        value,
+        min = 0,
+        max = 100,
+        value = 0,
         step,
         disabled,
         color,
@@ -16,19 +16,20 @@
         thumb,
         id,
         className,
-        onChange
+        onChange,
+        ...rest
     }: SvelteSliderProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.slider,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         color && `--w-slider-color: ${color};`,
         background && `--w-slider-background: ${background};`,
         thumb && `--w-slider-thumb: ${thumb};`
-    ])
+    ]))
 </script>
 
 <input
@@ -42,4 +43,5 @@
     id={id}
     style={styleVariables || null}
     onchange={onChange}
+    {...rest}
 />

package/components/Slider/Slider.tsx

@@ -6,9 +6,9 @@ import { classNames } from '../../utils/classNames'
 import styles from './slider.module.scss'
 
 const Slider = ({
-    min,
-    max,
-    value,
+    min = 0,
+    max = 100,
+    value = 0,
     step,
     disabled,
     color,
@@ -16,7 +16,8 @@ const Slider = ({
     thumb,
     id,
     className,
-    onChange
+    onChange,
+    ...rest
 }: ReactSliderProps) => {
     const classes = classNames([
         styles.slider,
@@ -41,6 +42,7 @@ const Slider = ({
             id={id}
             style={styleVariables}
             onChange={onChange}
+            {...rest}
         />
 
     )

package/components/Slider/slider.module.scss

@@ -1,12 +1,10 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-slider-background: var(--w-color-primary-50);
-    --w-slider-color: var(--w-color-primary);
-    --w-slider-thumb: var(--w-color-primary-50);
-}
-
 .slider {
+    --bg: var(--w-slider-background, var(--w-color-primary-50));
+    --color: var(--w-slider-color, var(--w-color-primary));
+    --thumb: var(--w-slider-thumb, var(--w-color-primary-50));
+
     @include border-radius(xl);
     @include size('w100%');
     @include visibility(hidden);
@@ -43,30 +41,30 @@ body {
 }
 
 .slider::-webkit-slider-runnable-track {
-    @include background(var(--w-slider-background));
+    @include background(var(--bg));
 }
 
 .slider::-moz-range-track {
-    @include background(var(--w-slider-background));
+    @include background(var(--bg));
     @include size(h10px);
 }
 
 .slider::-webkit-slider-thumb {
-    @include background(var(--w-slider-thumb));
+    @include background(var(--thumb));
     @include size(10px);
     @include border-radius(max);
-    @include border(var(--w-slider-color));
+    @include border(var(--color));
 
     -webkit-appearance: none;
     appearance: none;
-    box-shadow: -995px 0 0 990px var(--w-slider-color);
+    box-shadow: -995px 0 0 990px var(--color);
 }
 
 .slider::-moz-range-thumb {
-    @include background(var(--w-slider-thumb));
+    @include background(var(--thumb));
     @include size(9px);
     @include border-radius(max);
-    @include border(var(--w-slider-color));
+    @include border(var(--color));
 
-    box-shadow: -995px 0 0 990px var(--w-slider-color);
+    box-shadow: -995px 0 0 990px var(--color);
 }

package/components/Slider/slider.ts

@@ -1,11 +1,12 @@
 import type { InputTarget } from '../Input/input'
 
 export type SliderProps = {
-    min: number
-    max: number
+    min?: number
+    max?: number
     value?: number
     step?: number
     disabled?: boolean
+    required?: boolean
     color?: string
     background?: string
     thumb?: string

package/components/SpeedDial/SpeedDial.svelte

@@ -22,13 +22,13 @@
 
     let show = $state(false)
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.dial,
         position && styles[position],
         horizontal && styles.horizontal,
         circular && styles.circular,
         className
-    ])
+    ]))
 
     const getTooltipPosition = () => {
         const positionMap = {
@@ -51,7 +51,7 @@
         const speedDial = get('[data-id="w-speed-dial"] button') as HTMLButtonElement
 
         const eventListener = (event: Event) => {
-            if (!speedDial.contains((event.target || event.currentTarget) as HTMLElement)) {
+            if (!speedDial?.contains((event.target || event.currentTarget) as HTMLElement)) {
                 show = false
             }
         }

package/components/SpeedDial/SpeedDial.tsx

@@ -51,7 +51,7 @@ const SpeedDial = ({
         const speedDial = get('[data-id="w-speed-dial"] button') as HTMLButtonElement
 
         const eventListener = (event: Event) => {
-            if (!speedDial.contains((event.target || event.currentTarget) as HTMLElement)) {
+            if (!speedDial?.contains((event.target || event.currentTarget) as HTMLElement)) {
                 setShow(false)
             }
         }

package/components/SpeedDial/speeddial.module.scss

@@ -1,10 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-speed-dial-size: 40px;
-}
-
 .dial {
+    --size: var(--w-speed-dial-size, 40px);
+
     @include layout(flex, column-reverse, center, xs);
     @include position(fixed, b20px, r20px);
 
@@ -54,7 +52,7 @@ body {
 .trigger {
     @include layout(flex, column);
     @include typography(bold);
-    @include size(var(--w-speed-dial-size));
+    @include size(var(--size));
 
     user-select: none;
 
@@ -85,7 +83,7 @@ body {
 
     .button {
         @include layout(flex, column, xs);
-        @include size(var(--w-speed-dial-size));
+        @include size(var(--size));
     
         svg {
             @include size(16px);

package/components/Spinner/Spinner.svelte

@@ -13,18 +13,18 @@
         dashArray
     }: SpinnerProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.spinner,
         dashArray && styles.dashed
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         color && `--w-spinner-color: ${color};`,
         width && `--w-spinner-width: ${width}px;`,
         speed && `--w-spinner-speed: ${speed}s;`,
         size && `--w-spinner-size: ${size}px;`,
         dashArray && `--w-spinner-dash: ${dashArray}`
-    ])
+    ]))
 </script>
 
 <svg

package/components/Spinner/spinner.module.scss

@@ -1,28 +1,26 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-spinner-color: var(--w-color-primary);
-    --w-spinner-width: 2px;
-    --w-spinner-speed: 2s;
-    --w-spinner-size: 30px;
-    --w-spinner-dash: 8;
-}
-
 .spinner {
+    --color: var(--w-spinner-color, var(--w-color-primary));
+    --width: var(--w-spinner-width, 2px);
+    --speed: var(--w-spinner-speed, 2s);
+    --size: var(--w-spinner-size, 30px);
+    --dash: var(--w-spinner-dash, 8);
+
     @include spacing(auto-none);
 
-    width: var(--w-spinner-size);
-    height: var(--w-spinner-size);
-    animation: rotate var(--w-spinner-speed) linear infinite;
+    width: var(--size);
+    height: var(--size);
+    animation: rotate var(--speed) linear infinite;
 
     &.dashed .path {
-        stroke-dasharray: var(--w-spinner-dash);
+        stroke-dasharray: var(--dash);
         animation: none;
     }
 
     .path {
-        stroke: var(--w-spinner-color);
-        stroke-width: var(--w-spinner-width);
+        stroke: var(--color);
+        stroke-width: var(--width);
         animation: dash 1.5s ease-in-out infinite;
         stroke-linecap: round;
     }
@@ -48,3 +46,4 @@ body {
         stroke-dashoffset: -124;
     }
 }
+

package/components/Spoiler/Spoiler.svelte

@@ -14,15 +14,16 @@
         children
     }: SvelteSpoilerProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.spoiler,
         animated && styles.anim,
         block && styles.block
-    ])
+    ]))
 
-    const style = color
+    const style = $derived(color
         ? `--w-spoiler-color: ${color};`
         : null
+    )
 
     const toggle = (event: MouseEvent | KeyboardEvent) => {
         const target = event.currentTarget as HTMLSpanElement

package/components/Spoiler/spoiler.module.scss

@@ -1,12 +1,10 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-spoiler-color: var(--w-color-primary);
-}
-
 span.spoiler {
+    --color: var(--w-spoiler-color, var(--w-color-primary));
+
     @include border-radius();
-    @include background(var(--w-spoiler-color));
+    @include background(var(--color));
     @include typography(hmd);
     @include visibility(inline);
 

package/components/Stepper/Stepper.svelte

@@ -17,18 +17,18 @@
         className
     }: StepperProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.stepper,
         borderless && styles.borderless,
         vertical && styles.vertical,
         className
-    ])
+    ]))
 
-    const styleVariables = [
+    const styleVariables = $derived([
         color && `--w-stepper-color-border: ${color}`,
         completedColor && `--w-stepper-color-complete: ${completedColor}`,
         activeColor && `--w-stepper-color-active: ${activeColor}`
-    ].filter(Boolean).join(';')
+    ].filter(Boolean).join(';'))
 </script>
 
 <ol class={classes} style={styleVariables || null}>

package/components/Stepper/stepper.defaults.scss

@@ -0,0 +1,5 @@
+body {
+    --w-stepper-color-border: var(--w-color-primary-50);
+    --w-stepper-color-active: var(--w-color-info);
+    --w-stepper-color-complete: var(--w-color-success);
+}

package/components/Stepper/stepper.module.scss

@@ -1,14 +1,12 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-stepper-color-border: var(--w-color-primary-50);
-    --w-stepper-color-active: var(--w-color-info);
-    --w-stepper-color-complete: var(--w-color-success);
-}
-
 $size: 20px;
 
 .stepper {
+    --border: var(--w-stepper-color-border, var(--w-color-primary-50));
+    --active: var(--w-stepper-color-active, var(--w-color-info));
+    --complete: var(--w-stepper-color-complete, var(--w-color-success));
+
     @include layout(flex, default, column);
     @include spacing(0);
     @include size('w100%');
@@ -16,7 +14,7 @@ $size: 20px;
     list-style-type: none;
 
     &:not(.borderless) .number {
-        border: 2px solid var(--w-stepper-color-border);
+        border: 2px solid var(--border);
     }
 
     li {
@@ -31,7 +29,7 @@ $size: 20px;
 
             &::before {
                 @include position(absolute, l16px);
-                @include background(var(--w-stepper-color-border));
+                @include background(var(--border));
                 @include size(w2px);
 
                 top: -50%;
@@ -42,18 +40,18 @@ $size: 20px;
 
             &.completed::before,
             &.active::before {
-                @include background(var(--w-stepper-color-complete));
+                @include background(var(--complete));
             }
         }
 
         &.active .number {
-            border-color: var(--w-stepper-color-active);
-            color: var(--w-stepper-color-active);
+            border-color: var(--active);
+            color: var(--active);
         }
 
         &.completed .number {
-            border-color: var(--w-stepper-color-complete);
-            color: var(--w-stepper-color-complete);
+            border-color: var(--complete);
+            color: var(--complete);
         }
 
         .number {

package/components/Switch/Switch.svelte

@@ -16,22 +16,23 @@
         disabled,
         className,
         onClick,
+        onChange,
         ...rest
     }: SvelteSwitchProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.switch,
         reverse && styles.reverse,
         small && styles.small,
         square && styles.square,
         disabled && styles.disabled,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         offColor && `--w-switch-off-color: ${offColor};`,
         onColor && `--w-switch-on-color: ${onColor};`
-    ])
+    ]))
 </script>
 
 <label class={classes} style={styleVariables || null}>
@@ -40,6 +41,7 @@
         checked={toggled}
         disabled={disabled}
         onclick={onClick}
+        onchange={onChange}
         {...rest}
     />
     <span class={styles.toggle}></span>

package/components/Switch/Switch.tsx

@@ -15,7 +15,6 @@ const Switch = ({
     square,
     disabled,
     className,
-    onClick,
     ...rest
 }: ReactSwitchProps) => {
     const classes = classNames([
@@ -38,7 +37,6 @@ const Switch = ({
                 type="checkbox"
                 defaultChecked={toggled}
                 disabled={disabled}
-                onClick={onClick}
                 {...rest}
             />
             <span className={styles.toggle}></span>

package/components/Switch/switch.module.scss

@@ -1,13 +1,12 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-switch-off-color: var(--w-color-primary-50);
-    --w-switch-on-color: var(--w-color-primary);
-}
-
 .switch {
+    --off-color: var(--w-switch-off-color, var(--w-color-primary-50));
+    --on-color: var(--w-switch-on-color, var(--w-color-primary));
+
     @include layout(inline-flex, v-center, sm);
     cursor: pointer;
+    user-select: none;
 
     &.reverse {
         @include layout(row-reverse);
@@ -52,7 +51,7 @@ body {
         @include visibility(none);
 
         &:checked + span {
-            @include background(var(--w-switch-on-color));
+            @include background(var(--on-color));
     
             &::before {
                 transform: translateX(30px);
@@ -65,7 +64,7 @@ body {
         @include position(relative);
         @include size(w60px, h30px);
         @include border-radius(xl);
-        @include background(var(--w-switch-off-color));
+        @include background(var(--off-color));
 
         &::before {
             @include transition(transform);

package/components/Switch/switch.ts

@@ -1,4 +1,4 @@
-import type { MouseEventHandler } from 'svelte/elements'
+import type { ChangeEventHandler, MouseEventHandler } from 'svelte/elements'
 
 export type SwitchProps = {
     label?: string
@@ -14,9 +14,11 @@ export type SwitchProps = {
 }
 
 export type SvelteSwitchProps = {
+    onChange?: ChangeEventHandler<HTMLInputElement>
     onClick?: MouseEventHandler<HTMLInputElement>
 } & SwitchProps
 
 export type ReactSwitchProps = {
+    onChange?: React.ChangeEventHandler<HTMLInputElement>
     onClick?: React.MouseEventHandler<HTMLInputElement>
 } & SwitchProps

package/components/Table/Table.svelte

@@ -17,7 +17,7 @@
         className
     }: TableProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.table,
         hover && styles.hover,
         striped && styles[`striped-${striped}s`],
@@ -25,7 +25,7 @@
         compact && styles.compact,
         maxHeight && styles.scroll,
         className
-    ])
+    ]))
 </script>
 
 <div class={classes} style={maxHeight ? `max-height:${maxHeight}` : null}>

package/components/Tabs/Tabs.svelte

@@ -17,13 +17,13 @@
     let active = $state('')
     let tabContainer: HTMLDivElement | undefined = $state()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.tabs,
         theme && styles[theme],
         vertical && styles.vertical,
         even && styles.even,
         className
-    ])
+    ]))
 
     const setTab = (tab: string) => {
         const tabs = tabContainer!.querySelectorAll('[data-tab]')

package/components/Textarea/Textarea.svelte

@@ -16,15 +16,16 @@
         className,
         onChange,
         onKeyUp,
+        onInput,
         ...rest
     }: SvelteTextareaProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.textarea,
         className
-    ])
+    ]))
 
-    const useLabel = !!(label || subText)
+    const useLabel = $derived(!!(label || subText))
 </script>
 
 <ConditionalWrapper
@@ -39,6 +40,7 @@
         placeholder={placeholder}
         disabled={disabled}
         class={classes}
+        oninput={onInput}
         onchange={onChange}
         onkeyup={onKeyUp}
         {...rest}

package/components/Textarea/textarea.ts

@@ -1,5 +1,4 @@
-type Target = {
-    target: HTMLTextAreaElement
+export type TextareaTarget = {
     currentTarget: HTMLTextAreaElement
 }
 
@@ -14,11 +13,13 @@ export type TextareaProps = {
 }
 
 export type SvelteTextareaProps = {
-    onChange?: (event: Event & Target) => void
-    onKeyUp?: (event: KeyboardEvent & Target) => void
+    onInput?: (event: Event & TextareaTarget) => void
+    onChange?: (event: Event & TextareaTarget) => void
+    onKeyUp?: (event: KeyboardEvent & TextareaTarget) => void
 } & TextareaProps
 
 export type ReactTextareaProps = {
-    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement> & Target) => void
-    onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement> & Target) => void
+    onInput?: (event: React.InputEvent<HTMLTextAreaElement>) => void
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
 } & TextareaProps

package/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -20,15 +20,15 @@
     let currentTheme = $state('')
     let toggled = false
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.switcher,
         toggle && styles.toggle,
         className
-    ])
+    ]))
 
-    const primaryTheme = themes[Object.keys(themes)[0]]
-    const secondaryTheme = themes[Object.keys(themes)[1]]
-    const useIcons = primaryIcon && secondaryIcon
+    const primaryTheme = $derived(themes[Object.keys(themes)[0]])
+    const secondaryTheme = $derived(themes[Object.keys(themes)[1]])
+    const useIcons = $derived(primaryIcon && secondaryIcon)
 
     const setTheme = (theme: string | number) => {
         if (typeof theme === 'number') {