mountain-ui 1.0.120 → 1.0.122

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.120",
+	"version": "1.0.122",
 	"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/list/ListCheckbox/Input.svelte

@@ -1,7 +1,8 @@
 <script>
+	import { onMount } from 'svelte';
 	import Label from '../../../components/Label.svelte';
 	import Line from '../../../components/Line.svelte';
-	import { Checkbox, Tag } from 'hamzus-ui';
+	import { Button, Checkbox, Input, Tag } from 'hamzus-ui';
 
 	let {
 		value = $bindable(null),
@@ -12,44 +13,70 @@
 		secret = false,
 		compact = false,
 		choices = [],
+		canAddChoice = false,
 		onChange = () => {},
 		onChangeDetails = () => {},
 		...props
 	} = $props();
 
-	const selected = $derived.by(() => {
-		if (!value) return [];
+	let freeChoices = $state([]);
+	let selected = $state([]);
 
-		try {
-			const parsed = JSON.parse(value);
-			return Array.isArray(parsed) ? parsed : [];
-		} catch {
-			return [];
+	// Point central d'émission : combine les choix cochés + les freeChoices.
+	function emitChange(newSelected) {
+		const freeValues = freeChoices.map((f) => (f ?? '').trim()).filter((f) => f.length > 0);
+
+		const values = [...selected, ...freeValues];
+
+		value = values.length ? JSON.stringify(values) : null;
+		onChange(value);
+		onChangeDetails(values);
+	}
+
+	function handleChange(choice) {
+		// si selected contient la valeur on la retire sinon on la met
+		if (selected.includes(choice.value)) {
+			selected = selected.filter((el) => el !== choice.value);
+		} else {
+			selected.push(choice.value);
 		}
-	});
 
-	function isChecked(choice) {
-		return selected.includes(choice.value);
+		emitChange();
 	}
 
-	function handleChange(choice, checked) {
-		const values = [...selected];
+	function handleAddChoice() {
+		freeChoices = [...freeChoices, ''];
+	}
+
+	function handleChangeFreeChoice(index, newValue) {
+		freeChoices[index] = newValue;
+		freeChoices = [...freeChoices];
 
-		if (checked) {
-			if (!values.includes(choice.value)) {
-				values.push(choice.value);
+		emitChange();
+	}
+
+	onMount(() => {
+		if (!value) return;
+
+		try {
+			const parsed = JSON.parse(value);
+			if (!Array.isArray(parsed)) return;
+
+			const knownValues = choices.map((c) => c.value);
+            
+			const unknown = parsed.filter((v) => !knownValues.includes(v));
+			const known = parsed.filter((v) => knownValues.includes(v));
+
+			if (known.length) {
+				selected = [...selected, ...known];
 			}
-		} else {
-			const index = values.indexOf(choice.value);
-			if (index !== -1) {
-				values.splice(index, 1);
+			if (unknown.length) {
+				freeChoices = [...freeChoices, ...unknown];
 			}
+		} catch {
+			// valeur invalide, on ignore
 		}
-
-		value = values.length ? JSON.stringify(values) : null;
-		onChange(value);
-		onChangeDetails(values);
-	}
+	});
 </script>
 
 <Line {compact}>
@@ -59,8 +86,8 @@
 
 		{#each choices as choice}
 			<Checkbox
-				checked={isChecked(choice)}
-				onChange={(checked) => handleChange(choice, checked)}
+				checked={selected.includes(choice.value)}
+				onChange={(checked) => handleChange(choice)}
 				direction="rtl"
 			>
 				<Tag color={choice.color.replace('--', '')}>
@@ -68,6 +95,18 @@
 				</Tag>
 			</Checkbox>
 		{/each}
+		{#if canAddChoice}
+			<Button onClick={handleAddChoice}>
+				<h5>ajouter un choix</h5>
+			</Button>
+			{#each freeChoices as freeChoice, index}
+				<Input
+					placeholder="mon choix {index + 1}"
+					value={freeChoice}
+					onChange={(newValue) => handleChangeFreeChoice(index, newValue)}
+				/>
+			{/each}
+		{/if}
 	</div>
 </Line>
 

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

@@ -4,6 +4,9 @@
 
 	let { value, choices } = $props();
 
+	let decodedValue = $state([]);
+
+
 	$effect(() => {
 		decodedValue = value.formated ?? [];
 	});
@@ -12,9 +15,11 @@
 
 	<div class="tags">
 		{#each decodedValue as tagValue}
-			{@const data = choices.find((el) => el.value === tagValue)}
+			{@const data = choices?.find((el) => el.value === tagValue)}
 			{#if data}
 				<Tag label={tagValue} color={data.color.replace('--', '')}></Tag>
+			{:else}
+				<Tag label={tagValue} style="--tag-color:var(--bg-blur);--font-color:var(--font-2);"></Tag>
 			{/if}
 		{/each}
 	</div>

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

@@ -3,9 +3,9 @@
 	import LineView from '../../../components/LineView.svelte';
 	import { Tag } from 'hamzus-ui';
 
-	let { value, choices, compact, unique, secret, label, required  } = $props();
+	let { value, choices, compact, unique, secret, label, required } = $props();
 
-    let decodedValue = $state([])
+	let decodedValue = $state([]);
 
 	$effect(() => {
 		decodedValue = [...(value.formated ?? [])];
@@ -19,6 +19,8 @@
 			{@const data = choices.find((el) => el.value === tagValue)}
 			{#if data}
 				<Tag label={tagValue} color={data.color.replace('--', '')}></Tag>
+			{:else}
+				<Tag label={tagValue} style="--tag-color:var(--bg-blur);--font-color:var(--font-2);"></Tag>
 			{/if}
 		{/each}
 	</div>