@esportsplus/ui 0.51.7 → 0.54.0

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 };

package/src/components/toast/scss/index.scss

@@ -0,0 +1,276 @@
+@use '/lib';
+@use '/tokens';
+@use 'variables';
+
+.toaster {
+    bottom: auto;
+    left: auto;
+    position: fixed;
+    right: auto;
+    top: auto;
+    width: min(360px, calc(100% - (var(--toast-inset) * 2)));
+    z-index: 9999;
+
+    &[data-position^='top'] {
+        top: var(--toast-inset);
+    }
+
+    &[data-position^='bottom'] {
+        bottom: var(--toast-inset);
+    }
+
+    &[data-position$='left'] {
+        left: var(--toast-inset);
+    }
+
+    &[data-position$='right'] {
+        right: var(--toast-inset);
+    }
+
+    &[data-position$='center'] {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+
+.toast {
+    background: var(--background);
+    border: 1px solid var(--color-border-400);
+    border-radius: var(--border-radius-500);
+    box-shadow: var(--box-shadow-300);
+    color: var(--color-text-400);
+    left: 0;
+    overflow: visible;
+    position: absolute;
+    right: 0;
+    transform: translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) + (var(--toast-index) * var(--toast-peek)) + (var(--toast-shrink) * var(--toast-calc-height)))) scale(var(--toast-scale));
+    transition:
+        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 0.3s,
+        height 0.2s;
+    user-select: none;
+    width: 100%;
+    z-index: calc(9999 - var(--toast-index, 0));
+
+
+    [data-position*='top'] & {
+        bottom: auto;
+        top: 0;
+        transform-origin: top;
+    }
+
+    [data-position*='bottom'] & {
+        --toast-calc-offset-y: calc((var(--toast-offset-y, 0px) * -1) + (var(--toast-index, 0) * var(--toast-gap) * -1) + var(--toast-swipe-y, 0px));
+        bottom: 0;
+        top: auto;
+        transform: translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) - (var(--toast-index) * var(--toast-peek)) - (var(--toast-shrink) * var(--toast-calc-height)))) scale(var(--toast-scale));
+        transform-origin: bottom;
+    }
+
+
+    // Invisible hit-area bridging the gap between stacked toasts while collapsed.
+    &::after {
+        content: '';
+        height: calc(var(--toast-gap) + 1px);
+        left: 0;
+        position: absolute;
+        width: 100%;
+    }
+
+    [data-position*='top'] &::after {
+        top: 100%;
+    }
+
+    [data-position*='bottom'] &::after {
+        bottom: 100%;
+    }
+
+
+    &-action {
+        flex-shrink: 0;
+    }
+
+    &-close {
+        align-items: center;
+        background: var(--background);
+        border: 1px solid var(--color-border-400);
+        border-radius: 100%;
+        color: var(--color-text-500);
+        display: flex;
+        height: var(--size-500);
+        justify-content: center;
+        position: absolute;
+        right: calc(var(--size-200) * -1);
+        top: calc(var(--size-200) * -1);
+        width: var(--size-500);
+        z-index: 1;
+    }
+
+    &-content {
+        align-items: center;
+        display: flex;
+        gap: var(--size-300);
+        justify-content: space-between;
+        min-height: 0;
+        opacity: max(0, 1 - var(--toast-index, 0));
+        overflow-x: clip;
+        overflow-y: visible;
+        padding: var(--size-400);
+        transition: opacity 0.3s;
+    }
+
+    &-copy {
+        align-items: center;
+        display: inline-flex;
+        justify-content: center;
+    }
+
+    &-description {
+        color: var(--color-text-300);
+        overflow-wrap: anywhere;
+
+        &--clamp {
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 4;
+            display: -webkit-box;
+            line-clamp: 4;
+            overflow: hidden;
+        }
+    }
+
+    &-details {
+        margin-top: var(--size-200);
+        max-height: 160px;
+        overflow-y: auto;
+    }
+
+    &-details-toggle {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        gap: var(--size-200);
+    }
+
+    &-icon {
+        color: var(--toast-color);
+        flex-shrink: 0;
+        height: 18px;
+        width: 18px;
+    }
+
+    &-title {
+        font-weight: var(--font-weight-400);
+        overflow-wrap: anywhere;
+    }
+
+
+    &--error {
+        --toast-color: var(--color-red-400);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+    }
+
+    &--warning {
+        --toast-color: var(--color-yellow-400);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+    }
+
+    &--success {
+        --toast-color: var(--color-green-400);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+    }
+
+    &--info {
+        --toast-color: var(--color-blue-400);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+    }
+
+    &--loading {
+        --toast-color: var(--color-grey-500);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+
+        .toast-icon {
+            animation: toast-spin 1s linear infinite;
+        }
+    }
+
+    &--message {
+        --toast-color: var(--color-text-300);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+    }
+}
+
+
+// active (viewport hovered): everything fans out to its own measured offset.
+.toaster.--active .toast {
+    height: auto;
+    transform: translateX(var(--toast-swipe-x)) translateY(var(--toast-calc-offset-y));
+}
+
+.toaster.--active .toast-content {
+    opacity: 1;
+}
+
+
+// Entering: start off-screen (faded) and let the base transform animate in.
+.toaster .toast.toast--starting {
+    opacity: 0;
+}
+
+.toaster[data-position*='top'] .toast.toast--starting {
+    transform: translateY(-120%);
+}
+
+.toaster[data-position*='bottom'] .toast.toast--starting {
+    transform: translateY(120%);
+}
+
+
+// Leaving: fade, then slide toward the matching viewport edge (or the swipe
+// direction the gesture reported).
+.toaster .toast.toast--ending {
+    opacity: 0;
+}
+
+.toaster[data-position*='top'] .toast.toast--ending {
+    transform: translateY(calc(-100% - var(--toast-inset)));
+}
+
+.toaster[data-position*='bottom'] .toast.toast--ending {
+    transform: translateY(calc(100% + var(--toast-inset)));
+}
+
+.toaster .toast.toast--ending[data-swipe-direction='left'] {
+    transform: translateX(calc(var(--toast-swipe-x) - 100% - var(--toast-inset))) translateY(var(--toast-calc-offset-y));
+}
+
+.toaster .toast.toast--ending[data-swipe-direction='right'] {
+    transform: translateX(calc(var(--toast-swipe-x) + 100% + var(--toast-inset))) translateY(var(--toast-calc-offset-y));
+}
+
+.toaster .toast.toast--ending[data-swipe-direction='up'] {
+    transform: translateY(calc(var(--toast-swipe-y) - 100% - var(--toast-inset)));
+}
+
+.toaster .toast.toast--ending[data-swipe-direction='down'] {
+    transform: translateY(calc(var(--toast-swipe-y) + 100% + var(--toast-inset)));
+}
+
+
+// Following the finger: never ease the transform during a swipe.
+.toast--swiping {
+    transition: none;
+}
+
+
+@keyframes toast-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/src/components/toast/scss/variables.scss

