webcoreui 1.2.0 → 1.3.0

package/README.md

@@ -64,18 +64,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.94`
+- [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.16`
 - **For Svelte projects**
-    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.38`
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.45`
 - **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 +167,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,6 +290,7 @@ 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)
@@ -332,6 +336,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,6 +14,7 @@ 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'
@@ -75,6 +76,7 @@ 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
@@ -129,6 +131,7 @@ 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

package/astro.js

@@ -14,6 +14,7 @@ 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'
@@ -68,6 +69,7 @@ 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

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/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>

package/components/Counter/Counter.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+    import type { SvelteCounterProps } from './counter'
+
+    import { classNames } from '../../utils/classNames'
+
+    import minusIcon from '../../icons/minus.svg?raw'
+    import plusIcon from '../../icons/plus.svg?raw'
+
+    import styles from './counter.module.scss'
+
+    let {
+        type = 'compact',
+        theme,
+        rounded,
+        minIcon,
+        maxIcon,
+        className,
+        width,
+        value = $bindable(0),
+        disabled,
+        onChange,
+        step = 1,
+        min,
+        max,
+        ...rest
+    }: SvelteCounterProps = $props()
+
+    const classes = classNames([
+        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
+
+    let intervalId: ReturnType<typeof setTimeout>
+    let timeoutId: ReturnType<typeof setTimeout>
+    let longPressDelay = 500
+    let isKeyDown = false
+
+    const updateValue = (isMin?: boolean) => {
+        const direction = isMin ? -1 : 1
+        const newValue = value + (direction * step)
+
+        if ((min !== undefined && newValue < min) || (max !== undefined && newValue > max)) {
+            return
+        }
+
+        value = newValue
+
+        onChange?.(newValue)
+    }
+
+    const startHold = (event: Event) => {
+        const target = event.currentTarget
+
+        if (target instanceof HTMLButtonElement) {
+            const isMin = target.dataset.id === 'w-counter-min'
+
+            updateValue(isMin)
+
+            timeoutId = setTimeout(function repeat() {
+                updateValue(isMin)
+
+                longPressDelay = Math.max(50, longPressDelay * 0.8)
+                intervalId = setTimeout(repeat, longPressDelay)
+            }, 500)
+        }
+    }
+
+    const stopHold = () => {
+        clearTimeout(timeoutId)
+        clearTimeout(intervalId)
+
+        isKeyDown = false
+        longPressDelay = 500
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Enter' && !isKeyDown) {
+            event.preventDefault()
+            startHold(event)
+
+            isKeyDown = true
+        }
+    }
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            stopHold()
+        }
+    }
+</script>
+
+<div class={classes} style={styleVariable}>
+    <button
+        data-id="w-counter-min"
+        disabled={disabled}
+        onmousedown={startHold}
+        ontouchstart={startHold}
+        onmouseup={stopHold}
+        onmouseleave={stopHold}
+        ontouchend={stopHold}
+        ontouchcancel={stopHold}
+        onkeydown={handleKeyDown}
+        onkeyup={handleKeyUp}
+    >
+        {@html subtractIcon}
+    </button>
+    <input
+        bind:value={value}
+        type="number"
+        disabled={disabled}
+        step={step}
+        min={min}
+        max={max}
+        oninput={() => onChange?.(value)}
+        {...rest}
+    />
+    <button
+        data-id="w-counter-max"
+        disabled={disabled}
+        onmousedown={startHold}
+        ontouchstart={startHold}
+        onmouseup={stopHold}
+        onmouseleave={stopHold}
+        ontouchend={stopHold}
+        ontouchcancel={stopHold}
+        onkeydown={handleKeyDown}
+        onkeyup={handleKeyUp}
+    >
+        {@html addIcon}
+    </button>
+</div>

package/components/Counter/Counter.tsx

