@esportsplus/ui 0.56.3 → 0.57.0

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

@@ -1,257 +0,0 @@
-@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

@@ -1,20 +0,0 @@
-.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

@@ -1,277 +0,0 @@
-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 };