webcoreui 1.3.0 → 1.4.0

package/components/ImageLoader/ImageLoader.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import type { ImageLoaderProps } from './imageloader'
+
+    import Image from '../Image/Image.svelte'
+    import Skeleton from '../Skeleton/Skeleton.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './imageloader.module.scss'
+
+    const {
+        fallback,
+        animate,
+        type,
+        width,
+        height,
+        color,
+        waveColor,
+        className,
+        ...rest
+    }: ImageLoaderProps = $props()
+
+    let container: HTMLDivElement
+
+    const styleVariables = classNames([
+        `width: ${width}px;`,
+        `height: ${height}px;`
+    ])
+
+    onMount(() => {
+        const img = container.querySelector<HTMLImageElement>('img')
+        const skeleton = container.querySelector<HTMLDivElement>('div')
+
+        if (!img) {
+            return
+        }
+
+        const handleError = () => {
+            img.src = img.dataset.fallback || img.src
+            skeleton?.remove()
+        }
+
+        if (img.complete) {
+            img.naturalWidth === 0 ? handleError() : skeleton?.remove()
+
+            return
+        }
+
+        img.addEventListener('load', () => skeleton?.remove(), { once: true })
+        img.addEventListener('error', handleError, { once: true })
+    })
+</script>
+
+<div class={styles.loader} style={styleVariables} bind:this={container}>
+    <Skeleton
+        animate={animate}
+        type={type}
+        width={Number(width)}
+        height={Number(height)}
+        color={color}
+        waveColor={waveColor}
+        className={className}
+    />
+    <Image
+        width={width}
+        height={height}
+        className={className}
+        data-fallback={fallback}
+        {...rest}
+    />
+</div>

package/components/ImageLoader/ImageLoader.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from 'react'
+import type { ImageLoaderProps } from './imageloader'
+
+import Image from '../Image/Image.tsx'
+import Skeleton from '../Skeleton/Skeleton.tsx'
+
+import styles from './imageloader.module.scss'
+
+const ImageLoader = ({
+    fallback,
+    animate,
+    type,
+    width,
+    height,
+    color,
+    waveColor,
+    className,
+    ...rest
+}: ImageLoaderProps) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const styleVariables = {
+        width,
+        height
+    }
+
+    useEffect(() => {
+        if (!containerRef.current) {
+            return
+        }
+
+        const img = containerRef.current.querySelector<HTMLImageElement>('img')
+        const skeleton = containerRef.current.querySelector<HTMLDivElement>('div')
+
+        if (!img) {
+            return
+        }
+
+        const removeSkeleton = () => skeleton?.remove()
+
+        const handleError = () => {
+            img.src = img.dataset.fallback || img.src
+            removeSkeleton()
+        }
+
+        if (img.complete) {
+            img.naturalWidth === 0 ? handleError() : removeSkeleton()
+
+            return
+        }
+
+        img.addEventListener('load', removeSkeleton, { once: true })
+        img.addEventListener('error', handleError, { once: true })
+
+        return () => {
+            img.removeEventListener('load', removeSkeleton)
+            img.removeEventListener('error', handleError)
+        }
+    }, [containerRef])
+
+    return (
+        <div className={styles.loader} style={styleVariables} ref={containerRef}>
+            <Skeleton
+                animate={animate}
+                type={type}
+                width={Number(width)}
+                height={Number(height)}
+                color={color}
+                waveColor={waveColor}
+                className={className}
+            />
+            <Image
+                width={width}
+                height={height}
+                className={className}
+                data-fallback={fallback}
+                {...rest}
+            />
+        </div>
+    )
+}
+
+export default ImageLoader

package/components/ImageLoader/imageloader.module.scss

@@ -0,0 +1,13 @@
+@use '../../scss/config.scss' as *;
+
+.loader {
+    @include position(relative);
+
+    div + img {
+        @include visibility(0);
+    }
+
+    img {
+        @include position(absolute, t0, l0);
+    }
+}

package/components/ImageLoader/imageloader.ts

@@ -0,0 +1,6 @@
+import type { ImageProps } from '../Image/image'
+import type { SkeletonProps } from '../Skeleton/skeleton'
+
+export type ImageLoaderProps = {
+    fallback?: string
+} & ImageProps & Omit<SkeletonProps, 'width' | 'height'>

package/components/Input/input.ts

