do-ui-design-system 1.1.18 → 1.1.19

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 (8) hide show
  1. package/dist/do-theme/table.css +63 -28
  2. package/dist/molecules/Pagination/Pagination.svelte +1 -0
  3. package/dist/organisms/TableBasic/TableBasic.svelte +63 -33
  4. package/dist/organisms/TableBasic/TableBasic.svelte.d.ts +1 -1
  5. package/dist/organisms/TableBasic/TableBasic.svelte.d.ts.map +1 -1
  6. package/dist/organisms/TableBasic/TableBasic.types.d.ts +2 -0
  7. package/dist/organisms/TableBasic/TableBasic.types.d.ts.map +1 -1
  8. package/package.json +1 -1
package/dist/do-theme/table.css CHANGED
@@ -3,10 +3,12 @@
3
3
  display: flex;
4
4
  align-items: center;
5
5
  justify-content: space-between;
6
+ gap: 1rem;
6
7
  margin-bottom: 1rem;
7
8
 
8
9
  .do-table__header__left__tags {
9
10
  display: flex;
11
+ flex-wrap: wrap;
10
12
  align-items: center;
11
13
  gap: 0.5rem;
12
14
  }
@@ -22,33 +24,55 @@
22
24
  gap: 0.75rem;
23
25
  flex-wrap: wrap;
24
26
  }
25
- }
26
-
27
- .do-table__header__right__date-range {
28
- display: flex;
29
- align-items: center;
30
- gap: 0.5rem;
31
- flex-wrap: wrap;
32
- position: relative;
33
27
 
34
- h5 {
35
- margin: 0;
28
+ .do-table__partial-match {
29
+ position: absolute;
30
+ white-space: nowrap;
31
+ left: 4px;
32
+ bottom: -0.8rem;
33
+ display: inline-flex;
34
+ align-items: center;
35
+ font-size: 0.8rem;
36
36
  }
37
- }
38
37
 
39
- .do-table__date-fields {
40
- display: flex;
41
- align-items: center;
42
- gap: 0.5rem;
43
- flex-wrap: wrap;
44
- position: relative;
38
+ .do-table__header__right__date-range {
39
+ display: flex;
40
+ align-items: center;
41
+ gap: 0.5rem;
42
+ flex-wrap: wrap;
43
+ padding: 0.5rem;
44
+ position: relative;
45
45
 
46
- .do-table__date-fields__field {
46
+ h5 {
47
+ margin: 0;
48
+ }
49
+ }
50
+
51
+ .do-table__date-fields {
47
52
  display: flex;
48
- flex-direction: column;
49
- gap: 0.25rem;
53
+ align-items: center;
54
+ gap: 0.5rem;
55
+ flex-wrap: wrap;
56
+ position: relative;
57
+
58
+ .do-table__date-fields__field {
59
+ display: flex;
60
+ flex-direction: column;
61
+ gap: 0.25rem;
62
+ }
50
63
  }
51
64
  }
65
+
66
+
67
+
68
+ .do-table__date-error {
69
+ position: absolute;
70
+ white-space: nowrap;
71
+ left: 10px;
72
+ bottom: -0.7rem;
73
+ font-size: 0.75rem;
74
+ color: red;
75
+ }
52
76
  }
53
77
 
54
78
  .do-table-wrapper {
@@ -142,6 +166,24 @@
142
166
  }
143
167
  }
144
168
 
169
+ .do-table__empty {
170
+ td {
171
+ text-align: center;
172
+ color: var(--do-table-text);
173
+ opacity: 0.5;
174
+
175
+ .do-table__empty__wrapper {
176
+ display: flex;
177
+ align-items: center;
178
+ justify-content: center;
179
+ border: 1px solid white;
180
+ margin: 10px;
181
+ border-radius: 10px;
182
+ min-height: 6rem;
183
+ }
184
+ }
185
+ }
186
+
145
187
  .do-table__content__th-filter {
146
188
  padding: 0.2rem 0.5rem;
147
189
 
@@ -211,12 +253,5 @@
211
253
  }
212
254
  }
213
255
 
214
- .do-table__date-error {
215
- position: absolute;
216
- white-space: nowrap;
217
- bottom: -1rem;
218
- left: 0;
219
- font-size: 0.75rem;
220
- color: red;
221
- }
256
+
222
257
  }
package/dist/molecules/Pagination/Pagination.svelte CHANGED
@@ -59,6 +59,7 @@
59
59
  <label class="do-pagination__size">
60
60
  Mostrar:
61
61
  <select
62
+ class="do-select"
62
63
  bind:value={pagination.pageSize}
63
64
  onchange={() => pageSizeChange(pagination.pageSize || 5)}
64
65
  >
