mountain-ui 1.0.153 → 1.0.155

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mountain-ui",
3
3
  "private": false,
4
- "version": "1.0.153",
4
+ "version": "1.0.155",
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",
@@ -76,7 +76,7 @@
76
76
  "vitest-browser-svelte": "^2.1.1"
77
77
  },
78
78
  "dependencies": {
79
- "hamzus-ui": "^0.0.267"
79
+ "hamzus-ui": "^0.0.268"
80
80
  },
81
81
  "engines": {
82
82
  "node": ">=18.0.0"
@@ -2,7 +2,7 @@
2
2
  import FieldTypeInput from '../../fieldTypeRegistry/components/FieldTypeInput.svelte';
3
3
  import { entityRegistry } from '../registry.svelte';
4
4
 
5
- let { id, entityId = null, onChange = () => {}, onChangeDetails = () => {}, ...props } = $props();
5
+ let { id, entityId = null, onChange = () => {}, onChangeDetails = () => {}, hideLabel = false, ...props } = $props();
6
6
 
7
7
  const field = $derived(entityRegistry.selectField(id, entityId));
8
8
 
@@ -22,7 +22,8 @@
22
22
  {...props}
23
23
  id={$field.id}
24
24
  entity_id={$field.entity_id}
25
- label={$field.name}
25
+ label={hideLabel ? null : $field.name}
26
+ {...(hideLabel ? {placeholder:$field.name} : {})}
26
27
  {...$field.props}
27
28
  onChange={handleChange}
28
29
  onChangeDetails={handleChangeDetails}
@@ -8,12 +8,17 @@
8
8
  let {
9
9
  value = $bindable(null),
10
10
  label = '',
11
+ placeholder = '',
12
+ depth = 0,
11
13
  required = false,
12
14
  unique = false,
13
15
  secret = false,
14
16
  compact = false,
15
17
  linkId = null,
16
18
  columns = [],
19
+ headerIsHidden = false,
20
+ labelIsHidden = false,
21
+ number = false,
17
22
  onChange = () => {},
18
23
  onChangeDetails = () => {},
19
24
  ...props
@@ -162,12 +167,7 @@
162
167
 
163
168
  <div class="table">
164
169
  <div class="title">
165
- <Label {label} {required} {secret} {unique}></Label>
166
-
167
170
  <div class="right">
168
- <Button onClick={handleAddLine}>
169
- <h5>ajouter une rangée</h5>
170
- </Button>
171
171
  <IconButton size="24px" variant="ghost" onClick={handleToggleVisibility}>
172
172
  <svg
173
173
  width="24"
@@ -182,10 +182,32 @@
182
182
  />
183
183
  </svg>
184
184
  </IconButton>
185
+ <Label label={label ?? placeholder} {required} {secret} {unique}></Label>
186
+ </div>
187
+
188
+ <div class="right">
189
+ <IconButton onClick={handleAddLine}>
190
+ <svg
191
+ width="24"
192
+ height="24"
193
+ viewBox="0 0 24 24"
194
+ fill="none"
195
+ xmlns="http://www.w3.org/2000/svg"
196
+ >
197
+ <path
198
+ d="M18 12.75H6C5.59 12.75 5.25 12.41 5.25 12C5.25 11.59 5.59 11.25 6 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z"
199
+ fill="#292D32"
200
+ />
201
+ <path
202
+ d="M12 18.75C11.59 18.75 11.25 18.41 11.25 18V6C11.25 5.59 11.59 5.25 12 5.25C12.41 5.25 12.75 5.59 12.75 6V18C12.75 18.41 12.41 18.75 12 18.75Z"
203
+ fill="#292D32"
204
+ />
205
+ </svg>
206
+ </IconButton>
185
207
  </div>
186
208
  </div>
187
209
  <div class="table-container" style="--column-number:{columns.length};" class:hidden={isHidden}>
188
- {#if columns.length > 0 && columns.find(c=>(c.name??false) !== false)}
210
+ {#if !headerIsHidden && columns.length > 0 && columns.find((c) => (c.name ?? false) !== false)}
189
211
  <div class="header">
190
212
  {#each columns as column, columnIndex}
191
213
  <div class="header-cell">
@@ -199,68 +221,123 @@
199
221
  {#each table as line, lineIndex (line.id)}
200
222
  <div class="line">
201
223
  {#each columns as column, columnIndex}
202
- <div class="cell">
224
+ <div class="cell" style="--depth:{depth};">
203
225
  {#each column.rows as row, rowIndex}
204
- <FieldInput
205
- compact
206
- detailsCtx={table[lineIndex].detailsCtx}
207
- ctx={table[lineIndex].ctx}
208
- onChangeDetails={(value) => {
209
- handleChangeDetails(lineIndex, row.fieldId, value);
210
- }}
211
- onChange={(value) => {
212
- handleChange(lineIndex, row.fieldId, value);
213
- }}
214
- changeCtx={(fieldId, value) => {
215
- handleChange(lineIndex, fieldId, value);
216
- }}
217
- id={row.fieldId}
218
- value={table[lineIndex].ctx?.[row.fieldId] ?? null}
219
- registerCalculation={(config) => {
220
- handleRegisterCalculation(lineIndex, config);
221
- }}
222
- ></FieldInput>
226
+ {#if row.fieldId}
227
+ {#if number && rowIndex === 0 && columnIndex === 0}
228
+ <div class="cell-start">
229
+ <div class="number">
230
+ <h4>{lineIndex + 1}</h4>
231
+ </div>
232
+ <FieldInput
233
+ compact
234
+ hideLabel={labelIsHidden}
235
+ detailsCtx={table[lineIndex].detailsCtx}
236
+ ctx={table[lineIndex].ctx}
237
+ onChangeDetails={(value) => {
238
+ handleChangeDetails(lineIndex, row.fieldId, value);
239
+ }}
240
+ onChange={(value) => {
241
+ handleChange(lineIndex, row.fieldId, value);
242
+ }}
243
+ changeCtx={(fieldId, value) => {
244
+ handleChange(lineIndex, fieldId, value);
245
+ }}
246
+ id={row.fieldId}
247
+ value={table[lineIndex].ctx?.[row.fieldId] ?? null}
248
+ registerCalculation={(config) => {
249
+ handleRegisterCalculation(lineIndex, config);
250
+ }}
251
+ depth={depth+1}
252
+ ></FieldInput>
253
+ </div>
254
+ {:else if rowIndex === 0 && columnIndex + 1 === columns.length}
255
+ <div class="cell-delete">
256
+ <FieldInput
257
+ compact
258
+ hideLabel={labelIsHidden}
259
+ detailsCtx={table[lineIndex].detailsCtx}
260
+ ctx={table[lineIndex].ctx}
261
+ onChangeDetails={(value) => {
262
+ handleChangeDetails(lineIndex, row.fieldId, value);
263
+ }}
264
+ onChange={(value) => {
265
+ handleChange(lineIndex, row.fieldId, value);
266
+ }}
267
+ changeCtx={(fieldId, value) => {
268
+ handleChange(lineIndex, fieldId, value);
269
+ }}
270
+ id={row.fieldId}
271
+ value={table[lineIndex].ctx?.[row.fieldId] ?? null}
272
+ registerCalculation={(config) => {
273
+ handleRegisterCalculation(lineIndex, config);
274
+ }}
275
+ depth={depth+1}
276
+ ></FieldInput>
277
+ <div class="delete">
278
+ <IconButton
279
+ avoidRipple
280
+ variant="destructive"
281
+ onClick={() => {
282
+ handleDeleteLine(lineIndex);
283
+ }}
284
+ >
285
+ <svg
286
+ width="24"
287
+ height="24"
288
+ viewBox="0 0 24 24"
289
+ fill="none"
290
+ xmlns="http://www.w3.org/2000/svg"
291
+ >
292
+ <path
293
+ d="M20.9997 6.72998C20.9797 6.72998 20.9497 6.72998 20.9197 6.72998C15.6297 6.19998 10.3497 5.99998 5.11967 6.52998L3.07967 6.72998C2.65967 6.76998 2.28967 6.46998 2.24967 6.04998C2.20967 5.62998 2.50967 5.26998 2.91967 5.22998L4.95967 5.02998C10.2797 4.48998 15.6697 4.69998 21.0697 5.22998C21.4797 5.26998 21.7797 5.63998 21.7397 6.04998C21.7097 6.43998 21.3797 6.72998 20.9997 6.72998Z"
294
+ fill="#292D32"
295
+ />
296
+ <path
297
+ d="M8.50074 5.72C8.46074 5.72 8.42074 5.72 8.37074 5.71C7.97074 5.64 7.69074 5.25 7.76074 4.85L7.98074 3.54C8.14074 2.58 8.36074 1.25 10.6907 1.25H13.3107C15.6507 1.25 15.8707 2.63 16.0207 3.55L16.2407 4.85C16.3107 5.26 16.0307 5.65 15.6307 5.71C15.2207 5.78 14.8307 5.5 14.7707 5.1L14.5507 3.8C14.4107 2.93 14.3807 2.76 13.3207 2.76H10.7007C9.64074 2.76 9.62074 2.9 9.47074 3.79L9.24074 5.09C9.18074 5.46 8.86074 5.72 8.50074 5.72Z"
298
+ fill="#292D32"
299
+ />
300
+ <path
301
+ d="M15.2104 22.7501H8.79039C5.30039 22.7501 5.16039 20.8201 5.05039 19.2601L4.40039 9.19007C4.37039 8.78007 4.69039 8.42008 5.10039 8.39008C5.52039 8.37008 5.87039 8.68008 5.90039 9.09008L6.55039 19.1601C6.66039 20.6801 6.70039 21.2501 8.79039 21.2501H15.2104C17.3104 21.2501 17.3504 20.6801 17.4504 19.1601L18.1004 9.09008C18.1304 8.68008 18.4904 8.37008 18.9004 8.39008C19.3104 8.42008 19.6304 8.77007 19.6004 9.19007L18.9504 19.2601C18.8404 20.8201 18.7004 22.7501 15.2104 22.7501Z"
302
+ fill="#292D32"
303
+ />
304
+ <path
305
+ d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z"
306
+ fill="#292D32"
307
+ />
308
+ <path
309
+ d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z"
310
+ fill="#292D32"
311
+ />
312
+ </svg>
313
+ </IconButton>
314
+ </div>
315
+ </div>
316
+ {:else}
317
+ <FieldInput
318
+ compact
319
+ hideLabel={labelIsHidden}
320
+ detailsCtx={table[lineIndex].detailsCtx}
321
+ ctx={table[lineIndex].ctx}
322
+ onChangeDetails={(value) => {
323
+ handleChangeDetails(lineIndex, row.fieldId, value);
324
+ }}
325
+ onChange={(value) => {
326
+ handleChange(lineIndex, row.fieldId, value);
327
+ }}
328
+ changeCtx={(fieldId, value) => {
329
+ handleChange(lineIndex, fieldId, value);
330
+ }}
331
+ id={row.fieldId}
332
+ value={table[lineIndex].ctx?.[row.fieldId] ?? null}
333
+ registerCalculation={(config) => {
334
+ handleRegisterCalculation(lineIndex, config);
335
+ }}
336
+ depth={depth+1}
337
+ ></FieldInput>
338
+ {/if}
339
+ {/if}
223
340
  {/each}
224
- {#if columnIndex + 1 === columns.length}
225
- <div class="delete">
226
- <IconButton
227
- avoidRipple
228
- variant="destructive"
229
- onClick={() => {
230
- handleDeleteLine(lineIndex);
231
- }}
232
- >
233
- <svg
234
- width="24"
235
- height="24"
236
- viewBox="0 0 24 24"
237
- fill="none"
238
- xmlns="http://www.w3.org/2000/svg"
239
- >
240
- <path
241
- d="M20.9997 6.72998C20.9797 6.72998 20.9497 6.72998 20.9197 6.72998C15.6297 6.19998 10.3497 5.99998 5.11967 6.52998L3.07967 6.72998C2.65967 6.76998 2.28967 6.46998 2.24967 6.04998C2.20967 5.62998 2.50967 5.26998 2.91967 5.22998L4.95967 5.02998C10.2797 4.48998 15.6697 4.69998 21.0697 5.22998C21.4797 5.26998 21.7797 5.63998 21.7397 6.04998C21.7097 6.43998 21.3797 6.72998 20.9997 6.72998Z"
242
- fill="#292D32"
243
- />
244
- <path
245
- d="M8.50074 5.72C8.46074 5.72 8.42074 5.72 8.37074 5.71C7.97074 5.64 7.69074 5.25 7.76074 4.85L7.98074 3.54C8.14074 2.58 8.36074 1.25 10.6907 1.25H13.3107C15.6507 1.25 15.8707 2.63 16.0207 3.55L16.2407 4.85C16.3107 5.26 16.0307 5.65 15.6307 5.71C15.2207 5.78 14.8307 5.5 14.7707 5.1L14.5507 3.8C14.4107 2.93 14.3807 2.76 13.3207 2.76H10.7007C9.64074 2.76 9.62074 2.9 9.47074 3.79L9.24074 5.09C9.18074 5.46 8.86074 5.72 8.50074 5.72Z"
246
- fill="#292D32"
247
- />
248
- <path
249
- d="M15.2104 22.7501H8.79039C5.30039 22.7501 5.16039 20.8201 5.05039 19.2601L4.40039 9.19007C4.37039 8.78007 4.69039 8.42008 5.10039 8.39008C5.52039 8.37008 5.87039 8.68008 5.90039 9.09008L6.55039 19.1601C6.66039 20.6801 6.70039 21.2501 8.79039 21.2501H15.2104C17.3104 21.2501 17.3504 20.6801 17.4504 19.1601L18.1004 9.09008C18.1304 8.68008 18.4904 8.37008 18.9004 8.39008C19.3104 8.42008 19.6304 8.77007 19.6004 9.19007L18.9504 19.2601C18.8404 20.8201 18.7004 22.7501 15.2104 22.7501Z"
250
- fill="#292D32"
251
- />
252
- <path
253
- d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z"
254
- fill="#292D32"
255
- />
256
- <path
257
- d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z"
258
- fill="#292D32"
259
- />
260
- </svg>
261
- </IconButton>
262
- </div>
263
- {/if}
264
341
  </div>
265
342
  {/each}
266
343
  </div>
@@ -359,25 +436,40 @@
359
436
  .table {
360
437
  width: 100%;
361
438
  height: fit-content;
362
- border-radius: 0 var(--radius-m) var(--radius-m) 0;
363
- overflow: clip;
364
- border: 1px solid var(--stroke);
365
- border-left: 3px solid var(--accent);
439
+ }
440
+
441
+ .table:global(:has(.table) .table) {
442
+ border-left: 0px;
443
+ border-radius: 0px;
444
+ border: 0px;
445
+ border-top: 1px solid var(--stroke);
446
+ }
447
+
448
+ .table:global(:has(.table) .table) .title {
449
+ padding-left: var(--pad-xxl);
450
+ }
451
+ .table:global(:has(.table) .table) .body {
452
+ padding-left: var(--pad-xxl);
366
453
  }
367
454
 
368
455
  .title {
369
456
  display: flex;
370
457
  align-items: center;
371
458
  justify-content: space-between;
372
- padding: var(--pad-m);
459
+ padding: var(--pad-s);
373
460
  width: 100%;
374
461
  }
375
- .title {
462
+ .table:has( .hidden) .title {
376
463
  border-bottom: 1px solid var(--bg-blur);
377
- position: sticky;
378
- top: 45px;
464
+ }
465
+
466
+ .table-container:global( .title) {
379
467
  background-color: var(--bg-1);
380
- }
468
+ position: sticky;
469
+ top: 45px;
470
+ z-index: 3;
471
+ border-bottom: 1px solid var(--bg-blur);
472
+ }
381
473
 
382
474
  .right {
383
475
  display: flex;
@@ -385,14 +477,6 @@
385
477
  column-gap: var(--pad-m);
386
478
  }
387
479
 
388
- :global(.table-container .line:has(> .cell > .delete .button:hover)) {
389
- background-color: var(--red-b);
390
- }
391
-
392
- :global(.table-container:not(:has(.line:nth-child(2)))) .delete {
393
- display: none;
394
- }
395
-
396
480
  .delete {
397
481
  display: flex;
398
482
  justify-content: end;
@@ -401,30 +485,56 @@
401
485
 
402
486
  .table-container.hidden {
403
487
  display: none;
404
- overflow: hidden;
488
+ overflow: hidden;
405
489
  }
406
490
 
407
491
  .header {
408
492
  display: grid;
409
493
  grid-template-columns: repeat(var(--column-number), 1fr);
410
- background-color: var(--bg-blur);
411
- padding: var(--pad-m);
494
+ padding: var(--pad-m);
412
495
  }
413
496
 
414
- .body {
415
- display: flex;
416
- flex-direction: column;
417
- padding: var(--pad-xs);
418
- }
497
+ .body {
498
+ display: flex;
499
+ flex-direction: column;
500
+ row-gap: var(--pad-s);
501
+ }
419
502
 
420
- .line {
421
- display: grid;
503
+ .line {
504
+ display: grid;
422
505
  grid-template-columns: repeat(var(--column-number), 1fr);
423
- border-bottom: 1px solid var(--stroke);
424
- padding-top: var(--pad-xs);
425
- }
426
- .line:last-child {
427
- border-bottom: initial;
506
+ border-bottom: 1px solid var(--stroke);
507
+ padding-top: var(--pad-xs);
508
+ border-radius: var(--radius-m);
509
+ overflow: clip;
510
+ border: 1px solid var(--stroke);
511
+ border-left: 3px solid var(--accent);
512
+ }
513
+
514
+ :global(.line:has(> .cell > .cell-delete .delete .button:hover)) {
515
+ background-color: var(--red-b);
516
+ }
517
+
518
+ .table .body .line:global(:has(.table) .table .body .line) {
519
+ border: 0px;
520
+ }
521
+
522
+ .cell-delete {
523
+ display: grid;
524
+ grid-template-columns: 1fr 45px;
525
+ }
526
+
527
+ .cell-start {
528
+ display: grid;
529
+ grid-template-columns: 24px 1fr;
428
530
  }
429
531
 
532
+ .number {
533
+ display: flex;
534
+ align-items: center;
535
+ justify-content: center;
536
+ }
537
+ .number h4 {
538
+ color: hsl(calc(var(--depth) * 45), 70%, 60%);
539
+ }
430
540
  </style>
@@ -11,11 +11,12 @@
11
11
  required,
12
12
  defaultValue = '',
13
13
  value = defaultValue,
14
+ placeholder = "votre texte",
14
15
  ...props
15
16
  } = $props();
16
17
  </script>
17
18
 
18
19
  <Line {compact}>
19
20
  <Label {unique} {secret} {label} {required}></Label>
20
- <TextArea {...props} placeholder="votre texte" bind:value {required}></TextArea>
21
+ <TextArea {...props} {placeholder} bind:value {required}></TextArea>
21
22
  </Line>
@@ -3,12 +3,12 @@
3
3
  import Line from '../../../../components/Line.svelte';
4
4
  import FieldTypeInputText from '../FieldTypeInputText.svelte';
5
5
 
6
- let { label, unique = false, secret = false, compact = false, required, ...props } = $props();
6
+ let { label, unique = false, secret = false, compact = false, placeholder = "votre texte", required, ...props } = $props();
7
7
  </script>
8
8
 
9
9
  <Line {compact}>
10
10
  {#if label}
11
11
  <Label {unique} {secret} {label} {required}></Label>
12
12
  {/if}
13
- <FieldTypeInputText {...props} placeholder="votre texte" {required}></FieldTypeInputText>
13
+ <FieldTypeInputText {...props} {placeholder} {required}></FieldTypeInputText>
14
14
  </Line>
@@ -2,12 +2,12 @@
2
2
  import Label from '../../../../components/Label.svelte';
3
3
  import Line from '../../../../components/Line.svelte';
4
4
  import FieldTypeInputText from '../FieldTypeInputText.svelte';
5
- let { label, unique = false, secret = false, compact = false, required, ...props } = $props();
5
+ let { label, unique = false, secret = false, compact = false, placeholder="votre texte", required, ...props } = $props();
6
6
  </script>
7
7
 
8
8
  <Line {compact}>
9
9
  {#if label}
10
10
  <Label {unique} {secret} {label} {required}></Label>
11
11
  {/if}
12
- <FieldTypeInputText {...props} placeholder="votre texte" {required}></FieldTypeInputText>
12
+ <FieldTypeInputText {...props} {placeholder} {required}></FieldTypeInputText>
13
13
  </Line>
@@ -3,7 +3,7 @@
3
3
  import Line from '../../../../components/Line.svelte';
4
4
  import { Input } from 'hamzus-ui';
5
5
 
6
- let { label, unique = false, secret = false, compact = false, required, ...props } = $props();
6
+ let { label, unique = false, secret = false, compact = false, placeholder="Exemple1234.", required, ...props } = $props();
7
7
  </script>
8
8
 
9
9
  <Line {compact}>
@@ -35,7 +35,7 @@
35
35
  ]}
36
36
  {...props}
37
37
  type="password"
38
- placeholder="Exemple1234."
38
+ {placeholder}
39
39
  {required}
40
40
  ></Input>
41
41
  </Line>
@@ -2,12 +2,12 @@
2
2
  import Label from '../../../../components/Label.svelte';
3
3
  import Line from '../../../../components/Line.svelte';
4
4
  import FieldTypeInputText from '../FieldTypeInputText.svelte';
5
- let { label, unique = false, secret = false, compact = false, required, ...props } = $props();
5
+ let { label, unique = false, secret = false, compact = false, placeholder="votre texte", required, ...props } = $props();
6
6
  </script>
7
7
 
8
8
  <Line {compact}>
9
9
  {#if label}
10
10
  <Label {unique} {secret} {label} {required}></Label>
11
11
  {/if}
12
- <FieldTypeInputText {...props} placeholder="votre texte" {required}></FieldTypeInputText>
12
+ <FieldTypeInputText {...props} {placeholder} {required}></FieldTypeInputText>
13
13
  </Line>
@@ -2,12 +2,12 @@
2
2
  import Label from '../../../../components/Label.svelte';
3
3
  import Line from '../../../../components/Line.svelte';
4
4
  import FieldTypeInputText from '../FieldTypeInputText.svelte';
5
- let { label, unique = false, secret = false, compact = false, required, ...props } = $props();
5
+ let { label, unique = false, secret = false, compact = false, placeholder ="votre texte", required, ...props } = $props();
6
6
  </script>
7
7
 
8
8
  <Line {compact}>
9
9
  {#if label}
10
10
  <Label {unique} {secret} {label} {required}></Label>
11
11
  {/if}
12
- <FieldTypeInputText {...props} placeholder="votre texte" {required}></FieldTypeInputText>
12
+ <FieldTypeInputText {...props} {placeholder} {required}></FieldTypeInputText>
13
13
  </Line>