mountain-ui 1.0.28 → 1.0.30

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/TableView.svelte

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

package/src/lib/registry/fieldTypeRegistry/fieldTypes/calculation/CalculationLine/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/CalculationLine/index.js

@@ -0,0 +1,41 @@
+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';
+import View from './View.svelte';
+import TableView from './TableView.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,
+		view: View,
+		tableView: TableView,
+		filter: null,
+		properties: null
+	},
+
+	formatter: (value) => value,
+	parser: (value) => value,
+
+	validate: () => true
+});

package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/TableView.svelte

@@ -0,0 +1,28 @@
+<script>
+
+	import { Tag } from 'hamzus-ui';
+
+	let { value, choices } = $props();
+
+	$effect(() => {
+		decodedValue = value.formated ?? [];
+	});
+</script>
+
+
+	<div class="tags">
+		{#each decodedValue as tagValue}
+			{@const data = choices.find((el) => el.value === tagValue)}
+			{#if data}
+				<Tag label={tagValue} color={data.color.replace('--', '')}></Tag>
+			{/if}
+		{/each}
+	</div>
+
+<style>
+	.tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--pad-s);
+	}
+</style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/View.svelte

@@ -0,0 +1,31 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.svelte';
+	import { Tag } from 'hamzus-ui';
+
+	let { value, choices, compact, unique, secret, label, required  } = $props();
+
+	$effect(() => {
+		decodedValue = value.formated ?? [];
+	});
+</script>
+
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+	<div class="tags">
+		{#each decodedValue as tagValue}
+			{@const data = choices.find((el) => el.value === tagValue)}
+			{#if data}
+				<Tag label={tagValue} color={data.color.replace('--', '')}></Tag>
+			{/if}
+		{/each}
+	</div>
+</LineView>
+
+<style>
+	.tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--pad-s);
+	}
+</style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/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: 'list-checkbox',
@@ -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/list/ListRadio/TableView.svelte

@@ -0,0 +1,13 @@
+<script>
+	import ViewText from '../../../components/ViewText.svelte';
+	import { Tag } from 'hamzus-ui';
+
+	let {value, choices} = $props()
+</script>
+
+{#if value && value.formated}
+	{@const data = choices.filter((el) => el.value === value.formated)[0]}
+	<Tag label={value.formated} color={data.color.replace('--', '')}></Tag>
+{:else}
+    <ViewText>-</ViewText>
+{/if}

package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListRadio/View.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.svelte';
+	import ViewText from '../../../components/ViewText.svelte';
+	import { Tag } from 'hamzus-ui';
+
+	let {value, choices, compact, unique, secret, label, required } = $props()
+</script>
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+{#if value && value.formated}
+	{@const data = choices.filter((el) => el.value === value.formated)[0]}
+	<Tag label={value.formated} color={data.color.replace('--', '')}></Tag>
+{:else}
+    <ViewText>-</ViewText>
+{/if}
+
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListRadio/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: 'list-radio',
@@ -32,7 +34,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/number/NumberInt/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/number/NumberInt/View.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.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 === null ? '-' : value.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/number/NumberInt/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: 'number-int',
@@ -29,7 +31,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/number/float/NumberFloatDefault/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/number/float/NumberFloatDefault/View.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../../components/Label.svelte';
+	import LineView from '../../../../components/LineView.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 === null ? '-' : value.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/number/float/NumberFloatDefault/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: 'number-float-default',
@@ -29,7 +31,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/number/float/NumberFloatPercent/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/number/float/NumberFloatPercent/View.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../../components/Label.svelte';
+	import LineView from '../../../../components/LineView.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 === null ? '-' : value.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/number/float/NumberFloatPercent/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: 'number-float-percent',
@@ -29,7 +31,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/number/float/NumberFloatPrice/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/number/float/NumberFloatPrice/View.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../../components/Label.svelte';
+	import LineView from '../../../../components/LineView.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 === null ? '-' : value.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/number/float/NumberFloatPrice/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: 'number-float-price',
@@ -29,7 +31,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/text/TextTextarea/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/text/TextTextarea/View.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.svelte';
+	import ViewText from '../../../components/ViewText.svelte';
+
+	let { value, compact, unique, secret, label, required } = $props();
+</script>
+
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+	<p style="white-space: pre-wrap;">{value === null ? '-' : value.flat}</p>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/text/TextTextarea/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: 'text-textarea',
@@ -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/text/varchar/TextVarcharDefault/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/text/varchar/TextVarcharDefault/View.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../../components/Label.svelte';
+	import LineView from '../../../../components/LineView.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 === null ? '-' : value.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/text/varchar/TextVarcharDefault/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: 'text-varchar-default',
@@ -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/text/varchar/TextVarcharEmail/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/text/varchar/TextVarcharEmail/View.svelte

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