do-ui-design-system 1.1.5 → 1.1.6
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/Button/Button.svelte +63 -21
- package/dist/atoms/Button/Button.svelte.d.ts +8 -0
- package/dist/atoms/Button/Button.svelte.d.ts.map +1 -1
- package/dist/atoms/Button/iProps.d.ts +7 -0
- package/dist/atoms/Button/iProps.d.ts.map +1 -1
- package/dist/do-theme/button.css +8 -1
- package/dist/do-theme/font.css +5 -2
- package/package.json +1 -1
|
@@ -21,8 +21,15 @@
|
|
|
21
21
|
customClass = '',
|
|
22
22
|
square,
|
|
23
23
|
noBorder,
|
|
24
|
+
noHover,
|
|
25
|
+
anchor,
|
|
26
|
+
target,
|
|
27
|
+
download,
|
|
28
|
+
rel,
|
|
29
|
+
referrerpolicy,
|
|
30
|
+
href,
|
|
24
31
|
data,
|
|
25
|
-
children
|
|
32
|
+
children
|
|
26
33
|
}: {
|
|
27
34
|
label?: iProps['label'];
|
|
28
35
|
type?: iProps['type'];
|
|
@@ -42,8 +49,15 @@
|
|
|
42
49
|
customClass?: iProps['customClass'];
|
|
43
50
|
square?: iProps['square'];
|
|
44
51
|
noBorder?: iProps['noBorder'];
|
|
52
|
+
noHover?: iProps['noHover'];
|
|
53
|
+
anchor?: iProps['anchor'];
|
|
54
|
+
target?: iProps['target'];
|
|
55
|
+
download?: iProps['download'];
|
|
56
|
+
rel?: iProps['rel'];
|
|
57
|
+
referrerpolicy?: iProps['referrerpolicy'];
|
|
45
58
|
// dataTestId?: iProps['dataTestId'];
|
|
46
59
|
data?: iProps['data'];
|
|
60
|
+
href?: iProps['href'];
|
|
47
61
|
children?: Snippet;
|
|
48
62
|
} = $props();
|
|
49
63
|
|
|
@@ -88,24 +102,52 @@
|
|
|
88
102
|
- `customStyles?`: any CSS style
|
|
89
103
|
- `noBorder`?: boolean
|
|
90
104
|
- `data?`: {[key: string]: string}
|
|
105
|
+
- `anchor?`: boolean (use `<a>` tag instead of `<button>`)
|
|
91
106
|
-->
|
|
92
|
-
|
|
93
|
-
<
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
</
|
|
107
|
+
{#if anchor}
|
|
108
|
+
<a
|
|
109
|
+
{type}
|
|
110
|
+
aria-label={ariaLabel}
|
|
111
|
+
{title}
|
|
112
|
+
aria-disabled={ariaDisabled}
|
|
113
|
+
{id}
|
|
114
|
+
class={['do-btn', `${variant}`, `${size}`, `${customClass}`].join(' ')}
|
|
115
|
+
class:no-hover={noHover}
|
|
116
|
+
style={mergedStyles}
|
|
117
|
+
{...data}
|
|
118
|
+
{target}
|
|
119
|
+
{download}
|
|
120
|
+
{rel}
|
|
121
|
+
{referrerpolicy}
|
|
122
|
+
{href}
|
|
123
|
+
>
|
|
124
|
+
{@render children?.()}
|
|
125
|
+
{#if label}
|
|
126
|
+
<span>{label}</span>
|
|
127
|
+
{/if}
|
|
128
|
+
<i class="icon-loading do-loader" style={loading ? 'display:inline-block;' : 'display:none;'}
|
|
129
|
+
></i>
|
|
130
|
+
</a>
|
|
131
|
+
{:else}
|
|
132
|
+
<button
|
|
133
|
+
{type}
|
|
134
|
+
aria-label={ariaLabel}
|
|
135
|
+
onclick={onClick}
|
|
136
|
+
{disabled}
|
|
137
|
+
{title}
|
|
138
|
+
aria-disabled={ariaDisabled}
|
|
139
|
+
{name}
|
|
140
|
+
{id}
|
|
141
|
+
class={['do-btn', `${variant}`, `${size}`, `${customClass}`].join(' ')}
|
|
142
|
+
class:no-hover={noHover}
|
|
143
|
+
style={mergedStyles}
|
|
144
|
+
{...data}
|
|
145
|
+
>
|
|
146
|
+
{@render children?.()}
|
|
147
|
+
{#if label}
|
|
148
|
+
<span>{label}</span>
|
|
149
|
+
{/if}
|
|
150
|
+
<i class="icon-loading do-loader" style={loading ? 'display:inline-block;' : 'display:none;'}
|
|
151
|
+
></i>
|
|
152
|
+
</button>
|
|
153
|
+
{/if}
|
|
@@ -19,7 +19,14 @@ type $$ComponentProps = {
|
|
|
19
19
|
customClass?: iProps['customClass'];
|
|
20
20
|
square?: iProps['square'];
|
|
21
21
|
noBorder?: iProps['noBorder'];
|
|
22
|
+
noHover?: iProps['noHover'];
|
|
23
|
+
anchor?: iProps['anchor'];
|
|
24
|
+
target?: iProps['target'];
|
|
25
|
+
download?: iProps['download'];
|
|
26
|
+
rel?: iProps['rel'];
|
|
27
|
+
referrerpolicy?: iProps['referrerpolicy'];
|
|
22
28
|
data?: iProps['data'];
|
|
29
|
+
href?: iProps['href'];
|
|
23
30
|
children?: Snippet;
|
|
24
31
|
};
|
|
25
32
|
/**
|
|
@@ -43,6 +50,7 @@ type $$ComponentProps = {
|
|
|
43
50
|
* - `customStyles?`: any CSS style
|
|
44
51
|
* - `noBorder`?: boolean
|
|
45
52
|
* - `data?`: {[key: string]: string}
|
|
53
|
+
* - `anchor?`: boolean (use `<a>` tag instead of `<button>`)
|
|
46
54
|
*/
|
|
47
55
|
declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
48
56
|
type Button = ReturnType<typeof Button>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAE1C,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA4EH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
|
|
@@ -17,6 +17,13 @@ export interface iProps {
|
|
|
17
17
|
customClass?: string;
|
|
18
18
|
square?: boolean;
|
|
19
19
|
noBorder?: boolean;
|
|
20
|
+
noHover?: boolean;
|
|
21
|
+
anchor?: boolean;
|
|
22
|
+
target?: '_self' | '_blank' | '_parent' | '_top';
|
|
23
|
+
download?: '';
|
|
24
|
+
rel?: string;
|
|
25
|
+
referrerpolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
|
|
26
|
+
href?: string;
|
|
20
27
|
data?: {
|
|
21
28
|
[key: string]: string;
|
|
22
29
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EACL,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,cAAc,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,QAAQ,CAAC,EAAE,EAAE,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EACZ,aAAa,GACb,4BAA4B,GAC5B,QAAQ,GACR,0BAA0B,GAC1B,aAAa,GACb,iCAAiC,GACjC,YAAY,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACjC"}
|
package/dist/do-theme/button.css
CHANGED
|
@@ -113,6 +113,13 @@
|
|
|
113
113
|
background-color: var(--do-transparent);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
+
.do-btn-link:not(.no-hover):hover,
|
|
117
|
+
.do-btn-link:not(.no-hover):focus {
|
|
118
|
+
color: var(--do-transparent);
|
|
119
|
+
border: 1px solid var(--do-transparent);
|
|
120
|
+
background-color: var(--do-transparent);
|
|
121
|
+
}
|
|
122
|
+
|
|
116
123
|
.do-btn-link-accent {
|
|
117
124
|
border-color: var(--do-transparent);
|
|
118
125
|
background-color: var(--do-transparent);
|
|
@@ -172,4 +179,4 @@
|
|
|
172
179
|
100% {
|
|
173
180
|
transform: rotate(360deg);
|
|
174
181
|
}
|
|
175
|
-
}
|
|
182
|
+
}
|
package/dist/do-theme/font.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* Inter y Space Grotesk están importados al final de este documento css
|
|
2
2
|
Estas fuentes están descargadas en la carpeta fonts*/
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
font-family: 'Inter', sans-serif
|
|
4
|
+
body {
|
|
5
|
+
font-family: 'Inter', sans-serif;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
.do-text-grotesk {
|
|
@@ -22,7 +22,10 @@ h5,
|
|
|
22
22
|
h6,
|
|
23
23
|
p,
|
|
24
24
|
ol,
|
|
25
|
+
span,
|
|
26
|
+
label,
|
|
25
27
|
ul {
|
|
28
|
+
font-family: 'Inter', sans-serif;
|
|
26
29
|
color: var(--do-text-base);
|
|
27
30
|
}
|
|
28
31
|
|