@invopop/popui 0.1.1 → 0.1.3-6.beta.1

package/dist/clickOutside.js

@@ -1,8 +1,14 @@
-/** Dispatch event on click outside of node */
+/**
+ * Dispatch event on click outside of node
+ * @param {HTMLElement} node
+ */
 export function clickOutside(node) {
+  /**
+   * @param {MouseEvent} event
+   */
   const handleClick = (event) => {
-    if (node && !node.contains(event.target) && !event.defaultPrevented) {
-      node.dispatchEvent(new CustomEvent('click_outside', node))
+    if (node && !node.contains(/** @type {Node} */ (event.target)) && !event.defaultPrevented) {
+      node.dispatchEvent(new CustomEvent('click_outside'))
     }
   }
 

package/dist/data-table/cells/boolean-cell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { BooleanCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: boolean; config?: BooleanCellConfig } = $props()
+
+  const showWhenTrue = config?.showWhenTrue ?? true
+  const showWhenFalse = config?.showWhenFalse ?? false
+  const shouldShow = value ? showWhenTrue : showWhenFalse
+</script>
+
+{#if shouldShow && config?.icon}
+  <div class="flex justify-center">
+    <Icon src={config.icon} class={config.iconClass ?? 'size-4'} />
+  </div>
+{/if}

package/dist/data-table/cells/boolean-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BooleanCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: boolean;
+    config?: BooleanCellConfig;
+};
+declare const BooleanCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type BooleanCell = ReturnType<typeof BooleanCell>;
+export default BooleanCell;

package/dist/data-table/cells/currency-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../utils.js'
+  import type { CurrencyCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: any; config?: CurrencyCellConfig } = $props()
+</script>
+
+<span class={cn('font-mono text-base text-foreground', config?.className)}>
+  {value}
+</span>

package/dist/data-table/cells/currency-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CurrencyCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: any;
+    config?: CurrencyCellConfig;
+};
+declare const CurrencyCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type CurrencyCell = ReturnType<typeof CurrencyCell>;
+export default CurrencyCell;

package/dist/data-table/cells/date-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../utils.js'
+  import type { DateCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: any; config?: DateCellConfig } = $props()
+</script>
+
+<span class={cn('font-mono text-base text-foreground', config?.className)}>
+  {value}
+</span>

package/dist/data-table/cells/date-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DateCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: any;
+    config?: DateCellConfig;
+};
+declare const DateCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type DateCell = ReturnType<typeof DateCell>;
+export default DateCell;

package/dist/data-table/cells/tag-cell.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import TagStatus from '../../TagStatus.svelte'
+  import type { TagCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: string; config: TagCellConfig } = $props()
+
+  const option = $derived(config.options.find((opt) => opt.value === value))
+</script>
+
+{#if option}
+  <TagStatus label={option.label} status={option.color} dot={config.showDot ?? false} />
+{/if}

package/dist/data-table/cells/tag-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TagCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: string;
+    config: TagCellConfig;
+};
+declare const TagCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type TagCell = ReturnType<typeof TagCell>;
+export default TagCell;

package/dist/data-table/cells/text-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../utils.js'
+  import type { TextCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: any; config?: TextCellConfig } = $props()
+</script>
+
+<div class={cn('truncate', config?.className)}>
+  {value}
+</div>

package/dist/data-table/cells/text-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TextCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: any;
+    config?: TextCellConfig;
+};
+declare const TextCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextCell = ReturnType<typeof TextCell>;
+export default TextCell;

package/dist/data-table/column-definitions.d.ts

@@ -0,0 +1,12 @@
+import type { ColumnDef, Row } from '@tanstack/table-core';
+import type { Snippet } from 'svelte';
+/**
+ * Create the selection column definition for row selection
+ */
+export declare function createSelectionColumn<TData>(): ColumnDef<TData>;
+/**
+ * Create the actions column definition for row actions
+ */
+export declare function createActionsColumn<TData>(rowActionsSnippet: Snippet<[{
+    row: Row<TData>;
+}]>): ColumnDef<TData>;

package/dist/data-table/column-definitions.js

