@medyll/idae-machine 0.87.0

package/dist/form/FieldValue.svelte

@@ -0,0 +1,213 @@
+<!-- Component: CollectionFieldValue.svelte (ancien nom CollectionFieldInput.svelte) -->
+<script lang="ts" generics="COL = Record<string,any>">
+	// Importation des types et composants nécessaires
+	import { IDbCollectionFieldForge, IDbCollectionValues } from '../db/dbFields';
+	import type { TplCollectionName } from '@medyll/idae-idbql';
+	import { IconButton } from '@medyll/idae-slotui-svelte';
+	import { getAllContexts, getContext } from 'svelte';
+
+	interface FieldValueProps {
+		collection?:   TplCollectionName;
+		collectionId?: any;
+		fieldName:     keyof COL;
+		data?:         COL;
+		mode?:         'show' | 'create' | 'update';
+		editInPlace?:  boolean;
+		inputForm?:    string;
+		showLabel?:    LabelPosition;
+		showAiGuess?:  boolean;
+	}
+
+	// Déclaration des propriétés du composant avec leurs valeurs par défaut
+	let {
+		collection = getContext('collection'),
+		collectionId,
+		fieldName,
+		data = $bindable(),
+		mode = 'show',
+		editInPlace = false,
+		inputForm,
+		showLabel = true,
+		showAiGuess = false
+	}: FieldValueProps = $props();
+
+	let _data = getContext('data');
+
+	data = data ?? ({} as COL);
+
+	// Initialisation des valeurs de champ de collection
+	let collectionFieldValues = new IDbCollectionValues(collection);
+	let inputDataset = collectionFieldValues.getInputDataSet(fieldName, data);
+
+	// Création d'une instance de forge de champ de collection
+	const fieldForge = $derived(new IDbCollectionFieldForge(collection, fieldName, data));
+
+	// Effet déclenché lorsque collectionId ou editInPlace change
+	$effect(() => {
+		collectionId;
+		if (editInPlace && mode === 'show') {
+			console.log('Edit in place activated for', fieldName);
+		}
+	});
+
+	// Détermination si le champ est privé
+	const isPrivate = $derived(fieldForge.fieldArgs?.includes('private'));
+
+	// Arguments de forge pour le champ
+	let forgeArgs = {
+		required: fieldForge.fieldArgs?.includes('required'),
+		readonly: fieldForge.fieldArgs?.includes('readonly')
+	};
+
+	// Arguments finaux pour l'élément de formulaire
+	let finalArgs = {
+		id:          fieldName,
+		name:        fieldName,
+		form:        inputForm,
+		placeholder: `${fieldName} ${fieldForge.htmlInputType}`,
+		...forgeArgs,
+		...fieldForge.inputDataSet
+	};
+
+	/**
+	 * Fonction pour obtenir la position de l'étiquette
+	 * @param {LabelPosition} position - Position de l'étiquette
+	 * @returns {string} - Position de l'étiquette sous forme de chaîne
+	 */
+	function getLabelPosition(position: LabelPosition): string {
+		if (position === true) return 'above';
+		if (position === false) return '';
+		return position;
+	}
+
+	// Position de l'étiquette dérivée
+	const labelPosition = $derived(getLabelPosition(showLabel));
+
+	/**
+	 * Fonction pour gérer la suggestion de valeur
+	 * @param {string} fieldName - Nom du champ
+	 * @param {string} value - Valeur suggérée
+	 */
+	function handleGuess(fieldName: string, value: string) {
+		data[fieldName] = value;
+	}
+
+	/**
+	 * Fonction pour itérer sur un tableau de données
+	 * @param {any[]} data - Tableau de données
+	 * @returns {any[]} - Tableau de données itéré
+	 */
+	function iterateArray(data: any[]): any[] {
+		return fieldForge.iterateArrayField(fieldForge.collection, fieldForge.fieldName, data);
+	}
+
+	/**
+	 * Fonction pour itérer sur un objet de données
+	 * @param {Record<string, any>} data - Objet de données
+	 * @returns {Record<string, any>} - Objet de données itéré
+	 */
+	function iterateObject(data: Record<string, any>): Record<string, any> {
+		return dbFields.iterateObjectField(fieldForge.collection, fieldForge.fieldName, data);
+	}
+</script>
+
+{#if !isPrivate}
+	<div class="cell relative flex flex-col gap-2 wrapper-{fieldForge.fieldType}">
+		{#if fieldForge.fieldType !== 'id' && (labelPosition === 'before' || labelPosition === 'above')}
+			<label form={inputForm} for={fieldName} class="field-label {labelPosition}">{fieldName} </label>
+		{/if}
+
+		<div class="field-input flex">
+			{#if mode === 'show'}
+				<div class="flex w-48 gap-2">
+					<div class="flex-1" {...inputDataset}>{fieldForge.format}</div>
+					<!-- <IconButton width="tiny" onclick={() => console.log('Edit in place for', fieldName)} icon="mdi:pencil" /> -->
+				</div>
+			{:else if fieldForge.fieldType === 'id'}
+				{#if mode !== 'create'}
+					<input type="hidden" bind:value={data[fieldName]} {...inputDataset} {...finalArgs} />
+				{/if}
+			{:else if fieldForge.fieldType === 'boolean'}
+				<input type="checkbox" bind:checked={data[fieldName]} {...inputDataset} {...finalArgs} />
+			{:else if fieldForge.fieldType?.includes('area')}
+				<textarea
+					style="width:100%;max-width:100%;"
+					bind:value={data[fieldName]}
+					rows="3"
+					class="input h-24"
+					{...inputDataset}
+					{...finalArgs}>{data[fieldName]}</textarea
+				>
+			{:else if fieldForge.fieldType === 'text'}
+				<input
+					style="width: 100%"
+					class="input"
+					bind:value={data[fieldName]}
+					type={fieldForge.htmlInputType}
+					{...inputDataset}
+					{...finalArgs}
+				/>
+			{:else}
+				<input
+					style="width: 100%"
+					class="input"
+					bind:value={data[fieldName]}
+					type={fieldForge.htmlInputType}
+					{...inputDataset}
+					{...finalArgs}
+				/>
+			{/if}
+			<!-- <div><CollectionFieldGuess {collection} {collectionId} fieldNames={fieldName} formData={data} onGuess={handleGuess} /></div> -->
+		</div>
+
+		{#if labelPosition === 'after' || labelPosition === 'below'}
+			<label form={inputForm} for={fieldName} class="field-label {labelPosition}">{fieldName}</label>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	@reference "../../styles/references.css";
+	.field-label {
+		display: block;
+		font-weight: bold;
+		padding: 0.5rem;
+	}
+
+	.field-label.before,
+	.field-label.after {
+		display: block;
+		margin-right: 0.5em;
+	}
+
+	.field-label.above {
+		margin-bottom: 0.25em;
+	}
+
+	.field-label.below {
+		margin-top: 0.25em;
+	}
+
+	.field-input {
+	}
+
+	.wrapper-text-tiny {
+		width: 110px;
+	}
+
+	.wrapper-text-medium {
+		width: 370px;
+	}
+
+	.wrapper-text-area {
+		flex-basis: 100%;
+		flex-grow: 1;
+		max-width: 100%;
+	}
+
+	.wrapper-text-long {
+		flex-basis: 100%;
+		flex-grow: 1;
+		max-width: 100%;
+	}
+</style>

package/dist/form/FieldValue.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { TplCollectionName } from '@medyll/idae-idbql';
+declare class __sveltets_Render<COL = Record<string, any>> {
+    props(): {
+        collection?: TplCollectionName;
+        collectionId?: any;
+        fieldName: keyof COL;
+        data?: COL | undefined;
+        mode?: "show" | "create" | "update";
+        editInPlace?: boolean;
+        inputForm?: string;
+        showLabel?: LabelPosition;
+        showAiGuess?: boolean;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "data";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <COL = Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<COL>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<COL>['props']>, ReturnType<__sveltets_Render<COL>['events']>, ReturnType<__sveltets_Render<COL>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<COL>['bindings']>;
+    } & ReturnType<__sveltets_Render<COL>['exports']>;
+    <COL = Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<COL>['props']> & {}): ReturnType<__sveltets_Render<COL>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FieldValue: $$IsomorphicComponent;
+type FieldValue<COL = Record<string, any>> = InstanceType<typeof FieldValue<COL>>;
+export default FieldValue;

package/dist/form/types.d.ts

@@ -0,0 +1,17 @@
+export interface CreateUpdateProps<T = string> {
+    mode: 'create' | 'update' | 'show';
+    collection: string;
+    data?: Record<string, any>;
+    withData?: Record<string, any>;
+    dataId?: any;
+    /** fields to show in the collection */
+    showFields?: T[];
+    /**
+        allow in place edition, for all fields, or some
+        only available in show mode
+     */
+    inPlaceEdit?: boolean | T[];
+    /**  display mode for the fields */
+    displayMode?: 'vertical' | 'wrap';
+    showFks?: boolean;
+}

package/dist/form/types.js

@@ -0,0 +1 @@
+export {};

package/dist/fragments/Confirm.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Icon } from '@medyll/idae-slotui-svelte';
+
+	interface ConfirmProps {
+		collection: string;
+		field:      string;
+		validate:   Function;
+		message?:   string | undefined;
+		initial?:   import('svelte').Snippet;
+		children?:  import('svelte').Snippet;
+	}
+
+	let { validate, message = undefined, initial, children }: ConfirmProps = $props();
+
+	let status = $state('default');
+</script>
+
+<div class="line-gap-2 w-full">
+	{@render initial?.()}
+	{#if status === 'default'}
+		<button
+			class="line-gap-2"
+			hidden={status !== 'default'}
+			onclick={() => {
+				status = 'show_confirm';
+			}}
+		>
+			{@render children?.()}
+		</button>
+	{/if}
+	{#if status === 'show_confirm'}
+		<button
+			onclick={() => {
+				validate?.();
+				status = 'default';
+			}}
+		>
+			{message ?? ''}
+			<Icon class="color-success md text-green-800" icon="mdi:done" />
+		</button>
+		<button
+			onclick={() => {
+				status = 'default';
+			}}
+		>
+			<Icon icon="typcn:cancel" style="color: red" class="md fill-red-800 " />
+		</button>
+	{/if}
+</div>
+
+<style>
+	@reference "../../styles/references.css";
+	svg {
+		> path {
+			color: red !important;
+		}
+	}
+</style>

package/dist/fragments/Confirm.svelte.d.ts

@@ -0,0 +1,11 @@
+interface ConfirmProps {
+    collection: string;
+    field: string;
+    validate: Function;
+    message?: string | undefined;
+    initial?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+}
+declare const Confirm: import("svelte").Component<ConfirmProps, {}, "">;
+type Confirm = ReturnType<typeof Confirm>;
+export default Confirm;

package/dist/fragments/Frame.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+
+	export let showPanel: boolean = true;
+	export let panelMode: 'expanded' | 'reduced' = 'expanded';
+</script>
+
+<div class="relative flex h-full gap-4">
+	{#if showPanel}
+		<div transition:slide={{ axis: 'x' }} class="paper h-64 w-64 overflow-auto overflow-x-hidden">
+			<slot name="leftNav" />
+		</div>
+	{/if}
+	<div class="flex-1">
+		<div class="flex h-full w-96 flex-col gap-1">
+			<slot />
+		</div>
+	</div>
+</div>

package/dist/fragments/Frame.svelte.d.ts

@@ -0,0 +1,32 @@
+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 Frame: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    showPanel?: boolean;
+    panelMode?: "expanded" | "reduced";
+}, {
+    leftNav: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    leftNav: {};
+    default: {};
+}, {}, string>;
+type Frame = InstanceType<typeof Frame>;
+export default Frame;

package/dist/fragments/InfoLine.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	let className = '';
+	export let title: string | undefined = undefined;
+	export let vertical: boolean = false;
+	export { className as class };
+</script>
+
+{#if $$slots.input && !title}
+	<div class="w-full py-2 text-sm font-semibold">
+		{title}
+	</div>
+{/if}
+<div class="{vertical ? 'flex-v' : 'flex-align-middle'} gap-4 py-4">
+	<div class="flex flex-1 text-sm">
+		<div class="flex-1 font-semibold"><slot name="input">- {title}</slot></div>
+		<slot name="titleButton" />
+	</div>
+	<div class="{vertical ? 'px-2' : ''} {className}">
+		<slot />
+	</div>
+</div>

package/dist/fragments/InfoLine.svelte.d.ts

@@ -0,0 +1,35 @@
+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 InfoLine: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string | undefined;
+    vertical?: boolean;
+    class?: string;
+}, {
+    input: {};
+    titleButton: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    input: {};
+    titleButton: {};
+    default: {};
+}, {}, string>;
+type InfoLine = InstanceType<typeof InfoLine>;
+export default InfoLine;

package/dist/fragments/List.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	let className: string = '';
+	export let data: any[];
+	export { className as class };
+	export let naked = false;
+	export let title: string = '';
+</script>
+
+{#if naked}
+	{title}
+	{#each data ?? [] as item}
+		<slot {item} />
+	{/each}
+{:else}
+	{title}
+	<div class={className}>
+		{#each data ?? [] as item, idx}
+			<slot {item} {idx} />
+		{/each}
+	</div>
+{/if}

package/dist/fragments/List.svelte.d.ts

@@ -0,0 +1,38 @@
+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 List: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    data: any[];
+    class?: string;
+    naked?: boolean;
+    title?: string;
+}, {
+    default: {
+        item: any;
+        idx: any;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: any;
+        idx: any;
+    };
+}, {}, string>;
+type List = InstanceType<typeof List>;
+export default List;

package/dist/fragments/Selector.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	let className = '';
+	export let values: any = [];
+	export let value: any | undefined = undefined;
+</script>
+
+{#each values as valueO}
+	<div class={' ' + (valueO == value ? 'active ' : 'inactive')}>
+		<slot item={valueO} active={valueO === value} />
+	</div>
+{/each}
+{#if !values.length}
+	<slot name="selectorFallback" />
+{/if}
+
+<style>
+	@reference "../../styles/references.css";
+	.active {
+		@apply border border-b-2 border-neutral-500; /* active */
+	}
+	.inactive {
+		@apply border border-b-2 border-transparent opacity-60; /* inactive */
+	}
+	/* @apply  border border-b-2 border-neutral-500; 
+	@apply  opacity-60 border border-b-2 border-transparent;   */
+</style>

package/dist/fragments/Selector.svelte.d.ts

@@ -0,0 +1,38 @@
+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 Selector: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    values?: any;
+    value?: any | undefined;
+}, {
+    default: {
+        item: unknown;
+        active: boolean;
+    };
+    selectorFallback: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: unknown;
+        active: boolean;
+    };
+    selectorFallback: {};
+}, {}, string>;
+type Selector = InstanceType<typeof Selector>;
+export default Selector;

package/dist/fragments/Skeleton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import List from '$components/fragments/List.svelte';
+
+	let className = '';
+	export { className as class };
+
+	function skeletonLine() {
+		return [...Array(Math.ceil(Math.random() * 5))]
+			.map(
+				() =>
+					'<div class="h-2  bg-gray-200 dark:bg-gray-600 rounded-md  p-1   col-span-2  animate-pulse    flex-auto" ></div>'
+			)
+			.join('');
+	}
+</script>
+
+<div class={className}>
+	<List class="flex flex-col gap-2" data={[...Array(4)]}>
+		<div class="flex gap-2">{@html skeletonLine()}</div>
+	</List>
+</div>

package/dist/fragments/Skeleton.svelte.d.ts

@@ -0,0 +1,20 @@
+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;
+}
+declare const Skeleton: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Skeleton = InstanceType<typeof Skeleton>;
+export default Skeleton;

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+export * from './types/appschemeTypes.js';
+export { default as Skeleton } from './fragments/Skeleton.svelte';
+export { default as Selector } from './fragments/Selector.svelte';
+export { default as List } from './fragments/List.svelte';
+export { default as InfoLine } from './fragments/InfoLine.svelte';
+export { default as Frame } from './fragments/Frame.svelte';
+export { default as Confirm } from './fragments/Confirm.svelte';
+export * from './form/types.js';
+export { default as FieldValue } from './form/FieldValue.svelte';
+export { default as FieldInPlace } from './form/FieldInPlace.svelte';
+export { default as DataProvider } from './form/DataProvider.svelte';
+export { default as CrudZone } from './form/CrudZone.svelte';
+export { default as CreateUpdate } from './form/CreateUpdate.svelte';
+export { default as CollectionReverseFks } from './form/CollectionReverseFks.svelte';
+export { default as CollectionListMenu } from './form/CollectionListMenu.svelte';
+export { default as CollectionList } from './form/CollectionList.svelte';
+export { default as CollectionFks } from './form/CollectionFks.svelte';
+export { default as CollectionFieldGuess } from './form/CollectionFieldGuess.svelte';
+export { default as CollectionButton } from './form/CollectionButton.svelte';
+export * from './db/dbSchema.js';
+export * from './db/dbFields.js';
+export * from './db/dataModel.js';

package/dist/index.js

@@ -0,0 +1,23 @@
+// auto exports of entry components
+export * from './types/appschemeTypes.js';
+export { default as Skeleton } from './fragments/Skeleton.svelte';
+export { default as Selector } from './fragments/Selector.svelte';
+export { default as List } from './fragments/List.svelte';
+export { default as InfoLine } from './fragments/InfoLine.svelte';
+export { default as Frame } from './fragments/Frame.svelte';
+export { default as Confirm } from './fragments/Confirm.svelte';
+export * from './form/types.js';
+export { default as FieldValue } from './form/FieldValue.svelte';
+export { default as FieldInPlace } from './form/FieldInPlace.svelte';
+export { default as DataProvider } from './form/DataProvider.svelte';
+export { default as CrudZone } from './form/CrudZone.svelte';
+export { default as CreateUpdate } from './form/CreateUpdate.svelte';
+export { default as CollectionReverseFks } from './form/CollectionReverseFks.svelte';
+export { default as CollectionListMenu } from './form/CollectionListMenu.svelte';
+export { default as CollectionList } from './form/CollectionList.svelte';
+export { default as CollectionFks } from './form/CollectionFks.svelte';
+export { default as CollectionFieldGuess } from './form/CollectionFieldGuess.svelte';
+export { default as CollectionButton } from './form/CollectionButton.svelte';
+export * from './db/dbSchema.js';
+export * from './db/dbFields.js';
+export * from './db/dataModel.js';