firstly 0.0.16-next.2 → 0.1.0-next.3

package/esm/mail/server/index.d.ts

@@ -1,38 +1,51 @@
 import type * as typeNodemailer from 'nodemailer';
 import type JSONTransport from 'nodemailer/lib/json-transport';
-import type Mail from 'nodemailer/lib/mailer';
 import type SendmailTransport from 'nodemailer/lib/sendmail-transport';
 import type SESTransport from 'nodemailer/lib/ses-transport';
 import type SMTPPool from 'nodemailer/lib/smtp-pool';
 import type SMTPTransport from 'nodemailer/lib/smtp-transport';
 import type StreamTransport from 'nodemailer/lib/stream-transport';
-import type { ComponentProps, ComponentType, SvelteComponent } from 'svelte';
-import { Module } from '../../server';
-import { default as DefaultMail } from '../templates/DefaultMail.svelte';
-export type TransportTypes = SMTPTransport | SMTPPool | SendmailTransport | StreamTransport | JSONTransport | SESTransport | typeNodemailer.Transport<any> | DefaultOptions;
-export type DefaultOptions = SMTPTransport.Options | SMTPPool.Options | SendmailTransport.Options | StreamTransport.Options | JSONTransport.Options | SESTransport.Options | typeNodemailer.TransportOptions;
-export type MailOptions<ComponentTemplateDefault extends SvelteComponent> = {
-    from?: Mail.Options['from'];
-    template?: {
-        component?: ComponentType<ComponentTemplateDefault>;
-        brandColor?: string;
+import { Module } from 'remult/server';
+import { type MailStyle } from './formatMailHelper';
+export type TransportTypes = SMTPPool | SMTPPool.Options | SendmailTransport | SendmailTransport.Options | StreamTransport | StreamTransport.Options | JSONTransport | JSONTransport.Options | SESTransport | SESTransport.Options | SMTPTransport | SMTPTransport.Options | string;
+export type DefaultOptions = typeNodemailer.SendMailOptions;
+type GlobalEasyOptions = {
+    saveHtml?: boolean;
+    from?: DefaultOptions['from'];
+    service?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+    footer?: string;
+    toHtml?: (args: MailStyle) => string;
+};
+export type MailOptions = GlobalEasyOptions & {
+    nodemailer?: {
+        transport?: TransportTypes;
+        defaults?: DefaultOptions;
     };
-    transport?: TransportTypes;
-    defaults?: DefaultOptions;
-    apiUrl?: Parameters<typeof typeNodemailer.createTestAccount>[0];
 };
 declare let transporter: ReturnType<typeof typeNodemailer.createTransport>;
 declare module 'remult' {
     interface RemultContext {
-        /** Better checking is it's present or not, that's why it's "?" */
         sendMail?: SendMail;
     }
 }
 export type SendMail = typeof sendMail;
-export declare const sendMail: <ComponentTemplateDefault extends SvelteComponent = DefaultMail>(
+export declare const sendMail: (
 /** usefull for logs, it has NO impact on the mail itself */
-topic: string, mailOptions: Parameters<typeof transporter.sendMail>[0] & {
-    templateProps?: ComponentProps<ComponentTemplateDefault> | undefined;
+topic: string, easyOptions: GlobalEasyOptions & {
+    to: Required<DefaultOptions>['to'];
+    subject: Required<DefaultOptions>['subject'];
+    title?: string;
+    sections: {
+        html: string;
+        cta?: {
+            html: string;
+            link: string;
+        } | undefined;
+    }[];
+}, options?: {
+    nodemailer?: MailOptions['nodemailer'];
 }) => ReturnType<typeof transporter.sendMail>;
-export declare const mail: (o?: MailOptions<SvelteComponent>) => Module;
+export declare const mail: (o?: MailOptions) => Module<unknown>;
 export {};

package/esm/mail/server/index.js

@@ -1,22 +1,38 @@
 import nodemailer from 'nodemailer';
-import { asClassComponent } from 'svelte/legacy';
-import { render } from 'svelty-email';
-import { remult } from 'remult';
+import { remult, repo } from 'remult';
+import { Module } from 'remult/server';
 import { cyan, green, magenta, red, sleep, white } from '@kitql/helpers';
-import { Module } from '../../server';
-import { default as DefaultMail } from '../templates/DefaultMail.svelte';
+import { log, mailEntities } from '../index';
+import { toHtml } from './formatMailHelper';
 let transporter;
 let globalOptions;
 const initMail = async (o) => {
-    globalOptions = o;
-    if (o?.transport) {
-        transporter = nodemailer.createTransport(o?.transport, o?.defaults);
+    globalOptions = {
+        ...o,
+        nodemailer: {
+            ...o?.nodemailer,
+            defaults: {
+                from: o?.from,
+                ...o?.nodemailer?.defaults,
+            },
+        },
+    };
+    if (o?.nodemailer?.transport) {
+        transporter = nodemailer.createTransport(o?.nodemailer?.transport, o?.nodemailer?.defaults);
     }
     else {
         try {
-            nodemailer.createTestAccount(globalOptions?.apiUrl ?? '', (err, account) => {
+            nodemailer.createTestAccount((err, account) => {
                 if (account) {
-                    globalOptions = { ...globalOptions, from: account.user };
+                    globalOptions = {
+                        ...globalOptions,
+                        ...{
+                            ...globalOptions?.nodemailer,
+                            nodemailer: {
+                                defaults: { from: account.user },
+                            },
+                        },
+                    };
                     transporter = nodemailer.createTransport({
                         host: account.smtp.host,
                         port: account.smtp.port,
@@ -28,16 +44,52 @@ const initMail = async (o) => {
                     });
                 }
                 else {
-                    mailModule.log.error("Error nodemailer.createTestAccount() can't be done.");
+                    log.error("Error nodemailer.createTestAccount() can't be done.");
                 }
             });
         }
         catch (error) {
-            mailModule.log.error("Error nodemailer.createTestAccount() can't be done.");
+            log.error("Error nodemailer.createTestAccount() can't be done.");
         }
     }
 };
-export const sendMail = async (topic, mailOptions) => {
+export const sendMail = async (topic, easyOptions, options) => {
+    let { nodemailer: nodemailerOptions } = options ?? {};
+    const easyOptionsToUse = {
+        ...easyOptions,
+        service: easyOptions.service ?? globalOptions?.service,
+        primaryColor: easyOptions.primaryColor ?? globalOptions?.primaryColor,
+        secondaryColor: easyOptions.secondaryColor ?? globalOptions?.secondaryColor,
+        footer: easyOptions.footer ?? globalOptions?.footer,
+        from: easyOptions.from ?? globalOptions?.from,
+    };
+    let { primaryColor, secondaryColor, title, footer, service } = easyOptionsToUse;
+    const { subject, sections, to } = easyOptionsToUse;
+    service = service ?? 'service';
+    primaryColor = primaryColor ?? '#0d0f70';
+    secondaryColor = secondaryColor ?? '#653eae';
+    title = title ?? subject ?? 'subject';
+    footer = footer ?? 'The team wishes you a great day 🚀';
+    const metadata = {
+        service,
+        primaryColor,
+        secondaryColor,
+        subject,
+        title,
+        footer,
+        sections,
+    };
+    const html = easyOptionsToUse.toHtml ? easyOptionsToUse.toHtml(metadata) : toHtml(metadata);
+    nodemailerOptions = {
+        defaults: {
+            ...globalOptions?.nodemailer?.defaults,
+            to,
+            subject,
+            html,
+            ...nodemailerOptions?.defaults,
+            from: easyOptionsToUse.from ?? globalOptions?.from,
+        },
+    };
     // if the transporter is not ready, wait for it! (it can happen only if nothing is set...)
     for (let i = 0; i < 30; i++) {
         if (transporter !== undefined) {
@@ -46,47 +98,70 @@ export const sendMail = async (topic, mailOptions) => {
         await sleep(100);
     }
     try {
-        if (!mailOptions.html) {
-            const template = asClassComponent(globalOptions?.template?.component ?? DefaultMail);
-            const props = {
-                brandColor: globalOptions?.template?.brandColor ?? '#5B68DF',
-                ...mailOptions.templateProps,
-            };
-            mailOptions.text = render({ template, props, options: { plainText: true, pretty: true } });
-            mailOptions.html = render({ template, props, options: { plainText: false, pretty: true } });
-        }
-        const info = await transporter.sendMail({
-            ...mailOptions,
-            ...{ from: mailOptions.from ?? globalOptions?.from },
-        });
-        if (!globalOptions?.transport) {
-            mailModule.log.error(`${magenta(`[${topic}]`)} - ⚠️  ${red(`mail not configured`)} ⚠️ 
-                 We are still nice and generated you an email preview link: 
-                 👉 ${cyan(String(nodemailer.getTestMessageUrl(
-            // @ts-ignore
-            info)))}
-
-                 To really send mails, check out the doc ${white(`https://firstly.fun/modules/mail`)}. 
+        if (!globalOptions?.nodemailer?.transport) {
+            const info = await transporter.sendMail({ ...nodemailerOptions.defaults });
+            log.error(`${magenta(`[${topic}]`)} - ⚠️  ${red(`mail not configured`)} ⚠️ 
+		We are still nice and generated you an email preview link (the mail we not really sent): 
+		👉 ${cyan(String(nodemailer.getTestMessageUrl(info)))}
+			
+		To really send mails, check out the doc ${white(`https://firstly.fun/modules/mail`)}. 
       `);
+            await repo(mailEntities.Mail).insert({
+                status: 'transport_not_configured',
+                to: JSON.stringify(to),
+                html: easyOptionsToUse.saveHtml ? html : '',
+                topic,
+                metadata,
+            });
+            return info;
         }
         else {
-            mailModule.log.success(`${magenta(`[${topic}]`)} - Sent to ${typeof mailOptions.to === 'string' ? green(mailOptions.to) : mailOptions.to}`);
+            const info = await transporter.sendMail({ ...nodemailerOptions.defaults });
+            log.success(`${magenta(`[${topic}]`)} - Sent to ${typeof nodemailerOptions.defaults?.to === 'string' ? green(nodemailerOptions.defaults?.to) : nodemailerOptions.defaults?.to}`);
+            await repo(mailEntities.Mail).insert({
+                status: 'sent',
+                to: JSON.stringify(to),
+                html: easyOptionsToUse.saveHtml ? html : '',
+                topic,
+                metadata,
+            });
+            return info;
         }
-        return info;
     }
     catch (error) {
-        mailModule.log.error(`${magenta(`[${topic}]`)} - Error`, error);
+        if (error instanceof Error && error.message.includes('Missing credentials for "PLAIN"')) {
+            log.error(`${magenta(`[${topic}]`)} - ⚠️  ${red(`mail not well configured`)} ⚠️ 
+👉 transport used:
+${cyan(JSON.stringify(globalOptions?.nodemailer?.transport, null, 2))}
+			`);
+        }
+        else {
+            log.error(`${magenta(`[${topic}]`)} - Error`, error);
+        }
+        await repo(mailEntities.Mail).insert({
+            status: 'error',
+            errorInfo: JSON.stringify(error),
+            to: JSON.stringify(to),
+            html: easyOptionsToUse.saveHtml ? html : '',
+            topic,
+            metadata,
+        });
+        throw error;
     }
 };
 const mailModule = new Module({
-    name: 'mail',
+    key: 'mail',
     priority: -888,
+    entities: Object.values(mailEntities),
 });
 export const mail = (o) => {
     mailModule.initApi = () => {
         initMail(o);
+        // Need to init in the 2 places!
+        remult.context.sendMail = sendMail;
     };
     mailModule.initRequest = async () => {
+        // Need to init in the 2 places!
         remult.context.sendMail = sendMail;
     };
     return mailModule;

package/esm/server/index.d.ts

@@ -1,6 +1,6 @@
 import type { RequestEvent } from '@sveltejs/kit';
 import { type ClassType } from 'remult';
-import type { RemultServerOptions } from 'remult/server';
+import { type RemultServerOptions } from 'remult/server';
 import { Log } from '@kitql/helpers';
 type ModuleInput = {
     /**
@@ -12,9 +12,10 @@ type ModuleInput = {
     controllers?: ClassType<any>[];
     initApi?: RemultServerOptions<RequestEvent>['initApi'];
     initRequest?: RemultServerOptions<RequestEvent>['initRequest'];
-    modules?: Module[];
+    /** @deprecated use `remult` modules instead */
+    modulesFF?: ModuleFF[];
 };
-export declare class Module {
+export declare class ModuleFF {
     name: string;
     log: Log;
     priority?: number;
@@ -22,11 +23,13 @@ export declare class Module {
     controllers?: ClassType<any>[];
     initApi?: RemultServerOptions<RequestEvent>['initApi'];
     initRequest?: RemultServerOptions<RequestEvent>['initRequest'];
-    modules?: Module[];
+    /** @deprecated use `remult` modules instead */
+    modulesFF?: ModuleFF[];
     constructor(input: ModuleInput);
 }
 type Options = RemultServerOptions<RequestEvent<Partial<Record<string, string>>, string | null>> & {
-    modules?: Module[] | undefined;
+    /** @deprecated use `remult` modules instead */
+    modulesFF?: ModuleFF[] | undefined;
 };
 declare module 'remult' {
     interface RemultContext {
@@ -45,5 +48,5 @@ export declare const firstly: (o: Options) => import("remult/remult-sveltekit").
 /**
  * Full flat and ordered list by index and concatenaining the modules name
  */
-export declare const modulesFlatAndOrdered: (modules: Module[]) => Module[];
+export declare const modulesFlatAndOrdered: (modules: ModuleFF[]) => ModuleFF[];
 export {};

package/esm/server/index.js

@@ -1,9 +1,9 @@
 import {} from 'remult';
-import { remultSveltekit } from 'remult/remult-sveltekit';
+import { remultApi } from 'remult/remult-sveltekit';
+import { Module } from 'remult/server';
 import { Log } from '@kitql/helpers';
-import { building } from '$app/environment';
 import { sveltekit } from '../sveltekit/server';
-export class Module {
+export class ModuleFF {
     name;
     log;
     priority;
@@ -11,7 +11,8 @@ export class Module {
     controllers;
     initApi;
     initRequest;
-    modules;
+    /** @deprecated use `remult` modules instead */
+    modulesFF;
     constructor(input) {
         this.name = input.name;
         this.log = new Log(`firstly | ${this.name}`);
@@ -20,7 +21,7 @@ export class Module {
         this.controllers = input.controllers;
         this.initApi = input.initApi;
         this.initRequest = input.initRequest;
-        this.modules = input.modules;
+        this.modulesFF = input.modulesFF;
     }
 }
 export let entities = [];
@@ -29,18 +30,24 @@ export let entities = [];
  * @deprecated will be done directly in remult when modules will be in 😉
  */
 export const firstly = (o) => {
-    const modulesSorted = modulesFlatAndOrdered([
-        ...[...(o.modules ?? []), sveltekit()],
-        new Module({
-            name: 'default',
-            entities: o.entities ?? [],
-            controllers: o.controllers ?? [],
-            initRequest: o.initRequest,
-            initApi: o.initApi,
-        }),
-    ]);
-    entities = modulesSorted.flatMap((m) => m.entities ?? []);
-    return remultSveltekit({
+    const modulesSorted = modulesFlatAndOrdered([...[...(o.modulesFF ?? []), sveltekit()]]);
+    const ffModulesToRemult = modulesSorted.map((m) => {
+        return new Module({
+            key: m.name,
+            entities: m.entities ?? [],
+            controllers: m.controllers ?? [],
+            initApi: m.initApi,
+            initRequest: m.initRequest,
+        });
+    });
+    // REMULT P1: With Generate Migrations it's a bit hard to get all entities from all modules.
+    entities = [
+        ...modulesSorted.flatMap((m) => m.entities ?? []),
+        ...(o.entities ?? []),
+        //Managing only the first level... should be ok for now...
+        ...(o?.modules?.flatMap((m) => m.entities ?? []) ?? []),
+    ];
+    return remultApi({
         // Changing the default default of remult
         logApiEndPoints: false,
         admin: true,
@@ -56,37 +63,8 @@ export const firstly = (o) => {
             },
         // Add user configuration
         ...o,
-        // Module part
-        entities,
-        controllers: modulesSorted.flatMap((m) => m.controllers ?? []),
-        initRequest: async (kitEvent, op) => {
-            for (let i = 0; i < modulesSorted.length; i++) {
-                const f = modulesSorted[i].initRequest;
-                if (f) {
-                    try {
-                        await f(kitEvent, op);
-                    }
-                    catch (error) {
-                        modulesSorted[i].log.error(error);
-                    }
-                }
-            }
-        },
-        initApi: async (r) => {
-            if (!building) {
-                for (let i = 0; i < modulesSorted.length; i++) {
-                    const f = modulesSorted[i].initApi;
-                    if (f) {
-                        try {
-                            await f(r);
-                        }
-                        catch (error) {
-                            modulesSorted[i].log.error(error);
-                        }
-                    }
-                }
-            }
-        },
+        // native remult modules
+        modules: [...(o.modules ?? []), ...ffModulesToRemult],
     });
 };
 /**
@@ -97,9 +75,9 @@ export const modulesFlatAndOrdered = (modules) => {
         return modules.reduce((acc, module) => {
             const fullName = parentName ? `${parentName}-${module.name}` : module.name;
             // Create a new module object without the 'modules' property
-            const { modules: _, ...flatModule } = module;
+            const { modulesFF: _, ...flatModule } = module;
             const newModule = { ...flatModule, name: fullName };
-            const subModules = module.modules ? flattenModules(module.modules, fullName) : [];
+            const subModules = module.modulesFF ? flattenModules(module.modulesFF, fullName) : [];
             return [...acc, newModule, ...subModules];
         }, []);
     };

package/esm/svelte/FF_Layout.svelte

@@ -39,14 +39,14 @@
 				onchange={() => (selectedThing = group.key)}
 				aria-label={group.caption}
 			/>
-			<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
+			<div role="tabpanel" class="tab-content rounded-box border-base-300 bg-base-100 p-6">
 				<FF_Form {r} groups={[group]} show={{ title: false }}></FF_Form>
 			</div>
 		{/each}
 	</div>
 {:else if layoutToUse.type === 'accordion'}
 	{#each layoutToUse.groups ?? [] as group (group.key)}
-		<div class="bg-base-100 collapse">
+		<div class="collapse bg-base-100">
 			<input
 				type="radio"
 				name="my-accordion"

package/esm/svelte/dialog/DialogManagement.svelte

@@ -85,10 +85,10 @@
 				<p>Hey 🫵 developer, you are missing a few things 🤡!</p>
 				<p>Or use use one of the custom built in dialog like</p>
 
-				<pre class="bg-base-300 mt-2 p-2 text-xs">await dialog.confirmDelete('The Car')</pre>
+				<pre class="mt-2 bg-base-300 p-2 text-xs">await dialog.confirmDelete('The Car')</pre>
 
 				<p>Or pass you own component</p>
-				<pre class="bg-base-300 mt-2 p-2 text-xs">{`await dialog.show({
+				<pre class="mt-2 bg-base-300 p-2 text-xs">{`await dialog.show({
   detail: { caption: 'Interlocuteur' },
   component: CreateCarForm,
   props: { isEdit: false },

package/esm/svelte/helpers.d.ts

@@ -5,6 +5,7 @@ export declare function overwriteOptions<valueType = unknown, entityType = unkno
     valueType: any;
     key: entityType extends object ? keyof entityType & string : string;
     caption: string;
+    label: string;
     dbName: string;
     inputType: string;
     allowNull: boolean;

package/esm/svelte/index.d.ts

@@ -20,6 +20,7 @@ export { overwriteOptions, deepMerge, isOfType } from './helpers';
 export { dialog } from './dialog/dialog';
 export { SP } from './class/SP.svelte';
 export type { ParamDefinition } from './class/SP.svelte';
+export { initRemultSvelteReactivity } from './initRemultSvelteReactivity';
 declare module 'remult' {
     interface FieldOptions<entityType = unknown, valueType = unknown> {
         ui?: CellMetadata<valueType, entityType>['ui'];

package/esm/svelte/index.js

@@ -16,6 +16,7 @@ export { tryCatch, tryCatchSync } from './tryCatch';
 export { overwriteOptions, deepMerge, isOfType } from './helpers';
 export { dialog } from './dialog/dialog';
 export { SP } from './class/SP.svelte';
+export { initRemultSvelteReactivity } from './initRemultSvelteReactivity';
 // - [ ] Try to pnpm pack to see what css is needed.
 //   - [ ] let's look at the data-ff-xxx story ?
 //   - [ ] how lib defaults should be configured ?

package/esm/svelte/initRemultSvelteReactivity.d.ts

@@ -0,0 +1 @@
+export declare function initRemultSvelteReactivity(): void;

package/esm/svelte/initRemultSvelteReactivity.js

@@ -0,0 +1,29 @@
+import { createSubscriber } from 'svelte/reactivity';
+import { Remult, remult } from 'remult';
+// To be done once in the application.
+export function initRemultSvelteReactivity() {
+    // Auth reactivity (remult.user, remult.authenticated(), ...)
+    {
+        let update = () => { };
+        const s = createSubscriber((u) => {
+            update = u;
+        });
+        remult.subscribeAuth({
+            reportObserved: () => s(),
+            reportChanged: () => update(),
+        });
+    }
+    // Entities reactivity
+    {
+        Remult.entityRefInit = (x) => {
+            let update = () => { };
+            const s = createSubscriber((u) => {
+                update = u;
+            });
+            x.subscribe({
+                reportObserved: () => s(),
+                reportChanged: () => update(),
+            });
+        };
+    }
+}

package/esm/sveltekit/server/index.d.ts

@@ -1,5 +1,5 @@
-import { Module } from '../../server';
+import { ModuleFF } from '../../server';
 /**
  * @deprecated will be done directly in remult when modules will be in 😉
  */
-export declare const sveltekit: () => Module;
+export declare const sveltekit: () => ModuleFF;

package/esm/sveltekit/server/index.js

@@ -1,10 +1,10 @@
 import { remult } from 'remult';
-import { Module } from '../../server';
+import { ModuleFF } from '../../server';
 /**
  * @deprecated will be done directly in remult when modules will be in 😉
  */
 export const sveltekit = () => {
-    return new Module({
+    return new ModuleFF({
         name: 'sveltekit',
         priority: -779,
         entities: [],

package/esm/ui/Button.svelte

@@ -102,7 +102,7 @@
 		{...$content}
 		use:content
 		transition:fade={{ duration: 100 }}
-		class="bg-base-300 z-30 rounded-lg ring-1 ring-black"
+		class="z-30 rounded-lg bg-base-300 ring-1 ring-black"
 	>
 		<div {...$arrow} use:arrow></div>
 		<div class="px-4 py-1">

package/esm/ui/Field.svelte

@@ -40,6 +40,7 @@
 
 	export let clearable: boolean | undefined = undefined
 	export let disabled = false
+	export let createRequest: ((args: { input: string; id: string }) => void) | undefined = undefined
 
 	const dispatch = createEventDispatcher()
 
@@ -246,7 +247,8 @@
 					error = e.detail
 				}}
 				createOptionWhenNoResult={!!cell.field?.options.createOptionWhenNoResult}
-				on:createRequest
+				{createRequest}
+				default_select_if_one_item={!!cell.field?.options.default_select_if_one_item}
 			/>
 		{/if}
 	{:else if metaType.kind === 'enum'}
@@ -301,7 +303,7 @@
 				{...common(cell.field)}
 				autocomplete="off"
 				class={tw(
-					`join-item placeholder:text-base-content/30 w-full bg-transparent`,
+					`join-item w-full bg-transparent placeholder:text-base-content/30`,
 					metaType.subKind === 'number' && 'text-end',
 				)}
 				type={metaType.subKind.replaceAll('dateOnly', 'date')}
@@ -328,6 +330,6 @@
 		/>
 	{:else}
 		<!-- This shoud NEVER be displayed -->
-		<span class="text-error flex items-center pl-2">Type "{cell.field?.inputType}" not managed!</span>
+		<span class="flex items-center pl-2 text-error">Type "{cell.field?.inputType}" not managed!</span>
 	{/if}
 </FieldContainer>

package/esm/ui/Field.svelte.d.ts

@@ -12,9 +12,12 @@ declare class __sveltets_Render<T extends Record<any, any>> {
         focus?: boolean | undefined;
         clearable?: boolean | undefined | undefined;
         disabled?: boolean | undefined;
+        createRequest?: ((args: {
+            input: string;
+            id: string;
+        }) => void) | undefined;
     };
     events(): {
-        createRequest: CustomEvent<any>;
         selected: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/esm/ui/FieldGroup.svelte

@@ -17,6 +17,7 @@
 	export let store: StoreItem<T>
 
 	export let focusKey: string | null | undefined = null
+	export let createRequest: ((args: { input: string; id: string }) => void) | undefined = undefined
 
 	const getError = (errors: any, field: FieldMetadata<any, any>) => {
 		const fo = getRelationFieldInfo(field)
@@ -105,7 +106,7 @@
 					bind:value={$store.item[cell.field.key]}
 					error={getError($store.errors, cell.field)}
 					{focus}
-					on:createRequest
+					{createRequest}
 				/>
 				<!-- disabled={isDisableFieldDynamic(cell)} -->
 			{:else}

package/esm/ui/FieldGroup.svelte.d.ts

@@ -7,9 +7,12 @@ declare class __sveltets_Render<T extends Record<any, any>> {
         cells: Cell<T>[];
         store: StoreItem<T>;
         focusKey?: string | null | undefined;
+        createRequest?: ((args: {
+            input: string;
+            id: string;
+        }) => void) | undefined;
     };
     events(): {
-        createRequest: CustomEvent<any>;
         changed: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;