@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/sheet/index.ts

@@ -0,0 +1,170 @@
+import { effect, reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes } from '@esportsplus/template';
+import modal from '~/components/modal';
+import './scss/index.scss';
+
+
+type A = Attributes<HTMLDialogElement> & {
+    [SHEET_HANDLE]?: Attributes;
+    label?: string;
+    oncancel?: never;
+    onclick?: never;
+    onclose?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    onpointercancel?: never;
+    onpointerdown?: never;
+    onpointermove?: never;
+    onpointerup?: never;
+    state?: { active: boolean };
+};
+
+type Drag = {
+    dy: number;
+    pointer: number;
+    start: number;
+    y: number;
+};
+
+
+// Otherwise the sheet must be dragged past this share of its height.
+const DISMISS_DISTANCE = 0.25;
+
+// A release faster than this (px per ms) dismisses however short the drag, so a quick flick is enough.
+const FLICK_VELOCITY = 0.11;
+
+const SHEET_HANDLE = Symbol.for('@esportsplus/ui/sheet.handle');
+
+const base = modal.bind({ attributes: { class: 'sheet modal--sheet', tabindex: -1 } });
+
+const THRESHOLD = 4;
+
+
+function inside(element: HTMLElement, e: PointerEvent) {
+    let rect = element.getBoundingClientRect();
+
+    return e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+}
+
+function swallow(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+
+export default Object.assign(
+    component<A>(
+        function(this, { label, state = reactive({ active: false }), ...attributes }, content) {
+            let drag: Drag | null = null,
+                stop: VoidFunction | undefined;
+
+            function settle(element: HTMLElement, close: boolean) {
+                // Released styles match what the resulting state renders, so the transition picks up from
+                // wherever the finger let go.
+                element.classList.remove('--dragging');
+                element.style.removeProperty('--progress');
+                element.style.removeProperty('translate');
+
+                if (close) {
+                    state.active = false;
+                }
+            }
+
+            return base(
+                {
+                    'aria-label': label,
+                    state,
+                    ...this?.attributes,
+                    ...attributes,
+                    class: [this?.attributes?.class, attributes.class].flat(),
+                    onpointercancel: (e: PointerEvent) => {
+                        if (!drag || e.pointerId !== drag.pointer) {
+                            return;
+                        }
+
+                        drag = null;
+                        settle(e.currentTarget as HTMLDialogElement, false);
+                    },
+                    onpointerdown: (e: PointerEvent) => {
+                        let element = e.currentTarget as HTMLDialogElement;
+
+                        if (e.button !== 0 || !state.active || !inside(element, e)) {
+                            return;
+                        }
+
+                        if ((e.target as HTMLElement).closest('a, button, input, select, textarea, [contenteditable]')) {
+                            return;
+                        }
+
+                        drag = { dy: 0, pointer: e.pointerId, start: performance.now(), y: e.clientY };
+                        element.setPointerCapture(e.pointerId);
+                        element.classList.add('--dragging');
+                    },
+                    onpointermove: (e: PointerEvent) => {
+                        if (!drag || e.pointerId !== drag.pointer) {
+                            return;
+                        }
+
+                        let element = e.currentTarget as HTMLDialogElement,
+                            dy = e.clientY - drag.y;
+
+                        // Past the top it still gives, but less the further you pull, like stretching something
+                        // that wants to snap back.
+                        if (dy < 0) {
+                            dy = -Math.pow(-dy, 0.7);
+                        }
+
+                        drag.dy = dy;
+                        element.style.setProperty('--progress', String(Math.max(dy, 0) / element.offsetHeight));
+                        element.style.translate = `0 ${dy}px`;
+                    },
+                    onpointerup: (e: PointerEvent) => {
+                        if (!drag || e.pointerId !== drag.pointer) {
+                            return;
+                        }
+
+                        let element = e.currentTarget as HTMLDialogElement,
+                            { dy, start } = drag,
+                            velocity = dy / (performance.now() - start);
+
+                        drag = null;
+
+                        // The click that follows lands on the dialog, and above the sheet it would read as a
+                        // backdrop click.
+                        if (Math.abs(dy) > THRESHOLD) {
+                            addEventListener('click', swallow, true);
+                            setTimeout(() => removeEventListener('click', swallow, true));
+                        }
+
+                        settle(element, dy > element.offsetHeight * DISMISS_DISTANCE || velocity > FLICK_VELOCITY);
+                    }
+                },
+                html`
+                    <div
+                        aria-hidden='true'
+                        class='sheet-handle'
+                        ${this?.attributes?.[SHEET_HANDLE]}
+                        ${attributes[SHEET_HANDLE]}
+                        ${{
+                            onconnect: (element: HTMLElement) => {
+                                let dialog = element.parentElement!;
+
+                                // The sheet itself takes focus; showModal would land on its first control instead.
+                                stop = effect(() => {
+                                    if (state.active) {
+                                        queueMicrotask(() => dialog.focus({ preventScroll: true }));
+                                    }
+                                });
+                            },
+                            ondisconnect: () => {
+                                stop?.();
+                            }
+                        }}
+                    ></div>
+                    ${content}
+                `
+            );
+        }
+    ),
+    { handle: SHEET_HANDLE } as const
+);

package/src/components/sheet/scss/index.scss

@@ -0,0 +1,65 @@
+@use 'variables';
+
+.sheet.modal {
+    --backdrop: var(--backdrop-color);
+    --margin-horizontal: 0px;
+    --max-width: var(--width);
+    --transition-duration: var(--open-duration);
+    --transition-timing-function: var(--ease);
+    background: var(--background);
+    border-radius: var(--radius) var(--radius) 0 0;
+    box-shadow: var(--box-shadow);
+    color: var(--color);
+    cursor: grab;
+    outline: none;
+    // The surface continues below the screen edge, so pulling the sheet up reveals more sheet.
+    overflow: visible;
+    padding: var(--padding-top) var(--padding-sides) var(--padding-bottom);
+    touch-action: none;
+    user-select: none;
+
+    // Exits get out of the way faster than entrances arrive.
+    &:not(.--active) {
+        --transition-duration: var(--close-duration);
+    }
+
+    &.--active::backdrop {
+        opacity: calc(1 - var(--progress, 0));
+    }
+
+    &.--dragging {
+        cursor: grabbing;
+
+        &,
+        &::backdrop {
+            transition: none;
+        }
+    }
+
+    &::after {
+        background: inherit;
+        box-shadow:
+            var(--border-width-400) 0 0 var(--edge-color),
+            calc(var(--border-width-400) * -1) 0 0 var(--edge-color);
+        content: '';
+        height: 50vh;
+        inset-inline: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 100%;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &::backdrop {
+            transition: opacity var(--transition-duration) var(--transition-timing-function);
+        }
+    }
+}
+
+.sheet-handle {
+    background: var(--handle-color);
+    border-radius: var(--handle-height);
+    height: var(--handle-height);
+    margin: 0 auto var(--handle-margin);
+    width: var(--handle-width);
+}

package/src/components/sheet/scss/variables.scss

@@ -0,0 +1,27 @@
+.sheet {
+    --background: var(--color-white-300);
+    --backdrop-color: color-mix(in srgb, var(--color-black-500) 40%, transparent);
+    --box-shadow:
+        0 0 0 var(--border-width-400) var(--color-border-300),
+        0 -8px 40px oklch(from var(--color-black-500) l c h / 0.15);
+    --close-duration: 0.3s;
+    --color: var(--color-text-500);
+    --edge-color: var(--color-border-300);
+    // The iOS drawer curve: fast out of the gate, long gentle settle.
+    --ease: cubic-bezier(0.32, 0.72, 0, 1);
+    --handle-color: var(--color-border-300);
+    --handle-height: 6px;
+    --handle-margin: var(--size-500);
+    --handle-width: 40px;
+    --open-duration: 0.5s;
+    --padding-bottom: var(--size-700);
+    --padding-sides: calc(var(--size-400) * 1.5);
+    --padding-top: var(--size-300);
+    --radius: 28px;
+    --width: 448px;
+
+    &--full {
+        --radius: var(--border-radius-700);
+        --width: 100%;
+    }
+}

package/src/components/shiny-text/index.ts

@@ -0,0 +1,19 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    // Width of the highlight band in px.
+    width?: number;
+};
+
+
+export default component<A>(
+    function(this, { width = 100, ...attributes }, content) {
+        return html`
+            <span class='shiny-text' style='${`--shine-width: ${width}px`}' ${this?.attributes} ${attributes}>
+                ${content}
+            </span>
+        `;
+    }
+);

