@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/checkbox-group/index.ts

@@ -0,0 +1,171 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import checkbox, { factory } from '~/components/checkbox';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [CHECKBOX_GROUP_INPUT]?: Input;
+    [CHECKBOX_GROUP_ROW]?: Attributes;
+    hint?: boolean;
+    items: Item[];
+    label: string;
+    name?: string;
+    state?: Record<string, boolean>;
+    value?: string[];
+};
+
+// The checkbox's own input part: no 'onrender' or 'type', since the checkbox owns both.
+type Input = NonNullable<NonNullable<Parameters<typeof checkbox>[0]>[typeof factory.input]>;
+
+type Item = {
+    description?: string;
+    id: string;
+    label: string;
+};
+
+
+const CHECKBOX_GROUP_INPUT = Symbol.for('@esportsplus/ui/checkbox-group.input');
+
+const CHECKBOX_GROUP_ROW = Symbol.for('@esportsplus/ui/checkbox-group.row');
+
+
+let uid = 0;
+
+
+function template(
+    this: { attributes?: Pick<A, typeof CHECKBOX_GROUP_INPUT | typeof CHECKBOX_GROUP_ROW> } | void,
+    {
+        hint = true,
+        items,
+        label,
+        name,
+        value = [],
+        state = reactive(Object.fromEntries(items.map((item) => [item.id, value.includes(item.id)]))),
+        ...attributes
+    }: A
+) {
+    let anchor: number | null = null,
+        id = `checkbox-group-${++uid}`,
+        shift = false;
+
+    function all() {
+        return count() === items.length;
+    }
+
+    function count() {
+        let n = 0;
+
+        for (let i = 0, m = items.length; i < m; i++) {
+            if (state[items[i].id]) {
+                n++;
+            }
+        }
+
+        return n;
+    }
+
+    function mixed() {
+        let n = count();
+
+        return n > 0 && n < items.length;
+    }
+
+    // A label click forwards a second click to its input, and browsers disagree on whether that one carries
+    // the modifier, so remember it from whichever event saw it.
+    function remember(e: MouseEvent) {
+        if (e.shiftKey) {
+            shift = true;
+        }
+    }
+
+    function toggle(index: number, checked: boolean) {
+        let from = shift && anchor !== null ? anchor : index,
+            hi = Math.max(from, index);
+
+        for (let i = Math.min(from, index); i <= hi; i++) {
+            state[items[i].id] = checked;
+        }
+
+        anchor = index;
+        shift = false;
+    }
+
+    return html`
+        <div class='checkbox-group' ${this?.attributes} ${attributes}>
+            <label
+                class='checkbox-group-row checkbox-group-row--parent'
+                ${this?.attributes?.[CHECKBOX_GROUP_ROW]}
+                ${attributes[CHECKBOX_GROUP_ROW]}
+            >
+                <span class='checkbox-group-box'>
+                    ${checkbox({
+                        [factory.input]: {
+                            'aria-controls': items.map((item) => `${id}-${item.id}`).join(' '),
+                            checked: () => all(),
+                            indeterminate: () => mixed(),
+                            onchange: () => {
+                                let checked = !all();
+
+                                anchor = null;
+                                shift = false;
+
+                                for (let i = 0, n = items.length; i < n; i++) {
+                                    state[items[i].id] = checked;
+                                }
+                            }
+                        }
+                    })}
+                    <svg aria-hidden='true' class='checkbox-group-dash' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 16'>
+                        <path d='M4 8h8' pathLength='1' />
+                    </svg>
+                </span>
+                <span class='checkbox-group-text'>
+                    <span class='checkbox-group-label' id='${id}-all'>${label}</span>
+                </span>
+                <span class='checkbox-group-count'>${() => count()} of ${items.length}</span>
+            </label>
+            <div class='checkbox-group-divider'></div>
+            <div aria-labelledby='${id}-all' class='checkbox-group-items' role='group'>
+                ${items.map((item, index) => html`
+                    <label
+                        class='checkbox-group-row ${item.description && 'checkbox-group-row--description'}'
+                        ${this?.attributes?.[CHECKBOX_GROUP_ROW]}
+                        ${attributes[CHECKBOX_GROUP_ROW]}
+                        ${{ onclick: remember }}
+                    >
+                        <span class='checkbox-group-box'>
+                            ${checkbox({
+                                [factory.input]: {
+                                    checked: () => state[item.id],
+                                    id: `${id}-${item.id}`,
+                                    name,
+                                    onchange: function(this: HTMLInputElement) {
+                                        toggle(index, this.checked);
+                                    },
+                                    onclick: remember,
+                                    value: item.id,
+                                    ...this?.attributes?.[CHECKBOX_GROUP_INPUT],
+                                    ...attributes[CHECKBOX_GROUP_INPUT]
+                                }
+                            })}
+                        </span>
+                        <span class='checkbox-group-text'>
+                            <span class='checkbox-group-label'>${item.label}</span>
+                            ${item.description ? html`<span class='checkbox-group-description'>${item.description}</span>` : ''}
+                        </span>
+                    </label>
+                `)}
+            </div>
+            ${hint ? html`
+                <p class='checkbox-group-hint'>
+                    <kbd>Shift</kbd> click to select a range
+                </p>
+            ` : ''}
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { input: CHECKBOX_GROUP_INPUT, row: CHECKBOX_GROUP_ROW } as const);
+export type { Item };

package/src/components/checkbox-group/scss/index.scss

@@ -0,0 +1,229 @@
+@use 'variables';
+
+$ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+$fill-in: linear(0, 0.069, 0.225, 0.411, 0.59, 0.743, 0.861, 0.945, 0.999, 1.03, 1.044, 1.046, 1.041, 1.033, 1.025, 1.017, 1.01, 1.005, 1.002, 1, 0.998, 0.998, 0.998, 0.998, 1);
+
+.checkbox-group {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    color: var(--color);
+    padding: var(--padding);
+    width: var(--width);
+
+    &-box {
+        display: grid;
+        flex: 0 0 auto;
+        position: relative;
+        transition: scale var(--transition-duration) var(--transition-timing-function);
+
+        .checkbox {
+            --background-active: transparent;
+            --border-color-active: var(--color);
+            --border-color-default: color-mix(in oklch, var(--color) 25%, transparent);
+            --border-color-hover: color-mix(in oklch, var(--color) 45%, transparent);
+            --border-radius: var(--border-radius-300);
+            --border-width: var(--box-border-width);
+            --border-width-offset-hover: 0px;
+            --box-shadow-active: none;
+            --check-size: 14px;
+            --check-stroke-width: 3.4;
+            --focus-width: 0px;
+            --indicator-color-default: var(--check-color);
+            --size: var(--box-size);
+            --transition-duration: 150ms;
+            --transition-timing-function: ease-out;
+
+            // Covers the border too, so a filled box is exactly the box size.
+            &::before {
+                background: var(--color);
+                border-radius: var(--border-radius);
+                content: '';
+                inset: calc(var(--box-border-width) * -1);
+                opacity: 0;
+                pointer-events: none;
+                position: absolute;
+                scale: 0.8;
+                transition:
+                    opacity 120ms $ease-out,
+                    scale 120ms $ease-out;
+            }
+
+            &:has(input:checked, input:indeterminate)::before {
+                opacity: 1;
+                scale: 1;
+                transition:
+                    opacity 250ms $fill-in,
+                    scale 250ms $fill-in;
+            }
+
+            // Opacity snaps off only once the undraw ends, since a round cap at zero length still leaves a dot.
+            .checkbox-check svg {
+                opacity: 0;
+                transition:
+                    opacity 0s linear 100ms,
+                    stroke-dashoffset 100ms $ease-out;
+            }
+
+            &:has(input:checked) .checkbox-check svg {
+                opacity: 1;
+                transition:
+                    opacity 0s,
+                    stroke-dashoffset 200ms $ease-out;
+            }
+        }
+
+        &:has(input:indeterminate) {
+            .checkbox {
+                border-color: var(--color);
+            }
+
+            .checkbox-group-dash {
+                opacity: 1;
+                stroke-dashoffset: 0;
+                transition:
+                    opacity 0s,
+                    stroke-dashoffset 200ms $ease-out;
+            }
+        }
+    }
+
+    &-count {
+        color: var(--color-muted);
+        flex: 0 0 auto;
+        font-size: var(--font-size-300);
+        font-variant-numeric: tabular-nums;
+    }
+
+    &-dash {
+        color: var(--check-color);
+        height: 70%;
+        inset: 0;
+        margin: auto;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        stroke-dasharray: 1;
+        stroke-dashoffset: 1;
+        stroke-width: 2.25;
+        transition:
+            opacity 0s linear 100ms,
+            stroke-dashoffset 100ms $ease-out;
+        width: 70%;
+    }
+
+    &-description {
+        color: var(--color-muted);
+        font-size: var(--description-font-size);
+        line-height: var(--description-line-height);
+    }
+
+    &-divider {
+        background: var(--border-color);
+        height: 1px;
+        margin: 4px var(--row-padding-horizontal);
+    }
+
+    &-hint {
+        color: var(--color-muted);
+        font-size: var(--font-size-300);
+        margin: 0;
+        padding: var(--padding) var(--row-padding-horizontal) var(--size-200);
+        user-select: none;
+
+        kbd {
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            font-family: inherit;
+            font-size: inherit;
+            padding: 1px 4px;
+        }
+    }
+
+    &-label {
+        color: var(--color);
+        font-size: var(--font-size-400);
+        font-weight: var(--font-weight-400);
+        line-height: var(--label-line-height);
+    }
+
+    &-row {
+        align-items: center;
+        border-radius: var(--row-border-radius);
+        cursor: pointer;
+        display: flex;
+        gap: var(--size-300);
+        min-height: var(--row-min-height);
+        padding: var(--row-padding-vertical) var(--row-padding-horizontal);
+        touch-action: manipulation;
+        transition: background var(--transition-duration) var(--transition-timing-function);
+        user-select: none;
+
+        &:hover {
+            background: var(--row-background-hover);
+        }
+
+        &:active .checkbox-group-box {
+            scale: var(--press-scale);
+        }
+
+        &:has(input:focus-visible) {
+            outline: var(--focus-width) solid var(--color);
+            outline-offset: calc(var(--focus-width) * -1);
+        }
+
+        &--description {
+            align-items: flex-start;
+
+            // Centers the box on the first line of text.
+            .checkbox-group-box {
+                margin-top: 1px;
+            }
+        }
+
+        &--parent .checkbox-group-label {
+            font-weight: var(--font-weight-500);
+        }
+    }
+
+    &-text {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-box {
+            transition: none;
+
+            .checkbox {
+                &::before,
+                &:has(input:checked, input:indeterminate)::before {
+                    scale: 1;
+                    transition: opacity 120ms $ease-out;
+                }
+
+                .checkbox-check svg,
+                &:has(input:checked) .checkbox-check svg {
+                    stroke-dashoffset: 0;
+                    transition: opacity 150ms $ease-out;
+                }
+            }
+
+            &:has(input:indeterminate) .checkbox-group-dash {
+                transition: opacity 150ms $ease-out;
+            }
+        }
+
+        &-dash {
+            stroke-dashoffset: 0;
+            transition: opacity 150ms $ease-out;
+        }
+
+        &-row:active .checkbox-group-box {
+            scale: 1;
+        }
+    }
+}

package/src/components/checkbox-group/scss/variables.scss

@@ -0,0 +1,28 @@
+.checkbox-group {
+    --background: var(--color-white-300);
+    --border-color: var(--color-border-300);
+    --border-radius: calc(var(--row-border-radius) + var(--padding));
+    --box-border-width: 1.5px;
+    --box-shadow:
+        0 0 0 1px oklch(from var(--color-black-500) l c h / 0.06),
+        0 1px 2px oklch(from var(--color-black-500) l c h / 0.06),
+        0 6px 16px -6px oklch(from var(--color-black-500) l c h / 0.12);
+    --box-size: var(--size-500);
+    --check-color: var(--color-white-300);
+    --color: var(--color-text-500);
+    --color-muted: var(--color-text-300);
+    --description-font-size: calc(var(--font-size-400) * 0.875);
+    --description-line-height: 1.43;
+    --focus-width: var(--border-width-500);
+    --label-line-height: 1.4;
+    --padding: 6px;
+    --press-scale: 0.96;
+    --row-background-hover: var(--color-grey-400);
+    --row-border-radius: 14px;
+    --row-min-height: 44px;
+    --row-padding-horizontal: var(--size-300);
+    --row-padding-vertical: var(--size-200);
+    --transition-duration: 150ms;
+    --transition-timing-function: ease-out;
+    --width: min(360px, 100%);
+}

package/src/components/clipboard/copy.ts

@@ -4,6 +4,8 @@ import write from './write';
 
 
 type A = Attributes & {
+    ondisconnect?: never;
+    onclick?: never;
     timeout?: number;
     value: string;
 };
@@ -12,44 +14,36 @@ type A = Attributes & {
 export default component<A, (state: { copied: boolean, failed: boolean }) => Renderable<unknown>>(
     ({ timeout = 3000, value, ...attributes }, content) => {
         let state = reactive({ copied: false, failed: false }),
-            timer: ReturnType<typeof setTimeout> | undefined,
-            connected = true;
+            reset = () => {
+                clearTimeout(timer);
+                state.copied = false;
+                state.failed = false;
+            },
+            timer: ReturnType<typeof setTimeout> | undefined;
 
         return html`
-            <button
-                type='button'
+            <div
                 ${attributes}
                 ${{
-                    onconnect: () => { connected = true; },
-                    ondisconnect: () => {
-                        connected = false;
-                        clearTimeout(timer);
-                        state.copied = false;
-                    },
-                    onclick: async (event: MouseEvent) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-
-                        let copied = await write(value);
-
-                        if (!connected) {
-                            return;
-                        }
+                    ondisconnect: reset,
+                    onclick: async (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        reset();
 
-                        clearTimeout(timer);
-                        state.copied = copied;
+                        state.copied = await write(value);
 
-                        if (!copied) {
+                        if (!state.copied) {
                             state.failed = true;
-                            return;
                         }
 
-                        timer = setTimeout(() => { state.copied = false; }, timeout);
+                        timer = setTimeout(reset, timeout);
                     }
                 }}
             >
                 ${() => content(state)}
-            </button>
+            </div>
         `;
     }
 );

package/src/components/clipboard/index.ts

@@ -1,7 +1,6 @@
 import copy from './copy';
-import onclick from './onclick';
 import write from './write';
 
 
-export default { copy, onclick, write };
-export { copy, onclick, write };
+export default { copy, write };
+export { copy, write };