runeforge 0.0.16 → 0.0.18

package/dist/components/crud/GenericCRUD.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { AttributeMetadata } from '../../types/attribute.js';
-import type { ActionConfiguration, ColumnDefinition, CustomAction, FieldDefinition } from '../../types/crud.js';
+import type { ActionConfiguration, ColumnDefinition, CustomAction, CustomBulkAction, FieldDefinition, SearchConfiguration } from '../../types/crud.js';
 declare function $$render<T extends object = Record<string, unknown>>(): {
     props: {
         data?: Record<string, unknown>;
@@ -14,6 +14,8 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         read?: ActionConfiguration<T>;
         deletion?: ActionConfiguration<T>;
         actions?: CustomAction<T>[];
+        customBulkActions?: CustomBulkAction<T>[];
+        search?: SearchConfiguration;
         columns?: ColumnDefinition<T>[];
         fields?: FieldDefinition<T>[];
         meta?: Partial<Record<string, AttributeMetadata>>;

package/dist/components/crud/SearchInput.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import { getStrings } from '../../i18n/context.js';
+	import type { SearchConfiguration } from '../../types/crud.js';
+
+	const strings = getStrings();
+
+	let {
+		config = {} as SearchConfiguration
+	}: {
+		config?: SearchConfiguration;
+	} = $props();
+
+	const param = $derived(config.param ?? 'search');
+	const debounceMs = $derived(config.debounceMs ?? 300);
+
+	// Intentional one-time hydration of local state from the initial `param`
+	// value (not a live binding) - svelte-check's state_referenced_locally
+	// warning is a false positive here, same as PaginatedTable's initialSort
+	// etc. After mount this is the source of truth for what the user is
+	// typing, so it doesn't fight with the URL updates this component itself
+	// triggers on every keystroke.
+	let value = $state(page.url.searchParams.get(param) ?? '');
+	let debounceTimer: ReturnType<typeof setTimeout>;
+
+	function onInput() {
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			const params = new URLSearchParams(page.url.searchParams);
+			const trimmed = value.trim();
+			if (trimmed) params.set(param, trimmed);
+			else params.delete(param);
+			// A new search term can leave the current page past the end of the
+			// narrowed result set, and any open create/read/edit view stops
+			// making sense once the underlying list changes - drop both.
+			params.delete('page');
+			params.delete('view');
+			params.delete('id');
+			const qs = params.toString();
+			goto(qs ? `?${qs}` : '?', { keepFocus: true, noScroll: true, replaceState: true });
+		}, debounceMs);
+	}
+</script>
+
+<input
+	type="search"
+	bind:value
+	oninput={onInput}
+	placeholder={config.placeholder ?? strings.searchPlaceholder}
+	class="input input-bordered"
+/>

package/dist/components/crud/SearchInput.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SearchConfiguration } from '../../types/crud.js';
+type $$ComponentProps = {
+    config?: SearchConfiguration;
+};
+declare const SearchInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/crud/views/List.svelte

@@ -1,236 +1,323 @@
 <script lang="ts" generics="T extends object = Record<string, unknown>">
