webcoreui 1.1.0 → 1.2.0

package/components/RangeSlider/RangeSlider.astro

@@ -0,0 +1,270 @@
+---
+import type { RangeSliderProps } from './rangeslider'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+import Icon from '../Icon/Icon.astro'
+
+import { classNames } from '../../utils/classNames'
+import { interpolate } from '../../utils/interpolate'
+
+import styles from './rangeslider.module.scss'
+
+interface Props extends RangeSliderProps {}
+
+const {
+    min = 0,
+    max = 100,
+    selectedMin,
+    selectedMax,
+    step = 1,
+    minGap = 5,
+    disabled,
+    color,
+    background,
+    thumb,
+    label,
+    subText,
+    minLabel,
+    maxLabel,
+    minIcon,
+    maxIcon,
+    interactiveLabels,
+    updateLabels,
+    className
+} = Astro.props
+
+const styleVariables = classNames([
+    color && `--w-range-slider-color: ${color};`,
+    background && `--w-range-slider-background: ${background};`,
+    thumb && `--w-range-slider-thumb: ${thumb};`
+])
+
+const minLabelWidth = `${String(max).length}ch`
+const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
+---
+
+<ConditionalWrapper condition={!!(label || subText)}>
+    <label slot="wrapper" class:list={[styles.label, className]}>children</label>
+
+    {label && <span>{label}</span>}
+
+    <div
+        class:list={[styles.container, !(label && subText) && className]}
+        data-id="w-range-slider"
+        data-gap={minGap}
+        data-interactive={interactiveLabels}
+        data-update-labels={updateLabels}
+        style={styleVariables}
+    >
+        <ConditionalWrapper condition={!!interactiveLabels}>
+            <button slot="wrapper" data-dir="left">children</button>
+
+            {minIcon && (
+                <Fragment>
+                    {minIcon.startsWith('<svg')
+                        ? <Fragment set:html={minIcon} />
+                        : <Icon type={minIcon} size={18} />
+                    }
+                </Fragment>
+            )}
+            {minLabel && (
+                <span data-id="w-min-label" style={labelStyle}>{minLabel}</span>
+            )}
+        </ConditionalWrapper>
+
+        <div class={styles.slider}>
+            <div
+                data-id="w-range"
+                data-disabled={disabled ? 'true' : undefined}
+                class={styles.range}
+                style={`
+                    left: ${interpolate(selectedMin || min, [min, max], [0, 100])}%;
+                    right: ${interpolate(selectedMax || max, [min, max], [100, 0])}%;
+                `}
+            />
+            <input
+                type="range"
+                class:list={[styles.input, styles.min]}
+                min={min}
+                max={max}
+                value={selectedMin || min}
+                step={step}
+                disabled={disabled}
+                data-min="true"
+            />
+            <input
+                type="range"
+                min={min}
+                max={max}
+                class={styles.input}
+                value={selectedMax || max}
+                step={step}
+                disabled={disabled}
+                data-max="true"
+            />
+        </div>
+
+        <ConditionalWrapper condition={!!interactiveLabels}>
+            <button slot="wrapper" data-dir="right">children</button>
+
+            {maxLabel && (
+                <span data-id="w-max-label" style={labelStyle}>{maxLabel}</span>
+            )}
+            {maxIcon && (
+                <Fragment>
+                    {maxIcon.startsWith('<svg')
+                        ? <Fragment set:html={maxIcon} />
+                        : <Icon type={maxIcon} size={14} />
+                    }
+                </Fragment>
+            )}
+        </ConditionalWrapper>
+    </div>
+
+    {subText && <span class="muted">{subText}</span>}
+</ConditionalWrapper>
+
+<script>
+    import { off, on } from '../../utils/DOMUtils'
+    import { dispatch } from '../../utils/event'
+    import { interpolate } from '../../utils/interpolate'
+
+    type RangeParams = {
+        range: HTMLDivElement
+        minValue: number
+        maxValue: number
+        min: number
+        max: number
+    }
+
+    const updateRange = ({ range, minValue, maxValue, min, max }: RangeParams) => {
+        range.style.left = `${interpolate(minValue, [min, max], [0, 100])}%`
+        range.style.right = `${interpolate(maxValue, [min, max], [100, 0])}%`
+    }
+
+    const updateLabels = (wrapper: HTMLDivElement, minValue: number, maxValue: number) => {
+        const minLabel = wrapper.querySelector('[data-id="w-min-label"]')
+        const maxLabel = wrapper.querySelector('[data-id="w-max-label"]')
+
+        if (minLabel instanceof HTMLElement && maxLabel instanceof HTMLElement) {
+            minLabel.innerText = minLabel.innerText.replace(/\d+(\.\d+)?/, String(minValue))
+            maxLabel.innerText = maxLabel.innerText.replace(/\d+(\.\d+)?/, String(maxValue))
+        }
+    }
+
+    const addEventListeners = () => {
+        on('[data-id="w-range-slider"] input', 'input', (event: Event) => {
+            const target = event.target
+
+            if (!(target instanceof HTMLInputElement)) {
+                return
+            }
+
+            const range = target.parentElement?.querySelector('[data-id="w-range"]')
+            const wrapper = target.parentElement?.parentElement
+            const prevInput = target.previousElementSibling
+            const nextInput = target.nextElementSibling
+
+            if (!(wrapper instanceof HTMLDivElement) || !(range instanceof HTMLDivElement)) {
+                return
+            }
+
+            const value = Number(target.value)
+            const min = Number(target.min)
+            const max = Number(target.max)
+            const step = Number(target.step)
+            const gap = Number(wrapper.dataset.gap)
+            const shouldUpdateLabels = !!wrapper.dataset.updateLabels
+            const prevInputValue = prevInput instanceof HTMLInputElement ? prevInput.value : 0
+            const nextInputValue = nextInput instanceof HTMLInputElement ? nextInput.value : 0
+            const minValue = target.dataset.min ? value : Number(prevInputValue)
+            const maxValue = target.dataset.max ? value : Number(nextInputValue)
+
+            let currentMin = minValue
+            let currentMax = maxValue
+
+            if (maxValue - minValue >= gap) {
+                if (shouldUpdateLabels) {
+                    updateLabels(wrapper, minValue, maxValue)
+                }
+
+                dispatch('rangeSliderOnChange', {
+                    min: minValue,
+                    max: maxValue
+                })
+            } else if (target.dataset.min) {
+                currentMin = maxValue - Math.max(step, gap)
+                target.value = String(currentMin)
+            } else {
+                currentMax = minValue + Math.max(step, gap)
+                target.value = String(currentMax)
+            }
+
+            updateRange({
+                range,
+                minValue: currentMin,
+                maxValue: currentMax,
+                min,
+                max
+            })
+        }, true)
+
+        on('[data-id="w-range-slider"] button', 'click', (event: Event) => {
+            const target = event.currentTarget
+
+            if (!(target instanceof HTMLButtonElement)) {
+                return
+            }
+
+            const wrapper = target.parentElement
+            const range = wrapper?.querySelector('[data-id="w-range"]')
+            const minInput = wrapper?.querySelector('[data-min]')
+            const maxInput = wrapper?.querySelector('[data-max]')
+
+            if (!(wrapper instanceof HTMLDivElement)
+                || !(range instanceof HTMLDivElement)
+                || !(minInput instanceof HTMLInputElement)
+                || !(maxInput instanceof HTMLInputElement)
+            ) {
+                return
+            }
+
+            const dir = target.dataset.dir === 'left' ? -1 : 1
+            const step = Number(minInput.step)
+            const min = Number(minInput.min)
+            const max = Number(minInput.max)
+            const minValue = Number(minInput.value) + (dir * step)
+            const maxValue = Number(maxInput.value) + (dir * step)
+            const shouldUpdateLabels = !!wrapper.dataset.updateLabels
+
+            if (minValue < min || maxValue > max) {
+                return
+            }
+
+            minInput.value = String(minValue)
+            maxInput.value = String(maxValue)
+
+            updateRange({
+                range,
+                minValue,
+                maxValue,
+                min,
+                max
+            })
+
+            if (shouldUpdateLabels) {
+                updateLabels(wrapper, minValue, maxValue)
+            }
+
+            dispatch('rangeSliderOnChange', {
+                min: minValue,
+                max: maxValue
+            })
+        }, true)
+    }
+
+    off(document, 'astro:after-swap', addEventListeners)
+    on(document, 'astro:after-swap', addEventListeners)
+
+    addEventListeners()
+</script>

