fuma 0.2.6 → 0.3.0

package/dist/api/client.d.ts

@@ -0,0 +1,3 @@
+import { type CreateAxiosDefaults } from 'axios';
+import type { TypeMap, ApiConfig, ApiClient } from './config.js';
+export declare function useApiClient<T extends TypeMap, C extends ApiConfig<T>>(prismaConfig: C, axiosConfig?: CreateAxiosDefaults): ApiClient<T, C>;

package/dist/api/client.js

@@ -0,0 +1,24 @@
+import axios, {} from 'axios';
+import * as devalue from 'devalue';
+export function useApiClient(prismaConfig, axiosConfig = {}) {
+    const _axios = axios.create({ baseURL: '/api', ...axiosConfig });
+    function useSearch(model) {
+        return async (search) => {
+            const config = { params: { search, model } };
+            const { data, headers } = await _axios.get('', config);
+            ensureJson(headers);
+            return devalue.unflatten(data);
+        };
+    }
+    const api = Object.keys(prismaConfig).reduce((acc, model) => ({
+        ...acc,
+        [model]: useSearch(model)
+    }), {});
+    return api;
+}
+function ensureJson(headers) {
+    const contentType = headers['content-type'];
+    if (contentType !== 'application/json') {
+        throw new Error(`Response Content-type is '${contentType}' instead 'application/json'`);
+    }
+}

package/dist/api/config.d.ts

@@ -0,0 +1,46 @@
+import type { OperationPayload, GetResult } from '@prisma/client/runtime/library.js';
+export type Operation = 'findFirst' | 'findFirstOrThrow' | 'findUnique' | 'findUniqueOrThrow' | 'findMany' | 'create' | 'createMany' | 'update' | 'updateMany' | 'upsert' | 'delete' | 'deleteMany' | 'aggregate' | 'count' | 'groupBy';
+export type TypeMap = {
+    model: {
+        [M: string]: {
+            payload: OperationPayload;
+            operations: {
+                [O in Operation]: {
+                    args: {};
+                };
+            };
+        };
+    };
+};
+export type Result<T extends TypeMap, M extends keyof T['model'], Query extends {}, Payload extends T['model'][M]['payload'] = T['model'][M]['payload']> = GetResult<Payload, Query, 'findMany'>;
+export type Query<T extends TypeMap, M extends keyof T['model'], O extends Operation = 'findMany'> = T['model'][M]['operations'][O]['args'];
+export type QueryToResult<T extends TypeMap, M extends keyof T['model'], O extends Operation = 'findMany', Q extends Query<T, M, O> = {}> = (query: Q) => Promise<Result<T, M, Q>>;
+export type ApiPrismaClient<T extends TypeMap> = {
+    [M in keyof T['model']]: {
+        [O in Operation]: QueryToResult<T, M, O>;
+    };
+};
+/**
+ * @example
+ * const config = {
+ *		user: (contains) => ({ where: { username: { contains } } }),
+ * } satisfies ApiConfig<Prisma.TypeMap>
+ */
+export type ApiConfig<T extends TypeMap> = {
+    [M in keyof T['model']]?: (search: string) => Query<T, M, 'findMany'>;
+};
+export type ApiClient<T extends TypeMap, C extends ApiConfig<T>> = {
+    [M in keyof C]: C[M] extends (...args: any) => infer Q ? (search: string) => Promise<Result<T, M & string, Q & {}>> : never;
+};
+export type ModelApiQuery = {
+    model: string;
+    search?: string;
+    take?: number;
+    skip?: number;
+};
+export declare const modelApiQuery: {
+    model: import("zod").ZodString;
+    search: import("zod").ZodDefault<import("zod").ZodString>;
+    take: import("zod").ZodDefault<import("zod").ZodNumber>;
+    skip: import("zod").ZodDefault<import("zod").ZodNumber>;
+};

package/dist/api/config.js

@@ -0,0 +1,7 @@
+import { z } from '../validation/zod.js';
+export const modelApiQuery = {
+    model: z.string(),
+    search: z.string().default(''),
+    take: z.number().default(10),
+    skip: z.number().default(0)
+};

package/dist/api/index.d.ts

@@ -0,0 +1,3 @@
+export * from './config.js';
+export * from './client.js';
+export * from './server.js';

