webcoreui 1.3.0 → 1.4.0

package/README.md

@@ -52,6 +52,7 @@
 
 - Full documentation available on [webcoreui.dev](https://webcoreui.dev).
 - For installation steps, visit our [setup docs](https://webcoreui.dev/docs/setup).
+- To build and test components visually, visit our [builder](https://webcoreui.dev/build).
 
 ## Getting Started
 
@@ -64,15 +65,15 @@ Webcore can be used as a standalone project, or it can be integrated into your e
 
 Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
 
-- [Sass](https://www.npmjs.com/package/sass) - `v1.94`
+- [Sass](https://www.npmjs.com/package/sass) - `v1.97`
 - [TypeScript](https://www.npmjs.com/package/typescript) - `v5.9`
 
 Depending on your project setup, you'll also need the following packages:
 
 - **For Astro projects**
-    - [Astro](https://www.npmjs.com/package/astro) - `v5.16`
+    - [Astro](https://www.npmjs.com/package/astro) - `v5.17`
 - **For Svelte projects**
-    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.45`
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.53`
 - **For React projects**
     - [React](https://www.npmjs.com/package/react) - `v19.2`
     - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.2`
@@ -297,6 +298,8 @@ import { Accordion } from 'webcoreui/react'
 - [Grid](https://github.com/Frontendland/webcoreui/tree/main/src/components/Grid)
 - [Group](https://github.com/Frontendland/webcoreui/tree/main/src/components/Group)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
+- [Image](https://github.com/Frontendland/webcoreui/tree/main/src/components/Image)
+- [ImageLoader](https://github.com/Frontendland/webcoreui/tree/main/src/components/ImageLoader)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
 - [Kbd](https://github.com/Frontendland/webcoreui/tree/main/src/components/Kbd)
 - [List](https://github.com/Frontendland/webcoreui/tree/main/src/components/List)

package/astro.d.ts

@@ -21,6 +21,8 @@ import type { FooterProps as WFooterProps } from './components/Footer/footer'
 import type { GridProps as WGridProps } from './components/Grid/grid'
 import type { GroupProps as WGroupProps } 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 { InputProps as WInputProps } from './components/Input/input'
 import type { KbdProps as WKbdProps } from './components/Kbd/kbd'
 import type { ListProps as WListProps } from './components/List/list'
@@ -83,6 +85,8 @@ declare module 'webcoreui/astro' {
 	export function Grid(_props: WGridProps): any
 	export function Group(_props: WGroupProps): any
 	export function Icon(_props: WIconProps): any
+	export function Image(_props: WImageProps): any
+	export function ImageLoader(_props: WImageLoaderProps): any
 	export function Input(_props: WInputProps): any
 	export function Kbd(_props: WKbdProps): any
 	export function List(_props: WListProps): any
@@ -138,6 +142,8 @@ declare module 'webcoreui/astro' {
 	export type GridProps = WGridProps
 	export type GroupProps = WGroupProps
 	export type IconProps = WIconProps
+	export type ImageProps = WImageProps
+	export type ImageLoaderProps = WImageLoaderProps
 	export type InputProps = WInputProps
 	export type KbdProps = WKbdProps
 	export type ListProps = WListProps

package/astro.js

@@ -21,6 +21,8 @@ import FooterComponent from './components/Footer/Footer.astro'
 import GridComponent from './components/Grid/Grid.astro'
 import GroupComponent from './components/Group/Group.astro'
 import IconComponent from './components/Icon/Icon.astro'
+import ImageComponent from './components/Image/Image.astro'
+import ImageLoaderComponent from './components/ImageLoader/ImageLoader.astro'
 import InputComponent from './components/Input/Input.astro'
 import KbdComponent from './components/Kbd/Kbd.astro'
 import ListComponent from './components/List/List.astro'
@@ -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/components/Accordion/Accordion.astro

@@ -29,6 +29,7 @@ const classes = [
             <button
                 class:list={[styles.title, item.reverse && styles.reverse]}
                 data-toggle="true"
+                data-open={item.expanded}
             >
                 {item.title}
                 {icon !== 'none' && (

package/components/Accordion/Accordion.svelte

@@ -15,7 +15,7 @@
         className
     }: AccordionProps = $props()
 
-    let toggleState = $state(Array(items.length).fill(false))
+    let toggleState = $state(items.map(item => item.expanded ?? false))
 
     const toggle = (index: number) => {
         toggleState = toggleState.map((_, i) => index === i

package/components/Accordion/Accordion.tsx

@@ -14,7 +14,7 @@ const Accordion = ({
     reverse,
     className
 }: AccordionProps) => {
-    const [state, setState] = useState(Array(items.length).fill(false))
+    const [state, setState] = useState(items.map(item => item.expanded ?? false))
 
     const toggle = (index: number) => {
         setState(state.map((_, i) => index === i

package/components/Accordion/accordion.ts

@@ -3,6 +3,7 @@ export type AccordionProps = {
         title: string
         content: string
         reverse?: boolean
+        expanded?: boolean
     }[]
     icon?: 'plus' | 'none' | undefined | null
     reverse?: boolean

package/components/Avatar/Avatar.astro

@@ -1,6 +1,8 @@
 ---
 import type { AvatarProps } from './avatar'
 
+import Image from '../Image/Image.astro'
+
 import styles from './avatar.module.scss'
 
 interface Props extends AvatarProps {}
@@ -35,7 +37,7 @@ const groupClasses = [
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     >
         {img.map((img, index) => (
-            <img
+            <Image
                 src={img}
                 alt={Array.isArray(alt) ? alt[index] : alt}
                 width={Array.isArray(size) ? size[index] : size}
@@ -47,7 +49,7 @@ const groupClasses = [
         ))}
     </div>
 ) : (
-    <img
+    <Image
         src={img}
         alt={Array.isArray(alt) ? alt[0] : alt}
         width={Array.isArray(size) ? size[0] : size}

package/components/Avatar/Avatar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { AvatarProps } from './avatar'
 
+    import Image from '../Image/Image.svelte'
+
     import { classNames } from '../../utils/classNames'
 
     import styles from './avatar.module.scss'
@@ -35,24 +37,24 @@
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     >
         {#each img as img, index}
-            <img
+            <Image
                 src={img}
                 alt={Array.isArray(alt) ? alt[index] : alt}
                 width={Array.isArray(size) ? size[index] : size}
                 height={Array.isArray(size) ? size[index] : size}
                 loading={lazy ? 'lazy' : null}
-                class={classes}
+                className={classes}
                 style={Array.isArray(size) ? `--w-avatar-index: ${size[index]}` : null}
             />
         {/each}
     </div>
 {:else}
-    <img
+    <Image
         src={img}
         alt={Array.isArray(alt) ? alt[0] : alt}
         width={Array.isArray(size) ? size[0] : size}
         height={Array.isArray(size) ? size[0] : size}
-        class={classes}
+        className={classes}
         loading={lazy ? 'lazy' : null}
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     />

package/components/Avatar/Avatar.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import type { AvatarProps } from './avatar'
 
+import Image from '../Image/Image.tsx'
+
 import { classNames } from '../../utils/classNames'
 
 import styles from './avatar.module.scss'
@@ -37,7 +39,7 @@ const Avatar = ({
             style={borderColorStyle}
         >
             {img.map((img, index) => (
-                <img
+                <Image
                     key={index}
                     src={img}
                     alt={Array.isArray(alt) ? alt[index] : alt}
@@ -53,7 +55,7 @@ const Avatar = ({
             ))}
         </div>
     ) : (
-        <img
+        <Image
             src={img}
             alt={Array.isArray(alt) ? alt[0] : alt}
             width={Array.isArray(size) ? size[0] : size}

package/components/Checkbox/Checkbox.svelte

@@ -17,6 +17,7 @@
         color,
         className,
         onClick,
+        onChange,
         ...rest
     }: SvelteCheckboxProps = $props()
 
@@ -42,6 +43,7 @@
             checked={checked}
             disabled={disabled}
             onclick={onClick}
+            onchange={onChange}
             {...rest}
         />
         <span class={styles.check}>

package/components/Checkbox/Checkbox.tsx

@@ -16,7 +16,6 @@ const Checkbox = ({
     disabled,
     color,
     className,
-    onClick,
     ...rest
 }: ReactCheckboxProps) => {
     const classes = classNames([
@@ -43,7 +42,6 @@ const Checkbox = ({
                     type="checkbox"
                     defaultChecked={checked}
                     disabled={disabled}
-                    onClick={onClick}
                     {...rest}
                 />
                 <span

package/components/Checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import type { MouseEventHandler } from 'svelte/elements'
+import type { ChangeEventHandler, MouseEventHandler } from 'svelte/elements'
 
 export type CheckboxProps = {
     checked?: boolean
@@ -11,9 +11,11 @@ export type CheckboxProps = {
 }
 
 export type SvelteCheckboxProps = {
+    onChange?: ChangeEventHandler<HTMLInputElement>
     onClick?: MouseEventHandler<HTMLInputElement>
 } & CheckboxProps
 
 export type ReactCheckboxProps = {
+    onChange?: React.ChangeEventHandler<HTMLInputElement>
     onClick?: React.MouseEventHandler<HTMLInputElement>
 } & CheckboxProps

package/components/Collapsible/collapsible.ts

@@ -17,6 +17,6 @@ export type SvelteCollapsibleProps = {
 export type ReactCollapsibleProps = {
     on: React.ReactNode
     off: React.ReactNode
-    children?: React.ReactNode
+    children: React.ReactNode
 } & CollapsibleProps
 

package/components/DataTable/DataTable.astro

@@ -149,7 +149,7 @@ const hasPagination = data?.length && itemsPerPage
             {!!columnFilterItems?.length && (
                 <tfoot data-hidden="true">
                     <tr>
-                        <td colspan={data?.[0].length} class={styles['no-results']}>{noResultsLabel}</td>
+                        <td colspan={headings?.length} class={styles['no-results']}>{noResultsLabel}</td>
                     </tr>
                 </tfoot>
             )}
@@ -251,9 +251,9 @@ const hasPagination = data?.length && itemsPerPage
                 const sortedTableRows = Array.from(
                     table?.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>
                 ).sort((a, b) => {
-                    let aValue: string | number = (a.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
+                    let aValue: string | number = (a.querySelector(`[data-name="${sortBy}"]`) as HTMLElement)
                         ?.innerText.replace(/\s/g, '')
-                    let bValue: string | number = (b.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
+                    let bValue: string | number = (b.querySelector(`[data-name="${sortBy}"]`) as HTMLElement)
                         ?.innerText.replace(/\s/g, '')
 
                     if (!isNaN(aValue as any)) {
@@ -298,7 +298,7 @@ const hasPagination = data?.length && itemsPerPage
             return
         }
 
-        const affectedTableCells = Array.from(table.querySelectorAll(`[data-name=${eventName}]`)) as HTMLElement[]
+        const affectedTableCells = Array.from(table.querySelectorAll(`[data-name="${eventName}"]`)) as HTMLElement[]
 
         const columnToggleListElement = Array.from(event.list.children)
             .find(child => (child as HTMLLIElement).dataset.name === event.name) as HTMLLIElement

package/components/DataTable/DataTable.svelte

@@ -250,7 +250,7 @@
             {#if columnFilterIndexes?.length && !filteredData.length}
                 <tfoot>
                     <tr>
-                        <td colspan={data?.[0].length} class={styles['no-results']}>
+                        <td colspan={headings?.length} class={styles['no-results']}>
                             {noResultsLabel}
                         </td>
                     </tr>

package/components/DataTable/DataTable.tsx

@@ -255,7 +255,7 @@ const DataTable = ({
                         <tfoot>
                             <tr>
                                 <td
-                                    colSpan={data?.[0].length}
+                                    colSpan={headings?.length}
                                     className={styles['no-results']}
                                 >
                                     {noResultsLabel}

package/components/Image/Image.astro

@@ -0,0 +1,45 @@
+---
+import type { ImageProps } from './image'
+
+import AspectRatio from '../AspectRatio/AspectRatio.astro'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './image.module.scss'
+
+interface Props extends ImageProps {}
+
+const {
+    src,
+    alt,
+    width,
+    height,
+    lazy,
+    ratio,
+    center,
+    full,
+    rounded,
+    className,
+    ...rest
+} = Astro.props
+
+const classes = [
+    styles.img,
+    center && styles.center,
+    full && styles[full],
+    rounded && styles[rounded],
+    className
+]
+---
+
+<ConditionalWrapper condition={!!ratio}>
+    <AspectRatio slot="wrapper" ratio={ratio || ''}>children</AspectRatio>
+    <img
+        {...rest}
+        src={src}
+        alt={alt || ''}
+        width={width}
+        height={height}
+        loading={lazy ? 'lazy' : null}
+        class:list={classes}
+    />
+</ConditionalWrapper>

package/components/Image/Image.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import type { ImageProps } from './image'
+
+    import AspectRatio from '../AspectRatio/AspectRatio.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './image.module.scss'
+
+    const {
+        src,
+        alt,
+        width,
+        height,
+        lazy,
+        ratio,
+        center,
+        full,
+        rounded,
+        className,
+        ...rest
+    }: ImageProps = $props()
+
+    const classes = classNames([
+        styles.img,
+        center && styles.center,
+        full && styles[full],
+        rounded && styles[rounded],
+        className
+    ])
+</script>
+
+{#snippet img()}
+    <img
+        {...rest}
+        src={src}
+        alt={alt || ''}
+        width={width}
+        height={height}
+        loading={lazy ? 'lazy' : null}
+        class={classes}
+    />
+{/snippet}
+
+{#if ratio}
+    <AspectRatio ratio={ratio}>
+        {@render img()}
+    </AspectRatio>
+{:else}
+    {@render img()}
+{/if}

package/components/Image/Image.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import type { ImageProps } from './image'
+
+import AspectRatio from '../AspectRatio/AspectRatio.tsx'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './image.module.scss'
+
+const Image = ({
+    src,
+    alt,
+    width,
+    height,
+    lazy,
+    ratio,
+    center,
+    full,
+    rounded,
+    className,
+    ...rest
+}: ImageProps) => {
+    const classes = classNames([
+        styles.img,
+        center && styles.center,
+        full && styles[full],
+        rounded && styles[rounded],
+        className
+    ])
+
+    return (
+        <ConditionalWrapper
+            condition={!!ratio}
+            wrapper={children => (
+                <AspectRatio ratio={ratio || ''}>{children}</AspectRatio>
+            )}
+        >
+            <img
+                {...rest}
+                src={src}
+                alt={alt || ''}
+                width={width}
+                height={height}
+                loading={lazy ? 'lazy' : undefined}
+                className={classes}
+            />
+        </ConditionalWrapper>
+    )
+}
+
+export default Image

package/components/Image/image.module.scss

@@ -0,0 +1,47 @@
+@use '../../scss/config.scss' as *;
+
+.img {
+    &.center {
+        @include spacing(auto-none);
+    }
+
+    &.width {
+        @include size('w100%');
+    }
+
+    &.height {
+        @include size('h100%');
+    }
+
+    &.both {
+        @include size(100%);
+    }
+
+    &.top {
+        @include border-radius(top);
+    }
+
+    &.bottom {
+        @include border-radius(bottom);
+    }
+
+    &.left {
+        @include border-radius(left);
+    }
+
+    &.right {
+        @include border-radius(right);
+    }
+
+    &.diagonal {
+        @include border-radius(diagonal);
+    }
+
+    &.reverse-diagonal {
+        @include border-radius(reverse-diagonal);
+    }
+
+    &.none {
+        @include border-radius(none);
+    }
+}

package/components/Image/image.ts

@@ -0,0 +1,13 @@
+export type ImageProps = {
+    src: string
+    alt: string
+    width: number | string
+    height: number | string
+    lazy?: boolean
+    ratio?: string
+    center?: boolean
+    full?: 'width' | 'height' | 'both'
+    rounded?: 'top' | 'bottom' | 'left' | 'right' | 'diagonal' | 'reverse-diagonal' | 'none'
+    className?: string
+    [key: string]: any
+}

package/components/ImageLoader/ImageLoader.astro

@@ -0,0 +1,82 @@
+---
+import type { ImageLoaderProps } from './imageloader'
+
+import Image from '../Image/Image.astro'
+import Skeleton from '../Skeleton/Skeleton.astro'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './imageloader.module.scss'
+
+interface Props extends ImageLoaderProps {}
+
+const {
+    fallback,
+    animate,
+    type,
+    width,
+    height,
+    color,
+    waveColor,
+    className,
+    ...rest
+} = Astro.props
+
+const styleVariables = classNames([
+    `width: ${width}px;`,
+    `height: ${height}px;`
+])
+---
+
+<div data-id="w-image-loader" class={styles.loader} style={styleVariables}>
+    <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>
+
+<script>
+    import { get, on } from '../../utils/DOMUtils'
+
+    const addEventListeners = () => {
+        const images = get<HTMLImageElement>('[data-id="w-image-loader"] img', true)
+
+        if (!images || !(images instanceof NodeList)) {
+            return
+        }
+
+        images.forEach(img => {
+            const container = img.parentElement as HTMLDivElement
+            const skeleton = container.firstElementChild as HTMLDivElement
+
+            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 })
+        })
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
+</script>