@ims360/svelte-ivory 0.0.4 → 0.0.7

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;

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

@@ -0,0 +1,124 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { Column, type ColumnConfig } from './column.svelte';
+
+export type TableRow<T> = { id: string; children?: T[] };
+export type TablePlugin<T extends TableRow<T>> = (state: TableState<T>) => TableState<T>;
+
+export interface TableConfig<T extends TableRow<T>> {
+    data: T[];
+    plugins?: TablePlugin<T>[];
+}
+
+export interface TableState<T extends TableRow<T>> {
+    data: T[];
+    expanded: Set<string>;
+}
+
+interface TreeRow<T> {
+    node: T;
+    nestingLevel: number;
+    id: string;
+}
+
+export class TableController<T extends TableRow<T>> {
+    columns = $state<Column[]>([]);
+    data = $state<T[]>([]);
+    expanded: Set<string> = new SvelteSet<string>();
+    scrollTop = $state(0);
+
+    readonly results = $derived(treeWalker(this.data, this.expanded));
+
+    refresh(conf: TableConfig<T>) {
+        let intitalState: TableState<T> = {
+            data: structuredClone(conf.data),
+            expanded: this.expanded
+        };
+
+        for (const plugin of conf.plugins ?? []) {
+            intitalState = plugin(intitalState);
+        }
+
+        this.data = intitalState.data;
+        this.expanded = new SvelteSet(intitalState.expanded);
+    }
+
+    registerColumn(config: ColumnConfig): Column {
+        // only register a column once
+        let existingColumn: Column | undefined = undefined;
+        for (const column of this.columns) {
+            if (column.id !== config.id) continue;
+            existingColumn = column;
+            break;
+        }
+        if (existingColumn) return existingColumn;
+        const col = new Column(config);
+        this.columns.push(col);
+        return col;
+    }
+
+    toggleExpansion(id: string) {
+        if (this.expanded.has(id)) this.expanded.delete(id);
+        else this.expanded.add(id);
+    }
+}
+
+/** Walks though a tree strucure and turns it into a flat list, needed since the `VirtualList` needs a list, not a tree */
+function treeWalker<T extends TableRow<T>>(data: T[], expanded: Set<string>) {
+    const stack: { node: T; nestingLevel: number }[] = [];
+
+    // push the root nodes of the trees onto the stack
+    for (let i = 0; i < data.length; i++) {
+        stack.push({
+            node: data[data.length - i - 1],
+            nestingLevel: 0
+        });
+    }
+
+    const entries: TreeRow<T>[] = []; // the final result
+
+    let someHaveChildren = false; // used to determine whether to show the tree utility buttons
+    let maxNestingLevel = 0;
+    while (stack.length !== 0) {
+        const stackEntry = stack.pop();
+        if (!stackEntry) break;
+
+        const { node, nestingLevel } = stackEntry;
+        const children = node.children;
+
+        if (children && children.length > 0) {
+            someHaveChildren = true;
+            // only show the children of expanded elements
+            if (expanded.has(node.id)) {
+                maxNestingLevel = Math.max(maxNestingLevel, nestingLevel + 1);
+                stack.push(
+                    ...children
+                        .map((c) => ({
+                            node: c,
+                            nestingLevel: nestingLevel + 1
+                        }))
+                        .reverse()
+                );
+            }
+        }
+
+        entries.push({
+            id: node.id,
+            node,
+            nestingLevel
+        });
+    }
+
+    return {
+        entries,
+        someHaveChildren,
+        maxNestingLevel
+    };
+}
+
+export function getAllIds<T extends TableRow<T>>(...nodes: T[]): string[] {
+    const ids = nodes.map((n) => n.id);
+    for (const node of nodes) {
+        ids.push(...getAllIds(...(node.children ?? [])));
+    }
+    return ids;
+}

package/src/lib/utils/actions/index.ts

@@ -1,5 +1,6 @@
 export { clickOutside } from './clickOutside';
 export { focusTrap } from './focusTrap';
 export { portal } from './portal';
+export { resize } from './resize';
 export { shortcut } from './shortcut';
 export { onFirstVisible } from './visible';

package/src/lib/utils/actions/resize.ts

@@ -0,0 +1,35 @@
+import type { Action } from 'svelte/action';
+
+export const resize: Action<
+    HTMLElement,
+    { resized: (mouseX: number) => void; dragging: (dragging: boolean) => void }
+> = (node: HTMLElement, { resized, dragging }) => {
+    const onResize = (e: PointerEvent) => {
+        resized(e.clientX);
+    };
+
+    const onResizeEnd = () => {
+        dragging(false);
+        window.removeEventListener('pointermove', onResize);
+        window.removeEventListener('pointerup', onResizeEnd);
+        window.removeEventListener('pointercancel', onResizeEnd);
+
+        document.getElementsByTagName('html')[0].style.userSelect = '';
+    };
+
+    const onResizeStart = () => {
+        dragging(true);
+        window.addEventListener('pointermove', onResize);
+        window.addEventListener('pointerup', onResizeEnd);
+        window.addEventListener('pointercancel', onResizeEnd);
+
+        document.getElementsByTagName('html')[0].style.userSelect = 'none';
+    };
+    node.addEventListener('pointerdown', onResizeStart);
+
+    return {
+        destroy() {
+            node.removeEventListener('pointerdown', onResizeStart);
+        }
+    };
+};