package/src/components/shiny-text/scss/index.scss

@@ -0,0 +1,32 @@
+@use 'variables';
+
+// The text keeps a translucent fill, so the clipped band behind it reads as a glint passing through the letters.
+.shiny-text {
+    animation: shiny-text var(--duration) infinite;
+    background-clip: text;
+    background-image: linear-gradient(to right, transparent, var(--shine-color) 50%, transparent);
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-size: var(--shine-width) 100%;
+    color: var(--color);
+    transition: color var(--transition-duration) ease-out;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        background-image: none;
+    }
+}
+
+// Sweeps across and back, then rests for the final stretch of each cycle.
+@keyframes shiny-text {
+    0%,
+    90%,
+    100% {
+        background-position: calc(-100% - var(--shine-width)) 0;
+    }
+
+    30%,
+    60% {
+        background-position: calc(100% + var(--shine-width)) 0;
+    }
+}

package/src/components/shiny-text/scss/variables.scss

@@ -0,0 +1,7 @@
+.shiny-text {
+    --color: oklch(from var(--color-text-300) l c h / 0.7);
+    --duration: 8s;
+    --shine-color: oklch(from var(--color-black-300) l c h / 0.8);
+    --shine-width: 100px;
+    --transition-duration: 300ms;
+}

package/src/components/shortcut-recorder/index.ts