package/dist/organisms/TableBasic/TableBasic.svelte CHANGED
@@ -17,7 +17,7 @@
17
17
  - `columns`: ColumnDef<T>[] - column definitions `{ key: keyof T, label: string, maxWidth?: number }` — `maxWidth` in rem
18
18
  - `actionColumns?`: ActionColumnDef<T>[] - icon button columns `{ key: string, icon: IconNames, label?: string, showHeader?: boolean, onClick: (row: T) => void }`
19
19
  - `tagConfig?`: `{ column: keyof T, label: string }` - enables tag filter buttons in the header
20
- - `dateConfig?`: `{ columnFrom?: keyof T, columnTo?: keyof T, mode?: 'year' | 'date' }` - enables date range filter; filters by overlap when both columns are set
20
+ - `dateConfig?`: `{ columnFrom?: keyof T, columnTo?: keyof T, mode?: 'year' | 'date', label?: string, partialMatchLabel?: string }` - enables date range filter; when both columns are set, default filters strict range (both ends inside), partial match switch allows overlap
21
21
  - `idKey?`: keyof T - row identifier key (default `'id'`)
22
22
  - `headerActions?`: HeaderAction[] - `{ icon: IconNames, label: string, onClick: () => void, disabled?: boolean }` - action buttons in the table header
23
23
  - `pageSize?`: number - rows per page (default `25`)
@@ -77,6 +77,8 @@
77
77
  const currentYear = new Date().getFullYear();
78
78
  const years = Array.from({ length: 30 }, (_, i) => String(currentYear - i));
79
79
 
