@ims360/svelte-ivory 0.0.6 → 0.0.8

package/src/lib/components/table/plugins/search.svelte.ts

@@ -0,0 +1,75 @@
+import { SvelteSet } from 'svelte/reactivity';
+import type { TablePlugin, TableRow } from '../table/table.svelte';
+
+interface SearchConfig<T extends TableRow<T>> {
+    search: string;
+    matches: (row: T) => boolean;
+}
+
+export function searchPlugin<T extends TableRow<T>>(conf: SearchConfig<T>): TablePlugin<T> {
+    let prevSearch: string | undefined = undefined;
+    let expandedBeforeSearch: Set<string> | undefined = undefined;
+
+    const middleware: TablePlugin<T> = (state) => {
+        // ensure that the state before the search is saved and restored when the user types
+        if (prevSearch && !conf.search && expandedBeforeSearch) {
+            prevSearch = conf.search;
+            return {
+                ...state,
+                expanded: expandedBeforeSearch
+            };
+        }
+
+        if (!conf.search) return state;
+
+        // ensure we store the state before the we started searching
+        if (conf.search && !prevSearch) {
+            expandedBeforeSearch = state.expanded;
+        }
+
+        // figure out which nodes to expand and hide
+        const { expanded, hidden } = search(state.data, conf.search, conf.matches);
+
+        prevSearch = conf.search;
+        return {
+            data: state.data.filter((d) => !hidden.has(d.id)),
+            expanded: new SvelteSet(expanded)
+        };
+    };
+    return middleware;
+}
+
+/** collapses everything that doesnt match the searchString expands direct search hit */
+export const search = <T extends TableRow<T>>(
+    nodes: T[],
+    searchString: string,
+    stringsMatch: (a: T, b: string) => boolean
+) => {
+    const search = searchString.trim().toLowerCase();
+    const hidden = new Set<string>();
+    const expanded = new Set<string>();
+
+    const recursor = (node: T, childOfMatch = false): boolean => {
+        const matches = stringsMatch(node, search);
+
+        const intermediateNode =
+            node.children?.some((c) => recursor(c, matches || childOfMatch)) ?? false;
+
+        if (intermediateNode) {
+            console.log('intermediateNode', node);
+
+            expanded.add(node.id);
+        } else if (!childOfMatch) {
+            hidden.add(node.id);
+        }
+
+        return matches || intermediateNode;
+    };
+
+    nodes.forEach((n) => recursor(n));
+
+    return {
+        hidden,
+        expanded
+    };
+};

package/src/lib/components/table/table/Column.svelte

