mountain-ui 1.0.55 → 1.0.57

package/index.d.ts

@@ -28,6 +28,8 @@ export { default as EntityButton } from './src/lib/registry/entityRegistry/compo
 export { default as EntityCard } from './src/lib/registry/entityRegistry/components/EntityCard.svelte';
 export { default as EntityForm } from './src/lib/registry/entityRegistry/components/EntityForm.svelte';
 export { default as EntityPage } from './src/lib/registry/entityRegistry/components/EntityPage.svelte';
+export { default as EntryForm } from './src/lib/registry/entityRegistry/components/EntryForm.svelte';
+export { default as EntryPage } from './src/lib/registry/entityRegistry/components/EntryPage.svelte';
 export { default as FieldButton } from './src/lib/registry/entityRegistry/components/FieldButton.svelte';
 export { default as FieldCard } from './src/lib/registry/entityRegistry/components/FieldCard.svelte';
 export { default as FieldIcon } from './src/lib/registry/entityRegistry/components/FieldIcon.svelte';
@@ -51,3 +53,24 @@ export { registerDefaultViewEntriesTypes } from './src/lib/registry/viewEntriesT
 
 export { default as ViewEntriesTypeButton } from './src/lib/registry/viewEntriesTypeRegistry/components/ViewEntriesTypeButton.svelte';
 export { default as ViewEntriesTypeComponent } from './src/lib/registry/viewEntriesTypeRegistry/components/ViewEntriesTypeComponent.svelte';
+
+// ============================================
+// EntryActionType Registry
+// ============================================
+
+export { entryActionTypeRegistry } from './src/lib/registry/entryActionTypeRegistry/registry.svelte.js';
+export { createEntryActionType } from './src/lib/registry/entryActionTypeRegistry/createEntryActionType.js';
+export { registerDefaultEntryActionTypes } from './src/lib/registry/entryActionTypeRegistry/registerDefaultEntryActionTypes.js';
+
+export { default as EntryActionProperties } from './src/lib/registry/entryActionTypeRegistry/components/EntryActionProperties.svelte';
+export { default as EntryActionTypeCard } from './src/lib/registry/entryActionTypeRegistry/components/EntryActionTypeCard.svelte';
+
+// ============================================
+// EntryAction Registry
+// ============================================
+
+export { entryActionRegistry } from './src/lib/registry/entryActionRegistry/registry.svelte.js';
+export { createEntryAction } from './src/lib/registry/entryActionRegistry/createEntryAction.js';
+
+export { default as EntryActionButton } from './src/lib/registry/entryActionRegistry/components/EntryActionButton.svelte';
+export { default as EntryActionsButtons } from './src/lib/registry/entryActionRegistry/components/EntryActionsButtons.svelte';

package/index.js

@@ -28,6 +28,8 @@ export { default as EntityButton } from './src/lib/registry/entityRegistry/compo
 export { default as EntityCard } from './src/lib/registry/entityRegistry/components/EntityCard.svelte';
 export { default as EntityForm } from './src/lib/registry/entityRegistry/components/EntityForm.svelte';
 export { default as EntityPage } from './src/lib/registry/entityRegistry/components/EntityPage.svelte';
+export { default as EntryForm } from './src/lib/registry/entityRegistry/components/EntryForm.svelte';
+export { default as EntryPage } from './src/lib/registry/entityRegistry/components/EntryPage.svelte';
 export { default as FieldButton } from './src/lib/registry/entityRegistry/components/FieldButton.svelte';
 export { default as FieldCard } from './src/lib/registry/entityRegistry/components/FieldCard.svelte';
 export { default as FieldIcon } from './src/lib/registry/entityRegistry/components/FieldIcon.svelte';
@@ -51,3 +53,24 @@ export { registerDefaultViewEntriesTypes } from './src/lib/registry/viewEntriesT
 
 export { default as ViewEntriesTypeButton } from './src/lib/registry/viewEntriesTypeRegistry/components/ViewEntriesTypeButton.svelte';
 export { default as ViewEntriesTypeComponent } from './src/lib/registry/viewEntriesTypeRegistry/components/ViewEntriesTypeComponent.svelte';
