runeforge 0.0.20 → 0.0.21

package/dist/components/crud/Field.svelte

@@ -44,7 +44,7 @@
   const avatarInitials = $derived(initials(record.firstName as string, record.lastName as string));
   const displayValue = $derived(saved == null ? '' : String(saved));
   const selectOptions = $derived(field.dependentOptions ? field.dependentOptions(record) : (field.options ?? []));
-  const selectDisabled = $derived(field.disabled ? field.disabled(record) : false);
+  const fieldDisabled = $derived(field.disabled ? field.disabled(record) : false);
 
   $effect(() => {
     if (!field.dependentOptions) return;
@@ -76,7 +76,8 @@
       {name}
       class="toggle toggle-primary"
       checked={!!saved}
-      disabled={readonly}
+      disabled={readonly || fieldDisabled}
+      onchange={(e) => { record[field.attribute] = (e.currentTarget as HTMLInputElement).checked; }}
     />
   {:else if field.type === 'file'}
     {#if !readonly}
@@ -86,6 +87,7 @@
         {name}
         class="file-input file-input-bordered w-full"
         class:file-input-error={!!error}
+        disabled={fieldDisabled}
         onchange={onFileChange}
       />
     {/if}
@@ -105,7 +107,7 @@
         bind:value={record[field.attribute] as string}
         options={selectOptions}
         placeholder={field.placeholder}
-        disabled={selectDisabled}
+        disabled={fieldDisabled}
         {error}
       />
     {/if}
@@ -119,11 +121,11 @@
         disabled
       />
     {:else}
-      <input type="hidden" {name} value={String(record[field.attribute] ?? '')} />
+      <input type="hidden" {name} value={String(record[field.attribute] ?? '')} disabled={fieldDisabled} />
       <calendar-date
-        class="cally rounded-box border border-base-300 bg-base-100 shadow-sm"
+        class="cally rounded-box border border-base-300 bg-base-100 shadow-sm {fieldDisabled ? 'pointer-events-none opacity-50' : ''}"
         value={String(record[field.attribute] ?? '')}
-        onchange={(e: Event) => { record[field.attribute] = (e.currentTarget as HTMLElement & { value: string }).value; }}
+        onchange={(e: Event) => { if (fieldDisabled) return; record[field.attribute] = (e.currentTarget as HTMLElement & { value: string }).value; }}
       >
         <svg aria-label={strings.previous} class="fill-current size-4" {...{"slot": "previous"}} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
         <svg aria-label={strings.next} class="fill-current size-4" {...{"slot": "next"}} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
@@ -141,6 +143,7 @@
         bind:value={record[field.attribute]}
         class="textarea textarea-bordered bg-base-100 w-full"
         class:textarea-error={!!error}
+        disabled={fieldDisabled}
       ></textarea>
     {/if}
   {:else if readonly}
@@ -159,8 +162,10 @@
       placeholder={field.placeholder ?? ''}
       bind:value={record[field.attribute]}
       autocomplete={field.autocomplete}
+      step={field.type === 'number' ? 'any' : undefined}
       class="input input-bordered w-full"
       class:input-error={!!error}
+      disabled={fieldDisabled}
     />
   {/if}
 

package/dist/components/crud/GenericCRUD.svelte

@@ -7,9 +7,9 @@
 	import Update from './views/Update.svelte';
 	import { AUTO_EXCLUDED } from './utils/constants.js';
 	import {
-		resolveOptions,
 		resolveFormatter,
-		inferType
+		inferType,
+		buildFieldDefinitions
 	} from './utils/resolution.js';
 	import { isFilterable } from '../table/utils.js';
 	import type { XlsxModule } from '../table/export.js';
@@ -226,23 +226,7 @@
 	const resolvedFields: FieldDefinition<T>[] = $derived(
 		fields ??
 			(meta
-				? (Object.entries(meta) as [string, AttributeMetadata][])
-						.filter(([k, m]) => !excluded.has(k) && !m.excludedFromCreate)
-						.map(([k, m]) => ({
-							attribute: k as keyof T & string,
-							title: m.label,
-							type: m.type ?? inferType(k, undefined),
-							required: m.required,
-							autocomplete: m.autocomplete,
-							placeholder: m.placeholder,
-							default: m.default,
-							options: resolveOptions(m, data),
-							dependentOptions: m.dependentOptions
-								? (record: Record<string, unknown>) => m.dependentOptions!(data, record)
-								: undefined,
-							disabled: m.disabled,
-							seed: m.seed
-						}))
+				? buildFieldDefinitions<T>(meta, data, 'excludedFromCreate', excluded)
 				: entityData.length > 0
 					? (Object.entries(entityData[0]) as [string, unknown][])
 							.filter(([k]) => !excluded.has(k))
@@ -253,23 +237,7 @@
 	const resolvedReadFields: FieldDefinition<T>[] = $derived(
 		fields ??
 			(meta
-				? (Object.entries(meta) as [string, AttributeMetadata][])
-						.filter(([k, m]) => !excluded.has(k) && !m.excludedFromRead)
-						.map(([k, m]) => ({
-							attribute: k as keyof T & string,
-							title: m.label,
-							type: m.type ?? inferType(k, undefined),
-							required: m.required,
-							autocomplete: m.autocomplete,
-							placeholder: m.placeholder,
-							default: m.default,
-							options: resolveOptions(m, data),
-							dependentOptions: m.dependentOptions
-								? (record: Record<string, unknown>) => m.dependentOptions!(data, record)
-								: undefined,
-							disabled: m.disabled,
-							seed: m.seed
-						}))
+				? buildFieldDefinitions<T>(meta, data, 'excludedFromRead', excluded)
 				: entityData.length > 0
 					? (Object.entries(entityData[0]) as [string, unknown][])
 							.filter(([k]) => !excluded.has(k))
@@ -280,23 +248,7 @@
 	const resolvedUpdateFields: FieldDefinition<T>[] = $derived(
 		fields ??
 			(meta
-				? (Object.entries(meta) as [string, AttributeMetadata][])
-						.filter(([k, m]) => !excluded.has(k) && !m.excludedFromUpdate)
-						.map(([k, m]) => ({
-							attribute: k as keyof T & string,
-							title: m.label,
-							type: m.type ?? inferType(k, undefined),
-							required: m.required,
-							autocomplete: m.autocomplete,
-							placeholder: m.placeholder,
-							default: m.default,
-							options: resolveOptions(m, data),
-							dependentOptions: m.dependentOptions
-								? (record: Record<string, unknown>) => m.dependentOptions!(data, record)
-								: undefined,
-							disabled: m.disabled,
-							seed: m.seed
-						}))
+				? buildFieldDefinitions<T>(meta, data, 'excludedFromUpdate', excluded)
 				: entityData.length > 0
 					? (Object.entries(entityData[0]) as [string, unknown][])
 							.filter(([k]) => !excluded.has(k))

package/dist/components/crud/utils/grouping.d.ts

@@ -0,0 +1,6 @@
+import type { FieldDefinition } from '../../../types/crud.js';
+export type FieldGroup<T extends object = Record<string, unknown>> = {
+    title?: string;
+    fields: FieldDefinition<T>[];
+};
+export declare function groupFields<T extends object = Record<string, unknown>>(fields: FieldDefinition<T>[]): FieldGroup<T>[];

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

@@ -0,0 +1,23 @@
+// Partitions a flat field list into visual groups for create/update/read
+// views, based on `groupedAs`. Fields without a `groupedAs` render as their
+// own single-field group (unchanged from today's flat layout). Fields sharing
+// a `groupedAs` are collected together at the position of their first
+// occurrence, preserving overall order.
+export function groupFields(fields) {
+    const groups = [];
+    const byTitle = new Map();
+    for (const field of fields) {
+        if (!field.groupedAs) {
+            groups.push({ fields: [field] });
+            continue;
+        }
+        let group = byTitle.get(field.groupedAs);
+        if (!group) {
+            group = { title: field.groupedAs, fields: [] };
+            byTitle.set(field.groupedAs, group);
+            groups.push(group);
+        }
+        group.fields.push(field);
+    }
+    return groups;
+}

package/dist/components/crud/utils/resolution.d.ts

@@ -1,4 +1,6 @@
 import type { AttributeMetadata, AttributeType, SelectOption } from '../../../types/attribute.js';
+import type { FieldDefinition } from '../../../types/crud.js';
 export declare function resolveOptions(m: AttributeMetadata, d: unknown): SelectOption[] | undefined;
 export declare function resolveFormatter(m: AttributeMetadata, d: unknown): import("../../../index.ts").CellFormatter<any, any> | undefined;
 export declare function inferType(key: string, value: unknown): AttributeType;
+export declare function buildFieldDefinitions<T extends object = Record<string, unknown>>(meta: Partial<Record<string, AttributeMetadata>>, data: unknown, excludedFlag: 'excludedFromCreate' | 'excludedFromRead' | 'excludedFromUpdate', excluded: Set<string>): FieldDefinition<T>[];

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

@@ -20,3 +20,33 @@ export function inferType(key, value) {
         return 'textarea';
     return 'text';
 }
+// Shared by GenericCRUD's create/read/update field resolution: they only
+// differ in which `excludedFromX` flag gates a field, so any metadata
+// property added here is automatically threaded through all three views
+// instead of needing to be copied into three near-identical blocks.
+export function buildFieldDefinitions(meta, data, excludedFlag, excluded) {
+    return Object.entries(meta)
+        .filter(([k, m]) => !excluded.has(k) && !m[excludedFlag])
+        .map(([k, m]) => ({
+        attribute: k,
+        title: m.label,
+        type: m.type ?? inferType(k, undefined),
+        required: m.required,
+        autocomplete: m.autocomplete,
+        placeholder: m.placeholder,
+        default: m.default,
+        options: resolveOptions(m, data),
+        dependentOptions: m.dependentOptions
+            ? (record) => m.dependentOptions(data, record)
+            : undefined,
+        disabled: m.disabled,
+        seed: m.seed,
+        groupedAs: m.groupedAs,
+        min: m.min,
+        max: m.max,
+        integer: m.integer,
+        minLength: m.minLength,
+        maxLength: m.maxLength,
+        pattern: m.pattern
+    }));
+}

package/dist/components/crud/utils/validation.d.ts

@@ -0,0 +1,3 @@
+import type { FieldDefinition } from '../../../types/crud.js';
+import type { RuneforgeStrings } from '../../../i18n/types.js';
+export declare function validateAll<T extends object = Record<string, unknown>>(fields: FieldDefinition<T>[], formData: FormData, strings: RuneforgeStrings): Record<string, string>;

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

@@ -0,0 +1,44 @@
+import { fieldLabel } from './misc.js';
+// Shared by Create.svelte/Update.svelte's client-side pre-submit check. Errors
+// are surfaced through the same `fieldErrors` mechanism already used for
+// `required`, not native HTML5 constraint validation, so every message is
+// styled consistently regardless of which rule failed.
+export function validateAll(fields, formData, strings) {
+    const errors = {};
+    for (const field of fields) {
+        const val = String(formData.get(field.attribute) ?? '').trim();
+        if (field.required && !val) {
+            errors[field.attribute] = strings.required(fieldLabel(field));
+            continue;
+        }
+        if (!val)
+            continue;
+        if (field.type === 'number') {
+            const num = Number(val);
+            if (Number.isNaN(num)) {
+                errors[field.attribute] = strings.invalidNumber(fieldLabel(field));
+            }
+            else if (field.integer && !Number.isInteger(num)) {
+                errors[field.attribute] = strings.integer(fieldLabel(field));
+            }
+            else if (field.min != null && num < field.min) {
+                errors[field.attribute] = strings.min(fieldLabel(field), field.min);
+            }
+            else if (field.max != null && num > field.max) {
+                errors[field.attribute] = strings.max(fieldLabel(field), field.max);
+            }
+        }
+        else {
+            if (field.minLength != null && val.length < field.minLength) {
+                errors[field.attribute] = strings.minLength(fieldLabel(field), field.minLength);
+            }
+            else if (field.maxLength != null && val.length > field.maxLength) {
+                errors[field.attribute] = strings.maxLength(fieldLabel(field), field.maxLength);
+            }
+            else if (field.pattern && !new RegExp(field.pattern).test(val)) {
+                errors[field.attribute] = strings.pattern(fieldLabel(field));
+            }
+        }
+    }
+    return errors;
+}

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

@@ -6,7 +6,8 @@
   import Header from '../../common/Header.svelte';
   import { getIconSet } from '../../../icons/context.js';
   import { defaultIconSet } from '../../../icons/sets/default.js';
-  import { fieldLabel } from '../utils/misc.js';
+  import { validateAll } from '../utils/validation.js';
+  import { groupFields } from '../utils/grouping.js';
   import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
   import { getStrings } from '../../../i18n/context.js';
 
@@ -53,17 +54,7 @@
 
   let record = $state<Record<string, unknown>>(untrack(() => emptyRecord()));
 
-  function validateAll(formData: FormData): Record<string, string> {
-    const errs: Record<string, string> = {};
-    for (const field of fields) {
-      if (field.required) {
-        const val = String(formData.get(field.attribute) ?? '').trim();
-        if (!val) errs[field.attribute] = strings.required(fieldLabel(field));
-      }
-    }
-    return errs;
-  }
-
+  const groups = $derived(groupFields(fields));
   const hasFileField = $derived(fields.some((f) => f.type === 'file'));
 
   const errorEntries = $derived([
@@ -103,7 +94,7 @@
     use:enhance={({ formData, cancel }) => {
       fieldErrors = {};
       internalError = '';
-      const errs = validateAll(formData);
+      const errs = validateAll(fields, formData, strings);
       if (Object.keys(errs).length > 0) {
         fieldErrors = errs;
         cancel();
@@ -127,8 +118,21 @@
       };
     }}
   >
-    {#each fields as field (field.attribute)}
-      <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+    {#each groups as group, i (group.title ?? `_ungrouped_${i}`)}
+      {#if group.title}
+        <fieldset class="fieldset border border-base-300 rounded-box p-4">
+          <legend class="fieldset-legend px-2">{group.title}</legend>
+          <div class="flex flex-col gap-4">
+            {#each group.fields as field (field.attribute)}
+              <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+            {/each}
+          </div>
+        </fieldset>
+      {:else}
+        {#each group.fields as field (field.attribute)}
+          <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+        {/each}
+      {/if}
     {/each}
 
     <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">

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

@@ -6,6 +6,7 @@
   import Header from '../../common/Header.svelte';
   import { getIconSet } from '../../../icons/context.js';
   import { defaultIconSet } from '../../../icons/sets/default.js';
+  import { groupFields } from '../utils/grouping.js';
   import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
   import { getStrings } from '../../../i18n/context.js';
 
@@ -60,6 +61,8 @@
     })();
     return () => { cancelled = true; };
   });
+
+  const groups = $derived(groupFields(fields));
 </script>
 
 <div class="flex flex-col gap-6">
@@ -73,8 +76,21 @@
   />
 
   <div class="fields-panel mx-auto flex w-full flex-col gap-4 px-4">
-    {#each fields as field (field.attribute)}
-      <Field {field} {record} readonly />
+    {#each groups as group, i (group.title ?? `_ungrouped_${i}`)}
+      {#if group.title}
+        <fieldset class="fieldset border border-base-300 rounded-box p-4">
+          <legend class="fieldset-legend px-2">{group.title}</legend>
+          <div class="flex flex-col gap-4">
+            {#each group.fields as field (field.attribute)}
+              <Field {field} {record} readonly />
+            {/each}
+          </div>
+        </fieldset>
+      {:else}
+        {#each group.fields as field (field.attribute)}
+          <Field {field} {record} readonly />
+        {/each}
+      {/if}
     {/each}
 
     <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">

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

@@ -6,7 +6,8 @@
   import Header from '../../common/Header.svelte';
   import { getIconSet } from '../../../icons/context.js';
   import { defaultIconSet } from '../../../icons/sets/default.js';
-  import { fieldLabel } from '../utils/misc.js';
+  import { validateAll } from '../utils/validation.js';
+  import { groupFields } from '../utils/grouping.js';
   import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
   import { getStrings } from '../../../i18n/context.js';
 
@@ -64,17 +65,7 @@
     untrack(() => { record = seedFromInstance(instance as Record<string, unknown>); });
   });
 
-  function validateAll(formData: FormData): Record<string, string> {
-    const errs: Record<string, string> = {};
-    for (const field of fields) {
-      if (field.required) {
-        const val = String(formData.get(field.attribute) ?? '').trim();
-        if (!val) errs[field.attribute] = strings.required(fieldLabel(field));
-      }
-    }
-    return errs;
-  }
-
+  const groups = $derived(groupFields(fields));
   const hasFileField = $derived(fields.some((f) => f.type === 'file'));
 
   const errorEntries = $derived([
@@ -114,7 +105,7 @@
     use:enhance={({ formData, cancel }) => {
       fieldErrors = {};
       internalError = '';
-      const errs = validateAll(formData);
+      const errs = validateAll(fields, formData, strings);
       if (Object.keys(errs).length > 0) {
         fieldErrors = errs;
         cancel();
@@ -134,8 +125,21 @@
   >
     <input type="hidden" name="id" value={String(record[idKey] ?? '')} />
 
-    {#each fields as field (field.attribute)}
-      <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+    {#each groups as group, i (group.title ?? `_ungrouped_${i}`)}
+      {#if group.title}
+        <fieldset class="fieldset border border-base-300 rounded-box p-4">
+          <legend class="fieldset-legend px-2">{group.title}</legend>
+          <div class="flex flex-col gap-4">
+            {#each group.fields as field (field.attribute)}
+              <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+            {/each}
+          </div>
+        </fieldset>
+      {:else}
+        {#each group.fields as field (field.attribute)}
+          <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+        {/each}
+      {/if}
     {/each}
 
     <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">

package/dist/i18n/en.js

@@ -26,5 +26,12 @@ export const en = {
     confirm: 'Confirm',
     deleteConfirm: (count, actionLabel) => `Are you sure you want to ${String(actionLabel).toLowerCase()} ${count} item${count === 1 ? '' : 's'}?`,
     required: (field) => `${field} is required`,
+    invalidNumber: (field) => `${field} must be a number`,
+    integer: (field) => `${field} must be a whole number`,
+    min: (field, min) => `${field} must be greater than or equal to ${min}`,
+    max: (field, max) => `${field} must be less than or equal to ${max}`,
+    minLength: (field, min) => `${field} must be at least ${min} characters`,
+    maxLength: (field, max) => `${field} must be at most ${max} characters`,
+    pattern: (field) => `${field} has an invalid format`,
     serverError: 'Unexpected server error.'
 };

package/dist/i18n/es.js

@@ -26,5 +26,12 @@ export const es = {
     confirm: 'Confirmar',
     deleteConfirm: (count, actionLabel) => `¿Seguro que querés ${String(actionLabel).toLowerCase()} ${count} elemento${count === 1 ? '' : 's'}?`,
     required: (field) => `${field} es requerido`,
+    invalidNumber: (field) => `${field} debe ser un número`,
+    integer: (field) => `${field} debe ser un número entero`,
+    min: (field, min) => `${field} debe ser mayor o igual a ${min}`,
+    max: (field, max) => `${field} debe ser menor o igual a ${max}`,
+    minLength: (field, min) => `${field} debe tener al menos ${min} caracteres`,
+    maxLength: (field, max) => `${field} debe tener como máximo ${max} caracteres`,
+    pattern: (field) => `${field} tiene un formato inválido`,
     serverError: 'Error inesperado del servidor.'
 };

package/dist/i18n/types.d.ts

@@ -26,5 +26,12 @@ export interface RuneforgeStrings {
     confirm: string;
     deleteConfirm: (count: number, actionLabel: string) => string;
     required: (field: string) => string;
+    invalidNumber: (field: string) => string;
+    integer: (field: string) => string;
+    min: (field: string, min: number) => string;
+    max: (field: string, max: number) => string;
+    minLength: (field: string, min: number) => string;
+    maxLength: (field: string, max: number) => string;
+    pattern: (field: string) => string;
     serverError: string;
 }

package/dist/index.d.ts

@@ -41,6 +41,9 @@ export { default as CRUDRead } from './components/crud/views/Read.svelte';
 export { default as CRUDUpdate } from './components/crud/views/Update.svelte';
 export { default as SearchInput } from './components/crud/SearchInput.svelte';
 export { AUTO_EXCLUDED } from './components/crud/utils/constants.js';
-export { resolveOptions, resolveFormatter, inferType } from './components/crud/utils/resolution.js';
+export { resolveOptions, resolveFormatter, inferType, buildFieldDefinitions } from './components/crud/utils/resolution.js';
 export { fieldLabel, initials } from './components/crud/utils/misc.js';
 export { formatBoolean, formatDatetime, formatTruncateTextUpTo, formatInstance } from './components/crud/utils/formatters.js';
+export { groupFields } from './components/crud/utils/grouping.js';
+export type { FieldGroup } from './components/crud/utils/grouping.js';
+export { validateAll } from './components/crud/utils/validation.js';

package/dist/index.js

@@ -39,6 +39,8 @@ export { default as CRUDUpdate } from './components/crud/views/Update.svelte';
 export { default as SearchInput } from './components/crud/SearchInput.svelte';
 // CRUD utilities
 export { AUTO_EXCLUDED } from './components/crud/utils/constants.js';
-export { resolveOptions, resolveFormatter, inferType } from './components/crud/utils/resolution.js';
+export { resolveOptions, resolveFormatter, inferType, buildFieldDefinitions } from './components/crud/utils/resolution.js';
 export { fieldLabel, initials } from './components/crud/utils/misc.js';
 export { formatBoolean, formatDatetime, formatTruncateTextUpTo, formatInstance } from './components/crud/utils/formatters.js';
+export { groupFields } from './components/crud/utils/grouping.js';
+export { validateAll } from './components/crud/utils/validation.js';

package/dist/types/attribute.d.ts

@@ -41,4 +41,11 @@ export type AttributeMetadata = {
     excludedFromRead?: boolean;
     sortable?: boolean;
     filterable?: boolean;
+    groupedAs?: string;
+    min?: number;
+    max?: number;
+    integer?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
 };

package/dist/types/crud.d.ts

@@ -31,6 +31,13 @@ export interface FieldDefinition<T extends object = Record<string, unknown>> {
     }[];
     disabled?: (record: Record<string, unknown>) => boolean;
     seed?: (instance: any) => unknown;
+    groupedAs?: string;
+    min?: number;
+    max?: number;
+    integer?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
 }
 export interface ActionConfiguration<T extends object = Record<string, unknown>> {
     enabled?: boolean;

package/package.json

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