firstly 0.0.15 → 0.0.16-next.0

package/esm/svelte/FF_Cell_Error.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" generics="valueType = unknown, entityType = unknown">
+	import type { CellMetadata } from './customField'
+
+	interface Props<valueType = unknown, entityType = unknown> {
+		key: string
+		ui: CellMetadata<valueType, entityType>['ui']
+		error?: string
+		class?: string
+	}
+
+	let { ui, key, class: localClass, error }: Props<valueType, entityType> = $props()
+</script>
+
+{#if ui?.component?.error === undefined || ui?.component?.error === 'show'}
+	<label data-ff-cell-error for={key} class={localClass}>{@html error}</label>
+{:else if ui?.component?.error === 'remove'}
+	<!-- Nothing -->
+{:else if ui?.component?.error === 'hide'}
+	<span data-ff-cell-error class={localClass}></span>
+{/if}

package/esm/svelte/FF_Cell_Error.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { CellMetadata } from './customField';
+interface Props<valueType = unknown, entityType = unknown> {
+    key: string;
+    ui: CellMetadata<valueType, entityType>['ui'];
+    error?: string;
+    class?: string;
+}
+declare class __sveltets_Render<valueType = unknown, entityType = unknown> {
+    props(): Props<valueType, entityType>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <valueType = unknown, entityType = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<valueType, entityType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<valueType, entityType>['props']>, ReturnType<__sveltets_Render<valueType, entityType>['events']>, ReturnType<__sveltets_Render<valueType, entityType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<valueType, entityType>['bindings']>;
+    } & ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    <valueType = unknown, entityType = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<valueType, entityType>['props']> & {}): ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FfCellError: $$IsomorphicComponent;
+type FfCellError<valueType = unknown, entityType = unknown> = InstanceType<typeof FfCellError<valueType, entityType>>;
+export default FfCellError;

package/esm/svelte/FF_Cell_Hint.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" generics="valueType = unknown, entityType = unknown">
+	import type { CellMetadata } from './customField'
+
+	interface Props<valueType = unknown, entityType = unknown> {
+		key: string
+		ui: CellMetadata<valueType, entityType>['ui']
+		hint?: string
+		class?: string
+	}
+
+	let { ui, key, class: localClass, hint }: Props<valueType, entityType> = $props()
+</script>
+
+{#if ui?.component?.hint === undefined || ui?.component?.hint === 'show'}
+	<label data-ff-cell-hint for={key} class={localClass}>{@html hint}</label>
+{:else if ui?.component?.hint === 'remove'}
+	<!-- Nothing -->
+{:else if ui?.component?.hint === 'hide'}
+	<span data-ff-cell-hint class={localClass}></span>
+{/if}

package/esm/svelte/FF_Cell_Hint.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { CellMetadata } from './customField';
+interface Props<valueType = unknown, entityType = unknown> {
+    key: string;
+    ui: CellMetadata<valueType, entityType>['ui'];
+    hint?: string;
+    class?: string;
+}
+declare class __sveltets_Render<valueType = unknown, entityType = unknown> {
+    props(): Props<valueType, entityType>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <valueType = unknown, entityType = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<valueType, entityType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<valueType, entityType>['props']>, ReturnType<__sveltets_Render<valueType, entityType>['events']>, ReturnType<__sveltets_Render<valueType, entityType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<valueType, entityType>['bindings']>;
+    } & ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    <valueType = unknown, entityType = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<valueType, entityType>['props']> & {}): ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FfCellHint: $$IsomorphicComponent;
+type FfCellHint<valueType = unknown, entityType = unknown> = InstanceType<typeof FfCellHint<valueType, entityType>>;
+export default FfCellHint;

package/esm/svelte/FF_Config.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { FF_Theme, setDynamicCustomField } from './'
+	import type { DynamicCustomField, Theme } from './'
+	import DialogManagement from './dialog/DialogManagement.svelte'
+
+	interface Props {
+		theme: Theme
+		dynamicCustomField?: DynamicCustomField
+		children?: import('svelte').Snippet
+	}
+
+	const { theme, dynamicCustomField, children }: Props = $props()
+
+	// Create a reactive theme instance
+	const themeManager = $state(new FF_Theme(theme))
+
+	// Update theme when prop changes
+	$effect(() => {
+		themeManager.setTheme(theme)
+	})
+
+	if (dynamicCustomField) {
+		setDynamicCustomField(dynamicCustomField)
+	}
+</script>
+
+<DialogManagement />
+
+{@render children?.()}