package/dist/api/index.js

@@ -0,0 +1,3 @@
+export * from './config.js';
+export * from './client.js';
+export * from './server.js';

package/dist/api/server.d.ts

@@ -0,0 +1,11 @@
+import { type RequestHandler } from '@sveltejs/kit';
+import { type ApiConfig, type TypeMap } from './config.js';
+interface BasicPrismaClient {
+    [K: string]: any;
+    $connect: any;
+    $transaction: any;
+}
+export declare function apiServer<T extends TypeMap>(config: ApiConfig<T>, client: BasicPrismaClient): {
+    GET: RequestHandler;
+};
+export {};

package/dist/api/server.js

@@ -0,0 +1,17 @@
+import { error } from '@sveltejs/kit';
+import { json } from '../server/json.js';
+import { parseQuery } from '../server/parseQuery.js';
+import { modelApiQuery } from './config.js';
+export function apiServer(config, client) {
+    return {
+        async GET(event) {
+            const { model, search, take, skip } = parseQuery(event.url, modelApiQuery);
+            if (!(model in config))
+                error(400, `Model "${model}" is not exposed in this API.`);
+            const baseQuery = { take, skip };
+            //@ts-ignore
+            const result = await client[model].findMany({ ...baseQuery, ...config[model](search) });
+            return json(result);
+        }
+    };
+}

package/dist/{Meta.svelte → private/Meta.svelte}

@@ -1,9 +1,9 @@
 <script>import {} from "svelte";
 import { slide } from "svelte/transition";
 import { mdiEyeOffOutline, mdiEyeOutline } from "@mdi/js";
-import { Card } from "./ui/card/index.js";
-import { Table } from "./ui/table/index.js";
-import { Icon } from "./ui/icon/index.js";
+import { Card } from "../ui/card/index.js";
+import { Table } from "../ui/table/index.js";
+import { Icon } from "../ui/icon/index.js";
 export let name = "";
 export let description = "";
 export let component;
@@ -27,7 +27,7 @@ function updateComponentMeta(c) {
 }
 </script>
 
-<Card class="mx-auto mt-6 max-w-4xl">
+<Card class="mx-auto mb-6 max-w-4xl">
 	<div slot="title" class="flex items-center gap-4">
 		<span class="grow">{name}</span>
 		<button class="btn btn-square btn-sm" on:click={() => (isPropsVisible = !isPropsVisible)}>

package/dist/private/api.d.ts

@@ -0,0 +1,47 @@
+import type { Prisma } from '@prisma/client';
+export declare const apiConfig: {
+    Tag: (search: string) => {
+        where: {
+            name: {
+                contains: string;
+            };
+        };
+    };
+    Post: (search: string) => {
+        where: {
+            tags: {
+                some: {
+                    name: {
+                        contains: string;
+                    };
+                };
+            };
+        };
+        include: {
+            tags: true;
+        };
+    };
+};
+export declare const api: import("../api/config.js").ApiClient<Prisma.TypeMap<import("@prisma/client/runtime/library").DefaultArgs>, {
+    Tag: (search: string) => {
+        where: {
+            name: {
+                contains: string;
+            };
+        };
+    };
+    Post: (search: string) => {
+        where: {
+            tags: {
+                some: {
+                    name: {
+                        contains: string;
+                    };
+                };
+            };
+        };
+        include: {
+            tags: true;
+        };
+    };
+}>;

package/dist/private/api.js

@@ -0,0 +1,9 @@
+import { useApiClient } from '../api/client.js';
+export const apiConfig = {
+    Tag: (search) => ({ where: { name: { contains: search } } }),
+    Post: (search) => ({
+        where: { tags: { some: { name: { contains: search } } } },
+        include: { tags: true }
+    })
+};
+export const api = useApiClient(apiConfig);

package/dist/private/model.d.ts