@@ -0,0 +1,40 @@
+import { renderComponent, renderSnippet } from './render-helpers.js';
+import InputCheckbox from '../InputCheckbox.svelte';
+/**
+ * Create the selection column definition for row selection
+ */
+export function createSelectionColumn() {
+    return {
+        id: 'select',
+        header: ({ table }) => renderComponent(InputCheckbox, {
+            checked: table.getIsAllPageRowsSelected(),
+            onchange: (value) => table.toggleAllPageRowsSelected(value),
+            indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
+            'aria-label': 'Select all'
+        }),
+        cell: ({ row }) => renderComponent(InputCheckbox, {
+            checked: row.getIsSelected(),
+            onchange: (value) => row.toggleSelected(value),
+            'aria-label': 'Select row'
+        }),
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        size: 40,
+        minSize: 40,
+        maxSize: 40
+    };
+}
+/**
+ * Create the actions column definition for row actions
+ */
+export function createActionsColumn(rowActionsSnippet) {
+    return {
+        id: 'actions',
+        cell: ({ row }) => renderSnippet(rowActionsSnippet, { row }),
+        enableResizing: false,
+        size: 44,
+        minSize: 44,
+        maxSize: 44
+    };
+}

package/dist/data-table/column-sizing-helpers.d.ts

@@ -0,0 +1,6 @@
+import type { ColumnSizingState } from '@tanstack/table-core';
+/**
+ * Calculate initial column sizes based on available container width
+ * Scales column sizes proportionally if container is wider than default sizes
+ */
+export declare function calculateColumnSizing(columns: any[], containerWidth: number): ColumnSizingState | null;

package/dist/data-table/column-sizing-helpers.js

@@ -0,0 +1,24 @@
+/**
+ * Calculate initial column sizes based on available container width
+ * Scales column sizes proportionally if container is wider than default sizes
+ */
+export function calculateColumnSizing(columns, containerWidth) {
+    // Collect all column sizes
+    const defaultSizes = {};
+    columns.forEach((col) => {
+        if (col.size) {
+            defaultSizes[col.id] = col.size;
+        }
+    });
+    const totalDefaultSize = Object.values(defaultSizes).reduce((sum, size) => sum + size, 0);
+    // If container is wider than default, scale columns proportionally
+    if (containerWidth > totalDefaultSize && totalDefaultSize > 0) {
+        const scale = containerWidth / totalDefaultSize;
+        const newSizing = {};
+        Object.entries(defaultSizes).forEach(([key, value]) => {
+            newSizing[key] = Math.floor(value * scale);
+        });
+        return newSizing;
+    }
+    return null;
+}

package/dist/data-table/create-columns.d.ts

@@ -0,0 +1,3 @@
+import type { ColumnDef } from '@tanstack/table-core';
+import type { DataTableColumn } from './data-table-types.js';
+export declare function createColumns<TData>(columns: DataTableColumn<TData>[]): ColumnDef<TData>[];

package/dist/data-table/create-columns.js

@@ -0,0 +1,50 @@
+import { renderComponent } from './render-helpers.js';
+import TextCell from './cells/text-cell.svelte';
+import BooleanCell from './cells/boolean-cell.svelte';
+import TagCell from './cells/tag-cell.svelte';
+import DateCell from './cells/date-cell.svelte';
+import CurrencyCell from './cells/currency-cell.svelte';
+export function createColumns(columns) {
+    return columns.map((col) => {
+        const tanstackCol = {
+            id: col.id,
+            accessorKey: col.accessorKey,
+            header: col.header,
+            enableSorting: col.enableSorting ?? true,
+            enableHiding: col.enableHiding ?? true,
+            enableResizing: col.enableResizing ?? true,
+            size: col.size,
+            minSize: col.minSize,
+            maxSize: col.maxSize
+        };
+        // Cell renderer
+        if (col.cell) {
+            // Custom cell renderer
+            tanstackCol.cell = ({ row }) => {
+                const value = col.accessorKey ? row.original[col.accessorKey] : undefined;
+                return col.cell(value, row.original);
+            };
+        }
+        else if (col.cellType) {
+            // Built-in cell renderer based on type
+            tanstackCol.cell = ({ row }) => {
+                const value = col.accessorKey ? row.original[col.accessorKey] : undefined;
+                switch (col.cellType) {
+                    case 'text':
+                        return renderComponent(TextCell, { value: value, config: col.cellConfig });
+                    case 'boolean':
+                        return renderComponent(BooleanCell, { value: value, config: col.cellConfig });
+                    case 'tag':
+                        return renderComponent(TagCell, { value: value, config: col.cellConfig });
+                    case 'date':
+                        return renderComponent(DateCell, { value: value, config: col.cellConfig });
+                    case 'currency':
+                        return renderComponent(CurrencyCell, { value: value, config: col.cellConfig });
+                    default:
+                        return value;
+                }
+            };
+        }
+        return tanstackCol;
+    });
+}