package/dist/components/index.js

@@ -1 +0,0 @@
-"use strict";

package/src/lib/components/basic/checkbox/checkbox.svelte.spec.ts

@@ -1,39 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { render, screen } from '@testing-library/svelte';
-import { userEvent } from '@testing-library/user-event';
-import { fn } from '@vitest/spy';
-import { describe, expect, it } from 'vitest';
-import { Checkbox } from '../index';
-
-const testId = 'checkbox';
-
-describe('Basic/Checkbox', () => {
-    it('renders the checked icon', async () => {
-        render(Checkbox, { testId, checked: true });
-
-        const checkbox = screen.getByTestId(testId);
-        expect(checkbox).toBeVisible();
-        const icon = checkbox.querySelector('svg');
-        expect(icon).toBeVisible();
-    });
-
-    it('fires click event when clicked', async () => {
-        const callback = fn();
-        render(Checkbox, { testId, onclick: callback });
-
-        const checkbox = screen.getByTestId(testId);
-        expect(checkbox).toBeVisible();
-        checkbox.click();
-        expect(callback).toHaveBeenCalledOnce();
-    });
-
-    it("doesn't fire click event when disabled", async () => {
-        const callback = fn();
-        render(Checkbox, { testId, onclick: callback, disabled: true });
-
-        const checkbox = screen.getByTestId(testId);
-        expect(checkbox).toBeVisible();
-        await userEvent.click(checkbox);
-        expect(callback).not.toHaveBeenCalled();
-    });
-});

package/src/lib/components/basic/toggle/toggle.svelte.spec.ts

@@ -1,19 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { render, screen } from '@testing-library/svelte';
-import { fn } from '@vitest/spy';
-import { describe, expect, it } from 'vitest';
-import Toggle from './Toggle.svelte';
-
-const testId = 'toggle';
-
-describe('Basic/Toggle', () => {
-    it('fires click event when clicked', async () => {
-        const callback = fn();
-        render(Toggle, { testId, onclick: callback });
-
-        const toggle = screen.getByTestId(testId);
-        expect(toggle).toBeVisible();
-        toggle.click();
-        expect(callback).toHaveBeenCalledOnce();
-    });
-});

package/src/lib/components/layout/modal/modal.svelte.spec.ts

@@ -1,39 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import ModalTest from './ModalTest.svelte';
-
-const testId = 'modal';
-const contentTestId = 'modal-content';
-
-const children = createRawSnippet(() => ({
-    render: () => `<p data-testId="${contentTestId}">Content</p>`
-}));
-
-describe('Layout/Modal', () => {
-    it('renders', async () => {
-        render(ModalTest, {
-            open: true,
-            testId,
-            children
-        });
-        const modal = screen.getByTestId(testId);
-        expect(modal).toBeVisible();
-        const content = screen.getByTestId(contentTestId);
-        expect(content).toBeVisible();
-    });
-
-    // this is bugged for some f'ing reason
-    // it('closes when clicking outside', async () => {
-    //     render(ModalTest, {
-    //         open: true,
-    //         testId,
-    //         children
-    //     });
-    //     const modal = screen.getByTestId(testId);
-    //     const background = screen.getByTestId(HiddenBackground.TEST_ID);
-    //     await userEvent.click(background!);
-    //     expect(modal).not.toBeVisible();
-    // });
-});

package/src/lib/components/layout/tabs/Tabs.test.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-    interface Props {}
-
-    let {}: Props = $props();
-</script>

package/src/lib/utils/actions/clickOutside.svelte.spec.ts

