runeforge 0.0.21 → 0.0.22

package/dist/components/crud/Field.svelte

@@ -106,6 +106,7 @@
         name={field.attribute}
         bind:value={record[field.attribute] as string}
         options={selectOptions}
+        search={field.search}
         placeholder={field.placeholder}
         disabled={fieldDisabled}
         {error}

package/dist/components/crud/GenericCRUD.svelte

@@ -121,6 +121,15 @@
 
 	let activeAction = $state<{ action: CustomAction<T>; item: T } | null>(null);
 
+	async function runAction(action: CustomAction<T>, item: T) {
+		if (!(action.condition?.(item) ?? true)) return;
+		if (action.href) {
+			await goto(action.href(item));
+			return;
+		}
+		activeAction = { action, item };
+	}
+
 	async function navList() {
 		await goto('?');
 	}
@@ -322,9 +331,7 @@
 		onCreate={navCreate}
 		onEdit={navEdit}
 		onView={navRead}
-		onAction={(action, item) => {
-			if (action.condition?.(item) ?? true) activeAction = { action, item };
-		}}
+		onAction={runAction}
 	/>
 {/if}
 

package/dist/components/crud/utils/resolution.js

@@ -39,6 +39,7 @@ export function buildFieldDefinitions(meta, data, excludedFlag, excluded) {
         dependentOptions: m.dependentOptions
             ? (record) => m.dependentOptions(data, record)
             : undefined,
+        search: m.search,
         disabled: m.disabled,
         seed: m.seed,
         groupedAs: m.groupedAs,

package/dist/components/form/Select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getStrings } from '../../i18n/context.js';
+  import type { SearchResolver } from '../../types/attribute.js';
 
   const strings = getStrings();
 
@@ -7,6 +8,8 @@
     name,
     value = $bindable(''),
     options = [],
+    search: searchFn,
+    searchDebounceMs = 300,
     placeholder = strings.selectPlaceholder,
     error = '',
     disabled = false,
@@ -14,41 +17,84 @@
     name?: string;
     value?: string;
     options?: { value: string; label: string }[];
+    search?: SearchResolver;
+    searchDebounceMs?: number;
     placeholder?: string;
     error?: string;
     disabled?: boolean;
   } = $props();
 
   let open = $state(false);
-  let search = $state('');
+  let query = $state('');
   let container: HTMLDivElement;
 
+  // Options resolved by `searchFn` for the current query; null while no
+  // server search has run yet (e.g. box just opened, query still empty).
+  let remoteResults = $state<{ value: string; label: string }[] | null>(null);
+  let searching = $state(false);
+  // Label of whatever was last picked from `remoteResults`, kept around so the
+  // closed-state button can still show it even though it isn't in `options`.
+  let pickedLabel = $state<string | null>(null);
+
+  let searchToken = 0;
+  $effect(() => {
+    if (!searchFn) return;
+    const q = query.trim();
+    if (!q) {
+      remoteResults = null;
+      searching = false;
+      return;
+    }
+    const token = ++searchToken;
+    searching = true;
+    const timer = setTimeout(() => {
+      searchFn(q).then((results) => {
+        if (token !== searchToken) return; // stale response, a newer query took over
+        remoteResults = results;
+        searching = false;
+      });
+    }, searchDebounceMs);
+    return () => clearTimeout(timer);
+  });
+
   const filtered = $derived(
-    search.trim()
-      ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
-      : options
+    searchFn
+      ? (remoteResults ?? options)
+      : query.trim()
+        ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+        : options
   );
 
   const selectedLabel = $derived(
-    options.find((o) => o.value === value)?.label ?? placeholder
+    value === ''
+      ? placeholder
+      : (options.find((o) => o.value === value)?.label ?? pickedLabel ?? placeholder)
   );
 
   function toggle() {
     if (disabled) return;
     open = !open;
-    if (!open) search = '';
+    if (!open) query = '';
   }
 
