runeforge 0.0.53 → 0.0.55

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

@@ -1,6 +1,6 @@
 import { SvelteSet } from 'svelte/reactivity';
-import type { FilterSnapshot, ServerPagination, SortDirection, TableQuery } from '../../types/table.js';
-import type { Snippet } from 'svelte';
+import type { FilterSnapshot, ReorderOptions, ServerPagination, SortDirection, TableQuery } from '../../types/table.js';
+import { type Snippet } from 'svelte';
 import type { ColumnDefinition } from '../../types/crud.js';
 declare function $$render<T extends object = Record<string, unknown>>(): {
     props: {
@@ -27,6 +27,15 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         /** Current ordering + filters snapshot, kept in sync for callers that
          * need to replicate the active query (e.g. exporting server-side). */
         query?: TableQuery;
+        /** Turns on drag-to-reorder. Per-column filters are suppressed and row
+         * order is fully owned by `reorder.compare`/`reorder.attribute` while
+         * it's active — ignored entirely in server-pagination mode
+         * (`pagination` set), since the full row set needs to be reachable
+         * client-side for drag positions to be meaningful. */
+        reorder?: ReorderOptions<T>;
+        /** Fires after a drag settles with the complete reordered row list
+         * (client mode only). The caller decides how to persist it. */
+        onReorder?: (rows: T[]) => void;
     };
     exports: {};
     bindings: "selected" | "visibleRows" | "query";

package/dist/components/table/Paginator.svelte

@@ -1,113 +1,113 @@
-<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++;
-	}
-
-	function buildPages(current: number, total: number): number[] {
-		if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
-
-		// Local, immediately-discarded dedup set for this one calculation, not
-		// reactive state — a plain Set is correct here.
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const visible = new Set<number>();
-		visible.add(1);
-		visible.add(total);
-		for (let i = Math.max(1, current - 2); i <= Math.min(total, current + 2); i++) {
-			visible.add(i);
-		}
-
-		const sorted = Array.from(visible).sort((a, b) => a - b);
-		const result: number[] = [];
-		for (let i = 0; i < sorted.length; i++) {
-			if (i > 0 && sorted[i] - sorted[i - 1] > 1) result.push(0);
-			result.push(sorted[i]);
-		}
-		return result;
-	}
-
-	const pages = $derived(buildPages(page, totalPages));
-	const inputWidth = $derived(`${String(totalPages).length + 4}ch`);
-
-	function handlePageInput(e: KeyboardEvent) {
-		if (e.key !== 'Enter') return;
-		const val = parseInt((e.currentTarget as HTMLInputElement).value);
-		if (!isNaN(val) && val >= 1 && val <= totalPages) {
-			page = val;
-		} else {
-			(e.currentTarget as HTMLInputElement).value = String(page);
-		}
-	}
-
-	function resetInput(e: FocusEvent) {
-		(e.currentTarget as HTMLInputElement).value = String(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 pages as p, i (i)}
-				{#if p === 0}
-					<Button class="join-item btn-sm" disabled>…</Button>
-				{:else if p === page}
-					<input
-						type="number"
-						class="join-item btn btn-sm no-spinner text-center"
-						style="background-color: var(--color-base-100); width: {inputWidth};"
-						min="1"
-						max={totalPages}
-						value={page}
-						onkeydown={handlePageInput}
-						onblur={resetInput}
-					/>
-				{:else}
-					<Button class="join-item btn-sm" onclick={() => (page = p)}>{p}</Button>
-				{/if}
-			{/each}
-
-			<Button class="join-item btn-sm" disabled={page === totalPages} onclick={next}>»</Button>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.no-spinner {
-		appearance: none;
-		-moz-appearance: textfield;
-	}
-
-	.no-spinner::-webkit-outer-spin-button,
-	.no-spinner::-webkit-inner-spin-button {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-</style>
-
+<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++;
+	}
+
+	function buildPages(current: number, total: number): number[] {
+		if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+
+		// Local, immediately-discarded dedup set for this one calculation, not
+		// reactive state — a plain Set is correct here.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const visible = new Set<number>();
+		visible.add(1);
+		visible.add(total);
+		for (let i = Math.max(1, current - 2); i <= Math.min(total, current + 2); i++) {
+			visible.add(i);
+		}
+
+		const sorted = Array.from(visible).sort((a, b) => a - b);
+		const result: number[] = [];
+		for (let i = 0; i < sorted.length; i++) {
+			if (i > 0 && sorted[i] - sorted[i - 1] > 1) result.push(0);
+			result.push(sorted[i]);
+		}
+		return result;
+	}
+
+	const pages = $derived(buildPages(page, totalPages));
+	const inputWidth = $derived(`${String(totalPages).length + 4}ch`);
+
+	function handlePageInput(e: KeyboardEvent) {
+		if (e.key !== 'Enter') return;
+		const val = parseInt((e.currentTarget as HTMLInputElement).value);
+		if (!isNaN(val) && val >= 1 && val <= totalPages) {
+			page = val;
+		} else {
+			(e.currentTarget as HTMLInputElement).value = String(page);
+		}
+	}
+
+	function resetInput(e: FocusEvent) {
+		(e.currentTarget as HTMLInputElement).value = String(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 pages as p, i (i)}
+				{#if p === 0}
+					<Button class="join-item btn-sm" disabled>…</Button>
+				{:else if p === page}
+					<input
+						type="number"
+						class="join-item btn btn-sm no-spinner text-center"
+						style="background-color: var(--color-base-100); width: {inputWidth};"
+						min="1"
+						max={totalPages}
+						value={page}
+						onkeydown={handlePageInput}
+						onblur={resetInput}
+					/>
+				{:else}
+					<Button class="join-item btn-sm" onclick={() => (page = p)}>{p}</Button>
+				{/if}
+			{/each}
+
+			<Button class="join-item btn-sm" disabled={page === totalPages} onclick={next}>»</Button>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.no-spinner {
+		appearance: none;
+		-moz-appearance: textfield;
+	}
+
+	.no-spinner::-webkit-outer-spin-button,
+	.no-spinner::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+</style>
+

package/dist/components/table/SortHeader.svelte

@@ -1,43 +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}
+<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/TableBody.svelte

@@ -1,70 +1,150 @@
-<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 data-testid="paginated-table-body">
-  {#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>
+<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, ReorderOptions } from '../../types/table.js';
+  import { sortableRows, type SortEndIndices } from './sortable.js';
+  import { moveIndexedRows } from './utils.js';
+  import Button from '../form/Button.svelte';
+  import { getIconSet } from '../../icons/context.js';
+  import { defaultIconSet } from '../../icons/sets/default.js';
+  import { getStrings } from '../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    columns,
+    rows,
+    selectable,
+    selected,
+    onToggle,
+    colCount,
+    rowActions,
+    reorder,
+    visibleRange,
+    onDragStart,
+    onReorder,
+  }: {
+    columns: ColumnDefinition<T>[];
+    rows: IndexedRow<T>[];
+    selectable: boolean;
+    selected: SvelteSet<number>;
+    onToggle: (index: number) => void;
+    colCount: number;
+    rowActions?: Snippet<[T]>;
+    reorder?: ReorderOptions<T>;
+    /** Reorder mode only: positions within `rows` (not the `index` field)
+     * that are actually on screen — the rest render `hidden` so they stay in
+     * the DOM (and reachable by SortableJS) across a page flip mid-drag. */
+    visibleRange?: { start: number; end: number };
+    onDragStart?: () => void;
+    /** Fires once a drag settles, with the complete row list in its new
+     * order — computed from SortableJS's own before/after indices, correct
+     * uniformly for a single-row drag and a `multiDrag` group move alike. */
+    onReorder?: (rows: IndexedRow<T>[]) => void;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+
+  let tbodyEl: HTMLElement | undefined = $state();
+
+  function handleDragEnd(indices: SortEndIndices) {
+    const fromIndices =
+      indices.oldIndicies.length > 0 ? indices.oldIndicies : [indices.oldIndex ?? -1];
+    const toIndex =
+      indices.newIndicies.length > 0 ? Math.min(...indices.newIndicies) : (indices.newIndex ?? -1);
+    onReorder?.(moveIndexedRows(rows, fromIndices, toIndex));
+  }
+
+  // Mirrors the checkbox selection into SortableJS's own MultiDrag selection
+  // registry, so a `multiDrag` drag moves whatever's currently checked
+  // instead of relying on the plugin's own click/modifier-key selection UX.
+  $effect(() => {
+    const utils = reorder?.multiDrag ? reorder.sortable.utils : undefined;
+    if (!utils || !tbodyEl) return;
+    for (const { index } of rows) {
+      const el = tbodyEl.querySelector(`[data-row-key="${index}"]`);
+      if (!(el instanceof HTMLElement)) continue;
+      if (selected.has(index)) utils.select(el);
+      else utils.deselect(el);
+    }
+  });
+</script>
+
+<tbody
+  data-testid="paginated-table-body"
+  bind:this={tbodyEl}
+  use:sortableRows={{
+    enabled: !!reorder,
+    sortable: reorder?.sortable,
+    multiDrag: reorder?.multiDrag,
+    onStart: () => onDragStart?.(),
+    onEnd: handleDragEnd,
+  }}
+>
+  {#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 }, position (index)}
+      {@const isHidden = !!visibleRange && (position < visibleRange.start || position >= visibleRange.end)}
+      <tr
+        class="hover"
+        class:group={!!reorder}
+        class:cursor-pointer={selectable}
+        data-row-key={index}
+        style:display={isHidden ? 'none' : null}
+        onclick={selectable ? () => onToggle(index) : undefined}
+      >
+        {#if reorder}
+          {@const GripIcon = reorder.icon ?? icons.grip}
+          <td class="w-10 border-l-4 border-base-content/10 p-0 group-hover:border-primary/50">
+            <Button
+              type="button"
+              btn={false}
+              data-reorder-handle
+              class="flex h-full w-full cursor-grab items-center justify-center py-2 text-base-content/40 active:cursor-grabbing"
+              title={strings.reorder}
+              aria-label={strings.reorder}
+              onclick={(e) => e.stopPropagation()}
+            >
+              {#if GripIcon}
+                <GripIcon class="size-4" />
+              {/if}
+            </Button>
+          </td>
+        {/if}
+        {#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

@@ -1,7 +1,7 @@
 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';
+import type { IndexedRow, ReorderOptions } from '../../types/table.js';
 declare function $$render<T extends object>(): {
     props: {
         columns: ColumnDefinition<T>[];
@@ -11,6 +11,19 @@ declare function $$render<T extends object>(): {
         onToggle: (index: number) => void;
         colCount: number;
         rowActions?: Snippet<[T]>;
+        reorder?: ReorderOptions<T>;
+        /** Reorder mode only: positions within `rows` (not the `index` field)
+         * that are actually on screen — the rest render `hidden` so they stay in
+         * the DOM (and reachable by SortableJS) across a page flip mid-drag. */
+        visibleRange?: {
+            start: number;
+            end: number;
+        };
+        onDragStart?: () => void;
+        /** Fires once a drag settles, with the complete row list in its new
+         * order — computed from SortableJS's own before/after indices, correct
+         * uniformly for a single-row drag and a `multiDrag` group move alike. */
+        onReorder?: (rows: IndexedRow<T>[]) => void;
     };
     exports: {};
     bindings: "";