@@ -0,0 +1,161 @@
+import React, { useRef, useState } from 'react'
+import type { ReactCounterProps } from './counter'
+
+import { classNames } from '../../utils/classNames'
+
+import minusIcon from '../../icons/minus.svg?raw'
+import plusIcon from '../../icons/plus.svg?raw'
+
+import styles from './counter.module.scss'
+
+const Counter = ({
+    type = 'compact',
+    theme,
+    rounded,
+    minIcon,
+    maxIcon,
+    className,
+    width,
+    value = 0,
+    disabled,
+    onChange,
+    step = 1,
+    min,
+    max,
+    ...rest
+}: ReactCounterProps) => {
+    const [inputValue, setInputValue] = useState(value)
+    const intervalId = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const longPressDelay = useRef(500)
+    const isKeyDown = useRef(false)
+
+    const classes = classNames([
+        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 } as React.CSSProperties
+        : undefined
+
+    const updateValue = (isMin?: boolean) => {
+        setInputValue((prevValue: number) => {
+            const direction = isMin ? -1 : 1
+            const newValue = prevValue + (direction * step)
+
+            if ((min !== undefined && newValue < min) || (max !== undefined && newValue > max)) {
+                return prevValue
+            }
+
+            onChange?.(newValue)
+            return newValue
+        })
+    }
+
+    const startHold = (event: React.MouseEvent | React.TouchEvent | React.KeyboardEvent) => {
+        const target = event.currentTarget
+
+        if (target instanceof HTMLButtonElement) {
+            const isMin = target.dataset.id === 'w-counter-min'
+
+            updateValue(isMin)
+
+            timeoutId.current = setTimeout(function repeat() {
+                updateValue(isMin)
+
+                longPressDelay.current = Math.max(50, longPressDelay.current * 0.8)
+                intervalId.current = setTimeout(repeat, longPressDelay.current)
+            }, 500)
+        }
+    }
+
+    const stopHold = () => {
+        if (timeoutId.current) {
+            clearTimeout(timeoutId.current)
+        }
+
+        if (intervalId.current) {
+            clearTimeout(intervalId.current)
+        }
+
+        isKeyDown.current = false
+        longPressDelay.current = 500
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === 'Enter' && !isKeyDown.current) {
+            event.preventDefault()
+            startHold(event)
+
+            isKeyDown.current = true
+        }
+    }
+
+    const handleKeyUp = (event: React.KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            stopHold()
+        }
+    }
+
+    const handleInput = (event: React.FormEvent) => {
+        const target = event.target
+
+        if (target instanceof HTMLInputElement) {
+            const newValue = Number(target.value)
+
+            setInputValue(newValue)
+            onChange?.(newValue)
+        }
+    }
+
+    return (
+        <div className={classes} style={styleVariable}>
+            <button
+                data-id="w-counter-min"
+                disabled={disabled}
+                onMouseDown={startHold}
+                onTouchStart={startHold}
+                onMouseUp={stopHold}
+                onMouseLeave={stopHold}
+                onTouchEnd={stopHold}
+                onTouchCancel={stopHold}
+                onKeyDown={handleKeyDown}
+                onKeyUp={handleKeyUp}
+                dangerouslySetInnerHTML={{ __html: subtractIcon }}
+            />
+            <input
+                value={inputValue}
+                type="number"
+                disabled={disabled}
+                step={step}
+                min={min}
+                max={max}
+                onInput={handleInput}
+                {...rest}
+            />
+            <button
+                data-id="w-counter-max"
+                disabled={disabled}
+                onMouseDown={startHold}
+                onTouchStart={startHold}
+                onMouseUp={stopHold}
+                onMouseLeave={stopHold}
+                onTouchEnd={stopHold}
+                onTouchCancel={stopHold}
+                onKeyDown={handleKeyDown}
+                onKeyUp={handleKeyUp}
+                dangerouslySetInnerHTML={{ __html: addIcon }}
+            />
+        </div>
+
+    )
+}
+
+export default Counter