mountain-ui 1.0.121 → 1.0.122

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/Input.svelte +120 -140
  3. package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/TableView.svelte +6 -1
  4. package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/View.svelte +4 -2
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mountain-ui",
3
3
  "private": false,
4
- "version": "1.0.121",
4
+ "version": "1.0.122",
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,147 +1,127 @@
1
1
  <script>
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
- });
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
+ let selected = $state([]);
24
+
25
+ // Point central d'émission : combine les choix cochés + les freeChoices.
26
+ function emitChange(newSelected) {
27
+ const freeValues = freeChoices.map((f) => (f ?? '').trim()).filter((f) => f.length > 0);
28
+
29
+ const values = [...selected, ...freeValues];
30
+
31
+ value = values.length ? JSON.stringify(values) : null;
32
+ onChange(value);
33
+ onChangeDetails(values);
34
+ }
35
+
36
+ function handleChange(choice) {
37
+ // si selected contient la valeur on la retire sinon on la met
38
+ if (selected.includes(choice.value)) {
39
+ selected = selected.filter((el) => el !== choice.value);
40
+ } else {
41
+ selected.push(choice.value);
42
+ }
43
+
44
+ emitChange();
45
+ }
46
+
47
+ function handleAddChoice() {
48
+ freeChoices = [...freeChoices, ''];
49
+ }
50
+
51
+ function handleChangeFreeChoice(index, newValue) {
52
+ freeChoices[index] = newValue;
53
+ freeChoices = [...freeChoices];
54
+
55
+ emitChange();
56
+ }
57
+
58
+ onMount(() => {
59
+ if (!value) return;
60
+
61
+ try {
62
+ const parsed = JSON.parse(value);
63
+ if (!Array.isArray(parsed)) return;
64
+
65
+ const knownValues = choices.map((c) => c.value);
66
+
67
+ const unknown = parsed.filter((v) => !knownValues.includes(v));
68
+ const known = parsed.filter((v) => knownValues.includes(v));
69
+
70
+ if (known.length) {
71
+ selected = [...selected, ...known];
72
+ }
73
+ if (unknown.length) {
74
+ freeChoices = [...freeChoices, ...unknown];
75
+ }
76
+ } catch {
77
+ // valeur invalide, on ignore
78
+ }
79
+ });
100
80
  </script>
101
81
 
102
82
  <Line {compact}>
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>
83
+ <Label {unique} {secret} {label} {required}></Label>
84
+ <div class="choices">
85
+ <input type="text" bind:value {name} {required} style="display:none" {...props} />
86
+
87
+ {#each choices as choice}
88
+ <Checkbox
89
+ checked={selected.includes(choice.value)}
90
+ onChange={(checked) => handleChange(choice)}
91
+ direction="rtl"
92
+ >
93
+ <Tag color={choice.color.replace('--', '')}>
94
+ {choice.value}
95
+ </Tag>
96
+ </Checkbox>
97
+ {/each}
98
+ {#if canAddChoice}
99
+ <Button onClick={handleAddChoice}>
100
+ <h5>ajouter un choix</h5>
101
+ </Button>
102
+ {#each freeChoices as freeChoice, index}
103
+ <Input
104
+ placeholder="mon choix {index + 1}"
105
+ value={freeChoice}
106
+ onChange={(newValue) => handleChangeFreeChoice(index, newValue)}
107
+ />
108
+ {/each}
109
+ {/if}
110
+ </div>
131
111
  </Line>
132
112
 
133
113
  <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>
114
+ .choices {
115
+ display: flex;
116
+ flex-direction: column;
117
+ row-gap: var(--pad-m);
118
+ padding: var(--pad-m);
119
+ background-color: var(--bg-2);
120
+ border-radius: var(--radius-m);
121
+ width: 100%;
122
+ }
123
+
124
+ .choices:has(input:user-invalid) {
125
+ border: 1px solid var(--red);
126
+ }
127
+ </style>
package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/TableView.svelte CHANGED
@@ -4,6 +4,9 @@
4
4
 
5
5
  let { value, choices } = $props();
6
6
 
7
+ let decodedValue = $state([]);
8
+
9
+
7
10
  $effect(() => {
8
11
  decodedValue = value.formated ?? [];
9
12
  });
@@ -12,9 +15,11 @@
12
15
 
13
16
  <div class="tags">
14
17
  {#each decodedValue as tagValue}
15
- {@const data = choices.find((el) => el.value === tagValue)}
18
+ {@const data = choices?.find((el) => el.value === tagValue)}
16
19
  {#if data}
17
20
  <Tag label={tagValue} color={data.color.replace('--', '')}></Tag>
21
+ {:else}
22
+ <Tag label={tagValue} style="--tag-color:var(--bg-blur);--font-color:var(--font-2);"></Tag>
18
23
  {/if}
19
24
  {/each}
20
25
  </div>
package/src/lib/registry/fieldTypeRegistry/fieldTypes/list/ListCheckbox/View.svelte CHANGED
@@ -3,9 +3,9 @@
3
3
  import LineView from '../../../components/LineView.svelte';
4
4
  import { Tag } from 'hamzus-ui';
5
5
 
6
- let { value, choices, compact, unique, secret, label, required } = $props();
6
+ let { value, choices, compact, unique, secret, label, required } = $props();
7
7
 
8
- let decodedValue = $state([])
8
+ let decodedValue = $state([]);
9
9
 
10
10
  $effect(() => {
11
11
  decodedValue = [...(value.formated ?? [])];
@@ -19,6 +19,8 @@
19
19
  {@const data = choices.find((el) => el.value === tagValue)}
20
20
  {#if data}
21
21
  <Tag label={tagValue} color={data.color.replace('--', '')}></Tag>
22
+ {:else}
23
+ <Tag label={tagValue} style="--tag-color:var(--bg-blur);--font-color:var(--font-2);"></Tag>
22
24
  {/if}
23
25
  {/each}
24
26
  </div>