@@ -1,67 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import userEvent from '@testing-library/user-event';
-import { fn } from '@vitest/spy';
-import { describe, expect, it } from 'vitest';
-import { clickOutside } from './clickOutside';
-
-describe('clickOutside', () => {
-    it('should fire when an element outside the node is clicked', async () => {
-        const node = document.createElement('div');
-        document.body.appendChild(node);
-        const otherNode = document.createElement('div');
-        document.body.appendChild(otherNode);
-
-        const callback = fn();
-        clickOutside(node, callback);
-
-        await userEvent.click(otherNode);
-
-        expect(callback).toHaveBeenCalledOnce();
-    });
-
-    it('should not fire when the target is inside the node', async () => {
-        const node = document.createElement('div');
-        document.body.appendChild(node);
-        const nestedNode = node.appendChild(document.createElement('div'));
-        const otherNode = document.createElement('div');
-        document.body.appendChild(otherNode);
-
-        const callback = fn();
-        clickOutside(node, callback);
-
-        await userEvent.click(nestedNode);
-
-        expect(callback).not.toHaveBeenCalled();
-    });
-
-    it('should fire when the callback is passed in as an object', async () => {
-        const node = document.createElement('div');
-        document.body.appendChild(node);
-        const otherNode = document.createElement('div');
-        document.body.appendChild(otherNode);
-
-        const callback = fn();
-        clickOutside(node, { callback });
-
-        await userEvent.click(otherNode);
-
-        expect(callback).toHaveBeenCalledOnce();
-    });
-
-    it('should not fire when the target is inside the passed target', async () => {
-        const node = document.createElement('div');
-        document.body.appendChild(node);
-
-        const otherNode = document.createElement('div');
-        document.body.appendChild(otherNode);
-        const nestedNode = otherNode.appendChild(document.createElement('div'));
-
-        const callback = fn();
-        clickOutside(node, { callback, target: otherNode });
-
-        await userEvent.click(nestedNode);
-        await userEvent.click(otherNode);
-
-        expect(callback).not.toHaveBeenCalled();
-    });
-});

package/src/lib/utils/actions/shortcut.svelte.spec.ts

@@ -1,19 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import userEvent from '@testing-library/user-event';
-import { fn } from '@vitest/spy';
-import { describe, expect, it } from 'vitest';
-import { shortcut } from './shortcut';
-
-describe('shortcut', () => {
-    it('should call the callback when the key is pressed', async () => {
-        const node = document.createElement('div');
-        const keyCode = 'Enter';
-        const callback = fn();
-        shortcut(node, {
-            callback,
-            code: keyCode
-        });
-        await userEvent.keyboard(`{${keyCode}}`);
-        expect(callback).toHaveBeenCalledOnce();
-    });
-});

package/src/lib/utils/functions/cookie.svelte.spec.ts

@@ -1,55 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { describe, expect, it } from 'vitest';
-import { cookie } from './cookie';
-
-describe('cookie', () => {
-    it('sets correctly', () => {
-        const name = 'test';
-        const value = 'test';
-        const days = 1;
-        // this is a hack to get the value back that is actually being set
-        const setCookie = cookie.set({ name, value, days });
-        expect(setCookie).toBe(
-            `${name}=${value}; expires=${new Date(new Date().getTime() + days * 24 * 60 * 60 * 1000).toUTCString()}; path=/`
-        );
-    });
-
-    it('gets correctly', () => {
-        const name = 'test';
-        const value = 'test';
-        const days = 1;
-        cookie.set({ name, value, days });
-        expect(cookie.get(name)).toBe(value);
-    });
-
-    it("preserves existing cookie's path", () => {
-        const cookie1 = {
-            name: 'test',
-            value: 'test'
-        };
-        const cookie2 = {
-            name: 'test2',
-            value: 'test2'
-        };
-        cookie.set(cookie1);
-        cookie.set(cookie2);
-        expect(cookie.get(cookie1.name)).toBe(cookie1.value);
-        expect(cookie.get(cookie2.name)).toBe(cookie2.value);
-    });
-
-    it('updates cookies correctly', () => {
-        const cookie1 = {
-            name: 'test',
-            value: 'test'
-        };
-        const cookie2 = {
-            name: 'test2',
-            value: 'test2'
-        };
-        cookie.set(cookie1);
-        cookie.set(cookie2);
-        cookie.set({ name: cookie1.name, value: 'newValue' });
-        expect(cookie.get(cookie1.name)).toBe('newValue');
-        expect(cookie.get(cookie2.name)).toBe(cookie2.value);
-    });
-});

package/src/lib/utils/functions/pseudoRandomId.spec.ts

@@ -1,19 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { pseudoRandomId } from './pseudoRandomId';
-
-describe('pseudoRandomId', () => {
-    it('generates different values', () => {
-        const a = pseudoRandomId();
-        const b = pseudoRandomId();
-        expect(a).not.toBe(b);
-    });
-
-    it('generates values that start with the prefix', () => {
-        const prefix = 'test-';
-        const a = pseudoRandomId(prefix);
-        const b = pseudoRandomId(prefix);
-        expect(a.startsWith(prefix)).toBe(true);
-        expect(b.startsWith(prefix)).toBe(true);
-        expect(a).not.toBe(b);
-    });
-});

package/src/lib/utils/functions/queryParams.spec.ts

@@ -1,25 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { queryParams } from './queryParams';
-
-describe('queryParams', () => {
-    it('adds all query params', () => {
-        const params = {
-            a: 0,
-            b: '2',
-            c: 3
-        };
-        const query = queryParams(params);
-        expect(query).toBe('?a=0&b=2&c=3');
-    });
-
-    it('removes nullish values', () => {
-        const params = {
-            a: 0,
-            b: undefined,
-            c: 3,
-            d: null
-        };
-        const query = queryParams(params);
-        expect(query).toBe('?a=0&c=3');
-    });
-});