firstly 0.0.14 → 0.0.16-next.0

package/esm/svelte/customField.d.ts

@@ -0,0 +1,69 @@
+import type { Component } from 'svelte';
+import type { FieldMetadata } from 'remult';
+export type FieldMode = 'edit' | 'display';
+export type CustomFieldDefaultProps<valueType = unknown, entityType = unknown> = {
+    uid?: string;
+    field: FieldMetadata<valueType, entityType>;
+    value: valueType;
+    error?: string;
+};
+type ComponentObject<valueType = unknown, entityType = unknown> = {
+    component: Component<CustomFieldDefaultProps<valueType, entityType>>;
+    props?: Record<string, unknown>;
+};
+export type CustomFieldComponent<valueType = unknown, entityType = unknown> = ComponentObject<valueType, entityType>['component'] | ComponentObject<valueType, entityType>;
+export declare function isComponentObject<valueType = unknown, entityType = unknown>(value: CustomFieldComponent<valueType, entityType>): value is ComponentObject<valueType, entityType>;
+type DynamicFieldDefaultProps<valueType = unknown, entityType = unknown> = CustomFieldDefaultProps<valueType, entityType> & {
+    mode: FieldMode;
+};
+export type DynamicCustomField = <valueType = unknown, entityType = unknown>(infos: DynamicFieldDefaultProps<valueType, entityType>) => CustomFieldComponent<valueType, entityType> | undefined;
+export type getLayout<entityType = unknown> = (o?: {
+    key?: string;
+    type?: Layout['type'];
+}) => Layout<entityType> | undefined;
+export type getLayoutStrict<entityType = unknown> = (o?: {
+    key?: string;
+    type?: Layout['type'];
+}) => Layout<entityType>;
+export type Layout<entityType = unknown> = {
+    key: string;
+    type: 'grid' | 'detail' | 'tab' | 'accordion';
+    groups: FieldGroup<entityType>[];
+};
+export type FieldGroup<entityType = unknown> = {
+    key: string;
+    fields: FieldMetadata<unknown, entityType>[];
+    caption?: string;
+    hint?: string;
+    class?: string;
+};
+export type CellMetadata<valueType = unknown, entityType = unknown> = {
+    key?: string;
+    caption?: string;
+    /** if nothing, it's just a "group" */
+    type?: 'form';
+    mode?: 'display' | 'edit';
+    field?: FieldMetadata<valueType, entityType>;
+    value?: valueType;
+    ui?: {
+        component?: {
+            caption?: 'show' | 'hide' | 'remove';
+            label?: 'show' | 'hide' | 'remove';
+            error?: 'show' | 'hide' | 'remove';
+            edit?: CustomFieldComponent<valueType, entityType>;
+            hint?: 'show' | 'hide' | 'remove';
+            display?: CustomFieldComponent<valueType, entityType>;
+        };
+        placeholder?: string;
+        step?: string | number | undefined;
+        hint?: string;
+        mobile?: Style;
+    } & Style;
+    cells?: CellMetadata<valueType, entityType>[];
+};
+type Style = {
+    width?: number;
+    marginLeft?: number;
+    marginRight?: number;
+};
+export {};

package/esm/svelte/customField.js

@@ -0,0 +1,4 @@
+import { isOfType } from './helpers';
+export function isComponentObject(value) {
+    return isOfType(value, 'component');
+}