@@ -0,0 +1,19 @@
+.toaster {
+    --toast-gap: var(--size-300);
+    --toast-inset: var(--size-500);
+    --toast-peek: var(--size-300);
+}
+
+
+.toast {
+    --toast-calc-height: max(var(--toast-frontmost-height, var(--toast-height, 0px)), var(--toast-height, 0px));
+    --toast-calc-offset-y: calc(var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--toast-gap)) + var(--toast-swipe-y, 0px));
+    --toast-color: var(--color-text-300);
+    --toast-height: 0px;
+    --toast-index: 0;
+    --toast-offset-y: 0px;
+    --toast-scale: max(0, 1 - (var(--toast-index, 0) * 0.06));
+    --toast-shrink: calc(1 - var(--toast-scale));
+    --toast-swipe-x: 0px;
+    --toast-swipe-y: 0px;
+}

package/src/components/toast/svg/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>

package/src/components/toast/svg/chevron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>

package/src/components/toast/svg/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

package/src/components/toast/svg/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/src/components/toast/svg/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>

package/src/components/toast/svg/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>

package/src/components/toast/svg/loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

package/src/components/toast/svg/success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

package/src/components/toast/svg/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>

package/src/components/tooltip/menu.ts

@@ -1,6 +1,6 @@
-import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
 import onclick from './onclick';
 
 
@@ -20,21 +20,25 @@ const OMIT_OPTION = ['content'];
 const OMIT_TOOLTIP_CONTENT = ['direction'];
 
 
-export default template.factory<A>(
+export default component<A>(
     (attributes, content) => {
         let options = attributes.options,
             option = attributes.option,
+            state = attributes.state || reactive({ active: false }),
             tooltipContent = attributes?.['tooltip-content'],
             tooltipContentDirection = tooltipContent?.direction || 'nw';
 
         return onclick(
-            omit(attributes, OMIT),
+            { ...omit(attributes, OMIT), state },
             html`
                 ${content}
 
                 <div
                     class='tooltip-content ${`tooltip-content--${tooltipContentDirection}`}'
                     ${tooltipContent && omit(tooltipContent, OMIT_TOOLTIP_CONTENT)}
+                    ${{
+                        inert: () => !state.active
+                    }}
                 >
                     ${options.map((o) => {
                         if (o.href) {