package/components/RangeSlider/RangeSlider.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+    import type { SvelteRangeSliderProps } from './rangeslider'
+
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import { classNames } from '../../utils/classNames'
+    import { interpolate } from '../../utils/interpolate'
+
+    import styles from './rangeslider.module.scss'
+
+    const {
+        min = 0,
+        max = 100,
+        selectedMin,
+        selectedMax,
+        step = 1,
+        minGap = 5,
+        disabled,
+        color,
+        background,
+        thumb,
+        label,
+        subText,
+        minLabel,
+        maxLabel,
+        minIcon,
+        maxIcon,
+        interactiveLabels,
+        updateLabels,
+        className,
+        onChange
+    }: SvelteRangeSliderProps = $props()
+
+    const styleVariables = classNames([
+        color && `--w-range-slider-color: ${color};`,
+        background && `--w-range-slider-background: ${background};`,
+        thumb && `--w-range-slider-thumb: ${thumb};`
+    ])
+
+    const minLabelWidth = `${String(max).length}ch`
+    const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
+
+    let minValue = $state(selectedMin || min)
+    let maxValue = $state(selectedMax || max)
+    let dynamicMinLabel = $state(minLabel)
+    let dynamicMaxLabel = $state(maxLabel)
+
+    const rangeLeftPercent = $derived(interpolate((minValue || min), [min, max], [0, 100]))
+    const rangeRightPercent = $derived(interpolate((maxValue || max), [min, max], [100, 0]))
+
+    const updateDynamicLabels = (minValue: number, maxValue: number) => {
+        if (dynamicMinLabel && dynamicMaxLabel) {
+            dynamicMinLabel = dynamicMinLabel.replace(/\d+(\.\d+)?/, String(minValue))
+            dynamicMaxLabel = dynamicMaxLabel.replace(/\d+(\.\d+)?/, String(maxValue))
+        }
+    }
+
+    const handleInput = (event: Event) => {
+        const target = event.target
+
+        if (!(target instanceof HTMLInputElement)) {
+            return
+        }
+
+        if (maxValue - minValue >= minGap) {
+            if (updateLabels) {
+                updateDynamicLabels(minValue, maxValue)
+            }
+
+            onChange?.({
+                min: minValue,
+                max: maxValue
+            })
+        } else if (target.dataset.min) {
+            minValue = maxValue - Math.max(step, minGap)
+            target.value = String(minValue)
+        } else {
+            maxValue = minValue + Math.max(step, minGap)
+            target.value = String(maxValue)
+        }
+    }
+
+    const handleClick = (event: Event, direction: 'left' | 'right') => {
+        const target = event.currentTarget
+
+        if (!(target instanceof HTMLButtonElement)) {
+            return
+        }
+
+        const dir = direction === 'left' ? -1 : 1
+        const updatedMinValue = Number(minValue) + (dir * step)
+        const updatedMaxValue = Number(maxValue) + (dir * step)
+
+        if (updatedMinValue < min || updatedMaxValue > max) {
+            return
+        }
+
+        minValue = updatedMinValue
+        maxValue = updatedMaxValue
+
+        if (updateLabels) {
+            updateDynamicLabels(minValue, maxValue)
+        }
+
+        onChange?.({
+            min: minValue,
+            max: maxValue
+        })
+    }
+</script>
+
+<ConditionalWrapper
+    element="label"
+    condition={!!(label || subText)}
+    class={classNames([styles.label, className])}
+>
+    {#if label}
+        <span>{label}</span>
+    {/if}
+
+    <div
+        class={classNames([styles.container, !(label && subText) && className])}
+        style={styleVariables}
+    >
+        <ConditionalWrapper
+            element="button"
+            condition={!!interactiveLabels}
+            onclick={(e: Event) => handleClick(e, 'left')}
+        >
+            {#if minIcon}
+                {@html minIcon}
+            {/if}
+            {#if dynamicMinLabel}
+                <span style={labelStyle}>{dynamicMinLabel}</span>
+            {/if}
+        </ConditionalWrapper>
+
+        <div class={styles.slider}>
+            <div
+                data-disabled={disabled ? 'true' : undefined}
+                class={styles.range}
+                style={`
+                    left: ${rangeLeftPercent}%;
+                    right: ${rangeRightPercent}%;
+                `}
+            ></div>
+            <input
+                type="range"
+                class={classNames([styles.input, styles.min])}
+                min={min}
+                max={max}
+                bind:value={minValue}
+                step={step}
+                disabled={disabled}
+                oninput={handleInput}
+                data-min="true"
+            />
+            <input
+                type="range"
+                min={min}
+                max={max}
+                class={styles.input}
+                bind:value={maxValue}
+                step={step}
+                disabled={disabled}
+                oninput={handleInput}
+                data-max="true"
+            />
+        </div>
+
+        <ConditionalWrapper
+            element="button"
+            condition={!!interactiveLabels}
+            onclick={(e: Event) => handleClick(e, 'right')}
+        >
+            {#if maxIcon}
+                {@html maxIcon}
+            {/if}
+            {#if dynamicMaxLabel}
+                <span style={labelStyle}>{dynamicMaxLabel}</span>
+            {/if}
+        </ConditionalWrapper>
+    </div>
+
+    {#if subText}
+        <span class="muted">{subText}</span>
+    {/if}
+</ConditionalWrapper>

package/components/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,205 @@
+/* eslint-disable complexity */
+import React, { useEffect, useRef, useState } from 'react'
+import type { ReactRangeSliderProps } from './rangeslider'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import { classNames } from '../../utils/classNames'
+import { interpolate } from '../../utils/interpolate'
+
+import styles from './rangeslider.module.scss'
+
+const RangeSlider = ({
+    min = 0,
+    max = 100,
+    selectedMin,
+    selectedMax,
+    step = 1,
+    minGap = 5,
+    disabled,
+    color,
+    background,
+    thumb,
+    label,
+    subText,
+    minLabel,
+    maxLabel,
+    minIcon,
+    maxIcon,
+    interactiveLabels,
+    updateLabels,
+    className,
+    onChange
+}: ReactRangeSliderProps) => {
+    const [minValue, setMinValue] = useState(selectedMin || min)
+    const [maxValue, setMaxValue] = useState(selectedMax || max)
+    const [dynamicMinLabel, setDynamicMinLabel] = useState(minLabel)
+    const [dynamicMaxLabel, setDynamicMaxLabel] = useState(maxLabel)
+    const rangeLeftPercent = useRef(interpolate(minValue || min, [min, max], [0, 100]))
+    const rangeRightPercent = useRef(interpolate(maxValue || max, [min, max], [100, 0]))
+
+    const minLabelWidth = `${String(max).length}ch`
+    const labelStyle = updateLabels ? { minWidth: minLabelWidth } as React.CSSProperties : undefined
+
+    const styleVariables = {
+        ...(color && { '--w-range-slider-color': color }),
+        ...(background && { '--w-range-slider-background': background }),
+        ...(thumb && { '--w-range-slider-thumb': thumb })
+    } as React.CSSProperties
+
+    const updateDynamicLabels = (minValue: number, maxValue: number) => {
+        if (dynamicMinLabel && dynamicMaxLabel) {
+            setDynamicMinLabel(dynamicMinLabel.replace(/\d+(\.\d+)?/, String(minValue)))
+            setDynamicMaxLabel(dynamicMaxLabel.replace(/\d+(\.\d+)?/, String(maxValue)))
+        }
+    }
+
+    const handleInput = (event: React.FormEvent) => {
+        const target = event.target
+
+        if (!(target instanceof HTMLInputElement)) {
+            return
+        }
+
+        const value = Number(target.value)
+
+        let currentMin = target.dataset.min ? value : minValue
+        let currentMax = target.dataset.max ? value : maxValue
+
+        if (currentMax - currentMin >= minGap) {
+            if (updateLabels) {
+                updateDynamicLabels(currentMin, currentMax)
+            }
+
+            onChange?.({
+                min: currentMin,
+                max: currentMax
+            })
+        } else if (target.dataset.min) {
+            currentMin = currentMax - Math.max(step, minGap)
+            target.value = String(currentMin)
+        } else {
+            currentMax = currentMin + Math.max(step, minGap)
+            target.value = String(currentMax)
+        }
+
+        setMinValue(currentMin)
+        setMaxValue(currentMax)
+    }
+
+    const handleClick = (event: React.MouseEvent, direction: 'left' | 'right') => {
+        const target = event.currentTarget
+
+        if (!(target instanceof HTMLButtonElement)) {
+            return
+        }
+
+        const dir = direction === 'left' ? -1 : 1
+        const updatedMinValue = Number(minValue) + (dir * step)
+        const updatedMaxValue = Number(maxValue) + (dir * step)
+
+        if (updatedMinValue < min || updatedMaxValue > max) {
+            return
+        }
+
+        setMinValue(updatedMinValue)
+        setMaxValue(updatedMaxValue)
+
+        if (updateLabels) {
+            updateDynamicLabels(updatedMinValue, updatedMaxValue)
+        }
+
+        onChange?.({
+            min: updatedMinValue,
+            max: updatedMaxValue
+        })
+    }
+
+    useEffect(() => {
+        rangeLeftPercent.current = interpolate((minValue || min), [min, max], [0, 100])
+        rangeRightPercent.current = interpolate((maxValue || max), [min, max], [100, 0])
+    }, [minValue, maxValue])
+
+    return (
+        <ConditionalWrapper
+            condition={!!(label || subText)}
+            wrapper={children => (
+                <label className={classNames([styles.label, className])}>{children}</label>
+            )}
+        >
+            {label && <span>{label}</span>}
+
+            <div
+                className={classNames([styles.container, !(label && subText) && className])}
+                style={styleVariables}
+            >
+                <ConditionalWrapper
+                    condition={!!interactiveLabels}
+                    wrapper={children => (
+                        <button onClick={(e: React.MouseEvent) => handleClick(e, 'left')}>{children}</button>
+                    )}
+                >
+                    {minIcon && (
+                        <span
+                            dangerouslySetInnerHTML={{ __html: minIcon }}
+                            style={{ height: 18 }}
+                        />
+                    )}
+                    {dynamicMinLabel && <span style={labelStyle}>{dynamicMinLabel}</span>}
+                </ConditionalWrapper>
+
+                <div className={styles.slider}>
+                    <div
+                        data-disabled={disabled ? 'true' : undefined}
+                        className={styles.range}
+                        style={{
+                            left: `${rangeLeftPercent.current}%`,
+                            right: `${rangeRightPercent.current}%`
+                        }}
+                    />
+                    <input
+                        type="range"
+                        className={classNames([styles.input, styles.min])}
+                        min={min}
+                        max={max}
+                        value={minValue}
+                        step={step}
+                        disabled={disabled}
+                        onInput={handleInput}
+                        data-min="true"
+                    />
+                    <input
+                        type="range"
+                        min={min}
+                        max={max}
+                        className={styles.input}
+                        value={maxValue}
+                        step={step}
+                        disabled={disabled}
+                        onInput={handleInput}
+                        data-max="true"
+                    />
+                </div>
+
+                <ConditionalWrapper
+                    condition={!!interactiveLabels}
+                    wrapper={children => (
+                        <button onClick={(e: React.MouseEvent) => handleClick(e, 'right')}>{children}</button>
+                    )}
+                >
+                    {maxIcon && (
+                        <span
+                            dangerouslySetInnerHTML={{ __html: maxIcon }}
+                            style={{ height: 18 }}
+                        />
+                    )}
+                    {dynamicMaxLabel && <span style={labelStyle}>{dynamicMaxLabel}</span>}
+                </ConditionalWrapper>
+            </div>
+
+            {subText && <span className="muted">{subText}</span>}
+        </ConditionalWrapper>
+    )
+}
+
+export default RangeSlider