package/dist/data-table/data-table-pagination.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import Button from '../button/button.svelte'
+  import InputSelect from '../InputSelect.svelte'
+  import { ArrowLeft, ArrowRight, ScrollLeft, ScrollRight } from '@invopop/ui-icons'
+  import { cn } from '../utils.js'
+  import type { DataTablePaginationProps } from './data-table-types.js'
+
+  let {
+    table,
+    id,
+    class: className,
+    showRowsPerPage = true,
+    rowsPerPageOptions = [10, 25, 50, 100],
+    itemsLabel = 'items',
+    children
+  }: DataTablePaginationProps<any> = $props()
+
+  let currentPage = $derived(table.getState().pagination.pageIndex + 1)
+  let totalPages = $derived(table.getPageCount())
+  let totalItems = $derived(table.getFilteredRowModel().rows.length)
+  let rowsPerPage = $derived(table.getState().pagination.pageSize)
+
+  let pageInputValue = $derived(`${currentPage}`)
+
+  function handlePageInput(event: Event) {
+    const target = event.target as HTMLInputElement
+    const value = parseInt(target.value)
+    if (value >= 1 && value <= totalPages) {
+      table.setPageIndex(value - 1)
+    } else if (target.value === '') {
+      // Allow empty input temporarily
+      pageInputValue = ''
+    }
+  }
+
+  function handlePageBlur(event: Event) {
+    const target = event.target as HTMLInputElement
+    const value = parseInt(target.value)
+    if (isNaN(value) || value < 1) {
+      pageInputValue = `${currentPage}`
+    } else if (value > totalPages) {
+      table.setPageIndex(totalPages - 1)
+    }
+  }
+
+  function formatNumber(num: number): string {
+    return new Intl.NumberFormat('en-US').format(num)
+  }
+</script>
+
+<div
+  {id}
+  class={cn(
+    'flex items-center justify-between h-11 px-4 py-[5px] bg-background backdrop-blur-[10px]',
+    className
+  )}
+>
+  <div class="flex items-center gap-3">
+    <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1.5">
+        <div class="flex items-center">
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ScrollLeft}
+            onclick={() => table.setPageIndex(0)}
+            disabled={currentPage === 1}
+            class={cn(currentPage === 1 && 'pointer-events-none opacity-30')}
+            aria-label="First page"
+          />
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ArrowLeft}
+            onclick={() => table.previousPage()}
+            disabled={currentPage === 1}
+            class={cn(currentPage === 1 && 'pointer-events-none opacity-30')}
+            aria-label="Previous page"
+          />
+        </div>
+        <div class="flex items-center gap-1.5">
+          <input
+            type="number"
+            bind:value={pageInputValue}
+            min="1"
+            max={totalPages}
+            oninput={handlePageInput}
+            onblur={handlePageBlur}
+            class="w-12 h-8 px-2 py-1 text-base tracking-tight rounded-lg border border-border-default-secondary bg-background-default-default backdrop-blur-[2px] caret-foreground-accent text-foreground outline-none focus:ring-0 hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+          />
+          <span class="text-sm text-foreground-default-secondary whitespace-nowrap">
+            / {totalPages}
+          </span>
+        </div>
+        <div class="flex items-center">
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ArrowRight}
+            onclick={() => table.nextPage()}
+            disabled={currentPage === totalPages}
+            class={cn(currentPage === totalPages && 'pointer-events-none opacity-30')}
+            aria-label="Next page"
+          />
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ScrollRight}
+            onclick={() => table.setPageIndex(totalPages - 1)}
+            disabled={currentPage === totalPages}
+            class={cn(currentPage === totalPages && 'pointer-events-none opacity-30')}
+            aria-label="Last page"
+          />
+        </div>
+      </div>
+      {#if showRowsPerPage}
+        <div class="w-[105px]">
+          <InputSelect
+            value={`${rowsPerPage}`}
+            options={rowsPerPageOptions.map((size) => ({
+              value: `${size}`,
+              label: `${size} rows`
+            }))}
+            onchange={(value) => {
+              table.setPageSize(Number(value))
+            }}
+            placeholder="Rows per page"
+            disablePlaceholder={true}
+            aria-label="Rows per page"
+          />
+        </div>
+      {/if}
+    </div>
+    {#if totalItems > 0}
+      <span class="text-sm text-foreground-default-secondary">
+        {formatNumber(totalItems)}
+        {itemsLabel}
+      </span>
+    {/if}
+  </div>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/data-table/data-table-pagination.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DataTablePaginationProps } from './data-table-types.js';
+declare const DataTablePagination: import("svelte").Component<DataTablePaginationProps<any>, {}, "">;
+type DataTablePagination = ReturnType<typeof DataTablePagination>;
+export default DataTablePagination;

package/dist/data-table/data-table-svelte.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type RowData, type TableOptions } from "@tanstack/table-core";
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
+type MaybeThunk<T extends object> = T | (() => T | null | undefined);
+type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R] ? H & Intersection<R> : unknown) & {};
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+export declare function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(...sources: Sources): Intersection<{
+    [K in keyof Sources]: Sources[K];
+}>;
+export {};

