@ims360/svelte-ivory 0.0.6 → 0.0.8

package/dist/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/dist/components/table/table/Column.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+import type { ColumnConfig } from './column.svelte';
+export declare function setClasses(c: ClassValue): void;
+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;
+}
+declare const Column: import("svelte").Component<ColumnProps, {}, "">;
+type Column = ReturnType<typeof Column>;
+export default Column;
+//# sourceMappingURL=Column.svelte.d.ts.map

package/dist/components/table/table/Column.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/table/Column.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKpD,wBAAgB,UAAU,CAAC,CAAC,EAAE,UAAU,QAEvC;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAuDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/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/dist/components/table/table/ColumnHead.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+import type { Column } from './column.svelte';
+export declare function getColumnHeadContext(): Column;
+type Props = {
+    column: Column;
+    children: Snippet;
+};
+declare const ColumnHead: import("svelte").Component<Props, {}, "">;
+type ColumnHead = ReturnType<typeof ColumnHead>;
+export default ColumnHead;
+//# sourceMappingURL=ColumnHead.svelte.d.ts.map

package/dist/components/table/table/ColumnHead.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnHead.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/table/ColumnHead.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAO9C,wBAAgB,oBAAoB,IAAI,MAAM,CAE7C;AAED,KAAK,KAAK,GAAG;IACT,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AA+CN,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/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/dist/components/table/table/Row.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export declare function setClasses(c: ClassValue): void;
+export interface Props {
+    class?: ClassValue;
+    onclick?: () => void;
+    href?: string;
+    children: Snippet;
+}
+declare const Row: import("svelte").Component<Props, {}, "">;
+type Row = ReturnType<typeof Row>;
+export default Row;
+//# sourceMappingURL=Row.svelte.d.ts.map

package/dist/components/table/table/Row.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/table/Row.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,wBAAgB,UAAU,CAAC,CAAC,EAAE,UAAU,QAEvC;AAED,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACrB;AAkDL,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/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/dist/components/table/table/Table.svelte.d.ts

@@ -0,0 +1,52 @@
+import { type Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+import { TableController, type TablePlugin, type TableRow } from './table.svelte';
+export interface TableProps<T extends {
+    id: string;
+}> {
+    class?: ClassValue;
+    data: T[];
+    onclick?: (row: T) => void;
+    href?: (row: T) => string | undefined;
+    rowHeight?: number;
+}
+export declare function getTableContext<T extends {
+    id: string;
+    children?: T[] | undefined;
+}>(): TableController<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>;
+}
+declare class __sveltets_Render<T extends TableRow<T>> {
+    props(): Props<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends TableRow<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends TableRow<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<T extends TableRow<T>> = InstanceType<typeof Table<T>>;
+export default Table;
+//# sourceMappingURL=Table.svelte.d.ts.map

package/dist/components/table/table/Table.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/table/Table.svelte.ts"],"names":[],"mappings":"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"}

package/dist/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/dist/components/table/table/VirtualList.svelte.d.ts

@@ -0,0 +1,41 @@
+import { type Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+type Props<T> = {
+    class?: ClassValue;
+    data: T[];
+    children: Snippet<[{
+        row: T;
+        domIndex: number;
+        index: number;
+    }]>;
+    header?: Snippet;
+    b_scrollTop?: number;
+    rowHeight: number;
+    overscan?: number;
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): Props<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "b_scrollTop";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const VirtualList: $$IsomorphicComponent;
+type VirtualList<T extends {
+    id: string;
+}> = InstanceType<typeof VirtualList<T>>;
+export default VirtualList;
+//# sourceMappingURL=VirtualList.svelte.d.ts.map

package/dist/components/table/table/VirtualList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/table/VirtualList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,CAAC,CAAC,IAAI;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA+EN,cAAM,iBAAiB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;IAC5C,KAAK;IAGL,MAAM;IAGN,KAAK;IAGL,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACnZ,CAAC,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAClJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,WAAW,EAAE,qBAAmC,CAAC;AACrC,KAAK,WAAW,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACnF,eAAe,WAAW,CAAC"}

package/dist/components/table/table/column.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+export interface ColumnConfig {
+    id: string;
+    width?: number;
+    minWidth?: number;
+    resizable?: boolean;
+    header: Snippet | string;
+}
+export declare class Column {
+    id: string;
+    header: string | Snippet<[]>;
+    width: number | undefined;
+    private minimalWidth;
+    hovering: boolean;
+    resizable: boolean;
+    dragging: boolean;
+    constructor(conf: ColumnConfig);
+    updateConfig(conf: ColumnConfig): void;
+    resize(newWidth?: number): void;
+}
+//# sourceMappingURL=column.svelte.d.ts.map

package/dist/components/table/table/column.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/table/column.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B;AAED,qBAAa,MAAM;IACf,EAAE,SAAc;IAChB,MAAM,uBAAgC;IAGtC,KAAK,qBAAoB;IACzB,OAAO,CAAC,YAAY,CAAyB;IAC7C,QAAQ,UAAiB;IACzB,SAAS,UAAiB;IAC1B,QAAQ,UAAiB;gBAEb,IAAI,EAAE,YAAY;IAS9B,YAAY,CAAC,IAAI,EAAE,YAAY;IAiB/B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM;CAQ3B"}