Kaas

2024-12-12 16:40:13 +01:00 · 2024-12-12 16:40:13 +01:00 · b23db1d5a8
commit b23db1d5a8
parent d219ae1f9a
21 changed files with 579 additions and 818 deletions
--- a/src/components/table/index.tsx
+++ b/src/components/table/index.tsx
@ -1,5 +1,5 @@

-export type { Column } from './table';
+export type { Column, TableApi } from './table';
 export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode } from './dataset';
 export { SelectionMode, Table } from './table';
 export { createDataSet, toSorted, toGrouped } from './dataset';
--- a/src/components/table/table.module.css
+++ b/src/components/table/table.module.css
@ -1,53 +1,59 @@
 .table {
    --shadow-color: oklch(0 0 0 / .05);
-    --shadow: var(--shadow-color) 0 .5em 2em;
+    --shadow: var(--shadow-color) 0 0 2em;

    position: relative;
    display: block grid;
    grid-template-columns: repeat(var(--columns), minmax(max-content, auto));
    align-content: start;
+    block-size: 100%;
    padding-inline: 1px;
    margin-inline: -1px;
    overflow: auto;
    background-color: inherit;
    isolation: isolate;

-    block-size: 100%;
-
-    & input[type="checkbox"] {
-        margin: .1em;
-    }
-
    & .cell {
        display: block grid;
+        align-items: center;
        padding: var(--padding-m);
        border: 1px solid transparent;
        border-radius: var(--radii-m);
        background: inherit;
        white-space: nowrap;
+    }

-        &:first-of-type {
-            position: sticky;
-            inset-inline-start: 1px;
-            padding-inline-start: calc(var(--depth) * 1em + var(--padding-m));
-            z-index: 1;
+    & :is(.cell:first-child, .checkbox + .cell) {
+        position: sticky;
+        inset-inline-start: 1px;
+        padding-inline-start: calc(var(--depth) * 1em + var(--padding-m));
+        z-index: 1;

-            &::after {
-                content: '';
-                position: absolute;
-                inset-inline-start: 100%;
-                inset-block-start: -2px;
-                display: block;
-                inline-size: 2em;
-                block-size: calc(3px + 100%);
-                animation: column-scroll-shadow linear both;
-                animation-timeline: scroll(inline);
-                animation-range: 0 2em;
-                pointer-events: none;
-            }
+        &::after {
+            content: '';
+            position: absolute;
+            inset-inline-start: 100%;
+            inset-block-start: -2px;
+            display: block;
+            inline-size: 2em;
+            block-size: calc(3px + 100%);
+            animation: column-scroll-shadow linear both;
+            animation-timeline: scroll(inline);
+            animation-range: 0 2em;
+            pointer-events: none;
        }
    }

+    & .checkbox {
+        display: grid;
+        place-items: center;
+        position: sticky;
+        inset-inline-start: 1px;
+        background: inherit;
+        padding: var(--padding-m);
+        z-index: 1;
+    }
+
    & :is(.header, .main, .footer) {
        grid-column: 1 / -1;
        display: block grid;
@ -55,42 +61,6 @@
        background-color: inherit;
    }

-    & .header {
-        position: sticky;
-        inset-block-start: 0;
-        border-block-end: 1px solid var(--surface-300);
-        z-index: 2;
-        animation: header-scroll-shadow linear both;
-        animation-timeline: scroll();
-        animation-range: 0 2em;
-        font-weight: var(--weight-bold);
-
-        & > aside {
-            position: sticky;
-            inset-inline-start: 0;
-            background: inherit;
-            padding: var(--padding-m);
-            z-index: 1;
-        }
-
-        & > .cell {
-            grid-auto-flow: column;
-            justify-content: space-between;
-
-            & > svg {
-                transition: opacity .15s ease-in-out;
-            }
-
-            &:not(.sorted):not(:hover) > svg {
-                opacity: 0;
-            }
-        }
-    }
-
-    & .main {
-        background-color: inherit;
-    }
-
    & .row {
        --alpha: 0;
        grid-column: 1 / -1;
@ -100,11 +70,7 @@
        background-color: inherit;
        background-image: linear-gradient(0deg, oklch(from var(--info) l c h / var(--alpha)), oklch(from var(--info) l c h / var(--alpha)));

-        /* & > :is(.cell, aside) {
-            background-image: linear-gradient(0deg, oklch(from var(--info) l c h / var(--alpha)), oklch(from var(--info) l c h / var(--alpha)));
-        } */
-
-        &:has(> aside > :checked) {
+        &:has(> .checkbox > :checked) {
            --alpha: .1;
            border-color: var(--info);

@ -112,13 +78,11 @@
                font-variation-settings: 'GRAD' 1000;
            }

-            /* Remove the top border when directly preceded by a selected row */
-            & + :has(> aside > :checked) {
+            & + :has(> .checkbox > :checked) {
                border-block-start-color: transparent;
            }

-            /* Remove the top border when directly succeeded by a selected row */
-            &:has(+ .row > aside > :checked) {
+            &:has(+ .row > .checkbox > :checked) {
                border-block-end-color: transparent;
            }
        }
@ -126,16 +90,52 @@
        &:hover {
            --alpha: .2 !important;
        }
+    }

-        & > aside {
-            position: sticky;
-            inset-inline-start: 1px;
-            background: inherit;
-            padding: var(--padding-m);
-            z-index: 1;
+    & .header {
+        position: sticky;
+        inset-block-start: 0;
+        border-block-end: 1px solid var(--surface-300);
+        z-index: 2;
+        animation: header-scroll-shadow linear both;
+        animation-timeline: scroll();
+        animation-range: 0 2em;
+        font-weight: var(--weight-bold);
+
+        & > tr {
+            all: inherit;
+            display: contents;
+
+            & > .cell {
+                grid-auto-flow: column;
+                justify-content: space-between;
+
+                & > svg {
+                    transition: opacity .15s ease-in-out;
+                }
+
+                &:not(.sorted):not(:hover) > svg {
+                    opacity: 0;
+                }
+            }
        }
    }

+    & .main {
+        background-color: inherit;
+    }
+
+    & .footer {
+        position: sticky;
+        inset-block-end: 0;
+        border-block-start: 1px solid var(--surface-300);
+        z-index: 2;
+        animation: header-scroll-shadow linear both reverse;
+        animation-timeline: scroll();
+        animation-range: calc(100% - 2em) 100%;
+        font-weight: var(--weight-bold);
+    }
+
    & details {
        display: contents;
        background-color: inherit;
@ -177,9 +177,8 @@
    &.selectable {
        grid-template-columns: 2em repeat(var(--columns), minmax(max-content, auto));

-        & .cell:first-of-type {
+        & :is(.cell:first-child, .checkbox + .cell) {
            inset-inline-start: 2em;
-            /* inset-inline-start: calc(2em + var(--padding-m) * var(--depth)); */
        }

        & details > summary {
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@ -1,9 +1,9 @@
 import { Accessor, createContext, createEffect, createMemo, createSignal, For, JSX, Match, Show, Switch, useContext } from "solid-js";
 import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
 import { DataSetRowNode, DataSetGroupNode, DataSetNode, createDataSet, toSorted, toGrouped } from './dataset';
-import css from './table.module.css';
 import { createStore } from "solid-js/store";
 import { FaSolidSort, FaSolidSortDown, FaSolidSortUp } from "solid-icons/fa";
+import css from './table.module.css';

 selectable

@ -11,10 +11,12 @@ export type Column<T> = {
    id: keyof T,
    label: string,
    sortable?: boolean,
+    group?: string,
    readonly groupBy?: (rows: DataSetRowNode<T>[]) => DataSetNode<T>[],
 };

 type SelectionItem<T> = { key: string, value: Accessor<T>, element: WeakRef<HTMLElement> };
+export type CellEditors<T extends Record<string, any>> = { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element };

 export interface TableApi<T extends Record<string, any>> {
    readonly selection: Accessor<SelectionItem<T>[]>;
@ -31,7 +33,7 @@ const TableContext = createContext<{
    readonly selectionMode: Accessor<SelectionMode>,
    readonly groupBy: Accessor<string | undefined>,
    readonly sort: Accessor<{ by: string, reversed?: boolean } | undefined>,
-    readonly cellRenderers: Accessor<Record<string, (cell: { key: string, value: any }) => JSX.Element>>,
+    readonly cellRenderers: Accessor<CellEditors<any>>,

    setSort(setter: (current: { by: string, reversed?: boolean } | undefined) => { by: string, reversed: boolean } | undefined): void;
 }>();
@ -50,6 +52,7 @@ export enum SelectionMode {
 }
 type TableProps<T extends Record<string, any>> = {
    class?: string,
+    summary?: string,
    rows: T[],
    columns: Column<T>[],
    groupBy?: keyof T,
@ -58,7 +61,7 @@ type TableProps<T extends Record<string, any>> = {
        reversed?: boolean,
    },
    selectionMode?: SelectionMode,
-    children?: { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element },
+    children?: CellEditors<T>,
    api?: (api: TableApi<T>) => any,
 };

@ -76,7 +79,7 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
    const columns = createMemo<Column<T>[]>(() => props.columns ?? []);
    const selectionMode = createMemo(() => props.selectionMode ?? SelectionMode.None);
    const groupBy = createMemo(() => props.groupBy as string | undefined);
-    const cellRenderers = createMemo(() => props.children ?? {});
+    const cellRenderers = createMemo<CellEditors<T>>(() => props.children ?? {});

    const context = {
        rows,
@ -96,12 +99,12 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
        <SelectionProvider selection={setSelection} multiSelect={props.selectionMode === SelectionMode.Multiple}>
            <Api api={props.api} />

-            <InnerTable class={props.class} rows={rows()} />
+            <InnerTable class={props.class} summary={props.summary} rows={rows()} />
        </SelectionProvider>
    </TableContext.Provider>;
 };

-type InnerTableProps<T extends Record<string, any>> = { class?: string, rows: T[] };
+type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: T[] };

 function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
    const table = useTable();
@ -126,16 +129,28 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
        return dataset;
    });

-    return <section class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}>
+    return <table class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}>
+        <Show when={props.summary}>{
+            summary => <caption>{summary()}</caption>
+        }</Show>
+
+        <Groups />
        <Head />

-        <main class={css.main}>
+        <tbody class={css.main}>
            <For each={nodes()}>{
                node => <Node node={node} depth={0} />
            }</For>
+        </tbody>

-        </main>
-    </section>
+        {/* <Show when={true}>
+            <tfoot class={css.footer}>
+                <tr>
+                    <td colSpan={columnCount()}>FOOTER</td>
+                </tr>
+            </tfoot>
+        </Show> */}
+    </table>
 };

 function Api<T extends Record<string, any>>(props: { api: undefined | ((api: TableApi<T>) => any) }) {
@ -163,57 +178,71 @@ function Api<T extends Record<string, any>>(props: { api: undefined | ((api: Tab
    return null;
 };

-function Head<T extends Record<string, any>>(props: {}) {
+function Groups(props: {}) {
+    const table = useTable();
+
+    const groups = createMemo(() => {
+        return new Set(table.columns().map(c => c.group).filter(g => g !== undefined)).values().toArray();
+    });
+
+    return <For each={groups()}>{
+        group => <colgroup span="1" data-group-name={group} />
+    }</For>
+}
+
+function Head(props: {}) {
    const table = useTable();
    const context = useSelection();

-    return <header class={css.header}>
-        <Show when={table.selectionMode() !== SelectionMode.None}>
-            <aside>
-                <input
-                    type="checkbox"
-                    checked={context.selection().length > 0 && context.selection().length === context.length()}
-                    indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
-                    on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
-                />
-            </aside>
-        </Show>
+    return <thead class={css.header}>
+        <tr>
+            <Show when={table.selectionMode() !== SelectionMode.None}>
+                <th class={css.checkbox}>
+                    <input
+                        type="checkbox"
+                        checked={context.selection().length > 0 && context.selection().length === context.length()}
+                        indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
+                        on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
+                    />
+                </th>
+            </Show>

-        <For each={table.columns()}>{
-            ({ id, label, sortable }) => {
-                const sort = createMemo(() => table.sort());
-                const by = String(id);
+            <For each={table.columns()}>{
+                ({ id, label, sortable }) => {
+                    const sort = createMemo(() => table.sort());
+                    const by = String(id);

-                const onPointerDown = (e: PointerEvent) => {
-                    if (sortable !== true) {
-                        return;
-                    }
-
-                    table.setSort(current => {
-                        if (current?.by !== by) {
-                            return { by, reversed: false };
+                    const onPointerDown = (e: PointerEvent) => {
+                        if (sortable !== true) {
+                            return;
                        }

-                        if (current.reversed === true) {
-                            return undefined;
-                        }
+                        table.setSort(current => {
+                            if (current?.by !== by) {
+                                return { by, reversed: false };
+                            }

-                        return { by, reversed: true };
-                    });
-                };
+                            if (current.reversed === true) {
+                                return undefined;
+                            }

-                return <span class={`${css.cell} ${sort()?.by === by ? css.sorted : ''}`} onpointerdown={onPointerDown}>
-                    {label}
+                            return { by, reversed: true };
+                        });
+                    };

-                    <Switch>
-                        <Match when={sortable && sort()?.by !== by}><FaSolidSort /></Match>
-                        <Match when={sortable && sort()?.by === by && sort()?.reversed !== true}><FaSolidSortUp /></Match>
-                        <Match when={sortable && sort()?.by === by && sort()?.reversed === true}><FaSolidSortDown /></Match>
-                    </Switch>
-                </span>;
-            }
-        }</For>
-    </header>;
+                    return <th scope="col" class={`${css.cell} ${sort()?.by === by ? css.sorted : ''}`} onpointerdown={onPointerDown}>
+                        {label}
+
+                        <Switch>
+                            <Match when={sortable && sort()?.by !== by}><FaSolidSort /></Match>
+                            <Match when={sortable && sort()?.by === by && sort()?.reversed !== true}><FaSolidSortUp /></Match>
+                            <Match when={sortable && sort()?.by === by && sort()?.reversed === true}><FaSolidSortDown /></Match>
+                        </Switch>
+                    </th>;
+                }
+            }</For>
+        </tr>
+    </thead>;
 };

 function Node<T extends Record<string, any>>(props: { node: DataSetNode<T>, depth: number, groupedBy?: keyof T }) {
@ -235,17 +264,17 @@ function Row<T extends Record<string, any>>(props: { key: string, value: T, dept
    const values = createMemo(() => Object.entries(props.value));
    const isSelected = context.isSelected(props.key);

-    return <div class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}>
+    return <tr class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}>
        <Show when={table.selectionMode() !== SelectionMode.None}>
-            <aside>
+            <th class={css.checkbox}>
                <input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} />
-            </aside>
+            </th>
        </Show>

        <For each={values()}>{
-            ([k, value]) => <div class={css.cell}>{table.cellRenderers()[k]?.({ key: `${props.key}.${k}`, value }) ?? value}</div>
+            ([k, value]) => <td class={css.cell}>{table.cellRenderers()[k]?.({ value }) ?? value}</td>
        }</For>
-    </div>;
+    </tr>;
 };

 function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: DataSetNode<T>[], depth: number }) {