do-ui-design-system 1.1.13 → 1.1.15

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 (12) hide show
  1. package/dist/do-theme/form.css +53 -0
  2. package/dist/do-theme/pagination.css +20 -1
  3. package/dist/do-theme/table.css +220 -137
  4. package/dist/molecules/Pagination/Pagination.svelte +12 -5
  5. package/dist/molecules/Pagination/Pagination.svelte.d.ts.map +1 -1
  6. package/dist/organisms/TableBasic/TableBasic.svelte +422 -289
  7. package/dist/organisms/TableBasic/TableBasic.svelte.d.ts +7 -24
  8. package/dist/organisms/TableBasic/TableBasic.svelte.d.ts.map +1 -1
  9. package/dist/organisms/TableBasic/TableBasic.types.d.ts +40 -0
  10. package/dist/organisms/TableBasic/TableBasic.types.d.ts.map +1 -0
  11. package/dist/organisms/TableBasic/TableBasic.types.js +1 -0
  12. package/package.json +1 -1
package/dist/do-theme/form.css CHANGED
@@ -39,4 +39,57 @@
39
39
  .do-select {
40
40
  background-color: #27272A;
41
41
  border: 1px solid #52525B;
42
+ }
43
+
44
+ .do-checkbox {
45
+ width: 16px;
46
+ height: 16px;
47
+ padding: 0;
48
+ margin: 0;
49
+ cursor: pointer;
50
+ position: relative;
51
+ appearance: none;
52
+ -webkit-appearance: none;
53
+ }
54
+
55
+ .do-checkbox::before {
56
+ content: '';
57
+ display: block;
58
+ width: 16px;
59
+ height: 16px;
60
+ background-color: var(--Zinc-400, #a1a1aa);
61
+ border: 1px solid var(--Zinc-800, #27272a);
62
+ border-radius: 3.5px;
63
+ box-sizing: border-box;
64
+ }
65
+
66
+ .do-checkbox::after {
67
+ content: '';
68
+ position: absolute;
69
+ top: 50%;
70
+ left: 50%;
71
+ transform: translate(-50%, -50%);
72
+ background-repeat: no-repeat;
73
+ background-position: center;
74
+ display: none;
75
+ }
76
+
77
+ .do-checkbox:indeterminate::after {
78
+ background-color: var(--Zinc-400, #a1a1aa);
79
+ width: 10px;
80
+ height: 2px;
81
+ display: block;
82
+ background-color: var(--Zinc-800, #27272a);
83
+ border-radius: 3.5px;
84
+ }
85
+
86
+ .do-checkbox:checked::after {
87
+ display: block;
88
+ width: 16px;
89
+ height: 16px;
90
+ top: 0;
91
+ left: 0;
92
+ transform: none;
93
+ background-color: transparent;
94
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path d="M13 4.5L6.7 11.7L4 9" stroke="%233F3F46" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
42
95
  }
package/dist/do-theme/pagination.css CHANGED
@@ -1,9 +1,28 @@
1
1
  .do-pagination {
2
2
  display: flex;
3
+ gap: 0.5rem;
3
4
 
4
5
  .do-pagination__nav {
5
6
  display: flex;
6
- align-items: center;
7
+ align-items: stretch;
7
8
  gap: 0.2rem;
9
+
10
+ .do-pagination__nav__back {
11
+ transform: rotate(90deg);
12
+ }
13
+
14
+ .do-pagination__nav__next {
15
+ transform: rotate(-90deg);
16
+ }
17
+ }
18
+
19
+ .do-pagination__size {
20
+ display: flex;
21
+ gap: 0.5rem;
22
+ align-items: center;
23
+
24
+ select {
25
+ height: 100%;
26
+ }
8
27
  }
9
28
  }
package/dist/do-theme/table.css CHANGED
@@ -1,138 +1,221 @@
1
- .do-table {
2
- .do-table__header {
3
- .do-table__header__tags {
4
- display: flex;
5
- align-items: center;
6
- gap: 0.5rem;
7
- margin-bottom: 1rem;
8
- }
9
- }
10
-
11
- .do-table__content {
12
-
13
- width: 100%;
14
- border-collapse: collapse;
15
-
16
- thead tr {
17
- background: var(--do-table-bg-head);
18
- border-bottom: 1px solid #1e1e1e;
19
- }
20
-
21
- .do-table__content__th {
22
- padding: 0.75rem 1rem;
23
- text-align: left;
24
- font-size: 1rem;
25
- font-weight: 500;
26
- cursor: pointer;
27
- user-select: none;
28
- white-space: nowrap;
29
- transition: color 0.15s;
30
- color: #ffffff;
31
-
32
- .do-table__content__th__sort {
33
- display: inline-block;
34
- font-size: 0.8rem;
35
- margin-left: 4px;
36
- }
37
-
38
- .do-table__content__th__sort--up {
39
- transform: rotate(180deg);
40
- }
41
-
42
- &.do-table__content__th:hover {
43
- color: #ffffff;
44
- }
45
-
46
- &.do-table__content__th.sort-active {
47
- color: #eee;
48
- }
49
- }
50
-
51
- .sort-icon {
52
- margin-left: 4px;
53
- font-size: 1rem;
54
- color: #6366f1;
55
- }
56
-
57
- .sort-icon.muted {
58
- color: #374151;
59
- }
60
-
61
- .col-check {
62
- padding: 0.75rem 1rem;
63
- width: 1rem;
64
- }
65
-
66
- .do-row {
67
- background: var(--do-table-bg-row);
68
- transition: background 0.12s;
69
- color: var(--do-table-text);
70
- border: 1px solid transparent;
71
-
72
- &:nth-child(2n) {
73
- background: var(--do-table-bg-row-striped);
74
- }
75
-
76
- &:hover {
77
- background: var(--do-table-bg-row-hover);
78
- }
79
-
80
- &.selected {
81
- background: var(--do-table-bg-row-hover);
82
- outline: 2px solid rgb(15, 116, 182);
83
- outline-offset: -1px;
84
- }
85
- }
86
-
87
- td {
88
- padding: 0.75rem 1rem;
89
- color: inherit;
90
- }
91
-
92
- td:first-child {
93
- color: #e2e8f0;
94
- }
95
-
96
- .do-checkbox {
97
- cursor: pointer;
98
- accent-color: #6366f1;
99
- width: 15px;
100
- height: 15px;
101
- }
102
-
103
- .do-table_content-wrapper {
104
- border: 1px solid var(--do-bg-secondary);
105
- border-radius: 12px;
106
- overflow: hidden;
107
- }
108
- }
109
-
110
- .do-table__footer {
111
- display: grid;
112
- grid-template-columns: 1fr min-content;
113
- align-items: center;
114
- padding: 10px 16px;
115
- border-top: 1px solid white;
116
- gap: 16px;
117
- color: inherit;
118
- font-size: 1rem;
119
-
120
- .selected-count {
121
- color: #6366f1;
122
- }
123
-
124
- .sort-label strong {
125
- color: #6366f1;
126
- font-weight: 500;
127
- }
128
- }
129
- }
130
-
131
- .do-table-card {
132
- border: 1px solid var(--do-bg-secondary);
133
- border-radius: 12px;
134
- overflow: hidden;
135
- background: var(--do-table-bg);
136
- font-size: 1rem;
137
- padding: 0.75rem 1rem;
1
+ .do-table {
2
+ .do-table__header {
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: space-between;
6
+ margin-bottom: 1rem;
7
+
8
+ .do-table__header__tags {
9
+ display: flex;
10
+ align-items: center;
11
+ gap: 0.5rem;
12
+ }
13
+ }
14
+
15
+ .do-table-wrapper {
16
+ overflow-x: auto;
17
+ }
18
+
19
+ .do-table__content {
20
+ border-radius: 12px;
21
+ overflow: hidden;
22
+ background: var(--do-table-bg);
23
+ font-size: 1rem;
24
+ width: 100%;
25
+ border-collapse: collapse;
26
+
27
+ thead tr {
28
+ background: var(--do-table-bg-head);
29
+ border-bottom: 1px solid #1e1e1e;
30
+ }
31
+
32
+ .do-table__content__th {
33
+ padding: 0.75rem 1rem;
34
+ text-align: left;
35
+ font-size: 1rem;
36
+ font-weight: 500;
37
+ cursor: pointer;
38
+ transition: color 0.15s;
39
+ color: #ffffff;
40
+
41
+ &:not(.col-check) {
42
+ min-width: 120px;
43
+ }
44
+
45
+ .do-table__content__th__sort {
46
+ display: inline-block;
47
+ font-size: 0.8rem;
48
+ margin-left: 4px;
49
+ }
50
+
51
+ .do-table__content__th__sort--up {
52
+ transform: rotate(180deg);
53
+ }
54
+
55
+ &.do-table__content__th:hover {
56
+ color: #ffffff;
57
+ }
58
+
59
+ &.do-table__content__th.sort-active {
60
+ color: #eee;
61
+ }
62
+ }
63
+
64
+ .sort-icon {
65
+ margin-left: 4px;
66
+ font-size: 1rem;
67
+ color: #6366f1;
68
+ }
69
+
70
+ .sort-icon.muted {
71
+ color: #374151;
72
+ }
73
+
74
+ .col-check {
75
+ padding: 0.75rem 1rem;
76
+ width: 1px;
77
+ }
78
+
79
+ .do-row {
80
+ background: var(--do-table-bg-row);
81
+ transition: background 0.12s;
82
+ color: var(--do-table-text);
83
+ border: 1px solid transparent;
84
+
85
+ &:nth-child(2n) {
86
+ background: var(--do-table-bg-row-striped);
87
+ }
88
+
89
+ &:hover {
90
+ background: var(--do-table-bg-row-hover);
91
+ }
92
+
93
+ &.selected {
94
+ background: var(--do-table-bg-row-hover);
95
+ outline: 2px solid rgb(15, 116, 182);
96
+ outline-offset: -1px;
97
+ }
98
+ }
99
+
100
+ .do-table__content__th-filter {
101
+ padding: 0.2rem 0.5rem;
102
+
103
+ input {
104
+ max-width: 80%;
105
+ }
106
+ }
107
+
108
+ .do-table__content__th-action {
109
+ padding: 0.2rem 0.5rem;
110
+ }
111
+
112
+ td {
113
+ padding: 0.75rem 1rem;
114
+ color: inherit;
115
+
116
+ &:not(.col-check) {
117
+ min-width: 120px;
118
+ }
119
+ }
120
+
121
+ td:first-child {
122
+ color: #e2e8f0;
123
+ }
124
+
125
+ .do-checkbox {
126
+ cursor: pointer;
127
+ accent-color: #6366f1;
128
+ width: 15px;
129
+ height: 15px;
130
+ }
131
+
132
+ .do-table_content-wrapper {
133
+ border: 1px solid var(--do-bg-secondary);
134
+ border-radius: 12px;
135
+ overflow: hidden;
136
+ }
137
+ }
138
+
139
+ .do-table__footer {
140
+ display: grid;
141
+ grid-template-columns: 1fr min-content;
142
+ align-items: center;
143
+ padding: 10px 16px;
144
+ border-top: 1px solid white;
145
+ gap: 16px;
146
+ color: inherit;
147
+ font-size: 1rem;
148
+
149
+ .selected-count {
150
+ color: #5e5e5e;
151
+ }
152
+
153
+ .sort-label strong {
154
+ color: #5e5e5e;
155
+ font-weight: 500;
156
+ }
157
+ }
158
+
159
+ .do-table__header__dates {
160
+ display: flex;
161
+ align-items: flex-end;
162
+ gap: 0.75rem;
163
+ flex-wrap: wrap;
164
+ }
165
+
166
+ .do-table__date-toggle {
167
+ display: flex;
168
+ border: 1px solid var(--do-border, #3f3f46);
169
+ border-radius: 6px;
170
+ overflow: hidden;
171
+ }
172
+
173
+ .do-table__date-toggle__btn {
174
+ padding: 0.375rem 0.75rem;
175
+ font-size: 0.875rem;
176
+ background: transparent;
177
+ border: none;
178
+ cursor: pointer;
179
+ color: inherit;
180
+ transition: background 0.15s;
181
+
182
+ &.active {
183
+ background: var(--do-bg-secondary, #3f3f46);
184
+ }
185
+
186
+ &:hover:not(.active) {
187
+ background: var(--do-bg-secondary-hover, #52525b);
188
+ }
189
+ }
190
+
191
+ .do-table__date-range {
192
+ display: flex;
193
+ align-items: center;
194
+ gap: 0.5rem;
195
+ flex-wrap: wrap;
196
+ position: relative;
197
+ }
198
+
199
+ .do-table__date-fields {
200
+ display: flex;
201
+ align-items: center;
202
+ gap: 0.5rem;
203
+ flex-wrap: wrap;
204
+ position: relative;
205
+
206
+ .do-table__date-fields__field {
207
+ display: flex;
208
+ flex-direction: column;
209
+ gap: 0.25rem;
210
+ }
211
+ }
212
+
213
+ .do-table__date-error {
214
+ position: absolute;
215
+ white-space: nowrap;
216
+ bottom: -1rem;
217
+ left: 0;
218
+ font-size: 0.75rem;
219
+ color: red;
220
+ }
138
221
  }
package/dist/molecules/Pagination/Pagination.svelte CHANGED
@@ -16,7 +16,11 @@
16
16
 
17
17
  let { pagination, goToPage, pageSizeChange }: Props = $props();
18
18
 
19
- const getPaginationPages = (current: number, total: number, maxPages: number = 5) => {
19
+ const getPaginationPages = (
20
+ current: number,
21
+ total: number,
22
+ maxPages: number = pagination.pageSize
23
+ ) => {
20
24
  if (total <= maxPages) {
21
25
  return Array.from({ length: total }, (_, i) => i + 1);
22
26
  }
@@ -52,9 +56,12 @@
52
56
  </script>
53
57
 
54
58
  <div class="do-pagination">
55
- <label>
59
+ <label class="do-pagination__size">
56
60
  Mostrar:
57
- <select bind:value={pagination.pageSize} onchange={() => pageSizeChange(pagination.pageSize)}>
61
+ <select
62
+ bind:value={pagination.pageSize}
63
+ onchange={() => pageSizeChange(pagination.pageSize || 5)}
64
+ >
58
65
  <option value={5}>5</option>
59
66
  <option value={10}>10</option>
60
67
  <option value={25}>25</option>
@@ -66,7 +73,7 @@
66
73
  <div class="do-pagination__nav">
67
74
  <IconButton
68
75
  iconName="icon-chevron-down"
69
- iCustomClass="rotate-90"
76
+ iCustomClass="do-pagination__nav__back"
70
77
  disabled={pagination.currentPage === 1}
71
78
  onClick={() => goToPage(pagination.currentPage - 1)}
72
79
  ariaLabel="página anterior"
@@ -91,7 +98,7 @@
91
98
 
92
99
  <IconButton
93
100
  iconName="icon-chevron-down"
94
- iCustomClass="-rotate-90"
101
+ iCustomClass="do-pagination__nav__next"
95
102
  disabled={pagination.currentPage === pagination.totalPages}
96
103
  onClick={() => goToPage(pagination.currentPage + 1)}
97
104
  ariaLabel="página siguiente"
package/dist/molecules/Pagination/Pagination.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,eAAe,GAAG;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,KAAK,GAAG;IACZ,UAAU,EAAE,eAAe,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AA6EH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,eAAe,GAAG;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,KAAK,GAAG;IACZ,UAAU,EAAE,eAAe,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAiFH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
package/dist/organisms/TableBasic/TableBasic.svelte CHANGED
@@ -1,289 +1,422 @@
1
- <script lang="ts">
2
- import { Button, Chip, Icon } from '../../atoms/index.js';
3
- import Pagination from '../../molecules/Pagination/Pagination.svelte';
4
-
5
- type SortDirection = 'asc' | 'desc' | null;
6
-
7
- export type ColumnDef<T> = {
8
- key: keyof T;
9
- label: string;
10
- };
11
-
12
- type Props<T extends { id: string | number }> = {
13
- data: T[];
14
- columns: ColumnDef<T>[];
15
- tagColumn?: keyof T;
16
- idKey?: keyof T;
17
- showCheckbox?: boolean;
18
- onSelectionChange?: (ids: (string | number)[]) => void;
19
- };
20
-
21
- let {
22
- data = [],
23
- columns = [],
24
- tagColumn,
25
- idKey = 'id',
26
- showCheckbox = true,
27
- onSelectionChange
28
- }: Props<any> = $props();
29
-
30
- let sortKey: string | null = $state(null);
31
- let sortDir: SortDirection = $state(null);
32
- let selected: Set<string | number> = $state(new Set());
33
- let columnFilters: Record<string, string> = $state({});
34
-
35
- const tagOptions = $derived(() => {
36
- if (!tagColumn) return [];
37
- return [...new Set(data.map((row) => String(row[tagColumn])))];
38
- });
39
-
40
- let activeTags: Set<string> = $state(new Set());
41
-
42
- const toggleTag = (value: string) => {
43
- const next = new Set(activeTags);
44
- next.has(value) ? next.delete(value) : next.add(value);
45
- activeTags = next;
46
- };
47
-
48
- const filtered = $derived(() => {
49
- return data.filter((row) => {
50
- const passesTag = activeTags.size === 0 || activeTags.has(String(row[tagColumn!]));
51
-
52
- const passesColumns = columns.every((col) => {
53
- const filterVal = columnFilters[String(col.key)];
54
- if (!filterVal) return true;
55
- return String(row[col.key]).toLowerCase().includes(filterVal.toLowerCase());
56
- });
57
-
58
- return passesTag && passesColumns;
59
- });
60
- });
61
-
62
- const sorted = $derived(() => {
63
- if (!sortKey || !sortDir) return filtered();
64
- return [...filtered()].sort((a, b) => {
65
- const aValue = a[sortKey!];
66
- const bValue = b[sortKey!];
67
- if (typeof aValue === 'number') return sortDir === 'asc' ? aValue - bValue : bValue - aValue;
68
- return sortDir === 'asc'
69
- ? String(aValue).localeCompare(String(bValue))
70
- : String(bValue).localeCompare(String(aValue));
71
- });
72
- });
73
-
74
- const paginated = $derived(() => {
75
- const start = (pagination.currentPage - 1) * pagination.pageSize;
76
- const end = start + pagination.pageSize;
77
- return sorted().slice(start, end);
78
- });
79
-
80
- $effect(() => {
81
- pagination.totalPages = Math.ceil(filtered().length / pagination.pageSize);
82
- if (pagination.currentPage > pagination.totalPages) {
83
- pagination.currentPage = 1;
84
- }
85
- });
86
-
87
- const allSelected = $derived(selected.size === data.length && data.length > 0);
88
- const someSelected = $derived(selected.size > 0 && !allSelected);
89
-
90
- const handleSort = (key: string) => {
91
- if (sortKey !== key) {
92
- sortKey = key;
93
- sortDir = 'asc';
94
- } else if (sortDir === 'asc') {
95
- sortDir = 'desc';
96
- } else if (sortDir === 'desc') {
97
- sortKey = null;
98
- sortDir = null;
99
- }
100
- };
101
-
102
- const toggleRow = (id: string | number) => {
103
- const next = new Set(selected);
104
- next.has(id) ? next.delete(id) : next.add(id);
105
- selected = next;
106
- onSelectionChange?.(Array.from(next));
107
- };
108
-
109
- const toggleAll = () => {
110
- if (allSelected) {
111
- selected = new Set();
112
- onSelectionChange?.([]);
113
- } else {
114
- selected = new Set(data.map((r) => r[idKey]));
115
- onSelectionChange?.(Array.from(selected));
116
- }
117
- };
118
-
119
- const setIndeterminate = (el: HTMLInputElement) => {
120
- $effect(() => {
121
- el.indeterminate = someSelected;
122
- });
123
- };
124
-
125
- let pagination = $state({
126
- totalPages: 10,
127
- pageSize: 5,
128
- currentPage: 1,
129
- loading: false
130
- });
131
-
132
- const goToPage = (page: number) => {
133
- pagination.currentPage = page;
134
- };
135
-
136
- const pageSizeChange = (size: number) => {
137
- pagination.pageSize = size;
138
- pagination.currentPage = 1;
139
- };
140
- </script>
141
-
142
- <!-- @component
143
- ```Svelte
144
- <TableBasic
145
- data={[{ "customID": "...", "otherProperty": "..." }]}
146
- tagColumn="name"
147
- idKey="customID"
148
- showCheckbox
149
- onSelectionChange={onSelectionChange}
150
- />
151
- ```
152
- - `data`: Object[]
153
- - `tagColumn?`: string
154
- - `idKey?`: string
155
- - `showCheckbox?`: boolean
156
- - `onSelectionChange`: () => void
157
- -->
158
-
159
- <div class="do-table do-table-card">
160
- {#if tagColumn}
161
- <section class="do-table__header">
162
- <div class="do-table__header__tags">
163
- <h5>
164
- {columns.find((t) => tagColumn === t.key)?.label}:
165
- </h5>
166
- {#each tagOptions() as value}
167
- <Button
168
- label={value}
169
- ariaLabel={value}
170
- rounded
171
- variant={activeTags.has(value) ? 'do-btn-accent' : 'do-btn-primary'}
172
- onClick={() => toggleTag(value)}
173
- />
174
- {/each}
175
- </div>
176
- </section>
177
- {/if}
178
-
179
- <section class="do-table-wrapper">
180
- <table class="do-table__content">
181
- <thead>
182
- <tr>
183
- {#if showCheckbox}
184
- <th class="col-check">
185
- <input
186
- type="checkbox"
187
- class="do-checkbox"
188
- checked={allSelected}
189
- use:setIndeterminate
190
- onchange={toggleAll}
191
- />
192
- </th>
193
- {/if}
194
- {#each columns as col}
195
- <th
196
- class="do-table__content__th"
197
- class:sort-active={sortKey === col.key}
198
- onclick={() => handleSort(String(col.key))}
199
- >
200
- <span>{col.label}</span>
201
- {#if sortKey === col.key}
202
- <span
203
- class="do-table__content__th__sort {sortDir === 'asc'
204
- ? ''
205
- : 'do-table__content__th__sort--up'}"
206
- >
207
- <Icon name="icon-chevron-down" />
208
- </span>
209
- {:else}
210
- <Icon name="icon-chevron-up-down" />
211
- {/if}
212
- </th>
213
- {/each}
214
- </tr>
215
-
216
- <!--filtros x columna -->
217
- <tr class="do-table__content__filters">
218
- {#if showCheckbox}
219
- <th class="col-check"></th>
220
- {/if}
221
- {#each columns as col}
222
- <th class="do-table__content__th-filter">
223
- <input
224
- type="text"
225
- class="do-table__content__filter-input do-input"
226
- placeholder="Buscar..."
227
- value={columnFilters[String(col.key)] ?? ''}
228
- oninput={(e) => {
229
- columnFilters = {
230
- ...columnFilters,
231
- [String(col.key)]: (e.target as HTMLInputElement).value
232
- };
233
- }}
234
- onclick={(e) => e.stopPropagation()}
235
- />
236
- </th>
237
- {/each}
238
- </tr>
239
- </thead>
240
-
241
- <tbody>
242
- {#each paginated() as row (row[idKey])}
243
- {@const isSelected = selected.has(row[idKey])}
244
- <tr class="do-row" class:selected={isSelected}>
245
- {#if showCheckbox}
246
- <td class="col-check">
247
- <input
248
- type="checkbox"
249
- class="do-checkbox"
250
- checked={isSelected}
251
- onchange={() => toggleRow(row[idKey])}
252
- />
253
- </td>
254
- {/if}
255
- {#each columns as col}
256
- <td>{row[col.key]}</td>
257
- {/each}
258
- </tr>
259
- {/each}
260
- </tbody>
261
- </table>
262
- </section>
263
-
264
- <section class="do-table__footer">
265
- <div class="do-table__footer__left">
266
- <span>
267
- {filtered().length === data.length
268
- ? `${data.length} registros`
269
- : `${filtered().length} de ${data.length} registros`}
270
- </span>
271
- {#if selected.size > 0}
272
- <span class="selected-count"
273
- >{selected.size} seleccionado{selected.size > 1 ? 's' : ''}</span
274
- >
275
- {/if}
276
- {#if sortKey}
277
- <span class="sort-label">
278
- Ordenado por
279
- <strong>{columns.find((c) => c.key === sortKey)?.label}</strong>
280
- {sortDir === 'asc' ? '↑' : '↓'}
281
- </span>
282
- {/if}
283
- </div>
284
-
285
- <div class="do-table_footer__right">
286
- <Pagination {pagination} {goToPage} {pageSizeChange} />
287
- </div>
288
- </section>
289
- </div>
1
+ <script lang="ts">
2
+ import { Button, Icon } from '../../atoms/index.js';
3
+ import type { IconNames } from '../../do-theme/index.ts';
4
+ import IconButton from '../../molecules/IconButton/IconButton.svelte';
5
+ import Pagination from '../../molecules/Pagination/Pagination.svelte';
6
+ import type {
7
+ SortDirection,
8
+ DateMode,
9
+ TagConfig,
10
+ DateConfig,
11
+ HeaderAction,
12
+ ActionColumnDef,
13
+ ColumnDef,
14
+ TableProps
15
+ } from './TableBasic.types.ts';
16
+
17
+ type Props<T extends Record<string, any>> = {
18
+ data: T[];
19
+ columns: ColumnDef<T>[];
20
+ actionColumns?: ActionColumnDef<T>[];
21
+ tagConfig?: TagConfig<T>;
22
+ dateConfig?: DateConfig<T>;
23
+ idKey?: keyof T;
24
+ headerActions?: HeaderAction[];
25
+ pageSize?: number;
26
+ showCheckbox?: boolean;
27
+ onSelectionChange?: (ids: (string | number)[]) => void;
28
+ };
29
+
30
+ let {
31
+ data = [],
32
+ columns = [],
33
+ actionColumns = [],
34
+ tagConfig,
35
+ dateConfig,
36
+ idKey = 'id',
37
+ headerActions = [],
38
+ pageSize = 25,
39
+ showCheckbox = true,
40
+ onSelectionChange
41
+ }: Props<any> = $props();
42
+
43
+ let sortKey: string | null = $state(null);
44
+ let sortDir: SortDirection = $state(null);
45
+ let selected: Set<string | number> = $state(new Set());
46
+ let columnFilters: Record<string, string> = $state({});
47
+
48
+ const dateMode = $derived(dateConfig?.mode ?? 'year');
49
+ let dateFrom: string = $state('');
50
+ let dateTo: string = $state('');
51
+ const currentYear = new Date().getFullYear();
52
+ const years = Array.from({ length: 30 }, (_, i) => String(currentYear - i));
53
+
54
+ const clearDates = () => {
55
+ dateFrom = '';
56
+ dateTo = '';
57
+ };
58
+
59
+ let dateError: string = $state('');
60
+
61
+ $effect(() => {
62
+ if (dateFrom && dateTo) {
63
+ if (dateFrom > dateTo) {
64
+ dateError = 'Fecha inicio debe ser menor o igual a fecha fin';
65
+ } else {
66
+ dateError = '';
67
+ }
68
+ } else {
69
+ dateError = '';
70
+ }
71
+ });
72
+
73
+ const tagOptions = $derived(() => {
74
+ if (!tagConfig?.column) return [];
75
+ return [...new Set(data.map((row) => String(row[tagConfig?.column])))];
76
+ });
77
+
78
+ let activeTags: Set<string> = $state(new Set());
79
+
80
+ const toggleTag = (value: string) => {
81
+ const next = new Set(activeTags);
82
+ next.has(value) ? next.delete(value) : next.add(value);
83
+ activeTags = next;
84
+ };
85
+
86
+ const clearTags = () => {
87
+ activeTags = new Set();
88
+ };
89
+
90
+ const filtered = $derived(() => {
91
+ return data.filter((row) => {
92
+ const passesTag = activeTags.size === 0 || activeTags.has(String(row[tagConfig?.column!]));
93
+
94
+ const passesColumns = columns.every((col) => {
95
+ const filterVal = columnFilters[String(col.key)];
96
+ if (!filterVal) return true;
97
+ return String(row[col.key]).toLowerCase().includes(filterVal.toLowerCase());
98
+ });
99
+
100
+ const passesDate = (() => {
101
+ if (!dateConfig || (!dateFrom && !dateTo) || dateError) return true;
102
+
103
+ const rawVal = String(row[dateConfig.column]);
104
+
105
+ if (dateMode === 'year') {
106
+ // asume que el valor es un año "2023" o una fecha "2023-05-12"
107
+ const rowYear = rawVal.length > 4 ? new Date(rawVal).getFullYear().toString() : rawVal;
108
+ if (dateFrom && rowYear < dateFrom) return false;
109
+ if (dateTo && rowYear > dateTo) return false;
110
+ } else {
111
+ if (dateFrom && rawVal < dateFrom) return false;
112
+ if (dateTo && rawVal > dateTo) return false;
113
+ }
114
+
115
+ return true;
116
+ })();
117
+
118
+ return passesTag && passesColumns && passesDate;
119
+ });
120
+ });
121
+
122
+ const sorted = $derived(() => {
123
+ if (!sortKey || !sortDir) return filtered();
124
+ return [...filtered()].sort((a, b) => {
125
+ const aValue = a[sortKey!];
126
+ const bValue = b[sortKey!];
127
+ if (typeof aValue === 'number') return sortDir === 'asc' ? aValue - bValue : bValue - aValue;
128
+ return sortDir === 'asc'
129
+ ? String(aValue).localeCompare(String(bValue))
130
+ : String(bValue).localeCompare(String(aValue));
131
+ });
132
+ });
133
+
134
+ const paginated = $derived(() => {
135
+ const start = (pagination.currentPage - 1) * pagination.pageSize;
136
+ const end = start + pagination.pageSize;
137
+ return sorted().slice(start, end);
138
+ });
139
+
140
+ $effect(() => {
141
+ pagination.totalPages = Math.ceil(filtered().length / pagination.pageSize);
142
+ if (pagination.currentPage > pagination.totalPages) {
143
+ pagination.currentPage = 1;
144
+ }
145
+ });
146
+
147
+ const allSelected = $derived(selected.size === data.length && data.length > 0);
148
+ const someSelected = $derived(selected.size > 0 && !allSelected);
149
+
150
+ const handleSort = (key: string) => {
151
+ if (sortKey !== key) {
152
+ sortKey = key;
153
+ sortDir = 'asc';
154
+ } else if (sortDir === 'asc') {
155
+ sortDir = 'desc';
156
+ } else if (sortDir === 'desc') {
157
+ sortKey = null;
158
+ sortDir = null;
159
+ }
160
+ };
161
+
162
+ const toggleRow = (id: string | number) => {
163
+ const next = new Set(selected);
164
+ next.has(id) ? next.delete(id) : next.add(id);
165
+ selected = next;
166
+ onSelectionChange?.(Array.from(next));
167
+ };
168
+
169
+ const toggleAll = () => {
170
+ if (allSelected) {
171
+ selected = new Set();
172
+ onSelectionChange?.([]);
173
+ } else {
174
+ selected = new Set(data.map((r) => r[idKey]));
175
+ onSelectionChange?.(Array.from(selected));
176
+ }
177
+ };
178
+
179
+ const setIndeterminate = (el: HTMLInputElement) => {
180
+ $effect(() => {
181
+ el.indeterminate = someSelected;
182
+ });
183
+ };
184
+
185
+ let pagination = $state({
186
+ totalPages: 10,
187
+ pageSize: 25,
188
+ currentPage: 1,
189
+ loading: false
190
+ });
191
+
192
+ const goToPage = (page: number) => {
193
+ pagination.currentPage = page;
194
+ };
195
+
196
+ const pageSizeChange = (size: number) => {
197
+ pagination.pageSize = size;
198
+ pagination.currentPage = 1;
199
+ };
200
+
201
+ let columnName = columns.find((c) => c.key === tagConfig?.column)?.label;
202
+ </script>
203
+
204
+ <div class="do-table">
205
+ <section class="do-table__header">
206
+ {#if tagConfig?.column}
207
+ <div class="do-table__header__tags">
208
+ {#if tagConfig.label}
209
+ <Button
210
+ label={tagConfig.label}
211
+ ariaLabel="Ver todos"
212
+ rounded
213
+ variant={activeTags.size === 0 ? 'do-btn-accent' : 'do-btn-primary'}
214
+ onClick={clearTags}
215
+ />
216
+ {:else}
217
+ <p>{columnName}:</p>
218
+ {/if}
219
+ {#each tagOptions() as value}
220
+ <Button
221
+ label={value}
222
+ ariaLabel={value}
223
+ rounded
224
+ variant={activeTags.has(value) ? 'do-btn-accent' : 'do-btn-primary'}
225
+ onClick={() => toggleTag(value)}
226
+ />
227
+ {/each}
228
+ </div>
229
+ {/if}
230
+
231
+ {#if dateConfig}
232
+ <div class="do-table__header__dates">
233
+ <div class="do-table__date-range">
234
+ <h5>Rango fechas</h5>
235
+ <div class="do-table__date-fields">
236
+ <div class="do-table__date-fields__field">
237
+ {#if dateMode === 'year'}
238
+ <select bind:value={dateFrom} class="do-select">
239
+ <option value="">Desde</option>
240
+ {#each years as year}
241
+ <option value={year}>{year}</option>
242
+ {/each}
243
+ </select>
244
+ {:else}
245
+ <input type="date" bind:value={dateFrom} class="do-input" />
246
+ {/if}
247
+ </div>
248
+
249
+ <div class="do-table__date-fields__field">
250
+ {#if dateMode === 'year'}
251
+ <select bind:value={dateTo} class="do-select">
252
+ <option value="">Hasta</option>
253
+ {#each years as year}
254
+ <option value={year}>{year}</option>
255
+ {/each}
256
+ </select>
257
+ {:else}
258
+ <input type="date" bind:value={dateTo} class="do-input" />
259
+ {/if}
260
+ </div>
261
+
262
+ {#if dateError}
263
+ <span class="do-table__date-error">{dateError}</span>
264
+ {/if}
265
+ </div>
266
+
267
+ {#if dateFrom || dateTo}
268
+ <IconButton
269
+ iconName="icon-close"
270
+ ariaLabel="limpiar fechas"
271
+ variant="do-btn-secondary"
272
+ circle
273
+ onClick={clearDates}
274
+ />
275
+ {/if}
276
+ </div>
277
+ </div>
278
+ {/if}
279
+
280
+ {#if headerActions.length}
281
+ <div class="do-table__actions">
282
+ {#each headerActions as action}
283
+ <IconButton
284
+ iconName={action.icon}
285
+ ariaLabel={action.label}
286
+ label={action.label}
287
+ variant="do-btn-accent"
288
+ onClick={action.onClick}
289
+ />
290
+ {/each}
291
+ </div>
292
+ {/if}
293
+ </section>
294
+
295
+ <section class="do-table-wrapper">
296
+ <table class="do-table__content">
297
+ <thead>
298
+ <tr>
299
+ {#if showCheckbox}
300
+ <th class="col-check">
301
+ <input
302
+ type="checkbox"
303
+ class="do-checkbox"
304
+ checked={allSelected}
305
+ use:setIndeterminate
306
+ onchange={toggleAll}
307
+ />
308
+ </th>
309
+ {/if}
310
+ {#each columns as col}
311
+ <th
312
+ class="do-table__content__th"
313
+ class:sort-active={sortKey === col.key}
314
+ onclick={() => handleSort(String(col.key))}
315
+ >
316
+ <span>{col.label}</span>
317
+ {#if sortKey === col.key}
318
+ <span
319
+ class="do-table__content__th__sort {sortDir === 'asc'
320
+ ? ''
321
+ : 'do-table__content__th__sort--up'}"
322
+ >
323
+ <Icon name="icon-chevron-down" />
324
+ </span>
325
+ {:else}
326
+ <Icon name="icon-chevron-up-down" />
327
+ {/if}
328
+ </th>
329
+ {/each}
330
+ {#each actionColumns as col}
331
+ <th class="do-table__content__th">
332
+ {col.showHeader !== false ? (col.label ?? '') : ''}
333
+ </th>
334
+ {/each}
335
+ </tr>
336
+
337
+ <tr class="do-table__content__filters">
338
+ {#if showCheckbox}
339
+ <th></th>
340
+ {/if}
341
+ {#each columns as col}
342
+ <th class="do-table__content__th-filter">
343
+ <input
344
+ type="text"
345
+ class="do-table__content__filter-input do-input"
346
+ placeholder="Buscar..."
347
+ value={columnFilters[String(col.key)] ?? ''}
348
+ oninput={(e) => {
349
+ columnFilters = {
350
+ ...columnFilters,
351
+ [String(col.key)]: (e.target as HTMLInputElement).value
352
+ };
353
+ }}
354
+ onclick={(e) => e.stopPropagation()}
355
+ />
356
+ </th>
357
+ {/each}
358
+ {#each actionColumns as _}
359
+ <th></th>
360
+ {/each}
361
+ </tr>
362
+ </thead>
363
+
364
+ <tbody>
365
+ {#each paginated() as row (row[idKey])}
366
+ {@const isSelected = selected.has(row[idKey])}
367
+ <tr class="do-row" class:selected={isSelected}>
368
+ {#if showCheckbox}
369
+ <td class="col-check">
370
+ <input
371
+ type="checkbox"
372
+ class="do-checkbox"
373
+ checked={isSelected}
374
+ onchange={() => toggleRow(row[idKey])}
375
+ />
376
+ </td>
377
+ {/if}
378
+ {#each columns as col}
379
+ <td>{row[col.key]}</td>
380
+ {/each}
381
+ {#each actionColumns as col}
382
+ <td class="do-table__content__th-action">
383
+ <IconButton
384
+ iconName={col.icon}
385
+ ariaLabel="ver fila"
386
+ title={col.label}
387
+ square
388
+ onClick={() => col.onClick(row)}
389
+ />
390
+ </td>
391
+ {/each}
392
+ </tr>
393
+ {/each}
394
+ </tbody>
395
+ </table>
396
+ </section>
397
+
398
+ <section class="do-table__footer">
399
+ <div class="do-table__footer__left">
400
+ <span>
401
+ {filtered().length === data.length
402
+ ? `${data.length} registros`
403
+ : `${filtered().length} de ${data.length} registros`}
404
+ </span>
405
+ {#if selected.size > 0}
406
+ <span class="selected-count">
407
+ {selected.size} seleccionado{selected.size > 1 ? 's' : ''}
408
+ </span>
409
+ {/if}
410
+ {#if sortKey}
411
+ <span class="sort-label">
412
+ Ordenado por
413
+ <strong>{columns.find((c) => c.key === sortKey)?.label}</strong>
414
+ {sortDir === 'asc' ? '↑' : '↓'}
415
+ </span>
416
+ {/if}
417
+ </div>
418
+ <div class="do-table_footer__right">
419
+ <Pagination {pagination} {goToPage} {pageSizeChange} />
420
+ </div>
421
+ </section>
422
+ </div>
package/dist/organisms/TableBasic/TableBasic.svelte.d.ts CHANGED
@@ -1,33 +1,16 @@
1
- export type ColumnDef<T> = {
2
- key: keyof T;
3
- label: string;
4
- };
5
- type Props<T extends {
6
- id: string | number;
7
- }> = {
1
+ import type { TagConfig, DateConfig, HeaderAction, ActionColumnDef, ColumnDef } from './TableBasic.types.ts';
2
+ type Props<T extends Record<string, any>> = {
8
3
  data: T[];
9
4
  columns: ColumnDef<T>[];
10
- tagColumn?: keyof T;
5
+ actionColumns?: ActionColumnDef<T>[];
6
+ tagConfig?: TagConfig<T>;
7
+ dateConfig?: DateConfig<T>;
11
8
  idKey?: keyof T;
9
+ headerActions?: HeaderAction[];
10
+ pageSize?: number;
12
11
  showCheckbox?: boolean;
13
12
  onSelectionChange?: (ids: (string | number)[]) => void;
14
13
  };
15
- /**
16
- * ```Svelte
17
- * <TableBasic
18
- * data={[{ "customID": "...", "otherProperty": "..." }]}
19
- * tagColumn="name"
20
- * idKey="customID"
21
- * showCheckbox
22
- * onSelectionChange={onSelectionChange}
23
- * />
24
- * ```
25
- * - `data`: Object[]
26
- * - `tagColumn?`: string
27
- * - `idKey?`: string
28
- * - `showCheckbox?`: boolean
29
- * - `onSelectionChange`: () => void
30
- */
31
14
  declare const TableBasic: import("svelte").Component<Props<any>, {}, "">;
32
15
  type TableBasic = ReturnType<typeof TableBasic>;
33
16
  export default TableBasic;
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":"AASC,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IAC1B,GAAG,EAAE,MAAM,CAAC,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,IAAI;IAC/C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AAyOH;;;;;;;;;;;;;;;GAeG;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;AA+VH,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 ADDED
@@ -0,0 +1,40 @@
1
+ import type { IconNames } from "../../do-theme/index.ts";
2
+ export type SortDirection = 'asc' | 'desc' | null;
3
+ export type DateMode = 'year' | 'date';
4
+ export type TagConfig<T> = {
5
+ column: keyof T;
6
+ label: string;
7
+ };
8
+ export type DateConfig<T> = {
9
+ column: keyof T;
10
+ mode?: DateMode;
11
+ };
12
+ export type HeaderAction = {
13
+ icon: IconNames;
14
+ label: string;
15
+ onClick: () => void;
16
+ };
17
+ export type ActionColumnDef<T> = {
18
+ key: string;
19
+ icon: IconNames;
20
+ label?: string;
21
+ showHeader?: boolean;
22
+ onClick: (row: T) => void;
23
+ };
24
+ export type ColumnDef<T> = {
25
+ key: keyof T;
26
+ label: string;
27
+ };
28
+ export type TableProps<T extends Record<string, any>> = {
29
+ data: T[];
30
+ columns: ColumnDef<T>[];
31
+ actionColumns?: ActionColumnDef<T>[];
32
+ tagConfig?: TagConfig<T>;
33
+ dateConfig?: DateConfig<T>;
34
+ idKey?: keyof T;
35
+ headerActions?: HeaderAction[];
36
+ pageSize?: number;
37
+ showCheckbox?: boolean;
38
+ onSelectionChange?: (ids: (string | number)[]) => void;
39
+ };
40
+ //# sourceMappingURL=TableBasic.types.d.ts.map
package/dist/organisms/TableBasic/TableBasic.types.d.ts.map ADDED
@@ -0,0 +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,MAAM,EAAE,MAAM,CAAC,CAAC;IAChB,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;CACvB,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;CACjB,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/dist/organisms/TableBasic/TableBasic.types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "do-ui-design-system",
3
- "version": "1.1.13",
3
+ "version": "1.1.15",
4
4
  "description": "Design system en Svelte + CSS + Storybook",
5
5
  "author": "Data Observatory",
6
6
  "license": "MIT",