sve-ui 0.0.2 → 0.0.3
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.
|
File without changes
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} BoxProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} BoxEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} BoxSlots */
|
|
4
|
+
export default class Box extends SvelteComponentTyped<{
|
|
5
|
+
[x: string]: never;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type BoxProps = typeof __propDef.props;
|
|
11
|
+
export type BoxEvents = typeof __propDef.events;
|
|
12
|
+
export type BoxSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponentTyped } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
[x: string]: never;
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
};
|
|
23
|
+
export {};
|
|
@@ -1,15 +1,30 @@
|
|
|
1
|
+
<!-- TO DO
|
|
2
|
+
La idea seria que reciba Padding 1, 2, 3, 4
|
|
3
|
+
Y utilizar una clase css global para que se aplique el padding
|
|
4
|
+
|
|
5
|
+
ej:
|
|
6
|
+
.padding-style-1 {
|
|
7
|
+
padding: 2px 4px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
-->
|
|
11
|
+
|
|
1
12
|
<script>export let label = "Button";
|
|
2
13
|
export let onClick = () => {
|
|
3
14
|
};
|
|
4
15
|
export let color = "blue";
|
|
5
|
-
export let size = "
|
|
16
|
+
export let size = "md";
|
|
6
17
|
export let disabled = false;
|
|
18
|
+
export let style = "";
|
|
19
|
+
export let bg = "";
|
|
20
|
+
export let p = "3";
|
|
7
21
|
let props = { ...$$restProps };
|
|
8
22
|
</script>
|
|
9
23
|
|
|
10
24
|
<button
|
|
11
|
-
class={`${props.class}
|
|
25
|
+
class={`${props.class} button padding-${p} ${color} ${size} ${style}`}
|
|
12
26
|
on:click={onClick}
|
|
27
|
+
style={`background-color: ${bg}`}
|
|
13
28
|
{disabled}
|
|
14
29
|
>
|
|
15
30
|
<slot>{label}</slot>
|
|
@@ -19,7 +34,7 @@ let props = { ...$$restProps };
|
|
|
19
34
|
.button {
|
|
20
35
|
border: none;
|
|
21
36
|
border-radius: 4px;
|
|
22
|
-
font-size:
|
|
37
|
+
font-size: 1rem;
|
|
23
38
|
font-weight: bold;
|
|
24
39
|
padding: 8px 16px;
|
|
25
40
|
cursor: pointer;
|
|
@@ -36,20 +51,45 @@ let props = { ...$$restProps };
|
|
|
36
51
|
background-color: #28a745;
|
|
37
52
|
color: #fff;
|
|
38
53
|
}
|
|
39
|
-
|
|
54
|
+
|
|
55
|
+
.xsm {
|
|
56
|
+
font-size: 8px;
|
|
57
|
+
padding: 2px 4px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.sm {
|
|
40
61
|
font-size: 12px;
|
|
41
62
|
padding: 4px 8px;
|
|
42
63
|
}
|
|
43
|
-
|
|
64
|
+
|
|
65
|
+
.md {
|
|
44
66
|
font-size: 16px;
|
|
45
67
|
padding: 8px 16px;
|
|
46
68
|
}
|
|
47
|
-
|
|
69
|
+
|
|
70
|
+
.lg {
|
|
48
71
|
font-size: 24px;
|
|
49
72
|
padding: 12px 24px;
|
|
50
73
|
}
|
|
74
|
+
|
|
75
|
+
.xl {
|
|
76
|
+
font-size: 32px;
|
|
77
|
+
padding: 16px 32px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.xxl {
|
|
81
|
+
font-size: 48px;
|
|
82
|
+
padding: 24px 48px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.xxxl {
|
|
86
|
+
font-size: 64px;
|
|
87
|
+
padding: 32px 64px;
|
|
88
|
+
}
|
|
89
|
+
|
|
51
90
|
.button:hover {
|
|
52
91
|
opacity: 0.94;
|
|
92
|
+
transition: 0.2s ease-in-out;
|
|
53
93
|
}
|
|
54
94
|
button:disabled {
|
|
55
95
|
cursor: not-allowed;
|
|
@@ -58,4 +98,20 @@ let props = { ...$$restProps };
|
|
|
58
98
|
button:disabled:hover {
|
|
59
99
|
opacity: 0.5;
|
|
60
100
|
}
|
|
101
|
+
|
|
102
|
+
.padding-1 {
|
|
103
|
+
padding: 2px 4px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.padding-2 {
|
|
107
|
+
padding: 4px 8px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.padding-3 {
|
|
111
|
+
padding: 8px 16px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.padding-4 {
|
|
115
|
+
padding: 16px 32px;
|
|
116
|
+
}
|
|
61
117
|
</style>
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
|
|
3
|
+
export type ButtonSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
|
|
2
4
|
declare const __propDef: {
|
|
3
5
|
props: {
|
|
4
6
|
[x: string]: any;
|
|
5
7
|
label?: string | undefined;
|
|
6
8
|
onClick?: (() => void) | undefined;
|
|
7
9
|
color?: string | undefined;
|
|
8
|
-
size?:
|
|
10
|
+
size?: ButtonSize | undefined;
|
|
9
11
|
disabled?: boolean | undefined;
|
|
10
12
|
};
|
|
11
13
|
events: {
|