-  import { SvelteSet } from 'svelte/reactivity';
-  import { invalidateAll } from '$app/navigation';
-  import Button from '../../form/Button.svelte';
-  import Header from '../../common/Header.svelte';
-  import Modal from '../../Modal.svelte';
-  import PaginatedTable from '../../table/PaginatedTable.svelte';
-  import { getIconSet } from '../../../icons/context.js';
-  import { defaultIconSet } from '../../../icons/sets/default.js';
-  import type {
-    ActionConfiguration,
-    ColumnDefinition,
-    CustomAction,
-    RowAction
-  } from '../../../types/crud.js';
-  import type { FilterSnapshot, ServerPagination, SortDirection, TableQuery } from '../../../types/table.js';
-  import { getStrings } from '../../../i18n/context.js';
-
-  const strings = getStrings();
-
-  let {
-    data = [] as T[],
-    labelOne = '',
-    labelMany = '',
-    icon,
-    pageSize = 10,
-    idKey = '_id',
-    creation = {} as ActionConfiguration<T>,
-    update = {} as ActionConfiguration<T>,
-    read = {} as ActionConfiguration<T>,
-    deletion = {} as ActionConfiguration<T>,
-    actions = [] as CustomAction<T>[],
-    columns = [] as ColumnDefinition<T>[],
-    pagination = undefined as ServerPagination | undefined,
-    initialSort = undefined as { column: string; direction: SortDirection } | undefined,
-    initialFilters = undefined as Partial<FilterSnapshot> | undefined,
-    onPaginationChange = undefined as ((query: TableQuery) => void) | undefined,
-    onCreate,
-    onEdit,
-    onView,
-    onAction,
-  }: {
-    data?: T[];
-    labelOne?: string;
-    labelMany?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    icon?: any;
-    pageSize?: number;
-    idKey?: string;
-    creation?: ActionConfiguration<T>;
-    update?: ActionConfiguration<T>;
-    read?: ActionConfiguration<T>;
-    deletion?: ActionConfiguration<T>;
-    actions?: CustomAction<T>[];
-    columns?: ColumnDefinition<T>[];
-    pagination?: ServerPagination;
-    initialSort?: { column: string; direction: SortDirection };
-    initialFilters?: Partial<FilterSnapshot>;
-    onPaginationChange?: (query: TableQuery) => void;
-    onCreate?: () => void;
-    onEdit?: (item: T) => void;
-    onView?: (item: T) => void;
-    onAction?: (action: CustomAction<T>, item: T) => void;
-  } = $props();
-
-  const icons = $derived(getIconSet() ?? defaultIconSet);
-  const entityIcon = $derived(icon ?? icons.folder);
-
-  const allowRead = $derived(read.enabled ?? true);
-  const allowUpdate = $derived(update.enabled ?? true);
-  const allowDelete = $derived(deletion.enabled ?? true);
-  const deleteLabel = $derived(deletion.label ?? strings.delete);
-  const updateLabel = $derived(update.label ?? strings.edit);
-  const readLabel = $derived(read.label ?? strings.view);
-  const showRowActions = $derived(allowRead || allowUpdate || allowDelete || actions.length > 0);
-
-  let selected = new SvelteSet<number>();
-  let pendingDeletion = $state<T[] | null>(null);
-
-  // `selected` holds indices into `data`; if `data` is swapped for a different
-  // slice (page/sort/filter change in server mode) stale indices could point
-  // at unrelated rows, so clear on any data reference change.
-  let lastData: T[] | undefined;
-  $effect(() => {
-    if (data !== lastData) {
-      selected.clear();
-      lastData = data;
-    }
-  });
-
-  async function runEndpointAction(endpoint: string, items: T[]) {
-    await Promise.all(items.map((item) => {
-      const fd = new FormData();
-      fd.set('id', String((item as Record<string, unknown>)[idKey] ?? ''));
-      return fetch(endpoint, { method: 'POST', body: fd });
-    }));
-    await invalidateAll();
-  }
-
-  async function runDeletion(items: T[]) {
-    if (deletion.endpoint) {
-      await runEndpointAction(deletion.endpoint, items);
-    } else {
-      await deletion.callback?.(items);
-    }
-  }
-
-  function requestDeletion(items: T[]) {
-    if (deletion.confirm) {
-      pendingDeletion = items;
-    } else {
-      runDeletion(items);
-    }
-  }
-
-  function handleCreate() { onCreate?.(); }
-
-  function handleDelete() {
-    const items = [...selected].map(i => data[i]);
-    selected.clear();
-    requestDeletion(items);
-  }
-
-  async function confirmDeletion() {
-    if (pendingDeletion) {
-      await runDeletion(pendingDeletion);
-      pendingDeletion = null;
-    }
-  }
-
-  const rowActions = $derived<RowAction<T>[]>([
-    ...actions.map((action) => ({
-      label: action.label,
-      icon: action.icon,
-      condition: action.condition,
-      run: (item: T) => onAction?.(action, item),
-    })),
-    ...(allowRead ? [{ label: readLabel, icon: icons.view, run: (item: T) => onView?.(item) }] : []),
-    ...(allowUpdate ? [{ label: updateLabel, icon: icons.edit, run: (item: T) => onEdit?.(item) }] : []),
-    ...(allowDelete ? [{ label: deleteLabel, icon: icons.delete, class: 'text-error', run: (item: T) => requestDeletion([item]) }] : []),
-  ]);
+	import { SvelteSet } from 'svelte/reactivity';
+	import { invalidateAll } from '$app/navigation';
+	import Button from '../../form/Button.svelte';
+	import Header from '../../common/Header.svelte';
+	import Modal from '../../Modal.svelte';
+	import PaginatedTable from '../../table/PaginatedTable.svelte';
+	import SearchInput from '../SearchInput.svelte';
+	import { getIconSet } from '../../../icons/context.js';
+	import { defaultIconSet } from '../../../icons/sets/default.js';
+	import type {
+		ActionConfiguration,
+		ColumnDefinition,
+		CustomAction,
+		CustomBulkAction,
+		RowAction,
+		SearchConfiguration
+	} from '../../../types/crud.js';
+	import type {
+		FilterSnapshot,
+		ServerPagination,
+		SortDirection,
+		TableQuery
+	} from '../../../types/table.js';
+	import { getStrings } from '../../../i18n/context.js';
+
+	const strings = getStrings();
+
+	let {
+		data = [] as T[],
+		labelOne = '',
+		labelMany = '',
+		icon,
+		pageSize = 10,
+		idKey = '_id',
+		creation = {} as ActionConfiguration<T>,
+		update = {} as ActionConfiguration<T>,
+		read = {} as ActionConfiguration<T>,
+		deletion = {} as ActionConfiguration<T>,
+		actions = [] as CustomAction<T>[],
+		customBulkActions = [] as CustomBulkAction<T>[],
+		search = undefined as SearchConfiguration | undefined,
+		columns = [] as ColumnDefinition<T>[],
+		pagination = undefined as ServerPagination | undefined,
+		initialSort = undefined as { column: string; direction: SortDirection } | undefined,
+		initialFilters = undefined as Partial<FilterSnapshot> | undefined,
+		onPaginationChange = undefined as ((query: TableQuery) => void) | undefined,
+		onCreate,
+		onEdit,
+		onView,
+		onAction
+	}: {
+		data?: T[];
+		labelOne?: string;
+		labelMany?: string;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		icon?: any;
+		pageSize?: number;
+		idKey?: string;
+		creation?: ActionConfiguration<T>;
+		update?: ActionConfiguration<T>;
+		read?: ActionConfiguration<T>;
+		deletion?: ActionConfiguration<T>;
+		actions?: CustomAction<T>[];
+		customBulkActions?: CustomBulkAction<T>[];
+		search?: SearchConfiguration;
+		columns?: ColumnDefinition<T>[];
+		pagination?: ServerPagination;
+		initialSort?: { column: string; direction: SortDirection };
+		initialFilters?: Partial<FilterSnapshot>;
+		onPaginationChange?: (query: TableQuery) => void;
+		onCreate?: () => void;
+		onEdit?: (item: T) => void;
+		onView?: (item: T) => void;
+		onAction?: (action: CustomAction<T>, item: T) => void;
+	} = $props();
+
+	const icons = $derived(getIconSet() ?? defaultIconSet);
+	const entityIcon = $derived(icon ?? icons.folder);
+
+	const allowRead = $derived(read.enabled ?? true);
+	const allowUpdate = $derived(update.enabled ?? true);
+	const allowDelete = $derived(deletion.enabled ?? true);
+	const deleteLabel = $derived(deletion.label ?? strings.delete);
+	const updateLabel = $derived(update.label ?? strings.edit);
+	const readLabel = $derived(read.label ?? strings.view);
+	const showRowActions = $derived(allowRead || allowUpdate || allowDelete || actions.length > 0);
+	const allowSelection = $derived(allowDelete || customBulkActions.length > 0);
+
+	let selected = new SvelteSet<number>();
+	let pendingDeletion = $state<T[] | null>(null);
+	let pendingBulkAction = $state<{ action: CustomBulkAction<T>; items: T[] } | null>(null);
+	const selectedItems = $derived([...selected].map((i) => data[i]));
+
+	// `selected` holds indices into `data`; if `data` is swapped for a different
+	// slice (page/sort/filter change in server mode) stale indices could point
+	// at unrelated rows, so clear on any data reference change.
+	let lastData: T[] | undefined;
+	$effect(() => {
+		if (data !== lastData) {
+			selected.clear();
+			lastData = data;
+		}
+	});
+
+	async function runEndpointAction(endpoint: string, items: T[]) {
+		await Promise.all(
+			items.map((item) => {
+				const fd = new FormData();
+				fd.set('id', String((item as Record<string, unknown>)[idKey] ?? ''));
+				return fetch(endpoint, { method: 'POST', body: fd });
+			})
+		);
+		await invalidateAll();
+	}
+
+	async function runDeletion(items: T[]) {
+		if (deletion.endpoint) {
+			await runEndpointAction(deletion.endpoint, items);
+		} else {
+			await deletion.callback?.(items);
+		}
+	}
+
+	function requestDeletion(items: T[]) {
+		if (deletion.confirm) {
+			pendingDeletion = items;
+		} else {
+			runDeletion(items);
+		}
+	}
+
+	function handleCreate() {
+		onCreate?.();
+	}
+
+	function handleDelete() {
+		const items = [...selected].map((i) => data[i]);
+		selected.clear();
+		requestDeletion(items);
+	}
+
+	async function confirmDeletion() {
+		if (pendingDeletion) {
+			await runDeletion(pendingDeletion);
+			pendingDeletion = null;
+		}
+	}
+
+	async function runBulkAction(action: CustomBulkAction<T>, items: T[]) {
+		await runEndpointAction(action.endpoint, items);
+	}
+
+	function requestBulkAction(action: CustomBulkAction<T>, items: T[]) {
+		if (action.confirm) {
+			pendingBulkAction = { action, items };
+		} else {
+			runBulkAction(action, items);
+		}
+	}
+
+	function handleBulkAction(action: CustomBulkAction<T>) {
+		const items = selectedItems;
+		selected.clear();
+		requestBulkAction(action, items);
+	}
+
+	async function confirmBulkAction() {
+		if (pendingBulkAction) {
+			await runBulkAction(pendingBulkAction.action, pendingBulkAction.items);
+			pendingBulkAction = null;
+		}
+	}
+
+	const rowActions = $derived<RowAction<T>[]>([
+		...actions.map((action) => ({
+			label: action.label,
+			icon: action.icon,
+			condition: action.condition,
+			run: (item: T) => onAction?.(action, item)
+		})),
+		...(allowRead
+			? [{ label: readLabel, icon: icons.view, run: (item: T) => onView?.(item) }]
+			: []),
+		...(allowUpdate
+			? [{ label: updateLabel, icon: icons.edit, run: (item: T) => onEdit?.(item) }]
+			: []),
+		...(allowDelete
+			? [
+					{
+						label: deleteLabel,
+						icon: icons.delete,
+						class: 'text-error',
+						run: (item: T) => requestDeletion([item])
+					}
+				]
+			: [])
+	]);
 </script>
 
 {#snippet actionsCell(item: T)}
-  <div class="flex justify-end gap-1">
-    {#each rowActions as action (action.label)}
-      {#if action.condition?.(item) ?? true}
-        {@const Icon = action.icon}
-        <Button
-          variant="ghost"
-          class={['btn-xs', action.class]}
-          title={action.label}
-          aria-label={action.label}
-          onclick={(e) => { e.stopPropagation(); action.run(item); }}
-        >
-          <Icon class="size-4" />
-        </Button>
-      {/if}
-    {/each}
-  </div>
+	<div class="flex justify-end gap-1">
+		{#each rowActions as action (action.label)}
+			{#if action.condition?.(item) ?? true}
+				{@const Icon = action.icon}
+				<Button
+					variant="ghost"
+					class={['btn-xs', action.class]}
+					title={action.label}
+					aria-label={action.label}
+					onclick={(e) => {
+						e.stopPropagation();
+						action.run(item);
+					}}
+				>
+					<Icon class="size-4" />
+				</Button>
+			{/if}
+		{/each}
+	</div>
 {/snippet}
 
 <div class="flex flex-col gap-6">
+	<Header
+		title={labelMany}
+		breadcrumbs={[{ label: labelMany, icon: entityIcon, link: { href: '#' }, prominent: true }]}
+	>
+		{#snippet buttons()}
+			{#if search}
+				<SearchInput config={search} />
+			{/if}
 
-  <Header
-    title={labelMany}
-    breadcrumbs={[
-      { label: labelMany, icon: entityIcon, link: { href: '#' }, prominent: true },
-    ]}
-  >
-    {#snippet buttons()}
-      {#if allowDelete}
-        {@const DeleteIcon = icons.delete}
-        <Button
-          variant="error"
-          class="btn-outline"
-          disabled={selected.size === 0}
-          onclick={handleDelete}
-        >
-          <DeleteIcon class="size-4" />
-          {deleteLabel} ({selected.size})
-        </Button>
-      {/if}
-
-      {@const CreateIcon = icons.create}
-      <Button
-        variant="primary"
-        onclick={handleCreate}
-      >
-        <CreateIcon class="size-5" />
-        {#if creation.label}
-          <span>{creation.label}</span>
-        {:else}
-          <span>{strings.create}<span class="hidden sm:inline">&nbsp;{labelOne}</span></span>
-        {/if}
-      </Button>
-    {/snippet}
-  </Header>
-
-  <div class="table-wrapper">
-    <PaginatedTable
-      {data}
-      {columns}
-      {pageSize}
-      selectable={allowDelete}
-      {selected}
-      rowActions={showRowActions ? actionsCell : undefined}
-      {pagination}
-      {initialSort}
-      {initialFilters}
-      {onPaginationChange}
-    />
-  </div>
+			{#each customBulkActions as bulkAction (bulkAction.label)}
+				{#if bulkAction.condition?.(selectedItems) ?? true}
+					{@const BulkIcon = bulkAction.icon}
+					<Button
+						variant={bulkAction.variant ?? 'ghost'}
+						class="btn-outline"
+						disabled={selected.size === 0}
+						onclick={() => handleBulkAction(bulkAction)}
+					>
+						<BulkIcon class="size-4" />
+						{bulkAction.label} ({selected.size})
+					</Button>
+				{/if}
+			{/each}
+
+			{#if allowDelete}
+				{@const DeleteIcon = icons.delete}
+				<Button
+					variant="error"
+					class="btn-outline"
+					disabled={selected.size === 0}
+					onclick={handleDelete}
+				>
+					<DeleteIcon class="size-4" />
+					{deleteLabel} ({selected.size})
+				</Button>
+			{/if}
+
+			{@const CreateIcon = icons.create}
+			<Button variant="primary" onclick={handleCreate}>
+				<CreateIcon class="size-5" />
+				{#if creation.label}
+					<span>{creation.label}</span>
+				{:else}
+					<span>{strings.create}<span class="hidden sm:inline">&nbsp;{labelOne}</span></span>
+				{/if}
+			</Button>
+		{/snippet}
+	</Header>
+
+	<div class="table-wrapper">
+		<PaginatedTable
+			{data}
+			{columns}
+			{pageSize}
+			selectable={allowSelection}
+			{selected}
+			rowActions={showRowActions ? actionsCell : undefined}
+			{pagination}
+			{initialSort}
+			{initialFilters}
+			{onPaginationChange}
+		/>
+	</div>
 </div>
 
 {#if pendingDeletion !== null}
-  <Modal title={deleteLabel} onClose={() => (pendingDeletion = null)}>
-    <p>{strings.deleteConfirm(pendingDeletion.length, deleteLabel)}</p>
-    <div class="flex justify-end gap-2 mt-4">
-      <Button variant="ghost" onclick={() => (pendingDeletion = null)}>
-        {strings.cancel}
-      </Button>
-      <Button variant="error" onclick={confirmDeletion}>
-        {strings.confirm}
-      </Button>
-    </div>
-  </Modal>
+	<Modal title={deleteLabel} onClose={() => (pendingDeletion = null)}>
+		<p>{strings.deleteConfirm(pendingDeletion.length, deleteLabel)}</p>
+		<div class="flex justify-end gap-2 mt-4">
+			<Button variant="ghost" onclick={() => (pendingDeletion = null)}>
+				{strings.cancel}
+			</Button>
+			<Button variant="error" onclick={confirmDeletion}>
+				{strings.confirm}
+			</Button>
+		</div>
+	</Modal>
+{/if}
+
+{#if pendingBulkAction !== null}
+	<Modal title={pendingBulkAction.action.label} onClose={() => (pendingBulkAction = null)}>
+		<p>{strings.deleteConfirm(pendingBulkAction.items.length, pendingBulkAction.action.label)}</p>
+		<div class="flex justify-end gap-2 mt-4">
+			<Button variant="ghost" onclick={() => (pendingBulkAction = null)}>
+				{strings.cancel}
+			</Button>
+			<Button variant={pendingBulkAction.action.variant ?? 'primary'} onclick={confirmBulkAction}>
+				{strings.confirm}
+			</Button>
+		</div>
+	</Modal>
 {/if}
 
 <style>
-  .table-wrapper {
-    width: 100%;
-    max-width: var(--runeforge-crud-max-width);
-    margin-inline: auto;
-  }
+	.table-wrapper {
+		width: 100%;
+		max-width: var(--runeforge-crud-max-width);
+		margin-inline: auto;
+	}
 </style>

package/dist/components/crud/views/List.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ActionConfiguration, ColumnDefinition, CustomAction } from '../../../types/crud.js';
+import type { ActionConfiguration, ColumnDefinition, CustomAction, CustomBulkAction, SearchConfiguration } from '../../../types/crud.js';
 import type { FilterSnapshot, ServerPagination, SortDirection, TableQuery } from '../../../types/table.js';
 declare function $$render<T extends object = Record<string, unknown>>(): {
     props: {
@@ -13,6 +13,8 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         read?: ActionConfiguration<T>;
         deletion?: ActionConfiguration<T>;
         actions?: CustomAction<T>[];
+        customBulkActions?: CustomBulkAction<T>[];
+        search?: SearchConfiguration;
         columns?: ColumnDefinition<T>[];
         pagination?: ServerPagination;
         initialSort?: {

package/dist/components/table/ColumnFilter.svelte

@@ -107,7 +107,7 @@
       <calendar-month></calendar-month>
     </calendar-range>
     {#if dateRange.from || dateRange.to}
-      <p class="mt-2 text-xs text-base-content/60">
+      <p class="mt-2 text-center text-xs text-base-content/60">
         {dateRange.from || '…'} → {dateRange.to || '…'}
       </p>
     {/if}