webcoreui 1.2.0 → 1.4.0

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

package/components/Counter/counter.module.scss

@@ -0,0 +1,155 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-counter-width: 10ch;
+}
+
+.counter {
+    @include layout(inline-flex);
+    @include border(primary-50);
+    @include border-radius();
+
+    &.rounded {
+        @include border-radius(xl);
+    }
+
+    &.compact button {
+        @include border(0);
+    }
+
+    &.buttons {
+        button {
+            @include border(0);
+
+            &:first-child {
+                @include border(right, primary-50);
+            }
+    
+            &:last-child {
+                @include border(left, primary-50);
+            }
+        }
+
+        &.info button {
+            border-color: var(--w-color-info);
+        }
+
+        &.success button {
+            border-color: var(--w-color-success);
+        }
+
+        &.warning button {
+            border-color: var(--w-color-warning);
+        }
+
+        &.alert button {
+            border-color: var(--w-color-alert);
+        }
+    }
+
+    &:not(.buttons) button {
+        @include border-radius();
+    }
+
+    &.separated {
+        @include layout(xs);
+        @include border(0);
+
+        input {
+            @include border(primary-50);
+        }
+
+        &.info input,
+        &.info button {
+            border-color: var(--w-color-info);
+        }
+
+        &.success input,
+        &.success button {
+            border-color: var(--w-color-success);
+        }
+
+        &.warning input,
+        &.warning button {
+            border-color: var(--w-color-warning);
+        }
+
+        &.alert input,
+        &.alert button {
+            border-color: var(--w-color-alert);
+        }
+    }
+
+    &.info:not(.separated) {
+        border-color: var(--w-color-info);
+    }
+
+    &.success:not(.separated) {
+        border-color: var(--w-color-success);
+    }
+
+    &.warning:not(.separated) {
+        border-color: var(--w-color-warning);
+    }
+
+    &.alert:not(.separated) {
+        border-color: var(--w-color-alert);
+    }
+
+    &.info button svg {
+        @include typography(info);
+    }
+
+    &.success button svg {
+        @include typography(success);
+    }
+
+    &.warning button svg {
+        @include typography(warning);
+    }
+
+    &.alert button svg {
+        @include typography(alert);
+    }
+
+    button {
+        @include background(transparent);
+        @include border(primary-50);
+        @include typography(primary);
+        @include spacing(p-xs);
+
+        cursor: pointer;
+
+        &[disabled] {
+            @include typography(primary-50);
+
+            cursor: default;
+        }
+
+        svg {
+            @include size(w18px, 'h100%');
+        }
+    }
+
+    input {
+        @include background(transparent);
+        @include border(0);
+        @include border-radius();
+        @include typography(primary, center);
+        @include spacing(p-xs);
+
+        flex: 1;
+        width: var(--w-counter-width);
+        appearance: none;
+        -moz-appearance: textfield;
+
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            appearance: none;
+        }
+
+        &[disabled] {
+            @include typography(primary-50);
+        }
+    }
+}

package/components/Counter/counter.ts

@@ -0,0 +1,21 @@
+import type { ButtonProps } from '../Button/button'
+import type { IconProps } from '../Icon/icon'
+
+export type CounterProps = {
+    type?: 'compact' | 'buttons' | 'separated'
+    theme?: ButtonProps['theme']
+    rounded?: boolean
+    minIcon?: IconProps['type'] | string
+    maxIcon?: IconProps['type'] | string
+    width?: string
+    className?: string
+    [key: string]: any
+}
+
+export type SvelteCounterProps = {
+    onChange?: (value: number) => void
+} & CounterProps
+
+export type ReactCounterProps = {
+    onChange?: (value: number) => void
+} & CounterProps

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

@@ -18,7 +18,6 @@ import styles from './datatable.module.scss'
 
 import type { ListEventType } from '../List/list'
 
-// eslint-disable-next-line complexity
 const DataTable = ({
     headings,
     filterPlaceholder = 'Filter entries',
@@ -38,6 +37,7 @@ const DataTable = ({
     id,
     onFilter,
     children
+// eslint-disable-next-line complexity
 }: ReactDataTableProps) => {
     const [filteredData, setFilteredData] = useState<any>(data)
     const [toggledData, setToggledData] = useState(filteredData)
@@ -255,7 +255,7 @@ const DataTable = ({
                         <tfoot>
                             <tr>
                                 <td
-                                    colSpan={data?.[0].length}
+                                    colSpan={headings?.length}
                                     className={styles['no-results']}
                                 >
                                     {noResultsLabel}

package/components/Icon/map.ts

@@ -11,6 +11,7 @@ import Copy from '../../icons/copy.svg?raw'
 import Github from '../../icons/github.svg?raw'
 import Home from '../../icons/home.svg?raw'
 import Info from '../../icons/info.svg?raw'
+import Minus from '../../icons/minus.svg?raw'
 import Moon from '../../icons/moon.svg?raw'
 import Order from '../../icons/order.svg?raw'
 import Plus from '../../icons/plus.svg?raw'
@@ -32,6 +33,7 @@ const iconMap = {
     'github': Github,
     'home': Home,
     'info': Info,
+    'minus': Minus,
     'moon': Moon,
     'order': Order,
     'plus': Plus,

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}