@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/editor/tree/drag.js

@@ -0,0 +1,462 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { peek, read, signal, write } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import press from '../../../shared/press.js';
+import { attach, collect } from './transfer.js';
+const template_1b19bft2 = template_u1.template(`<div aria-hidden='true' class='file-tree-drag' popover='manual'><span class='file-tree-drag-name'></span><!--$--><span class='file-tree-drag-copy'>+`);
+const template_1b19bft7 = template_u1.template(`<span class='file-tree-drag-count'>`);
+class ReactiveObject_1b19bft0 extends reactivity_u0.ReactiveObject {
+    #count = this[reactivity_u0.SIGNAL](0);
+    #depth;
+    #effect;
+    #label = this[reactivity_u0.SIGNAL]('');
+    #x = this[reactivity_u0.SIGNAL](0);
+    #y = this[reactivity_u0.SIGNAL](0);
+    constructor(_p0, _p1) {
+        super(null);
+        this.#depth = this[reactivity_u0.SIGNAL](_p0);
+        this.#effect = this[reactivity_u0.SIGNAL](_p1);
+    }
+    get count() {
+        return reactivity_u0.read(this.#count);
+    }
+    set count(_v0) {
+        reactivity_u0.write(this.#count, _v0);
+    }
+    get depth() {
+        return reactivity_u0.read(this.#depth);
+    }
+    set depth(_v1) {
+        reactivity_u0.write(this.#depth, _v1);
+    }
+    get effect() {
+        return reactivity_u0.read(this.#effect);
+    }
+    set effect(_v2) {
+        reactivity_u0.write(this.#effect, _v2);
+    }
+    get label() {
+        return reactivity_u0.read(this.#label);
+    }
+    set label(_v3) {
+        reactivity_u0.write(this.#label, _v3);
+    }
+    get x() {
+        return reactivity_u0.read(this.#x);
+    }
+    set x(_v4) {
+        reactivity_u0.write(this.#x, _v4);
+    }
+    get y() {
+        return reactivity_u0.read(this.#y);
+    }
+    set y(_v5) {
+        reactivity_u0.write(this.#y, _v5);
+    }
+}
+const DELAY = 300;
+const EDGE = 32;
+const HOVER = 500;
+const SPEED = 600;
+const STALE = 600;
+export default ({ drag, export: give, import: take }, tree) => {
+    let carry = 0, copy = false, frame = 0, gesture = press(DELAY), ghost, held = signal(false), list = [], marks = { folder: signal(0), last: signal(0), target: signal(0) }, mode = '', opening, pointer = 0, seen = 0, sources = new Set(), target, time = 0, ui = new ReactiveObject_1b19bft0(null, ''), x = 0, y = 0;
+    function aim() {
+        let viewport = tree.viewport();
+        if (!viewport) {
+            return;
+        }
+        let bounds = viewport.getBoundingClientRect(), next;
+        if (x >= bounds.left && x < bounds.right && y >= bounds.top && y < bounds.bottom) {
+            let bottom = bounds.top, found = false;
+            for (let node of viewport.querySelectorAll('.file-tree-row')) {
+                let row = tree.row(node);
+                if (!row) {
+                    continue;
+                }
+                let rect = node.getBoundingClientRect();
+                if (y >= rect.top && y < rect.bottom) {
+                    for (let element of node.querySelectorAll('.file-tree-segment')) {
+                        let box = element.getBoundingClientRect(), segment = tree.row(element);
+                        if (segment && x >= box.left && x < box.right) {
+                            row = segment;
+                            break;
+                        }
+                    }
+                    found = true;
+                    next = row.open ? row : row.parent;
+                    break;
+                }
+                bottom = Math.max(bottom, rect.bottom);
+            }
+            if (!found) {
+                if (y < bottom || viewport.scrollTop + viewport.clientHeight < viewport.scrollHeight - 1) {
+                    return;
+                }
+                next = null;
+            }
+        }
+        if (next !== undefined && !allowed(next)) {
+            next = undefined;
+        }
+        ui.effect = next === undefined ? 'none' : copy ? 'copy' : 'move';
+        if (next === target) {
+            return;
+        }
+        target = next;
+        clearTimeout(opening);
+        let box = next && tree.host(next);
+        if (box) {
+            ui.depth = box.depth;
+            if (box.open && !peek(box.open)) {
+                opening = setTimeout(expand, HOVER);
+            }
+        }
+        write(marks.folder, next ? next.key : 0);
+        write(marks.last, box ? tree.last(box).key : 0);
+        write(marks.target, box ? box.key : next === null ? -1 : 0);
+    }
+    function allowed(folder) {
+        if (folder === null ? !tree.top : folder.locked) {
+            return false;
+        }
+        if (mode === 'files') {
+            return true;
+        }
+        if (!drag) {
+            return false;
+        }
+        let moves = false;
+        for (let i = 0, n = list.length; i < n; i++) {
+            let row = list[i];
+            for (let node = folder; node; node = node.parent) {
+                if (node === row) {
+                    return false;
+                }
+            }
+            if (row.parent !== folder) {
+                moves = true;
+            }
+        }
+        return copy || moves;
+    }
+    async function deliver(folder, rows, copied) {
+        if (!drag) {
+            return;
+        }
+        let result = { copy: copied, elements: rows.map((row) => row.element), target: folder?.element ?? null };
+        if (!drag.confirm || await drag.confirm(result)) {
+            drag.drop(result);
+        }
+    }
+    function expand() {
+        if (!target) {
+            return;
+        }
+        let box = tree.host(target);
+        tree.open(box);
+        write(marks.last, tree.last(box).key);
+    }
+    function grabbed(row) {
+        let grabbed = tree.grab(row), lookup = new Set(grabbed), out = [];
+        for (let i = 0, n = grabbed.length; i < n; i++) {
+            let item = grabbed[i], inside = item.locked;
+            for (let node = item.parent; node && !inside; node = node.parent) {
+                inside = lookup.has(node);
+            }
+            if (!inside) {
+                out.push(item);
+            }
+        }
+        return out;
+    }
+    function leave() {
+        if (mode === 'files') {
+            stop();
+            return;
+        }
+        cancelAnimationFrame(frame);
+        frame = 0;
+        x = y = NaN;
+        aim();
+    }
+    function mark(row) {
+        for (let node = row; node; node = node.parent) {
+            if (signal.selector(marks.target, node.key)) {
+                let end = signal.selector(marks.last, row.key);
+                return `file-tree-row--drop file-tree-row--drop-${node === row ? (end ? 'only' : 'start') : (end ? 'end' : 'middle')}`;
+            }
+        }
+        return false;
+    }
+    function over(e) {
+        let transfer = e.dataTransfer;
+        if (!transfer || mode === 'pointer') {
+            return;
+        }
+        if (!mode) {
+            if (!take || !transfer.types.includes('Files')) {
+                return;
+            }
+            start([], 'files');
+        }
+        e.preventDefault();
+        copy = mode === 'files' || e.altKey;
+        seen = performance.now();
+        x = e.clientX;
+        y = e.clientY;
+        aim();
+        transfer.dropEffect = ui.effect || 'none';
+        if (!frame) {
+            time = 0;
+            frame = requestAnimationFrame(tick);
+        }
+    }
+    function place() {
+        ui.x = x;
+        ui.y = y;
+    }
+    function pressed(rows, e) {
+        let cancelled = false, keys = new AbortController();
+        function end(e) {
+            let folder = mode === 'pointer' && e?.type === 'pointerup' ? target : undefined, copied = copy;
+            keys.abort();
+            stop();
+            if (folder !== undefined) {
+                void deliver(folder, rows, copied);
+            }
+        }
+        function key(e) {
+            if (mode !== 'pointer') {
+                return;
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                cancelled = true;
+                stop();
+            }
+            else if (e.key === 'Alt') {
+                e.preventDefault();
+                copy = e.altKey;
+                aim();
+            }
+        }
+        function move(e) {
+            if (cancelled) {
+                return;
+            }
+            copy = e.altKey;
+            x = e.clientX;
+            y = e.clientY;
+            if (mode === 'pointer') {
+                place();
+                aim();
+            }
+        }
+        copy = e.altKey;
+        pointer = e.pointerId;
+        x = e.clientX;
+        y = e.clientY;
+        gesture.begin(e, {
+            end,
+            move,
+            start: () => {
+                start(rows, 'pointer');
+                tree.viewport()?.setPointerCapture(pointer);
+                ghost?.showPopover();
+                place();
+                aim();
+                time = 0;
+                frame = requestAnimationFrame(tick);
+            }
+        });
+        document.addEventListener('keydown', key, { capture: true, signal: keys.signal });
+        document.addEventListener('keyup', key, { capture: true, signal: keys.signal });
+    }
+    function start(rows, value) {
+        list = rows;
+        mode = value;
+        sources = new Set(rows);
+        ui.count = rows.length;
+        ui.label = rows[0]?.element.name ?? '';
+        write(held, true);
+    }
+    function stop() {
+        let viewport = tree.viewport();
+        cancelAnimationFrame(frame);
+        clearTimeout(opening);
+        if (ghost?.matches(':popover-open')) {
+            ghost.hidePopover();
+        }
+        if (mode === 'pointer' && viewport?.hasPointerCapture(pointer)) {
+            viewport.releasePointerCapture(pointer);
+        }
+        carry = 0;
+        copy = false;
+        frame = 0;
+        list = [];
+        mode = '';
+        sources = new Set();
+        target = undefined;
+        ui.depth = null;
+        ui.effect = '';
+        write(held, false);
+        write(marks.folder, 0);
+        write(marks.last, 0);
+        write(marks.target, 0);
+    }
+    function tick(now) {
+        if (mode !== 'pointer' && performance.now() - seen > STALE) {
+            frame = 0;
+            leave();
+            return;
+        }
+        frame = requestAnimationFrame(tick);
+        let dt = time ? Math.min((now - time) / 1000, 1 / 30) : 0, viewport = tree.viewport();
+        time = now;
+        if (viewport) {
+            let bounds = viewport.getBoundingClientRect(), pull = 0, zone = Math.min(EDGE, bounds.height / 4);
+            if (x >= bounds.left && x < bounds.right) {
+                if (y < bounds.top + zone) {
+                    pull = Math.max(-1, (y - bounds.top - zone) / zone);
+                }
+                else if (y > bounds.bottom - zone) {
+                    pull = Math.min(1, (y - bounds.bottom + zone) / zone);
+                }
+            }
+            carry = pull ? carry + pull * SPEED * dt : 0;
+            let step = Math.trunc(carry);
+            if (step) {
+                carry -= step;
+                viewport.scrollTop += step;
+            }
+        }
+        aim();
+    }
+    return {
+        ghost: (() => {
+            let root_1b19bft1 = template_1b19bft2(), element_1b19bft3 = root_1b19bft1.firstChild, element_1b19bft4 = element_1b19bft3.firstElementChild, element_1b19bft5 = element_1b19bft3.firstChild.nextSibling;
+            new template_u1.EffectSlot(element_1b19bft4, () => ui.label, 1);
+            new template_u1.EffectSlot(element_1b19bft5, () => ui.count > 1 && (() => {
+                let root_1b19bft6 = template_1b19bft7(), element_1b19bft8 = root_1b19bft6.firstChild;
+                template_u1.slot(element_1b19bft8, ui.count, 1);
+                return root_1b19bft6;
+            })());
+            template_u1.setList(element_1b19bft3, 'class', () => ui.effect && `file-tree-drag--${ui.effect}`);
+            template_u1.onconnect(element_1b19bft3, (element) => {
+                ghost = element;
+            });
+            template_u1.setList(element_1b19bft3, 'style', () => `translate: ${ui.x}px ${ui.y}px`);
+            return root_1b19bft1;
+        })(),
+        root: {
+            ...gesture.attributes,
+            ondisconnect: () => {
+                gesture.cancel();
+                if (mode) {
+                    stop();
+                }
+            }
+        },
+        row: (row) => ({
+            class: [
+                () => read(held) && ui.effect === 'move' && sources.has(row) && 'file-tree-row--dragged',
+                () => mark(row)
+            ],
+            ...(give && !row.locked && {
+                draggable: 'true',
+                ondragstart: (e) => {
+                    let transfer = e.dataTransfer, rows = transfer && !gesture.busy() ? grabbed(row) : [], files = [];
+                    for (let i = 0, n = rows.length; i < n; i++) {
+                        let file = give(rows[i].element);
+                        if (file) {
+                            files.push(file);
+                        }
+                    }
+                    if (!transfer || !rows.length || (!drag && !files.length)) {
+                        e.preventDefault();
+                        return;
+                    }
+                    transfer.effectAllowed = drag ? 'copyMove' : 'copy';
+                    attach(transfer, files.length ? files : rows.map((row) => ({ name: row.element.name })));
+                    e.currentTarget.addEventListener('dragend', () => {
+                        if (mode === 'native') {
+                            stop();
+                        }
+                    }, { once: true });
+                    start(rows, 'native');
+                }
+            }),
+            onpointerdown: (e) => {
+                let mouse = e.pointerType !== 'touch';
+                if (give && !row.locked) {
+                    e.currentTarget.draggable = mouse && !e.target.closest('input, textarea, [contenteditable]');
+                }
+                if (!drag || (give && mouse) || gesture.busy() || row.locked || e.button !== 0 || !e.isPrimary) {
+                    return;
+                }
+                let rows = grabbed(row);
+                if (rows.length) {
+                    pressed(rows, e);
+                }
+            }
+        }),
+        segment: (row) => ({
+            class: () => signal.selector(marks.folder, row.key) && 'file-tree-segment--drop'
+        }),
+        viewport: {
+            class: [
+                () => ui.effect && `file-tree-viewport--drag file-tree-viewport--drag-${ui.effect}`,
+                () => read(marks.target) === -1 && 'file-tree-viewport--drop'
+            ],
+            ondragenter: over,
+            ondragleave: (e) => {
+                if (mode !== 'files' && mode !== 'native') {
+                    return;
+                }
+                let viewport = tree.viewport();
+                if (!viewport) {
+                    return;
+                }
+                if (e.relatedTarget instanceof Node) {
+                    if (viewport.contains(e.relatedTarget)) {
+                        return;
+                    }
+                }
+                else {
+                    let bounds = viewport.getBoundingClientRect();
+                    if (e.clientX > bounds.left && e.clientX < bounds.right - 1 && e.clientY > bounds.top && e.clientY < bounds.bottom - 1) {
+                        return;
+                    }
+                }
+                leave();
+            },
+            ondragover: over,
+            ondrop: async (e) => {
+                if (mode !== 'files' && mode !== 'native') {
+                    return;
+                }
+                e.preventDefault();
+                copy = mode === 'files' || e.altKey;
+                x = e.clientX;
+                y = e.clientY;
+                aim();
+                let copied = copy, folder = target, pending = mode === 'files' ? collect(e.dataTransfer) : null, rows = list;
+                stop();
+                if (folder === undefined) {
+                    return;
+                }
+                if (!pending) {
+                    void deliver(folder, rows, copied);
+                    return;
+                }
+                let entries = await pending;
+                if (entries.length) {
+                    void take(folder?.element ?? null, entries);
+                }
+            },
+            style: () => ui.depth !== null && `--drop-depth: ${ui.depth}`
+        }
+    };
+};

package/build/components/editor/tree/edit.d.ts

@@ -0,0 +1,43 @@
+import { type Signal } from '@esportsplus/reactivity';
+import type { FileTreeElement as Element } from './index.js';
+type Draft<R> = {
+    busy: Signal<boolean>;
+    element: Element | null;
+    from: R | null;
+    kind: Kind;
+    message: Signal<string>;
+    parent: R | null;
+    range: [number, number] | null;
+    row: R;
+    value: string;
+};
+type Handlers = {
+    blur: VoidFunction;
+    cancel: VoidFunction;
+    input: (value: string) => void;
+    submit: VoidFunction;
+};
+type Kind = 'file' | 'folder';
+type Listener = (request: Request) => void;
+type Request = {
+    action: 'cancel' | 'rename' | Kind;
+    target?: string | null;
+};
+type Result = boolean | void | Promise<boolean | void>;
+declare function field<R>(draft: Draft<R>, id: string, on: Handlers): DocumentFragment | Text;
+declare function resolve(value: string, parent: Element | null, renaming: Element | null, children: (parent: Element | null) => Element[], folder: (element: Element) => boolean): {
+    message: string;
+    parent: Element | null;
+    parts: string[];
+};
+declare class Editor {
+    private listeners;
+    private notify;
+    cancel(): void;
+    create(kind: Kind, target?: string | null): void;
+    rename(target?: string): void;
+    subscribe(listener: Listener): () => void;
+}
+export default Editor;
+export { field, resolve };
+export type { Draft, Kind, Request, Result };

package/build/components/editor/tree/edit.js

@@ -0,0 +1,134 @@
+import { read } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+const template_1t8hp3r1 = template_u1.template(`<input autocomplete='off' class='file-tree-input' spellcheck='false' type='text' /><!--$-->`);
+const template_1t8hp3r5 = template_u1.template(`<span class='file-tree-message' role='alert'>`);
+const INVALID = /[\\/:*?"<>|\x00-\x1f]/;
+function check(name, path) {
+    if (!name.trim()) {
+        return 'A file or folder name must be provided';
+    }
+    if (name !== name.trim()) {
+        return 'Leading or trailing whitespace detected in file or folder name';
+    }
+    if (name === '.' || name === '..') {
+        return `${name} is not a valid file or folder name`;
+    }
+    if (INVALID.test(name)) {
+        return path ? 'Names can\'t contain \\ : * ? " < > |' : 'Names can\'t contain \\ / : * ? " < > |';
+    }
+    return '';
+}
+function exists(name) {
+    return `A file or folder ${name} already exists at this location`;
+}
+function field(draft, id, on) {
+    return (() => {
+        let root_1t8hp3r0 = template_1t8hp3r1(), element_1t8hp3r2 = root_1t8hp3r0.firstChild, element_1t8hp3r3 = element_1t8hp3r2.nextSibling;
+        new template_u1.EffectSlot(element_1t8hp3r3, () => read(draft.message) && (() => {
+            let root_1t8hp3r4 = template_1t8hp3r5(), element_1t8hp3r6 = root_1t8hp3r4.firstChild;
+            template_u1.slot(element_1t8hp3r6, read(draft.message), 1);
+            template_u1.setProperty(element_1t8hp3r6, 'id', template_u1.interpolate([(id), "-message"]));
+            return root_1t8hp3r4;
+        })());
+        template_u1.setProperty(element_1t8hp3r2, 'aria-describedby', template_u1.interpolate([(id), "-message"]));
+        template_u1.setProperty(element_1t8hp3r2, 'aria-label', draft.element ? `Rename ${draft.element.name}` : `New ${draft.kind} name`);
+        template_u1.setProperty(element_1t8hp3r2, 'aria-invalid', () => read(draft.message) ? 'true' : 'false');
+        template_u1.on(element_1t8hp3r2, 'blur', (event) => {
+            let element = event.currentTarget;
+            queueMicrotask(() => {
+                if (element.isConnected && document.hasFocus()) {
+                    on.blur();
+                }
+            });
+        });
+        template_u1.delegate(element_1t8hp3r2, 'click', () => { });
+        template_u1.onconnect(element_1t8hp3r2, (element) => {
+            let [start, end] = draft.range ?? [0, stem(draft.value, draft.kind)];
+            element.value = draft.value;
+            element.focus({ preventScroll: true });
+            element.setSelectionRange(start, end);
+        });
+        template_u1.ondisconnect(element_1t8hp3r2, (element) => {
+            draft.range = [element.selectionStart ?? 0, element.selectionEnd ?? 0];
+        });
+        template_u1.delegate(element_1t8hp3r2, 'input', (event) => {
+            on.input(event.currentTarget.value);
+        });
+        template_u1.delegate(element_1t8hp3r2, 'keydown', (event) => {
+            if (event.isComposing) {
+                return;
+            }
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                on.submit();
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                on.cancel();
+            }
+        });
+        template_u1.setProperty(element_1t8hp3r2, 'readonly', () => read(draft.busy) && 'true');
+        return root_1t8hp3r0;
+    })();
+}
+function resolve(value, parent, renaming, children, folder) {
+    let parts = renaming ? [value] : value.split('/');
+    for (let i = 0, n = parts.length; i < n; i++) {
+        let message = check(parts[i], !renaming);
+        if (message) {
+            return { message, parent, parts };
+        }
+    }
+    let i = 0, siblings = children(parent);
+    for (let n = parts.length - 1; i < n; i++) {
+        let match = sibling(siblings, parts[i], renaming);
+        if (!match) {
+            break;
+        }
+        if (!folder(match)) {
+            return { message: exists(parts[i]), parent, parts };
+        }
+        parent = match;
+        siblings = children(match);
+    }
+    if (sibling(siblings, parts[i], renaming)) {
+        return { message: exists(parts[i]), parent, parts };
+    }
+    return { message: '', parent, parts: parts.slice(i) };
+}
+function sibling(siblings, name, renaming) {
+    let key = name.toLowerCase();
+    return siblings.find((element) => element !== renaming && element.name.toLowerCase() === key);
+}
+function stem(name, kind) {
+    let dot = name.lastIndexOf('.');
+    return kind === 'folder' || dot <= 0 ? name.length : dot;
+}
+class Editor {
+    listeners = [];
+    notify(request) {
+        for (let i = 0, n = this.listeners.length; i < n; i++) {
+            this.listeners[i](request);
+        }
+    }
+    cancel() {
+        this.notify({ action: 'cancel' });
+    }
+    create(kind, target) {
+        this.notify({ action: kind, target });
+    }
+    rename(target) {
+        this.notify({ action: 'rename', target });
+    }
+    subscribe(listener) {
+        this.listeners.push(listener);
+        return () => {
+            let i = this.listeners.indexOf(listener);
+            if (i !== -1) {
+                this.listeners.splice(i, 1);
+            }
+        };
+    }
+}
+export default Editor;
+export { field, resolve };

package/build/components/editor/tree/filter.d.ts

@@ -0,0 +1,7 @@
+import type { FileTreeElement as Element } from './index.js';
+import type { Entry } from './model.js';
+type Match = ((path: string) => boolean) | null;
+declare const recheck: (element: Element, index: Map<string, Entry>, dotfiles: boolean, exclude: Match, roots: boolean, out: Set<string>) => void;
+export default _default;
+declare function _default(elements: Element[], dotfiles: boolean, exclude: Match, roots: boolean): Set<string>;
+export { recheck };

package/build/components/editor/tree/filter.js

@@ -0,0 +1,47 @@
+function walk(elements, dotfiles, exclude, prefix, inside, out) {
+    for (let i = 0, n = elements.length; i < n; i++) {
+        let element = elements[i], path = prefix + element.name, hide = inside || (!dotfiles && element.name[0] === '.') || !!exclude?.(path);
+        if (hide) {
+            out.add(element.id);
+        }
+        if (element.children) {
+            walk(element.children, dotfiles, exclude, `${path}/`, hide, out);
+        }
+    }
+    return out;
+}
+const recheck = (element, index, dotfiles, exclude, roots, out) => {
+    if (dotfiles && !exclude) {
+        return;
+    }
+    let names = [], parent = index.get(element.id)?.parent ?? null;
+    if (roots && parent === null) {
+        walk(element.children ?? [], dotfiles, exclude, '', false, out);
+        return;
+    }
+    for (let node = parent; node !== null; node = index.get(node).parent) {
+        let entry = index.get(node);
+        if (roots && entry.parent === null) {
+            break;
+        }
+        names.unshift(entry.element.name);
+    }
+    walk([element], dotfiles, exclude, names.length ? `${names.join('/')}/` : '', parent !== null && out.has(parent), out);
+};
+export default (elements, dotfiles, exclude, roots) => {
+    let out = new Set();
+    if (dotfiles && !exclude) {
+        return out;
+    }
+    if (!roots) {
+        return walk(elements, dotfiles, exclude, '', false, out);
+    }
+    for (let i = 0, n = elements.length; i < n; i++) {
+        let children = elements[i].children;
+        if (children) {
+            walk(children, dotfiles, exclude, '', false, out);
+        }
+    }
+    return out;
+};
+export { recheck };