grav-svelte 0.0.28 → 0.0.30
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.
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import './alertStyles.css';
|
|
1
2
|
export declare function Exito_Alert(titulo?: string): void;
|
|
2
3
|
export declare function Error_Alert(titulo?: string): void;
|
|
3
4
|
export declare function Confirmacion_Alert(titulo: string | undefined, texto: string | undefined, callback: () => void): Promise<void>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import Swal from 'sweetalert2';
|
|
2
|
+
import './alertStyles.css';
|
|
2
3
|
export function Exito_Alert(titulo = 'Se guardo correctamente') {
|
|
3
4
|
Swal.fire({
|
|
4
5
|
icon: 'success',
|
|
@@ -19,7 +20,7 @@ export function Error_Alert(titulo = 'Algo salió mal') {
|
|
|
19
20
|
buttonsStyling: false,
|
|
20
21
|
customClass: {
|
|
21
22
|
denyButton: 'hidden',
|
|
22
|
-
confirmButton: '
|
|
23
|
+
confirmButton: 'alert-error-button'
|
|
23
24
|
}
|
|
24
25
|
});
|
|
25
26
|
}
|
|
@@ -38,8 +39,8 @@ export function Confirmacion_Alert(titulo = 'Confirmación', texto = 'Desea guar
|
|
|
38
39
|
buttonsStyling: false,
|
|
39
40
|
customClass: {
|
|
40
41
|
denyButton: 'hidden',
|
|
41
|
-
confirmButton: '
|
|
42
|
-
cancelButton: '
|
|
42
|
+
confirmButton: 'alert-confirm-button',
|
|
43
|
+
cancelButton: 'alert-cancel-button'
|
|
43
44
|
}
|
|
44
45
|
}).then((result) => {
|
|
45
46
|
if (result.isConfirmed) {
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
.alert-confirm-button {
|
|
2
|
+
background-color: #10b981;
|
|
3
|
+
color: white;
|
|
4
|
+
font-weight: bold;
|
|
5
|
+
text-transform: uppercase;
|
|
6
|
+
font-size: 0.875rem;
|
|
7
|
+
padding: 0.75rem 1.5rem;
|
|
8
|
+
border-radius: 0.25rem;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
11
|
+
transition: all 150ms ease-in-out;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.alert-confirm-button:hover {
|
|
15
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.alert-confirm-button:focus {
|
|
19
|
+
outline: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.alert-cancel-button {
|
|
23
|
+
color: #EF4444;
|
|
24
|
+
background: transparent;
|
|
25
|
+
font-weight: bold;
|
|
26
|
+
text-transform: uppercase;
|
|
27
|
+
padding: 0.5rem 1.5rem;
|
|
28
|
+
font-size: 0.875rem;
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
transition: all 150ms ease-in-out;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.alert-cancel-button:focus {
|
|
34
|
+
outline: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.alert-error-button {
|
|
38
|
+
color: #EF4444;
|
|
39
|
+
background: transparent;
|
|
40
|
+
font-weight: bold;
|
|
41
|
+
text-transform: uppercase;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
padding: 0.5rem 1.5rem;
|
|
44
|
+
font-size: 1rem;
|
|
45
|
+
transition: all 150ms ease-in-out;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.alert-error-button:focus {
|
|
49
|
+
outline: none;
|
|
50
|
+
}
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
.modal-overlay {
|
|
2
|
+
overflow-x: hidden;
|
|
3
|
+
overflow-y: auto;
|
|
4
|
+
position: fixed;
|
|
5
|
+
inset: 0;
|
|
6
|
+
z-index: 50;
|
|
7
|
+
outline: none;
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
align-items: center;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.modal-content {
|
|
14
|
+
border: 0;
|
|
15
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
16
|
+
position: relative;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
background-color: white;
|
|
20
|
+
outline: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.modal-content.lg {
|
|
24
|
+
width: 100%;
|
|
25
|
+
min-height: 100vh;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.modal-content.md {
|
|
29
|
+
width: 87.5%;
|
|
30
|
+
min-height: 80vh;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@media (min-width: 640px) {
|
|
34
|
+
.modal-content.md {
|
|
35
|
+
width: 75%;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.modal-content.sm {
|
|
40
|
+
width: 75%;
|
|
41
|
+
min-height: 60vh;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@media (min-width: 640px) {
|
|
45
|
+
.modal-content.sm {
|
|
46
|
+
width: 33.333333%;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.modal-header {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: flex-start;
|
|
53
|
+
justify-content: space-between;
|
|
54
|
+
padding: 1rem;
|
|
55
|
+
border-bottom: 1px solid #e2e8f0;
|
|
56
|
+
border-top-left-radius: 0.25rem;
|
|
57
|
+
border-top-right-radius: 0.25rem;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.modal-title {
|
|
61
|
+
font-size: 1.25rem;
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.modal-close-button {
|
|
66
|
+
padding: 0.25rem;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
margin-left: auto;
|
|
69
|
+
background: transparent;
|
|
70
|
+
border: 0;
|
|
71
|
+
color: black;
|
|
72
|
+
float: right;
|
|
73
|
+
font-size: 1.5rem;
|
|
74
|
+
line-height: 1;
|
|
75
|
+
font-weight: 600;
|
|
76
|
+
outline: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.modal-close-icon {
|
|
80
|
+
height: 1.5rem;
|
|
81
|
+
width: 1.5rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.modal-loading {
|
|
85
|
+
position: relative;
|
|
86
|
+
padding: 1.5rem;
|
|
87
|
+
flex: 1;
|
|
88
|
+
display: flex;
|
|
89
|
+
justify-content: center;
|
|
90
|
+
align-items: center;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.modal-loading-spinner {
|
|
94
|
+
display: flex;
|
|
95
|
+
justify-content: center;
|
|
96
|
+
font-size: 2.25rem;
|
|
97
|
+
align-items: center;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.modal-loading-svg {
|
|
101
|
+
animation: spin 1s linear infinite;
|
|
102
|
+
height: 2rem;
|
|
103
|
+
width: 2rem;
|
|
104
|
+
color: #10b981;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.modal-body {
|
|
108
|
+
position: relative;
|
|
109
|
+
padding: 0.5rem;
|
|
110
|
+
flex: auto;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media (min-width: 640px) {
|
|
114
|
+
.modal-body {
|
|
115
|
+
padding: 1rem;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.modal-footer {
|
|
120
|
+
display: flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
justify-content: flex-end;
|
|
123
|
+
padding: 0.75rem;
|
|
124
|
+
border-top: 1px solid #e2e8f0;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.modal-save-button {
|
|
128
|
+
background-color: #10b981;
|
|
129
|
+
cursor: pointer;
|
|
130
|
+
color: white;
|
|
131
|
+
font-weight: 700;
|
|
132
|
+
text-transform: uppercase;
|
|
133
|
+
font-size: 0.875rem;
|
|
134
|
+
padding: 0.75rem 1.5rem;
|
|
135
|
+
border-radius: 0.25rem;
|
|
136
|
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
137
|
+
outline: none;
|
|
138
|
+
transition: all 0.15s ease-linear;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.modal-save-button:hover {
|
|
142
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.modal-save-button:active {
|
|
146
|
+
background-color: #059669;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.modal-save-button:disabled {
|
|
150
|
+
background-color: #6ee7b7;
|
|
151
|
+
cursor: not-allowed;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.modal-cancel-button {
|
|
155
|
+
cursor: pointer;
|
|
156
|
+
color: #ef4444;
|
|
157
|
+
font-weight: 700;
|
|
158
|
+
text-transform: uppercase;
|
|
159
|
+
font-size: 0.875rem;
|
|
160
|
+
padding: 0.75rem 1.5rem;
|
|
161
|
+
border-radius: 0.25rem;
|
|
162
|
+
outline: none;
|
|
163
|
+
transition: all 0.15s ease-linear;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.modal-cancel-button:hover {
|
|
167
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.modal-backdrop {
|
|
171
|
+
opacity: 0.25;
|
|
172
|
+
position: fixed;
|
|
173
|
+
inset: 0;
|
|
174
|
+
z-index: 40;
|
|
175
|
+
background-color: black;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@keyframes spin {
|
|
179
|
+
from {
|
|
180
|
+
transform: rotate(0deg);
|
|
181
|
+
}
|
|
182
|
+
to {
|
|
183
|
+
transform: rotate(360deg);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import './Grav_Modal.css';
|
|
3
|
+
|
|
2
4
|
// Define size type
|
|
3
5
|
type ModalSize = "lg" | "md" | "sm";
|
|
4
6
|
|
|
@@ -71,30 +73,26 @@
|
|
|
71
73
|
|
|
72
74
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
73
75
|
<div
|
|
74
|
-
class="
|
|
76
|
+
class="modal-overlay"
|
|
75
77
|
on:keydown={handleKeydown}
|
|
76
78
|
on:click={handleClick}
|
|
77
79
|
tabindex="0"
|
|
78
80
|
>
|
|
79
81
|
<!--content-->
|
|
80
|
-
<div
|
|
81
|
-
class="border-0 shadow-lg relative flex flex-col {currentSizeClass} bg-white outline-none focus:outline-none"
|
|
82
|
-
>
|
|
82
|
+
<div class="modal-content {size}">
|
|
83
83
|
<!-- Encabezado Modal -->
|
|
84
|
-
<div
|
|
85
|
-
class="
|
|
86
|
-
>
|
|
87
|
-
<h3 class="text-xl font-semibold">
|
|
84
|
+
<div class="modal-header">
|
|
85
|
+
<h3 class="modal-title">
|
|
88
86
|
{title}
|
|
89
87
|
</h3>
|
|
90
88
|
<!-- Cerrar Modal -->
|
|
91
89
|
<button
|
|
92
|
-
class="
|
|
90
|
+
class="modal-close-button"
|
|
93
91
|
on:click={onClose}
|
|
94
92
|
>
|
|
95
93
|
<svg
|
|
96
94
|
xmlns="http://www.w3.org/2000/svg"
|
|
97
|
-
class="
|
|
95
|
+
class="modal-close-icon"
|
|
98
96
|
fill="none"
|
|
99
97
|
viewBox="0 0 24 24"
|
|
100
98
|
stroke="currentColor"
|
|
@@ -112,10 +110,10 @@
|
|
|
112
110
|
<!-- Encabezado Modal -->
|
|
113
111
|
|
|
114
112
|
{#if loading}
|
|
115
|
-
<div class="
|
|
116
|
-
<div class="
|
|
113
|
+
<div class="modal-loading">
|
|
114
|
+
<div class="modal-loading-spinner">
|
|
117
115
|
<svg
|
|
118
|
-
class="
|
|
116
|
+
class="modal-loading-svg"
|
|
119
117
|
xmlns="http://www.w3.org/2000/svg"
|
|
120
118
|
fill="none"
|
|
121
119
|
viewBox="0 0 24 24"
|
|
@@ -138,19 +136,17 @@
|
|
|
138
136
|
</div>
|
|
139
137
|
{:else}
|
|
140
138
|
<!-- Cuerpo Modal -->
|
|
141
|
-
<div class="
|
|
139
|
+
<div class="modal-body">
|
|
142
140
|
<slot />
|
|
143
141
|
</div>
|
|
144
142
|
<!-- /Cuerpo Modal -->
|
|
145
143
|
|
|
146
144
|
{#if !isVista}
|
|
147
145
|
<!-- Pie Modal -->
|
|
148
|
-
<div
|
|
149
|
-
class="flex items-center justify-end p-3 border-t border-solid border-blueGray-200"
|
|
150
|
-
>
|
|
146
|
+
<div class="modal-footer">
|
|
151
147
|
<!-- Btn Guardar -->
|
|
152
148
|
<button
|
|
153
|
-
class="
|
|
149
|
+
class="modal-save-button"
|
|
154
150
|
type="button"
|
|
155
151
|
on:click={onSave}
|
|
156
152
|
disabled={saveButtonDisabled}
|
|
@@ -160,7 +156,7 @@
|
|
|
160
156
|
<!-- /Btn Guardar -->
|
|
161
157
|
<!-- Cerrar Modal -->
|
|
162
158
|
<button
|
|
163
|
-
class="
|
|
159
|
+
class="modal-cancel-button"
|
|
164
160
|
type="button"
|
|
165
161
|
on:click={onClose}
|
|
166
162
|
>
|
|
@@ -173,4 +169,4 @@
|
|
|
173
169
|
{/if}
|
|
174
170
|
</div>
|
|
175
171
|
</div>
|
|
176
|
-
<div class="
|
|
172
|
+
<div class="modal-backdrop" />
|