@ims360/svelte-ivory 0.0.4 → 0.0.7

package/src/lib/components/layout/modal/Modal.svelte

@@ -4,8 +4,7 @@
     import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
     import { twMerge } from 'tailwind-merge';
-    import Heading from '../heading/Heading.svelte';
-    import HiddenBackground from '../hiddenBackground/HiddenBackground.svelte';
+    import { Heading, HiddenBackground, Portal } from '..';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
     export interface ModalProps {
@@ -60,58 +59,71 @@
 	A modal, comes with a title, close button and different variants per default.
 -->
 {#if b_open}
-    <HiddenBackground
-        onclose={close}
-        class="flex h-full w-full flex-col items-center justify-start p-16"
-    >
-        {#if modal}
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <div class={clazz} onclick={(e) => e.stopPropagation()} data-testid={testId} {style}>
-                {@render modal()}
-            </div>
-        {:else}
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div
-                class={twMerge(
-                    clsx([
-                        'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
-                        clazz
-                    ])
-                )}
-                {style}
-                onclick={(e) => e.stopPropagation()}
-                data-testid={testId}
-            >
+    <Portal>
+        <HiddenBackground
+            onclose={close}
+            class="flex h-full w-full flex-col items-center justify-start p-16"
+        >
+            {#if modal}
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <div
-                    class={[
-                        'flex flex-row items-center justify-between gap-4 px-4 py-3',
-                        // !variant && 'pt-3',
-                        variant === 'success' && 'preset-tonal-success',
-                        variant === 'warning' && 'preset-tonal-warning',
-                        variant === 'error' && 'preset-tonal-error',
-                        variant === 'info' && 'preset-tonal-primary'
-                    ]}
+                    class={clazz}
+                    onclick={(e) => e.stopPropagation()}
+                    data-testid={testId}
+                    {style}
                 >
-                    {#if title}
-                        <Heading>{title}</Heading>
-                    {/if}
-                    <button class="group ml-auto flex justify-end" type="button" onclick={close}>
-                        <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
-                    </button>
+                    {@render modal()}
                 </div>
+            {:else}
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <div
                     class={twMerge(
-                        clsx(
-                            'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-2',
-                            innerClass
-                        )
+                        clsx([
+                            'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
+                            clazz
+                        ])
                     )}
+                    {style}
+                    onclick={(e) => e.stopPropagation()}
+                    data-testid={testId}
                 >
-                    {@render children?.()}
+                    <div
+                        class={[
+                            'flex flex-row items-center justify-between gap-4 px-4 py-3',
+                            !variant && 'pb-0',
+                            variant === 'success' && 'preset-tonal-success',
+                            variant === 'warning' && 'preset-tonal-warning',
+                            variant === 'error' && 'preset-tonal-error',
+                            variant === 'info' && 'preset-tonal-primary'
+                        ]}
+                    >
+                        {#if title}
+                            <Heading>{title}</Heading>
+                        {/if}
+                        <button
+                            class="group ml-auto flex justify-end"
+                            type="button"
+                            onclick={close}
+                        >
+                            <X
+                                class="h-full w-auto transition-[stroke-width] group-hover:stroke-3"
+                            />
+                        </button>
+                    </div>
+                    <div
+                        class={twMerge(
+                            clsx(
+                                'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
+                                innerClass
+                            )
+                        )}
+                    >
+                        {@render children?.()}
+                    </div>
                 </div>
-            </div>
-        {/if}
-    </HiddenBackground>
+            {/if}
+        </HiddenBackground>
+    </Portal>
 {/if}

package/src/lib/components/layout/tabs/Tab.svelte

@@ -8,7 +8,7 @@
     import { getTabContext } from './Tabs.svelte';
 
     type Props = {
-        class?: (selected: boolean) => ClassValue;
+        class?: ClassValue | ((selected: boolean) => ClassValue);
         id?: string | undefined;
         /**
          * If this is set the element will be a link.
@@ -58,8 +58,8 @@
     this={href ? 'a' : 'button'}
     class={twMerge(
         clsx(
-            'btn flex h-fit w-fit items-center justify-center px-0 text-xl font-bold',
-            clazz(selected)
+            'btn flex h-fit w-fit shrink-0 items-center justify-center px-0 text-xl font-bold select-none',
+            typeof clazz === 'function' ? clazz(selected) : clazz
         )
     )}
     onclick={href

package/src/lib/components/layout/tooltip/Tooltip.svelte

@@ -42,27 +42,28 @@
         onclick,
         href,
         timeout = 500,
-        tooltipClass
+        tooltipClass,
+        placement = 'top'
     }: Props = $props();
 
     let target = $state<HTMLElement>();
 
     let open = $state(false);
 
-    let showTimeout: number;
-    function onpointerenter() {
-        clearTimeout(timeout);
+    let currentTimeout: number;
+    function onmouseenter() {
+        clearTimeout(currentTimeout);
         if (timeout === 0) {
             open = true;
         } else {
-            showTimeout = setTimeout(() => {
+            currentTimeout = setTimeout(() => {
                 open = true;
             }, timeout) as unknown as number;
         }
     }
 
-    function onpointerleave() {
-        clearTimeout(timeout);
+    function onmouseleave() {
+        clearTimeout(currentTimeout);
         open = false;
     }
 </script>
@@ -80,8 +81,8 @@
     type={onclick ? 'button' : undefined}
     class={clazz}
     bind:this={target}
-    {onpointerenter}
-    {onpointerleave}
+    {onmouseenter}
+    {onmouseleave}
     {style}
     {onclick}
 >
@@ -93,10 +94,10 @@
         <Popover
             bind:b_open={open}
             {target}
-            placement="top"
+            {placement}
             class={twMerge(
                 clsx(
-                    'bg-surface-100-800-token max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
+                    'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
                     tooltipClass
                 )
             )}

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

@@ -0,0 +1,5 @@
+export { expandAllPlugin } from './plugins/expandAll.svelte';
+export { searchPlugin } from './plugins/search.svelte';
+export { default as Table } from './table';
+export { default as Column, type ColumnProps } from './table/Column.svelte';
+export { getColumnHeadContext } from './table/ColumnHead.svelte';

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

@@ -0,0 +1,34 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { getAllIds, type TablePlugin, type TableRow } from '../table/table.svelte';
+
+interface ExpandAllConfig {
+    enabled: boolean;
+}
+
+const DEFAULT_CONFIG: ExpandAllConfig = {
+    enabled: true
+};
+
+export function expandAllPlugin<T extends TableRow<T>>(
+    conf: Partial<ExpandAllConfig>
+): TablePlugin<T> {
+    let initialized = false;
+
+    const config: ExpandAllConfig = {
+        ...DEFAULT_CONFIG,
+        ...conf
+    };
+
+    const middleware: TablePlugin<T> = (state) => {
+        if (initialized || !config.enabled) return state;
+        initialized = true;
+        const allIds = getAllIds(...state.data);
+        const newExpanded = new SvelteSet(allIds);
+        return {
+            data: state.data,
+            expanded: newExpanded
+        };
+    };
+
+    return middleware;
+}

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;
+    }
+</script>
+
+<script lang="ts">
+    interface Props {
+        class?: ClassValue;
+        onclick?: () => void;
+        href?: string;
+        children: Snippet;
+    }
+
+    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>