@@ -0,0 +1,40 @@
+export declare const modelPost: {
+    content: import("zod").ZodString;
+    aString: import("zod").ZodString;
+    aBoolean: import("zod").ZodBoolean;
+    aDate: import("zod").ZodDate;
+    aNumber: import("zod").ZodNumber;
+    tags: import("zod").ZodEffects<import("zod").ZodArray<import("zod").ZodObject<{
+        id: import("zod").ZodString;
+    }, "strip", import("zod").ZodTypeAny, {
+        id: string;
+    }, {
+        id: string;
+    }>, "many">, Partial<Record<"set" | "delete" | "connect" | "disconnect", {
+        id: string;
+    }[]>>, {
+        id: string;
+    }[]>;
+};
+export declare const modelPostUpdate: {
+    id: import("zod").ZodString;
+    tags: import("zod").ZodEffects<import("zod").ZodArray<import("zod").ZodObject<{
+        id: import("zod").ZodString;
+    }, "strip", import("zod").ZodTypeAny, {
+        id: string;
+    }, {
+        id: string;
+    }>, "many">, Partial<Record<"set" | "delete" | "connect" | "disconnect", {
+        id: string;
+    }[]>>, {
+        id: string;
+    }[]>;
+    content: import("zod").ZodString;
+    aString: import("zod").ZodString;
+    aBoolean: import("zod").ZodBoolean;
+    aDate: import("zod").ZodDate;
+    aNumber: import("zod").ZodNumber;
+};
+export declare const modelTag: {
+    name: import("zod").ZodString;
+};

package/dist/private/model.js

@@ -0,0 +1,17 @@
+import { z } from '../validation/zod.js';
+export const modelPost = {
+    content: z.string().min(10),
+    aString: z.string(),
+    aBoolean: z.boolean(),
+    aDate: z.date(),
+    aNumber: z.number(),
+    tags: z.relations.connect
+};
+export const modelPostUpdate = {
+    ...modelPost,
+    id: z.string(),
+    tags: z.relations.set
+};
+export const modelTag = {
+    name: z.string().min(2)
+};

package/dist/server/auth.js

@@ -1,7 +1,7 @@
 import { Lucia } from 'lucia';
 import { dev } from '$app/environment';
 import { PrismaAdapter } from '@lucia-auth/adapter-prisma';