package/esm/svelte/dialog/DialogManagement.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { FF_Form } from '../'
+	import Button from '../../ui/Button.svelte'
+	import { dialog } from './dialog'
+	import DialogPrimitive from './DialogPrimitive.svelte'
+
+	$: dialogSorted = $dialog.sort((a, b) => a.id - b.id)
+</script>
+
+{#each dialogSorted as toShow}
+	{#if toShow.type === 'confirm'}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			{@html toShow.children}
+			<svelte:fragment slot="actions">
+				<Button class="text-white" on:click={() => dialog.close(toShow.id, { success: true })}
+					>Confirmer</Button
+				>
+			</svelte:fragment>
+		</DialogPrimitive>
+	{:else if toShow.type === 'confirmDelete'}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			{@html toShow.children}
+			<svelte:fragment slot="actions">
+				<Button
+					class="btn-outline btn-error"
+					on:click={() => dialog.close(toShow.id, { success: true })}
+				>
+					Confirmer
+				</Button>
+			</svelte:fragment>
+		</DialogPrimitive>
+		<!-- {:else if toShow.type === 'insert' || toShow.type === 'update' || toShow.type === 'view'}
+		<DialogForm {toShow}></DialogForm> -->
+	{:else if toShow.type === 'fform'}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			classes={{ root: toShow.classes?.root }}
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			<FF_Form
+				r={toShow.r!}
+				show={{ title: false }}
+				defaults={toShow.defaults}
+				onSaved={(item) => dialog.close(toShow.id, { success: true, item })}
+			></FF_Form>
+		</DialogPrimitive>
+	{:else if toShow.component && toShow.children}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			<svelte:component this={toShow.component} {...toShow.props} dialogId={toShow.id}>
+				{#if toShow.children}
+					{@html toShow.children}
+				{/if}
+			</svelte:component>
+		</DialogPrimitive>
+	{:else if toShow.component}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			classes={{ root: toShow.classes?.root }}
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			<svelte:component this={toShow.component} {...toShow.props} dialogId={toShow.id}
+			></svelte:component>
+		</DialogPrimitive>
+	{:else}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			<div class="grid gap-2">
+				<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>
+
+				<p>Or pass you own component</p>
+				<pre class="bg-base-300 mt-2 p-2 text-xs">{`await dialog.show({
+  detail: { caption: 'Interlocuteur' },
+  component: CreateCarForm,
+  props: { isEdit: false },
+})`}</pre>
+
+				<p>Good luck 🚀</p>
+			</div>
+		</DialogPrimitive>
+	{/if}
+{/each}

package/esm/svelte/dialog/DialogManagement.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DialogManagement: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DialogManagement = InstanceType<typeof DialogManagement>;
+export default DialogManagement;

package/esm/svelte/dialog/DialogPrimitive.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { createDialog } from '@melt-ui/svelte'
+	import { createEventDispatcher } from 'svelte'
+	import { fade } from 'svelte/transition'
+
+	import { LibIcon_Cross, type BaseItemLight } from '../../'
+	import Icon from '../../ui/Icon.svelte'
+	import LinkPlus from '../../ui/link/LinkPlus.svelte'
+	import { flyAndScale } from '../../utils/transition'
+
+	export let detail: BaseItemLight | undefined = undefined
+	export let open: boolean = false
+	export let classes: { root?: string } = {}
+
+	const {
+		elements: { trigger, overlay, content, title: localTitle, description, close, portalled },
+		states: { open: localOpen },
+	} = createDialog({
+		forceVisible: true,
+		defaultOpen: open,
+		closeOnOutsideClick: false,
+		onOpenChange: (open) => {
+			dispatchChange('yop there')
+			return open.next
+		},
+	})
+
+	const dispatch = createEventDispatcher()
+
+	function dispatchChange(_data: any) {
+		dispatch('change', _data)
+	}
+</script>
+
+<div {...$portalled} use:$portalled.action data-ff-dialog-root class={classes.root}>
+	{#if $localOpen}
+		<div
+			{...$overlay}
+			use:$overlay.action
+			data-ff-dialog-overlay
+			transition:fade={{ duration: 150 }}
+		></div>
+		<div
+			data-ff-dialog-content
+			transition:flyAndScale={{
+				duration: 150,
+				y: 8,
+				start: 0.96,
+			}}
+			{...$content}
+			use:$content.action
+		>
+			<div data-ff-dialog-header>
+				<h2 {...$localTitle} use:$localTitle.action data-ff-dialog-title>
+					<div data-ff-dialog-header-content>
+						<LinkPlus item={detail}></LinkPlus>
+						<button {...$close} use:$close.action aria-label="close" data-ff-dialog-close>
+							<Icon data={LibIcon_Cross}></Icon>
+						</button>
+					</div>
+				</h2>
+			</div>
+
+			<div data-ff-dialog-body>
+				<slot />
+
+				{#if $$slots.actions}
+					<div data-ff-dialog-actions>
+						<slot name="actions" />
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	[data-ff-dialog-root] {
+		position: fixed;
+		top: 0;
+		z-index: 50;
+		display: flex;
+		height: 100%;
+		width: 100%;
+		align-items: center;
+		justify-content: center;
+	}
+
+	[data-ff-dialog-overlay] {
+		position: fixed;
+		inset: 0;
+		z-index: 40;
+		background-color: var(--ff-dialog-overlay);
+		-webkit-backdrop-filter: blur(2px);
+		        backdrop-filter: blur(2px);
+	}
+
+	[data-ff-dialog-content] {
+		position: relative;
+		z-index: 40;
+		max-height: 90vh;
+		overflow: auto;
+		border-radius: 0.75rem;
+		border: 1px solid rgb(20 20 20 / 0.6);
+		background-color: var(--ff-dialog-content);
+		padding: 1.5rem;
+		box-shadow:
+			0 10px 15px -3px rgb(0 0 0 / 0.1),
+			0 4px 6px -4px rgb(0 0 0 / 0.1);
+	}
+
+	[data-ff-dialog-header] {
+		width: 100%;
+		margin-bottom: 1rem;
+	}
+
+	[data-ff-dialog-title] {
+		margin: 0;
+		font-size: 1.125rem;
+		line-height: 1.75rem;
+		font-weight: 500;
+	}
+
+	[data-ff-dialog-header-content] {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
+	[data-ff-dialog-close] {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		height: 2.5rem;
+		width: 2.5rem;
+		min-height: 0;
+		border-radius: 9999px;
+		border: none;
+		background-color: transparent;
+	}
+
+	[data-ff-dialog-body] {
+		display: flex;
+		height: 100%;
+		min-width: 25rem;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	[data-ff-dialog-actions] {
+		margin-top: 0.5rem;
+		display: flex;
+		align-items: flex-end;
+		justify-content: flex-end;
+	}
+</style>

package/esm/svelte/dialog/DialogPrimitive.svelte.d.ts

@@ -0,0 +1,38 @@
+import { type BaseItemLight } from '../../';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const DialogPrimitive: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    detail?: BaseItemLight | undefined;
+    open?: boolean;
+    classes?: {
+        root?: string;
+    };
+}, {
+    default: {};
+    actions: {};
+}>, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    actions: {};
+}, {}, string>;
+type DialogPrimitive = InstanceType<typeof DialogPrimitive>;
+export default DialogPrimitive;

package/esm/svelte/dialog/dialog.d.ts

@@ -0,0 +1,58 @@
+import type { SvelteComponent } from 'svelte';
+import { type Repository } from 'remult';
+import { type BaseItemLight, type CellsInput, type StoreItem } from '../../';
+import type { FF_Repo } from '../../svelte';
+export type DialogClasses = {
+    /**
+     * for example `overflow-auto` to have a scrollbar in the dialog
+     */
+    root?: string;
+    formGrid?: FormGrid;
+};
+export type FormGrid = 'grid-cols-1' | 'grid-cols-2' | 'grid-cols-3' | 'grid-cols-4' | 'grid-cols-1 lg:grid-cols-4';
+export type DialogMetaData<entityType = any> = {
+    detail?: BaseItemLight;
+    repo?: Repository<entityType>;
+    store?: StoreItem<entityType>;
+    cells?: CellsInput<entityType>;
+    defaults?: Partial<entityType>;
+    classes?: DialogClasses;
+    component?: new (...args: any[]) => SvelteComponent;
+    props?: any;
+    children?: any;
+    reThrow?: boolean;
+    wDelete?: boolean;
+    focusKey?: string;
+    topicPrefixText?: string;
+    r?: FF_Repo<entityType>;
+};
+type ResultClose<entityType = any> = {
+    success: boolean;
+    item?: entityType;
+};
+export type DialogType = 'custom' | 'confirm' | 'confirmDelete' | 'fform';
+export type DialogFormType<entityType> = {
+    cells?: CellsInput<entityType>;
+    defaults?: Partial<entityType>;
+    classes?: DialogClasses;
+    reThrow?: boolean;
+    wDelete?: boolean;
+    topicPrefixText?: string;
+    focusKey?: string;
+};
+export type DialogMetaDataInternal<entityType = any> = DialogMetaData<entityType> & {
+    id: number;
+    type: DialogType;
+    resolve: (result: ResultClose) => void;
+};
+export declare const dialog: {
+    confirm: (topic: string, text: string, icon?: string) => Promise<ResultClose<any>>;
+    confirmDelete: (topic: string) => Promise<ResultClose<any>>;
+    form: <entityType>(type: "insert" | "update" | "view", topic: string, repo: Repository<entityType>, settings: DialogFormType<entityType>) => Promise<ResultClose<any>>;
+    fform: <entityType>(r: FF_Repo<entityType>, settings: DialogFormType<entityType>) => Promise<ResultClose<any>>;
+    show: (dialog: DialogMetaData) => Promise<ResultClose<any>>;
+    close: (id: number, result: ResultClose) => void;
+    closeAll: () => void;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<DialogMetaDataInternal<any>[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+};
+export {};

package/esm/svelte/dialog/dialog.js

@@ -0,0 +1,130 @@
+import { writable } from 'svelte/store';
+import {} from 'remult';
+import { LibIcon_Add, LibIcon_Delete, LibIcon_Edit, LibIcon_Search, } from '../../';
+const createDialogManagement = () => {
+    const { subscribe, update } = writable([]);
+    // internal...
+    const show = (dialog, type) => {
+        let resolve;
+        const promise = new Promise((res) => {
+            resolve = res;
+        });
+        update((dialogs) => {
+            return [...dialogs, { ...dialog, id: dialogs.length + 1, resolve, type }];
+        });
+        return promise;
+    };
+    return {
+        confirm: (topic, text, icon) => {
+            const detail = {
+                detail: {
+                    caption: 'Confirmez',
+                    icon: { data: icon },
+                },
+                children: `
+					<p>
+						${topic}
+						<br />
+						${text}
+					</p>
+				`,
+            };
+            return show(detail, 'confirm');
+        },
+        confirmDelete: (topic) => {
+            const detail = {
+                detail: {
+                    caption: 'Supprimer',
+                    icon: { data: LibIcon_Delete },
+                },
+                children: topic
+                    ? `<p>Confirmez vous la suppression de: <br />- <b>${topic}</b> ?</p>`
+                    : 'Confirmer la suppression ?',
+            };
+            return show(detail, 'confirmDelete');
+        },
+        form: (type, topic, repo, settings) => {
+            const topicPrefixText = settings?.topicPrefixText
+                ? settings?.topicPrefixText + ' '
+                : type === 'insert'
+                    ? `Créer `
+                    : type === 'update'
+                        ? 'Modifier '
+                        : 'Détail ';
+            const detail = {
+                detail: {
+                    caption: (topicPrefixText + topic).trim(),
+                    icon: {
+                        data: type === 'insert' ? LibIcon_Add : type === 'update' ? LibIcon_Edit : LibIcon_Search,
+                    },
+                },
+                repo,
+                // store,
+                cells: settings.cells ?? [],
+                defaults: settings?.defaults,
+                classes: settings?.classes,
+                reThrow: settings?.reThrow,
+                wDelete: settings?.wDelete,
+                focusKey: settings?.focusKey,
+                topicPrefixText,
+            };
+            // @ts-ignore
+            return show(detail, type);
+        },
+        fform: (r, settings) => {
+            // const topicPrefixText = settings?.topicPrefixText
+            // 	? settings?.topicPrefixText + ' '
+            // 	: type === 'insert'
+            // 		? `Créer `
+            // 		: type === 'update'
+            // 			? 'Modifier '
+            // 			: 'Détail '
+            const detail = {
+                detail: {
+                    caption: r.metadata.caption,
+                    icon: {
+                        data: LibIcon_Edit,
+                        // data: type === 'insert' ? LibIcon_Add : type === 'update' ? LibIcon_Edit : LibIcon_Search,
+                    },
+                },
+                // repo,
+                // store,
+                cells: settings.cells ?? [],
+                defaults: settings?.defaults,
+                classes: settings?.classes,
+                reThrow: settings?.reThrow,
+                wDelete: settings?.wDelete,
+                focusKey: settings?.focusKey,
+                r,
+                // topicPrefixText,
+            };
+            // @ts-ignore
+            return show(detail, 'fform');
+        },
+        show: (dialog) => {
+            return show(dialog, 'custom');
+        },
+        // next step, give a result typed!
+        close: (id, result) => {
+            update((dialogs) => {
+                dialogs.forEach((dialog) => {
+                    if (dialog.id === id) {
+                        dialog.resolve(result);
+                    }
+                });
+                return dialogs.filter((dialog) => dialog.id !== id);
+            });
+        },
+        // usefull on navigation you want to close all popups
+        closeAll: () => {
+            update((dialogs) => {
+                dialogs.forEach((dialog) => {
+                    dialog.resolve({ success: false });
+                });
+                return [];
+            });
+        },
+        subscribe,
+    };
+};
+export const dialog = createDialogManagement();

package/esm/svelte/ff_Config.svelte.d.ts

@@ -0,0 +1,91 @@
+import type { DynamicCustomField } from '.';
+export interface Config {
+    theme: Theme;
+    dynamicCustomField?: DynamicCustomField;
+}
+/**
+ * Theme
+ */
+export interface FieldTheme {
+    root?: string;
+    error?: string;
+    container?: string;
+}
+export interface LabelTheme {
+    root?: string;
+}
+export interface ErrorTheme {
+    root?: string;
+}
+export interface EditTheme {
+    select?: string;
+    checkbox?: string;
+    input?: string;
+}
+export interface HintTheme {
+    root?: string;
+}
+export interface GridTheme {
+    root?: string;
+    header?: string;
+    headerCell?: string;
+    row?: string;
+    rowCell?: string;
+    actions?: string;
+    actionButton?: string;
+    actionsColumn?: string;
+    actionsHeader?: string;
+    loadMoreButton?: string;
+}
+export interface FormTheme {
+    root?: string;
+    groups?: string;
+    fields?: string;
+    actions?: string;
+    submitButton?: string;
+    cancelButton?: string;
+}
+export interface DisplayTheme {
+    checkbox?: string;
+}
+export interface Theme {
+    root?: string;
+    field?: FieldTheme;
+    label?: LabelTheme;
+    error?: ErrorTheme;
+    hint?: HintTheme;
+    edit?: EditTheme;
+    grid?: GridTheme;
+    form?: FormTheme;
+    display?: DisplayTheme;
+}
+export declare const defaultTheme: Theme;
+export declare const emptyTheme: Theme;
+export declare const daisyTheme: Theme;
+export type FullyDefinedTheme = {
+    root: string;
+    field: FieldTheme;
+    label: LabelTheme;
+    error: ErrorTheme;
+    hint: HintTheme;
+    edit: EditTheme;
+    grid: GridTheme;
+    form: FormTheme;
+    display: DisplayTheme;
+};
+export declare class FF_Theme {
+    #private;
+    constructor(initialTheme?: Theme);
+    setTheme(theme: Theme): void;
+    getTheme(): FullyDefinedTheme;
+    getClasses<K extends keyof FullyDefinedTheme>(key: K, classes: Partial<FullyDefinedTheme[K]>): FullyDefinedTheme[K];
+}
+export declare function getThemeContext(): FF_Theme;
+export declare function setTheme(theme: Theme): void;
+export declare function getTheme(): FullyDefinedTheme;
+export declare function getClasses<K extends keyof FullyDefinedTheme>(key: K, classes: Partial<FullyDefinedTheme[K]>): FullyDefinedTheme[K];
+/**
+ * Dynamic Custom Field
+ */
+export declare function setDynamicCustomField(fn?: DynamicCustomField): void;
+export declare function getDynamicCustomField(): DynamicCustomField | undefined;