grav-svelte 0.0.91 → 0.0.93
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/CRUD/CrudTableButtons.svelte +0 -4
- package/dist/Inputs/InputFormCascade.svelte +12 -3
- package/dist/Inputs/InputFormColor.svelte +1 -1
- package/dist/Inputs/InputFormColorPicker.svelte +9 -8
- package/dist/Inputs/InputFormDate.svelte +1 -1
- package/dist/Inputs/InputFormDateAndHours.svelte +1 -1
- package/dist/Inputs/InputFormImage.svelte +1 -1
- package/dist/Inputs/InputFormNumber.svelte +1 -1
- package/dist/Inputs/InputFormPassword.svelte +15 -1
- package/dist/Inputs/InputFormText.svelte +1 -1
- package/dist/Inputs/InputFormTextArea.svelte +1 -1
- package/dist/Modals/Grav_Modal.css +14 -4
- package/dist/Modals/Grav_Modal.svelte +9 -9
- package/package.json +1 -1
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
{#each levels as level, i}
|
|
70
70
|
{#if i == 0}
|
|
71
71
|
{#await fetchFnCloned[0].fetchFn()}
|
|
72
|
-
|
|
72
|
+
<p class="loading-message">Cargando {level.label}...</p>
|
|
73
73
|
{:then res}
|
|
74
74
|
<InputFormSelect
|
|
75
75
|
value={level?.default}
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
{#if i > 0}
|
|
87
87
|
{#if levels[i - 1]?.default?.value}
|
|
88
88
|
{#await ultimoIndexActualizado >= i ? cacheResults[i] : fetchFnCloned[i].fetchFn(levels[i - 1]?.default?.value)}
|
|
89
|
-
|
|
89
|
+
<p class="loading-message">Cargando {level.label}...</p>
|
|
90
90
|
{:then res}
|
|
91
91
|
<div class=" hidden">
|
|
92
92
|
{(cacheResults[i] = res)}
|
|
@@ -102,8 +102,17 @@
|
|
|
102
102
|
/>
|
|
103
103
|
{/await}
|
|
104
104
|
{:else}
|
|
105
|
-
<
|
|
105
|
+
<p class="select-message">Selecciona {level.label}</p>
|
|
106
106
|
{/if}
|
|
107
107
|
{/if}
|
|
108
108
|
{/each}
|
|
109
109
|
{/if}
|
|
110
|
+
|
|
111
|
+
<style>
|
|
112
|
+
.loading-message,
|
|
113
|
+
.select-message {
|
|
114
|
+
color: var(--grav-crud-color-neutral);
|
|
115
|
+
font-size: 0.875rem;
|
|
116
|
+
margin: 0.5rem 0;
|
|
117
|
+
}
|
|
118
|
+
</style>
|
|
@@ -143,6 +143,7 @@
|
|
|
143
143
|
position: absolute;
|
|
144
144
|
top: 0;
|
|
145
145
|
left: 0.25rem;
|
|
146
|
+
color: var(--grav-crud-color-neutral);
|
|
146
147
|
}
|
|
147
148
|
|
|
148
149
|
.color-picker-wrapper {
|
|
@@ -154,14 +155,14 @@
|
|
|
154
155
|
display: block;
|
|
155
156
|
font-size: 1.1rem;
|
|
156
157
|
font-weight: 600;
|
|
157
|
-
color: var(--grav-crud-color-neutral
|
|
158
|
+
color: var(--grav-crud-color-neutral);
|
|
158
159
|
margin-bottom: 1rem;
|
|
159
160
|
}
|
|
160
161
|
|
|
161
162
|
.section-label {
|
|
162
163
|
font-size: 0.95rem;
|
|
163
164
|
font-weight: 500;
|
|
164
|
-
color: var(--grav-crud-color-neutral
|
|
165
|
+
color: var(--grav-crud-color-neutral);
|
|
165
166
|
margin-bottom: 0.75rem;
|
|
166
167
|
margin-top: 1.25rem;
|
|
167
168
|
}
|
|
@@ -199,7 +200,7 @@
|
|
|
199
200
|
}
|
|
200
201
|
|
|
201
202
|
.color-swatch.selected {
|
|
202
|
-
border-color:
|
|
203
|
+
border-color: var(--grav-crud-color-neutral);
|
|
203
204
|
box-shadow:
|
|
204
205
|
0 10px 15px -3px rgba(0, 0, 0, 0.2),
|
|
205
206
|
0 4px 6px -2px rgba(0, 0, 0, 0.1);
|
|
@@ -227,7 +228,7 @@
|
|
|
227
228
|
width: 50px;
|
|
228
229
|
height: 50px;
|
|
229
230
|
border-radius: 0.75rem;
|
|
230
|
-
border: 2px solid
|
|
231
|
+
border: 2px solid var(--grav-crud-color-border);
|
|
231
232
|
cursor: pointer;
|
|
232
233
|
transition: all 0.2s ease;
|
|
233
234
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
@@ -261,10 +262,10 @@
|
|
|
261
262
|
flex: 1;
|
|
262
263
|
padding: 0.625rem 0.875rem;
|
|
263
264
|
font-size: 0.95rem;
|
|
264
|
-
border: 2px solid
|
|
265
|
+
border: 2px solid var(--grav-crud-color-border);
|
|
265
266
|
border-radius: 0.75rem;
|
|
266
|
-
background:
|
|
267
|
-
color: var(--grav-crud-color-neutral
|
|
267
|
+
background: var(--grav-crud-color-light);
|
|
268
|
+
color: var(--grav-crud-color-neutral);
|
|
268
269
|
font-weight: 500;
|
|
269
270
|
transition: all 0.2s ease;
|
|
270
271
|
text-transform: uppercase;
|
|
@@ -272,7 +273,7 @@
|
|
|
272
273
|
|
|
273
274
|
.hex-input:focus {
|
|
274
275
|
outline: none;
|
|
275
|
-
border-color:
|
|
276
|
+
border-color: var(--grav-crud-color-neutral);
|
|
276
277
|
}
|
|
277
278
|
|
|
278
279
|
.hex-input:disabled {
|
|
@@ -107,6 +107,7 @@
|
|
|
107
107
|
position: absolute;
|
|
108
108
|
top: -0.4rem;
|
|
109
109
|
left: 0.25rem;
|
|
110
|
+
color: var(--grav-crud-color-neutral);
|
|
110
111
|
}
|
|
111
112
|
|
|
112
113
|
.input-wrapper {
|
|
@@ -127,7 +128,6 @@
|
|
|
127
128
|
|
|
128
129
|
.input-field:focus {
|
|
129
130
|
outline: none;
|
|
130
|
-
border-color: black;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
.input-label {
|
|
@@ -168,4 +168,18 @@
|
|
|
168
168
|
translate: -0.6rem -1.4rem;
|
|
169
169
|
font-size: 0.7rem;
|
|
170
170
|
}
|
|
171
|
+
|
|
172
|
+
.validation-message {
|
|
173
|
+
font-size: 0.875rem;
|
|
174
|
+
margin-top: 0.25rem;
|
|
175
|
+
color: var(--grav-crud-color-neutral);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.validation-message.valid {
|
|
179
|
+
color: #10b981;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.validation-message.invalid {
|
|
183
|
+
color: #dc2626;
|
|
184
|
+
}
|
|
171
185
|
</style>
|
|
@@ -90,6 +90,11 @@
|
|
|
90
90
|
outline: none;
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
+
.modal-close-button:hover {
|
|
94
|
+
scale: 1.3;
|
|
95
|
+
transition: all 0.75s ease-linear;
|
|
96
|
+
}
|
|
97
|
+
|
|
93
98
|
.modal-close-icon {
|
|
94
99
|
height: 1.5rem;
|
|
95
100
|
width: 1.5rem;
|
|
@@ -137,6 +142,7 @@
|
|
|
137
142
|
align-items: center;
|
|
138
143
|
justify-content: flex-end;
|
|
139
144
|
padding: 0.75rem;
|
|
145
|
+
gap: 0.75rem;
|
|
140
146
|
border-top: 1px solid #e2e8f0;
|
|
141
147
|
}
|
|
142
148
|
|
|
@@ -148,12 +154,13 @@
|
|
|
148
154
|
text-transform: uppercase;
|
|
149
155
|
font-size: 0.875rem;
|
|
150
156
|
padding: 0.75rem 1.5rem;
|
|
151
|
-
border-radius:
|
|
157
|
+
border-radius: var(--grav-border-radius-md);
|
|
152
158
|
outline: none;
|
|
153
159
|
transition: all 0.15s ease-linear;
|
|
154
160
|
}
|
|
155
161
|
|
|
156
162
|
.modal-save-button:hover {
|
|
163
|
+
background-color: #059669;
|
|
157
164
|
}
|
|
158
165
|
|
|
159
166
|
.modal-save-button:active {
|
|
@@ -172,12 +179,15 @@
|
|
|
172
179
|
text-transform: uppercase;
|
|
173
180
|
font-size: 0.875rem;
|
|
174
181
|
padding: 0.75rem 1.5rem;
|
|
175
|
-
border
|
|
182
|
+
border: 1px solid #ef4444;
|
|
183
|
+
border-radius: var(--grav-border-radius-md);
|
|
176
184
|
outline: none;
|
|
177
|
-
transition: all 0.
|
|
185
|
+
transition: all 0.75s ease-linear;
|
|
178
186
|
}
|
|
179
187
|
|
|
180
188
|
.modal-cancel-button:hover {
|
|
189
|
+
color: #d13b3b;
|
|
190
|
+
border: 1px solid #d13b3b;
|
|
181
191
|
}
|
|
182
192
|
|
|
183
193
|
.modal-backdrop {
|
|
@@ -193,7 +203,7 @@
|
|
|
193
203
|
/* Override CRUD variables for modal context */
|
|
194
204
|
--grav-crud-color-bg: #ffffff; /* White background for modal inputs */
|
|
195
205
|
--grav-crud-color-button: #fe6b91; /* Pink buttons */
|
|
196
|
-
--grav-crud-color-neutral: #
|
|
206
|
+
--grav-crud-color-neutral: #313131; /* Black text for modal inputs */
|
|
197
207
|
--grav-crud-color-light: #f5f5f5; /* Light gray for hover states */
|
|
198
208
|
--grav-crud-color-border: #d1d5db; /* Gray borders */
|
|
199
209
|
--grav-crud-color-tooltip: #374151; /* Darker gray for tooltips */
|
|
@@ -142,6 +142,15 @@
|
|
|
142
142
|
{#if !isVista}
|
|
143
143
|
<!-- Pie Modal -->
|
|
144
144
|
<div class="modal-footer">
|
|
145
|
+
<!-- Cerrar Modal -->
|
|
146
|
+
<button
|
|
147
|
+
class="modal-cancel-button"
|
|
148
|
+
type="button"
|
|
149
|
+
on:click={onClose}
|
|
150
|
+
>
|
|
151
|
+
{cancelButtonText}
|
|
152
|
+
</button>
|
|
153
|
+
<!-- /Cerrar Modal -->
|
|
145
154
|
<!-- Btn Guardar -->
|
|
146
155
|
<button
|
|
147
156
|
class="modal-save-button"
|
|
@@ -152,15 +161,6 @@
|
|
|
152
161
|
{saveButtonText}
|
|
153
162
|
</button>
|
|
154
163
|
<!-- /Btn Guardar -->
|
|
155
|
-
<!-- Cerrar Modal -->
|
|
156
|
-
<button
|
|
157
|
-
class="modal-cancel-button"
|
|
158
|
-
type="button"
|
|
159
|
-
on:click={onClose}
|
|
160
|
-
>
|
|
161
|
-
{cancelButtonText}
|
|
162
|
-
</button>
|
|
163
|
-
<!-- /Cerrar Modal -->
|
|
164
164
|
</div>
|
|
165
165
|
<!-- /Pie Modal -->
|
|
166
166
|
{/if}
|