do-ui-design-system 1.1.19 → 1.1.20
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/dist/atoms/Toggle/Toggle.svelte +100 -0
- package/dist/atoms/Toggle/Toggle.svelte.d.ts +9 -0
- package/dist/atoms/Toggle/Toggle.svelte.d.ts.map +1 -0
- package/dist/atoms/index.d.ts +2 -1
- package/dist/atoms/index.d.ts.map +1 -1
- package/dist/atoms/index.js +2 -1
- package/dist/do-theme/table.css +10 -9
- package/dist/organisms/TableBasic/TableBasic.svelte +18 -20
- package/dist/organisms/TableBasic/TableBasic.svelte.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
let {
|
|
3
|
+
checked = $bindable(false),
|
|
4
|
+
disabled = false,
|
|
5
|
+
label = ''
|
|
6
|
+
}: {
|
|
7
|
+
checked?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
label?: string;
|
|
10
|
+
} = $props();
|
|
11
|
+
|
|
12
|
+
const toggle = () => {
|
|
13
|
+
if (!disabled) {
|
|
14
|
+
checked = !checked;
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<label class="do-toggle do-toggle--xs" class:disabled>
|
|
20
|
+
<button
|
|
21
|
+
type="button"
|
|
22
|
+
aria-label="sens-option"
|
|
23
|
+
onclick={toggle}
|
|
24
|
+
{disabled}
|
|
25
|
+
class="do-toggle-track"
|
|
26
|
+
class:checked
|
|
27
|
+
>
|
|
28
|
+
<span class="do-toggle-thumb" class:checked></span>
|
|
29
|
+
</button>
|
|
30
|
+
{#if label}
|
|
31
|
+
<span class="do-toggle-text">{label}</span>
|
|
32
|
+
{/if}
|
|
33
|
+
</label>
|
|
34
|
+
|
|
35
|
+
<style>
|
|
36
|
+
.do-toggle {
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
gap: 0.75rem;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
|
|
42
|
+
&.disabled {
|
|
43
|
+
opacity: 0.5;
|
|
44
|
+
cursor: not-allowed;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.do-toggle-track {
|
|
48
|
+
position: relative;
|
|
49
|
+
height: 1.25rem;
|
|
50
|
+
width: 2.5rem;
|
|
51
|
+
border-radius: 9999px;
|
|
52
|
+
background-color: #52525b; /* zinc-600 */
|
|
53
|
+
border: none;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
transition: background-color 200ms;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.do-toggle-track.checked {
|
|
59
|
+
background-color: #2563eb; /* blue-600 */
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.do-toggle-thumb {
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 0.125rem;
|
|
65
|
+
left: 0.125rem;
|
|
66
|
+
height: 1rem;
|
|
67
|
+
width: 1rem;
|
|
68
|
+
border-radius: 9999px;
|
|
69
|
+
background-color: white;
|
|
70
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
71
|
+
transition: transform 200ms;
|
|
72
|
+
transform: translateX(0);
|
|
73
|
+
display: block;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.do-toggle-thumb.checked {
|
|
77
|
+
transform: translateX(1.25rem);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.do-toggle-text {
|
|
81
|
+
font-size: 0.875rem;
|
|
82
|
+
color: #e4e4e7; /* zinc-200 */
|
|
83
|
+
}
|
|
84
|
+
&.do-toggle--xs {
|
|
85
|
+
.do-toggle-track {
|
|
86
|
+
height: 1rem;
|
|
87
|
+
width: 1.8rem;
|
|
88
|
+
}
|
|
89
|
+
.do-toggle-thumb {
|
|
90
|
+
top: 0.1rem;
|
|
91
|
+
left: 0.15rem;
|
|
92
|
+
height: 0.75rem;
|
|
93
|
+
width: 0.75rem;
|
|
94
|
+
}
|
|
95
|
+
.do-toggle-thumb.checked {
|
|
96
|
+
transform: translateX(0.8rem);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
</style>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type $$ComponentProps = {
|
|
2
|
+
checked?: boolean;
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
label?: string;
|
|
5
|
+
};
|
|
6
|
+
declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "checked">;
|
|
7
|
+
type Toggle = ReturnType<typeof Toggle>;
|
|
8
|
+
export default Toggle;
|
|
9
|
+
//# sourceMappingURL=Toggle.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGC,KAAK,gBAAgB,GAAI;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AA4BH,QAAA,MAAM,MAAM,6DAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
|
package/dist/atoms/index.d.ts
CHANGED
|
@@ -3,5 +3,6 @@ import Button from './Button/Button.svelte';
|
|
|
3
3
|
import Card from './Card/Card.svelte';
|
|
4
4
|
import Chip from './Chip/Chip.svelte';
|
|
5
5
|
import Icon from './Icons/Icon.svelte';
|
|
6
|
-
|
|
6
|
+
import Toggle from './Toggle/Toggle.svelte';
|
|
7
|
+
export { Card, Chip, Badge, Button, Toggle, Icon };
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,IAAI,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC"}
|
package/dist/atoms/index.js
CHANGED
|
@@ -3,4 +3,5 @@ import Button from './Button/Button.svelte';
|
|
|
3
3
|
import Card from './Card/Card.svelte';
|
|
4
4
|
import Chip from './Chip/Chip.svelte';
|
|
5
5
|
import Icon from './Icons/Icon.svelte';
|
|
6
|
-
|
|
6
|
+
import Toggle from './Toggle/Toggle.svelte';
|
|
7
|
+
export { Card, Chip, Badge, Button, Toggle, Icon };
|
package/dist/do-theme/table.css
CHANGED
|
@@ -22,25 +22,26 @@
|
|
|
22
22
|
display: flex;
|
|
23
23
|
align-items: flex-end;
|
|
24
24
|
gap: 0.75rem;
|
|
25
|
-
flex-wrap: wrap;
|
|
26
25
|
}
|
|
27
26
|
|
|
28
27
|
.do-table__partial-match {
|
|
29
|
-
position: absolute;
|
|
30
|
-
white-space: nowrap;
|
|
31
|
-
left: 4px;
|
|
32
|
-
bottom: -0.8rem;
|
|
33
28
|
display: inline-flex;
|
|
29
|
+
gap: 0.3rem;
|
|
34
30
|
align-items: center;
|
|
35
31
|
font-size: 0.8rem;
|
|
32
|
+
|
|
33
|
+
h5 {
|
|
34
|
+
max-width: 10rem;
|
|
35
|
+
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.do-table__header__right__date-range {
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
background-color: #1e1e1e;
|
|
42
|
+
border-radius: 8px;
|
|
43
|
+
gap: 1rem;
|
|
44
|
+
padding: 0.5rem 1rem;
|
|
44
45
|
position: relative;
|
|
45
46
|
|
|
46
47
|
h5 {
|
|
@@ -52,7 +53,6 @@
|
|
|
52
53
|
display: flex;
|
|
53
54
|
align-items: center;
|
|
54
55
|
gap: 0.5rem;
|
|
55
|
-
flex-wrap: wrap;
|
|
56
56
|
position: relative;
|
|
57
57
|
|
|
58
58
|
.do-table__date-fields__field {
|
|
@@ -189,6 +189,7 @@
|
|
|
189
189
|
|
|
190
190
|
input {
|
|
191
191
|
width: 90%;
|
|
192
|
+
background-color: #222225;
|
|
192
193
|
|
|
193
194
|
&::placeholder {
|
|
194
195
|
color: #c8c8c8;
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
- `onSelectionChange?`: `(ids: (string | number)[]) => void` - callback fired when row selection changes
|
|
26
26
|
-->
|
|
27
27
|
<script lang="ts">
|
|
28
|
-
import { Button, Icon } from '../../atoms/index.js';
|
|
28
|
+
import { Button, Icon, Toggle } from '../../atoms/index.js';
|
|
29
29
|
import type { IconNames } from '../../do-theme/index.ts';
|
|
30
30
|
import IconButton from '../../molecules/IconButton/IconButton.svelte';
|
|
31
31
|
import Pagination from '../../molecules/Pagination/Pagination.svelte';
|
|
@@ -140,8 +140,8 @@
|
|
|
140
140
|
if (dateFrom && to < dateFrom) return false;
|
|
141
141
|
} else {
|
|
142
142
|
// estricto: inicio y fin deben estar dentro del rango del filtro
|
|
143
|
-
if (dateFrom && from
|
|
144
|
-
if (dateTo && to
|
|
143
|
+
if (dateFrom && from > dateFrom) return false;
|
|
144
|
+
if (dateTo && to < dateTo) return false;
|
|
145
145
|
}
|
|
146
146
|
} else if (dateConfig.columnFrom) {
|
|
147
147
|
const from = normalize(String(row[dateConfig.columnFrom]));
|
|
@@ -291,6 +291,8 @@
|
|
|
291
291
|
{/if}
|
|
292
292
|
</div>
|
|
293
293
|
|
|
294
|
+
<Icon name="icon-arrow" size="0.7rem" />
|
|
295
|
+
|
|
294
296
|
<div class="do-table__date-fields__field">
|
|
295
297
|
{#if dateMode === 'year'}
|
|
296
298
|
<select bind:value={dateTo} class="do-select">
|
|
@@ -303,33 +305,29 @@
|
|
|
303
305
|
<input type="date" bind:value={dateTo} class="do-input" />
|
|
304
306
|
{/if}
|
|
305
307
|
</div>
|
|
308
|
+
|
|
309
|
+
{#if dateFrom || dateTo}
|
|
310
|
+
<IconButton
|
|
311
|
+
iconName="icon-close"
|
|
312
|
+
ariaLabel="limpiar fechas"
|
|
313
|
+
variant="do-btn-link"
|
|
314
|
+
size="do-btn-sm"
|
|
315
|
+
circle
|
|
316
|
+
onClick={clearDates}
|
|
317
|
+
/>
|
|
318
|
+
{/if}
|
|
306
319
|
</div>
|
|
307
320
|
</div>
|
|
308
321
|
{#if dateConfig?.columnFrom && dateConfig?.columnTo && !dateError}
|
|
309
322
|
<label class="do-table__partial-match">
|
|
310
|
-
<
|
|
311
|
-
|
|
312
|
-
role="switch"
|
|
313
|
-
class="do-switch"
|
|
314
|
-
bind:checked={partialMatch}
|
|
315
|
-
/>
|
|
316
|
-
<span>{dateConfig?.partialMatchLabel ?? 'Incluir coincidencias parciales'}</span>
|
|
323
|
+
<Toggle bind:checked={partialMatch} />
|
|
324
|
+
<h5>{dateConfig?.partialMatchLabel ?? 'Incluir coincidencias parciales'}</h5>
|
|
317
325
|
</label>
|
|
318
326
|
{/if}
|
|
319
327
|
|
|
320
328
|
{#if dateError}
|
|
321
329
|
<span class="do-table__date-error">{dateError || 'Error'}</span>
|
|
322
330
|
{/if}
|
|
323
|
-
|
|
324
|
-
{#if dateFrom || dateTo}
|
|
325
|
-
<IconButton
|
|
326
|
-
iconName="icon-close"
|
|
327
|
-
ariaLabel="limpiar fechas"
|
|
328
|
-
variant="do-btn-secondary"
|
|
329
|
-
circle
|
|
330
|
-
onClick={clearDates}
|
|
331
|
-
/>
|
|
332
|
-
{/if}
|
|
333
331
|
</div>
|
|
334
332
|
</div>
|
|
335
333
|
{/if}
|
|
@@ -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;
|
|
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;AAwYH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
|