+
+// ============================================
+// EntryActionType Registry
+// ============================================
+
+export { entryActionTypeRegistry } from './src/lib/registry/entryActionTypeRegistry/registry.svelte.js';
+export { createEntryActionType } from './src/lib/registry/entryActionTypeRegistry/createEntryActionType.js';
+export { registerDefaultEntryActionTypes } from './src/lib/registry/entryActionTypeRegistry/registerDefaultEntryActionTypes.js';
+
+export { default as EntryActionProperties } from './src/lib/registry/entryActionTypeRegistry/components/EntryActionProperties.svelte';
+export { default as EntryActionTypeCard } from './src/lib/registry/entryActionTypeRegistry/components/EntryActionTypeCard.svelte';
+
+// ============================================
+// EntryAction Registry
+// ============================================
+
+export { entryActionRegistry } from './src/lib/registry/entryActionRegistry/registry.svelte.js';
+export { createEntryAction } from './src/lib/registry/entryActionRegistry/createEntryAction.js';
+
+export { default as EntryActionButton } from './src/lib/registry/entryActionRegistry/components/EntryActionButton.svelte';
+export { default as EntryActionsButtons } from './src/lib/registry/entryActionRegistry/components/EntryActionsButtons.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.55",
+	"version": "1.0.57",
 	"description": "A comprehensive UI component library for ERP systems with field types, entities, and registry management built with Svelte",
 	"type": "module",
 	"module": "index.js",

package/src/lib/components/Nothing.svelte

@@ -0,0 +1,26 @@
+<script>
+
+    let {title, description} = $props()
+</script>
+
+<div class="nothing">
+    <slot name="top"/>
+    <h3>{title}</h3>
+    <p>{description}</p>
+    <slot name="bottom"/>
+</div>
+
+<style> 
+    .nothing {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        row-gap: var(--pad-m);
+        padding: var(--pad-m);
+    }
+
+    .nothing > :global(svg) {
+        width: 60px;
+        height: auto;
+    }
+</style>

