@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/select/index.js

@@ -1,19 +1,30 @@
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, signal, write } from '@esportsplus/reactivity';
+import { clamp } from '../../shared/clamp.js';
 import form from '../form/index.js';
+import overlay from '../overlay/index.js';
+import place, { ROWS } from './placement.js';
+import check from '@esportsplus/ui/svg/check.svg';
+import chevronDown from '@esportsplus/ui/svg/chevron-down.svg';
+import chevronUp from '@esportsplus/ui/svg/chevron-up.svg';
+import chevrons from '@esportsplus/ui/svg/chevrons-up-down.svg';
 import './scss/index.scss';
-const template_167mg1f2 = template_u1.template(`<div class='select tooltip '><!--$--><div class='select-arrow'></div><input class='select-tag' />`);
-const template_167mg1f8 = template_u1.template(`<div class='tooltip-content  --flex-column --scrollbar'>`);
-const template_167mg1fb = template_u1.template(`<div class='link select-option '>`);
+const template_167mg1f3 = template_u1.template(`<div class='select select-menu'><span class='select-menu-label'></span><button aria-haspopup='listbox' class='select-menu-trigger' role='combobox' type='button'><span class='select-menu-value'></span><svg aria-hidden='true' class='select-menu-chevron'><use /></svg></button><input class='select-menu-tag' type='hidden' /><div class='select-menu-panel'><div class='select-menu-scroller'><div role='listbox'></div></div><div aria-hidden='true' class='select-menu-scroll select-menu-scroll--up'><svg class='select-menu-scroll-icon'><use /></svg></div><div aria-hidden='true' class='select-menu-scroll select-menu-scroll--down'><svg class='select-menu-scroll-icon'><use />`);
+const template_167mg1fj = template_u1.template(`<div class='select-menu-option' role='option'><svg aria-hidden='true' class='select-menu-check'><use /></svg><span class='select-menu-option-label'>`);
+const template_167mg1fo = template_u1.template(`<span class='select-menu-option-detail'>`);
 class ReactiveObject_167mg1f0 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](false);
-    #error = this[reactivity_u0.SIGNAL]('');
-    #render = this[reactivity_u0.SIGNAL](false);
+    #active;
+    #error;
+    #render;
     #selected;