80
+ let partialMatch: boolean = $state(false);
81
+
80
82
  const clearDates = () => {
81
83
  dateFrom = '';
82
84
  dateTo = '';
@@ -132,9 +134,15 @@
132
134
  if (dateConfig.columnFrom && dateConfig.columnTo) {
133
135
  const from = normalize(String(row[dateConfig.columnFrom]));
134
136
  const to = normalize(String(row[dateConfig.columnTo]));
135
- // overlap: rowFrom <= filterTo AND rowTo >= filterFrom
136
- if (dateTo && from > dateTo) return false;
137
- if (dateFrom && to < dateFrom) return false;
137
+ if (partialMatch) {
138
+ // overlap: alguna parte del rango coincide con el filtro
139
+ if (dateTo && from > dateTo) return false;
140
+ if (dateFrom && to < dateFrom) return false;
141
+ } else {
142
+ // estricto: inicio y fin deben estar dentro del rango del filtro
143
+ if (dateFrom && from < dateFrom) return false;
144
+ if (dateTo && to > dateTo) return false;
145
+ }
138
146
  } else if (dateConfig.columnFrom) {
139
147
  const from = normalize(String(row[dateConfig.columnFrom]));
140
148
  if (dateFrom && from < dateFrom) return false;
@@ -267,38 +275,51 @@
267
275
  {#if dateConfig}
268
276
  <div class="do-table__header__right__dates">
269
277
  <div class="do-table__header__right__date-range">
270
- <h5>Rango fechas</h5>
278
+ <h5>{dateConfig?.label ?? 'Rango de fechas'}</h5>
271
279
  <div class="do-table__date-fields">
272
- <div class="do-table__date-fields__field">
273
- {#if dateMode === 'year'}
274
- <select bind:value={dateFrom} class="do-select">
275
- <option value="">Desde</option>
276
- {#each years as year}
277
- <option value={year}>{year}</option>
278
- {/each}
279
- </select>
280
- {:else}
281
- <input type="date" bind:value={dateFrom} class="do-input" />
282
- {/if}
283
- </div>
284
-
285
- <div class="do-table__date-fields__field">
286
- {#if dateMode === 'year'}
287
- <select bind:value={dateTo} class="do-select">
288
- <option value="">Hasta</option>
289
- {#each years as year}
290
- <option value={year}>{year}</option>
291
- {/each}
292
- </select>
293
- {:else}
294
- <input type="date" bind:value={dateTo} class="do-input" />
295
- {/if}
280
+ <div class="do-table__date-fields">
281
+ <div class="do-table__date-fields__field">
282
+ {#if dateMode === 'year'}
283
+ <select bind:value={dateFrom} class="do-select">
284
+ <option value="">Desde</option>
285
+ {#each years as year}
286
+ <option value={year}>{year}</option>
287
+ {/each}
288
+ </select>
289
+ {:else}
290
+ <input type="date" bind:value={dateFrom} class="do-input" />
291
+ {/if}
292
+ </div>
293
+
294
+ <div class="do-table__date-fields__field">
295
+ {#if dateMode === 'year'}
296
+ <select bind:value={dateTo} class="do-select">
297
+ <option value="">Hasta</option>
298
+ {#each years as year}
299
+ <option value={year}>{year}</option>
300
+ {/each}
301
+ </select>
302
+ {:else}
303
+ <input type="date" bind:value={dateTo} class="do-input" />
304
+ {/if}
305
+ </div>
296
306
  </div>
297
-
298
- {#if dateError}
299
- <span class="do-table__date-error">{dateError}</span>
300
- {/if}
301
307
  </div>
308
+ {#if dateConfig?.columnFrom && dateConfig?.columnTo && !dateError}
309
+ <label class="do-table__partial-match">
310
+ <input
311
+ type="checkbox"
312
+ role="switch"
313
+ class="do-switch"
314
+ bind:checked={partialMatch}
315
+ />
316
+ <span>{dateConfig?.partialMatchLabel ?? 'Incluir coincidencias parciales'}</span>
317
+ </label>
318
+ {/if}
319
+
320
+ {#if dateError}
321
+ <span class="do-table__date-error">{dateError || 'Error'}</span>
322
+ {/if}
302
323
 
303
324
  {#if dateFrom || dateTo}
304
325
  <IconButton
@@ -405,6 +426,15 @@
405
426
  </thead>
406
427
 
407
428
  <tbody>
429
+ {#if filtered().length === 0}
430
+ <tr class="do-table__empty">
431
+ <td colspan={columns.length + actionColumns.length + (showCheckbox ? 1 : 0)}>
432
+ <div class="do-table__empty__wrapper">
433
+ <p>No hay coincidencias</p>
434
+ </div>
435
+ </td>
436
+ </tr>
437
+ {/if}
408
438
  {#each paginated() as row (row[idKey])}
409
439
  {@const isSelected = selected.has(row[idKey])}
410
440
  <tr class="do-row" class:selected={isSelected}>
package/dist/organisms/TableBasic/TableBasic.svelte.d.ts CHANGED
@@ -30,7 +30,7 @@ type Props<T extends Record<string, any>> = {
30
30
  * - `columns`: ColumnDef<T>[] - column definitions `{ key: keyof T, label: string, maxWidth?: number }` — `maxWidth` in rem
31
31
  * - `actionColumns?`: ActionColumnDef<T>[] - icon button columns `{ key: string, icon: IconNames, label?: string, showHeader?: boolean, onClick: (row: T) => void }`
32
32
  * - `tagConfig?`: `{ column: keyof T, label: string }` - enables tag filter buttons in the header
33
- * - `dateConfig?`: `{ columnFrom?: keyof T, columnTo?: keyof T, mode?: 'year' | 'date' }` - enables date range filter; filters by overlap when both columns are set
33
+ * - `dateConfig?`: `{ columnFrom?: keyof T, columnTo?: keyof T, mode?: 'year' | 'date', label?: string, partialMatchLabel?: string }` - enables date range filter; when both columns are set, default filters strict range (both ends inside), partial match switch allows overlap
34
34
  * - `idKey?`: keyof T - row identifier key (default `'id'`)
35
35
  * - `headerActions?`: HeaderAction[] - `{ icon: IconNames, label: string, onClick: () => void, disabled?: boolean }` - action buttons in the table header
36
36
  * - `pageSize?`: number - rows per page (default `25`)
package/dist/organisms/TableBasic/TableBasic.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableBasic.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/TableBasic/TableBasic.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAGV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,eAAe,EACf,SAAS,EAET,MAAM,uBAAuB,CAAC;AAG/B,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC3C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;IAChB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AA6WH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"TableBasic.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/TableBasic/TableBasic.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAGV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,eAAe,EACf,SAAS,EAET,MAAM,uBAAuB,CAAC;AAG/B,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC3C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;IAChB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AAsYH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
package/dist/organisms/TableBasic/TableBasic.types.d.ts CHANGED
@@ -9,6 +9,8 @@ export type DateConfig<T> = {
9
9
  columnFrom?: keyof T;
10
10
  columnTo?: keyof T;
11
11
  mode?: DateMode;
12
+ label?: string;
13
+ partialMatchLabel?: string;
12
14
  };
13
15
  export type HeaderAction = {
14
16
  icon: IconNames;
package/dist/organisms/TableBasic/TableBasic.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableBasic.types.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/TableBasic/TableBasic.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAClD,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvC,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACvB,MAAM,EAAE,MAAM,CAAC,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACvB,GAAG,EAAE,MAAM,CAAC,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACpD,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;IAChB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CAC1D,CAAC"}
1
+ {"version":3,"file":"TableBasic.types.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/TableBasic/TableBasic.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAClD,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvC,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACvB,MAAM,EAAE,MAAM,CAAC,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACvB,GAAG,EAAE,MAAM,CAAC,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACpD,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;IAChB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CAC1D,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "do-ui-design-system",
3
- "version": "1.1.18",
3
+ "version": "1.1.19",
4
4
  "description": "Design system en Svelte + CSS + Storybook",
5
5
  "author": "Data Observatory",
6
6
  "license": "MIT",