mountain-ui 1.0.0

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

@@ -0,0 +1,37 @@
+import { createFieldType } from "../../createFieldType";
+
+import Icon from "./Icon.svelte"
+import Button from "./Button.svelte"
+import Card from "./Card.svelte"
+import Input from "./Input.svelte"
+
+export default createFieldType({
+    type: "lines",
+
+    category_path: "",
+
+    label: "Lignes",
+    description: "Liste de lignes de données, généralement utilisées pour représenter des sous-éléments ou des sous-formulaires.",
+
+    is_hidden: false,
+
+    can_be_required: true,
+    can_be_unique: true,
+
+    props:{},
+
+    components: {
+        icon: Icon,
+        button: Button,
+        card: Card,
+        input: Input,
+        cell: null,
+        filter: null,
+        properties: null
+    },
+
+    formatter: (value) => value,
+    parser: (value) => value,
+
+    validate: () => true,
+})

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

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

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Link/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/Link/Icon.svelte

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1998 17.3799C11.4998 17.3799 10.7898 17.1099 10.2598 16.5799C9.73977 16.0599 9.44977 15.3699 9.44977 14.6399C9.44977 13.9099 9.73977 13.2099 10.2598 12.6999L11.6697 11.2899C11.9597 10.9999 12.4397 10.9999 12.7297 11.2899C13.0197 11.5799 13.0197 12.0599 12.7297 12.3499L11.3198 13.7599C11.0798 13.9999 10.9498 14.3099 10.9498 14.6399C10.9498 14.9699 11.0798 15.2899 11.3198 15.5199C11.8098 16.0099 12.5998 16.0099 13.0898 15.5199L15.3098 13.2999C16.5798 12.0299 16.5798 9.96994 15.3098 8.69994C14.0398 7.42994 11.9798 7.42994 10.7098 8.69994L8.28973 11.1199C7.77973 11.6299 7.49976 12.2999 7.49976 13.0099C7.49976 13.7199 7.77973 14.3999 8.28973 14.8999C8.57973 15.1899 8.57973 15.6699 8.28973 15.9599C7.99973 16.2499 7.51974 16.2499 7.22974 15.9599C6.43974 15.1699 6.00977 14.1199 6.00977 12.9999C6.00977 11.8799 6.43974 10.8299 7.22974 10.0399L9.64978 7.61992C11.4998 5.76992 14.5198 5.76992 16.3698 7.61992C18.2198 9.46992 18.2198 12.4899 16.3698 14.3399L14.1498 16.5599C13.6098 17.1099 12.9098 17.3799 12.1998 17.3799Z" fill="#292D32"/>
+<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="#292D32"/>
+</svg>

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