package/esm/svelte/FF_Config.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DynamicCustomField, Theme } from './';
+interface Props {
+    theme: Theme;
+    dynamicCustomField?: DynamicCustomField;
+    children?: import('svelte').Snippet;
+}
+declare const FfConfig: import("svelte").Component<Props, {}, "">;
+type FfConfig = ReturnType<typeof FfConfig>;
+export default FfConfig;

package/esm/svelte/FF_Display.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" generics="valueType = unknown, entityType = unknown">
+	import { getClasses, getDynamicCustomField, type DisplayTheme } from './'
+	import { isComponentObject, type CustomFieldDefaultProps } from './customField'
+
+	interface Props extends CustomFieldDefaultProps {
+		classes?: DisplayTheme
+	}
+
+	let { field, value, error, classes: localClasses = {} }: Props = $props()
+
+	// let valueList = getValueList(field) as { id: string; caption: string }[] | undefined
+
+	let classes = $derived(getClasses('display', localClasses))
+	const dynamicCustomField = getDynamicCustomField()?.({ field, value, error, mode: 'display' })
+</script>
+
+{#if field.options.ui?.component?.display}
+	{@const customField = field.options.ui?.component?.display}
+	{#if isComponentObject(customField)}
+		{@const Component = customField.component}
+		<Component {field} bind:value {error} {...customField.props} />
+	{:else}
+		{@const Component = customField}
+		<Component {field} bind:value {error} />
+	{/if}
+{:else if dynamicCustomField}
+	{#if isComponentObject(dynamicCustomField)}
+		{@const Component = dynamicCustomField.component}
+		<Component {field} bind:value {error} {...dynamicCustomField.props} />
+	{:else}
+		{@const Component = dynamicCustomField}
+		<Component {field} bind:value {error} />
+	{/if}
+{:else if field.inputType === 'checkbox'}
+	<input
+		disabled
+		data-ff-display-checkbox
+		class={classes?.checkbox}
+		type="checkbox"
+		checked={value as boolean}
+	/>
+{:else}
+	{field.displayValue({ [field.key]: value } as Partial<entityType>)}
+{/if}
+
+<style>
+	[data-ff-display-checkbox] {
+		display: block;
+		margin: 0 auto;
+	}
+</style>

package/esm/svelte/FF_Display.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type DisplayTheme } from './';
+import { type CustomFieldDefaultProps } from './customField';
+interface Props extends CustomFieldDefaultProps {
+    classes?: DisplayTheme;
+}
+declare class __sveltets_Render<valueType = unknown, entityType = unknown> {
+    props(): Props;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <valueType = unknown, entityType = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<valueType, entityType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<valueType, entityType>['props']>, ReturnType<__sveltets_Render<valueType, entityType>['events']>, ReturnType<__sveltets_Render<valueType, entityType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<valueType, entityType>['bindings']>;
+    } & ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    <valueType = unknown, entityType = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<valueType, entityType>['props']> & {}): ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FfDisplay: $$IsomorphicComponent;
+type FfDisplay<valueType = unknown, entityType = unknown> = InstanceType<typeof FfDisplay<valueType, entityType>>;
+export default FfDisplay;

package/esm/svelte/FF_Edit.svelte

@@ -0,0 +1,104 @@
+<script lang="ts" generics="valueType = unknown, entityType = unknown">
+	import { getValueList, type FieldMetadata } from 'remult'
+
+	import { getClasses, getDynamicCustomField } from '.'
+	import type { EditTheme } from './'
+	import { isComponentObject } from './customField'
+
+	const default_uid = $props.id()
+
+	interface Props {
+		uid?: string
+		field: FieldMetadata<valueType, entityType>
+		value: valueType
+		error?: string
+		classes?: EditTheme
+	}
+
+	let {
+		uid = default_uid,
+		field,
+		value = $bindable(),
+		error,
+		classes: localClasses = {},
+	}: Props = $props()
+
+	let valueList = getValueList(field) as { id: string; caption: string }[] | undefined
+
+	let classes = $derived(getClasses('edit', localClasses))
+	const dynamicCustomField = getDynamicCustomField()?.({ field, value, error, mode: 'edit' })
+
+	const fromInput = (val: any) => {
+		// console.log(`fromInput`, val)
+		const res = field.valueConverter.fromInput(val)
+		// if (res && field.inputType === 'datetime-local') {
+		// 	const date = new Date(res)
+		// 	date.setMinutes(date.getMinutes() - date.getTimezoneOffset())
+		// 	return date.toISOString().slice(0, 16)
+		// }
+		return res
+	}
+
+	const toInput = (val: any) => {
+		// console.log(`toInput1`, val)
+		const res = field.valueConverter.toInput(val)
+		// console.log(`toInput2`, res)
+		return res
+	}
+</script>
+
+{#if field.options.ui?.component?.edit}
+	{@const customField = field.options.ui?.component?.edit}
+	{#if isComponentObject(customField)}
+		{@const Component = customField.component}
+		<Component {field} bind:value {error} {...customField.props} />
+	{:else}
+		{@const Component = customField}
+		<Component {field} bind:value {error} />
+	{/if}
+{:else if dynamicCustomField}
+	{#if isComponentObject(dynamicCustomField)}
+		{@const Component = dynamicCustomField.component}
+		<Component {field} bind:value {error} {...dynamicCustomField.props} />
+	{:else}
+		{@const Component = dynamicCustomField}
+		<Component {field} bind:value {error} />
+	{/if}
+{:else if valueList}
+	<select data-ff-edit-select class={classes?.select} id={uid} bind:value>
+		{#each valueList as item (item.id)}
+			<option value={item}>{item.caption}</option>
+		{/each}
+	</select>
+{:else if field.inputType === 'checkbox'}
+	<div style="display: flex; align-items: center; height: 3rem;">
+		<input
+			data-ff-edit-checkbox
+			class={classes?.checkbox}
+			id={uid}
+			type="checkbox"
+			bind:checked={value as boolean}
+		/>
+	</div>
+{:else}
+	<input
+		autocomplete="off"
+		data-ff-edit-input
+		class={classes?.input}
+		id={uid}
+		type={field.options.inputType}
+		placeholder={field.options.ui?.placeholder}
+		bind:value={() => fromInput(value as any), (v) => (value = toInput(v) as valueType)}
+		step={field.options.ui?.step}
+	/>
+{/if}
+
+<style>
+	input[data-ff-edit-input] {
+		width: 100%;
+	}
+
+	select[data-ff-edit-select] {
+		width: 100%;
+	}
+</style>

package/esm/svelte/FF_Edit.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type FieldMetadata } from 'remult';
+import type { EditTheme } from './';
+declare class __sveltets_Render<valueType = unknown, entityType = unknown> {
+    props(): {
+        uid?: string;
+        field: FieldMetadata<valueType, entityType>;
+        value: valueType;
+        error?: string;
+        classes?: EditTheme;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <valueType = unknown, entityType = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<valueType, entityType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<valueType, entityType>['props']>, ReturnType<__sveltets_Render<valueType, entityType>['events']>, ReturnType<__sveltets_Render<valueType, entityType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<valueType, entityType>['bindings']>;
+    } & ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    <valueType = unknown, entityType = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<valueType, entityType>['props']> & {}): ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FfEdit: $$IsomorphicComponent;
+type FfEdit<valueType = unknown, entityType = unknown> = InstanceType<typeof FfEdit<valueType, entityType>>;
+export default FfEdit;

package/esm/svelte/FF_Error.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" generics="valueType = unknown, entityType = unknown">
+	import { getClasses } from '.'
+	import type { CustomFieldDefaultProps } from './customField'
+	import type { ErrorTheme } from './ff_Config.svelte'
+
+	const default_uid = $props.id()
+
+	interface Props extends CustomFieldDefaultProps {
+		classes?: ErrorTheme
+	}
+
+	let { uid = default_uid, field, value, error, classes: localClasses = {} }: Props = $props()
+
+	let classes = $derived(getClasses('error', localClasses))
+</script>
+
+{#if field.options.ui?.component?.error === undefined || field.options.ui?.component?.error === 'show'}
+	<div data-ff-field-error class={classes.root}>{@html error}</div>
+{:else if field.options.ui?.component?.error === 'remove'}
+	<!-- Nothing -->
+{:else if field.options.ui?.component?.error === 'hide'}
+	<span class={classes.root}></span>
+{/if}

package/esm/svelte/FF_Error.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { CustomFieldDefaultProps } from './customField';
+import type { ErrorTheme } from './ff_Config.svelte';
+interface Props extends CustomFieldDefaultProps {
+    classes?: ErrorTheme;
+}
+declare class __sveltets_Render<valueType = unknown, entityType = unknown> {
+    props(): Props;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <valueType = unknown, entityType = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<valueType, entityType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<valueType, entityType>['props']>, ReturnType<__sveltets_Render<valueType, entityType>['events']>, ReturnType<__sveltets_Render<valueType, entityType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<valueType, entityType>['bindings']>;
+    } & ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    <valueType = unknown, entityType = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<valueType, entityType>['props']> & {}): ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FfError: $$IsomorphicComponent;
+type FfError<valueType = unknown, entityType = unknown> = InstanceType<typeof FfError<valueType, entityType>>;
+export default FfError;

package/esm/svelte/FF_Field.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" generics="valueType = unknown, entityType = unknown">
+	import { FF_Edit, FF_Error, FF_Hint, FF_Label, getClasses, type FieldTheme } from './'
+	import type { CustomFieldDefaultProps } from './customField'
+
+	const default_uid = $props.id()
+
+	interface Props extends CustomFieldDefaultProps {
+		classes?: FieldTheme
+	}
+
+	let {
+		uid = default_uid,
+		field,
+		value = $bindable(),
+		error,
+		classes: localClasses = {},
+	}: Props = $props()
+
+	let classes = $derived(getClasses('field', localClasses))
+</script>
+
+<div
+	data-ff-field
+	class={classes.root}
+	style:--width={field.options.ui?.width}
+	style:--margin-left={field.options.ui?.marginLeft}
+	style:--margin-right={field.options.ui?.marginRight}
+	style:--width-mobile={field.options.ui?.mobile?.width}
+	style:--margin-left-mobile={field.options.ui?.mobile?.marginLeft}
+	style:--margin-right-mobile={field.options.ui?.mobile?.marginRight}
+>
+	<FF_Label {uid} {field} {error} {value} />
+	<FF_Error {uid} {field} {error} {value} />
+	<FF_Edit {uid} {field} {error} bind:value />
+	<FF_Hint {uid} {field} {error} {value} />
+</div>
+
+<style>
+	[data-ff-field] {
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		flex: 1 1 calc(var(--width, 100) * 1%);
+		max-width: calc(var(--width, 100) * 1%);
+		padding: var(--ff-spacing);
+		margin-left: calc(var(--margin-left, 0) * 1%);
+		margin-right: calc(var(--margin-right, 0) * 1%);
+
+		/* For debugging purposes - outline that doesn't affect layout */
+		/* outline: 1px solid rgba(255, 0, 0, 0.5);
+		outline-offset: -1px; */
+	}
+
+	@media screen and (max-width: 40rem) {
+		[data-ff-field] {
+			flex: 1 1 calc(var(--width-mobile, 100) * 1%);
+			max-width: calc(var(--width-mobile, 100) * 1%);
+			margin-left: calc(var(--margin-left-mobile, 0) * 1%);
+			margin-right: calc(var(--margin-right-mobile, 0) * 1%);
+		}
+	}
+</style>

package/esm/svelte/FF_Field.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type FieldTheme } from './';
+import type { CustomFieldDefaultProps } from './customField';
+interface Props extends CustomFieldDefaultProps {
+    classes?: FieldTheme;
+}
+declare class __sveltets_Render<valueType = unknown, entityType = unknown> {
+    props(): Props;
+    events(): {};
+    slots(): {};
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <valueType = unknown, entityType = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<valueType, entityType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<valueType, entityType>['props']>, ReturnType<__sveltets_Render<valueType, entityType>['events']>, ReturnType<__sveltets_Render<valueType, entityType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<valueType, entityType>['bindings']>;
+    } & ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    <valueType = unknown, entityType = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<valueType, entityType>['props']> & {}): ReturnType<__sveltets_Render<valueType, entityType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FfField: $$IsomorphicComponent;
+type FfField<valueType = unknown, entityType = unknown> = InstanceType<typeof FfField<valueType, entityType>>;
+export default FfField;

package/esm/svelte/FF_Form.svelte

@@ -0,0 +1,156 @@
+<script lang="ts" generics="entityType = unknown">
+	import { EntityError, getEntityRef } from 'remult'
+
+	import { FF_Field, getClasses } from './'
+	import type { FF_Repo, FieldGroup, FormTheme } from './'
+
+	const default_uid = $props.id()
+
+	interface Props<entityType> {
+		uid_prefix?: string
+		uid?: string
+		r: FF_Repo<entityType>
+		groups?: FieldGroup<entityType>[]
+		defaults?: Partial<entityType>
+		classes?: FormTheme
+		show?: {
+			title?: boolean
+		}
+		onSaved?: (item: entityType) => void
+	}
+
+	let {
+		uid_prefix = '',
+		uid = default_uid,
+		r,
+		groups,
+		defaults,
+		show = {
+			title: true,
+		},
+		classes: localClasses = {},
+		onSaved,
+	}: Props<entityType> = $props()
+
+	const ToUse = uid_prefix ? `${uid_prefix}-${uid}` : uid
+
+	let classes = $derived(getClasses('form', localClasses))
+
+	let errors = $state<Record<string, string>>({})
+	let globalError = $state<string | undefined>(undefined)
+
+	let valuesToUse = $state(r.item ? r.item : r.create(defaults))
+	let ref = $derived(getEntityRef(valuesToUse))
+	const groupsToUse: FieldGroup<entityType>[] = $derived(groups ?? r.getLayout()?.groups ?? [])
+
+	const onsubmit = async (e: Event) => {
+		e.preventDefault()
+		// r.loading.saving = true
+		// 		FF_Form.svelte:48 [svelte] ownership_invalid_mutation
+		// src/lib/svelte/FF_Form.svelte mutated a value owned by src/routes/demo/FF_Simple/+page.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+		// https://svelte.dev/e/ownership_invalid_mutation
+		globalError = undefined
+		try {
+			if (ref.isNew()) {
+				const itemSaved = await ref.save()
+				r.items?.unshift(itemSaved)
+				if (r.aggregates && r.aggregates.$count !== undefined) {
+					r.aggregates.$count = r.aggregates.$count + 1
+				}
+				valuesToUse = r.create()
+				onSaved?.(itemSaved)
+			} else {
+				const itemSaved = await ref.save()
+				onSaved?.(itemSaved)
+			}
+			errors = {}
+		} catch (error) {
+			if (error instanceof EntityError) {
+				errors = error.modelState as Record<string, string>
+			} else {
+				// @ts-ignore
+				globalError = error.message
+			}
+		}
+		// r.loading.saving = false
+	}
+</script>
+
+<form data-ff-form class="{classes?.root} {r.metadata.key}" {onsubmit}>
+	<div data-ff-form-groups class={classes?.groups}>
+		{#each groupsToUse ?? [] as group (group.key)}
+			<div data-ff-form-group>
+				{#if show?.title}
+					<div data-ff-form-title>
+						<!-- {ref.isNew() ? 'Add' : 'Save'} -->
+						{group?.caption ?? r.metadata.caption}
+					</div>
+				{/if}
+				{#if group?.hint}
+					<div data-ff-form-hint>{@html group?.hint}</div>
+				{/if}
+				<div data-ff-form-fields class="{classes?.fields} {group.class}">
+					{#each group.fields as field}
+						<FF_Field
+							uid="{ToUse}-{field.key}"
+							{field}
+							bind:value={valuesToUse[field.key as keyof entityType]}
+							error={errors[field.key]}
+						/>
+					{/each}
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	<div data-ff-form-actions class={classes?.actions}>
+		<button
+			data-ff-form-button
+			class={classes?.submitButton}
+			disabled={!r.metadata.apiInsertAllowed() || r.loading.saving}
+		>
+			{ref.isNew() ? 'Add' : 'Save'}{r.loading.saving ? '...' : ''}
+		</button>
+		{globalError}
+	</div>
+	{globalError}
+	<!-- TODO: display errors of field not in the form -->
+</form>
+
+<style>
+	[data-ff-form-title] {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		padding: var(--ff-spacing);
+	}
+
+	[data-ff-form-hint] {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		padding: var(--ff-spacing);
+	}
+
+	[data-ff-form-fields] {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	/* To distribute as default css ? */
+	.ff-form-actions {
+		display: flex;
+		justify-content: flex-end;
+		margin: 1rem;
+
+		button {
+			border-radius: 0.5rem;
+			padding: 0.5rem 1rem;
+			background-color: green;
+			color: #fff;
+			border: none;
+			cursor: pointer;
+		}
+	}
+</style>

package/esm/svelte/FF_Form.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { FF_Repo, FieldGroup, FormTheme } from './';
+interface Props<entityType> {
+    uid_prefix?: string;
+    uid?: string;
+    r: FF_Repo<entityType>;
+    groups?: FieldGroup<entityType>[];
+    defaults?: Partial<entityType>;
+    classes?: FormTheme;
+    show?: {
+        title?: boolean;
+    };
+    onSaved?: (item: entityType) => void;
+}
+declare class __sveltets_Render<entityType = unknown> {
+    props(): Props<entityType>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <entityType = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<entityType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<entityType>['props']>, ReturnType<__sveltets_Render<entityType>['events']>, ReturnType<__sveltets_Render<entityType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<entityType>['bindings']>;
+    } & ReturnType<__sveltets_Render<entityType>['exports']>;
+    <entityType = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<entityType>['props']> & {}): ReturnType<__sveltets_Render<entityType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FfForm: $$IsomorphicComponent;
+type FfForm<entityType = unknown> = InstanceType<typeof FfForm<entityType>>;
+export default FfForm;