mountain-ui 1.0.28 → 1.0.29

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.28",
+	"version": "1.0.29",
 	"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/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>

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

@@ -0,0 +1,153 @@
+<script>
+	import { entityRegistry } from '../../../../entityRegistry/registry.svelte.js';
+	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,
+		ctx = {},
+		detailsCtx = {},
+		onChange = () => {},
+		onChangeDetails = () => {},
+		registerCalculation = () => {},
+		operator = '',
+		fieldId = '',
+		lineFieldId = '',
+		...props
+	} = $props();
+
+	let isMounted = false;
+
+	const field = entityRegistry.selectField(fieldId); // champ de type ligne
+	const lineField = entityRegistry.selectField(lineFieldId); // champ dans la ligne
+
+	let previousValue1 = Symbol();
+	let previousValue2 = Symbol();
+
+	function getFieldValue(field, ctx) {
+		if (!field) return 0;
+
+		if (!ctx[field.id]) return 0;
+
+		// retourne les lignes
+		return JSON.parse(ctx[field.id]);
+	}
+
+	function calculate(ctx) {
+		if (!$field || !$lineField) return;
+
+		const lines = getFieldValue($field, ctx);
+
+		let values = lines.map((line) => Number(getFieldValue($lineField, line)) || 0);
+
+		let total;
+
+		switch (operator) {
+			case '+':
+				total = values.reduce((a, b) => a + b, 0);
+				break;
+
+			case '-':
+				total = values.reduce((a, b) => a - b);
+				break;
+
+			case '*':
+				total = values.reduce((a, b) => a * b, 1);
+				break;
+
+			case '/':
+				total = values.reduce((a, b) => (b === 0 ? null : a / b));
+				break;
+		}
+
+		if (total !== value) {
+			value = total;
+			onChange(total);
+		}
+	}
+
+	onMount(() => {
+		isMounted = true;
+
+		// On donne notre calcul au parent
+		registerCalculation({
+			id,
+			calculate,
+			dependsOn: [fieldId]
+		});
+	});
+</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 fieldId}
+							{$field.name}
+						{/if}
+                        >
+						{#if lineFieldId}
+							{$lineField.name}
+						{/if}
+						{operator}
+					</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/CalculationLine/index.js

@@ -0,0 +1,37 @@
+import { createFieldType } from '../../../createFieldType.js';
+
+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-line',
+
+	category_path: 'calculation',
+
+	label: 'Calcul de ligne',
+	description: 'Calcul automatique sur les lignes.',
+
+	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/registerDefaultFieldTypes.js

@@ -6,6 +6,7 @@ import NumberFloatDefault from './fieldTypes/number/float/NumberFloatDefault';
 import NumberFloatPrice from './fieldTypes/number/float/NumberFloatPrice';
 import NumberFloatPercent from './fieldTypes/number/float/NumberFloatPercent';
 import CalculationColumn from './fieldTypes/calculation/CalculationColumn';
+import CalculationLine from './fieldTypes/calculation/CalculationLine';
 import TextTextarea from './fieldTypes/text/TextTextarea';
 import TextVarcharDefault from './fieldTypes/text/varchar/TextVarcharDefault';
 import TextVarcharEmail from './fieldTypes/text/varchar/TextVarcharEmail';
@@ -35,6 +36,7 @@ export function registerDefaultFieldTypes() {
 	fieldTypeRegistry.register(NumberFloatPercent);
 	// calculation
 	fieldTypeRegistry.register(CalculationColumn);
+	fieldTypeRegistry.register(CalculationLine);
 	// text
 	fieldTypeRegistry.register(TextTextarea);
 

package/src/routes/+layout.svelte

@@ -605,6 +605,24 @@
 								}
 							]
 						}
+					},
+					{
+						id: 456,
+						link_to_field_id: null,
+						entity_id: 2,
+						type: 'calculation-line',
+						width: 160,
+						name: 'total de ligne',
+						normalized_name: 'total de ligne',
+						is_locked: false,
+						is_required: false,
+						is_secret: false,
+						is_unique: false,
+						props: {
+							fieldId: 305,
+							operator: '-',
+							lineFieldId: 207
+						}
 					}
 				]
 			})