@innertia-solutions/ui 0.1.0
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/components/App/EmptyState.vue +433 -0
- package/components/App/Icon.vue +99 -0
- package/components/App/LoadingState.vue +40 -0
- package/components/App/SwitchColorTheme.vue +55 -0
- package/components/Forms/Select.vue +89 -0
- package/components/Modal/DeleteConfirm.vue +163 -0
- package/components/Table/DownloadDropdown.vue +111 -0
- package/components/Table/FilterDropdown.vue +226 -0
- package/components/Toast/Alert.vue +113 -0
- package/components/Toast/Notification.vue +45 -0
- package/components/Toast/Process.vue +88 -0
- package/composables/useDate.js +240 -0
- package/composables/useDevice.js +21 -0
- package/composables/useDownload.js +67 -0
- package/composables/useForm.js +259 -0
- package/composables/useRutFormatter.js +20 -0
- package/composables/useTable.ts +124 -0
- package/composables/useTimeAgo.js +25 -0
- package/composables/useToast.js +69 -0
- package/nuxt.config.ts +8 -0
- package/package.json +22 -0
- package/stores/toast.js +131 -0
|
@@ -0,0 +1,433 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineProps({
|
|
3
|
+
title: { type: String, default: "No hay contenido" },
|
|
4
|
+
description: { type: String, default: "Aún no hay datos que mostrar." },
|
|
5
|
+
actionText: { type: String, default: "" },
|
|
6
|
+
actionLink: { type: String, default: "" },
|
|
7
|
+
showAction: { type: Boolean, default: false },
|
|
8
|
+
shape: {
|
|
9
|
+
type: String,
|
|
10
|
+
default: "square",
|
|
11
|
+
validator: (value) => ["square", "circle"].includes(value),
|
|
12
|
+
},
|
|
13
|
+
});
|
|
14
|
+
</script>
|
|
15
|
+
<template>
|
|
16
|
+
<div>
|
|
17
|
+
<slot v-if="shape == 'square'" name="icon">
|
|
18
|
+
<!-- Ícono por defecto (tu SVG) -->
|
|
19
|
+
<svg
|
|
20
|
+
class="w-48 mx-auto mb-4"
|
|
21
|
+
width="178"
|
|
22
|
+
height="90"
|
|
23
|
+
viewBox="0 0 178 90"
|
|
24
|
+
fill="none"
|
|
25
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
+
>
|
|
27
|
+
<rect
|
|
28
|
+
x="27"
|
|
29
|
+
y="50.5"
|
|
30
|
+
width="124"
|
|
31
|
+
height="39"
|
|
32
|
+
rx="7.5"
|
|
33
|
+
fill="currentColor"
|
|
34
|
+
class="fill-white dark:fill-slate-800"
|
|
35
|
+
/>
|
|
36
|
+
<rect
|
|
37
|
+
x="27"
|
|
38
|
+
y="50.5"
|
|
39
|
+
width="124"
|
|
40
|
+
height="39"
|
|
41
|
+
rx="7.5"
|
|
42
|
+
stroke="currentColor"
|
|
43
|
+
class="stroke-slate-50 dark:stroke-slate-700/10"
|
|
44
|
+
/>
|
|
45
|
+
<rect
|
|
46
|
+
x="34.5"
|
|
47
|
+
y="58"
|
|
48
|
+
width="24"
|
|
49
|
+
height="24"
|
|
50
|
+
rx="4"
|
|
51
|
+
fill="currentColor"
|
|
52
|
+
class="fill-slate-50 dark:fill-slate-700/30"
|
|
53
|
+
/>
|
|
54
|
+
<rect
|
|
55
|
+
x="66.5"
|
|
56
|
+
y="61"
|
|
57
|
+
width="60"
|
|
58
|
+
height="6"
|
|
59
|
+
rx="3"
|
|
60
|
+
fill="currentColor"
|
|
61
|
+
class="fill-slate-50 dark:fill-slate-700/30"
|
|
62
|
+
/>
|
|
63
|
+
<rect
|
|
64
|
+
x="66.5"
|
|
65
|
+
y="73"
|
|
66
|
+
width="77"
|
|
67
|
+
height="6"
|
|
68
|
+
rx="3"
|
|
69
|
+
fill="currentColor"
|
|
70
|
+
class="fill-slate-50 dark:fill-slate-700/30"
|
|
71
|
+
/>
|
|
72
|
+
<rect
|
|
73
|
+
x="19.5"
|
|
74
|
+
y="28.5"
|
|
75
|
+
width="139"
|
|
76
|
+
height="39"
|
|
77
|
+
rx="7.5"
|
|
78
|
+
fill="currentColor"
|
|
79
|
+
class="fill-white dark:fill-slate-800"
|
|
80
|
+
/>
|
|
81
|
+
<rect
|
|
82
|
+
x="19.5"
|
|
83
|
+
y="28.5"
|
|
84
|
+
width="139"
|
|
85
|
+
height="39"
|
|
86
|
+
rx="7.5"
|
|
87
|
+
stroke="currentColor"
|
|
88
|
+
class="stroke-slate-100 dark:stroke-slate-700/30"
|
|
89
|
+
/>
|
|
90
|
+
<rect
|
|
91
|
+
x="27"
|
|
92
|
+
y="36"
|
|
93
|
+
width="24"
|
|
94
|
+
height="24"
|
|
95
|
+
rx="4"
|
|
96
|
+
fill="currentColor"
|
|
97
|
+
class="fill-slate-100 dark:fill-slate-700/70"
|
|
98
|
+
/>
|
|
99
|
+
<rect
|
|
100
|
+
x="59"
|
|
101
|
+
y="39"
|
|
102
|
+
width="60"
|
|
103
|
+
height="6"
|
|
104
|
+
rx="3"
|
|
105
|
+
fill="currentColor"
|
|
106
|
+
class="fill-slate-100 dark:fill-slate-700/70"
|
|
107
|
+
/>
|
|
108
|
+
<rect
|
|
109
|
+
x="59"
|
|
110
|
+
y="51"
|
|
111
|
+
width="92"
|
|
112
|
+
height="6"
|
|
113
|
+
rx="3"
|
|
114
|
+
fill="currentColor"
|
|
115
|
+
class="fill-slate-100 dark:fill-slate-700/70"
|
|
116
|
+
/>
|
|
117
|
+
<g filter="url(#filter15)">
|
|
118
|
+
<rect
|
|
119
|
+
x="12"
|
|
120
|
+
y="6"
|
|
121
|
+
width="154"
|
|
122
|
+
height="40"
|
|
123
|
+
rx="8"
|
|
124
|
+
fill="currentColor"
|
|
125
|
+
class="fill-white dark:fill-slate-800"
|
|
126
|
+
shape-rendering="crispEdges"
|
|
127
|
+
/>
|
|
128
|
+
<rect
|
|
129
|
+
x="12.5"
|
|
130
|
+
y="6.5"
|
|
131
|
+
width="153"
|
|
132
|
+
height="39"
|
|
133
|
+
rx="7.5"
|
|
134
|
+
stroke="currentColor"
|
|
135
|
+
class="stroke-slate-100 dark:stroke-slate-700/60"
|
|
136
|
+
shape-rendering="crispEdges"
|
|
137
|
+
/>
|
|
138
|
+
<rect
|
|
139
|
+
x="20"
|
|
140
|
+
y="14"
|
|
141
|
+
width="24"
|
|
142
|
+
height="24"
|
|
143
|
+
rx="4"
|
|
144
|
+
fill="currentColor"
|
|
145
|
+
class="fill-slate-200 dark:fill-slate-700"
|
|
146
|
+
/>
|
|
147
|
+
<rect
|
|
148
|
+
x="52"
|
|
149
|
+
y="17"
|
|
150
|
+
width="60"
|
|
151
|
+
height="6"
|
|
152
|
+
rx="3"
|
|
153
|
+
fill="currentColor"
|
|
154
|
+
class="fill-slate-200 dark:fill-slate-700"
|
|
155
|
+
/>
|
|
156
|
+
<rect
|
|
157
|
+
x="52"
|
|
158
|
+
y="29"
|
|
159
|
+
width="106"
|
|
160
|
+
height="6"
|
|
161
|
+
rx="3"
|
|
162
|
+
fill="currentColor"
|
|
163
|
+
class="fill-slate-200 dark:fill-slate-700"
|
|
164
|
+
/>
|
|
165
|
+
</g>
|
|
166
|
+
<defs>
|
|
167
|
+
<filter
|
|
168
|
+
id="filter15"
|
|
169
|
+
x="0"
|
|
170
|
+
y="0"
|
|
171
|
+
width="178"
|
|
172
|
+
height="64"
|
|
173
|
+
filterUnits="userSpaceOnUse"
|
|
174
|
+
color-interpolation-filters="sRGB"
|
|
175
|
+
>
|
|
176
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
177
|
+
<feColorMatrix
|
|
178
|
+
in="SourceAlpha"
|
|
179
|
+
type="matrix"
|
|
180
|
+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
|
181
|
+
result="hardAlpha"
|
|
182
|
+
/>
|
|
183
|
+
<feOffset dy="6" />
|
|
184
|
+
<feGaussianBlur stdDeviation="6" />
|
|
185
|
+
<feComposite in2="hardAlpha" operator="out" />
|
|
186
|
+
<feColorMatrix
|
|
187
|
+
type="matrix"
|
|
188
|
+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"
|
|
189
|
+
/>
|
|
190
|
+
<feBlend
|
|
191
|
+
mode="normal"
|
|
192
|
+
in2="BackgroundImageFix"
|
|
193
|
+
result="effect1_dropShadow_1187_14810"
|
|
194
|
+
/>
|
|
195
|
+
<feBlend
|
|
196
|
+
mode="normal"
|
|
197
|
+
in="SourceGraphic"
|
|
198
|
+
in2="effect1_dropShadow_1187_14810"
|
|
199
|
+
result="shape"
|
|
200
|
+
/>
|
|
201
|
+
</filter>
|
|
202
|
+
</defs>
|
|
203
|
+
</svg>
|
|
204
|
+
</slot>
|
|
205
|
+
<slot v-else name="icon">
|
|
206
|
+
<svg
|
|
207
|
+
class="w-48 mx-auto mb-4"
|
|
208
|
+
width="178"
|
|
209
|
+
height="90"
|
|
210
|
+
viewBox="0 0 178 90"
|
|
211
|
+
fill="none"
|
|
212
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
213
|
+
>
|
|
214
|
+
<rect
|
|
215
|
+
x="27"
|
|
216
|
+
y="50.5"
|
|
217
|
+
width="124"
|
|
218
|
+
height="39"
|
|
219
|
+
rx="7.5"
|
|
220
|
+
fill="currentColor"
|
|
221
|
+
class="fill-white dark:fill-slate-800"
|
|
222
|
+
/>
|
|
223
|
+
<rect
|
|
224
|
+
x="27"
|
|
225
|
+
y="50.5"
|
|
226
|
+
width="124"
|
|
227
|
+
height="39"
|
|
228
|
+
rx="7.5"
|
|
229
|
+
stroke="currentColor"
|
|
230
|
+
class="stroke-slate-50 dark:stroke-slate-700/10"
|
|
231
|
+
/>
|
|
232
|
+
<rect
|
|
233
|
+
x="34.5"
|
|
234
|
+
y="58"
|
|
235
|
+
width="24"
|
|
236
|
+
height="24"
|
|
237
|
+
rx="12"
|
|
238
|
+
fill="currentColor"
|
|
239
|
+
class="fill-slate-50 dark:fill-slate-700/30"
|
|
240
|
+
/>
|
|
241
|
+
<rect
|
|
242
|
+
x="66.5"
|
|
243
|
+
y="61"
|
|
244
|
+
width="60"
|
|
245
|
+
height="6"
|
|
246
|
+
rx="3"
|
|
247
|
+
fill="currentColor"
|
|
248
|
+
class="fill-slate-50 dark:fill-slate-700/30"
|
|
249
|
+
/>
|
|
250
|
+
<rect
|
|
251
|
+
x="66.5"
|
|
252
|
+
y="73"
|
|
253
|
+
width="77"
|
|
254
|
+
height="6"
|
|
255
|
+
rx="3"
|
|
256
|
+
fill="currentColor"
|
|
257
|
+
class="fill-slate-50 dark:fill-slate-700/30"
|
|
258
|
+
/>
|
|
259
|
+
<rect
|
|
260
|
+
x="19.5"
|
|
261
|
+
y="28.5"
|
|
262
|
+
width="139"
|
|
263
|
+
height="39"
|
|
264
|
+
rx="7.5"
|
|
265
|
+
fill="currentColor"
|
|
266
|
+
class="fill-white dark:fill-slate-800"
|
|
267
|
+
/>
|
|
268
|
+
<rect
|
|
269
|
+
x="19.5"
|
|
270
|
+
y="28.5"
|
|
271
|
+
width="139"
|
|
272
|
+
height="39"
|
|
273
|
+
rx="7.5"
|
|
274
|
+
stroke="currentColor"
|
|
275
|
+
class="stroke-slate-100 dark:stroke-slate-700/30"
|
|
276
|
+
/>
|
|
277
|
+
<rect
|
|
278
|
+
x="27"
|
|
279
|
+
y="36"
|
|
280
|
+
width="24"
|
|
281
|
+
height="24"
|
|
282
|
+
rx="12"
|
|
283
|
+
fill="currentColor"
|
|
284
|
+
class="fill-slate-100 dark:fill-slate-700/70"
|
|
285
|
+
/>
|
|
286
|
+
<rect
|
|
287
|
+
x="59"
|
|
288
|
+
y="39"
|
|
289
|
+
width="60"
|
|
290
|
+
height="6"
|
|
291
|
+
rx="3"
|
|
292
|
+
fill="currentColor"
|
|
293
|
+
class="fill-slate-100 dark:fill-slate-700/70"
|
|
294
|
+
/>
|
|
295
|
+
<rect
|
|
296
|
+
x="59"
|
|
297
|
+
y="51"
|
|
298
|
+
width="92"
|
|
299
|
+
height="6"
|
|
300
|
+
rx="3"
|
|
301
|
+
fill="currentColor"
|
|
302
|
+
class="fill-slate-100 dark:fill-slate-700/70"
|
|
303
|
+
/>
|
|
304
|
+
<g filter="url(#filter4)">
|
|
305
|
+
<rect
|
|
306
|
+
x="12"
|
|
307
|
+
y="6"
|
|
308
|
+
width="154"
|
|
309
|
+
height="40"
|
|
310
|
+
rx="8"
|
|
311
|
+
class="fill-white dark:fill-slate-800"
|
|
312
|
+
shape-rendering="crispEdges"
|
|
313
|
+
/>
|
|
314
|
+
<rect
|
|
315
|
+
x="12.5"
|
|
316
|
+
y="6.5"
|
|
317
|
+
width="153"
|
|
318
|
+
height="39"
|
|
319
|
+
rx="7.5"
|
|
320
|
+
stroke="currentColor"
|
|
321
|
+
class="stroke-slate-100 dark:stroke-slate-700/60"
|
|
322
|
+
shape-rendering="crispEdges"
|
|
323
|
+
/>
|
|
324
|
+
<rect
|
|
325
|
+
x="20"
|
|
326
|
+
y="14"
|
|
327
|
+
width="24"
|
|
328
|
+
height="24"
|
|
329
|
+
rx="12"
|
|
330
|
+
fill="currentColor"
|
|
331
|
+
class="fill-slate-200 dark:fill-slate-700"
|
|
332
|
+
/>
|
|
333
|
+
<rect
|
|
334
|
+
x="52"
|
|
335
|
+
y="17"
|
|
336
|
+
width="60"
|
|
337
|
+
height="6"
|
|
338
|
+
rx="3"
|
|
339
|
+
fill="currentColor"
|
|
340
|
+
class="fill-slate-200 dark:fill-slate-700"
|
|
341
|
+
/>
|
|
342
|
+
<rect
|
|
343
|
+
x="52"
|
|
344
|
+
y="29"
|
|
345
|
+
width="106"
|
|
346
|
+
height="6"
|
|
347
|
+
rx="3"
|
|
348
|
+
fill="currentColor"
|
|
349
|
+
class="fill-slate-200 dark:fill-slate-700"
|
|
350
|
+
/>
|
|
351
|
+
</g>
|
|
352
|
+
<defs>
|
|
353
|
+
<filter
|
|
354
|
+
id="filter4"
|
|
355
|
+
x="0"
|
|
356
|
+
y="0"
|
|
357
|
+
width="178"
|
|
358
|
+
height="64"
|
|
359
|
+
filterUnits="userSpaceOnUse"
|
|
360
|
+
color-interpolation-filters="sRGB"
|
|
361
|
+
>
|
|
362
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
363
|
+
<feColorMatrix
|
|
364
|
+
in="SourceAlpha"
|
|
365
|
+
type="matrix"
|
|
366
|
+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
|
367
|
+
result="hardAlpha"
|
|
368
|
+
/>
|
|
369
|
+
<feOffset dy="6" />
|
|
370
|
+
<feGaussianBlur stdDeviation="6" />
|
|
371
|
+
<feComposite in2="hardAlpha" operator="out" />
|
|
372
|
+
<feColorMatrix
|
|
373
|
+
type="matrix"
|
|
374
|
+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"
|
|
375
|
+
/>
|
|
376
|
+
<feBlend
|
|
377
|
+
mode="normal"
|
|
378
|
+
in2="BackgroundImageFix"
|
|
379
|
+
result="effect1_dropShadow_1187_14810"
|
|
380
|
+
/>
|
|
381
|
+
<feBlend
|
|
382
|
+
mode="normal"
|
|
383
|
+
in="SourceGraphic"
|
|
384
|
+
in2="effect1_dropShadow_1187_14810"
|
|
385
|
+
result="shape"
|
|
386
|
+
/>
|
|
387
|
+
</filter>
|
|
388
|
+
</defs>
|
|
389
|
+
</svg>
|
|
390
|
+
</slot>
|
|
391
|
+
|
|
392
|
+
<div class="max-w-sm mx-auto">
|
|
393
|
+
<p class="mt-2 font-medium text-slate-800 dark:text-slate-200">
|
|
394
|
+
{{ title }}
|
|
395
|
+
</p>
|
|
396
|
+
<p class="mb-5 text-sm text-slate-500 dark:text-slate-500 text-wrap">
|
|
397
|
+
{{ description }}
|
|
398
|
+
</p>
|
|
399
|
+
</div>
|
|
400
|
+
|
|
401
|
+
<a
|
|
402
|
+
v-if="showAction"
|
|
403
|
+
:href="actionLink"
|
|
404
|
+
class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-slate-200 bg-white text-slate-800 shadow-2xs hover:bg-slate-50 focus:outline-hidden focus:bg-slate-50 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700"
|
|
405
|
+
>
|
|
406
|
+
{{ actionText }}
|
|
407
|
+
</a>
|
|
408
|
+
|
|
409
|
+
<template name="footer">
|
|
410
|
+
<button
|
|
411
|
+
type="button"
|
|
412
|
+
class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
|
413
|
+
data-hs-overlay="#hs-pro-empty"
|
|
414
|
+
>
|
|
415
|
+
<svg
|
|
416
|
+
class="hidden sm:block shrink-0 size-4"
|
|
417
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
418
|
+
width="24"
|
|
419
|
+
height="24"
|
|
420
|
+
viewBox="0 0 24 24"
|
|
421
|
+
fill="none"
|
|
422
|
+
stroke="currentColor"
|
|
423
|
+
stroke-width="2"
|
|
424
|
+
stroke-linecap="round"
|
|
425
|
+
stroke-linejoin="round"
|
|
426
|
+
>
|
|
427
|
+
<path d="M5 12h14" />
|
|
428
|
+
<path d="M12 5v14" /></svg
|
|
429
|
+
>Add user
|
|
430
|
+
</button>
|
|
431
|
+
</template>
|
|
432
|
+
</div>
|
|
433
|
+
</template>
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref, computed, onMounted, onUnmounted } from "vue";
|
|
3
|
+
import { IconClockHour10 } from "@tabler/icons-vue";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
7
|
+
animated?: boolean;
|
|
8
|
+
showTime?: boolean;
|
|
9
|
+
color?: string;
|
|
10
|
+
class?: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
14
|
+
size: "md",
|
|
15
|
+
animated: true,
|
|
16
|
+
showTime: false,
|
|
17
|
+
color: "text-current",
|
|
18
|
+
class: "",
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
const currentTime = ref(new Date());
|
|
22
|
+
const rotation = ref(0);
|
|
23
|
+
let timeInterval: NodeJS.Timeout | null = null;
|
|
24
|
+
let animationInterval: NodeJS.Timeout | null = null;
|
|
25
|
+
|
|
26
|
+
const iconSizes = {
|
|
27
|
+
xs: "w-5 h-5",
|
|
28
|
+
sm: "w-8 h-8",
|
|
29
|
+
md: "w-10 h-10",
|
|
30
|
+
lg: "w-14 h-14",
|
|
31
|
+
xl: "w-20 h-20",
|
|
32
|
+
"2xl": "w-24 h-24",
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const iconSize = computed(() => iconSizes[props.size]);
|
|
36
|
+
|
|
37
|
+
// Formatear tiempo digital
|
|
38
|
+
const digitalTime = computed(() => {
|
|
39
|
+
return currentTime.value.toLocaleTimeString("es-ES", {
|
|
40
|
+
hour: "2-digit",
|
|
41
|
+
minute: "2-digit",
|
|
42
|
+
second: "2-digit",
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
const updateTime = () => {
|
|
47
|
+
currentTime.value = new Date();
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const updateAnimation = () => {
|
|
51
|
+
if (props.animated) {
|
|
52
|
+
rotation.value += 1; // Rotar 1 grado cada frame
|
|
53
|
+
if (rotation.value >= 360) rotation.value = 0;
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
onMounted(() => {
|
|
58
|
+
updateTime();
|
|
59
|
+
timeInterval = setInterval(updateTime, 1000);
|
|
60
|
+
|
|
61
|
+
if (props.animated) {
|
|
62
|
+
animationInterval = setInterval(updateAnimation, 100); // Animación suave
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
onUnmounted(() => {
|
|
67
|
+
if (timeInterval) clearInterval(timeInterval);
|
|
68
|
+
if (animationInterval) clearInterval(animationInterval);
|
|
69
|
+
});
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
<template>
|
|
73
|
+
<div class="flex items-center gap-3">
|
|
74
|
+
<!-- Icono de reloj animado -->
|
|
75
|
+
<div class="relative">
|
|
76
|
+
<IconClockHour10
|
|
77
|
+
:class="[
|
|
78
|
+
iconSize,
|
|
79
|
+
props.color || 'text-current',
|
|
80
|
+
props.class,
|
|
81
|
+
'transition-transform duration-300',
|
|
82
|
+
]"
|
|
83
|
+
:style="{ transform: `rotate(${rotation}deg)` }"
|
|
84
|
+
aria-hidden="true"
|
|
85
|
+
/>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<!-- Tiempo digital (opcional) -->
|
|
89
|
+
<div
|
|
90
|
+
v-if="showTime"
|
|
91
|
+
:class="[
|
|
92
|
+
'font-mono text-lg font-semibold',
|
|
93
|
+
props.color || 'text-current',
|
|
94
|
+
]"
|
|
95
|
+
>
|
|
96
|
+
{{ digitalTime }}
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</template>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="flex flex-col items-center justify-center py-10 px-4 space-y-6 w-full h-full text-center"
|
|
4
|
+
>
|
|
5
|
+
<!-- Ícono/loader -->
|
|
6
|
+
<svg
|
|
7
|
+
class="animate-spin w-10 h-10 text-slate-400 dark:text-slate-600"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
viewBox="0 0 24 24"
|
|
10
|
+
fill="none"
|
|
11
|
+
stroke="currentColor"
|
|
12
|
+
stroke-width="2"
|
|
13
|
+
stroke-linecap="round"
|
|
14
|
+
stroke-linejoin="round"
|
|
15
|
+
>
|
|
16
|
+
<circle cx="12" cy="12" r="10" opacity=".25" />
|
|
17
|
+
<path d="M22 12a10 10 0 0 1-10 10" />
|
|
18
|
+
</svg>
|
|
19
|
+
|
|
20
|
+
<!-- Skeleton líneas -->
|
|
21
|
+
<div class="w-full max-w-xs space-y-3">
|
|
22
|
+
<div
|
|
23
|
+
class="h-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"
|
|
24
|
+
></div>
|
|
25
|
+
<div
|
|
26
|
+
class="h-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"
|
|
27
|
+
></div>
|
|
28
|
+
<div
|
|
29
|
+
v-if="showHint"
|
|
30
|
+
class="h-4 w-1/2 bg-slate-200 dark:bg-slate-700 rounded animate-pulse mx-auto"
|
|
31
|
+
></div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<script setup>
|
|
37
|
+
defineProps({
|
|
38
|
+
showHint: { type: Boolean, default: false },
|
|
39
|
+
});
|
|
40
|
+
</script>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<script setup></script>
|
|
2
|
+
<template>
|
|
3
|
+
<button
|
|
4
|
+
type="button"
|
|
5
|
+
class="hs-dark-mode-active:hidden block hs-dark-mode font-medium text-slate-400 rounded-full hover:bg-slate-200 focus:outline-hidden focus:bg-slate-200 dark:text-slate-200 dark:hover:bg-slate-800 dark:focus:bg-slate-800"
|
|
6
|
+
data-hs-theme-click-value="dark"
|
|
7
|
+
>
|
|
8
|
+
<span class="group inline-flex shrink-0 justify-center items-center size-9">
|
|
9
|
+
<svg
|
|
10
|
+
class="shrink-0 size-4"
|
|
11
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
12
|
+
width="24"
|
|
13
|
+
height="24"
|
|
14
|
+
viewBox="0 0 24 24"
|
|
15
|
+
fill="none"
|
|
16
|
+
stroke="currentColor"
|
|
17
|
+
stroke-width="2"
|
|
18
|
+
stroke-linecap="round"
|
|
19
|
+
stroke-linejoin="round"
|
|
20
|
+
>
|
|
21
|
+
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
|
22
|
+
</svg>
|
|
23
|
+
</span>
|
|
24
|
+
</button>
|
|
25
|
+
<button
|
|
26
|
+
type="button"
|
|
27
|
+
class="hs-dark-mode-active:block hidden hs-dark-mode font-medium text-slate-800 rounded-full hover:bg-slate-200 focus:outline-hidden focus:bg-slate-200 dark:text-slate-200 dark:hover:bg-slate-800 dark:focus:bg-slate-800"
|
|
28
|
+
data-hs-theme-click-value="light"
|
|
29
|
+
>
|
|
30
|
+
<span class="group inline-flex shrink-0 justify-center items-center size-9">
|
|
31
|
+
<svg
|
|
32
|
+
class="shrink-0 size-4"
|
|
33
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
34
|
+
width="24"
|
|
35
|
+
height="24"
|
|
36
|
+
viewBox="0 0 24 24"
|
|
37
|
+
fill="none"
|
|
38
|
+
stroke="currentColor"
|
|
39
|
+
stroke-width="2"
|
|
40
|
+
stroke-linecap="round"
|
|
41
|
+
stroke-linejoin="round"
|
|
42
|
+
>
|
|
43
|
+
<circle cx="12" cy="12" r="4"></circle>
|
|
44
|
+
<path d="M12 2v2"></path>
|
|
45
|
+
<path d="M12 20v2"></path>
|
|
46
|
+
<path d="m4.93 4.93 1.41 1.41"></path>
|
|
47
|
+
<path d="m17.66 17.66 1.41 1.41"></path>
|
|
48
|
+
<path d="M2 12h2"></path>
|
|
49
|
+
<path d="M20 12h2"></path>
|
|
50
|
+
<path d="m6.34 17.66-1.41 1.41"></path>
|
|
51
|
+
<path d="m19.07 4.93-1.41 1.41"></path>
|
|
52
|
+
</svg>
|
|
53
|
+
</span>
|
|
54
|
+
</button>
|
|
55
|
+
</template>
|