@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/range-filter/scss/index.scss

@@ -0,0 +1,257 @@
+@use 'variables';
+
+.range-filter {
+    color: var(--color);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-inline: auto;
+    max-width: 100%;
+    width: var(--width);
+
+    &-body {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    &-clear {
+        align-items: center;
+        background: var(--clear-background);
+        border: 1px solid var(--clear-border);
+        border-radius: 6px;
+        box-shadow: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.05);
+        color: var(--muted-color);
+        cursor: pointer;
+        display: inline-flex;
+        flex-shrink: 0;
+        font: inherit;
+        font-size: 12px;
+        font-weight: var(--font-weight-500);
+        gap: 4px;
+        height: 24px;
+        outline: 0 solid var(--focus-color);
+        outline-offset: 2px;
+        padding: 0 8px;
+        transition:
+            background-color 150ms ease-out,
+            color 150ms ease-out,
+            opacity 150ms ease-out;
+
+        &:disabled {
+            cursor: default;
+            opacity: 0.5;
+        }
+
+        &:focus-visible {
+            outline-width: 2px;
+        }
+
+        &:not(:disabled):hover {
+            background: var(--clear-hover);
+            color: var(--color);
+        }
+
+        svg {
+            height: 12px;
+            width: 12px;
+        }
+    }
+
+    // Folds to nothing when the number is too short to need it, so digits slide over rather than jump.
+    &-column {
+        display: inline-block;
+        height: 1lh;
+        max-width: 1ch;
+        overflow: hidden;
+        position: relative;
+        text-align: center;
+        transition:
+            max-width var(--roll-duration) var(--roll-ease),
+            opacity var(--roll-duration) var(--roll-ease);
+        vertical-align: bottom;
+
+        &.--digit {
+            width: 1ch;
+        }
+
+        // Letters and separators are often wider than a digit, and a lone space must keep its width.
+        &.--symbol {
+            max-width: 1.5em;
+            white-space: pre;
+        }
+
+        &.--empty {
+            max-width: 0;
+            opacity: 0;
+        }
+
+        &.--symbol .range-filter-strip,
+        &:not(.--symbol) .range-filter-symbol {
+            display: none;
+        }
+    }
+
+    &-columns {
+        display: inline-flex;
+    }
+
+    &-dash {
+        color: var(--muted-color);
+    }
+
+    &-ghost {
+        background: var(--ghost-color);
+        border-radius: 999px;
+        height: var(--track-height);
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        transition:
+            left 75ms ease-out,
+            opacity 100ms ease-out,
+            width 75ms ease-out;
+        translate: 0 -50%;
+        z-index: 1;
+
+        &.--active {
+            opacity: 1;
+        }
+    }
+
+    &-header {
+        align-items: flex-start;
+        display: flex;
+        gap: 16px;
+        justify-content: space-between;
+    }
+
+    &-label {
+        color: var(--muted-color);
+        font-size: 12px;
+        font-weight: var(--font-weight-500);
+        letter-spacing: 0.05em;
+        margin: 0 0 4px;
+        text-transform: uppercase;
+    }
+
+    &-number {
+        display: inline-flex;
+    }
+
+    &-range {
+        background: var(--range-color);
+        inset-block: 0;
+        position: absolute;
+        transition: none;
+    }
+
+    &-root {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        height: var(--thumb-size);
+        position: relative;
+        touch-action: none;
+        user-select: none;
+        width: 100%;
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-strip {
+        display: flex;
+        flex-direction: column;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: translate var(--roll-duration) var(--roll-ease);
+        translate: 0 calc(var(--digit, 0) * -10%);
+
+        span {
+            height: 1lh;
+        }
+    }
+
+    // Held inside the track like Radix does it: the centre travels from half a thumb in at each end.
+    &-thumb {
+        background: var(--thumb-background);
+        border: 2px solid var(--thumb-border);
+        border-radius: 50%;
+        box-shadow: 0 4px 6px -1px oklch(from var(--color-black-300) l c h / 0.1), 0 2px 4px -2px oklch(from var(--color-black-300) l c h / 0.1);
+        height: var(--thumb-size);
+        left: calc(var(--thumb-size) / 2 + var(--position) * (100% - var(--thumb-size)));
+        outline: 0 solid var(--focus-color);
+        outline-offset: 2px;
+        position: absolute;
+        top: 50%;
+        transition: scale 150ms ease-out;
+        translate: -50% -50%;
+        width: var(--thumb-size);
+
+        &:focus-visible {
+            outline-width: 3px;
+        }
+
+        &:hover,
+        &.--active {
+            scale: 1.25;
+        }
+    }
+
+    &-ticks {
+        color: var(--tick-color);
+        display: flex;
+        font-size: 11px;
+        font-weight: var(--font-weight-500);
+        justify-content: space-between;
+        user-select: none;
+    }
+
+    &-track {
+        background: var(--track-color);
+        border-radius: 999px;
+        height: var(--track-height);
+        overflow: hidden;
+        position: relative;
+        width: 100%;
+    }
+
+    // Centred rather than baseline-aligned: the clipped digit columns report their bottom edge as their baseline.
+    &-value {
+        align-items: center;
+        display: inline-flex;
+        font-size: var(--value-font-size);
+        font-variant-numeric: tabular-nums;
+        font-weight: var(--font-weight-700, 700);
+    }
+
+    &-values {
+        align-items: center;
+        display: flex;
+        gap: 6px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-column,
+        &-ghost,
+        &-strip,
+        &-thumb {
+            transition: none;
+        }
+
+        &-thumb:hover,
+        &-thumb.--active {
+            scale: 1;
+        }
+    }
+}

package/src/components/range-filter/scss/variables.scss

@@ -0,0 +1,20 @@
+.range-filter {
+    --clear-background: var(--color-white-300);
+    --clear-border: var(--color-border-300);
+    --clear-hover: var(--color-grey-400);
+    --color: var(--color-text-500);
+    --focus-color: oklch(from var(--color-text-500) l c h / 0.3);
+    --ghost-color: oklch(from var(--color-text-500) l c h / 0.3);
+    --muted-color: var(--color-text-300);
+    --range-color: var(--color-text-500);
+    --roll-duration: 500ms;
+    --roll-ease: cubic-bezier(0.23, 1, 0.32, 1);
+    --thumb-background: var(--color-white-300);
+    --thumb-border: var(--color-text-500);
+    --thumb-size: 20px;
+    --tick-color: oklch(from var(--color-text-300) l c h / 0.6);
+    --track-color: var(--color-grey-500);
+    --track-height: 8px;
+    --value-font-size: var(--font-size-500);
+    --width: 384px;
+}

package/src/components/range-slider/index.ts

@@ -0,0 +1,277 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import input from '~/components/input';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [RANGE_SLIDER_INPUT]?: Parameters<typeof input>[0];
+    [RANGE_SLIDER_THUMB]?: Attributes;
+    format?: (value: number) => string;
+    label: string;
+    max?: number;
+    min?: number;
+    prefix?: string;
+    state?: State;
+    step?: number;
+    value?: [number, number];
+};
+
+type Drag = { gliding: boolean, offset: number, thumb: Thumb };
+
+type State = { high: number, low: number };
+
+type Thumb = 0 | 1;
+
+
+const KEYS = ['low', 'high'] as const;
+
+const RANGE_SLIDER_INPUT = Symbol.for('@esportsplus/ui/range-slider.input');
+
+const RANGE_SLIDER_THUMB = Symbol.for('@esportsplus/ui/range-slider.thumb');
+
+
+function clamp(value: number, lo: number, hi: number) {
+    return Math.min(Math.max(value, lo), hi);
+}
+
+function template(
+    this: { attributes?: Partial<A> } | void,
+    { format = String, label, max = 100, min = 0, prefix = '', state, step = 1, value, ...attributes }: A
+) {
+    let decimals = (String(step).split('.')[1] || '').length,
+        defaults = this?.attributes,
+        drag: Drag | null = null,
+        name = label.toLowerCase(),
+        s = state || reactive({ high: value?.[1] ?? max, low: value?.[0] ?? min }),
+        span = max - min,
+        thumbs: HTMLElement[] = [],
+        track: HTMLElement | undefined,
+        ui = reactive({ dragging: -1, gliding: false });
+
+    // Thumbs stop at each other rather than push; in a filter, pushing would quietly change the bound the user isn't touching.
+    function commit(thumb: Thumb, raw: number) {
+        let next = Number((Math.round((raw - min) / step) * step + min).toFixed(decimals)),
+            bounded = thumb === 0 ? clamp(next, min, s.high - step) : clamp(next, s.low + step, max);
+
+        if (bounded === s[KEYS[thumb]]) {
+            return;
+        }
+
+        s[KEYS[thumb]] = bounded;
+    }
+
+    function end() {
+        drag = null;
+        ui.dragging = -1;
+        ui.gliding = false;
+    }
+
+    function field(thumb: Thumb) {
+        let draft = reactive({ value: null as string | null }),
+            key = KEYS[thumb];
+
+        function save() {
+            if (draft.value === null) {
+                return;
+            }
+
+            let parsed = Number(draft.value.replace(/[^\d.]/g, ''));
+
+            if (draft.value.trim() !== '' && Number.isFinite(parsed)) {
+                commit(thumb, parsed);
+            }
+
+            draft.value = null;
+        }
+
+        return html`
+            <label class='range-slider-field'>
+                <span class='range-slider-field-label'>${thumb === 0 ? 'Min' : 'Max'}</span>
+                ${prefix && html`<span class='range-slider-field-prefix' aria-hidden='true'>${prefix}</span>`}
+                ${input({
+                    'aria-label': `${thumb === 0 ? 'Minimum' : 'Maximum'} ${name}`,
+                    autocomplete: 'off',
+                    class: 'range-slider-input',
+                    inputmode: 'numeric',
+                    onblur: save,
+                    oninput: (e: Event) => {
+                        draft.value = (e.target as HTMLInputElement).value;
+                    },
+                    onkeydown: (e: KeyboardEvent) => {
+                        if (e.key === 'Enter') {
+                            save();
+                        }
+                        else if (e.key === 'Escape') {
+                            draft.value = null;
+                        }
+                    },
+                    value: () => draft.value ?? String(s[key]),
+                    ...defaults?.[RANGE_SLIDER_INPUT],
+                    ...attributes[RANGE_SLIDER_INPUT]
+                })}
+            </label>
+        `;
+    }
+
+    function fraction(x: number) {
+        if (!track) {
+            return 0;
+        }
+
+        let box = track.getBoundingClientRect();
+
+        return clamp((x - box.left) / box.width, 0, 1);
+    }
+
+    function handle(thumb: Thumb) {
+        let key = KEYS[thumb];
+
+        return html`
+            <div
+                class='range-slider-handle range-slider-handle--${key}'
+                ${{
+                    // The active thumb sits on top; at rest the one nearer an end yields, so stacked thumbs can always be pulled apart.
+                    class: () => (ui.dragging === -1 ? (thumb === 0) === (s.low > (min + max) / 2) : ui.dragging === thumb) && '--raised'
+                }}
+            >
+                <div
+                    aria-label='${`${thumb === 0 ? 'Minimum' : 'Maximum'} ${name}`}'
+                    aria-valuemax='${max}'
+                    aria-valuemin='${min}'
+                    class='range-slider-thumb'
+                    data-thumb='${thumb}'
+                    role='slider'
+                    tabindex='0'
+                    ${defaults?.[RANGE_SLIDER_THUMB]}
+                    ${attributes[RANGE_SLIDER_THUMB]}
+                    ${{
+                        'aria-valuenow': () => s[key],
+                        'aria-valuetext': () => format(s[key]),
+                        class: () => ui.dragging === thumb && '--active',
+                        onkeydown: (e: KeyboardEvent) => keydown(thumb, e),
+                        onrender: (element: HTMLElement) => {
+                            thumbs[thumb] = element;
+                        }
+                    }}
+                >
+                    <span class='range-slider-tooltip' aria-hidden='true'>${() => format(s[key])}</span>
+                </div>
+            </div>
+        `;
+    }
+
+    function keydown(thumb: Thumb, e: KeyboardEvent) {
+        let big = step * 10,
+            delta: Record<string, number> = {
+                ArrowDown: e.shiftKey ? -big : -step,
+                ArrowLeft: e.shiftKey ? -big : -step,
+                ArrowRight: e.shiftKey ? big : step,
+                ArrowUp: e.shiftKey ? big : step,
+                End: Infinity,
+                Home: -Infinity,
+                PageDown: -big,
+                PageUp: big
+            };
+
+        if (!(e.key in delta)) {
+            return;
+        }
+
+        e.preventDefault();
+        commit(thumb, clamp(s[KEYS[thumb]] + delta[e.key], min, max));
+    }
+
+    return html`
+        <div
+            class='range-slider'
+            ${defaults}
+            ${attributes}
+            ${{
+                class: () => ui.dragging !== -1 && !ui.gliding && '--dragging',
+                style: () => `--high: ${(s.high - min) / span}; --low: ${(s.low - min) / span};`
+            }}
+        >
+            <div class='range-slider-header'>
+                <span class='range-slider-label'>${label}</span>
+                <span class='range-slider-summary'>${() => `${format(s.low)} to ${format(s.high)}`}</span>
+            </div>
+
+            <div
+                aria-label='${label}'
+                class='range-slider-track'
+                role='group'
+                ${{
+                    onlostpointercapture: end,
+                    onpointercancel: end,
+                    onpointerdown: (e: PointerEvent) => {
+                        if (e.button !== 0 || !track) {
+                            return;
+                        }
+
+                        let f = fraction(e.clientX),
+                            grabbed = (e.target as HTMLElement).closest<HTMLElement>('[data-thumb]'),
+                            thumb: Thumb;
+
+                        if (grabbed) {
+                            thumb = Number(grabbed.dataset.thumb) as Thumb;
+                        }
+                        else {
+                            let high = (s.high - min) / span,
+                                low = (s.low - min) / span,
+                                toHigh = Math.abs(f - high),
+                                toLow = Math.abs(f - low);
+
+                            // Stacked thumbs tie, so the side of the click decides.
+                            thumb = toLow === toHigh ? (f < low ? 0 : 1) : (toLow < toHigh ? 0 : 1);
+                        }
+
+                        e.preventDefault();
+                        thumbs[thumb]?.focus({ preventScroll: true });
+                        track.setPointerCapture(e.pointerId);
+
+                        // Grabbing a thumb off-center keeps that offset, so it never jumps.
+                        drag = {
+                            gliding: !grabbed,
+                            offset: grabbed ? f - (s[KEYS[thumb]] - min) / span : 0,
+                            thumb
+                        };
+                        ui.dragging = thumb;
+                        ui.gliding = !grabbed;
+
+                        if (!grabbed) {
+                            commit(thumb, min + f * span);
+                        }
+                    },
+                    onpointermove: (e: PointerEvent) => {
+                        if (!drag) {
+                            return;
+                        }
+
+                        commit(drag.thumb, min + (fraction(e.clientX) - drag.offset) * span);
+                    },
+                    onpointerup: end,
+                    onrender: (element: HTMLElement) => {
+                        track = element;
+                    }
+                }}
+            >
+                <div class='range-slider-rail'>
+                    <div class='range-slider-fill'></div>
+                </div>
+                ${handle(0)}
+                ${handle(1)}
+            </div>
+
+            <div class='range-slider-fields'>
+                ${field(0)}
+                <span class='range-slider-dash' aria-hidden='true'></span>
+                ${field(1)}
+            </div>
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { input: RANGE_SLIDER_INPUT, thumb: RANGE_SLIDER_THUMB } as const);
+export type { State };