mountain-ui 1.0.28 → 1.0.30

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.28",
+	"version": "1.0.30",
 	"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/registry/entityRegistry/components/EntityPage.svelte

@@ -0,0 +1,158 @@
+<script>
+	import { onMount } from 'svelte';
+	import { entityRegistry } from '../registry.svelte';
+	import FieldView from './FieldView.svelte';
+	import { sendRequest } from 'hamzus-ui';
+
+	let { entityId, entryId, children } = $props();
+
+	let ctx = $state(null);
+
+	let mounted = false;
+
+	const entity = 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}
+		{@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}
+
+<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;
+	}
+</style>

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

@@ -0,0 +1,23 @@
+<script>
+	import FieldTypeTableView from '$lib/registry/fieldTypeRegistry/components/FieldTypeTableView.svelte';
+	import { entityRegistry } from '../registry.svelte';
+
+	let { id, value, entityId = null, onChange = () => {}, onChangeDetails = () => {}, ...props } = $props();
+
+	const field = entityRegistry.selectField(id, entityId);
+</script>
+
+{#if $field}
+	<FieldTypeTableView
+		{...props}
+		id={$field.id}
+        value={value}
+		entity_id={$field.entity_id}
+		label={$field.name}
+		{...$field.props}
+		type={$field.type}
+		required={$field.is_required}
+		secret={$field.is_secret}
+		unique={$field.is_unique}
+	></FieldTypeTableView>
+{/if}

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

@@ -0,0 +1,24 @@
+<script>
+	import FieldTypeView from '$lib/registry/fieldTypeRegistry/components/FieldTypeView.svelte';
+	import { entityRegistry } from '../registry.svelte';
+
+	let { id, value, entityId = null, onChange = () => {}, onChangeDetails = () => {}, ...props } = $props();
+
+	const field = entityRegistry.selectField(id, entityId);
+
+</script>
+
+{#if $field}
+	<FieldTypeView
+		{...props}
+		id={$field.id}
+        value={value}
+		entity_id={$field.entity_id}
+		label={$field.name}
+		{...$field.props}
+		type={$field.type}
+		required={$field.is_required}
+		secret={$field.is_secret}
+		unique={$field.is_unique}
+	></FieldTypeView>
+{/if}

package/src/lib/registry/entityRegistry/createEntity.js

@@ -34,5 +34,7 @@ export function createEntity(config = {}) {
 
 	entity.getField = (id) => entity.fields.find((field) => field.id === id);
 
+	entity.getPrimaryField = () => entity.fields.find((field) => field.type === "primary");
+
 	return entity;
 }

package/src/lib/registry/fieldTypeRegistry/components/FieldTypeTableView.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { fieldTypeRegistry } from '../registry.svelte';
+
+	let { type, value, ...props } = $props();
+
+	const field = fieldTypeRegistry.select(type);
+</script>
+
+{#if $field}
+	<svelte:component this={$field.components.tableView} {value} {...props} field={$field}></svelte:component>
+{/if}

package/src/lib/registry/fieldTypeRegistry/components/FieldTypeView.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { fieldTypeRegistry } from '../registry.svelte';
+
+	let { type, value, ...props } = $props();
+
+	const field = fieldTypeRegistry.select(type);
+</script>
+
+{#if $field}
+	<svelte:component this={$field.components.view} {...props} {value} field={$field}></svelte:component>
+{/if}

package/src/lib/registry/fieldTypeRegistry/components/LineView.svelte

@@ -0,0 +1,33 @@
+<script>
+	let { children, compact = false } = $props();
+</script>
+
+<div class="line" class:compact>
+	{@render children()}
+</div>
+
+<style>
+	.line {
+		display: grid;
+		grid-template-columns: 170px 1fr ;
+		width: min(100%, 900px);
+		padding: var(--pad-s);
+		gap: var(--pad-s);
+        align-items: center;
+	}
+
+	.line:not(:last-of-type) {
+		border-bottom: 1px solid var(--stroke);
+	}
+
+	@media (max-width: 500px) {
+		.line {
+			grid-template-columns: 1fr;
+		}
+	}
+	.line.compact {
+		grid-template-columns: 1fr;
+		border-bottom: initial;
+	}
+
+</style>

package/src/lib/registry/fieldTypeRegistry/components/ViewText.svelte

@@ -0,0 +1,5 @@
+<script>
+    let {children} = $props()
+</script>
+
+<h5>{@render children()}</h5>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Lines/View.svelte

@@ -0,0 +1,61 @@
+<script>
+	import { Button, IconButton, Link, ResponsiveTable } from 'hamzus-ui';
+	import { onMount } from 'svelte';
+	import { getTypeData, startUrl } from '../const';
+	import { structures } from '../../routes/[project_slug]/[origin]/structure';
+	import { page } from '$app/stores';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import FieldView from '$lib/registry/entityRegistry/components/FieldView.svelte';
+
+	let { value, unique, secret, label, required, columns = [] } = $props();
+
+	let entries = null;
+
+	$effect(() => {
+		entries = value?.formated?.entries ?? {};
+	});
+</script>
+
+<div class="title">
+	<Label {label} {required} {secret} {unique}></Label>
+</div>
+<ResponsiveTable.Root let:ctx>
+	<ResponsiveTable.Header>
+		{#if columns.length > 0}
+			{#each columns as column, columnIndex}
+				<ResponsiveTable.HeaderCell align="left" label={column.name ?? '-'} {ctx}>
+					<h6>{columns[columnIndex].name ?? ''}</h6>
+					<!-- {column.columnIndex} -->
+				</ResponsiveTable.HeaderCell>
+			{/each}
+		{/if}
+	</ResponsiveTable.Header>
+	<ResponsiveTable.Body>
+		{#each entries as line, lineIndex}
+			<ResponsiveTable.Line>
+				{#each columns as column, columnIndex}
+					<ResponsiveTable.Cell {ctx}>
+						{#each column.rows as row, rowIndex}
+							<FieldView
+								compact
+								id={row.fieldId}
+								value={line[row.fieldId] ?? null}
+							></FieldView>
+						{/each}
+					</ResponsiveTable.Cell>
+				{/each}
+			</ResponsiveTable.Line>
+		{/each}
+	</ResponsiveTable.Body>
+</ResponsiveTable.Root>
+
+<style>
+	.cell {
+		position: relative;
+	}
+    .title {
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+</style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Link/TableView.svelte

@@ -0,0 +1,8 @@
+<script>
+	import ViewText from "../../components/ViewText.svelte";
+
+	let { name, value } = $props();
+</script>
+
+
+<ViewText>{value?.formated?.display ?? "-"}</ViewText>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Link/View.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { page } from "$app/stores";
+	import { Link } from "hamzus-ui";
+	import Line from "../../components/Line.svelte";
+	import Label from "../../components/Label.svelte";
+	import ViewText from "../../components/ViewText.svelte";
+	import LineView from "../../components/LineView.svelte";
+
+    let {value, compact, unique, secret, label, required} = $props()
+</script>
+
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+    {#if value.formated.slug !== null}
+        <Link href="{$page.params.project_slug}/{$page.params.origin}/{value.formated.entry_id}">{value.formated.display}</Link>
+    {:else}
+        <ViewText>{value.formated.display}</ViewText>
+    {/if}
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Link/index.js

@@ -4,6 +4,8 @@ import Icon from './Icon.svelte';
 import Button from './Button.svelte';
 import Card from './Card.svelte';
 import Input from './Input/Input.svelte';
+import TableView from './TableView.svelte';
+import View from './View.svelte';
 
 export default createFieldType({
 	type: 'link',
@@ -25,7 +27,8 @@ export default createFieldType({
 		button: Button,
 		card: Card,
 		input: Input,
-		cell: null,
+		tableView: TableView,
+		view: View,
 		filter: null,
 		properties: null
 	},

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Primary/TableView.svelte

@@ -0,0 +1,8 @@
+<script>
+	import ViewText from "../../components/ViewText.svelte";
+
+	let { name, value } = $props();
+</script>
+
+
+<ViewText>{value?.flat ?? "-"}</ViewText>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Primary/View.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { page } from "$app/stores";
+	import { Link } from "hamzus-ui";
+	import LineView from "../../components/LineView.svelte";
+	import Label from "../../components/Label.svelte";
+	import ViewText from "../../components/ViewText.svelte";
+
+    let {value, compact, unique, secret, label, required} = $props()
+</script>
+
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+    
+        <ViewText>{value?.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Primary/index.js

@@ -3,6 +3,8 @@ import { createFieldType } from '../../createFieldType';
 import Icon from './Icon.svelte';
 import Button from './Button.svelte';
 import Card from './Card.svelte';
+import TableView from './TableView.svelte';
+import View from './View.svelte';
 
 export default createFieldType({
 	type: 'primary',
@@ -25,7 +27,8 @@ export default createFieldType({
 		button: Button,
 		card: Card,
 		input: null,
-		cell: null,
+        tableView:TableView,
+        view:View,
 		filter: null,
 		properties: null
 	},

package/src/lib/registry/fieldTypeRegistry/fieldTypes/calculation/CalculationColumn/TableView.svelte

@@ -0,0 +1,8 @@
+<script>
+	import ViewText from "../../../components/ViewText.svelte";
+
+	let { value } = $props();
+</script>
+
+
+<ViewText>{value === null ? '-' : value.flat}</ViewText>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/calculation/CalculationColumn/View.svelte

@@ -0,0 +1,52 @@
+<script>
+	let { name, value } = $props();
+</script>
+
+<div class="total-container">
+	<div class="total">
+		<div class="total-content">
+			<h4>{name}</h4>
+			<h4>{value === null ? '-' : value.flat}</h4>
+		</div>
+	</div>
+</div>
+
+<style>
+	.total-container {
+		width: min(100%, 1000px);
+		display: flex;
+		justify-content: end;
+	}
+
+	.total {
+		width: min(100%, 350px);
+		border-left: 1px solid var(--stroke);
+		border-right: 1px solid var(--stroke);
+		padding: var(--pad-m);
+		row-gap: var(--pad-m);
+	}
+
+	/* Premier d'une suite (ou élément seul) */
+	.total-container:not(.total-container + .total-container) .total {
+		border-top-left-radius: var(--radius-xxl);
+		border-top-right-radius: var(--radius-xxl);
+		border-top: 1px solid var(--stroke);
+	}
+
+	/* Dernier d'une suite (ou élément seul) */
+	.total-container:not(:has(+ .total-container)) .total {
+		border-bottom-left-radius: var(--radius-xxl);
+		border-bottom-right-radius: var(--radius-xxl);
+		border-bottom: 1px solid var(--stroke);
+	}
+
+	.total-content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		padding: var(--pad-m) var(--pad-xxl);
+		border-radius: var(--radius-l);
+		background-color: var(--bg-2);
+	}
+</style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/calculation/CalculationColumn/index.js

@@ -4,6 +4,8 @@ import Icon from './Icon.svelte';
 import Button from './Button.svelte';
 import Card from './Card.svelte';
 import Input from './Input.svelte';
+import TableView from './TableView.svelte';
+import View from './View.svelte';
 
 export default createFieldType({
 	type: 'calculation-column',
@@ -25,7 +27,8 @@ export default createFieldType({
 		button: Button,
 		card: Card,
 		input: Input,
-		cell: null,
+		view:View,
+		tableView:TableView,
 		filter: null,
 		properties: null
 	},

package/src/lib/registry/fieldTypeRegistry/fieldTypes/calculation/CalculationLine/Button.svelte

@@ -0,0 +1,8 @@
+<script>
+	import FieldTypeButton from '../../FieldTypeButton.svelte';
+	import Icon from './Icon.svelte';
+
+	let { ...props } = $props();
+</script>
+
+<FieldTypeButton {...props}></FieldTypeButton>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/calculation/CalculationLine/Card.svelte

@@ -0,0 +1,6 @@
+<script>
+	import FieldCard from '../../FieldTypeCard.svelte';
+	let { ...props } = $props();
+</script>
+
+<FieldCard {...props}></FieldCard>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/calculation/CalculationLine/Icon.svelte

@@ -0,0 +1,30 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M21.6997 6.39014H14.4297C14.0197 6.39014 13.6797 6.05014 13.6797 5.64014C13.6797 5.23014 14.0197 4.89014 14.4297 4.89014H21.6997C22.1097 4.89014 22.4497 5.23014 22.4497 5.64014C22.4497 6.05014 22.1097 6.39014 21.6997 6.39014Z"
+		fill="#292D32"
+	/>
+	<path
+		d="M9.58078 6.39014H2.30078C1.89078 6.39014 1.55078 6.05014 1.55078 5.64014C1.55078 5.23014 1.89078 4.89014 2.30078 4.89014H9.57078C9.98078 4.89014 10.3208 5.23014 10.3208 5.64014C10.3208 6.05014 9.99078 6.39014 9.58078 6.39014Z"
+		fill="#292D32"
+	/>
+	<path
+		d="M21.6997 16.0801H14.4297C14.0197 16.0801 13.6797 15.7401 13.6797 15.3301C13.6797 14.9201 14.0197 14.5801 14.4297 14.5801H21.6997C22.1097 14.5801 22.4497 14.9201 22.4497 15.3301C22.4497 15.7401 22.1097 16.0801 21.6997 16.0801Z"
+		fill="#292D32"
+	/>
+	<path
+		d="M21.6997 22.1401H14.4297C14.0197 22.1401 13.6797 21.8001 13.6797 21.3901C13.6797 20.9801 14.0197 20.6401 14.4297 20.6401H21.6997C22.1097 20.6401 22.4497 20.9801 22.4497 21.3901C22.4497 21.8001 22.1097 22.1401 21.6997 22.1401Z"
+		fill="#292D32"
+	/>
+	<path
+		d="M18.0898 10.02C17.6798 10.02 17.3398 9.68 17.3398 9.27V2C17.3398 1.59 17.6798 1.25 18.0898 1.25C18.4998 1.25 18.8398 1.59 18.8398 2V9.27C18.8398 9.69 18.5098 10.02 18.0898 10.02Z"
+		fill="#292D32"
+	/>
+	<path
+		d="M2.30023 22.7499C2.11023 22.7499 1.92023 22.6799 1.77023 22.5299C1.48023 22.2399 1.48023 21.7599 1.77023 21.4699L9.04023 14.1999C9.33023 13.9099 9.81024 13.9099 10.1002 14.1999C10.3902 14.4899 10.3902 14.9699 10.1002 15.2599L2.83023 22.5299C2.69023 22.6799 2.50023 22.7499 2.30023 22.7499Z"
+		fill="#292D32"
+	/>
+	<path
+		d="M9.58 22.7499C9.39 22.7499 9.2 22.6799 9.05 22.5299L1.78 15.2599C1.49 14.9699 1.49 14.4899 1.78 14.1999C2.07 13.9099 2.55 13.9099 2.84 14.1999L10.11 21.4699C10.4 21.7599 10.4 22.2399 10.11 22.5299C9.96 22.6799 9.77 22.7499 9.58 22.7499Z"
+		fill="#292D32"
+	/>
+</svg>