package/dist/data-table/data-table-svelte.svelte.js

@@ -0,0 +1,111 @@
+import { createTable, } from "@tanstack/table-core";
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export function createSvelteTable(options) {
+    const resolvedOptions = mergeObjects({
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, options) => {
+            return mergeObjects(defaultOptions, options);
+        },
+    }, options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    function updateOptions() {
+        table.setOptions((prev) => {
+            return mergeObjects(prev, options, {
+                state: mergeObjects(state, options.state || {}),
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onStateChange: (updater) => {
+                    if (updater instanceof Function)
+                        state = updater(state);
+                    else
+                        state = mergeObjects(state, updater);
+                    options.onStateChange?.(updater);
+                },
+            });
+        });
+    }
+    updateOptions();
+    $effect.pre(() => {
+        updateOptions();
+    });
+    return table;
+}
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeObjects(...sources) {
+    const resolve = (src) => typeof src === "function" ? (src() ?? undefined) : src;
+    const findSourceWithKey = (key) => {
+        for (let i = sources.length - 1; i >= 0; i--) {
+            const obj = resolve(sources[i]);
+            if (obj && key in obj)
+                return obj;
+        }
+        return undefined;
+    };
+    return new Proxy(Object.create(null), {
+        get(_, key) {
+            const src = findSourceWithKey(key);
+            return src?.[key];
+        },
+        has(_, key) {
+            return !!findSourceWithKey(key);
+        },
+        ownKeys() {
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            const all = new Set();
+            for (const s of sources) {
+                const obj = resolve(s);
+                if (obj) {
+                    for (const k of Reflect.ownKeys(obj)) {
+                        all.add(k);
+                    }
+                }
+            }
+            return [...all];
+        },
+        getOwnPropertyDescriptor(_, key) {
+            const src = findSourceWithKey(key);
+            if (!src)
+                return undefined;
+            return {
+                configurable: true,
+                enumerable: true,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                value: src[key],
+                writable: true,
+            };
+        },
+    });
+}

package/dist/data-table/data-table-toolbar.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" generics="TData">
+  import type { Table } from '@tanstack/table-core'
+  import type { Snippet } from 'svelte'
+  import { DataTableViewOptions } from './index.js'
+
+  let { table, filters }: { table: Table<TData>; filters?: Snippet } = $props()
+</script>
+
+<div class="flex items-center justify-between">
+  {#if filters}
+    <div class="flex-1">
+      {@render filters()}
+    </div>
+  {/if}
+  <DataTableViewOptions {table} />
+</div>

package/dist/data-table/data-table-toolbar.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Table } from '@tanstack/table-core';
+import type { Snippet } from 'svelte';
+declare function $$render<TData>(): {
+    props: {
+        table: Table<TData>;
+        filters?: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableToolbar: $$IsomorphicComponent;
+type DataTableToolbar<TData> = InstanceType<typeof DataTableToolbar<TData>>;
+export default DataTableToolbar;