@esportsplus/ui 0.51.6 → 0.53.0

package/src/components/toast/index.ts

@@ -0,0 +1,188 @@
+import { html } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import clipboard from '~/components/clipboard';
+import icon from '~/components/icon';
+import { buildVisibleToastLayout, remove, state, toast } from './manager';
+import { toasts } from './manager';
+import type { Toast } from './manager';
+import check from './svg/check.svg';
+import close from './svg/close.svg';
+import copy from './svg/copy.svg';
+import error from './svg/error.svg';
+import info from './svg/info.svg';
+import loading from './svg/loading.svg';
+import success from './svg/success.svg';
+import warning from './svg/warning.svg';
+import './scss/index.scss';
+
+
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+
+
+type ToastElement = HTMLElement & { __toastObserver?: ResizeObserver };
+
+
+const ICONS = { error, info, loading, success, warning };
+
+const dismiss = toast.dismiss;
+
+
+function row(toast: Toast, position: Position) {
+    let swipe = reactive({ direction: '', x: 0, y: 0 }),
+        horizontal = position.endsWith('left') || position.endsWith('right'),
+        pointerId = -1,
+        pressed = false,
+        startX = 0,
+        startY = 0,
+        swiping = false,
+        top = position.startsWith('top');
+
+    const finish = () => {
+        pressed = false;
+
+        if (!swiping) {
+            return;
+        }
+
+        swiping = false;
+
+        if (Math.hypot(swipe.x, swipe.y) > 80) {
+            swipe.direction = Math.abs(swipe.x) > Math.abs(swipe.y)
+                ? (swipe.x < 0 ? 'left' : 'right')
+                : (swipe.y < 0 ? 'up' : 'down');
+
+            dismiss(toast.id);
+        }
+        else {
+            swipe.direction = '';
+            swipe.x = 0;
+            swipe.y = 0;
+        }
+    };
+
+    return html`
+        <div
+            class='${() => `toast toast--${toast.type}${toast.status === 'starting' ? ' toast--starting' : toast.status === 'ending' ? ' toast--ending' : ''}${swipe.x !== 0 || swipe.y !== 0 ? ' toast--swiping' : ''}`}'
+            ${{
+                style: () => {
+                    let item = buildVisibleToastLayout([...toasts]).items.find((i) => i.toast === toast),
+                        visibleIndex = item?.visibleIndex ?? 0, offsetY = item?.offsetY ?? 0;
+
+                    return `
+                        --toast-index:${visibleIndex};
+                        --toast-offset-y:${offsetY}px;
+                        --toast-height:${toast.height}px;
+                        --toast-swipe-x:${swipe.x}px;
+                        --toast-swipe-y:${swipe.y}px;`;
+                },
+                'data-swipe-direction': () => swipe.direction,
+                onconnect: (el: HTMLElement) => {
+                    // offsetHeight is the untransformed layout height; getBoundingClientRect
+                    // would include the collapsed scale() transform and report shrunken
+                    // heights, giving uneven offsets/spacing when the stack expands.
+                    let observer = new ResizeObserver(() => { toast.height = el.offsetHeight; });
+
+                    (el as ToastElement).__toastObserver = observer;
+                    observer.observe(el);
+                },
+                ondisconnect: (el: HTMLElement) => {
+                    (el as ToastElement).__toastObserver?.disconnect();
+                },
+                onpointerdown: (e: PointerEvent) => {
+                    pointerId = e.pointerId;
+                    pressed = true;
+                    startX = e.clientX;
+                    startY = e.clientY;
+                },
+                onpointermove: (e: PointerEvent) => {
+                    if (!pressed) {
+                        return;
+                    }
+
+                    let x = horizontal ? e.clientX - startX : 0,
+                        y = top ? Math.min(0, e.clientY - startY) : Math.max(0, e.clientY - startY);
+
+                    // Defer swipe + pointer capture until real movement, otherwise a
+                    // plain click's captured pointer redirects the click off the
+                    // close/action buttons and they never fire.
+                    if (!swiping) {
+                        if (Math.hypot(x, y) < 6) {
+                            return;
+                        }
+
+                        swiping = true;
+                        (e.currentTarget as HTMLElement).setPointerCapture(pointerId);
+                    }
+
+                    swipe.x = x;
+                    swipe.y = y;
+                },
+                onpointerup: finish,
+                onpointercancel: finish
+            }}
+        >
+            <div class='toast-content'>
+                ${toast.type !== 'message' ? icon({ class: 'toast-icon' }, ICONS[toast.type]) : ''}
+
+                <div class='--flex-column --flex-fill'>
+                    <div class='toast-title'>${toast.title}</div>
+                    ${toast.description && html`
+                        <div class='toast-description ${toast.type === 'error' && typeof toast.description === 'string' && toast.description.length > 180 && 'toast-description--clamp'}'>
+                            ${toast.description}
+                        </div>
+                    `}
+                </div>
+
+                ${toast.type === 'error' && typeof toast.description === 'string' && clipboard.onclick(
+                    {
+                        class: 'toast-copy button',
+                        value: String(toast.description)
+                    },
+                    (state) => icon(state.copied ? check : copy)
+                )}
+
+                ${toast.action && html`
+                    <div
+                        class='toast-action button button--primary'
+                        onclick=${() => {
+                            toast.action?.onclick();
+                            dismiss(toast.id);
+                        }}
+                    >
+                        ${toast.action?.label}
+                    </div>
+                `}
+            </div>
+
+            ${() => toast.dismissible && html`
+                <button class='toast-close' aria-label='Dismiss' onclick=${() => dismiss(toast.id)}>
+                    ${icon(close)}
+                </button>
+            `}
+        </div>
+    `;
+}
+
+
+const toaster = (options?: { position?: Position }) => {
+    let position = options?.position ?? 'top-right';
+
+    return html`
+        <div
+            class='toaster ${() => state.active ? '--active' : ''}'
+            data-position='${position}'
+            ${{
+                style: () => `--toast-frontmost-height:${buildVisibleToastLayout([...toasts]).frontmostHeight}px;`,
+                onmouseenter: () => { state.active = true; },
+                onmouseleave: () => { state.active = false; }
+            }}
+        >
+            ${html.reactive(toasts, (value: Toast) => row(value, position))}
+        </div>
+    `;
+};
+
+
+export default toaster;
+export { remove, toast };
+export type { Position };