@@ -0,0 +1,106 @@
+<script>
+	import { InputSelector, sendRequest, toast } from 'hamzus-ui';
+	import LinkCard from './LinkCard.svelte';
+	import LinkCardSelection from './LinkCardSelection.svelte';
+	import { onMount } from 'svelte';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import Line from '$lib/registry/fieldTypeRegistry/components/Line.svelte';
+	import Label from '$lib/registry/fieldTypeRegistry/components/Label.svelte';
+
+	let {
+        label = '',
+		required = false,
+		unique = false,
+		secret = false,
+		compact = false,
+		ctx = null,
+		linkId = null,
+		multiple = false,
+		display = false,
+		name = null,
+		value = null,
+		onChangeDetails = () => {},
+		onChange = () => {},
+        field
+	} = $props();
+
+	let selection = null;
+
+	let limit = 20;
+
+	let structure = entityRegistry.get(linkId);
+
+	let lastRequest = null;
+
+	
+
+	async function getMultipleElement(search, offset) {
+		const request = await sendRequest({
+			path: '/get-all-entries',
+			data: {
+				entityId: linkId,
+				globalSearch: search,
+				offset: offset,
+				limit: limit
+			}
+		});
+
+		let rows = [];
+
+		for (let i = 0; i < request.data.rows.length; i++) {
+			rows.push({
+				id: request.data.rows[i].id,
+				structure: structure,
+				display: display,
+				element: request.data.rows[i]
+			});
+		}
+
+		return {
+			rows: rows,
+			totalOfRows: request.data.totalOfRows
+		};
+	}
+	async function getElement(data) {
+		if (!data?.id) {
+			return;
+		}
+
+		lastRequest = await sendRequest({
+			path: '/get-entry',
+			data: {
+				entityId: linkId,
+				entryId: data.id.flat ?? data.id,
+				flat: true
+			}
+		});
+
+		return {
+			id: lastRequest.data.id.flat,
+			structure: structure,
+			element: lastRequest.data,
+			display: display
+		};
+	}
+
+	function handleChange(value) {
+		onChangeDetails(value?.element ?? null);
+		onChange(value?.element.id.flat ?? null);
+	}
+</script>
+<Line {compact}>
+    <Label {unique} {secret} {label} {required}></Label>
+
+    {#if structure}
+        <InputSelector
+            {value}
+            {limit}
+            placeholder="rechercher une structure"
+            onChange={handleChange}
+            component={LinkCard}
+            selectionComponent={LinkCardSelection}
+            {getMultipleElement}
+            {getElement}
+        ></InputSelector>
+    {/if}
+</Line>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Link/Input/LinkCard.svelte

@@ -0,0 +1,49 @@
+
+<script>
+	import { onMount } from "svelte";
+	import { getDisplay } from "./utils";
+
+    let {
+        structure,
+        element,
+        display,
+        selected,
+        ...props
+    } = $props()
+
+    function handleClick() {
+        props.onClick({
+            ...props,
+            id:element.id,
+        })
+    }
+</script>
+
+<div class="card" class:selected onclick={handleClick}>
+    <h4>{getDisplay(structure, element, display)}</h4>
+</div>
+
+<style>
+    .card {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        gap: var(--pad-m);
+        padding: var(--pad-m);
+        border-radius: var(--radius-m);
+        border: 1px solid var(--stroke);
+        cursor: pointer;
+    }
+    .card:hover {
+        background-color: var(--bg-3);
+    }
+    .card.selected {
+        border: 1px solid var(--accent);
+    }
+    .card h5 {
+        white-space: nowrap;
+        width: 100%;
+        overflow: hidden;
+        text-emphasis: ellipsis;
+    }
+</style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Link/Input/LinkCardSelection.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { IconButton } from "hamzus-ui";
+	import { getDisplay } from "./utils";
+	import { onMount } from "svelte";
+
+    let {
+        display,
+        element,
+        structure,
+        ...props
+    } = $props()
+    
+
+    function handleClick() {
+        props.onClick({
+            ...props,
+            id:element.id,
+        })
+    }
+</script>
+
+<div class="card">
+    <h4>{getDisplay(structure, element, display)}</h4>
+    <IconButton  variant="ghost" onclick={handleClick}>
+        <svg
+                        width="25"
+                        height="25"
+                        viewBox="0 0 25 25"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        ><path
+                            d="M8.02188 18.1153C7.72277 18.1153 7.42365 18.0051 7.1875 17.7689C6.73096 17.3124 6.73096 16.5567 7.1875 16.1002L16.0981 7.18964C16.5546 6.73309 17.3103 6.73309 17.7668 7.18964C18.2234 7.64619 18.2234 8.40185 17.7668 8.8584L8.85626 17.7689C8.63586 18.0051 8.321 18.1153 8.02188 18.1153Z"
+                            fill="black"
+                        ></path><path
+                            d="M16.9324 18.1153C16.6333 18.1153 16.3342 18.0051 16.0981 17.7689L7.1875 8.8584C6.73096 8.40185 6.73096 7.64619 7.1875 7.18964C7.64405 6.73309 8.39972 6.73309 8.85626 7.18964L17.7668 16.1002C18.2234 16.5567 18.2234 17.3124 17.7668 17.7689C17.5307 18.0051 17.2315 18.1153 16.9324 18.1153Z"
+                            fill="black"
+                        ></path></svg
+                    >
+            
+    </IconButton>
+</div>
+
+<style>
+    .card {
+        display: flex;
+        justify-content: space-between;
+        /* max-width: 270px; */
+        width: 100%;
+        align-items: center;
+        gap: var(--pad-s);
+        padding: var(--pad-xs) var(--pad-m);
+        border-radius: var(--radius-m);
+        border: 1px solid var(--stroke);
+        cursor: pointer;
+    }
+    .card:hover {
+        background-color: var(--bg-3);
+    }
+    .card h6 {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+    }
+    </style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Link/Input/utils.js

@@ -0,0 +1,25 @@
+
+export function getDisplay(structure, element, display) {
+    let allowedEntries = {
+        "{structure.plural_name}":structure.plural_name,
+        "{structure.singular_name}":structure.singular_name,
+        "{structure.symbol}":structure.symbol,
+        "{structure.normalized_name}":structure.normalized_name,
+        "{structure.slug}":structure.slug,
+    }
+    
+
+    // parcourir les colonne de la structure
+    for (const column of structure.fields) {
+        if (column.is_hidden) continue
+
+        allowedEntries[`{element.${column.normalized_name}}`] = element[column.normalized_name].flat
+    }
+
+    // parcourir les clé et remplacé les entré trouvé
+    for (const text in allowedEntries) {
+        display = display.replace(text, allowedEntries[text])
+    }
+     
+    return display
+}

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

@@ -0,0 +1,37 @@
+import { createFieldType } from "../../createFieldType";
+
+import Icon from "./Icon.svelte"
+import Button from "./Button.svelte"
+import Card from "./Card.svelte"
+import Input from "./Input/Input.svelte"
+
+export default createFieldType({
+    type: "link",
+
+    category_path: "",
+
+    label: "Lien",
+    description: "Lien vers un élément d'une autre structure.",
+
+    is_hidden: false,
+
+    can_be_required: true,
+    can_be_unique: true,
+
+    props:{},
+
+    components: {
+        icon: Icon,
+        button: Button,
+        card: Card,
+        input: Input,
+        cell: null,
+        filter: null,
+        properties: null
+    },
+
+    formatter: (value) => value,
+    parser: (value) => value,
+
+    validate: () => true,
+})

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

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

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Primary/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/Primary/Icon.svelte

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="#292D32"/>
+<path d="M11.9996 15.6299C10.6796 15.6299 9.59961 14.5499 9.59961 13.2299V10.7599C9.59961 9.43989 10.6796 8.35986 11.9996 8.35986C13.3196 8.35986 14.3996 9.43989 14.3996 10.7599V13.2299C14.3996 14.5599 13.3196 15.6299 11.9996 15.6299ZM11.9996 9.86987C11.5096 9.86987 11.0996 10.2699 11.0996 10.7699V13.2399C11.0996 13.7399 11.4996 14.1399 11.9996 14.1399C12.4996 14.1399 12.8996 13.7399 12.8996 13.2399V10.7699C12.8996 10.2699 12.4896 9.86987 11.9996 9.86987Z" fill="#292D32"/>
+<path d="M12 18.8199C8.83 18.8199 6.25 16.2399 6.25 13.0699V10.9299C6.25 7.75993 8.83 5.17993 12 5.17993C14.96 5.17993 17.42 7.39997 17.72 10.34C17.76 10.75 17.46 11.1199 17.05 11.1599C16.64 11.2099 16.27 10.8999 16.23 10.4899C16.01 8.31993 14.19 6.67993 12 6.67993C9.66 6.67993 7.75 8.58993 7.75 10.9299V13.0699C7.75 15.4099 9.66 17.3199 12 17.3199C14.2 17.3199 16.06 15.5999 16.24 13.4099C16.27 12.9999 16.63 12.6899 17.05 12.7199C17.46 12.7499 17.77 13.11 17.74 13.53C17.5 16.5 14.98 18.8199 12 18.8199Z" fill="#292D32"/>
+</svg>

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

@@ -0,0 +1,36 @@
+import { createFieldType } from "../../createFieldType";
+
+import Icon from "./Icon.svelte"
+import Button from "./Button.svelte"
+import Card from "./Card.svelte"
+
+export default createFieldType({
+    type: "primary",
+
+    category_path: [],
+
+    label: "Primaire",
+    description: "Clé primaire unique servant à identifier chaque enregistrement de manière distincte.",
+
+    is_hidden: true,
+
+    can_be_required: true,
+    can_be_unique: true,
+
+    props:{},
+
+    components: {
+        icon: Icon,
+        button: Button,
+        card: Card,
+        input: null,
+        cell: null,
+        filter: null,
+        properties: null
+    },
+
+    formatter: (value) => value,
+    parser: (value) => value,
+
+    validate: () => true,
+})

package/src/lib/registry/fieldTypeRegistry/fieldTypes/calculation/CalculationColumn/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/CalculationColumn/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/CalculationColumn/Icon.svelte

@@ -0,0 +1,9 @@
+<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>

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

@@ -0,0 +1,153 @@
+<script>
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import { Tooltip } from 'hamzus-ui';
+	import { onMount } from 'svelte';
+
+	let {
+		id = null,
+		entity_id = null,
+		value = $bindable(null),
+		name = '',
+		label = '',
+		required = false,
+		unique = false,
+		secret = false,
+		compact = false,
+		choices = [],
+		ctx = {},
+		detailsCtx = {},
+		onChange = () => {},
+		onChangeDetails = () => {},
+		operator = '',
+		column1 = '',
+		column2 = '',
+		...props
+	} = $props();
+
+	let isMounted = false;
+
+	const field1 = entityRegistry.selectField(column1);
+	const field2 = entityRegistry.selectField(column2);
+
+	$effect(() => {
+		if (!$field1 || !$field2) return;
+
+		const raw1 = ctx[column1] ?? null;
+		const raw2 = ctx[column2] ?? null;
+
+		console.log($field1?.entity_id ?? null);
+		console.log(entity_id ?? null);
+
+		let value1 = raw1 ? parseFloat(raw1) : null;
+		let value2 = raw2 ? parseFloat(raw2) : null;
+
+		if ($field1.type === 'number-float-percent') value1 /= 100;
+		// si c est un lien on recupere le ctxDetails du produit
+		if ($field1.entity_id != entity_id) {
+			const linkField = entityRegistry.getLinkedField(entity_id, $field1.entity_id);
+			value1 = parseFloat(detailsCtx[linkField.id]?.[$field1.normalized_name]?.flat) ?? 0.0;
+		}
+
+		if ($field2.type === 'number-float-percent') value2 /= 100;
+		// si c est un lien on recupere le ctxDetails du produit
+		if ($field2.entity_id != entity_id) {
+			const linkField = entityRegistry.getLinkedField(entity_id, $field2.entity_id);
+			value2 = parseFloat(detailsCtx[linkField.id]?.[$field2.normalized_name]?.flat) ?? 0.0;
+		}
+
+		if (value1 == null || value2 == null) return;
+
+		if (isNaN(value1)) value1 = 0;
+		if (isNaN(value2)) value2 = 0;
+
+		const oldValue = value;
+
+		switch (operator) {
+			case '+':
+				value = value1 + value2;
+				break;
+			case '-':
+				value = value1 - value2;
+				break;
+			case '*':
+				value = value1 * value2;
+				break;
+			case '/':
+				value = value2 === 0 ? null : value1 / value2;
+				break;
+		}
+
+		if (oldValue !== value) {
+			onChange(value);
+		}
+	});
+
+	onMount(() => {
+		isMounted = true;
+	});
+</script>
+
+<div class="total-container">
+	<input type="hidden" {name} {value} />
+	<div class="total">
+		<div class="total-content">
+			<Tooltip.Root direction="bottom">
+				<Tooltip.Trigger slot="trigger">
+					<h4>{label}</h4>
+				</Tooltip.Trigger>
+				<Tooltip.Content slot="content" style="background-color:var(--bg-2)">
+					<h6 style="color: var(--font-2);">
+						{#if column1}
+							{$field1.name}
+						{/if}
+						{operator}
+						{#if column2}
+							{$field2.name}
+						{/if}
+					</h6>
+				</Tooltip.Content>
+			</Tooltip.Root>
+			<h4>{value === null ? '-' : value}</h4>
+		</div>
+	</div>
+</div>
+
+<style>
+	.total-container {
+		width: 100%;
+		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

@@ -0,0 +1,37 @@
+import { createFieldType } from "$lib/registry/fieldTypeRegistry/createFieldType"
+
+import Icon from "./Icon.svelte"
+import Button from "./Button.svelte"
+import Card from "./Card.svelte"
+import Input from "./Input.svelte"
+
+export default createFieldType({
+    type: "calculation-column",
+
+    category_path: "calculation",
+
+    label: "Calcul de champs",
+    description: "Calcul automatique de 2 champs.",
+
+    is_hidden: false,
+
+    defaultProps:{},
+
+    can_be_required: false,
+    can_be_unique: false,
+
+    components: {
+        icon: Icon,
+        button: Button,
+        card: Card,
+        input: Input,
+        cell: null,
+        filter: null,
+        properties: null
+    },
+
+    formatter: (value) => value,
+    parser: (value) => value,
+
+    validate: () => true,
+})

package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/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/list/ListCheckbox/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/list/ListCheckbox/Icon.svelte

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z" fill="#292D32"/>
+<path d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z" fill="#292D32"/>
+</svg>