runeforge 0.0.1

package/dist/components/table/PaginatedTable.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+  import { SvelteSet } from 'svelte/reactivity';
+  import TableBody from './TableBody.svelte';
+  import Paginator from './Paginator.svelte';
+  import TableHeader from './TableHeader.svelte';
+  import { SortState, FilterState } from './state.svelte.js';
+  import { distinctEntries } from './utils.js';
+  import type { IndexedRow } from '../../types/table.js';
+  import type { Snippet } from 'svelte';
+  import type { ColumnDefinition } from '../../types/crud.js';
+  import { getStrings } from '../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    data = [] as T[],
+    columns = [] as ColumnDefinition<T>[],
+    pageSize = 10,
+    selectable = true,
+    selected = $bindable(new SvelteSet<number>()),
+    rowActions = undefined as Snippet<[T]> | undefined,
+    actionsLabel = strings.actions,
+  }: {
+    data?: T[];
+    columns?: ColumnDefinition<T>[];
+    pageSize?: number;
+    selectable?: boolean;
+    selected?: SvelteSet<number>;
+    rowActions?: Snippet<[T]>;
+    actionsLabel?: string;
+  } = $props();
+
+  const sort = new SortState();
+  const filter = new FilterState();
+
+  let currentPage = $state(1);
+
+  const distinctValues = $derived(distinctEntries(data, columns));
+
+  const indexed = $derived(data.map((row, index): IndexedRow<T> => ({ row, index })));
+  const filtered = $derived(indexed.filter(({ row }) => filter.matches(row, columns)));
+  const sorted = $derived(sort.apply(filtered, columns));
+
+  const totalPages = $derived(Math.ceil(sorted.length / pageSize));
+  const pageStart = $derived((currentPage - 1) * pageSize);
+  const pageData = $derived(sorted.slice(pageStart, pageStart + pageSize));
+  const allChecked = $derived(pageData.length > 0 && pageData.every((e) => selected.has(e.index)));
+  const someChecked = $derived(pageData.some((e) => selected.has(e.index)));
+
+  $effect(() => {
+    if (currentPage > totalPages && totalPages > 0) currentPage = totalPages;
+  });
+
+  function resetPage() {
+    currentPage = 1;
+  }
+
+  function toggleAll() {
+    if (allChecked) pageData.forEach((e) => selected.delete(e.index));
+    else pageData.forEach((e) => selected.add(e.index));
+  }
+
+  function toggleItem(index: number) {
+    if (selected.has(index)) selected.delete(index);
+    else selected.add(index);
+  }
+
+  const colCount = $derived(columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0));
+</script>
+
+<div class="flex flex-col gap-6">
+  <div class="min-w-0 overflow-x-auto rounded-box border border-base-content/10">
+    <table class="table table-zebra table-xs w-full text-xs sm:table-md sm:text-base">
+      <TableHeader
+        {columns}
+        {selectable}
+        {allChecked}
+        {someChecked}
+        onToggleAll={toggleAll}
+        {sort}
+        {filter}
+        {distinctValues}
+        hasRowActions={!!rowActions}
+        {actionsLabel}
+        onchange={resetPage}
+      />
+      <TableBody
+        {columns}
+        rows={pageData}
+        {selectable}
+        {selected}
+        onToggle={toggleItem}
+        {colCount}
+        {rowActions}
+      />
+    </table>
+  </div>
+
+  <Paginator
+    bind:page={currentPage}
+    {totalPages}
+    {pageStart}
+    {pageSize}
+    total={sorted.length}
+  />
+</div>

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