package/src/components/toast/manager.ts

@@ -0,0 +1,312 @@
+import { effect, reactive, ReactiveArray } from '@esportsplus/reactivity';
+import { type Renderable } from '@esportsplus/template';
+
+
+type Action = {
+    label: string;
+    onclick: () => void;
+};
+
+type Options = {
+    action?: Action;
+    description?: Renderable<unknown> | string;
+    dismissible?: boolean;
+    duration?: number;
+    id?: string;
+    priority?: 'low' | 'high';
+};
+
+type Status = 'ending' | 'starting' | 'visible';
+
+type Timer = {
+    handle: ReturnType<typeof setTimeout> | undefined;
+    remaining: number;
+    started: number;
+};
+
+type Toast = {
+    action?: Action;
+    createdAt: number;
+    description?: Renderable<unknown> | string;
+    dismissible: boolean;
+    duration: number;
+    height: number;
+    id: string;
+    priority: 'low' | 'high';
+    status: Status;
+    title: Renderable<unknown> | string;
+    type: Type;
+};
+
+type Type = 'success' | 'error' | 'info' | 'warning' | 'loading' | 'message';
+
+
+const DURATIONS: Record<Type, number> = {
+    error: 6000,
+    info: 4000,
+    loading: 0,
+    message: 4000,
+    success: 4000,
+    warning: 6000
+};
+
+const EXIT_DURATION = 300;
+
+
+let counter = 0,
+    paused = false,
+    timers = new Map<string, Timer>();
+
+
+function buildVisibleToastLayout(toasts: Toast[]): {
+    frontmostHeight: number;
+    items: { offsetY: number, toast: Toast, visibleIndex: number }[];
+} {
+    // Two parallel cursors:
+    //   - `full*` advances on every toast, so an ending toast keeps the slot it
+    //     occupied before dismissal and its exit transform originates from the
+    //     correct position (otherwise it would snap to Y=0 and slide diagonally).
+    //   - `live*` advances only on non-ending toasts, so live toasts reflow past
+    //     the vacated slot in parallel with the exit animation instead of
+    //     waiting for it to finish (which caused a visible "stop and bump").
+    let fullIndex = 0,
+        fullOffsetY = 0,
+        liveIndex = 0,
+        liveOffsetY = 0,
+        items = toasts.map((toast) => {
+            let height = normalizeToastHeight(toast.height),
+                item;
+
+            if (toast.status === 'ending') {
+                item = {
+                    offsetY: fullOffsetY,
+                    toast,
+                    visibleIndex: fullIndex
+                };
+
+                fullOffsetY += height;
+                fullIndex += 1;
+
+                return item;
+            }
+
+            item = {
+                offsetY: liveOffsetY,
+                toast,
+                visibleIndex: liveIndex
+            };
+
+            fullOffsetY += height;
+            fullIndex += 1;
+            liveOffsetY += height;
+            liveIndex += 1;
+
+            return item;
+        }),
+        frontmostLiveToast = toasts.find((toast) => toast.status !== 'ending');
+
+    return {
+        frontmostHeight: normalizeToastHeight(frontmostLiveToast?.height),
+        items
+    };
+}
+
+function clearTimer(id: string) {
+    let timer = timers.get(id);
+
+    if (!timer) {
+        return;
+    }
+
+    if (timer.handle !== undefined) {
+        clearTimeout(timer.handle);
+    }
+
+    timers.delete(id);
+}
+
+function create(type: Type, title: Renderable<unknown> | string, options: Options = {}): string {
+    let id = options.id ?? `toast-${++counter}`,
+        toast = reactive({
+            action: options.action,
+            createdAt: Date.now(),
+            description: options.description,
+            dismissible: options.dismissible ?? true,
+            duration: options.duration ?? DURATIONS[type],
+            height: 0,
+            id,
+            priority: options.priority ?? 'low',
+            status: 'starting' as Status,
+            title,
+            type
+        }) as Toast;
+
+    toasts.push(toast);
+
+    queueMicrotask(() => {
+        if (toast.status === 'starting' && toasts.includes(toast)) {
+            toast.status = 'visible';
+        }
+    });
+
+    if (type !== 'loading' && toast.duration > 0) {
+        schedule(toast);
+    }
+
+    return id;
+}
+
+function dismiss(id: string) {
+    let toast = toasts.find((value) => value.id === id);
+
+    if (!toast || toast.status === 'ending') {
+        return;
+    }
+
+    clearTimer(id);
+
+    toast.status = 'ending';
+
+    setTimeout(() => remove(id), EXIT_DURATION);
+}
+
+function normalizeToastHeight(height: number | null | undefined): number {
+    return typeof height === 'number' && Number.isFinite(height) && height > 0 ? height : 0;
+}
+
+function pause() {
+    for (let timer of timers.values()) {
+        if (timer.handle === undefined) {
+            continue;
+        }
+
+        clearTimeout(timer.handle);
+
+        timer.remaining = Math.max(0, timer.remaining - (performance.now() - timer.started));
+        timer.handle = undefined;
+    }
+}
+
+function remove(id: string) {
+    let index = toasts.findIndex((toast) => toast.id === id);
+
+    clearTimer(id);
+
+    if (index !== -1) {
+        toasts.splice(index, 1);
+    }
+}
+
+function resume() {
+    for (let [id, timer] of timers) {
+        if (timer.handle !== undefined) {
+            continue;
+        }
+
+        timer.started = performance.now();
+        timer.handle = setTimeout(() => dismiss(id), timer.remaining);
+    }
+}
+
+function schedule(toast: Toast) {
+    if (toast.duration <= 0) {
+        return;
+    }
+
+    if (state.active) {
+        timers.set(toast.id, {
+            handle: undefined,
+            remaining: toast.duration,
+            started: 0
+        });
+
+        return;
+    }
+
+    timers.set(toast.id, {
+        handle: setTimeout(() => dismiss(toast.id), toast.duration),
+        remaining: toast.duration,
+        started: performance.now()
+    });
+}
+
+function update(id: string, options: Options) {
+    let toast = toasts.find((value) => value.id === id);
+
+    if (!toast) {
+        return;
+    }
+
+    if (options.action !== undefined) {
+        toast.action = options.action;
+    }
+
+    if (options.description !== undefined) {
+        toast.description = options.description;
+    }
+
+    if (options.dismissible !== undefined) {
+        toast.dismissible = options.dismissible;
+    }
+
+    if (options.priority !== undefined) {
+        toast.priority = options.priority;
+    }
+
+    if (options.duration !== undefined) {
+        toast.duration = options.duration;
+
+        clearTimer(id);
+
+        if (toast.type !== 'loading' && toast.duration > 0 && toast.status !== 'ending') {
+            schedule(toast);
+        }
+    }
+}
+
+
+const state = reactive({ active: false });
+
+const toasts = new ReactiveArray<Toast>();
+
+effect(() => {
+    let active = state.active;
+
+    if (active === paused) {
+        return;
+    }
+
+    paused = active;
+
+    if (active) {
+        pause();
+    }
+    else {
+        resume();
+    }
+});
+
+const toast = {
+    dismiss: (id?: string) => {
+        if (id === undefined) {
+            for (let value of [...toasts]) {
+                dismiss(value.id);
+            }
+
+            return;
+        }
+
+        dismiss(id);
+    },
+    error: (title: Renderable<unknown> | string, options?: Options) => create('error', title, options),
+    info: (title: Renderable<unknown> | string, options?: Options) => create('info', title, options),
+    loading: (title: Renderable<unknown> | string, options?: Options) => create('loading', title, options),
+    message: (title: Renderable<unknown> | string, options?: Options) => create('message', title, options),
+    success: (title: Renderable<unknown> | string, options?: Options) => create('success', title, options),
+    update,
+    warning: (title: Renderable<unknown> | string, options?: Options) => create('warning', title, options)
+};
+
+
+export { buildVisibleToastLayout, remove, state, toast, toasts };
+export type { Options, Toast, Type };