@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/command/scss/index.scss

@@ -0,0 +1,213 @@
+@use '/lib';
+@use '/tokens';
+@use '../../card/scss/index' as card;
+@use '../../modal/scss/index' as modal;
+@use 'variables';
+
+.command {
+    border: var(--border-width) solid var(--border-color);
+    flex-direction: column;
+    height: min(var(--height), 76svh);
+    margin: 12svh auto auto;
+
+    // Author 'display' beats the UA 'dialog:not([open]) { display: none }' rule.
+    &[open] {
+        display: flex;
+    }
+
+
+    &-empty {
+        color: var(--color-text-300);
+        font-size: var(--font-size-300);
+        padding-top: var(--size-800);
+        text-align: center;
+
+        b {
+            color: var(--color-text-500);
+            font-weight: var(--font-weight-500);
+        }
+    }
+
+    &-footer {
+        align-items: center;
+        background: var(--background);
+        border-bottom-left-radius: inherit;
+        border-bottom-right-radius: inherit;
+        border-top: var(--border-width) solid var(--color-border-300);
+        color: var(--color);
+        display: flex;
+        flex: 0 0 auto;
+        font-size: var(--font-size-200);
+        font-weight: var(--font-weight-500);
+        gap: var(--size-200);
+        margin: var(--size-200) calc(var(--border-width) - var(--padding)) calc(var(--border-width) - var(--padding));
+        min-height: 44px;
+        padding: 0 var(--size-400);
+
+        kbd {
+            align-items: center;
+            background: var(--color-white-300);
+            border: var(--border-width) solid var(--color-border-400);
+            border-radius: var(--border-radius-300);
+            display: inline-flex;
+            font-family: inherit;
+            font-size: var(--font-size-200);
+            height: 22px;
+            justify-content: center;
+            min-width: 22px;
+            padding: 0 var(--size-100);
+        }
+
+        span + kbd {
+            margin-left: var(--size-300);
+        }
+    }
+
+    &-group-label {
+        align-items: flex-end;
+        color: var(--color-text-300);
+        display: flex;
+        font-size: var(--font-size-200);
+        font-weight: var(--font-weight-500);
+        height: var(--heading-height);
+        padding: 0 var(--size-300) var(--size-100);
+    }
+
+    &-highlight {
+        @include lib.position(absolute, 0 0 null 0);
+        background: var(--background);
+        border-radius: var(--border-radius-400);
+        height: var(--row-height);
+        opacity: 0;
+        pointer-events: none;
+        transform: translateY(calc(var(--heading-height) * var(--group, 1) + var(--row-height) * var(--row, 0)));
+        transition:
+            opacity var(--transition-duration) var(--transition-timing-function),
+            transform 0.28s cubic-bezier(0.34, 1.24, 0.64, 1);
+
+        @include tokens.state(active) {
+            opacity: 1;
+        }
+    }
+
+    &-item {
+        align-items: center;
+        border-radius: var(--border-radius-400);
+        color: oklch(from var(--color-text-500) l c h / 0.8);
+        cursor: pointer;
+        display: flex;
+        font-size: var(--font-size-300);
+        font-weight: var(--font-weight-500);
+        gap: var(--size-300);
+        height: var(--row-height);
+        padding: 0 var(--size-300);
+        position: relative;
+        text-decoration: none;
+        transition:
+            color var(--transition-duration) var(--transition-timing-function),
+            transform var(--transition-duration) var(--transition-timing-function);
+        z-index: 1;
+
+        &:active {
+            transform: scale(0.985);
+        }
+
+        &-icon {
+            color: var(--color-text-300);
+            display: flex;
+            flex: 0 0 auto;
+            transition: transform 0.24s cubic-bezier(0.34, 1.24, 0.64, 1);
+        }
+
+        &-label {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        @include tokens.state(active) {
+            color: var(--color-text-500);
+
+            .command-item-icon {
+                transform: translateX(2px);
+            }
+        }
+    }
+
+    &-list {
+        position: relative;
+    }
+
+    &-match {
+        background: var(--background);
+        border-radius: var(--border-radius-100);
+        color: inherit;
+    }
+
+    &-results {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    &-search {
+        align-items: center;
+        background: var(--background);
+        border: var(--border-width) solid var(--color-border-300);
+        border-radius: var(--border-radius-400);
+        cursor: text;
+        display: flex;
+        flex: 0 0 auto;
+        gap: var(--size-300);
+        height: var(--height);
+        padding: 0 var(--size-300);
+
+        &-icon {
+            color: var(--color);
+            flex: 0 0 auto;
+            height: 14px;
+            position: relative;
+            width: 14px;
+
+            &::after,
+            &::before {
+                content: '';
+                position: absolute;
+            }
+
+            &::after {
+                background: currentColor;
+                border-radius: 1px;
+                bottom: 0;
+                height: 5px;
+                right: 1px;
+                transform: rotate(-45deg);
+                transform-origin: bottom center;
+                width: 1.5px;
+            }
+
+            &::before {
+                border: 1.5px solid currentColor;
+                border-radius: 50%;
+                height: 10px;
+                left: 0;
+                top: 0;
+                width: 10px;
+            }
+        }
+
+        > .input {
+            --padding-horizontal: 0px;
+            --padding-vertical: 0px;
+            font-family: inherit;
+            outline: none;
+
+            &::placeholder {
+                color: var(--color-text-300);
+                opacity: 0.6;
+            }
+        }
+    }
+}

package/src/components/command/scss/variables.scss

@@ -0,0 +1,35 @@
+// Children read '--padding' because the root '*' rule resets
+// '--padding-horizontal' and '--padding-vertical' on every element.
+.command {
+    --background-default: var(--color-white-400);
+    --border-color-default: var(--color-border-300);
+    --border-radius: var(--border-radius-700);
+    --border-width: var(--border-width-400);
+    --box-shadow-default: var(--box-shadow-600);
+    --heading-height: 36px;
+    --height: 408px;
+    --max-width: 600px;
+    --padding: var(--size-200);
+    --padding-horizontal: var(--padding);
+    --padding-vertical: var(--padding);
+    --row-height: 36px;
+
+    &-footer {
+        --background: var(--color-grey-300);
+        --color: var(--color-text-300);
+    }
+
+    &-highlight {
+        --background: var(--color-grey-500);
+    }
+
+    &-match {
+        --background: oklch(from var(--color-yellow-300) l c h / 0.4);
+    }
+
+    &-search {
+        --background: oklch(from var(--color-grey-500) l c h / 0.5);
+        --color: var(--color-text-300);
+        --height: 36px;
+    }
+}

package/src/components/command-palette/index.ts

@@ -0,0 +1,456 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import input from '~/components/input';
+import modal from '~/components/modal';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [COMMAND_PALETTE_DIALOG]?: Dialog;
+    [COMMAND_PALETTE_INPUT]?: Field;
+    [COMMAND_PALETTE_OPTION]?: Attributes;
+    [COMMAND_PALETTE_TRIGGER]?: Attributes;
+    commands: Command[];
+    label?: Renderable<unknown>;
+    onrun?: (command: Command) => void;
+    placeholder?: string;
+    state?: State;
+};
+
+type Command = {
+    group: string;
+    icon?: Renderable<unknown>;
+    id: string;
+    label: string;
+    shortcut?: string[];
+};
+
+// What 'modal' and 'input' leave open to callers; they own the rest.
+type Dialog = Attributes<HTMLDialogElement> & {
+    oncancel?: never;
+    onclick?: never;
+    onclose?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+};
+
+type Field = Attributes & {
+    onfocusin?: never;
+    onfocusout?: never;
+    onrender?: never;
+};
+
+type Group = {
+    group: string;
+    items: Match[];
+};
+
+type Match = {
+    command: Command;
+    index: number;
+    ranges: [number, number][];
+};
+
+type State = {
+    active: boolean;
+    index: number;
+    query: string;
+};
+
+
+const COMMAND_PALETTE_DIALOG = Symbol.for('@esportsplus/ui/command-palette.dialog');
+
+const COMMAND_PALETTE_INPUT = Symbol.for('@esportsplus/ui/command-palette.input');
+
+const COMMAND_PALETTE_OPTION = Symbol.for('@esportsplus/ui/command-palette.option');
+
+const COMMAND_PALETTE_TRIGGER = Symbol.for('@esportsplus/ui/command-palette.trigger');
+
+
+let uid = 0;
+
+
+function filter(commands: Command[], query: string) {
+    let groups: Group[] = [],
+        index = 0,
+        keys = new Map<string, Group>();
+
+    for (let i = 0, n = commands.length; i < n; i++) {
+        let command = commands[i],
+            ranges = match(command.label, query);
+
+        if (!ranges) {
+            continue;
+        }
+
+        let group = keys.get(command.group);
+
+        if (!group) {
+            group = { group: command.group, items: [] };
+            groups.push(group);
+            keys.set(command.group, group);
+        }
+
+        group.items.push({ command, index: 0, ranges });
+    }
+
+    // Flattened in rendered order, so arrow keys and indices agree even when groups arrive interleaved.
+    let flat: Match[] = [];
+
+    for (let i = 0, n = groups.length; i < n; i++) {
+        let items = groups[i].items;
+
+        for (let j = 0, m = items.length; j < m; j++) {
+            items[j].index = index++;
+            flat.push(items[j]);
+        }
+    }
+
+    return { flat, groups };
+}
+
+function highlight(label: string, ranges: [number, number][]) {
+    if (!ranges.length) {
+        return html`<span class='command-palette-label'>${label}</span>`;
+    }
+
+    let cursor = 0,
+        parts: Renderable<unknown>[] = [];
+
+    for (let i = 0, n = ranges.length; i < n; i++) {
+        let [start, end] = ranges[i];
+
+        if (start > cursor) {
+            parts.push(label.slice(cursor, start));
+        }
+
+        parts.push(html`<span class='command-palette-match'>${label.slice(start, end)}</span>`);
+        cursor = end;
+    }
+
+    parts.push(label.slice(cursor));
+
+    return html`<span class='command-palette-label command-palette-label--filtered'>${parts}</span>`;
+}
+
+// The list re-renders on every keystroke and a fragment empties on first insert, so render copies.
+function icon(value: Renderable<unknown>) {
+    return value instanceof Node ? value.cloneNode(true) : value;
+}
+
+// Clicks anywhere in the panel keep focus in the input, so typing and arrow keys carry on after a stray click.
+function keep(e: MouseEvent) {
+    if (!(e.target instanceof HTMLInputElement)) {
+        e.preventDefault();
+    }
+}
+
+function kbd(keys: string[]) {
+    return html`
+        <span aria-hidden='true' class='command-palette-keys'>
+            ${keys.map((key) => html`<kbd class='command-palette-kbd'>${key}</kbd>`)}
+        </span>
+    `;
+}
+
+// Contiguous substring first, so "set" highlights "Settings" as one run instead of scattered letters;
+// subsequence is the fallback ("gtst").
+function match(label: string, query: string): [number, number][] | null {
+    if (!query) {
+        return [];
+    }
+
+    let hay = label.toLowerCase(),
+        needle = query.toLowerCase(),
+        at = hay.indexOf(needle);
+
+    if (at !== -1) {
+        return [[at, at + needle.length]];
+    }
+
+    let from = 0,
+        ranges: [number, number][] = [];
+
+    for (let char of needle) {
+        let i = hay.indexOf(char, from);
+
+        if (i === -1) {
+            return null;
+        }
+
+        let last = ranges[ranges.length - 1];
+
+        if (last && last[1] === i) {
+            last[1] = i + 1;
+        }
+        else {
+            ranges.push([i, i + 1]);
+        }
+
+        from = i + 1;
+    }
+
+    return ranges;
+}
+
+
+function search() {
+    return html`
+        <svg aria-hidden='true' class='command-palette-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'>
+            <circle cx='7' cy='7' r='4.25' />
+            <path d='m10.25 10.25 3 3' />
+        </svg>
+    `;
+}
+
+
+export default Object.assign(
+    function(
+        this: { attributes?: A } | void,
+        {
+            commands,
+            label = 'Search commands',
+            onrun,
+            placeholder = 'Type a command or search',
+            state = reactive({ active: false, index: 0, query: '' }),
+            ...attributes
+        }: A
+    ) {
+        let id = `command-palette-${++uid}`,
+            mac = /Mac|iPhone|iPad/.test(navigator.platform),
+            // Last pointer position, so a list scrolling under a still cursor (which browsers can report as
+            // hover) never steals the active item from the keys.
+            pointer: { x: number, y: number } | null = null,
+            release: VoidFunction | undefined,
+            results = reactive(() => filter(commands, state.query.trim())),
+            trigger: HTMLElement | undefined;
+
+        function close() {
+            state.active = false;
+        }
+
+        function option(index: number) {
+            let item = results.flat[index];
+
+            return item ? `${id}-option-${item.command.id}` : undefined;
+        }
+
+        function run(command: Command) {
+            close();
+            onrun?.(command);
+        }
+
+        function selected() {
+            return Math.min(state.index, Math.max(results.flat.length - 1, 0));
+        }
+
+        function show() {
+            pointer = null;
+            state.index = 0;
+            state.query = '';
+            state.active = true;
+        }
+
+        function shortcut(e: KeyboardEvent) {
+            if (e.key.toLowerCase() !== 'k' || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || e.repeat) {
+                return;
+            }
+
+            // Another palette on the page already claimed it; inert copies stay quiet.
+            if (e.defaultPrevented || !trigger?.isConnected || trigger.closest('[inert]')) {
+                return;
+            }
+
+            // Browsers bind Ctrl+K to address bar search, and the site's own search listens later.
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (state.active) {
+                close();
+            }
+            else {
+                show();
+            }
+        }
+
+        return html`
+            <div class='command-palette' ${this?.attributes} ${attributes}>
+                <button
+                    aria-haspopup='dialog'
+                    aria-keyshortcuts='${mac ? 'Meta+K' : 'Control+K'}'
+                    class='command-palette-trigger'
+                    type='button'
+                    ${this?.attributes?.[COMMAND_PALETTE_TRIGGER]}
+                    ${attributes[COMMAND_PALETTE_TRIGGER]}
+                    ${{
+                        'aria-expanded': () => state.active ? 'true' : 'false',
+                        onclick: show,
+                        onconnect: (element: HTMLElement) => {
+                            trigger = element;
+                            // Capture, so it runs before the site's search, which listens later.
+                            addEventListener('keydown', shortcut, true);
+                        },
+                        ondisconnect: () => {
+                            removeEventListener('keydown', shortcut, true);
+                        }
+                    }}
+                >
+                    ${search()}
+                    <span class='command-palette-trigger-label'>${label}</span>
+                    ${kbd([mac ? '⌘' : 'Ctrl', 'K'])}
+                </button>
+
+                ${modal(
+                    {
+                        'aria-label': 'Command palette',
+                        state,
+                        ...this?.attributes?.[COMMAND_PALETTE_DIALOG],
+                        ...attributes[COMMAND_PALETTE_DIALOG],
+                        class: ['command-palette-dialog', this?.attributes?.[COMMAND_PALETTE_DIALOG]?.class, attributes[COMMAND_PALETTE_DIALOG]?.class].flat()
+                    },
+                    html`
+                        <div
+                            class='command-palette-panel'
+                            ${{
+                                // Delegated mousedown is passive, so bind directly.
+                                onconnect: (element: HTMLElement) => {
+                                    element.addEventListener('mousedown', keep);
+                                    release = () => element.removeEventListener('mousedown', keep);
+                                },
+                                ondisconnect: () => {
+                                    release?.();
+                                }
+                            }}
+                        >
+                            <div class='command-palette-search'>
+                                ${search()}
+                                ${input({
+                                    'aria-activedescendant': () => option(selected()),
+                                    'aria-autocomplete': 'list',
+                                    'aria-controls': `${id}-listbox`,
+                                    'aria-expanded': 'true',
+                                    'aria-label': 'Search commands',
+                                    autocomplete: 'off',
+                                    autofocus: true,
+                                    class: 'command-palette-input',
+                                    oninput: (e: Event) => {
+                                        state.index = 0;
+                                        state.query = (e.target as HTMLInputElement).value;
+                                    },
+                                    onkeydown: (e: KeyboardEvent) => {
+                                        if (e.isComposing) {
+                                            return;
+                                        }
+
+                                        let count = results.flat.length;
+
+                                        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                                            e.preventDefault();
+
+                                            if (!count) {
+                                                return;
+                                            }
+
+                                            state.index = (selected() + (e.key === 'ArrowDown' ? 1 : -1) + count) % count;
+
+                                            // 'nearest' only scrolls when the item is out of view; smooth so stepping past
+                                            // the edge glides the list along rather than jumping it.
+                                            document.getElementById(option(state.index) ?? '')?.scrollIntoView({
+                                                behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+                                                block: 'nearest'
+                                            });
+                                        }
+                                        else if (e.key === 'Enter') {
+                                            e.preventDefault();
+
+                                            let item = results.flat[selected()];
+
+                                            if (item) {
+                                                run(item.command);
+                                            }
+                                        }
+                                        else if (e.key === 'Escape') {
+                                            e.preventDefault();
+                                            close();
+                                        }
+                                        else if (e.key === 'Tab') {
+                                            // The input is the dialog's only tab stop; keep focus inside.
+                                            e.preventDefault();
+                                        }
+                                    },
+                                    placeholder,
+                                    role: 'combobox',
+                                    spellcheck: false,
+                                    value: () => state.query,
+                                    ...this?.attributes?.[COMMAND_PALETTE_INPUT],
+                                    ...attributes[COMMAND_PALETTE_INPUT]
+                                })}
+                            </div>
+
+                            <div
+                                aria-label='Commands'
+                                class='command-palette-list ${() => !results.flat.length && '--empty'}'
+                                id='${id}-listbox'
+                                role='listbox'
+                                ${{
+                                    onmouseleave: () => {
+                                        pointer = null;
+                                    }
+                                }}
+                            >
+                                ${() => results.groups.map(({ group, items }, g) => html`
+                                    <div aria-labelledby='${id}-group-${g}' class='command-palette-group' role='group'>
+                                        <div class='command-palette-group-label' id='${id}-group-${g}'>${group}</div>
+                                        ${items.map(({ command, index, ranges }) => html`
+                                            <div
+                                                class='command-palette-option ${() => selected() === index && '--active'}'
+                                                id='${id}-option-${command.id}'
+                                                role='option'
+                                                ${this?.attributes?.[COMMAND_PALETTE_OPTION]}
+                                                ${attributes[COMMAND_PALETTE_OPTION]}
+                                                ${{
+                                                    'aria-selected': () => selected() === index ? 'true' : 'false',
+                                                    onclick: () => run(command),
+                                                    onpointermove: (e: PointerEvent) => {
+                                                        if (e.pointerType === 'touch') {
+                                                            return;
+                                                        }
+
+                                                        if (pointer && pointer.x === e.clientX && pointer.y === e.clientY) {
+                                                            return;
+                                                        }
+
+                                                        pointer = { x: e.clientX, y: e.clientY };
+
+                                                        if (index !== selected()) {
+                                                            state.index = index;
+                                                        }
+                                                    }
+                                                }}
+                                            >
+                                                <span aria-hidden='true' class='command-palette-option-icon'>${icon(command.icon)}</span>
+                                                ${highlight(command.label, ranges)}
+                                                ${command.shortcut && kbd(command.shortcut)}
+                                            </div>
+                                        `)}
+                                    </div>
+                                `)}
+                            </div>
+
+                            ${() => !results.flat.length && html`
+                                <p class='command-palette-empty' role='status'>No results</p>
+                            `}
+                        </div>
+                    `
+                )}
+            </div>
+        `;
+    },
+    {
+        dialog: COMMAND_PALETTE_DIALOG,
+        input: COMMAND_PALETTE_INPUT,
+        option: COMMAND_PALETTE_OPTION,
+        trigger: COMMAND_PALETTE_TRIGGER
+    } as const
+);
+export type { Command, State };