runeforge 0.0.28 → 0.0.29

package/README.md

@@ -508,6 +508,8 @@ createdTo: {
 
 A `row` only merges fields that are also in the same `groupedAs` fieldset (or both ungrouped) — it never pulls fields together across two different fieldsets. If one of the fields in a row is conditionally [hidden](#conditional-fields), the remaining field(s) simply expand to fill the row instead of leaving a gap.
 
+`groupedAs` and `row` both work the same way inside an [embedded field](#embedded-fields-sub-documents)'s `fields` sub-schema — the "+ Add"/edit modal groups and lays out its own fields identically to a top-level form.
+
 ### Default values
 
 `default` can be a plain value or a function of the page `data` object, evaluated once when the create form's fields are resolved — handy for defaulting a select to something derived from prefetched data.

package/dist/components/crud/EmbeddedField.svelte

@@ -5,6 +5,7 @@
 	import { emptyRecord, seedField, defaultItemLabel } from './utils/embedded.js';
 	import { fieldLabel } from './utils/misc.js';
 	import { validateAll } from './utils/validation.js';
+	import { groupFields } from './utils/grouping.js';
 	import type { FieldDefinition } from '../../types/crud.js';
 	import { getStrings } from '../../i18n/context.js';
 
@@ -21,6 +22,7 @@
 	} = $props();
 
 	const subFields = $derived(field.fields ?? []);
+	const subGroups = $derived(groupFields(subFields));
 	const items = $derived((record[field.attribute] as Record<string, unknown>[] | undefined) ?? []);
 
 	let modalOpen = $state(false);
@@ -130,8 +132,37 @@
 {#if modalOpen}
 	<Modal title={fieldLabel(field)} onClose={closeModal}>
 		<div class="flex flex-col gap-4">
-			{#each subFields as f (f.attribute)}
-				<Field field={f} bind:record={draft} error={draftErrors[f.attribute] ?? ''} />
+			{#each subGroups 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.rows as row (row.map((f) => f.attribute).join('|'))}
+								{#if row.length > 1}
+									<div class="flex flex-col gap-4 md:flex-row">
+										{#each row as f (f.attribute)}
+											<Field field={f} bind:record={draft} error={draftErrors[f.attribute] ?? ''} class="md:min-w-0 md:flex-1" />
+										{/each}
+									</div>
+								{:else}
+									<Field field={row[0]} bind:record={draft} error={draftErrors[row[0].attribute] ?? ''} />
+								{/if}
+							{/each}
+						</div>
+					</fieldset>
+				{:else}
+					{#each group.rows as row (row.map((f) => f.attribute).join('|'))}
+						{#if row.length > 1}
+							<div class="flex flex-col gap-4 md:flex-row">
+								{#each row as f (f.attribute)}
+									<Field field={f} bind:record={draft} error={draftErrors[f.attribute] ?? ''} class="md:min-w-0 md:flex-1" />
+								{/each}
+							</div>
+						{:else}
+							<Field field={row[0]} bind:record={draft} error={draftErrors[row[0].attribute] ?? ''} />
+						{/if}
+					{/each}
+				{/if}
 			{/each}
 			<div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
 				<Button variant="ghost" onclick={closeModal}>{strings.cancel}</Button>

package/package.json

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