package/src/lib/registry/entityRegistry/components/EntitiesSelector.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { Button, DropdownMenu } from 'hamzus-ui';
+	import { entityRegistry } from '../registry.svelte';
+	import EntityButton from './EntityButton.svelte';
+
+	let { onChange = (entity) => {}, activeEntityId = $bindable(null) } = $props();
+
+	const allEntities = entityRegistry.getAll();
+
+	function handleChange(entity) {
+		activeEntityId = entity.id;
+
+		onChange(entity);
+	}
+</script>
+
+{#if $allEntities}
+	<DropdownMenu.Root direction="bottom">
+		<DropdownMenu.Trigger slot="trigger">
+			{#if activeEntityId}
+                <EntityButton variant="secondary" id={activeEntityId}></EntityButton>
+			{:else}
+				<Button variant="secondary">
+					<h5>selectionner une entité</h5>
+				</Button>
+			{/if}
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content slot="content" width="250px">
+			{#each $allEntities as entity}
+				<EntityButton
+					variant={activeEntityId === entity.id ? 'secondary' : 'ghost'}
+					style="width:100%;"
+					onClick={() => {
+						handleChange(entity);
+					}}
+					id={entity.id}
+				></EntityButton>
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+{/if}

package/src/lib/registry/entityRegistry/components/EntityCard.svelte

@@ -4,13 +4,13 @@
 	import FieldIcon from './FieldIcon.svelte';
 	import LinkIcon from './LinkIcon.svelte';
 
-	let { id, variant = 'ghost', ...props } = $props();
+	let { id, variant = 'ghost', style, ...props } = $props();
 
 	const entity = $derived(entityRegistry.get(id));
 </script>
 
 {#if entity}
-	<Button {...props} {variant} style="border-radius:var(--radius-xl);">
+	<Button {...props} {variant} style="border-radius:var(--radius-xl);{style}">
 		<div class="card">
 			<div class="top">
 				<h3>{entity.plural_name}</h3>

package/src/lib/registry/entityRegistry/components/EntityFieldContainer.svelte

@@ -0,0 +1,13 @@
+<div class="field-container">
+    <slot/>
+</div>
+
+<style>
+    .field-container {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--stroke);
+        border-radius: var(--radius-xl);
+        overflow: clip;
+    }
+</style>

package/src/lib/registry/entityRegistry/components/EntityForm.svelte

@@ -1,102 +1,168 @@
 <script>
-	import { Button, Form } from 'hamzus-ui';
+	import { Accordion, Button, Checkbox, Form, Input } from 'hamzus-ui';
 	import { entityRegistry } from '../registry.svelte';
-	import FieldInput from './FieldInput.svelte';
-	import FormCtx from './FormCtx.svelte';
-
-	let { ctx = {}, entityId, onSubmit = () => {}, type = 'create' } = $props();
+	import { onMount } from 'svelte';
+	import { sanitizePluralNameToNormalizedName, sanitizePluralNameToSlug } from '../utils';
+
+	let { entityId = null, onSubmit = () => {} } = $props();
+
+	const entity = $derived(entityId ? entityRegistry.select(entityId) : null);
+
+	let entityForm = $state({
+		pluralName: '',
+		singularName: '',
+		symbol: '#',
+		slug: '',
+		normalizedName: '',
+		canBeCreated: true,
+		canBeEdited: true,
+		canBeDeleted: true
+	});
+
+	$effect(() => {
+		if ($entity) {
+			entityForm = {
+				pluralName: $entity.plural_name,
+				singularName: $entity.singular_name,
+				symbol: $entity.symbol,
+				slug: $entity.slug,
+				normalizedName: $entity.normalized_name,
+				canBeCreated: $entity.can_be_created,
+				canBeEdited: $entity.can_be_edited,
+				canBeDeleted: $entity.can_be_deleted
+			};
+		}
+	});
 
-	let detailsCtx = $state({});
+	function updatePluralName(value) {
+		entityForm.pluralName = value;
 
-	const entity = $derived(entityRegistry.select(entityId));
+		entityForm.slug = sanitizePluralNameToSlug(value);
 
-	function handleSubmit() {
-		onSubmit({ ...ctx });
+		entityForm.normalizedName = sanitizePluralNameToNormalizedName(value);
 	}
 
-	let calculations = $state({});
+	function updateSingularName(value) {
+		entityForm.singularName = value;
+	}
 
-	function handleRegisterCalculation(config) {
-		calculations = {
-			...calculations,
-			[config.id]: config
-		};
+	function updateNormalizedName(value) {
+		entityForm.normalizedName = value;
 	}
 
-	function handleChange(fieldId, value) {
-		ctx[fieldId] = value;
+	function updateSlug(value) {
+		entityForm.slug = value;
+	}
 
-		recalculate(fieldId);
+	function updateSymbol(value) {
+		entityForm.symbol = value;
+	}
 
-		ctx = { ...ctx };
+	function updateCanBeCreated(value) {
+		entityForm.canBeCreated = value;
 	}
-	function handleChangeDetails(fieldId, value) {
-		detailsCtx[fieldId] = value;
-
-        // si c est un type lien alors on parcour ses champs enfant et on reagis
-        const field = entityRegistry.getField(fieldId, entity.id)
-        if (field.type === "link") {
-            const entity = entityRegistry.get(field.props.linkId)
-            for (const linkedFields of entity.fields) {
-                recalculate(linkedFields.id)
-            }
-        }
-
-		detailsCtx = { ...detailsCtx };
+
+	function updateCanBeEdited(value) {
+		entityForm.canBeEdited = value;
 	}
 
-	function recalculate(changedFieldId) {
-		// on parcour les calcules et on verifie si un depend du champs changé
-		for (const calc of Object.values(calculations)) {
-			if (!calc.dependsOn.includes(changedFieldId)) continue;
+	function updateCanBeDeleted(value) {
+		entityForm.canBeDeleted = value;
+	}
 
-			calc.calculate(ctx);
-		}
+	function handleAfterSubmit(req) {
+		onSubmit(req);
 	}
 </script>
 
-{#if $entity}
-	<div class="form">
-		<FormCtx bind:ctx bind:detailsCtx>
-			{#each $entity.fields as field}
-				<FieldInput
-					{detailsCtx}
-					{ctx}
-					onChangeDetails={(value) => {
-						handleChangeDetails(field.id, value);
-					}}
-					onChange={(value) => {
-						handleChange(field.id, value);
-					}}
-					changeCtx={handleChange}
-					id={field.id}
-					entityId={$entity.id}
-					value={ctx?.[field.id] ?? null}
-					registerCalculation={handleRegisterCalculation}
-				></FieldInput>
-			{/each}
-			<div class="button">
-				<Button onClick={handleSubmit}>
-					<h4>{type === 'create' ? 'créer' : 'éditer'}</h4>
-				</Button>
-			</div>
-		</FormCtx>
-	</div>
-{/if}
+<div class="form">
+	<Form style="padding:var(--pad-xxl);width:min(100%, 600px);" path="/{entityId ? "edit" : "create"}-entity" afterSubmit={handleAfterSubmit}>
+		<h3>Créer une structure</h3>
+
+		<Input
+			required
+			value={entityForm.pluralName}
+			onChange={updatePluralName}
+			label="Nom pluriel"
+			placeholder="Nom de la structure au pluriel"
+		/>
+
+		<Input
+			required
+			value={entityForm.singularName}
+			onChange={updateSingularName}
+			label="Nom singulier"
+			placeholder="Nom de la structure au singulier"
+		/>
+
+		<h4>Règles relatives aux éléments créés</h4>
+
+		<Checkbox
+			checked={entityForm.canBeCreated}
+			onChange={updateCanBeCreated}
+			label="Peut être créé"
+			direction="rtl"
+		/>
+
+		<Checkbox
+			checked={entityForm.canBeEdited}
+			onChange={updateCanBeEdited}
+			label="Peut être édité"
+			direction="rtl"
+		/>
+
+		<Checkbox
+			checked={entityForm.canBeDeleted}
+			onChange={updateCanBeDeleted}
+			label="Peut être supprimé"
+			direction="rtl"
+		/>
+
+		<Accordion.Root let:isOpen>
+			<Accordion.Trigger {isOpen}>
+				<Accordion.Button {isOpen}>
+					<h4>Paramètres avancés</h4>
+				</Accordion.Button>
+			</Accordion.Trigger>
+
+			<Accordion.Content {isOpen}>
+				<Input
+					required
+					value={entityForm.normalizedName}
+					onChange={updateNormalizedName}
+					label="Nom normalisé"
+					placeholder="Nom normalisé de la structure"
+				/>
+
+				<Input
+					required
+					value={entityForm.slug}
+					onChange={updateSlug}
+					label="Slug"
+					placeholder="Slug de la structure"
+				>
+					<h4 slot="startContent">/</h4>
+				</Input>
+
+				<Input
+					required
+					value={entityForm.symbol}
+					onChange={updateSymbol}
+					label="Symbole"
+					placeholder="Symbole de la structure"
+				/>
+			</Accordion.Content>
+		</Accordion.Root>
+
+		<Button slot="button" type="submit" label={entityId ? "Éditer" : "Créer"} />
+	</Form>
+</div>
 
 <style>
 	.form {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-        width: 100%;
-	}
-
-	.button {
-		width: min(100%, 900px);
-		display: flex;
-		align-items: center;
-		justify-content: end;
-		padding: var(--pad-m);
+		width: 100%;
 	}
 </style>

package/src/lib/registry/entityRegistry/components/EntityPage.svelte

@@ -2,158 +2,16 @@
 	import { onMount } from 'svelte';
 	import { entityRegistry } from '../registry.svelte';
 	import FieldView from './FieldView.svelte';
-	import { sendRequest } from 'hamzus-ui';
+	import { sendRequest, toast } from 'hamzus-ui';
 
-	let { entityId, entryId, children } = $props();
+	let { entityId, children } = $props();
 
-	let ctx = $state(null);
+	const entity = $derived(entityId ? entityRegistry.select(entityId) : null);
 
-	let mounted = false;
-
-	const entity = $derived(entityRegistry.select(entityId));
-
-	$effect(() => {
-		getData(entityId, entryId);
-	});
-
-	onMount(() => {
-		getData(entityId, entryId, true);
-	});
-
-	async function getData(entityId, entryId, isMounting = false) {
-		if (!isMounting && !mounted) return;
-
-		const request = await sendRequest({
-			path: '/get-entry',
-			data: {
-				entityId: entityId,
-				entryId: entryId,
-				idMode: true
-			}
-		});
-
-		if (request.statusType === 'error') {
-			if (request.statusCode === 403) {
-				ctx = 403;
-			} else {
-				ctx = 'error';
-			}
-			toast.error({
-				title: 'Erreur !',
-				description: request.message
-			});
-			return;
-		}
-
-		ctx = request.data;
-		console.log(ctx);
-		console.log($entity);
-
-		mounted = true;
-	}
 </script>
-
-{#if ctx !== null}
-	{#if ctx === 403}
-		<div class="error">
-			<svg
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					opacity="0.4"
-					d="M10.9608 2.10989L5.46078 4.16989C4.41078 4.56989 3.55078 5.80989 3.55078 6.93989V15.0399C3.55078 15.8499 4.08078 16.9199 4.73078 17.3999L10.2308 21.5099C11.2008 22.2399 12.7908 22.2399 13.7608 21.5099L19.2608 17.3999C19.9108 16.9099 20.4408 15.8499 20.4408 15.0399V6.93989C20.4408 5.81989 19.5808 4.56988 18.5308 4.17988L13.0308 2.11989C12.4708 1.89989 11.5308 1.89989 10.9608 2.10989Z"
-					fill="#292D32"
-				/>
-				<path
-					d="M14.5 10.5C14.5 9.12 13.38 8 12 8C10.62 8 9.5 9.12 9.5 10.5C9.5 11.62 10.24 12.55 11.25 12.87V15.5C11.25 15.91 11.59 16.25 12 16.25C12.41 16.25 12.75 15.91 12.75 15.5V12.87C13.76 12.55 14.5 11.62 14.5 10.5Z"
-					fill="#292D32"
-				/>
-			</svg>
-
-			<h3>Vous n'avez pas accès a cet ressource</h3>
-			<p>Vous ne pouvez pas consulté les element lié a cette entité !</p>
-		</div>
-	{:else if ctx === 'error'}
-		<div class="error">
-			<svg
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					opacity="0.4"
-					d="M21.7605 15.92L15.3605 4.4C14.5005 2.85 13.3105 2 12.0005 2C10.6905 2 9.50047 2.85 8.64047 4.4L2.24047 15.92C1.43047 17.39 1.34047 18.8 1.99047 19.91C2.64047 21.02 3.92047 21.63 5.60047 21.63H18.4005C20.0805 21.63 21.3605 21.02 22.0105 19.91C22.6605 18.8 22.5705 17.38 21.7605 15.92Z"
-					fill="#292D32"
-				/>
-				<path
-					d="M12 14.75C11.59 14.75 11.25 14.41 11.25 14V9C11.25 8.59 11.59 8.25 12 8.25C12.41 8.25 12.75 8.59 12.75 9V14C12.75 14.41 12.41 14.75 12 14.75Z"
-					fill="#292D32"
-				/>
-				<path
-					d="M12 18.0001C11.94 18.0001 11.87 17.9901 11.8 17.9801C11.74 17.9701 11.68 17.9501 11.62 17.9201C11.56 17.9001 11.5 17.8701 11.44 17.8301C11.39 17.7901 11.34 17.7501 11.29 17.7101C11.11 17.5201 11 17.2601 11 17.0001C11 16.7401 11.11 16.4801 11.29 16.2901C11.34 16.2501 11.39 16.2101 11.44 16.1701C11.5 16.1301 11.56 16.1001 11.62 16.0801C11.68 16.0501 11.74 16.0301 11.8 16.0201C11.93 15.9901 12.07 15.9901 12.19 16.0201C12.26 16.0301 12.32 16.0501 12.38 16.0801C12.44 16.1001 12.5 16.1301 12.56 16.1701C12.61 16.2101 12.66 16.2501 12.71 16.2901C12.89 16.4801 13 16.7401 13 17.0001C13 17.2601 12.89 17.5201 12.71 17.7101C12.66 17.7501 12.61 17.7901 12.56 17.8301C12.5 17.8701 12.44 17.9001 12.38 17.9201C12.32 17.9501 12.26 17.9701 12.19 17.9801C12.13 17.9901 12.06 18.0001 12 18.0001Z"
-					fill="#292D32"
-				/>
-			</svg>
-
-			<h3>Une erreur est survenue !</h3>
-			<p>Impossible de récuperer l'entrée !</p>
-		</div>
-	{:else if $entity}
-		{@const primaryField = $entity.getPrimaryField()}
-		<div class="form">
-			<div class="title">
-				<h1>{$entity.symbol}{ctx?.[primaryField.id].flat}</h1>
-                {#if children}
-				{@render children()}
-                {/if}
-			</div>
-			{#each $entity.fields as field}
-				<FieldView id={field.id} entityId={$entity.id} value={ctx?.[field.id] ?? null}></FieldView>
-			{/each}
-		</div>
-	{/if}
+{#if $entity}
+    
 {/if}
 
 <style>
-	.loader {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 60px var(--pad-m);
-	}
-
-	.error {
-		padding: 60px var(--pad-m);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		row-gap: var(--pad-m);
-	}
-	.error > svg {
-		width: 60px;
-		height: auto;
-	}
-	.error > svg path {
-		fill: var(--red);
-	}
-	.title {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: min(100%, 900px);
-        margin-bottom: 20px;
-	}
-
-	.form {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-        width: 100%;
-	}
 </style>