-  function pick(val: string) {
-    value = val;
+  function pick(option: { value: string; label: string }) {
+    value = option.value;
+    pickedLabel = option.label;
     open = false;
-    search = '';
+    query = '';
+  }
+
+  function clear() {
+    value = '';
+    pickedLabel = null;
+    open = false;
+    query = '';
   }
 
   function onWindowClick(e: MouseEvent) {
     if (open && !container.contains(e.target as Node)) {
       open = false;
-      search = '';
+      query = '';
     }
   }
 </script>
@@ -78,7 +124,7 @@
           type="text"
           class="input input-bordered input-sm w-full"
           placeholder={strings.selectSearch}
-          bind:value={search}
+          bind:value={query}
           autocomplete="off"
         />
       </div>
@@ -87,11 +133,14 @@
           <button
             type="button"
             class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
-            onclick={() => pick('')}
+            onclick={clear}
           >
             {placeholder}
           </button>
         </li>
+        {#if searching}
+          <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectSearching}</li>
+        {/if}
         {#each filtered as option (option.value)}
           <li>
             <button
@@ -99,13 +148,13 @@
               class="w-full rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
               class:bg-primary={value === option.value}
               class:text-primary-content={value === option.value}
-              onclick={() => pick(option.value)}
+              onclick={() => pick(option)}
             >
               {option.label}
             </button>
           </li>
         {/each}
-        {#if filtered.length === 0}
+        {#if !searching && filtered.length === 0}
           <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
         {/if}
       </ul>

package/dist/components/form/Select.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { SearchResolver } from '../../types/attribute.js';
 type $$ComponentProps = {
     name?: string;
     value?: string;
@@ -5,6 +6,8 @@ type $$ComponentProps = {
         value: string;
         label: string;
     }[];
+    search?: SearchResolver;
+    searchDebounceMs?: number;
     placeholder?: string;
     error?: string;
     disabled?: boolean;

package/dist/i18n/en.js

@@ -10,6 +10,7 @@ export const en = {
     next: 'Next',
     selectPlaceholder: 'Select an option',
     selectSearch: 'Search...',
+    selectSearching: 'Searching...',
     selectNoResults: 'No results',
     view: 'View',
     edit: 'Edit',

package/dist/i18n/es.js

@@ -10,6 +10,7 @@ export const es = {
     next: 'Siguiente',
     selectPlaceholder: 'Seleccioná una opción',
     selectSearch: 'Buscar...',
+    selectSearching: 'Buscando...',
     selectNoResults: 'Sin resultados',
     view: 'Ver',
     edit: 'Editar',

package/dist/i18n/types.d.ts

@@ -10,6 +10,7 @@ export interface RuneforgeStrings {
     next: string;
     selectPlaceholder: string;
     selectSearch: string;
+    selectSearching: string;
     selectNoResults: string;
     view: string;
     edit: string;

package/dist/types/attribute.d.ts

@@ -20,6 +20,7 @@ export type SelectOption = {
 export type OptionsResolver = SelectOption[] | ((data: any) => SelectOption[]);
 export type FormatterResolver = (data?: any) => CellFormatter<any, any>;
 export type DependentOptionsResolver = (data: any, record: Record<string, unknown>) => SelectOption[];
+export type SearchResolver = (query: string) => Promise<SelectOption[]>;
 export type DisabledResolver = (record: Record<string, unknown>) => boolean;
 export type SeedResolver = (instance: any) => unknown;
 export type AttributeMetadata = {
@@ -27,6 +28,10 @@ export type AttributeMetadata = {
     type?: AttributeType;
     options?: OptionsResolver;
     dependentOptions?: DependentOptionsResolver;
+    /** Select fields only: fetch options matching what the user typed (e.g. a
+     * server-side search) instead of filtering the (possibly partial) `options`
+     * list in memory. Leave unset to keep the default in-memory filtering. */
+    search?: SearchResolver;
     disabled?: DisabledResolver;
     seed?: SeedResolver;
     component?: CellComponent<any, any>;

package/dist/types/crud.d.ts

@@ -1,6 +1,6 @@
 import type { Component } from 'svelte';
 import type { FullAutoFill } from 'svelte/elements';
-import type { AttributeType } from './attribute.js';
+import type { AttributeType, SearchResolver } from './attribute.js';
 import type { CellComponent, CellFormatter } from './table.js';
 export type ColumnDefinition<T extends object = Record<string, unknown>> = {
     [K in keyof T & string]: {
@@ -29,6 +29,7 @@ export interface FieldDefinition<T extends object = Record<string, unknown>> {
         value: string;
         label: string;
     }[];
+    search?: SearchResolver;
     disabled?: (record: Record<string, unknown>) => boolean;
     seed?: (instance: any) => unknown;
     groupedAs?: string;
@@ -51,7 +52,12 @@ export interface CustomAction<T extends object = Record<string, unknown>> {
     icon: any;
     endpoint?: string;
     condition?: (item: T) => boolean;
-    view: Component<any>;
+    /** Renders as a modal-like panel when the action runs. Mutually exclusive
+     * with `href` — provide exactly one of the two. */
+    view?: Component<any>;
+    /** Navigates to the given URL instead of opening `view`. Takes priority
+     * over `view` if both are somehow set. */
+    href?: (item: T) => string;
 }
 export interface RowAction<T extends object = Record<string, unknown>> {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",