@ims360/svelte-ivory 0.0.46 → 0.0.48

package/dist/components/table/search.svelte.js

@@ -0,0 +1,28 @@
+import { SvelteSet } from 'svelte/reactivity';
+/** collapses everything that doesnt match the searchString, expands direct search hit */
+export const searchData = (nodes, searchString, stringsMatch) => {
+    const search = searchString.trim().toLowerCase();
+    const hidden = new SvelteSet();
+    const expanded = new SvelteSet();
+    function nodeMatches(node, childOfMatch = false) {
+        const matches = stringsMatch(node, search);
+        let intermediate = false;
+        for (const child of node.children || []) {
+            const childMatches = nodeMatches(child, matches || childOfMatch);
+            if (childMatches)
+                intermediate = true;
+        }
+        if (intermediate) {
+            expanded.add(node.id);
+        }
+        else if (!childOfMatch && !matches) {
+            hidden.add(node.id);
+        }
+        return matches || intermediate;
+    }
+    nodes.forEach((n) => nodeMatches(n));
+    return {
+        hidden,
+        expanded
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.0.46",
+    "version": "0.0.48",
     "keywords": [
         "svelte"
     ],
@@ -67,43 +67,44 @@
         "test:unit": "vitest"
     },
     "dependencies": {
-        "@floating-ui/dom": "^1.6.13",
+        "@floating-ui/dom": "^1.7.4",
         "@lucide/svelte": "^0.503.0",
         "@tailwindcss/forms": "^0.5.10",
-        "@tailwindcss/typography": "^0.5.16",
-        "@tailwindcss/vite": "^4.1.4",
-        "dompurify": "^3.2.5",
-        "jsdom": "^26.0.0",
-        "marked": "^15.0.11",
-        "tailwind-merge": "^3.2.0",
-        "tailwindcss": "^4.0.0"
+        "@tailwindcss/typography": "^0.5.18",
+        "@tailwindcss/vite": "^4.1.13",
+        "clsx": "^2.1.1",
+        "dompurify": "^3.2.7",
+        "jsdom": "^26.1.0",
+        "marked": "^15.0.12",
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss": "^4.1.13"
     },
     "devDependencies": {
-        "@eslint/compat": "^1.2.5",
-        "@eslint/js": "^9.18.0",
+        "@eslint/compat": "^1.3.2",
+        "@eslint/js": "^9.36.0",
         "@sveltejs/adapter-auto": "^4.0.0",
-        "@sveltejs/package": "^2.0.0",
-        "@sveltejs/vite-plugin-svelte": "^5.0.0",
-        "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/svelte": "^5.2.4",
+        "@sveltejs/package": "^2.5.3",
+        "@sveltejs/vite-plugin-svelte": "^5.1.1",
+        "@testing-library/jest-dom": "^6.8.0",
+        "@testing-library/svelte": "^5.2.8",
         "@testing-library/user-event": "^14.6.1",
-        "@vitest/browser": "^3.1.1",
-        "@vitest/coverage-v8": "^3.1.1",
-        "@vitest/spy": "^3.1.2",
-        "eslint": "^9.18.0",
-        "eslint-config-prettier": "^10.0.1",
-        "eslint-plugin-svelte": "^3.0.0",
-        "globals": "^16.0.0",
-        "playwright": "^1.51.1",
-        "prettier": "^3.4.2",
-        "prettier-plugin-svelte": "^3.3.3",
-        "prettier-plugin-tailwindcss": "^0.6.11",
-        "publint": "^0.3.2",
-        "svelte-check": "^4.0.0",
-        "typescript": "^5.0.0",
-        "typescript-eslint": "^8.20.0",
-        "vite": "^6.0.0",
-        "vitest": "^3.0.0"
+        "@vitest/browser": "^3.2.4",
+        "@vitest/coverage-v8": "^3.2.4",
+        "@vitest/spy": "^3.2.4",
+        "eslint": "^9.36.0",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-svelte": "^3.12.4",
+        "globals": "^16.4.0",
+        "playwright": "^1.55.0",
+        "prettier": "^3.6.2",
+        "prettier-plugin-svelte": "^3.4.0",
+        "prettier-plugin-tailwindcss": "^0.6.14",
+        "publint": "^0.3.13",
+        "svelte-check": "^4.3.1",
+        "typescript": "^5.9.2",
+        "typescript-eslint": "^8.44.0",
+        "vite": "^6.3.6",
+        "vitest": "^3.2.4"
     },
     "peerDependencies": {
         "@skeletonlabs/skeleton": "^3.1.1",

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

@@ -4,6 +4,7 @@
     import type { ClassValue } from 'svelte/elements';
     import { twMerge } from 'tailwind-merge';
     import type { ColumnConfig } from './columnController.svelte';
+    import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
 
     let defaultClasses = $state<ClassValue>();
@@ -25,7 +26,7 @@
 
 <script lang="ts">
     let {
-        class: clazz = 'py-2 flex flex-row items-center',
+        class: clazz = 'py-2 flex flex-row items-center truncate',
         children,
         onclick,
         ignoreWidth = false,
@@ -36,10 +37,19 @@
     }: ColumnProps = $props();
 
     // Register the new column if this is the first table row that was rendered
-    const { registerColumn, nestingInset } = getTableContext();
-    const column = registerColumn({ resizable, ...props });
+    const tableContext = getTableContext();
+    const rowContext = getRowContext();
+    const column = tableContext.registerColumn({ resizable, ...props });
+
+    const finalOnClick = $derived(onclick || rowContext.onclick);
     const allowClicking = $derived(!!onclick);
 
+    const element = $derived.by(() => {
+        if (finalOnClick) return 'button';
+        if (rowContext.href) return 'a';
+        return 'div';
+    });
+
     // passes updated props to the column
     $effect(() => {
         column.updateConfig({ resizable, ...props });
@@ -49,34 +59,27 @@
     $effect(() => {
         if (!column.resizable && props.width !== undefined) 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}
+    this={element}
+    onclick={allowClicking ? finalOnClick : undefined}
+    href={rowContext.href}
+    type={allowClicking ? 'button' : undefined}
     style={ignoreWidth
         ? ''
-        : `width: calc(${column.width ?? 0}px - var(--spacing) * ${offsetNestingLevel * nestingInset}) !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
-        )
-    )}
+        : `width: calc(${column.width ?? 0}px - var(--spacing) * ${offsetNestingLevel * tableContext.nestingInset}) !important;`}
+    class={[
+        'flex h-full shrink-0 flex-row items-stretch justify-start truncate',
+        !ignoreWidth && [
+            'after:mr-2 after:ml-auto after:h-full after:w-px',
+            column.dragging && 'after:bg-primary-400-600',
+            !column.dragging && column.hovering && 'after:bg-surface-300-700'
+        ]
+    ]}
 >
-    {@render children()}
+    <div class={twMerge(clsx(['flex flex-row items-center gap-1', defaultClasses, clazz]))}>
+        {@render children()}
+    </div>
 </svelte:element>

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

@@ -36,7 +36,7 @@
     const onResize = (mouseX: number) => {
         if (!target) return;
         let newWidth = mouseX - target.getBoundingClientRect().left;
-        column.resize(newWidth + 2);
+        column.resize(newWidth + 8);
     };
 
     const onDragging = (d: boolean) => {
@@ -55,10 +55,8 @@
         <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'
+                'relative ml-auto h-full w-4 shrink-0 cursor-col-resize bg-inherit after:absolute after:top-0 after:right-2 after:h-full after:w-px',
+                dragging ? 'after:bg-primary-400-600' : 'group-hover:after:bg-surface-300-700'
             ]}
             use:resize={{ resized: onResize, dragging: onDragging }}
             onmouseenter={onHoverStart}

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

@@ -1,66 +1,39 @@
 <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 { getContext, setContext, type Snippet } from 'svelte';
 
-    let defaultClasses = $state<ClassValue>();
-
-    export function setClasses(c: ClassValue) {
-        defaultClasses = c;
-    }
-
-    export interface Props {
-        class?: ClassValue;
+    interface Props {
         onclick?: () => void;
         href?: string;
         children: Snippet;
     }
+
+    interface RowContext {
+        readonly onclick?: () => void;
+        readonly href?: string;
+    }
+
+    const CONTEXT = {};
+
+    function setRowContext(context: RowContext) {
+        setContext(CONTEXT, context);
+    }
+
+    export function getRowContext(): RowContext {
+        return getContext(CONTEXT);
+    }
 </script>
 
 <script lang="ts">
-    let {
-        class: clazz = 'hover:bg-surface-950-50/10 transition-colors',
-        onclick,
-        href,
-        children
-    }: Props = $props();
+    let { 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'
-            };
+    setRowContext({
+        get onclick() {
+            return onclick;
+        },
+        get href() {
+            return href;
         }
     });
 </script>
 
-<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>
+{@render children()}

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

@@ -1,16 +1,17 @@
 <script lang="ts" module>
     import { ChevronRight } from '@lucide/svelte';
     import clsx from 'clsx';
-    import { getContext, setContext, type Snippet } from 'svelte';
+    import { getContext, setContext, untrack, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
     import { SvelteSet } from 'svelte/reactivity';
     import { twMerge } from 'tailwind-merge';
-    import { Column as ColumnComponent, type TablePlugin, type TableRow } from '.';
+    import { Column as ColumnComponent, type TableRow } from '.';
+    import { ColumnController, type ColumnConfig } from './columnController.svelte';
     import ColumnHead from './ColumnHead.svelte';
+    import { treeWalker } from './controller';
     import Row from './Row.svelte';
+    import { searchData } from './search.svelte';
     import VirtualList from './VirtualList.svelte';
-    import { ColumnController, type ColumnConfig } from './columnController.svelte';
-    import { treeWalker, type TableState } from './controller';
 
     export interface TableProps<T extends TableRow<T>> {
         class?: ClassValue;
@@ -24,7 +25,10 @@
         firstColumn?: Snippet<[{ row: T }]>;
         rowClass?: ClassValue;
         headerClass?: ClassValue;
-        plugins?: TablePlugin<T>[];
+        search?: {
+            term: string;
+            matches: (row: T) => boolean;
+        };
         /**
          * **Bindable**
          */
@@ -40,9 +44,9 @@
 
     const TABLE_CONTEXT = {};
     export type TableContext<T extends TableRow<T>> = {
-        registerColumn: (config: ColumnConfig) => ColumnController;
-        toggleExpansion: (id: string) => void;
-        nestingInset: number;
+        readonly registerColumn: (config: ColumnConfig) => ColumnController;
+        readonly toggleExpansion: (id: string) => void;
+        readonly nestingInset: number;
     };
 
     function setTableContext<T extends TableRow<T>>(context: TableContext<T>) {
@@ -54,6 +58,7 @@
     }
 
     const treeIndicatorId = 'tree-chevron';
+    const treeIndicatorInset = 32;
 </script>
 
 <script lang="ts" generics="T extends TableRow<T>">
@@ -62,20 +67,19 @@
         data,
         children: passedChildren,
         firstColumn,
-        rowClass,
+        rowClass = 'hover:bg-surface-950-50/10 transition-colors',
         headerClass,
         rowHeight = 64,
         onclick,
         href,
-        plugins = [],
         expanded: expanded = new SvelteSet<string>(),
         nestingInset = 4,
         b_columns: externalColumns = $bindable(),
-        b_scrollTop = $bindable()
+        b_scrollTop = $bindable(),
+        search
     }: TableProps<T> = $props();
 
     let columns = $state<ColumnController[]>(externalColumns ?? []);
-    const results = $derived(computeResults(data, expanded, plugins));
     let treeIndicatorColumn = $state<ColumnController>();
 
     function toggleExpansion(id: string) {
@@ -83,6 +87,57 @@
         else expanded.add(id);
     }
 
+    let expandedBeforeSearch = $state<SvelteSet<string> | null>(null);
+    let prevSearch = $state('');
+
+    const searchResult = $derived.by(() => {
+        if (!search)
+            return {
+                filteredData: data,
+                isSearching: false
+            };
+        const query = search.term.trim();
+        // Note: We only use the 'filteredData' part of the search result here.
+        const { hidden } = searchData(data, query, search.matches);
+        return {
+            filteredData: data.filter((d) => !hidden.has(d.id)),
+            isSearching: true
+        };
+    });
+    const results = $derived(treeWalker({ data: searchResult.filteredData, expanded }));
+
+    $effect(() => {
+        if (!search) return;
+        const currentSearch = search.term.trim();
+        const wasSearching = prevSearch !== '';
+        const isSearching = currentSearch !== '';
+
+        // Transition: Not Searching -> Searching
+        if (!wasSearching && isSearching) {
+            // Save the current expansion state before overwriting it.
+            expandedBeforeSearch = untrack(() => new SvelteSet(expanded));
+            const { expanded: searchExpanded } = searchData(data, currentSearch, search.matches);
+            expanded = searchExpanded; // Set the initial expansion for the search.
+        }
+
+        // Transition: Searching -> Not Searching
+        if (wasSearching && !isSearching) {
+            // Restore the saved expansion state.
+            if (expandedBeforeSearch) {
+                expanded = expandedBeforeSearch;
+                expandedBeforeSearch = null;
+            }
+        }
+
+        // Transition: Searching -> Searching (different query)
+        if (wasSearching && isSearching && currentSearch !== prevSearch) {
+            const { expanded: searchExpanded } = searchData(data, currentSearch, search.matches);
+            expanded = searchExpanded; // Update the expansion for the new search.
+        }
+
+        prevSearch = currentSearch;
+    });
+
     setTableContext({
         toggleExpansion,
         registerColumn(config: ColumnConfig) {
@@ -107,17 +162,6 @@
             return nestingInset;
         }
     });
-
-    function computeResults(data: T[], expanded: Set<string>, plugins: TablePlugin<T>[]) {
-        let state: TableState<T> = {
-            data,
-            expanded
-        };
-        for (const plugin of plugins) {
-            state = plugin(state);
-        }
-        return treeWalker(state);
-    }
 </script>
 
 <VirtualList
@@ -125,12 +169,13 @@
     class={twMerge(clsx(['flex flex-col overflow-hidden border-transparent', clazz]))}
     bind:b_scrollTop
     {rowHeight}
+    rowClass={['pl-2 pr-4', rowClass]}
 >
     {#snippet header()}
         <div
             class={twMerge(
                 clsx(
-                    'flex w-fit min-w-full flex-row gap-2 border-b border-inherit pr-4 pl-2',
+                    'flex w-fit min-w-full flex-row border-b border-inherit pr-4 pl-2',
                     headerClass
                 )
             )}
@@ -154,11 +199,7 @@
         </div>
     {/snippet}
     {#snippet children({ row: { node, id, nestingLevel }, index })}
-        <Row
-            onclick={onclick ? () => onclick(node) : undefined}
-            href={href?.(node)}
-            class={rowClass}
-        >
+        <Row href={href?.(node)} onclick={onclick ? () => onclick(node) : undefined}>
             {@render firstColumn?.({ row: node })}
             <ColumnComponent
                 id={treeIndicatorId}
@@ -168,12 +209,13 @@
                     toggleExpansion(node.id);
                 }}
                 ignoreWidth={results.someHaveChildren}
-                width={results.someHaveChildren ? 24 : 0}
+                width={results.someHaveChildren ? treeIndicatorInset : 0}
                 minWidth={0}
             >
                 <div
-                    class="flex h-full items-center justify-end"
-                    style="width: calc(var(--spacing) * {nestingLevel * nestingInset} + 24px);"
+                    class="flex h-full items-center justify-end pr-2"
+                    style="width: calc(var(--spacing) * {nestingLevel *
+                        nestingInset} + {treeIndicatorInset}px);"
                 >
                     {#if node.children}
                         <ChevronRight

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

@@ -12,6 +12,7 @@
         b_scrollTop?: number;
         rowHeight: number;
         overscan?: number;
+        rowClass?: ClassValue;
     };
 
     let {
@@ -21,9 +22,14 @@
         header,
         b_scrollTop = $bindable(),
         rowHeight,
-        overscan = 2
+        overscan = 2,
+        rowClass
     }: Props<T> = $props();
 
+    const finalRowClass = $derived(
+        twMerge(clsx(['flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowClass]))
+    );
+
     let scroll_top = $state(b_scrollTop ?? 0);
     let scroll_left = $state(0);
     let header_width = $state(0);
@@ -85,10 +91,7 @@
             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;"
-                >
+                <virtual-list-row class={finalRowClass} style="height: {rowHeight}px !important;">
                     {@render children({
                         row: row.data,
                         domIndex: i,

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

@@ -1,9 +1,11 @@
+import type { SvelteSet } from 'svelte/reactivity';
+
 export type TableRow<T> = { id: string; children?: T[] };
-export type TablePlugin<T extends TableRow<T>> = (state: TableState<T>) => TableState<T>;
+export type TablePlugin<T extends TableRow<T>> = (state: TableState<T>) => void;
 
 export interface TableState<T extends TableRow<T>> {
     data: T[];
-    expanded: Set<string>;
+    expanded: SvelteSet<string>;
 }
 
 interface TreeRow<T> {

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

@@ -1,8 +1,7 @@
 export { default as Column, type ColumnProps } from './Column.svelte';
 export { ColumnController, type ColumnConfig } from './columnController.svelte';
 export { getColumnHeadContext } from './ColumnHead.svelte';
-export { getAllIds, type TablePlugin, type TableRow, type TableState } from './controller';
-export { searchPlugin } from './plugins/search.svelte';
+export { getAllIds, type TableRow, type TableState } from './controller';
 export {
     getTableContext,
     default as Table,

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

@@ -0,0 +1,34 @@
+import { SvelteSet } from 'svelte/reactivity';
+import type { TableRow } from '.';
+
+/** collapses everything that doesnt match the searchString, expands direct search hit */
+export const searchData = <T extends TableRow<T>>(
+    nodes: T[],
+    searchString: string,
+    stringsMatch: (a: T, b: string) => boolean
+) => {
+    const search = searchString.trim().toLowerCase();
+    const hidden = new SvelteSet<string>();
+    const expanded = new SvelteSet<string>();
+
+    function nodeMatches(node: T, childOfMatch = false): boolean {
+        const matches = stringsMatch(node, search);
+        let intermediate = false;
+        for (const child of node.children || []) {
+            const childMatches = nodeMatches(child, matches || childOfMatch);
+            if (childMatches) intermediate = true;
+        }
+        if (intermediate) {
+            expanded.add(node.id);
+        } else if (!childOfMatch && !matches) {
+            hidden.add(node.id);
+        }
+        return matches || intermediate;
+    }
+
+    nodes.forEach((n) => nodeMatches(n));
+    return {
+        hidden,
+        expanded
+    };
+};

package/dist/components/table/plugins/search.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteSet } from 'svelte/reactivity';
-import type { TablePlugin, TableRow } from '../';
-interface SearchConfig<T extends TableRow<T>> {
-    search: string;
-    matches: (row: T) => boolean;
-}
-export declare function searchPlugin<T extends TableRow<T>>(conf: SearchConfig<T>): TablePlugin<T>;
-/** collapses everything that doesnt match the searchString, expands direct search hit */
-export declare const search: <T extends TableRow<T>>(nodes: T[], searchString: string, stringsMatch: (a: T, b: string) => boolean) => {
-    hidden: SvelteSet<string>;
-    expanded: SvelteSet<string>;
-};
-export {};
-//# sourceMappingURL=search.svelte.d.ts.map

package/dist/components/table/plugins/search.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"search.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/plugins/search.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEjD,UAAU,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAyBzF;AAED,yFAAyF;AACzF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EACxC,OAAO,CAAC,EAAE,EACV,cAAc,MAAM,EACpB,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO;;;CA0B7C,CAAC"}