-import { prisma } from './prisma.js';
+import { prisma } from '../private/prisma.js';
 const adapter = new PrismaAdapter(prisma.session, prisma.user);
 export const lucia = new Lucia(adapter, {
     sessionCookie: {

package/dist/server/parseFormData.js

@@ -1,3 +1,5 @@
+import { USE_JSON_PARSER } from '../utils/constant.js';
+import { jsonParse } from '../utils/jsonParse.js';
 import z from 'zod';
 export async function parseFormData(requestOrFormData, shapes, validation) {
     const formData = requestOrFormData instanceof Request ? await requestOrFormData.formData() : requestOrFormData;
@@ -24,7 +26,11 @@ export async function parseFormData(requestOrFormData, shapes, validation) {
 function flateToNeestedObject(flatObject) {
     const obj = {};
     Object.entries(flatObject).forEach(([key, value]) => {
-        set(obj, key, value);
+        const useJsonParse = typeof value === 'string' && value.startsWith(USE_JSON_PARSER);
+        const _value = useJsonParse ? jsonParse(value.replace(USE_JSON_PARSER, ''), null) : value;
+        if (useJsonParse)
+            console.log({ value, _value });
+        set(obj, key, _value);
     });
     return obj;
 }

package/dist/server/parseQuery.d.ts

@@ -1,11 +1,2 @@
-/// <reference types="@sveltejs/kit" />
 import type { ZodRawShape } from 'zod';
-export declare function parseQuery<Type extends ZodRawShape>(url: URL, shape: Type): {
-    err: import("@sveltejs/kit").ActionFailure<{
-        issues: import("zod").ZodIssue[];
-    }>;
-    data?: undefined;
-} | {
-    data: { [k_1 in keyof import("zod").objectUtil.addQuestionMarks<import("zod").baseObjectOutputType<Type>, { [k in keyof import("zod").baseObjectOutputType<Type>]: undefined extends import("zod").baseObjectOutputType<Type>[k] ? never : k; }[keyof Type]>]: import("zod").objectUtil.addQuestionMarks<import("zod").baseObjectOutputType<Type>, { [k_2 in keyof import("zod").baseObjectOutputType<Type>]: undefined extends import("zod").baseObjectOutputType<Type>[k_2] ? never : k_2; }[keyof Type]>[k_1]; };
-    err?: undefined;
-};
+export declare function parseQuery<Type extends ZodRawShape>(url: URL, shape: Type): { [k_1 in keyof import("zod").objectUtil.addQuestionMarks<import("zod").baseObjectOutputType<Type>, { [k in keyof import("zod").baseObjectOutputType<Type>]: undefined extends import("zod").baseObjectOutputType<Type>[k] ? never : k; }[keyof Type]>]: import("zod").objectUtil.addQuestionMarks<import("zod").baseObjectOutputType<Type>, { [k_2 in keyof import("zod").baseObjectOutputType<Type>]: undefined extends import("zod").baseObjectOutputType<Type>[k_2] ? never : k_2; }[keyof Type]>[k_1]; };

package/dist/server/parseQuery.js

@@ -1,4 +1,4 @@
-import { fail } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit';
 import { z } from '../validation/zod.js';
 export function parseQuery(url, shape) {
     const queryRaw = {};
@@ -8,8 +8,7 @@ export function parseQuery(url, shape) {
             queryRaw[name] = param;
     });
     const parsed = z.object(shape).safeParse(queryRaw);
-    if (parsed.success === false) {
-        return { err: fail(400, { issues: parsed.error.issues }) };
-    }
-    return { data: parsed.data };
+    if (parsed.success === false)
+        error(400, { message: parsed.error.message });
+    return parsed.data;
 }

package/dist/ui/drawer/Drawer.svelte

@@ -8,19 +8,22 @@ import { subscibeDrawerLayers } from "./layers.js";
 import { contextContainer } from "../context.js";
 export let title = "";
 export let key;
-export let value = "1";
 let klass = "";
 export { klass as class };
 export let maxWidth = "32rem";
 export let classHeader = "";
 export let classBody = "";
-export function open() {
-  goto($urlParam.with({ [key]: value }), { replaceState: true, noScroll: true });
+export function open(value = 1, options = {}) {
+  return goto($urlParam.with({ [key]: value }), {
+    ...options,
+    replaceState: true,
+    noScroll: true
+  });
 }
-export function close() {
-  goto($urlParam.without(key), { replaceState: true, noScroll: true });
+export function close(options = {}) {
+  return goto($urlParam.without(key), { ...options, replaceState: true, noScroll: true });
 }
-const { offset, destroy, isActive } = subscibeDrawerLayers(key, value);
+const { offset, index, destroy, isActive } = subscibeDrawerLayers(key);
 onDestroy(destroy);
 contextContainer.set("drawer");
 </script>
@@ -28,15 +31,20 @@ contextContainer.set("drawer");
 {#if $isActive}
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
-		on:click={close}
-		on:keyup={close}
+		on:click={() => close()}
+		on:keyup={() => close()}
 		transition:fade={{ duration: 200 }}
-		class="fixed inset-0 z-10 bg-black/15 backdrop-blur-[1.5px] dark:bg-white/15"
+		style="z-index: {10 + $index};"
+		class="fixed inset-0 bg-black/15 backdrop-blur-[1.5px] dark:bg-white/15"
 	/>
 
 	<aside
 		transition:fly|local={{ x: 500, duration: 200, opacity: 1 }}
-		style="max-width: min(100%, {maxWidth}); transform: translateX({-$offset * 4}rem);"
+		style="
+			z-index: {10 + $index};
+			max-width: min(100%, {maxWidth});
+			transform: translateX({-$offset * 4}rem);
+		"
 		class="{klass}
       fixed bottom-0 right-0 top-0 z-10 flex
 			w-full flex-col overflow-y-scroll bg-base-100
@@ -50,7 +58,7 @@ contextContainer.set("drawer");
 			"
 		>
 			<h2 class="title">{title}</h2>
-			<button on:click={close} class="btn btn-square btn-sm">
+			<button on:click={() => close()} class="btn btn-square btn-sm">
 				<Icon path={mdiClose} title="annuler" />
 			</button>
 		</div>

package/dist/ui/drawer/Drawer.svelte.d.ts

@@ -3,21 +3,44 @@ declare const __propDef: {
     props: {
         title?: string | undefined;
         /** Key used in url query params */ key: string;
-        /** Value need to match in url query params*/ value?: string | undefined;
         class?: string | undefined;
         maxWidth?: string | undefined;
         classHeader?: string | undefined;
         classBody?: string | undefined;
-        open?: (() => void) | undefined;
-        close?: (() => void) | undefined;
+        open?: ((value?: number, options?: {
+            replaceState?: boolean | undefined;
+            noScroll?: boolean | undefined;
+            keepFocus?: boolean | undefined;
+            invalidateAll?: boolean | undefined;
+            state?: App.PageState | undefined;
+        } | undefined) => Promise<void>) | undefined;
+        close?: ((options?: {
+            replaceState?: boolean | undefined;
+            noScroll?: boolean | undefined;
+            keepFocus?: boolean | undefined;
+            invalidateAll?: boolean | undefined;
+            state?: App.PageState | undefined;
+        } | undefined) => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
-            open: () => void;
-            close: () => void;
+            open: (value?: number, options?: {
+                replaceState?: boolean | undefined;
+                noScroll?: boolean | undefined;
+                keepFocus?: boolean | undefined;
+                invalidateAll?: boolean | undefined;
+                state?: App.PageState | undefined;
+            } | undefined) => Promise<void>;
+            close: (options?: {
+                replaceState?: boolean | undefined;
+                noScroll?: boolean | undefined;
+                keepFocus?: boolean | undefined;
+                invalidateAll?: boolean | undefined;
+                state?: App.PageState | undefined;
+            } | undefined) => Promise<void>;
         };
     };
 };
@@ -25,7 +48,19 @@ export type DrawerProps = typeof __propDef.props;
 export type DrawerEvents = typeof __propDef.events;
 export type DrawerSlots = typeof __propDef.slots;
 export default class Drawer extends SvelteComponent<DrawerProps, DrawerEvents, DrawerSlots> {
-    get open(): () => void;
-    get close(): () => void;
+    get open(): (value?: number, options?: {
+        replaceState?: boolean | undefined;
+        noScroll?: boolean | undefined;
+        keepFocus?: boolean | undefined;
+        invalidateAll?: boolean | undefined;
+        state?: App.PageState | undefined;
+    } | undefined) => Promise<void>;
+    get close(): (options?: {
+        replaceState?: boolean | undefined;
+        noScroll?: boolean | undefined;
+        keepFocus?: boolean | undefined;
+        invalidateAll?: boolean | undefined;
+        state?: App.PageState | undefined;
+    } | undefined) => Promise<void>;
 }
 export {};

package/dist/ui/drawer/layers.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="svelte" />
 import { type Readable } from 'svelte/store';
-export declare function subscibeDrawerLayers(key: string, value: string): {
+export declare function subscibeDrawerLayers(key: string): {
     isActive: Readable<boolean>;
+    index: Readable<number>;
     offset: Readable<number>;
     destroy(): void;
 };

package/dist/ui/drawer/layers.js

@@ -1,4 +1,4 @@
-import { derived, get, writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 import { page } from '$app/stores';
 import { browser } from '$app/environment';
 const layers = writable([]);
@@ -9,10 +9,10 @@ const layersOffset = derived(layers, ($layers) => {
         return { ...acc, [layer]: drawerOffset };
     }, {});
 });
-export function subscibeDrawerLayers(key, value) {
+export function subscibeDrawerLayers(key) {
     const layerId = Math.random().toString().slice(2, 12);
     let isInitialized = false;
-    const isActive = derived(page, ({ url }) => url.searchParams.get(key) === value, false);
+    const isActive = derived(page, ({ url }) => url.searchParams.has(key), false);
     const isActiveUnsubscribe = isActive.subscribe(($isActive) => {
         if ($isActive)
             addLayer();
@@ -41,7 +41,8 @@ export function subscibeDrawerLayers(key, value) {
     }
     return {
         isActive,
-        offset: derived(layersOffset, (drawers) => drawers[layerId]),
+        index: derived(layers, ($layers) => $layers.indexOf(layerId)),
+        offset: derived(layersOffset, (offsets) => offsets[layerId]),
         destroy() {
             removeLayer();
             isActiveUnsubscribe();

package/dist/ui/form/Form.svelte

@@ -2,7 +2,7 @@
 
 <script
 
-	generics="Shape extends z.ZodRawShape, ReturnData extends Record<string, unknown> = FormData<Shape>"
+	generics="Shape extends z.ZodRawShape, Data extends FormDataInput<Shape> = FormDataInput<Shape>"
 >import { createEventDispatcher, onMount } from "svelte";
 import { fade } from "svelte/transition";
 import { page } from "$app/stores";
@@ -12,8 +12,9 @@ import {
   getFieldType,
   useHandleInput
 } from "./form.js";
+import ButtonDelete from "../button/ButtonDelete.svelte";
 import { useForm } from "../../validation/form.js";
-import Input from "./FormInput.svelte";
+import FormInput from "./FormInput.svelte";
 import FormSection from "./FormSection.svelte";
 let klass = "";
 export { klass as class };
@@ -22,32 +23,50 @@ export let classAction = "";
 export let model = void 0;
 export let fields = [];
 export let sections = [{}];
-export let data = initData(fields);
 export let action = "";
-export let actionDelete = "";
-export let actionPrefix = "";
+export let actionCreate = "_create";
+export let actionDelete = "_delete";
+export let actionUpdate = "_update";
 export let options = {};
+let dataInput = initData(fields);
+export { dataInput as data };
+let data = dataInput;
+$:
+  $isDirty ? dataInput = data : data = dataInput;
 export function set(key, value) {
+  isDirty.set(true);
   data[key] = value;
 }
+export function update(updater) {
+  isDirty.set(true);
+  data = updater(data);
+}
 const dispatch = createEventDispatcher();
 const { enhance, setError } = useForm({
   ...options,
-  onSuccess(action2, data2) {
-    dispatch("success", { action: action2, data: data2 });
+  async onSuccess(url, data2) {
     if (options.onSuccess)
-      options.onSuccess(action2, data2);
+      await options.onSuccess(url, data2);
+    dispatch("success", { action: url, data: data2 });
+    const actionPath = url.pathname + url.search;
+    if (actionPath.includes(action + actionDelete))
+      dispatch("deleted");
+    if (!data2)
+      return;
+    if (actionPath.includes(action + actionCreate))
+      dispatch("created", data2);
+    if (actionPath.includes(action + actionUpdate))
+      dispatch("updated", data2);
   }
 });
-const handleInput = model ? useHandleInput(model, { setError }) : () => {
-};
+const { handleInput, isDirty } = useHandleInput({ model, setError });
 onMount(lookupValueFromParams);
 function lookupValueFromParams() {
   fields.flat().forEach(({ key }) => {
     if (data[key])
       return;
     const value = $page.url.searchParams.get(key);
-    if (value)
+    if (value && key in data)
       data[key] = value;
   });
 }
@@ -65,12 +84,14 @@ const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === vo
 
 <form
 	method="post"
-	action="{actionPrefix}{action}"
+	action="{action}{data.id ? actionUpdate : actionCreate}"
 	enctype="multipart/form-data"
 	class="{klass} flex flex-col gap-4"
 	use:enhance
 	on:input={handleInput}
 >
+	<slot />
+
 	{#if data.id}
 		<input type="hidden" name="id" value={data.id} />
 	{/if}
@@ -88,7 +109,7 @@ const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === vo
 									style={`grid-column: span ${field.colSpan || 2};`}
 									in:fade|local={{ duration: 200 }}
 								>
-									<Input
+									<FormInput
 										key={field.key}
 										type={inputType}
 										bind:value={data[field.key]}
@@ -106,19 +127,13 @@ const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === vo
 	<div
 		class="
 			{classAction} {actionPadding}
-			sticky bottom-0 col-span-full mt-2 flex gap-2 border-t py-4 backdrop-blur-sm
+			sticky bottom-0 col-span-full mt-2 flex flex-row-reverse gap-2 border-t py-4 backdrop-blur-sm
 		"
 	>
-		{#if actionDelete}
-			<button
-				class="btn-ghos btn text-error"
-				type="button"
-				formaction="{actionPrefix}{actionDelete}"
-			>
-				Supprimer
-			</button>
-		{/if}
-		<div class="grow" />
 		<button class="btn btn-primary"> Valider </button>
+		<div class="grow" />
+		{#if data.id && actionDelete}
+			<ButtonDelete formaction="{action}{actionDelete}">Supprimer</ButtonDelete>
+		{/if}
 	</div>
 </form>