mountain-ui 1.0.120 → 1.0.121

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/Input.svelte +140 -81
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mountain-ui",
3
3
  "private": false,
4
- "version": "1.0.120",
4
+ "version": "1.0.121",
5
5
  "description": "A comprehensive UI component library for ERP systems with field types, entities, and registry management built with Svelte",
6
6
  "type": "module",
7
7
  "module": "index.js",
package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/Input.svelte CHANGED
@@ -1,88 +1,147 @@
1
1
  <script>
2
- import Label from '../../../components/Label.svelte';
3
- import Line from '../../../components/Line.svelte';
4
- import { Checkbox, Tag } from 'hamzus-ui';
5
-
6
- let {
7
- value = $bindable(null),
8
- name = '',
9
- label = '',
10
- required = false,
11
- unique = false,
12
- secret = false,
13
- compact = false,
14
- choices = [],
15
- onChange = () => {},
16
- onChangeDetails = () => {},
17
- ...props
18
- } = $props();
19
-
20
- const selected = $derived.by(() => {
21
- if (!value) return [];
22
-
23
- try {
24
- const parsed = JSON.parse(value);
25
- return Array.isArray(parsed) ? parsed : [];
26
- } catch {
27
- return [];
28
- }
29
- });
30
-
31
- function isChecked(choice) {
32
- return selected.includes(choice.value);
33
- }
34
-
35
- function handleChange(choice, checked) {
36
- const values = [...selected];
37
-
38
- if (checked) {
39
- if (!values.includes(choice.value)) {
40
- values.push(choice.value);
41
- }
42
- } else {
43
- const index = values.indexOf(choice.value);
44
- if (index !== -1) {
45
- values.splice(index, 1);
46
- }
47
- }
48
-
49
- value = values.length ? JSON.stringify(values) : null;
50
- onChange(value);
51
- onChangeDetails(values);
52
- }
2
+ import { onMount } from 'svelte';
3
+ import Label from '../../../components/Label.svelte';
4
+ import Line from '../../../components/Line.svelte';
5
+ import { Button, Checkbox, Input, Tag } from 'hamzus-ui';
6
+
7
+ let {
8
+ value = $bindable(null),
9
+ name = '',
10
+ label = '',
11
+ required = false,
12
+ unique = false,
13
+ secret = false,
14
+ compact = false,
15
+ choices = [],
16
+ canAddChoice = false,
17
+ onChange = () => {},
18
+ onChangeDetails = () => {},
19
+ ...props
20
+ } = $props();
21
+
22
+ let freeChoices = $state([]);
23
+
24
+ // Ne garde que les valeurs qui correspondent réellement à un choice connu.
25
+ // Les valeurs "libres" (free choices) sont donc automatiquement exclues.
26
+ const selected = $derived.by(() => {
27
+ if (!value) return [];
28
+
29
+ try {
30
+ const parsed = JSON.parse(value);
31
+ if (!Array.isArray(parsed)) return [];
32
+ return parsed.filter((v) => choices.some((c) => c.value === v));
33
+ } catch {
34
+ return [];
35
+ }
36
+ });
37
+
38
+ function isChecked(choice) {
39
+ return selected.includes(choice.value);
40
+ }
41
+
42
+ // Point central d'émission : combine les choix cochés + les freeChoices.
43
+ function emitChange(newSelected) {
44
+ const freeValues = freeChoices
45
+ .map((f) => (f ?? '').trim())
46
+ .filter((f) => f.length > 0);
47
+
48
+ const values = [...newSelected, ...freeValues];
49
+
50
+ value = values.length ? JSON.stringify(values) : null;
51
+ onChange(value);
52
+ onChangeDetails(values);
53
+ }
54
+
55
+ function handleChange(choice, checked) {
56
+ const values = [...selected];
57
+
58
+ if (checked) {
59
+ if (!values.includes(choice.value)) {
60
+ values.push(choice.value);
61
+ }
62
+ } else {
63
+ const index = values.indexOf(choice.value);
64
+ if (index !== -1) {
65
+ values.splice(index, 1);
66
+ }
67
+ }
68
+
69
+ emitChange(values);
70
+ }
71
+
72
+ function handleAddChoice() {
73
+ freeChoices = [...freeChoices, ''];
74
+ }
75
+
76
+ function handleChangeFreeChoice(index, newValue) {
77
+ freeChoices[index] = newValue;
78
+ freeChoices = [...freeChoices];
79
+
80
+ emitChange(selected);
81
+ }
82
+
83
+ onMount(() => {
84
+ if (!value) return;
85
+
86
+ try {
87
+ const parsed = JSON.parse(value);
88
+ if (!Array.isArray(parsed)) return;
89
+
90
+ const knownValues = choices.map((c) => c.value);
91
+ const unknown = parsed.filter((v) => !knownValues.includes(v));
92
+
93
+ if (unknown.length) {
94
+ freeChoices = [...freeChoices, ...unknown];
95
+ }
96
+ } catch {
97
+ // valeur invalide, on ignore
98
+ }
99
+ });
53
100
  </script>
54
101
 
55
102
  <Line {compact}>
56
- <Label {unique} {secret} {label} {required}></Label>
57
- <div class="choices">
58
- <input type="text" bind:value {name} {required} style="display:none" {...props} />
59
-
60
- {#each choices as choice}
61
- <Checkbox
62
- checked={isChecked(choice)}
63
- onChange={(checked) => handleChange(choice, checked)}
64
- direction="rtl"
65
- >
66
- <Tag color={choice.color.replace('--', '')}>
67
- {choice.value}
68
- </Tag>
69
- </Checkbox>
70
- {/each}
71
- </div>
103
+ <Label {unique} {secret} {label} {required}></Label>
104
+ <div class="choices">
105
+ <input type="text" bind:value {name} {required} style="display:none" {...props} />
106
+
107
+ {#each choices as choice}
108
+ <Checkbox
109
+ checked={isChecked(choice)}
110
+ onChange={(checked) => handleChange(choice, checked)}
111
+ direction="rtl"
112
+ >
113
+ <Tag color={choice.color.replace('--', '')}>
114
+ {choice.value}
115
+ </Tag>
116
+ </Checkbox>
117
+ {/each}
118
+ {#if canAddChoice}
119
+ <Button onClick={handleAddChoice}>
120
+ <h5>ajouter un choix</h5>
121
+ </Button>
122
+ {#each freeChoices as freeChoice, index}
123
+ <Input
124
+ placeholder="mon choix {index + 1}"
125
+ value={freeChoice}
126
+ onChange={(newValue) => handleChangeFreeChoice(index, newValue)}
127
+ />
128
+ {/each}
129
+ {/if}
130
+ </div>
72
131
  </Line>
73
132
 
74
133
  <style>
75
- .choices {
76
- display: flex;
77
- flex-direction: column;
78
- row-gap: var(--pad-m);
79
- padding: var(--pad-m);
80
- background-color: var(--bg-2);
81
- border-radius: var(--radius-m);
82
- width: 100%;
83
- }
84
-
85
- .choices:has(input:user-invalid) {
86
- border: 1px solid var(--red);
87
- }
88
- </style>
134
+ .choices {
135
+ display: flex;
136
+ flex-direction: column;
137
+ row-gap: var(--pad-m);
138
+ padding: var(--pad-m);
139
+ background-color: var(--bg-2);
140
+ border-radius: var(--radius-m);
141
+ width: 100%;
142
+ }
143
+
144
+ .choices:has(input:user-invalid) {
145
+ border: 1px solid var(--red);
146
+ }
147
+ </style>