@@ -48,7 +48,7 @@ export type InputProps = {
 export type SvelteInputProps = {
     onChange?: (event: Event & InputTarget) => void
     onKeyUp?: (event: KeyboardEvent & InputTarget) => void
-    onInput?: (event: any) => void
+    onInput?: (event: Event & InputTarget) => void
     onClick?: (event: MouseEvent & InputTarget) => void
     children?: Snippet
 } & InputProps
@@ -56,7 +56,7 @@ export type SvelteInputProps = {
 export type ReactInputProps = {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
-    onInput?: (event: React.FormEvent<HTMLInputElement>) => void
+    onInput?: (event: React.InputEvent<HTMLInputElement>) => void
     onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
     children?: React.ReactNode
 } & InputProps

package/components/Popover/popover.module.scss

@@ -10,9 +10,11 @@
     @include border-radius(md);
     @include size(w300px);
     @include position('t-100%');
+    @include transition();
 
     transform: translateY(-5px);
     pointer-events: none;
+    will-change: transform, opacity;
 
     &.transparent {
         @include spacing(p0);
@@ -20,8 +22,8 @@
         @include border(0);
     }
 
-    &[data-show] {
-        @include transition();
+    &[data-no-transition] {
+        @include transition(none);
     }
 
     &[data-show="true"] {

package/components/RangeSlider/RangeSlider.svelte

@@ -173,12 +173,12 @@
             condition={!!interactiveLabels}
             onclick={(e: Event) => handleClick(e, 'right')}
         >
-            {#if maxIcon}
-                {@html maxIcon}
-            {/if}
             {#if dynamicMaxLabel}
                 <span style={labelStyle}>{dynamicMaxLabel}</span>
             {/if}
+            {#if maxIcon}
+                {@html maxIcon}
+            {/if}
         </ConditionalWrapper>
     </div>
 

package/components/RangeSlider/RangeSlider.tsx

@@ -187,13 +187,13 @@ const RangeSlider = ({
                         <button onClick={(e: React.MouseEvent) => handleClick(e, 'right')}>{children}</button>
                     )}
                 >
+                    {dynamicMaxLabel && <span style={labelStyle}>{dynamicMaxLabel}</span>}
                     {maxIcon && (
                         <span
                             dangerouslySetInnerHTML={{ __html: maxIcon }}
                             style={{ height: 18 }}
                         />
                     )}
-                    {dynamicMaxLabel && <span style={labelStyle}>{dynamicMaxLabel}</span>}
                 </ConditionalWrapper>
             </div>
 

package/components/Switch/Switch.svelte

@@ -16,6 +16,7 @@
         disabled,
         className,
         onClick,
+        onChange,
         ...rest
     }: SvelteSwitchProps = $props()
 
@@ -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

@@ -8,6 +8,7 @@ body {
 .switch {
     @include layout(inline-flex, v-center, sm);
     cursor: pointer;
+    user-select: none;
 
     &.reverse {
         @include layout(row-reverse);

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/Textarea/Textarea.svelte

@@ -16,6 +16,7 @@
         className,
         onChange,
         onKeyUp,
+        onInput,
         ...rest
     }: SvelteTextareaProps = $props()
 
@@ -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.module.scss

@@ -38,6 +38,7 @@ body {
     width: var(--w-theme-switcher-size);
     height: var(--w-theme-switcher-size);
     cursor: pointer;
+    user-select: none;
 
     &.icons {
         @include transition(opacity);

package/components/ThemeSwitcher/themeswitcher.ts

@@ -12,6 +12,7 @@ export type ThemeSwitcherProps = {
 export type SvelteThemeSwitcherProps = {
     primaryIcon?: Snippet
     secondaryIcon?: Snippet
+    children?: Snippet
 } & ThemeSwitcherProps
 
 export type ReactThemeSwitcherProps = {

package/index.d.ts

@@ -86,7 +86,7 @@ export type ModalCallback = {
 }
 
 export type Modal = {
-    trigger: string
+    trigger?: string
     modal: string
     onOpen?: (args: ModalCallback) => unknown
     onClose?: (args: ModalCallback) => unknown
@@ -105,6 +105,12 @@ export type PopoverPosition = 'top'
     | 'bottom-start'
     | 'bottom-end'
 
+export type PopoverInstance = {
+    close: () => void
+    destroy: () => void
+    remove: () => void
+}
+
 export type PopoverCallback = {
     trigger: HTMLElement
     popover: HTMLElement
@@ -152,7 +158,10 @@ declare module 'webcoreui' {
         cancel: () => void
     }
 
-    export const get: (selector: string, all?: boolean) => Element | NodeListOf<Element> | null
+    export const get: <T extends Element = Element>(
+        selector: string,
+        all?: boolean
+    ) => T | NodeListOf<T> | null
     export const on: (
         selector: string | HTMLElement | Document,
         event: string,
@@ -189,9 +198,7 @@ declare module 'webcoreui' {
     export const modal: (config: Modal | string) => ModalInstance | undefined 
     export const closeModal: (modal: string) => void
 
-    export const popover: (config: Popover) => {
-        remove: () => void
-    } | void
+    export const popover: (config: Popover) => PopoverInstance | undefined
     export const closePopover: (selector: string) => void
 
     export const setDefaultTimeout: (time: number) => number

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
@@ -22,33 +22,33 @@
     },
     "devDependencies": {
         "@astrojs/check": "0.9.6",
-        "@astrojs/node": "9.5.1",
+        "@astrojs/node": "9.5.4",
         "@astrojs/react": "4.4.2",
-        "@astrojs/svelte": "7.2.2",
-        "@eslint/js": "9.39.1",
-        "@playwright/test": "1.57.0",
-        "@types/node": "24.10.1",
-        "@typescript-eslint/parser": "8.48.1",
-        "astro": "5.16.4",
-        "astro-eslint-parser": "1.2.2",
-        "eslint": "9.39.1",
-        "eslint-plugin-astro": "1.5.0",
+        "@astrojs/svelte": "7.2.5",
+        "@eslint/js": "9.39.3",
+        "@playwright/test": "1.58.2",
+        "@types/node": "25.3.0",
+        "@typescript-eslint/parser": "8.56.1",
+        "astro": "5.17.3",
+        "astro-eslint-parser": "1.3.0",
+        "eslint": "9.39.3",
+        "eslint-plugin-astro": "1.6.0",
         "eslint-plugin-react": "7.37.5",
         "eslint-plugin-simple-import-sort": "12.1.1",
-        "eslint-plugin-svelte": "3.13.1",
+        "eslint-plugin-svelte": "3.15.0",
         "husky": "9.1.7",
-        "jsdom": "27.2.0",
+        "jsdom": "28.1.0",
         "lint-staged": "16.2.7",
-        "react": "19.2.1",
-        "react-dom": "19.2.1",
-        "sass": "1.94.2",
-        "sass-true": "10.0.1",
-        "svelte": "5.45.6",
-        "svelte-eslint-parser": "1.4.1",
+        "react": "19.2.4",
+        "react-dom": "19.2.4",
+        "sass": "1.97.3",
+        "sass-true": "10.1.0",
+        "svelte": "5.53.3",
+        "svelte-eslint-parser": "1.5.1",
         "typescript": "5.9.3",
-        "typescript-eslint": "8.48.1",
-        "vite-tsconfig-paths": "5.1.4",
-        "vitest": "4.0.15"
+        "typescript-eslint": "8.56.1",
+        "vite-tsconfig-paths": "6.1.1",
+        "vitest": "4.0.18"
     },
     "exports": {
         ".": "./index.js",

package/react.d.ts

@@ -22,6 +22,8 @@ import type { ReactFooterProps as WReactFooterProps } from './components/Footer/
 import type { ReactGridProps as WReactGridProps } from './components/Grid/grid'
 import type { ReactGroupProps as WReactGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
+import type { ImageProps as WImageProps } from './components/Image/image'
+import type { ImageLoaderProps as WImageLoaderProps } from './components/ImageLoader/imageloader'
 import type { ReactInputProps as WReactInputProps } from './components/Input/input'
 import type { ReactKbdProps as WReactKbdProps } from './components/Kbd/kbd'
 import type { ReactListProps as WReactListProps } from './components/List/list'
@@ -84,6 +86,8 @@ declare module 'webcoreui/react' {
 	export const Grid: FC<WReactGridProps>
 	export const Group: FC<WReactGroupProps>
 	export const Icon: FC<WIconProps>
+	export const Image: FC<WImageProps>
+	export const ImageLoader: FC<WImageLoaderProps>
 	export const Input: FC<WReactInputProps>
 	export const Kbd: FC<WReactKbdProps>
 	export const List: FC<WReactListProps>
@@ -139,6 +143,8 @@ declare module 'webcoreui/react' {
 	export type GridProps = WReactGridProps
 	export type GroupProps = WReactGroupProps
 	export type IconProps = WIconProps
+	export type ImageProps = WImageProps
+	export type ImageLoaderProps = WImageLoaderProps
 	export type InputProps = WReactInputProps
 	export type KbdProps = WReactKbdProps
 	export type ListProps = WReactListProps

package/react.js

@@ -21,6 +21,8 @@ import FooterComponent from './components/Footer/Footer.tsx'
 import GridComponent from './components/Grid/Grid.tsx'
 import GroupComponent from './components/Group/Group.tsx'
 import IconComponent from './components/Icon/Icon.tsx'
+import ImageComponent from './components/Image/Image.tsx'
+import ImageLoaderComponent from './components/ImageLoader/ImageLoader.tsx'
 import InputComponent from './components/Input/Input.tsx'
 import KbdComponent from './components/Kbd/Kbd.tsx'
 import ListComponent from './components/List/List.tsx'
@@ -76,6 +78,8 @@ export const Footer = FooterComponent
 export const Grid = GridComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
+export const Image = ImageComponent
+export const ImageLoader = ImageLoaderComponent
 export const Input = InputComponent
 export const Kbd = KbdComponent
 export const List = ListComponent

package/scss/resets.scss

@@ -72,7 +72,9 @@
     }
 
     img {
+        @include visibility(block);
         @include border-radius();
+
         object-fit: cover;
     }
 

package/svelte.d.ts

@@ -22,6 +22,8 @@ import type { SvelteFooterProps as WSvelteFooterProps } from './components/Foote
 import type { SvelteGridProps as WSvelteGridProps } from './components/Grid/grid'
 import type { SvelteGroupProps as WSvelteGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
+import type { ImageProps as WImageProps } from './components/Image/image'
+import type { ImageLoaderProps as WImageLoaderProps } from './components/ImageLoader/imageloader'
 import type { SvelteInputProps as WSvelteInputProps } from './components/Input/input'
 import type { SvelteKbdProps as WSvelteKbdProps } from './components/Kbd/kbd'
 import type { SvelteListProps as WSvelteListProps } from './components/List/list'
@@ -84,6 +86,8 @@ declare module 'webcoreui/svelte' {
 	export const Grid: Component<WSvelteGridProps>
 	export const Group: Component<WSvelteGroupProps>
 	export const Icon: Component<WIconProps>
+	export const Image: Component<WImageProps>
+	export const ImageLoader: Component<WImageLoaderProps>
 	export const Input: Component<WSvelteInputProps>
 	export const Kbd: Component<WSvelteKbdProps>
 	export const List: Component<WSvelteListProps>
@@ -139,6 +143,8 @@ declare module 'webcoreui/svelte' {
 	export type GridProps = WSvelteGridProps
 	export type GroupProps = WSvelteGroupProps
 	export type IconProps = WIconProps
+	export type ImageProps = WImageProps
+	export type ImageLoaderProps = WImageLoaderProps
 	export type InputProps = WSvelteInputProps
 	export type KbdProps = WSvelteKbdProps
 	export type ListProps = WSvelteListProps

package/svelte.js

@@ -21,6 +21,8 @@ import FooterComponent from './components/Footer/Footer.svelte'
 import GridComponent from './components/Grid/Grid.svelte'
 import GroupComponent from './components/Group/Group.svelte'
 import IconComponent from './components/Icon/Icon.svelte'
+import ImageComponent from './components/Image/Image.svelte'
+import ImageLoaderComponent from './components/ImageLoader/ImageLoader.svelte'
 import InputComponent from './components/Input/Input.svelte'
 import KbdComponent from './components/Kbd/Kbd.svelte'
 import ListComponent from './components/List/List.svelte'
@@ -76,6 +78,8 @@ export const Footer = FooterComponent
 export const Grid = GridComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
+export const Image = ImageComponent
+export const ImageLoader = ImageLoaderComponent
 export const Input = InputComponent
 export const Kbd = KbdComponent
 export const List = ListComponent

package/utils/DOMUtils.ts

@@ -1,6 +1,6 @@
-export const get = (selector: string, all?: boolean) => all
-    ? document?.querySelectorAll(selector)
-    : document?.querySelector(selector)
+export const get = <T extends Element = Element>(selector: string, all?: boolean): T | NodeListOf<T> | null => all
+    ? document?.querySelectorAll<T>(selector)
+    : document?.querySelector<T>(selector)
 
 export const on = (
     selector: string | HTMLElement | Document,

package/utils/modal.ts

@@ -13,7 +13,7 @@ export type ModalCallback = {
 }
 
 export type Modal = {
-    trigger: string
+    trigger?: string
     modal: string
     onOpen?: (args: ModalCallback) => unknown
     onClose?: (args: ModalCallback) => unknown
@@ -29,7 +29,7 @@ export const modal = (config: Modal | string): ModalInstance | undefined => {
 
     const modalSelector = typeof config === 'string' ? config : modal
 
-    const triggerDOM = document.querySelector(trigger)
+    const triggerDOM = trigger ? document.querySelector(trigger) : null
     const modalDOM = document.querySelector(modalSelector)
 
     if (modalDOM instanceof HTMLElement) {