mountain-ui 1.0.121 → 1.0.123

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 +134 -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.123",
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,141 @@
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, IconButton, 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
+ });
80
+
81
+ function handleDeleteFreeChoice(index) {
82
+ freeChoices = freeChoices.filter((v, i) => i !== index);
83
+
84
+ emitChange();
85
+ }
100
86
  </script>
101
87
 
102
88
  <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>
89
+ <Label {unique} {secret} {label} {required}></Label>
90
+ <div class="choices">
91
+ <input type="text" bind:value {name} {required} style="display:none" {...props} />
92
+
93
+ {#each choices as choice}
94
+ <Checkbox
95
+ checked={selected.includes(choice.value)}
96
+ onChange={(checked) => handleChange(choice)}
97
+ direction="rtl"
98
+ >
99
+ <Tag color={choice.color.replace('--', '')}>
100
+ {choice.value}
101
+ </Tag>
102
+ </Checkbox>
103
+ {/each}
104
+ {#if canAddChoice}
105
+ <Button onClick={handleAddChoice}>
106
+ <h5>ajouter un choix</h5>
107
+ </Button>
108
+ {#each freeChoices as freeChoice, index}
109
+ <Input
110
+ placeholder="mon choix {index + 1}"
111
+ value={freeChoice}
112
+ onChange={(newValue) => handleChangeFreeChoice(index, newValue)}
113
+ >
114
+ <IconButton
115
+ slot="endContent"
116
+ variant="secondary"
117
+ onClick={() => {
118
+ handleDeleteFreeChoice(index);
119
+ }}
120
+ ></IconButton>
121
+ </Input>
122
+ {/each}
123
+ {/if}
124
+ </div>
131
125
  </Line>
132
126
 
133
127
  <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>
128
+ .choices {
129
+ display: flex;
130
+ flex-direction: column;
131
+ row-gap: var(--pad-m);
132
+ padding: var(--pad-m);
133
+ background-color: var(--bg-2);
134
+ border-radius: var(--radius-m);
135
+ width: 100%;
136
+ }
137
+
138
+ .choices:has(input:user-invalid) {
139
+ border: 1px solid var(--red);
140
+ }
141
+ </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>