webcoreui 1.2.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,18 +65,18 @@ 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.9`
-- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.8`
+- [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.13`
+    - [Astro](https://www.npmjs.com/package/astro) - `v5.17`
 - **For Svelte projects**
-    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.38`
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.53`
 - **For React projects**
-    - [React](https://www.npmjs.com/package/react) - `v19.0`
-    - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.0`
+    - [React](https://www.npmjs.com/package/react) - `v19.2`
+    - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.2`
 
 ### Installation with CLI
 
@@ -167,6 +168,9 @@ html body {
     --w-collapsible-initial-height: 0;
     --w-collapsible-max-height: 100%;
 
+    // Counter component
+    --w-counter-width: 10ch;
+
     // Masonry component
     --w-masonry-gap: 5px;
 
@@ -287,12 +291,15 @@ import { Accordion } from 'webcoreui/react'
 - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
 - [ContextMenu](https://github.com/Frontendland/webcoreui/tree/main/src/components/ContextMenu)
 - [Copy](https://github.com/Frontendland/webcoreui/tree/main/src/components/Copy)
+- [Counter](https://github.com/Frontendland/webcoreui/tree/main/src/components/Counter)
 - [DataTable](https://github.com/Frontendland/webcoreui/tree/main/src/components/DataTable)
 - [Flex](https://github.com/Frontendland/webcoreui/tree/main/src/components/Flex)
 - [Footer](https://github.com/Frontendland/webcoreui/tree/main/src/components/Footer)
 - [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)
@@ -332,6 +339,7 @@ import { Accordion } from 'webcoreui/react'
 - [BlogCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/BlogCard)
 - [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)
 - [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)
+- [Empty](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Empty)
 - [ErrorPage](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ErrorPage)
 - [ExpandableTable](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ExpandableTable)
 - [FAQ](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/FAQ)

package/astro.d.ts

@@ -14,12 +14,15 @@ import type { CollapsibleProps as WCollapsibleProps } from './components/Collaps
 import type { ConditionalWrapperProps as WConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
 import type { ContextMenuProps as WContextMenuProps } from './components/ContextMenu/contextmenu'
 import type { CopyProps as WCopyProps } from './components/Copy/copy'
+import type { CounterProps as WCounterProps } from './components/Counter/counter'
 import type { DataTableProps as WDataTableProps } from './components/DataTable/datatable'
 import type { FlexProps as WFlexProps } from './components/Flex/flex'
 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'
@@ -75,12 +78,15 @@ declare module 'webcoreui/astro' {
 	export function ConditionalWrapper(_props: WConditionalWrapperProps): any
 	export function ContextMenu(_props: WContextMenuProps): any
 	export function Copy(_props: WCopyProps): any
+	export function Counter(_props: WCounterProps): any
 	export function DataTable(_props: WDataTableProps): any
 	export function Flex(_props: WFlexProps): any
 	export function Footer(_props: WFooterProps): any
 	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
@@ -129,12 +135,15 @@ declare module 'webcoreui/astro' {
 	export type ConditionalWrapperProps = WConditionalWrapperProps
 	export type ContextMenuProps = WContextMenuProps
 	export type CopyProps = WCopyProps
+	export type CounterProps = WCounterProps
 	export type DataTableProps = WDataTableProps
 	export type FlexProps = WFlexProps
 	export type FooterProps = WFooterProps
 	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

@@ -14,12 +14,15 @@ import CollapsibleComponent from './components/Collapsible/Collapsible.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
 import ContextMenuComponent from './components/ContextMenu/ContextMenu.astro'
 import CopyComponent from './components/Copy/Copy.astro'
+import CounterComponent from './components/Counter/Counter.astro'
 import DataTableComponent from './components/DataTable/DataTable.astro'
 import FlexComponent from './components/Flex/Flex.astro'
 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'
@@ -68,12 +71,15 @@ export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const ContextMenu = ContextMenuComponent
 export const Copy = CopyComponent
+export const Counter = CounterComponent
 export const DataTable = DataTableComponent
 export const Flex = FlexComponent
 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/Badge/Badge.astro

@@ -10,6 +10,7 @@ const {
     hover,
     small,
     rounded,
+    transparent,
     className,
     ...rest
 } = Astro.props
@@ -20,6 +21,7 @@ const classes = [
     hover && styles.hover,
     small && styles.small,
     rounded && styles.round,
+    transparent && styles.transparent,
     className
 ]
 ---

package/components/Badge/Badge.svelte

@@ -10,6 +10,7 @@
         hover,
         small,
         rounded,
+        transparent,
         className,
         onClick,
         children,
@@ -22,6 +23,7 @@
         (onClick || hover) && styles.hover,
         small && styles.small,
         rounded && styles.round,
+        transparent && styles.transparent,
         className
     ])
 </script>

package/components/Badge/Badge.tsx

@@ -11,6 +11,7 @@ const Badge = ({
     hover,
     small,
     rounded,
+    transparent,
     className,
     children,
     ...rest
@@ -21,6 +22,7 @@ const Badge = ({
         (onClick || hover) && styles.hover,
         small && styles.small,
         rounded && styles.round,
+        transparent && styles.transparent,
         className
     ])
 

package/components/Badge/badge.module.scss

@@ -91,4 +91,30 @@
     &.round {
         @include border-radius(lg);
     }
+
+    &.transparent {
+        @include background(transparent);
+        @include typography(primary);
+        @include spacing(p0);
+
+        &.secondary {
+            @include typography(primary-20);
+        }
+
+        &.info {
+            @include typography(info);
+        }
+
+        &.success {
+            @include typography(success);
+        }
+
+        &.warning {
+            @include typography(warning);
+        }
+
+        &.alert {
+            @include typography(alert);
+        }
+    }
 }

package/components/Badge/badge.ts

@@ -12,6 +12,7 @@ export type BadgeProps = {
     hover?: boolean
     small?: boolean
     rounded?: boolean
+    transparent?: boolean
     className?: string
     [key: string]: any
 }

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/Counter/Counter.astro

@@ -0,0 +1,164 @@
+---
+import type { CounterProps } from './counter'
+
+import Icon from '../Icon/Icon.astro'
+
+import minusIcon from '../../icons/minus.svg?raw'
+import plusIcon from '../../icons/plus.svg?raw'
+
+import styles from './counter.module.scss'
+
+interface Props extends CounterProps {}
+
+const {
+    type = 'compact',
+    theme,
+    rounded,
+    minIcon,
+    maxIcon,
+    className,
+    width,
+    value = 0,
+    disabled,
+    ...rest
+} = Astro.props
+
+const classes = [
+    styles.counter,
+    styles[type],
+    theme && styles[theme],
+    rounded && styles.rounded,
+    className
+]
+
+const subtractIcon = minIcon || minusIcon
+const addIcon = maxIcon || plusIcon
+
+const styleVariable = width
+    ? `--w-counter-width: ${width};`
+    : null
+---
+
+<div class:list={classes} data-id="w-counter" style={styleVariable}>
+    <button data-id="w-counter-min" disabled={disabled}>
+        <Fragment>
+            {subtractIcon.startsWith('<svg')
+                ? <Fragment set:html={subtractIcon} />
+                : <Icon type={subtractIcon} />
+            }
+        </Fragment>
+    </button>
+    <input
+        type="number"
+        value={value}
+        disabled={disabled}
+        {...rest}
+    />
+    <button data-id="w-counter-max" disabled={disabled}>
+        <Fragment>
+            {addIcon.startsWith('<svg')
+                ? <Fragment set:html={addIcon} />
+                : <Icon type={addIcon} />
+            }
+        </Fragment>
+    </button>
+</div>
+
+<script>
+    import { off, on } from '../../utils/DOMUtils'
+    import { dispatch } from '../../utils/event'
+
+    const addEventListeners = () => {
+        const buttonSelector = '[data-id="w-counter"] button'
+        const inputSelector = '[data-id="w-counter"] input'
+        const eventName = 'counterOnChange'
+
+        let intervalId: ReturnType<typeof setTimeout>
+        let timeoutId: ReturnType<typeof setTimeout>
+        let longPressDelay = 500
+        let isKeyDown = false
+
+        const updateValue = (input: HTMLInputElement, min?: boolean) => {
+            const step = input.step ? Number(input.step) : 1
+            const direction = min ? -1 : 1
+            const newValue = Number(input.value) + (direction * step)
+
+            if ((input.min && newValue < Number(input.min)) || (input.max && newValue > Number(input.max))) {
+                return
+            }
+
+            input.value = String(newValue)
+
+            dispatch(eventName, {
+                name: input.name,
+                value: newValue
+            })
+        }
+
+        const startHold = (event: Event) => {
+            const target = event.currentTarget
+
+            if (target instanceof HTMLButtonElement && target.parentElement) {
+                const input = target.parentElement.querySelector('input') as HTMLInputElement
+                const min = target.dataset.id === 'w-counter-min'
+
+                updateValue(input, min)
+
+                timeoutId = setTimeout(function repeat() {
+                    updateValue(input, min)
+
+                    longPressDelay = Math.max(50, longPressDelay * 0.8)
+
+                    intervalId = setTimeout(repeat, longPressDelay)
+                }, 500)
+            }
+        }
+
+        const stopHold = () => {
+            clearTimeout(timeoutId)
+            clearTimeout(intervalId)
+
+            isKeyDown = false
+            longPressDelay = 500
+        }
+
+        on(buttonSelector, 'mousedown', startHold, true)
+        on(buttonSelector, 'touchstart', startHold, true)
+
+        on(buttonSelector, 'mouseup', stopHold, true)
+        on(buttonSelector, 'mouseleave', stopHold, true)
+        on(buttonSelector, 'touchend', stopHold, true)
+        on(buttonSelector, 'touchcancel', stopHold, true)
+
+        on(buttonSelector, 'keydown', (event: KeyboardEvent) => {
+            if (event.key === 'Enter' && !isKeyDown) {
+                event.preventDefault()
+                startHold(event)
+
+                isKeyDown = true
+            }
+        }, true)
+
+        on(buttonSelector, 'keyup', (event: KeyboardEvent) => {
+            if (event.key === 'Enter') {
+                stopHold()
+            }
+        }, true)
+
+        on(inputSelector, 'input', (event: Event) => {
+            const target = event.target
+
+            if (target instanceof HTMLInputElement) {
+                dispatch(eventName, {
+                    name: target.name,
+                    value: Number(target.value)
+                })
+            }
+        }, true)
+    }
+
+    off(document, 'astro:after-swap', addEventListeners)
+    on(document, 'astro:after-swap', addEventListeners)
+
+    addEventListeners()
+</script>