-    constructor(_p0) {
+    constructor(_p0, _p1, _p2, _p3) {
         super(null);
-        this.#selected = this[reactivity_u0.SIGNAL](_p0);
+        this.#active = this[reactivity_u0.SIGNAL](_p0);
+        this.#error = this[reactivity_u0.SIGNAL](_p1);
+        this.#render = this[reactivity_u0.SIGNAL](_p2);
+        this.#selected = this[reactivity_u0.SIGNAL](_p3);
     }
     get active() {
         return reactivity_u0.read(this.#active);
@@ -40,98 +51,353 @@ class ReactiveObject_167mg1f0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#selected, _v3);
     }
 }
-const SELECT_ARROW = Symbol.for('@esportsplus/ui/select.arrow');
+class ReactiveObject_167mg1f1 extends reactivity_u0.ReactiveObject {
+    #down = this[reactivity_u0.SIGNAL](false);
+    #highlight = this[reactivity_u0.SIGNAL](0);
+    #hover = this[reactivity_u0.SIGNAL](false);
+    #placement = this[reactivity_u0.SIGNAL]('');
+    #up = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get down() {
+        return reactivity_u0.read(this.#down);
+    }
+    set down(_v0) {
+        reactivity_u0.write(this.#down, _v0);
+    }
+    get highlight() {
+        return reactivity_u0.read(this.#highlight);
+    }
+    set highlight(_v1) {
+        reactivity_u0.write(this.#highlight, _v1);
+    }
+    get hover() {
+        return reactivity_u0.read(this.#hover);
+    }
+    set hover(_v2) {
+        reactivity_u0.write(this.#hover, _v2);
+    }
+    get placement() {
+        return reactivity_u0.read(this.#placement);
+    }
+    set placement(_v3) {
+        reactivity_u0.write(this.#placement, _v3);
+    }
+    get up() {
+        return reactivity_u0.read(this.#up);
+    }
+    set up(_v4) {
+        reactivity_u0.write(this.#up, _v4);
+    }
+}
+const SCROLL_SPEED = 280;
 const SELECT_OPTION = Symbol.for('@esportsplus/ui/select.option');
+const SELECT_ARROW = Symbol.for('@esportsplus/ui/select.arrow');
 const SELECT_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/select.tooltip-content');
-export default component(function ({ options, selected, state = new ReactiveObject_167mg1f0(selected || Object.keys(options)[0]), ...attributes }, content) {
-    let { direction: defaultDirection, ...defaultTooltipContent } = this?.attributes?.[SELECT_TOOLTIP_CONTENT] ?? {}, { direction = defaultDirection || 's', ...tooltipContent } = attributes[SELECT_TOOLTIP_CONTENT] ?? {};
-    return (() => {
-        let root_167mg1f1 = template_167mg1f2(), element_167mg1f3 = root_167mg1f1.firstChild, element_167mg1f4 = element_167mg1f3.firstChild, element_167mg1f5 = element_167mg1f3.firstElementChild, element_167mg1f6 = element_167mg1f5.nextElementSibling;
-        template_u1.setList(element_167mg1f3, 'class', () => state.active && '--active');
-        template_u1.setProperties(element_167mg1f3, this?.attributes);
-        template_u1.setProperties(element_167mg1f3, attributes);
-        template_u1.delegate(element_167mg1f3, 'click', () => {
-            if (state.render) {
-                state.active = !state.active;
+const SELECT_TRIGGER = Symbol.for('@esportsplus/ui/select.trigger');
+const TYPEAHEAD_RESET = 500;
+let uid = 0;
+function edges(menu, scroller) {
+    menu.down = scroller.scrollTop < scroller.scrollHeight - scroller.clientHeight - 1;
+    menu.up = scroller.scrollTop > 1;
+}
+function template({ label, name, options: choices, selected: initial, state = new ReactiveObject_167mg1f0(false, '', false, initial ?? (Array.isArray(choices) ? choices[0]?.value : Object.keys(choices)[0])), ...attributes }, content) {
+    let defaults = this?.attributes, ariaLabel = attributes['aria-label'] ?? defaults?.['aria-label'], options = Array.isArray(choices) ? choices : Object.entries(choices).map(([value, choice]) => {
+        if (choice !== null && typeof choice === 'object' && 'content' in choice) {
+            return { value, label: choice.content, selected: choice.selected, text: typeof choice.content === 'string' ? choice.content : value };
+        }
+        return { value, label: choice, text: typeof choice === 'string' ? choice : value };
+    }), { direction: _defaultDirection, ...defaultPanel } = defaults?.[SELECT_TOOLTIP_CONTENT] ?? {}, { direction: _direction, ...panelAttributes } = attributes[SELECT_TOOLTIP_CONTENT] ?? {}, chosen = signal(''), frame = 0, highlighted = signal(0), id = `select-menu-${++uid}`, last = { x: -1, y: -1 }, menu = new ReactiveObject_167mg1f1(), parts = {}, query = '', texts, timer;
+    function choose(index) {
+        if (!options[index]) {
+            return;
+        }
+        state.selected = options[index].value;
+        close();
+    }
+    function close() {
+        cancelAnimationFrame(frame);
+        state.active = false;
+    }
+    function highlight(index) {
+        if (!options.length) {
+            return;
+        }
+        let next = clamp(index, 0, options.length - 1), scroller = parts.scroller;
+        menu.highlight = next;
+        if (!scroller) {
+            return;
+        }
+        let item = parts.option?.offsetHeight ?? 0, pad = parseFloat(getComputedStyle(scroller).paddingTop) || 0, top = pad + next * item;
+        if (top < scroller.scrollTop + pad) {
+            scroller.scrollTop = top - pad;
+        }
+        else if (top + item > scroller.scrollTop + scroller.clientHeight - pad) {
+            scroller.scrollTop = top + item - scroller.clientHeight + pad;
+        }
+    }
+    function onkeydown(e) {
+        let typing = query !== '';
+        if (!state.active) {
+            if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key) && !(e.key === ' ' && typing)) {
+                e.preventDefault();
+                open();
+                return;
             }
-            state.render = true;
-        });
-        template_u1.ondocument(element_167mg1f3, 'click', function (event) {
-            if (!state.active || !this?.isConnected) {
+        }
+        else {
+            let active = menu.highlight, page = ROWS - 1, moves = {
+                ArrowDown: active + 1,
+                ArrowUp: active - 1,
+                End: options.length - 1,
+                Home: 0,
+                PageDown: active + page,
+                PageUp: active - page
+            };
+            if (e.key === 'ArrowUp' && e.altKey) {
+                e.preventDefault();
+                choose(active);
                 return;
             }
-            if (!this.contains(event.target)) {
-                state.active = false;
+            if (e.key in moves) {
+                e.preventDefault();
+                highlight(moves[e.key]);
+                return;
             }
-        });
-        new template_u1.EffectSlot(element_167mg1f4, content ? (() => content(state)) : (() => {
-            let selected = options[state.selected];
-            if (!selected) {
-                return '-';
+            if (e.key === 'Enter' || (e.key === ' ' && !typing)) {
+                e.preventDefault();
+                choose(active);
+                return;
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                close();
+                return;
             }
-            if (selected !== null && typeof selected === 'object' && 'content' in selected) {
-                return selected.content;
+            if (e.key === 'Tab') {
+                choose(active);
+                return;
             }
-            return selected;
-        }));
-        template_u1.setProperties(element_167mg1f5, this?.attributes?.[SELECT_ARROW]);
-        template_u1.setProperties(element_167mg1f5, attributes[SELECT_ARROW]);
-        template_u1.setProperty(element_167mg1f6, 'name', attributes.name);
-        template_u1.delegate(element_167mg1f6, 'click', () => { });
-        template_u1.onrender(element_167mg1f6, form.input.onrender(state));
-        template_u1.setProperty(element_167mg1f6, 'value', () => state.selected);
-        new template_u1.EffectSlot(element_167mg1f3, () => {
-            if (!state.render) {
+        }
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            e.preventDefault();
+            search(e.key);
+        }
+    }
+    function open() {
+        let { label, option, panel, scroller, trigger, value } = parts, index = selected();
+        menu.highlight = index;
+        state.render = true;
+        state.active = true;
+        if (!label || !option || !panel || !scroller || !trigger || !value) {
+            return;
+        }
+        let placed = place({ label, option, panel, scroller, trigger, value }, options.length, index);
+        menu.placement = placed.style;
+        scroller.scrollTop = placed.scroll;
+        edges(menu, scroller);
+    }
+    function scroll(direction, e) {
+        if (e.pointerType === 'touch') {
+            return;
+        }
+        let previous = performance.now();
+        cancelAnimationFrame(frame);
+        function tick(now) {
+            if (!parts.scroller) {
                 return;
             }
-            let keys = Object.keys(options), selected = reactivity_u0.reactive(Object.fromEntries(keys.map(key => [key, false])));
-            return (() => {
-                let root_167mg1f7 = template_167mg1f8(), element_167mg1f9 = root_167mg1f7.firstChild;
-                template_u1.setList(element_167mg1f9, 'class', template_u1.interpolate(["tooltip-content--", (direction)]));
-                template_u1.setProperties(element_167mg1f9, defaultTooltipContent);
-                template_u1.setProperties(element_167mg1f9, tooltipContent);
-                template_u1.setProperty(element_167mg1f9, 'inert', () => !state.active);
-                template_u1.delegate(element_167mg1f9, 'click', (e) => {
-                    let element = e.target, key = element.dataset?.key;
-                    if (key === undefined) {
-                        let parent;
-                        while (parent = element.parentElement) {
-                            key = parent.dataset?.key;
-                            if (key !== undefined) {
-                                break;
-                            }
-                        }
-                    }
-                    if (key === undefined) {
-                        return;
-                    }
-                    let previous = state.selected;
-                    state.active = false;
-                    state.selected = key;
-                    selected[key] = true;
-                    selected[previous] = false;
-                });
-                template_u1.onconnect(element_167mg1f9, () => {
-                    state.active = true;
-                });
-                template_u1.slot(element_167mg1f9, keys.map((key) => {
-                    let content = options[key];
-                    if (content !== null && typeof content === 'object' && 'content' in content) {
-                        content = content.content;
-                    }
-                    return (() => {
-                        let root_167mg1fa = template_167mg1fb(), element_167mg1fc = root_167mg1fa.firstChild;
-                        template_u1.setList(element_167mg1fc, 'class', () => selected[key] && '--active');
-                        template_u1.setProperties(element_167mg1fc, this?.attributes?.[SELECT_OPTION]);
-                        template_u1.setProperties(element_167mg1fc, attributes[SELECT_OPTION]);
-                        template_u1.setProperty(element_167mg1fc, 'data-key', key);
-                        template_u1.slot(element_167mg1fc, content, 1);
-                        return root_167mg1fa;
-                    })();
-                }), 1);
-                return root_167mg1f7;
-            })();
-        }, 2);
-        return root_167mg1f1;
+            parts.scroller.scrollTop += (direction * SCROLL_SPEED * (now - previous)) / 1000;
+            previous = now;
+            frame = requestAnimationFrame(tick);
+        }
+        frame = requestAnimationFrame(tick);
+    }
+    function search(character) {
+        clearTimeout(timer);
+        query += character.toLowerCase();
+        timer = setTimeout(() => {
+            query = '';
+        }, TYPEAHEAD_RESET);
+        let repeated = [...query].every((c) => c === query[0]), from = state.active ? menu.highlight : selected(), needle = repeated ? query[0] : query, start = repeated ? from + 1 : from;
+        if (!texts) {
+            texts = [];
+            for (let i = 0, n = options.length; i < n; i++) {
+                let option = options[i];
+                texts.push((option.text ?? (typeof option.label === 'string' ? option.label : '')).toLowerCase());
+            }
+        }
+        for (let i = 0, n = options.length; i < n; i++) {
+            let index = (start + i) % n;
+            if (!texts[index].startsWith(needle)) {
+                continue;
+            }
+            if (state.active) {
+                highlight(index);
+            }
+            else {
+                state.selected = options[index].value;
+            }
+            return;
+        }
+    }
+    function selected() {
+        let value = String(state.selected ?? '');
+        for (let i = 0, n = options.length; i < n; i++) {
+            if (options[i].value === value) {
+                return i;
+            }
+        }
+        return 0;
+    }
+    function stop() {
+        cancelAnimationFrame(frame);
+    }
+    function wheel(e) {
+        let scroller = parts.scroller;
+        if (!scroller || e.ctrlKey || e.defaultPrevented || !e.deltaY) {
+            return;
+        }
+        stop();
+        if (scroller.contains(e.target)) {
+            return;
+        }
+        let unit = e.deltaMode === WheelEvent.DOM_DELTA_PAGE
+            ? scroller.clientHeight
+            : e.deltaMode === WheelEvent.DOM_DELTA_LINE
+                ? parseFloat(getComputedStyle(scroller).lineHeight) || parts.option?.offsetHeight || 16
+                : 1;
+        e.preventDefault();
+        scroller.scrollTop += e.deltaY * unit;
+    }
+    onCleanup(() => {
+        cancelAnimationFrame(frame);
+        clearTimeout(timer);
+    });
+    effect(() => state.active, (active) => {
+        if (!active) {
+            stop();
+        }
+    });
+    effect(() => menu.highlight, (index) => {
+        write(highlighted, index);
+    });
+    effect(() => String(state.selected ?? ''), (value) => {
+        write(chosen, value);
+    });
+    return (() => {
+        let root_167mg1f2 = template_167mg1f3(), element_167mg1f4 = root_167mg1f2.firstChild, element_167mg1f5 = element_167mg1f4.firstElementChild, element_167mg1f6 = element_167mg1f5.nextElementSibling, element_167mg1f7 = element_167mg1f6.firstElementChild, element_167mg1f8 = element_167mg1f7.nextElementSibling, element_167mg1f9 = element_167mg1f8.firstElementChild, element_167mg1fa = element_167mg1f6.nextElementSibling, element_167mg1fb = element_167mg1fa.nextElementSibling, element_167mg1fc = element_167mg1fb.firstElementChild, element_167mg1fd = element_167mg1fc.firstElementChild, element_167mg1fe = element_167mg1fc.nextElementSibling, element_167mg1ff = element_167mg1fe.firstElementChild.firstElementChild, element_167mg1fg = element_167mg1fe.nextElementSibling, element_167mg1fh = element_167mg1fg.firstElementChild.firstElementChild;
+        template_u1.slot(element_167mg1f5, label ?? defaults?.label ?? String(ariaLabel ?? 'Select option'), 1);
+        new template_u1.EffectSlot(element_167mg1f7, content ? (() => content(state)) : (() => {
+            let option = options[selected()];
+            return option?.selected ?? option?.label ?? '';
+        }), 1);
+        template_u1.slot(element_167mg1fd, options.map((option, index) => {
+            let root_167mg1fi = template_167mg1fj(), element_167mg1fk = root_167mg1fi.firstChild, element_167mg1fl = element_167mg1fk.firstElementChild.firstElementChild, element_167mg1fm = element_167mg1fk.firstElementChild.nextElementSibling;
+            template_u1.slot(element_167mg1fm, option.label, 1);
+            template_u1.slot(element_167mg1fk, option.detail && (() => {
+                let root_167mg1fn = template_167mg1fo(), element_167mg1fp = root_167mg1fn.firstChild;
+                template_u1.slot(element_167mg1fp, option.detail, 1);
+                return root_167mg1fn;
+            })(), 2);
+            template_u1.setProperty(element_167mg1fl, 'href', template_u1.interpolate(["#", (check)]));
+            template_u1.setProperty(element_167mg1fk, 'id', template_u1.interpolate([(id), "-option-", (index)]));
+            template_u1.setProperties(element_167mg1fk, this?.attributes?.[SELECT_OPTION]);
+            template_u1.setProperties(element_167mg1fk, attributes[SELECT_OPTION]);
+            template_u1.setProperty(element_167mg1fk, 'aria-selected', () => signal.selector(chosen, option.value) ? 'true' : 'false');
+            template_u1.setList(element_167mg1fk, 'class', () => signal.selector(highlighted, index) && 'select-menu-option--highlighted');
+            template_u1.delegate(element_167mg1fk, 'click', () => choose(index));
+            template_u1.delegate(element_167mg1fk, 'pointermove', (e) => {
+                if (e.pointerType === 'touch' || (last.x === e.clientX && last.y === e.clientY)) {
+                    return;
+                }
+                last = { x: e.clientX, y: e.clientY };
+                if (menu.highlight !== index) {
+                    menu.highlight = index;
+                }
+            });
+            return root_167mg1fi;
+        }), 1);
+        template_u1.setProperty(element_167mg1fh, 'href', template_u1.interpolate(["#", (chevronDown)]));
+        template_u1.setList(element_167mg1fg, 'class', () => menu.hover && menu.down && '--active');
+        template_u1.on(element_167mg1fg, 'pointerenter', (e) => scroll(1, e));
+        template_u1.on(element_167mg1fg, 'pointerleave', stop);
+        template_u1.setProperty(element_167mg1ff, 'href', template_u1.interpolate(["#", (chevronUp)]));
+        template_u1.setList(element_167mg1fe, 'class', () => menu.hover && menu.up && '--active');
+        template_u1.on(element_167mg1fe, 'pointerenter', (e) => scroll(-1, e));
+        template_u1.on(element_167mg1fe, 'pointerleave', stop);
+        template_u1.setProperty(element_167mg1fd, 'aria-labelledby', template_u1.interpolate([(id), "-label"]));
+        template_u1.setProperty(element_167mg1fd, 'id', template_u1.interpolate([(id), "-list"]));
+        template_u1.onconnect(element_167mg1fc, (element) => {
+            parts.label = element.querySelector('.select-menu-option-label') ?? undefined;
+            parts.option = element.querySelector('.select-menu-option') ?? undefined;
+            parts.scroller = element;
+        });
+        template_u1.on(element_167mg1fc, 'scroll', function () {
+            edges(menu, this);
+        });
+        template_u1.setList(element_167mg1fc, 'class', [
+            () => menu.up && 'select-menu-scroller--up',
+            () => menu.down && 'select-menu-scroller--down'
+        ]);
+        template_u1.setProperties(element_167mg1fb, defaultPanel);
+        template_u1.setProperties(element_167mg1fb, panelAttributes);
+        template_u1.setList(element_167mg1fb, 'class', () => state.active && '--active');
+        template_u1.setProperty(element_167mg1fb, 'inert', () => !state.active);
+        template_u1.onconnect(element_167mg1fb, (element) => {
+            parts.panel = element;
+        });
+        template_u1.onactive(element_167mg1fb, 'wheel', wheel);
+        template_u1.delegate(element_167mg1fb, 'mousedown', (e) => {
+            e.preventDefault();
+        });
+        template_u1.on(element_167mg1fb, 'pointerenter', (e) => {
+            if (e.pointerType !== 'touch') {
+                menu.hover = true;
+            }
+        });
+        template_u1.on(element_167mg1fb, 'pointerleave', () => {
+            menu.hover = false;
+            stop();
+        });
+        template_u1.setList(element_167mg1fb, 'style', () => menu.placement);
+        template_u1.setProperty(element_167mg1fa, 'name', name ?? defaults?.name);
+        template_u1.onconnect(element_167mg1fa, form.input.onconnect(state));
+        template_u1.setProperty(element_167mg1fa, 'value', () => state.selected);
+        template_u1.setProperty(element_167mg1f9, 'href', template_u1.interpolate(["#", (chevrons)]));
+        template_u1.setProperties(element_167mg1f8, this?.attributes?.[SELECT_ARROW]);
+        template_u1.setProperties(element_167mg1f8, attributes[SELECT_ARROW]);
+        template_u1.setProperty(element_167mg1f7, 'id', template_u1.interpolate([(id), "-value"]));
+        template_u1.onconnect(element_167mg1f7, (element) => {
+            parts.value = element;
+        });
+        template_u1.setProperty(element_167mg1f6, 'aria-controls', template_u1.interpolate([(id), "-list"]));
+        template_u1.setProperty(element_167mg1f6, 'aria-labelledby', template_u1.interpolate([(id), "-label ", (id), "-value"]));
+        template_u1.setProperty(element_167mg1f6, 'disabled', attributes.disabled === true || defaults?.disabled === true);
+        template_u1.setProperty(element_167mg1f6, 'aria-label', ariaLabel === undefined ? undefined : String(ariaLabel));
+        template_u1.setProperties(element_167mg1f6, this?.attributes?.[SELECT_TRIGGER]);
+        template_u1.setProperties(element_167mg1f6, attributes[SELECT_TRIGGER]);
+        template_u1.setProperty(element_167mg1f6, 'aria-activedescendant', () => state.active && `${id}-option-${menu.highlight}`);
+        template_u1.setProperty(element_167mg1f6, 'aria-expanded', () => state.active ? 'true' : 'false');
+        template_u1.on(element_167mg1f6, 'blur', close);
+        template_u1.delegate(element_167mg1f6, 'click', () => {
+            if (state.active) {
+                close();
+            }
+            else {
+                open();
+            }
+        });
+        template_u1.onconnect(element_167mg1f6, (element) => {
+            parts.trigger = element;
+        });
+        template_u1.delegate(element_167mg1f6, 'keydown', onkeydown);
+        template_u1.setProperty(element_167mg1f5, 'id', template_u1.interpolate([(id), "-label"]));
+        template_u1.setProperties(element_167mg1f4, defaults);
+        template_u1.setProperties(element_167mg1f4, attributes);
+        template_u1.setProperties(element_167mg1f4, { ...overlay.popup({ state, target: () => parts.panel }) });
+        return root_167mg1f2;
     })();
-}, { arrow: SELECT_ARROW, option: SELECT_OPTION, tooltipContent: SELECT_TOOLTIP_CONTENT });
+}
+export default component(template, { arrow: SELECT_ARROW, option: SELECT_OPTION, tooltipContent: SELECT_TOOLTIP_CONTENT, trigger: SELECT_TRIGGER });

package/build/components/select/placement.d.ts

@@ -0,0 +1,15 @@
+type Parts = {
+    label: HTMLElement;
+    option: HTMLElement;
+    panel: HTMLElement;
+    scroller: HTMLElement;
+    trigger: HTMLElement;
+    value: HTMLElement;
+};
+declare const ROWS = 8;
+declare function place({ label, option, panel, scroller, trigger, value }: Parts, count: number, selected: number): {
+    scroll: number;
+    style: string;
+};
+export default place;
+export { ROWS };

package/build/components/select/placement.js

@@ -0,0 +1,31 @@
+import { clamp } from '../../shared/clamp.js';
+import { viewport } from '../../shared/viewport.js';
+const MARGIN = 8;
+const ROWS = 8;
+function place({ label, option, panel, scroller, trigger, value }, count, selected) {
+    let box = trigger.getBoundingClientRect();
+    let scale = box.height / trigger.offsetHeight || 1, item = option.offsetHeight, pad = parseFloat(getComputedStyle(scroller).paddingTop) || 0, rows = Math.min(count, parseInt(getComputedStyle(panel).getPropertyValue('--rows'), 10) || ROWS), height = rows * item + pad * 2, maxScroll = (count - rows) * item, scroll = clamp((selected - Math.floor(rows / 2)) * item, 0, maxScroll), shift = label.offsetLeft - (value.offsetLeft - trigger.offsetLeft), top = trigger.offsetTop + (trigger.offsetHeight - item) / 2 - (pad + selected * item - scroll);
+    let view = viewport(), maxBottom = trigger.offsetTop + (view.height - MARGIN - box.top) / scale, minTop = trigger.offsetTop + (MARGIN - box.top) / scale;
+    if (top < minTop) {
+        let d = minTop - top;
+        top += d;
+        scroll += Math.min(d, maxScroll - scroll);
+    }
+    if (top + height > maxBottom) {
+        let d = top + height - maxBottom;
+        top -= d;
+        scroll -= Math.min(d, scroll);
+    }
+    let width = trigger.offsetWidth + shift, left = Math.max(trigger.offsetLeft + (MARGIN - box.left) / scale, Math.min(trigger.offsetLeft - shift, trigger.offsetLeft + (view.width - MARGIN - box.left) / scale - width));
+    return {
+        scroll,
+        style: `
+            left: ${left}px;
+            top: ${top}px;
+            transform-origin: ${trigger.offsetLeft + trigger.offsetWidth / 2 - left}px ${trigger.offsetTop + trigger.offsetHeight / 2 - top}px;
+            width: ${width}px;
+        `
+    };
+}
+export default place;
+export { ROWS };

package/build/components/select/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.select:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width)) max(0px, var(--padding-horizontal) * 2 + var(--arrow-size) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), rotate var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;width:100%;display:flex;position:relative}.select.--active .select-arrow{rotate:225deg;translate:0 calc(50% + var(--arrow-size) / 3)}.select-arrow{border-color:var(--color);border-style:solid;border-width:0 var(--border-width) var(--border-width) 0;bottom:calc(50% + var(--arrow-spacer));content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;inset-inline-end:calc(var(--padding-horizontal) + var(--arrow-spacer));translate:0 50%;rotate:45deg}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
+@layer components{.select-menu-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.select-menu-check{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;filter:blur(4px);opacity:0;transition:filter var(--icon-swap-duration) var(--icon-swap-timing-function), opacity var(--icon-swap-duration) var(--icon-swap-timing-function), scale var(--icon-swap-duration) var(--icon-swap-timing-function);scale:.25}@media (prefers-reduced-motion:reduce){.select-menu-check{transition:none}}.select-menu-option[aria-selected=true] .select-menu-check{filter:blur();opacity:1;scale:1}.select-menu-option-label,.select-menu-value{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.select{--background:var(--color-grey-400);--box-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--color:var(--color-text-500);--color-muted:var(--color-text-300);--focus-width:var(--border-width-500);--font-size:calc(var(--font-size-400) * .875);--height:40px;--highlight:color-mix(in oklch, var(--color) 6%, transparent);--item-height:36px;--press-scale:.96;--transition-duration:.15s;--transition-timing-function:ease-out;--trigger-border-radius:var(--border-radius-400);--width:min(260px, 100%)}.select-menu-option{--icon-swap-duration:.3s;--icon-swap-timing-function:linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1)}.select-menu-panel{--background:var(--color-grey-400);--border-radius:var(--border-radius-600);--box-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--fade:24px;--pad:4px;--rows:8;--scale:.96;--transition-duration:.15s;--transition-timing-function:cubic-bezier(.23, 1, .32, 1);--width:auto}.select-menu-panel:not(.--active){--transition-duration:.1s}@media (prefers-reduced-motion:reduce){.select-menu-panel{--scale:1}}.select-menu-scroller{--fade-bottom:0px;--fade-top:0px}.select-menu-scroller--down{--fade-bottom:var(--fade)}.select-menu-scroller--up{--fade-top:var(--fade)}.select{color:var(--color);font-size:var(--font-size);width:var(--width);z-index:0;position:relative}.select.--active,.select:not(.--active):hover{z-index:9}.select-menu-check{stroke-width:2.25px;flex:none;width:16px;height:16px}.select-menu-chevron{color:var(--color-muted);flex:none;width:16px;height:16px}.select-menu-option{border-radius:var(--border-radius-400);cursor:default;align-items:center;gap:var(--size-200);height:var(--item-height);padding:0 var(--size-100);-webkit-user-select:none;user-select:none;display:flex}.select-menu-option--highlighted,.select-menu-option:focus{background:var(--highlight)}.select-menu-option-detail{color:var(--color-muted);font-size:var(--font-size-300);font-variant-numeric:tabular-nums;flex:none}.select-menu-option-label{flex:1;min-width:0}.select-menu-panel{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:calc(90vw - var(--size-700) * 2);opacity:0;min-width:auto;scale:var(--scale);transition:opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);width:var(--width);z-index:50;position:absolute;top:0;left:0;overflow:hidden}.select-menu-panel.--active{opacity:1;scale:1}.select-menu-scroll{color:var(--color-muted);opacity:0;pointer-events:none;justify-content:center;align-items:center;height:24px;transition:opacity .15s ease-out;display:flex;position:absolute;inset-inline:0}.select-menu-scroll.--active{opacity:1;pointer-events:auto}.select-menu-scroll--down{bottom:0}.select-menu-scroll--up{top:0}.select-menu-scroll-icon{width:14px;height:14px}.select-menu-scroller{-webkit-mask-image:linear-gradient(to bottom, transparent, black var(--fade-top), black calc(100% - var(--fade-bottom)), transparent);-webkit-mask-image:linear-gradient(to bottom, transparent, black var(--fade-top), black calc(100% - var(--fade-bottom)), transparent);mask-image:linear-gradient(to bottom, transparent, black var(--fade-top), black calc(100% - var(--fade-bottom)), transparent);max-height:calc(var(--rows) * var(--item-height) + var(--pad) * 2);overscroll-behavior:contain;padding:var(--pad);overflow-y:auto}.select-menu-tag{display:none}.select-menu-trigger{background:var(--background);border-radius:var(--trigger-border-radius);box-shadow:var(--box-shadow);color:var(--color);cursor:pointer;font:inherit;align-items:center;gap:var(--size-200);height:var(--height);padding:0 10px 0 var(--size-300);text-align:left;touch-action:manipulation;transition:scale var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;border:0;outline:none;width:100%;margin:0;display:flex}.select-menu-trigger:active{scale:var(--press-scale)}.select-menu-trigger:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:2px}.select-menu-value{flex:1;min-width:0}@media (prefers-reduced-motion:reduce){.select-menu-check{filter:none;scale:1}.select-menu-trigger{transition:none}.select-menu-trigger:active{scale:1}}}
 /*$vite$:1*/

package/build/components/shortcut-recorder/index.d.ts

@@ -1,12 +1,17 @@
+import * as template_u1 from '@esportsplus/template';
 import { type Attributes } from '@esportsplus/template';
+import { type Direction } from '../error/index.js';
+import '../button/scss/index.scss';
 import './scss/index.scss';
 type A = Attributes & {
-    label: string;
+    direction?: Direction;
+    limit?: number;
     state?: {
+        error: string;
         value: string;
     };
     taken?: (shortcut: string) => string | null | undefined;
     value?: string;
 };
 export default _default;
-declare function _default({ label, taken, value, state, ...attributes }: A): DocumentFragment | Text;
+declare function _default({ direction, limit, taken, value, state, ...attributes }: A): template_u1.Renderable<any>;