@@ -0,0 +1,284 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    label: string;
+    state?: { value: string };
+    taken?: (shortcut: string) => string | null | undefined;
+    value?: string;
+};
+
+type Key = {
+    animation: '' | 'enter' | 'settle';
+    index: number;
+    token: string;
+};
+
+
+const ARROWS: Record<string, string> = {
+    ArrowDown: '↓',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    ArrowUp: '↑'
+};
+
+const ERROR_DURATION = 2200;
+
+const FUNCTION_KEY = /^F\d{1,2}$/;
+
+const MODIFIER_KEYS = new Set(['Alt', 'Control', 'Meta', 'OS', 'Shift']);
+
+// Tokens are joined with '+', so a trailing '+' is the Plus key itself.
+const SEPARATOR = /\+(?=.)/;
+
+
+function glyph(token: string, mac: boolean) {
+    if (token === 'Alt') {
+        return mac ? '⌥' : 'Alt';
+    }
+
+    if (token === 'Ctrl') {
+        return '⌃';
+    }
+
+    if (token === 'Mod') {
+        return mac ? '⌘' : 'Ctrl';
+    }
+
+    if (token === 'Shift') {
+        return mac ? '⇧' : 'Shift';
+    }
+
+    return token;
+}
+
+// Reads the physical key, so Option+K on a Mac records K rather than '˚'.
+function keyName(e: KeyboardEvent) {
+    if (e.code.startsWith('Key')) {
+        return e.code.slice(3);
+    }
+
+    if (e.code.startsWith('Digit')) {
+        return e.code.slice(5);
+    }
+
+    if (e.key in ARROWS) {
+        return ARROWS[e.key];
+    }
+
+    if (e.key === ' ') {
+        return 'Space';
+    }
+
+    if (e.key === 'Enter') {
+        return '↵';
+    }
+
+    if (e.key.length === 1) {
+        return e.key.toUpperCase();
+    }
+
+    return e.key;
+}
+
+// 'Mod' is ⌘ on a Mac and Ctrl elsewhere, so one saved shortcut works on both.
+// Held modifiers follow the order each platform prints them in.
+function modifiers(e: KeyboardEvent, mac: boolean) {
+    let tokens = mac
+        ? [e.ctrlKey && 'Ctrl', e.altKey && 'Alt', e.shiftKey && 'Shift', e.metaKey && 'Mod']
+        : [e.ctrlKey && 'Mod', e.altKey && 'Alt', e.shiftKey && 'Shift'];
+
+    return tokens.filter((token): token is string => !!token);
+}
+
+function parse(value: string) {
+    return value ? value.split(SEPARATOR) : [];
+}
+
+
+export default ({ label, taken, value = '', state = reactive({ value }), ...attributes }: A) => {
+    let connected = false,
+        field: HTMLElement | undefined,
+        keys = reactive([] as Key[]),
+        listeners: AbortController | undefined,
+        mac = /Mac|iPhone|iPad/.test(navigator.platform),
+        status = reactive({ error: '', recording: false, shake: 0 }),
+        sync = effect(() => {
+            let tokens = status.recording ? [] : parse(state.value);
+
+            untrack(() => show(tokens, connected ? 'settle' : ''));
+        }),
+        timer: ReturnType<typeof setTimeout> | undefined;
+
+    function fail(text: string) {
+        clearTimeout(timer);
+        status.error = text;
+        // Alternating the parity swaps between identical keyframes, restarting the shake.
+        status.shake = status.shake === 1 ? 2 : 1;
+        timer = setTimeout(() => status.error = '', ERROR_DURATION);
+    }
+
+    function onaway(e: Event) {
+        if (e.type === 'blur' || !field?.contains(e.target as Node | null)) {
+            stop();
+        }
+    }
+
+    // While recording every key belongs to the field, taken before the page's own shortcuts can act on it.
+    function onkeydown(e: KeyboardEvent) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        let held = modifiers(e, mac);
+
+        if (MODIFIER_KEYS.has(e.key)) {
+            show(held, 'enter');
+            return;
+        }
+
+        if (!held.length && e.key === 'Escape') {
+            stop();
+            return;
+        }
+
+        if (!held.length && (e.key === 'Backspace' || e.key === 'Delete')) {
+            state.value = '';
+            stop();
+            return;
+        }
+
+        let key = keyName(e);
+
+        if (!held.length && !FUNCTION_KEY.test(key)) {
+            fail(`Add ${mac ? '⌘, ⌥ or ⇧' : 'Ctrl, Alt or Shift'}`);
+            return;
+        }
+
+        let shortcut = [...held, key].join('+'),
+            owner = shortcut === state.value ? null : taken?.(shortcut);
+
+        if (owner) {
+            fail(`Used by ${owner}`);
+            return;
+        }
+
+        state.value = shortcut;
+        stop();
+    }
+
+    function onkeyup(e: KeyboardEvent) {
+        e.stopImmediatePropagation();
+        show(modifiers(e, mac), 'enter');
+    }
+
+    // Recording keeps caps that are still held in place so only the new ones animate in.
+    function show(tokens: string[], animation: Key['animation']) {
+        if (animation !== 'enter') {
+            keys.splice(0, keys.length, ...tokens.map((token, index) => ({ animation, index, token })));
+            return;
+        }
+
+        for (let i = keys.length - 1; i >= 0; i--) {
+            if (!tokens.includes(keys[i].token)) {
+                keys.splice(i, 1);
+            }
+        }
+
+        for (let i = 0, n = tokens.length; i < n; i++) {
+            if (keys[i]?.token !== tokens[i]) {
+                keys.splice(i, 0, { animation, index: i, token: tokens[i] });
+            }
+        }
+
+        if (keys.length > tokens.length) {
+            keys.splice(tokens.length);
+        }
+    }
+
+    function start() {
+        clearTimeout(timer);
+        status.error = '';
+        status.recording = true;
+
+        listeners?.abort();
+        listeners = new AbortController();
+
+        let signal = listeners.signal;
+
+        document.addEventListener('pointerdown', onaway, { signal });
+        window.addEventListener('blur', onaway, { signal });
+        window.addEventListener('keydown', onkeydown, { capture: true, signal });
+        window.addEventListener('keyup', onkeyup, { capture: true, signal });
+    }
+
+    function stop() {
+        clearTimeout(timer);
+        listeners?.abort();
+        status.error = '';
+        status.recording = false;
+    }
+
+    onCleanup(() => {
+        clearTimeout(timer);
+        listeners?.abort();
+        sync();
+    });
+
+    return html`
+        <div class='shortcut-recorder' ${attributes}>
+            <div class='shortcut-recorder-label'>
+                ${label}
+                <div class='shortcut-recorder-status' role='status'>
+                    ${() => status.error && html`<span class='shortcut-recorder-error'>${status.error}</span>`}
+                </div>
+            </div>
+            <button
+                aria-label='${() => `${label} shortcut: ${state.value ? parse(state.value).map((token) => glyph(token, mac)).join(' ') : 'none'}. ${status.recording ? 'Recording, press the new keys, Escape to cancel, Backspace to clear.' : 'Press to change.'}`}'
+                aria-pressed='${() => status.recording ? 'true' : 'false'}'
+                class='shortcut-recorder-field'
+                data-shake='${() => status.shake}'
+                type='button'
+                ${{
+                    class: () => status.recording && '--active',
+                    onclick: function(this: HTMLElement) {
+                        field = this;
+
+                        if (status.recording) {
+                            stop();
+                        }
+                        else {
+                            start();
+                        }
+                    },
+                    onconnect: () => {
+                        connected = true;
+                    }
+                }}
+            >
+                ${html.reactive(keys, (key) => html`
+                    <kbd
+                        class='shortcut-recorder-key ${key.animation && `shortcut-recorder-key--${key.animation}`}'
+                        style='--index: ${key.index}'
+                    >
+                        ${glyph(key.token, mac)}
+                    </kbd>
+                `)}
+                ${() => {
+                    if (keys.length) {
+                        return '';
+                    }
+
+                    return html`
+                        <span class='shortcut-recorder-placeholder ${connected && 'shortcut-recorder-placeholder--fade'}'>
+                            ${status.recording
+                                ? html`<span class='shortcut-recorder-dot' aria-hidden='true'></span>Press keys`
+                                : 'None'}
+                        </span>
+                    `;
+                }}
+            </button>
+        </div>
+    `;
+};