@@ -0,0 +1,78 @@
+<script lang="ts" module>
+    import clsx from 'clsx';
+    import { type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import type { ColumnConfig } from './column.svelte';
+    import { getTableContext } from './Table.svelte';
+
+    let defaultClasses = $state<ClassValue>();
+
+    export function setClasses(c: ClassValue) {
+        defaultClasses = c;
+    }
+
+    export interface ColumnProps extends ColumnConfig {
+        class?: ClassValue;
+        /** If the type is incorrect pass the "row" property with the right type */
+        children: Snippet;
+        onclick?: (e: Event) => void | Promise<void>;
+        /** Cannot be used with resizable columns*/
+        ignoreWidth?: boolean;
+    }
+</script>
+
+<script lang="ts">
+    let {
+        class: clazz = 'py-2 flex flex-row items-center',
+        children,
+        onclick,
+        ignoreWidth = false,
+        // ColumnConfig
+        resizable = true,
+        ...props
+    }: ColumnProps = $props();
+
+    // Register the new column if this is the first table row that was rendered
+    const table = getTableContext();
+    const column = table.registerColumn({ resizable, ...props });
+    const allowClicking = $derived(!!onclick);
+
+    // passes updated props to the column
+    $effect(() => {
+        column.updateConfig({ resizable, ...props });
+    });
+
+    // this must be separate to the above effect, since otherwise the width would be reset on every scroll
+    $effect(() => {
+        if (!column.resizable) column.resize(props.width);
+    });
+
+    function onClick(e: MouseEvent) {
+        e.stopPropagation();
+        e.preventDefault();
+        onclick?.(e);
+    }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+    this={allowClicking ? 'button' : 'div'}
+    onclick={allowClicking ? onClick : undefined}
+    type={onclick ? 'button' : undefined}
+    style={ignoreWidth ? '' : `width: ${column.width}px !important;`}
+    class={twMerge(
+        clsx(
+            'flex shrink-0 flex-row items-stretch justify-start truncate',
+            !ignoreWidth && [
+                'border-r border-transparent',
+                column.dragging && 'border-primary-400-600',
+                !column.dragging && column.hovering && 'border-surface-300-700'
+            ],
+            defaultClasses,
+            clazz
+        )
+    )}
+>
+    {@render children()}
+</svelte:element>

package/src/lib/components/table/table/ColumnHead.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+    import { getContext, setContext, type Snippet } from 'svelte';
+    import { resize } from '../../../utils/actions';
+    import type { Column } from './column.svelte';
+
+    const CONTEXT = {};
+    function setColumnHeadContext(column: Column) {
+        setContext(CONTEXT, column);
+    }
+
+    export function getColumnHeadContext(): Column {
+        return getContext(CONTEXT);
+    }
+</script>
+
+<script lang="ts">
+    type Props = {
+        column: Column;
+        children: Snippet;
+    };
+
+    let { column, children }: Props = $props();
+    setColumnHeadContext(column);
+
+    let target = $state<HTMLElement | undefined>();
+    let dragging = $state(false);
+
+    const onHoverStart = () => {
+        column.hovering = true;
+    };
+
+    const onHoverEnd = () => {
+        column.hovering = false;
+    };
+
+    const onResize = (mouseX: number) => {
+        if (!target) return;
+        let newWidth = mouseX - target.getBoundingClientRect().left;
+        column.resize(newWidth + 2);
+    };
+
+    const onDragging = (d: boolean) => {
+        dragging = d;
+        column.dragging = d;
+    };
+</script>
+
+<div
+    class={['group flex shrink-0 flex-row justify-start']}
+    bind:this={target}
+    style="width: {column.width}px;"
+>
+    {@render children()}
+    {#if column.resizable}
+        <button
+            type="button"
+            class={[
+                'ml-auto flex h-full w-4 shrink-0 translate-x-px cursor-col-resize justify-center border-r bg-inherit',
+                dragging
+                    ? '!border-primary-400-600'
+                    : 'group-hover:!border-surface-300-700 border-transparent'
+            ]}
+            use:resize={{ resized: onResize, dragging: onDragging }}
+            onmouseenter={onHoverStart}
+            onmouseleave={onHoverEnd}
+            onfocusin={onHoverStart}
+            onfocusout={onHoverEnd}
+            tabindex="-1"
+            aria-label="Resize column"
+        >
+        </button>
+    {/if}
+</div>

package/src/lib/components/table/table/Row.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+    import clsx from 'clsx';
+    import { type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+
+    let defaultClasses = $state<ClassValue>();
+
+    export function setClasses(c: ClassValue) {
+        defaultClasses = c;
+    }
+
+    export interface Props {
+        class?: ClassValue;
+        onclick?: () => void;
+        href?: string;
+        children: Snippet;
+    }
+</script>
+
+<script lang="ts">
+    let {
+        class: clazz = 'hover:bg-surface-950-50/10 transition-colors',
+        onclick,
+        href,
+        children
+    }: Props = $props();
+
+    const elementProps: {
+        this: 'button' | 'a' | 'div';
+        type?: 'button';
+        onclick?: () => void;
+        href?: string;
+    } = $derived.by(() => {
+        if (onclick) {
+            return {
+                this: 'button',
+                type: 'button',
+                onclick
+            };
+        } else if (href) {
+            return {
+                this: 'a',
+                href: href
+            };
+        } else {
+            return {
+                this: 'div'
+            };
+        }
+    });
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+    this={elementProps.this}
+    {...elementProps}
+    class={twMerge(
+        clsx(
+            'flex h-full min-w-full grow flex-row items-stretch gap-2 overflow-hidden pr-4 pl-2',
+            defaultClasses,
+            clazz
+        )
+    )}
+>
+    {@render children()}
+</svelte:element>

package/src/lib/components/table/table/Table.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" module>
+    import { ChevronRight } from '@lucide/svelte';
+    import clsx from 'clsx';
+    import { getContext, setContext, type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import Column from './Column.svelte';
+    import ColumnHead from './ColumnHead.svelte';
+    import Row from './Row.svelte';
+    import { TableController, type TablePlugin, type TableRow } from './table.svelte';
+    import VirtualList from './VirtualList.svelte';
+
+    export interface TableProps<T extends { id: string }> {
+        class?: ClassValue;
+        data: T[];
+        onclick?: (row: T) => void;
+        href?: (row: T) => string | undefined;
+        rowHeight?: number;
+    }
+
+    const TABLE_CONTEXT = {};
+    function setTableContext<T extends { id: string; children?: T[] | undefined }>(
+        table: TableController<T>
+    ) {
+        setContext(TABLE_CONTEXT, table);
+    }
+
+    export function getTableContext<
+        T extends { id: string; children?: T[] | undefined }
+    >(): TableController<T> {
+        return getContext<TableController<T>>(TABLE_CONTEXT);
+    }
+</script>
+
+<script lang="ts" generics="T extends TableRow<T>">
+    interface Props<TI extends { id: string }> extends TableProps<TI> {
+        /** Renders the rows */
+        children: Snippet<[{ row: TI; nestingLevel?: number; index: number }]>;
+        /** Add columns in front of the tree-indicator */
+        firstColumn?: Snippet<[{ row: TI }]>;
+        rowClass?: ClassValue;
+        headerClass?: ClassValue;
+        plugins?: TablePlugin<TI>[];
+        controller?: TableController<TI>;
+    }
+
+    let {
+        class: clazz,
+        data,
+        children: passedChildren,
+        firstColumn,
+        rowClass,
+        headerClass,
+        rowHeight = 64,
+        onclick,
+        href,
+        plugins = [],
+        controller: table = new TableController()
+    }: Props<T> = $props();
+
+    $effect(() => {
+        table.refresh({
+            data,
+            plugins
+        });
+    });
+
+    setTableContext(table);
+    const treeIndicatorId = crypto.randomUUID();
+</script>
+
+<VirtualList
+    data={table.results.entries}
+    class={['border-transparent', clazz, 'flex flex-col overflow-hidden']}
+    bind:b_scrollTop={table.scrollTop}
+    {rowHeight}
+>
+    {#snippet header()}
+        <div
+            class={twMerge(
+                clsx(
+                    'flex w-fit min-w-full flex-row gap-2 border-b border-inherit pr-4 pl-2',
+                    headerClass
+                )
+            )}
+        >
+            {#each table.columns as column (column.id)}
+                <ColumnHead {column}>
+                    {#if typeof column.header === 'function'}
+                        {@render column.header()}
+                    {:else}
+                        <div
+                            class="flex grow flex-row items-center justify-start gap-4 py-2 text-start select-none"
+                        >
+                            {column.header}
+                        </div>
+                    {/if}
+                </ColumnHead>
+            {/each}
+        </div>
+    {/snippet}
+    {#snippet children({ row: { node, id, nestingLevel }, index })}
+        <Row
+            onclick={onclick ? () => onclick(node) : undefined}
+            href={href?.(node)}
+            class={rowClass}
+        >
+            {@render firstColumn?.({ row: node })}
+            <Column
+                id={treeIndicatorId}
+                resizable={false}
+                header=""
+                onclick={() => {
+                    table.toggleExpansion(node.id);
+                }}
+                ignoreWidth={table.results.someHaveChildren}
+                width={table.results.someHaveChildren ? 24 : 0}
+                minWidth={0}
+            >
+                <div
+                    class="flex h-full items-center justify-end"
+                    style="width: calc(var(--spacing) * {nestingLevel * 4} + 24px);"
+                >
+                    {#if node.children}
+                        <ChevronRight
+                            class={[
+                                'ml-auto aspect-square shrink-0 transition-transform duration-100',
+                                table.expanded.has(id) && 'rotate-90'
+                            ]}
+                        />
+                    {/if}
+                </div>
+            </Column>
+            {@render passedChildren?.({ row: node, nestingLevel, index })}
+        </Row>
+    {/snippet}
+</VirtualList>

package/src/lib/components/table/table/VirtualList.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" generics="T extends { id: string }">
+    import clsx from 'clsx';
+    import { onMount, type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+
+    type Props<T> = {
+        class?: ClassValue;
+        data: T[];
+        children: Snippet<[{ row: T; domIndex: number; index: number }]>;
+        header?: Snippet;
+        b_scrollTop?: number;
+        rowHeight: number;
+        overscan?: number;
+    };
+
+    let {
+        class: clazz,
+        data,
+        children,
+        header,
+        b_scrollTop = $bindable(0),
+        rowHeight,
+        overscan = 2
+    }: Props<T> = $props();
+
+    let scroll_top = $state(b_scrollTop);
+    let scroll_left = $state(0);
+    let header_width = $state(0);
+    let viewport = $state<HTMLElement>();
+    let viewport_height = $state(0);
+
+    const start = $derived(Math.max(0, Math.floor(scroll_top / rowHeight) - overscan));
+
+    const end = $derived(
+        Math.min(data.length, Math.ceil((scroll_top + viewport_height) / rowHeight) + overscan)
+    );
+
+    const visible = $derived(
+        data.slice(start, end).map((data, i) => {
+            return { index: i + start, data };
+        })
+    );
+
+    const top = $derived(start * rowHeight);
+    const bottom = $derived((data.length - end) * rowHeight);
+
+    function onscroll() {
+        if (!viewport) return;
+        scroll_top = viewport.scrollTop;
+        scroll_left = viewport.scrollLeft;
+        b_scrollTop = scroll_top;
+    }
+
+    onMount(() => {
+        if (!viewport) return;
+        viewport.scrollTop = b_scrollTop;
+    });
+</script>
+
+<div
+    class={twMerge(
+        clsx(['scroll relative flex grow flex-col overflow-hidden border-inherit', clazz])
+    )}
+>
+    {#if header}
+        <div class="h-fit w-full border-inherit">
+            <div
+                class="w-fit min-w-full border-inherit"
+                style="transform: translateX(-{scroll_left}px);"
+                bind:clientWidth={header_width}
+            >
+                {@render header?.()}
+            </div>
+        </div>
+    {/if}
+    <div
+        class="flex !min-w-full grow overflow-auto [scrollbar-gutter:stable]"
+        bind:this={viewport}
+        bind:offsetHeight={viewport_height}
+        {onscroll}
+    >
+        <div
+            class="flex h-fit shrink-0 flex-col"
+            style="padding-top: {top}px; padding-bottom: {bottom}px; min-width: max(100%, {header_width}px) !important;"
+        >
+            {#each visible as row, i (row.data.id)}
+                <virtual-list-row
+                    class="flex w-full shrink-0 grow flex-row items-center overflow-hidden"
+                    style="height: {rowHeight}px !important;"
+                >
+                    {@render children({
+                        row: row.data,
+                        domIndex: i,
+                        index: row.index
+                    })}
+                </virtual-list-row>
+            {/each}
+        </div>
+    </div>
+</div>

package/src/lib/components/table/table/column.svelte.ts

@@ -0,0 +1,59 @@
+import type { Snippet } from 'svelte';
+
+const DEFAULT_WIDTH = 250;
+const MINIMAL_WIDTH_MULTIPLIER = 0.5;
+
+export interface ColumnConfig {
+    id: string;
+    width?: number;
+    minWidth?: number;
+    resizable?: boolean;
+    header: Snippet | string;
+}
+
+export class Column {
+    id = $state('');
+    header = $state<Snippet | string>('');
+
+    // resizing
+    width = $state<number>();
+    private minimalWidth = $state(DEFAULT_WIDTH);
+    hovering = $state(false);
+    resizable = $state(false);
+    dragging = $state(false);
+
+    constructor(conf: ColumnConfig) {
+        this.id = conf.id;
+        this.updateConfig(conf);
+
+        $effect(() => {
+            this.updateConfig(conf);
+        });
+    }
+
+    updateConfig(conf: ColumnConfig) {
+        if (conf.minWidth !== undefined) {
+            this.minimalWidth = conf.minWidth;
+        } else {
+            this.minimalWidth = (conf.width ?? DEFAULT_WIDTH) * MINIMAL_WIDTH_MULTIPLIER;
+        }
+        if (this.width === undefined) {
+            const newWidth = conf.width ?? DEFAULT_WIDTH;
+            this.width = newWidth;
+        }
+        if (!this.header) this.header = conf.header;
+        const newResizable = conf.resizable ?? false;
+        if (newResizable !== this.resizable) {
+            this.resizable = newResizable;
+        }
+    }
+
+    resize(newWidth?: number) {
+        if (newWidth === undefined) return;
+        if (newWidth < this.minimalWidth) {
+            this.width = this.minimalWidth;
+        } else {
+            this.width = newWidth;
+        }
+    }
+}

package/src/lib/components/table/table/index.ts

@@ -0,0 +1,15 @@
+import Column from './Column.svelte';
+import Row from './Row.svelte';
+import TableComponent, { getTableContext } from './Table.svelte';
+import { TableController } from './table.svelte';
+
+const Table = Object.assign(
+    TableComponent<{ id: string }> as typeof TableComponent<{ id: string }>,
+    {
+        Column,
+        Row,
+        getContext: getTableContext,
+        Controller: TableController
+    }
+);
+export default Table;