@invopop/popui 0.1.35 → 0.1.41

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,115 @@
+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(() => {
+        // Access data and columns to track them - this reads but doesn't write
+        // so it won't cause infinite loops
+        void options.data;
+        void options.columns;
+        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,19 @@
+<script lang="ts" generics="TData">
+  import type { Table } from '@tanstack/table-core'
+  import type { Snippet } from 'svelte'
+  import { DataTableViewOptions } from './index.js'
+  import clsx from 'clsx'
+
+  let { table, filters, frozenColumns, onFreezeColumn, disabled = false }: { table: Table<TData>; filters?: Snippet; frozenColumns: Set<string>; onFreezeColumn: (columnId: string) => void; disabled?: boolean } = $props()
+</script>
+
+<div class={clsx('flex items-center justify-between px-4 py-2.5', {
+  'pointer-events-none opacity-30': disabled
+})}>
+  {#if filters}
+    <div class="flex-1">
+      {@render filters()}
+    </div>
+  {/if}
+  <DataTableViewOptions {table} {frozenColumns} {onFreezeColumn} />
+</div>

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

@@ -0,0 +1,32 @@
+import type { Table } from '@tanstack/table-core';
+import type { Snippet } from 'svelte';
+declare function $$render<TData>(): {
+    props: {
+        table: Table<TData>;
+        filters?: Snippet;
+        frozenColumns: Set<string>;
+        onFreezeColumn: (columnId: string) => void;
+        disabled?: boolean;
+    };
+    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;

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

@@ -0,0 +1,196 @@
+import type { Component, Snippet } from 'svelte';
+import type { StatusType, AnyProp, TableAction, EmptyStateProps, TableSortBy } from '../types.js';
+import type { IconSource } from '@steeze-ui/svelte-icon';
+import type { Table, Row, Header, Cell } from '@tanstack/table-core';
+import type { RenderComponentConfig, RenderSnippetConfig } from './render-helpers.js';
+import type BaseDropdown from '../BaseDropdown.svelte';
+export type CellType = 'text' | 'boolean' | 'tag' | 'date' | 'currency' | 'uuid' | 'custom';
+export type StickyCellWrapperSnippet = Snippet<[
+    {
+        children: any;
+        align?: 'left' | 'right';
+        isFirst?: boolean;
+        isLast?: boolean;
+        isFrozen?: boolean;
+        isLastFrozen?: boolean;
+    }
+]>;
+export interface BooleanCellConfig {
+    icon?: IconSource;
+    iconClass?: string;
+    showWhenTrue?: boolean;
+    showWhenFalse?: boolean;
+    hintWhenTrue?: string;
+    hintWhenFalse?: string;
+}
+export type CellConfig = TextCellConfig | BooleanCellConfig | TagCellConfig | DateCellConfig | CurrencyCellConfig | UuidCellConfig;
+export interface CurrencyCellConfig {
+    className?: string;
+}
+export interface DataTableColumn<TData> {
+    id: string;
+    accessorKey?: keyof TData;
+    header?: string;
+    cellType?: CellType;
+    cellConfig?: CellConfig;
+    cell?: Snippet<[TData]> | ((value: any, row: TData) => Snippet | Component | string | RenderComponentConfig<any> | RenderSnippetConfig<any>);
+    enableSorting?: boolean;
+    enableHiding?: boolean;
+    enableResizing?: boolean;
+    disableColumnFilter?: boolean;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    meta?: DataTableColumnMeta;
+    loadingConfig?: LoadingConfig;
+}
+export interface DataTableColumnMeta {
+    cellType?: CellType;
+    dbField?: string;
+    disableColumnFilter?: boolean;
+    filterIcon?: IconSource;
+    filterLabel?: string;
+    filterOptions?: Array<{
+        value: string;
+        label: string;
+        [key: string]: any;
+    }>;
+    filterType?: 'select' | 'text' | 'numeric' | 'date' | 'uuid';
+    loadingConfig?: LoadingConfig;
+}
+export interface DataTableCellProps<TData> {
+    cell: Cell<TData, unknown>;
+    index: number;
+    visibleCells: Cell<TData, unknown>[];
+    allCells: Cell<TData, unknown>[];
+    frozenColumns: Set<string>;
+    loading?: boolean;
+    StickyCellWrapper: StickyCellWrapperSnippet;
+}
+export interface DataTableHeaderCellProps<TData> {
+    header: Header<TData, unknown>;
+    index: number;
+    headers: Header<TData, unknown>[];
+    frozenColumns: Set<string>;
+    columnDropdowns?: Record<string, BaseDropdown>;
+    onSortingChange?: (columnId: string, direction: TableSortBy) => void;
+    onFilterChange?: (columnId: string) => void;
+    onFreezeChange?: (columnId: string) => void;
+    manualPagination?: boolean;
+    loading?: boolean;
+}
+export interface DataTablePaginationProps<T> {
+    table: Table<T>;
+    id?: string;
+    class?: string;
+    showRowsPerPage?: boolean;
+    rowsPerPageOptions?: number[];
+    itemsLabel?: string;
+    children?: Snippet;
+    onPageChange?: (pageIndex: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    data?: T[];
+    rowCount?: number;
+    manualPagination?: boolean;
+    disabled?: boolean;
+    disableJumpToPage?: boolean;
+}
+export interface DataTableRowProps<TData> {
+    row: Row<TData>;
+    rowIndex: number;
+    frozenColumns: Set<string>;
+    focusedRowIndex: number;
+    loading?: boolean;
+    onRowClick?: (row: TData) => void;
+    getRowClassName?: (row: TData) => string;
+    getRowState?: (row: TData) => {
+        isSuccess?: boolean;
+        isError?: boolean;
+        isWarning?: boolean;
+    };
+    StickyCellWrapper: StickyCellWrapperSnippet;
+}
+export interface DataTableProps<TData> {
+    data: TData[];
+    columns: DataTableColumn<TData>[];
+    loading?: boolean;
+    disableSelection?: boolean;
+    disablePagination?: boolean;
+    disableKeyboardNavigation?: boolean;
+    disableControls?: boolean;
+    disableJumpToPage?: boolean;
+    rowActions?: TableAction[];
+    getRowActions?: (row: TData) => TableAction[];
+    onRowAction?: (action: AnyProp, row: TData) => void;
+    initialPageSize?: number;
+    initialPage?: number;
+    initialSortColumn?: string;
+    initialSortDirection?: TableSortBy;
+    initialFrozenColumns?: string[];
+    initialColumnOrder?: string[];
+    initialColumnVisibility?: Record<string, boolean>;
+    initialColumnSizing?: Record<string, number>;
+    pageSizeOptions?: number[];
+    emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
+    onRowClick?: (row: TData) => void;
+    onSelectionChange?: (selectedRows: TData[]) => void;
+    filters?: Snippet;
+    paginationSlot?: Snippet;
+    children?: Snippet;
+    manualPagination?: boolean;
+    manualSorting?: boolean;
+    pageCount?: number;
+    rowCount?: number;
+    onPageChange?: (pageIndex: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    onSortingChange?: (columnId: string, direction: TableSortBy) => void;
+    onFilterChange?: (columnId: string) => void;
+    onFreezeChange?: (columnId: string) => void;
+    onColumnResize?: (columnSizes: Record<string, number>) => void;
+    onColumnOrderChange?: (columnOrder: string[]) => void;
+    onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
+    getRowClassName?: (row: TData) => string;
+    getRowState?: (row: TData) => {
+        isSuccess?: boolean;
+        isError?: boolean;
+        isWarning?: boolean;
+    };
+}
+export interface DateCellConfig {
+    className?: string;
+}
+export interface CellSkeletonProps {
+    isBoolean?: boolean;
+    loadingConfig?: LoadingConfig;
+    withPadding?: boolean;
+}
+export interface LoadingConfig {
+    lines?: number;
+    showAvatar?: boolean;
+    avatarSize?: number;
+}
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData, TValue> {
+        cellType?: CellType;
+        disableColumnFilter?: boolean;
+        loadingConfig?: LoadingConfig;
+    }
+}
+export interface TagCellConfig {
+    options: Array<{
+        value: string;
+        label: string;
+        color: StatusType;
+    }>;
+    showDot?: boolean;
+}
+export interface TextCellConfig {
+    className?: string;
+}
+export interface UuidCellConfig {
+    prefixLength?: number;
+    suffixLength?: number;
+    full?: boolean;
+    disabled?: boolean;
+    onCopy?: (value: string) => void;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/data-table/data-table-view-options.svelte

@@ -0,0 +1,126 @@
+<script lang="ts" generics="TData">
+  import { Sliders, Drag } from '@invopop/ui-icons'
+  import type { Table } from '@tanstack/table-core'
+  import type { DrawerOption, DrawerGroup } from '../types.js'
+  import BaseDropdown from '../BaseDropdown.svelte'
+  import DrawerContext from '../DrawerContext.svelte'
+  import InputToggle from '../InputToggle.svelte'
+  import BaseButton from '../BaseButton.svelte'
+  import { capitalize } from '../helpers.js'
+
+  let {
+    table,
+    frozenColumns,
+    onFreezeColumn
+  }: {
+    table: Table<TData>
+    frozenColumns: Set<string>
+    onFreezeColumn: (columnId: string) => void
+  } = $props()
+
+  const groups: DrawerGroup[] = [
+    {
+      label: 'Frozen columns',
+      slug: 'frozen',
+      emptyDescription: 'Drop items to this list',
+      hideCounter: true
+    },
+    {
+      label: 'Table options',
+      slug: 'regular',
+      emptyDescription: 'Drop items to this list',
+      hideCounter: true
+    }
+  ]
+
+  let itemsWithActions = $derived.by(() => {
+    const columnOrder = table.getState().columnOrder
+    const allColumns = table.getAllColumns()
+
+    let orderedColumns
+    // If there's a custom order, use it; otherwise use default order
+    if (columnOrder.length > 0) {
+      orderedColumns = columnOrder
+        .map((id) => allColumns.find((col) => col.id === id))
+        .filter((col) => col && col.id !== 'select' && col.id !== 'actions')
+    } else {
+      orderedColumns = allColumns.filter((col) => col.id !== 'select' && col.id !== 'actions')
+    }
+
+    return orderedColumns.map((col) => {
+      const isFrozen = frozenColumns.has(col?.id || '')
+      return {
+        label: (col?.columnDef.header as string) || capitalize(col?.id || ''),
+        value: col?.id,
+        icon: Drag,
+        action: toggleAction,
+        groupBy: isFrozen ? 'frozen' : 'regular'
+      }
+    }) as DrawerOption[]
+  })
+
+  function handleDropItem(groupsDistribution: Record<string, DrawerOption[]>) {
+    const frozenItems = groupsDistribution['frozen'] || []
+    const regularItems = groupsDistribution['regular'] || []
+
+    // Build sets of what should be frozen and regular after the drop
+    const shouldBeFrozen = new Set(frozenItems.map((item) => item.value as string))
+    const shouldBeRegular = new Set(regularItems.map((item) => item.value as string))
+
+    // Freeze columns that are in the frozen group but not currently frozen
+    shouldBeFrozen.forEach((columnId) => {
+      if (!frozenColumns.has(columnId)) {
+        onFreezeColumn(columnId)
+      }
+    })
+
+    // Unfreeze columns that are in the regular group but currently frozen
+    shouldBeRegular.forEach((columnId) => {
+      if (frozenColumns.has(columnId)) {
+        onFreezeColumn(columnId)
+      }
+    })
+
+    // Get all column IDs from the table
+    const allColumnIds = table.getAllColumns().map((col) => col.id)
+    const selectColumn = 'select'
+    const actionsColumn = 'actions'
+
+    // Build the final column order: select, frozen (in order), regular (in order), actions
+    const frozenOrder = frozenItems.map((item) => item.value as string)
+    const regularOrder = regularItems.map((item) => item.value as string)
+
+    const finalOrder = [
+      ...(allColumnIds.includes(selectColumn) ? [selectColumn] : []),
+      ...frozenOrder,
+      ...regularOrder,
+      ...(allColumnIds.includes(actionsColumn) ? [actionsColumn] : [])
+    ]
+
+    table.setColumnOrder(finalOrder)
+  }
+</script>
+
+{#snippet toggleAction(item: DrawerOption)}
+  {@const column = table.getColumn(String(item.value))}
+  {#if column?.getCanHide()}
+    <InputToggle
+      class="cursor-default"
+      checked={column?.getIsVisible() ?? false}
+      onchange={(v) => column?.toggleVisibility(!!v)}
+    />
+  {/if}
+{/snippet}
+
+<BaseDropdown class="ms-auto hidden lg:flex">
+  {#snippet trigger()}
+    <BaseButton icon={Sliders} variant="outline" size="md" />
+  {/snippet}
+  <DrawerContext
+    items={itemsWithActions}
+    {groups}
+    draggable
+    collapsibleGroups={false}
+    ondropitem={handleDropItem}
+  />
+</BaseDropdown>

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

@@ -0,0 +1,29 @@
+import type { Table } from '@tanstack/table-core';
+declare function $$render<TData>(): {
+    props: {
+        table: Table<TData>;
+        frozenColumns: Set<string>;
+        onFreezeColumn: (columnId: string) => void;
+    };
+    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 DataTableViewOptions: $$IsomorphicComponent;
+type DataTableViewOptions<TData> = InstanceType<typeof DataTableViewOptions<TData>>;
+export default DataTableViewOptions;