@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/task-list/index.ts

@@ -0,0 +1,137 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { chevron, guide, progress, working, type Progress } from '~/components/log';
+import './scss/index.scss';
+
+
+type Chip = {
+    icon?: Renderable<unknown>;
+    label: string;
+};
+
+type Context = {
+    collapse: boolean | 'all';
+    revealed: () => number;
+    total: number;
+};
+
+type Step = {
+    chips?: Chip[];
+    label: string;
+};
+
+type Task = {
+    icon?: Renderable<unknown>;
+    runningTitle?: string;
+    steps: Step[];
+    title: string;
+};
+
+
+function chip({ icon, label }: Chip) {
+    return html`
+        <span class='task-list-chip'>
+            ${icon && html`<span class='task-list-chip-icon' aria-hidden='true'>${icon}</span>`}
+            <span class='task-list-chip-label'>${label}</span>
+        </span>
+    `;
+}
+
+function step(context: Context, { chips, label }: Step, unit: number) {
+    return html`
+        <li class='log-row log-unit ${() => context.revealed() > unit && '--active'}' ${{ inert: () => context.revealed() <= unit }}>
+            ${guide()}
+            <div class='log-unit-content'>
+                <div class='task-list-step'><span class='${() => context.revealed() === unit + 1 && context.revealed() < context.total && 'log-shimmer'}'>${label}</span>${chips?.map((value) => chip(value))}</div>
+            </div>
+        </li>
+    `;
+}
+
+function task(context: Context, { icon, runningTitle, steps, title }: Task, head: number) {
+    let end = head + 1 + steps.length,
+        state = reactive({ open: null as boolean | null });
+
+    let done = () => context.revealed() >= end,
+        open = () => state.open ?? !(context.collapse === 'all' ? context.revealed() >= context.total : context.collapse && done());
+
+    return html`
+        <div
+            class='task-list-task log-unit ${() => context.revealed() > head && '--active'} ${() => done() && '--done'}'
+            ${{ inert: () => context.revealed() <= head }}
+        >
+            <div class='log-unit-content'>
+                <button
+                    class='task-list-header'
+                    aria-expanded='${() => String(open())}'
+                    type='button'
+                    onclick='${() => state.open = !open()}'
+                >
+                    ${icon && html`<span class='task-list-icon' aria-hidden='true'>${icon}</span>`}
+                    <span class='task-list-title'>
+                        ${runningTitle && runningTitle !== title
+                            ? html`
+                                <span class='task-list-title-text task-list-title-text--running ${() => !done() && 'log-shimmer'}'>${runningTitle}</span>
+                                <span class='task-list-title-text task-list-title-text--final'>${title}</span>
+                            `
+                            : html`<span class='task-list-title-text ${() => !done() && 'log-shimmer'}'>${title}</span>`}
+                    </span>
+                    ${chevron()}
+                </button>
+
+                <div class='task-list-steps ${() => open() && '--active'}' ${{ inert: () => !open() }}>
+                    <ul class='task-list-steps-content' aria-live='polite'>
+                        ${steps.map((value, i) => step(context, value, head + 1 + i))}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+
+const taskList = ({
+    collapseOnComplete = false,
+    onComplete,
+    startDelay = 320,
+    state,
+    stepInterval = 850,
+    tasks,
+    working: label = 'Working',
+    ...attributes
+}: Attributes & {
+    collapseOnComplete?: boolean | 'all';
+    onComplete?: VoidFunction;
+    startDelay?: number;
+    state?: Progress;
+    stepInterval?: number;
+    tasks: Task[];
+    working?: false | string;
+}) => {
+    let heads: number[] = [],
+        units = 0;
+
+    for (let i = 0, n = tasks.length; i < n; i++) {
+        heads.push(units);
+        units += 1 + tasks[i].steps.length;
+    }
+
+    let { revealed, start, total } = progress({
+            delay: (index) => index === 0 ? startDelay : stepInterval,
+            onComplete,
+            state,
+            units
+        }),
+        context: Context = { collapse: collapseOnComplete, revealed, total };
+
+    return html`
+        <div class='log task-list' ${attributes} ${{ onconnect: start }}>
+            ${tasks.map((value, i) => task(context, value, heads[i]))}
+            ${label !== false && working(label, () => revealed() > 0 && revealed() < total)}
+        </div>
+    `;
+};
+
+
+export default taskList;
+export type { Chip, Step, Task };

package/src/components/task-list/scss/index.scss

@@ -0,0 +1,171 @@
+@use 'variables';
+
+.task-list {
+    display: flex;
+    flex-direction: column;
+
+    // Spacing sits inside the unit's content, not on the grid item, so a task that has not landed takes no room.
+    &-task + &-task,
+    &-task + .log-working {
+        > .log-unit-content > :first-child {
+            margin-top: var(--task-gap);
+        }
+    }
+
+    &-chip {
+        align-items: center;
+        background: var(--chip-background);
+        border: 1px solid var(--chip-border);
+        border-radius: 6px;
+        display: inline-flex;
+        gap: 4px;
+        margin-inline: 3px 2px;
+        max-width: 100%;
+        padding: 2px 6px;
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+        translate: 0 -1px;
+        vertical-align: middle;
+
+        &:has(> .task-list-chip-icon) {
+            padding-inline-start: 4px;
+        }
+
+        &:hover {
+            background: var(--chip-background-hover);
+            border-color: var(--chip-border-hover);
+        }
+
+        &-icon {
+            align-items: center;
+            display: flex;
+            flex-shrink: 0;
+            height: 14px;
+            justify-content: center;
+            width: 14px;
+
+            > * {
+                height: 100%;
+                width: 100%;
+            }
+        }
+
+        &-label {
+            --line-height: calc(16 / 12);
+
+            color: var(--text-primary);
+            font-size: var(--font-size-small);
+            font-weight: var(--font-weight-500);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    &-header {
+        align-items: center;
+        border-radius: 6px;
+        display: flex;
+        gap: 8px;
+        padding-block: 2px;
+        width: 100%;
+
+        &:focus-visible {
+            outline: 2px solid var(--color-primary-400, var(--color-blue-400));
+            outline-offset: -2px;
+        }
+    }
+
+    &-icon {
+        align-items: center;
+        color: var(--icon-color);
+        display: flex;
+        flex-shrink: 0;
+        height: 16px;
+        justify-content: center;
+        width: 16px;
+
+        > * {
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    &-step {
+        padding-block: 4px;
+    }
+
+    // Collapsing a task folds its steps; the header stays.
+    &-steps {
+        display: grid;
+        grid-template-rows: 0fr;
+        opacity: 0;
+        transition: grid-template-rows 0.3s var(--soft), opacity 0.22s ease-out;
+
+        &.--active {
+            grid-template-rows: 1fr;
+            opacity: 1;
+        }
+
+        &-content {
+            margin-inline-start: 8px;
+            min-height: 0;
+            min-width: 0;
+            overflow: hidden;
+
+            &::before {
+                content: '';
+                display: block;
+                height: 2px;
+            }
+        }
+    }
+
+    // Running and finished titles share one cell so the swap never shifts the row.
+    &-title {
+        display: grid;
+        flex: 1;
+        font-weight: var(--font-weight-500);
+        min-width: 0;
+        overflow: hidden;
+
+        &-text {
+            filter: blur(0);
+            grid-area: 1 / 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            transition:
+                filter 0.26s var(--soft),
+                opacity 0.26s var(--soft),
+                translate 0.26s var(--soft);
+            white-space: nowrap;
+
+            &--final {
+                filter: blur(3px);
+                opacity: 0;
+                translate: 0 4px;
+
+                .--done & {
+                    filter: blur(0);
+                    opacity: 1;
+                    translate: 0;
+                }
+            }
+
+            &--running {
+                .--done & {
+                    filter: blur(3px);
+                    opacity: 0;
+                    translate: 0 -4px;
+                }
+            }
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-steps,
+        &-title-text {
+            transition: none;
+        }
+    }
+}

package/src/components/task-list/scss/variables.scss

@@ -0,0 +1,8 @@
+.task-list {
+    --chip-background: var(--color-grey-400);
+    --chip-background-hover: var(--color-grey-500);
+    --chip-border: color-mix(in oklab, var(--color-border-400) 50%, transparent);
+    --chip-border-hover: var(--color-border-400);
+    --icon-color: var(--color-text-300);
+    --task-gap: 5px;
+}

package/src/components/tasklist/constants.ts

@@ -0,0 +1,4 @@
+const TASKLIST_CHECKBOX = Symbol.for('@esportsplus/ui/tasklist.checkbox');
+
+
+export { TASKLIST_CHECKBOX };

package/src/components/tasklist/index.ts

@@ -0,0 +1,174 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import checkbox from '~/components/checkbox';
+import { TASKLIST_CHECKBOX } from './constants';
+import './scss/index.scss';
+
+
+type CheckboxAttributes = NonNullable<Parameters<typeof checkbox>[0]>;
+
+type Task = {
+    checked?: boolean;
+    description?: Renderable<unknown>;
+    label: Renderable<unknown>;
+};
+
+
+function checked(item: Element) {
+    return (item.querySelector('.checkbox-tag') as HTMLInputElement).checked;
+}
+
+// Cancelling an animation rejects its finished promise and replaces it with one that never settles,
+// so every promise is taken before awaiting; rejections only mean the animation stopped running
+async function finished(animations: Animation[]) {
+    let promises: Promise<unknown>[] = [];
+
+    for (let i = 0, n = animations.length; i < n; i++) {
+        promises.push(animations[i].finished.catch(() => {}));
+    }
+
+    for (let i = 0, n = promises.length; i < n; i++) {
+        await promises[i];
+    }
+}
+
+function move(item: HTMLElement) {
+    let list = item.parentElement!,
+        reference: Element | null = null;
+
+    if (!checked(item)) {
+        let last: Element | null = null;
+
+        // Rows still animating have not moved yet, so the open tasks end at the first checked row that has settled
+        for (let child of list.children) {
+            if (child === item) {
+                return;
+            }
+
+            if (!checked(child)) {
+                last = child;
+            }
+            else if (!pending(child)) {
+                break;
+            }
+        }
+
+        reference = last ? last.nextElementSibling : list.firstElementChild;
+    }
+
+    if (reference === item || (reference === null && list.lastElementChild === item)) {
+        return;
+    }
+
+    let items = [...list.children] as HTMLElement[],
+        first = items.map((element) => element.getBoundingClientRect().top);
+
+    // moveBefore keeps focus on the input; insertBefore drops it
+    if (typeof list.moveBefore === 'function') {
+        list.moveBefore(item, reference);
+    }
+    else {
+        let focused = document.activeElement as HTMLElement | null;
+
+        list.insertBefore(item, reference);
+
+        if (focused && item.contains(focused)) {
+            focused.focus({ preventScroll: true });
+        }
+    }
+
+    // Measure untransformed positions so a move that interrupts another starts from where rows are drawn
+    for (let i = 0, n = items.length; i < n; i++) {
+        items[i].style.transform = '';
+        items[i].style.transition = 'none';
+    }
+
+    let last = items.map((element) => element.getBoundingClientRect().top);
+
+    for (let i = 0, n = items.length; i < n; i++) {
+        let offset = first[i] - last[i];
+
+        if (offset) {
+            items[i].style.transform = `translateY(${offset}px)`;
+        }
+    }
+
+    list.getBoundingClientRect();
+
+    for (let i = 0, n = items.length; i < n; i++) {
+        items[i].style.transform = '';
+        items[i].style.transition = '';
+    }
+
+    item.classList.add('--moving');
+
+    void finished(item.getAnimations()).then(() => {
+        if (!item.getAnimations().length) {
+            item.classList.remove('--moving');
+        }
+    });
+}
+
+function pending(item: Element) {
+    return item.classList.contains('--checking') || item.classList.contains('--unchecking');
+}
+
+function row(task: Task, reorder: boolean, attributes?: CheckboxAttributes) {
+    let sequence = 0;
+
+    return html`
+        <li
+            class='tasklist-item'
+            ${{
+                onchange: async function(this: HTMLElement, event: Event) {
+                    let id = ++sequence,
+                        value = (event.target as HTMLInputElement).checked;
+
+                    task.checked = value;
+
+                    // Must land in the same style flush as the checked change so the stage delays apply
+                    this.classList.remove('--checking', '--unchecking');
+                    this.classList.add(value ? '--checking' : '--unchecking');
+
+                    await finished(this.getAnimations({ subtree: true }));
+
+                    if (id !== sequence) {
+                        return;
+                    }
+
+                    this.classList.remove('--checking', '--unchecking');
+
+                    if (reorder) {
+                        move(this);
+                    }
+                }
+            }}
+        >
+            <label class='tasklist-row'>
+                ${checkbox.call({ attributes }, { class: 'tasklist-checkbox', [checkbox.input]: { checked: !!task.checked } })}
+
+                <span class='tasklist-content'>
+                    <span class='tasklist-label'>${task.label}</span>
+                    ${task.description && html`<span class='tasklist-description'>${task.description}</span>`}
+                </span>
+            </label>
+        </li>
+    `;
+}
+
+
+export default component(
+    function({ reorder = true, tasks, ...attributes }: Attributes & { [TASKLIST_CHECKBOX]?: CheckboxAttributes; reorder?: boolean; tasks: Task[] }) {
+        return html`
+            <ul class='tasklist' ${attributes}>
+                ${(reorder ? [
+                    ...tasks.filter((task) => !task.checked),
+                    ...tasks.filter((task) => task.checked)
+                ] : tasks).map((task) => row(task, reorder, attributes[TASKLIST_CHECKBOX]))}
+            </ul>
+        `;
+    },
+    { checkbox: TASKLIST_CHECKBOX }
+);
+
+
+export type { Task };

package/src/components/tasklist/scss/index.scss

@@ -0,0 +1,184 @@
+@use '/tokens';
+@use 'variables';
+
+.tasklist {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+
+    &-content {
+        min-width: 0;
+    }
+
+    &-description {
+        color: var(--description-color);
+        display: block;
+        font-size: var(--description-font-size);
+        transition: color var(--strike-duration) var(--ease-in-out);
+    }
+
+    &-item {
+        background: var(--background);
+        border-radius: var(--border-radius);
+        position: relative;
+        transition: transform var(--move-duration) var(--move-timing-function);
+
+        &.--checking {
+            .tasklist-checkbox {
+                animation: tasklist-pop var(--pop-duration) var(--ease-out);
+            }
+
+            .tasklist-description,
+            .tasklist-label {
+                transition-delay: var(--check-duration);
+            }
+
+            .tasklist-row {
+                animation: tasklist-nudge var(--nudge-duration) var(--ease-out) calc(var(--check-duration) + var(--strike-duration));
+            }
+        }
+
+        &.--moving {
+            z-index: 1;
+        }
+
+        &.--unchecking {
+            .checkbox-check svg,
+            .tasklist-checkbox {
+                transition-delay: var(--strike-duration);
+            }
+        }
+
+        &:has(.checkbox-tag:checked) {
+            .tasklist-description {
+                color: var(--description-color-checked);
+            }
+
+            .tasklist-label {
+                background-size: 100% var(--strike-width);
+                color: var(--label-color-checked);
+            }
+        }
+    }
+
+    // Inline so the strike is drawn once per wrapped line
+    &-label {
+        -webkit-box-decoration-break: clone;
+        background-image: linear-gradient(var(--strike-color), var(--strike-color));
+        background-position: 0 55%;
+        background-repeat: no-repeat;
+        background-size: 0% var(--strike-width);
+        box-decoration-break: clone;
+        color: var(--label-color);
+        transition:
+            background-size var(--strike-duration) var(--ease-in-out),
+            color var(--strike-duration) var(--ease-in-out);
+    }
+
+    &-row {
+        align-items: flex-start;
+        cursor: pointer;
+        display: flex;
+        font-size: var(--font-size);
+        gap: var(--gap-horizontal);
+        line-height: var(--line-height);
+        padding: var(--padding-vertical) var(--padding-horizontal);
+        user-select: none;
+    }
+
+    // Checked means the step stays in the plan, so the strike marks unchecked rows instead
+    &--plan {
+        counter-reset: tasklist;
+
+        .tasklist-description {
+            margin-top: 2px;
+        }
+
+        .tasklist-item {
+            counter-increment: tasklist;
+            transition:
+                background-color var(--hover-duration) var(--ease-in-out),
+                opacity var(--strike-duration) var(--ease-in-out),
+                transform var(--move-duration) var(--move-timing-function);
+
+            &:has(.checkbox-tag:checked) {
+                .tasklist-description {
+                    color: var(--description-color);
+                }
+
+                .tasklist-label {
+                    background-size: 0% var(--strike-width);
+                    color: var(--label-color);
+                }
+            }
+
+            &:not(:has(.checkbox-tag:checked)) {
+                opacity: var(--off-opacity);
+
+                .tasklist-label {
+                    background-size: 100% var(--strike-width);
+                }
+            }
+
+            &:hover {
+                --background: var(--background-hover);
+            }
+        }
+
+        .tasklist-label {
+            font-weight: var(--label-font-weight);
+
+            &::before {
+                color: var(--index-color);
+                content: counter(tasklist, decimal-leading-zero);
+                font-family: var(--index-font-family);
+                font-size: var(--index-font-size);
+                font-variant-numeric: tabular-nums;
+                font-weight: var(--font-weight-400);
+                margin-right: 6px;
+            }
+        }
+
+        .tasklist-row {
+            &::before {
+                background: var(--grip-color);
+                content: '';
+                flex: 0 0 var(--grip-size);
+                height: var(--grip-size);
+                margin-top: calc((var(--line-height) - var(--grip-size)) / 2);
+                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='5' r='1.5'/%3E%3Ccircle cx='9' cy='12' r='1.5'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='15' cy='5' r='1.5'/%3E%3Ccircle cx='15' cy='12' r='1.5'/%3E%3Ccircle cx='15' cy='19' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
+                opacity: 0;
+                transition: opacity var(--hover-duration) var(--ease-in-out);
+            }
+
+            @media (hover: hover) {
+                &:hover::before {
+                    opacity: 1;
+                }
+            }
+        }
+
+        .tasklist-checkbox {
+            margin-top: calc((var(--line-height) - var(--size)) / 2);
+        }
+    }
+}
+
+@keyframes tasklist-nudge {
+    35% {
+        transform: translateX(var(--nudge-distance));
+    }
+    70% {
+        transform: translateX(calc(var(--nudge-distance) / -4));
+    }
+}
+
+@keyframes tasklist-pop {
+    40% {
+        transform: scale(var(--pop-scale));
+    }
+}