@innertia-solutions/nuxt-theme-spark 0.1.104 → 0.1.106
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.
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
const props = defineProps<{
|
|
3
3
|
floating?: boolean
|
|
4
4
|
user?: { name?: string; email?: string } | null
|
|
5
|
+
menuSize?: string
|
|
5
6
|
}>()
|
|
6
7
|
|
|
7
8
|
const emit = defineEmits<{ logout: [] }>()
|
|
@@ -43,8 +44,8 @@ const userInitial = computed(() =>
|
|
|
43
44
|
:class="[
|
|
44
45
|
'flex flex-col h-full',
|
|
45
46
|
floating
|
|
46
|
-
? 'bg-white dark:bg-slate-
|
|
47
|
-
: 'bg-white dark:bg-slate-
|
|
47
|
+
? 'bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden'
|
|
48
|
+
: 'bg-white dark:bg-slate-900 border-e border-slate-200 dark:border-slate-800',
|
|
48
49
|
]"
|
|
49
50
|
>
|
|
50
51
|
<!-- Logo + mobile close -->
|
|
@@ -54,7 +55,7 @@ const userInitial = computed(() =>
|
|
|
54
55
|
</div>
|
|
55
56
|
<button
|
|
56
57
|
type="button"
|
|
57
|
-
class="lg:hidden size-7 inline-flex justify-center items-center rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-
|
|
58
|
+
class="lg:hidden size-7 inline-flex justify-center items-center rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
|
|
58
59
|
@click="close"
|
|
59
60
|
>
|
|
60
61
|
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
@@ -69,17 +70,23 @@ const userInitial = computed(() =>
|
|
|
69
70
|
</div>
|
|
70
71
|
|
|
71
72
|
<!-- Nav menu (scrollable) -->
|
|
72
|
-
<div
|
|
73
|
-
[
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
<div
|
|
74
|
+
:class="[
|
|
75
|
+
'flex-1 min-h-0 overflow-y-auto',
|
|
76
|
+
'[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-slate-200 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600',
|
|
77
|
+
menuSize ?? 'text-sm',
|
|
78
|
+
]"
|
|
79
|
+
>
|
|
78
80
|
<slot name="menu" />
|
|
79
81
|
</div>
|
|
80
82
|
|
|
81
83
|
<!-- User footer -->
|
|
82
|
-
<div class="shrink-0 border-t border-slate-100 dark:border-slate-
|
|
84
|
+
<div class="shrink-0 border-t border-slate-100 dark:border-slate-800/60 px-3 py-3 space-y-2">
|
|
85
|
+
|
|
86
|
+
<!-- Controls slot (dark mode, notifications, etc.) -->
|
|
87
|
+
<div v-if="$slots['user-controls']" class="flex items-center gap-x-1.5">
|
|
88
|
+
<slot name="user-controls" />
|
|
89
|
+
</div>
|
|
83
90
|
|
|
84
91
|
<!-- User info + logout -->
|
|
85
92
|
<div v-if="user" class="flex items-center gap-x-2.5 px-1">
|
|
@@ -92,7 +99,7 @@ const userInitial = computed(() =>
|
|
|
92
99
|
</div>
|
|
93
100
|
<button
|
|
94
101
|
type="button"
|
|
95
|
-
class="size-7 inline-flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-
|
|
102
|
+
class="size-7 inline-flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors shrink-0"
|
|
96
103
|
title="Cerrar sesión"
|
|
97
104
|
@click="emit('logout')"
|
|
98
105
|
>
|
|
@@ -102,11 +109,6 @@ const userInitial = computed(() =>
|
|
|
102
109
|
</button>
|
|
103
110
|
</div>
|
|
104
111
|
|
|
105
|
-
<!-- Controls slot (dark mode, notifications, etc.) -->
|
|
106
|
-
<div v-if="$slots['user-controls']" class="flex items-center gap-x-1.5">
|
|
107
|
-
<slot name="user-controls" />
|
|
108
|
-
</div>
|
|
109
|
-
|
|
110
112
|
<!-- Env / extra slot -->
|
|
111
113
|
<slot name="user-footer" />
|
|
112
114
|
</div>
|
|
@@ -13,22 +13,22 @@ const slots = useSlots()
|
|
|
13
13
|
const iconComponent = computed(() => props.icon ? TablerIcons[props.icon] ?? null : null)
|
|
14
14
|
|
|
15
15
|
const iconColorClass = computed(() => ({
|
|
16
|
-
slate: 'bg-slate-100 dark:bg-slate-
|
|
16
|
+
slate: 'bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400',
|
|
17
17
|
blue: 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400',
|
|
18
18
|
green: 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400',
|
|
19
19
|
amber: 'bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400',
|
|
20
20
|
red: 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400',
|
|
21
21
|
purple: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400',
|
|
22
22
|
rose: 'bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400',
|
|
23
|
-
gray: 'bg-slate-100 dark:bg-slate-
|
|
24
|
-
}[props.color] ?? 'bg-slate-100 dark:bg-slate-
|
|
23
|
+
gray: 'bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400',
|
|
24
|
+
}[props.color] ?? 'bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400'))
|
|
25
25
|
</script>
|
|
26
26
|
|
|
27
27
|
<template>
|
|
28
28
|
<div class="space-y-4">
|
|
29
29
|
|
|
30
30
|
<!-- Page header card -->
|
|
31
|
-
<div v-if="title" class="flex items-center justify-between bg-white dark:bg-slate-
|
|
31
|
+
<div v-if="title" class="flex items-center justify-between bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm px-4 py-3">
|
|
32
32
|
<div class="flex items-center gap-x-4 min-w-0">
|
|
33
33
|
<div v-if="iconComponent" class="shrink-0 size-10 rounded-xl flex items-center justify-center border border-current/15" :class="iconColorClass">
|
|
34
34
|
<component :is="iconComponent" class="size-5" stroke="1.5" />
|
package/components/Nav/Tabs.vue
CHANGED
|
@@ -28,7 +28,7 @@ const colorTextClass = computed(() => ({
|
|
|
28
28
|
}[props.color] ?? 'text-blue-600 dark:text-blue-400'))
|
|
29
29
|
|
|
30
30
|
const resolvedActiveClass = computed(() =>
|
|
31
|
-
props.activeClass ?? `bg-white dark:bg-slate-
|
|
31
|
+
props.activeClass ?? `bg-white dark:bg-slate-900 shadow-sm ${colorTextClass.value}`
|
|
32
32
|
)
|
|
33
33
|
|
|
34
34
|
const route = useRoute()
|
|
@@ -38,7 +38,7 @@ const isActive = (tab: Tab) =>
|
|
|
38
38
|
</script>
|
|
39
39
|
|
|
40
40
|
<template>
|
|
41
|
-
<div class="flex items-center gap-x-1 p-1 bg-slate-100 dark:bg-slate-900/50 rounded-xl w-fit border border-slate-200 dark:border-slate-
|
|
41
|
+
<div class="flex items-center gap-x-1 p-1 bg-slate-100 dark:bg-slate-900/50 rounded-xl w-fit border border-slate-200 dark:border-slate-800">
|
|
42
42
|
<NuxtLink
|
|
43
43
|
v-for="tab in tabs"
|
|
44
44
|
:key="tab.to"
|
|
@@ -203,10 +203,10 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
|
|
|
203
203
|
<div class="relative" ref="containerRef">
|
|
204
204
|
|
|
205
205
|
<!-- Card único -->
|
|
206
|
-
<div class="bg-white dark:bg-slate-
|
|
206
|
+
<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm overflow-hidden">
|
|
207
207
|
|
|
208
208
|
<!-- Toolbar -->
|
|
209
|
-
<div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-
|
|
209
|
+
<div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-800">
|
|
210
210
|
<div v-if="showSearch" class="flex-1 min-w-48">
|
|
211
211
|
<Forms.Input v-model="search" type="search" :placeholder="searchPlaceholder" :icon-left="IconSearch" />
|
|
212
212
|
</div>
|
|
@@ -219,7 +219,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
|
|
|
219
219
|
'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
|
|
220
220
|
showFilterPanel || activeFilterCount > 0
|
|
221
221
|
? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
|
|
222
|
-
: 'border-slate-200 dark:border-slate-
|
|
222
|
+
: 'border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800'
|
|
223
223
|
]"
|
|
224
224
|
>
|
|
225
225
|
<IconAdjustmentsHorizontal class="size-4" stroke="1.5" />
|
|
@@ -238,7 +238,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
|
|
|
238
238
|
<div
|
|
239
239
|
v-if="showFilterPanel"
|
|
240
240
|
ref="filterPanelRef"
|
|
241
|
-
class="absolute top-full left-0 z-50 mt-1.5 bg-white dark:bg-slate-
|
|
241
|
+
class="absolute top-full left-0 z-50 mt-1.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl p-3 min-w-56 max-h-96 overflow-y-auto"
|
|
242
242
|
>
|
|
243
243
|
<p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3 px-1">Filtros</p>
|
|
244
244
|
<TableFilter v-model="activeFilters" :columns="filtersConfig" />
|
|
@@ -255,7 +255,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
|
|
|
255
255
|
'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
|
|
256
256
|
showColumnPanel
|
|
257
257
|
? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
|
|
258
|
-
: 'border-slate-200 dark:border-slate-
|
|
258
|
+
: 'border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800'
|
|
259
259
|
]"
|
|
260
260
|
>
|
|
261
261
|
<IconLayoutColumns class="size-4" />
|
|
@@ -303,7 +303,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
|
|
|
303
303
|
>
|
|
304
304
|
<div
|
|
305
305
|
v-if="previewRow && previewEnabled"
|
|
306
|
-
class="absolute top-0 right-0 z-30 flex bg-white dark:bg-slate-
|
|
306
|
+
class="absolute top-0 right-0 z-30 flex bg-white dark:bg-slate-900 border-l border-slate-200 dark:border-slate-800 shadow-[-4px_0_16px_rgba(0,0,0,0.06)]"
|
|
307
307
|
:style="{ width: (100 - currentRatio) + '%', bottom: paginationHeight + 'px' }"
|
|
308
308
|
>
|
|
309
309
|
<!-- Resize handle -->
|
|
@@ -333,7 +333,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
|
|
|
333
333
|
<div
|
|
334
334
|
v-if="showColumnPanel"
|
|
335
335
|
ref="columnPanelRef"
|
|
336
|
-
class="absolute top-12 right-0 z-50 bg-white dark:bg-slate-
|
|
336
|
+
class="absolute top-12 right-0 z-50 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
|
|
337
337
|
>
|
|
338
338
|
<p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 px-1">
|
|
339
339
|
Columnas visibles
|
|
@@ -349,7 +349,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
|
|
|
349
349
|
class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none transition-colors"
|
|
350
350
|
:class="dragOverKey === col.key
|
|
351
351
|
? 'bg-blue-50 dark:bg-blue-900/20 ring-1 ring-blue-300 dark:ring-blue-700'
|
|
352
|
-
: 'hover:bg-slate-50 dark:hover:bg-slate-
|
|
352
|
+
: 'hover:bg-slate-50 dark:hover:bg-slate-800 cursor-grab'"
|
|
353
353
|
>
|
|
354
354
|
<IconGripVertical class="size-4 text-slate-300 dark:text-slate-600 shrink-0" />
|
|
355
355
|
<input
|