@@ -0,0 +1,35 @@
+import { SvelteSet } from 'svelte/reactivity';
+import type { Snippet } from 'svelte';
+import type { ColumnDefinition } from '../../types/crud.js';
+declare function $$render<T extends object = Record<string, unknown>>(): {
+    props: {
+        data?: T[];
+        columns?: ColumnDefinition<T>[];
+        pageSize?: number;
+        selectable?: boolean;
+        selected?: SvelteSet<number>;
+        rowActions?: Snippet<[T]>;
+        actionsLabel?: string;
+    };
+    exports: {};
+    bindings: "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object = Record<string, unknown>>(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 object = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PaginatedTable: $$IsomorphicComponent;
+type PaginatedTable<T extends object = Record<string, unknown>> = InstanceType<typeof PaginatedTable<T>>;
+export default PaginatedTable;

package/dist/components/table/Paginator.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import Button from '../form/Button.svelte';
+  import { getStrings } from '../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    page = $bindable(1),
+    totalPages,
+    pageStart,
+    pageSize,
+    total,
+  }: {
+    page?: number;
+    totalPages: number;
+    pageStart: number;
+    pageSize: number;
+    total: number;
+  } = $props();
+
+  function prev() {
+    if (page > 1) page--;
+  }
+  function next() {
+    if (page < totalPages) page++;
+  }
+</script>
+
+{#if totalPages > 1}
+  <div class="flex items-center justify-between">
+    <span class="text-sm text-base-content/60">
+      {strings.showing(pageStart + 1, Math.min(pageStart + pageSize, total), total)}
+    </span>
+
+    <div class="join">
+      <Button
+        class="join-item btn-sm"
+        disabled={page === 1}
+        onclick={prev}
+      >
+        «
+      </Button>
+
+      {#each Array.from({ length: totalPages }, (_, i) => i + 1) as n (n)}
+        <Button
+          class={['join-item btn-sm', n === page && 'btn-active']}
+          onclick={() => (page = n)}
+        >
+          {n}
+        </Button>
+      {/each}
+
+      <Button
+        class="join-item btn-sm"
+        disabled={page === totalPages}
+        onclick={next}
+      >
+        »
+      </Button>
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    page?: number;
+    totalPages: number;
+    pageStart: number;
+    pageSize: number;
+    total: number;
+};
+declare const Paginator: import("svelte").Component<$$ComponentProps, {}, "page">;
+type Paginator = ReturnType<typeof Paginator>;
+export default Paginator;

package/dist/components/table/SortHeader.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import Button from '../form/Button.svelte';
+  import { getIconSet } from '../../icons/context.js';
+  import { defaultIconSet } from '../../icons/sets/default.js';
+  import type { SortDirection } from '../../types/table.js';
+
+  let {
+    title,
+    sortable = true,
+    direction = null,
+    onsort,
+  }: {
+    title: string;
+    sortable?: boolean;
+    direction?: SortDirection | null;
+    onsort?: () => void;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+</script>
+
+{#if sortable}
+  <Button
+    btn={false}
+    class="flex cursor-pointer items-center gap-1 capitalize hover:text-primary"
+    onclick={onsort}
+    title="Ordenar"
+  >
+    <span>{title}</span>
+    {#if direction === 'desc'}
+      {@const Icon = icons.sortDesc}
+      <Icon class="size-3" />
+    {:else if direction === 'asc'}
+      {@const Icon = icons.sortAsc}
+      <Icon class="size-3" />
+    {:else}
+      {@const Icon = icons.sortNone}
+      <Icon class="size-3 opacity-30" />
+    {/if}
+  </Button>
+{:else}
+  <span class="capitalize">{title}</span>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { SortDirection } from '../../types/table.js';
+type $$ComponentProps = {
+    title: string;
+    sortable?: boolean;
+    direction?: SortDirection | null;
+    onsort?: () => void;
+};
+declare const SortHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type SortHeader = ReturnType<typeof SortHeader>;
+export default SortHeader;

package/dist/components/table/TableBody.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" generics="T extends object">
+  import type { Snippet } from 'svelte';
+  import type { SvelteSet } from 'svelte/reactivity';
+  import type { ColumnDefinition } from '../../types/crud.js';
+  import type { IndexedRow } from '../../types/table.js';
+
+  let {
+    columns,
+    rows,
+    selectable,
+    selected,
+    onToggle,
+    colCount,
+    rowActions,
+  }: {
+    columns: ColumnDefinition<T>[];
+    rows: IndexedRow<T>[];
+    selectable: boolean;
+    selected: SvelteSet<number>;
+    onToggle: (index: number) => void;
+    colCount: number;
+    rowActions?: Snippet<[T]>;
+  } = $props();
+</script>
+
+<tbody>
+  {#if rows.length === 0}
+    <tr>
+      <td colspan={colCount} class="py-10 text-center text-base-content/50">
+        Sin registros
+      </td>
+    </tr>
+  {:else}
+    {#each rows as { row, index } (index)}
+      <tr
+        class="hover"
+        class:cursor-pointer={selectable}
+        onclick={selectable ? () => onToggle(index) : undefined}
+      >
+        {#if selectable}
+          <td>
+            <input
+              type="checkbox"
+              class="checkbox checkbox-sm"
+              checked={selected.has(index)}
+              onchange={() => onToggle(index)}
+              onclick={(e) => e.stopPropagation()}
+            />
+          </td>
+        {/if}
+        {#each columns as col (col.attribute)}
+          <td>
+            {#if col.component}
+              {@const Cell = col.component}
+              <Cell value={row[col.attribute]} row={row} />
+            {:else if col.formatter}
+              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+              {@html col.formatter(row[col.attribute], row)}
+            {:else}
+              {String(row[col.attribute] ?? '')}
+            {/if}
+          </td>
+        {/each}
+        {#if rowActions}
+          <td class="text-right">{@render rowActions(row)}</td>
+        {/if}
+      </tr>
+    {/each}
+  {/if}
+</tbody>

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

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import type { SvelteSet } from 'svelte/reactivity';
+import type { ColumnDefinition } from '../../types/crud.js';
+import type { IndexedRow } from '../../types/table.js';
+declare function $$render<T extends object>(): {
+    props: {
+        columns: ColumnDefinition<T>[];
+        rows: IndexedRow<T>[];
+        selectable: boolean;
+        selected: SvelteSet<number>;
+        onToggle: (index: number) => void;
+        colCount: number;
+        rowActions?: Snippet<[T]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(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 object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableBody: $$IsomorphicComponent;
+type TableBody<T extends object> = InstanceType<typeof TableBody<T>>;
+export default TableBody;

package/dist/components/table/TableHeader.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" generics="T extends object">
+  import SortHeader from './SortHeader.svelte';
+  import ColumnFilter from './ColumnFilter.svelte';
+  import { isSortable, isFilterable } from './utils.js';
+  import type { DistinctEntry } from '../../types/table.js';
+  import type { ColumnDefinition } from '../../types/crud.js';
+  import type { SortState, FilterState } from './state.svelte.js';
+  import { getStrings } from '../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    columns,
+    selectable,
+    allChecked,
+    someChecked,
+    onToggleAll,
+    sort,
+    filter,
+    distinctValues,
+    hasRowActions = false,
+    actionsLabel = strings.actions,
+    onchange,
+  }: {
+    columns: ColumnDefinition<T>[];
+    selectable: boolean;
+    allChecked: boolean;
+    someChecked: boolean;
+    onToggleAll: () => void;
+    sort: SortState;
+    filter: FilterState;
+    distinctValues: Record<string, DistinctEntry<T>[]>;
+    hasRowActions?: boolean;
+    actionsLabel?: string;
+    onchange?: () => void;
+  } = $props();
+
+  function sortBy(col: ColumnDefinition<T>) {
+    if (!isSortable(col)) return;
+    sort.cycle(col.attribute);
+    onchange?.();
+  }
+</script>
+
+<thead class="bg-base-200">
+  <tr>
+    {#if selectable}
+      <th>
+        <input
+          type="checkbox"
+          class="checkbox checkbox-sm"
+          checked={allChecked}
+          indeterminate={someChecked && !allChecked}
+          onchange={onToggleAll}
+        />
+      </th>
+    {/if}
+    {#each columns as col (col.attribute)}
+      {@const title = (col.title ?? col.attribute).replace(/_/g, ' ')}
+      <th>
+        <div class="flex items-center gap-1">
+          <SortHeader
+            {title}
+            sortable={isSortable(col)}
+            direction={sort.directionFor(col.attribute)}
+            onsort={() => sortBy(col)}
+          />
+          {#if isFilterable(col)}
+            <ColumnFilter
+              column={col}
+              entries={distinctValues[col.attribute] ?? []}
+              {filter}
+              {onchange}
+            />
+          {/if}
+        </div>
+      </th>
+    {/each}
+    {#if hasRowActions}
+      <th class="text-right">{actionsLabel}</th>
+    {/if}
+  </tr>
+</thead>

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

@@ -0,0 +1,39 @@
+import type { DistinctEntry } from '../../types/table.js';
+import type { ColumnDefinition } from '../../types/crud.js';
+import type { SortState, FilterState } from './state.svelte.js';
+declare function $$render<T extends object>(): {
+    props: {
+        columns: ColumnDefinition<T>[];
+        selectable: boolean;
+        allChecked: boolean;
+        someChecked: boolean;
+        onToggleAll: () => void;
+        sort: SortState;
+        filter: FilterState;
+        distinctValues: Record<string, DistinctEntry<T>[]>;
+        hasRowActions?: boolean;
+        actionsLabel?: string;
+        onchange?: () => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(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 object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableHeader: $$IsomorphicComponent;
+type TableHeader<T extends object> = InstanceType<typeof TableHeader<T>>;
+export default TableHeader;

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

@@ -0,0 +1,30 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import type { ColumnDefinition } from '../../types/crud.js';
+import type { IndexedRow, SortDirection } from '../../types/table.js';
+export declare class SortState {
+    column: string | null;
+    direction: SortDirection | null;
+    directionFor(attribute: string): SortDirection | null;
+    cycle(attribute: string): void;
+    apply<T extends object>(rows: IndexedRow<T>[], columns: ColumnDefinition<T>[]): IndexedRow<T>[];
+}
+export declare class FilterState {
+    text: SvelteMap<string, string>;
+    values: SvelteMap<string, SvelteSet<string>>;
+    dateRanges: SvelteMap<string, {
+        from: string;
+        to: string;
+    }>;
+    textFor(attribute: string): string;
+    dateRangeFor(attribute: string): {
+        from: string;
+        to: string;
+    };
+    hasActive(attribute: string): boolean;
+    isChecked(attribute: string, value: string): boolean;
+    setText(attribute: string, value: string): void;
+    toggleValue(attribute: string, value: string): void;
+    setDateRange(attribute: string, from: string, to: string): void;
+    clear(attribute: string): void;
+    matches<T extends object>(row: T, columns: ColumnDefinition<T>[]): boolean;
+}

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

@@ -0,0 +1,109 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { cellRenderedText, compare, isFilterable } from './utils.js';
+export class SortState {
+    column = $state(null);
+    direction = $state(null);
+    directionFor(attribute) {
+        return this.column === attribute ? this.direction : null;
+    }
+    cycle(attribute) {
+        if (this.column !== attribute) {
+            this.column = attribute;
+            this.direction = 'desc';
+        }
+        else if (this.direction === 'desc') {
+            this.direction = 'asc';
+        }
+        else {
+            this.column = null;
+            this.direction = null;
+        }
+    }
+    apply(rows, columns) {
+        const attribute = this.column;
+        const direction = this.direction;
+        if (!attribute || !direction)
+            return rows;
+        const col = columns.find((c) => c.attribute === attribute);
+        const factor = direction === 'asc' ? 1 : -1;
+        if (col?.formatter) {
+            return [...rows].sort((a, b) => factor * cellRenderedText(a.row, col).localeCompare(cellRenderedText(b.row, col), undefined, { numeric: true }));
+        }
+        return [...rows].sort((a, b) => factor * compare(a.row[attribute], b.row[attribute]));
+    }
+}
+export class FilterState {
+    text = new SvelteMap();
+    values = new SvelteMap();
+    dateRanges = new SvelteMap();
+    textFor(attribute) {
+        return this.text.get(attribute) ?? '';
+    }
+    dateRangeFor(attribute) {
+        return this.dateRanges.get(attribute) ?? { from: '', to: '' };
+    }
+    hasActive(attribute) {
+        return (this.text.get(attribute)?.length ?? 0) > 0
+            || (this.values.get(attribute)?.size ?? 0) > 0
+            || !!(this.dateRanges.get(attribute)?.from || this.dateRanges.get(attribute)?.to);
+    }
+    isChecked(attribute, value) {
+        return this.values.get(attribute)?.has(value) ?? false;
+    }
+    setText(attribute, value) {
+        if (value)
+            this.text.set(attribute, value);
+        else
+            this.text.delete(attribute);
+    }
+    toggleValue(attribute, value) {
+        let set = this.values.get(attribute);
+        if (!set) {
+            set = new SvelteSet();
+            this.values.set(attribute, set);
+        }
+        if (set.has(value))
+            set.delete(value);
+        else
+            set.add(value);
+    }
+    setDateRange(attribute, from, to) {
+        if (from || to)
+            this.dateRanges.set(attribute, { from, to });
+        else
+            this.dateRanges.delete(attribute);
+    }
+    clear(attribute) {
+        this.text.delete(attribute);
+        this.values.get(attribute)?.clear();
+        this.dateRanges.delete(attribute);
+    }
+    matches(row, columns) {
+        return columns.every((col) => {
+            if (!isFilterable(col))
+                return true;
+            if (col.type === 'datetime') {
+                const range = this.dateRanges.get(col.attribute);
+                if (range?.from || range?.to) {
+                    const raw = row[col.attribute];
+                    const ts = raw ? new Date(raw).getTime() : NaN;
+                    if (isNaN(ts))
+                        return false;
+                    if (range.from && ts < new Date(range.from).getTime())
+                        return false;
+                    if (range.to && ts > new Date(range.to + 'T23:59:59.999').getTime())
+                        return false;
+                }
+                return true;
+            }
+            const cell = cellRenderedText(row, col);
+            const text = this.text.get(col.attribute);
+            if (text && !cell.toLowerCase().includes(text.toLowerCase()))
+                return false;
+            const selected = this.values.get(col.attribute);
+            if (selected && selected.size > 0 && !selected.has(cell))
+                return false;
+            return true;
+        });
+    }
+}

package/dist/components/table/utils.d.ts

@@ -0,0 +1,7 @@
+import type { ColumnDefinition } from '../../types/crud.js';
+import type { DistinctEntry } from '../../types/table.js';
+export declare function cellRenderedText<T extends object>(row: T, col: ColumnDefinition<T>): string;
+export declare function isSortable<T extends object>(col: ColumnDefinition<T>): boolean;
+export declare function isFilterable<T extends object>(col: ColumnDefinition<T>): boolean;
+export declare function compare(a: unknown, b: unknown): number;
+export declare function distinctEntries<T extends object>(data: T[], columns: ColumnDefinition<T>[]): Record<string, DistinctEntry<T>[]>;