@innertia-solutions/nuxt-theme-spark 0.1.34 → 0.1.36
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/Table/Standard.vue +3 -6
- package/components/TableExportable.vue +119 -122
- package/package.json +1 -1
|
@@ -92,15 +92,12 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
|
|
|
92
92
|
<!-- Toolbar -->
|
|
93
93
|
<div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-700">
|
|
94
94
|
<!-- Search -->
|
|
95
|
-
<div v-if="showSearch" class="
|
|
96
|
-
<
|
|
97
|
-
<IconSearch class="size-4 text-slate-400" stroke="1.5" />
|
|
98
|
-
</div>
|
|
99
|
-
<input
|
|
95
|
+
<div v-if="showSearch" class="flex-1 min-w-48">
|
|
96
|
+
<Forms.Input
|
|
100
97
|
v-model="search"
|
|
101
98
|
type="search"
|
|
102
99
|
:placeholder="searchPlaceholder"
|
|
103
|
-
|
|
100
|
+
:icon-left="IconSearch"
|
|
104
101
|
/>
|
|
105
102
|
</div>
|
|
106
103
|
|
|
@@ -7,17 +7,19 @@ import {
|
|
|
7
7
|
IconDownload,
|
|
8
8
|
} from '@tabler/icons-vue'
|
|
9
9
|
|
|
10
|
-
// Modal with format selector, pre-filled filename, columns checkboxes
|
|
11
10
|
const props = defineProps({
|
|
12
11
|
tableRef: { type: Object, default: null },
|
|
13
12
|
name: { type: String, default: 'export' },
|
|
14
|
-
columns: { type: Array, default: () => [] },
|
|
13
|
+
columns: { type: Array, default: () => [] },
|
|
15
14
|
})
|
|
16
15
|
|
|
17
16
|
const isOpen = ref(false)
|
|
18
17
|
const format = ref('xlsx')
|
|
19
18
|
const filename = ref(props.name)
|
|
20
19
|
const selectedColumns = ref([])
|
|
20
|
+
const btnRef = ref(null)
|
|
21
|
+
const panelRef = ref(null)
|
|
22
|
+
const panelStyle = ref({})
|
|
21
23
|
|
|
22
24
|
watch(() => props.columns, (cols) => {
|
|
23
25
|
selectedColumns.value = cols.map(c => c.key)
|
|
@@ -26,10 +28,10 @@ watch(() => props.columns, (cols) => {
|
|
|
26
28
|
watch(() => props.name, (v) => { filename.value = v })
|
|
27
29
|
|
|
28
30
|
const formats = [
|
|
29
|
-
{ value: 'xlsx', label: 'Excel', icon:
|
|
30
|
-
{ value: 'csv',
|
|
31
|
-
{ value: 'pdf',
|
|
32
|
-
{ value: 'json', label: 'JSON',
|
|
31
|
+
{ value: 'xlsx', label: 'Excel', icon: IconFileTypeXls },
|
|
32
|
+
{ value: 'csv', label: 'CSV', icon: IconFileTypeCsv },
|
|
33
|
+
{ value: 'pdf', label: 'PDF', icon: IconFileTypePdf },
|
|
34
|
+
{ value: 'json', label: 'JSON', icon: IconCodeDots },
|
|
33
35
|
]
|
|
34
36
|
|
|
35
37
|
const toggleColumn = (key) => {
|
|
@@ -46,7 +48,33 @@ const toggleAll = () => {
|
|
|
46
48
|
}
|
|
47
49
|
|
|
48
50
|
const allSelected = computed(() => selectedColumns.value.length === props.columns.length)
|
|
49
|
-
|
|
51
|
+
|
|
52
|
+
const open = () => {
|
|
53
|
+
if (!btnRef.value) return
|
|
54
|
+
const rect = btnRef.value.getBoundingClientRect()
|
|
55
|
+
panelStyle.value = {
|
|
56
|
+
position: 'fixed',
|
|
57
|
+
top: (rect.bottom + 6) + 'px',
|
|
58
|
+
right: (window.innerWidth - rect.right) + 'px',
|
|
59
|
+
}
|
|
60
|
+
isOpen.value = true
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
const toggle = () => isOpen.value ? isOpen.value = false : open()
|
|
64
|
+
|
|
65
|
+
const onOutsideClick = (e) => {
|
|
66
|
+
if (
|
|
67
|
+
panelRef.value && !panelRef.value.contains(e.target) &&
|
|
68
|
+
btnRef.value && !btnRef.value.contains(e.target)
|
|
69
|
+
) {
|
|
70
|
+
isOpen.value = false
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
watch(isOpen, (v) => {
|
|
75
|
+
if (v) document.addEventListener('mousedown', onOutsideClick)
|
|
76
|
+
else document.removeEventListener('mousedown', onOutsideClick)
|
|
77
|
+
})
|
|
50
78
|
|
|
51
79
|
const doExport = () => {
|
|
52
80
|
if (props.tableRef) {
|
|
@@ -55,149 +83,118 @@ const doExport = () => {
|
|
|
55
83
|
isOpen.value = false
|
|
56
84
|
}
|
|
57
85
|
|
|
58
|
-
const open = () => { isOpen.value = true }
|
|
59
|
-
|
|
60
86
|
defineExpose({ open })
|
|
61
87
|
</script>
|
|
62
88
|
|
|
63
89
|
<template>
|
|
64
|
-
<div>
|
|
90
|
+
<div class="relative">
|
|
65
91
|
<button
|
|
92
|
+
ref="btnRef"
|
|
66
93
|
type="button"
|
|
67
|
-
@click="
|
|
68
|
-
class="
|
|
94
|
+
@click="toggle"
|
|
95
|
+
:class="[
|
|
96
|
+
'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
|
|
97
|
+
isOpen
|
|
98
|
+
? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
|
|
99
|
+
: 'border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
|
|
100
|
+
]"
|
|
69
101
|
>
|
|
70
|
-
<IconDownload class="
|
|
102
|
+
<IconDownload class="size-4" stroke="1.5" />
|
|
71
103
|
Exportar
|
|
72
104
|
</button>
|
|
73
105
|
|
|
74
|
-
<!--
|
|
106
|
+
<!-- Dropdown panel — teleported to body to avoid overflow-hidden clipping -->
|
|
75
107
|
<Teleport to="body">
|
|
76
108
|
<Transition
|
|
77
|
-
enter-active-class="transition ease-out duration-
|
|
78
|
-
enter-from-class="opacity-0"
|
|
79
|
-
enter-to-class="opacity-100"
|
|
80
|
-
leave-active-class="transition ease-in duration-
|
|
81
|
-
leave-from-class="opacity-100"
|
|
82
|
-
leave-to-class="opacity-0"
|
|
109
|
+
enter-active-class="transition ease-out duration-150"
|
|
110
|
+
enter-from-class="opacity-0 translate-y-1 scale-95"
|
|
111
|
+
enter-to-class="opacity-100 translate-y-0 scale-100"
|
|
112
|
+
leave-active-class="transition ease-in duration-100"
|
|
113
|
+
leave-from-class="opacity-100 translate-y-0 scale-100"
|
|
114
|
+
leave-to-class="opacity-0 translate-y-1 scale-95"
|
|
83
115
|
>
|
|
84
116
|
<div
|
|
85
117
|
v-if="isOpen"
|
|
86
|
-
|
|
87
|
-
|
|
118
|
+
ref="panelRef"
|
|
119
|
+
:style="panelStyle"
|
|
120
|
+
class="z-50 w-72 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-2xl"
|
|
88
121
|
>
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<div
|
|
95
|
-
v-if="isOpen"
|
|
96
|
-
class="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md border border-slate-200 dark:border-slate-700"
|
|
97
|
-
>
|
|
98
|
-
<div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-slate-700">
|
|
99
|
-
<h3 class="font-semibold text-slate-800 dark:text-slate-100">Exportar tabla</h3>
|
|
122
|
+
<div class="p-3 space-y-4">
|
|
123
|
+
<!-- Format -->
|
|
124
|
+
<div>
|
|
125
|
+
<p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2">Formato</p>
|
|
126
|
+
<div class="grid grid-cols-4 gap-1.5">
|
|
100
127
|
<button
|
|
128
|
+
v-for="f in formats"
|
|
129
|
+
:key="f.value"
|
|
101
130
|
type="button"
|
|
102
|
-
@click="
|
|
103
|
-
class="
|
|
131
|
+
@click="format = f.value"
|
|
132
|
+
:class="[
|
|
133
|
+
'flex flex-col items-center gap-1 py-2 px-1 rounded-lg border text-xs font-medium transition-colors',
|
|
134
|
+
format === f.value
|
|
135
|
+
? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:border-blue-500 dark:text-blue-300'
|
|
136
|
+
: 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
|
|
137
|
+
]"
|
|
104
138
|
>
|
|
105
|
-
<
|
|
106
|
-
|
|
107
|
-
</svg>
|
|
139
|
+
<component :is="f.icon" class="size-4" stroke="1.5" />
|
|
140
|
+
{{ f.label }}
|
|
108
141
|
</button>
|
|
109
142
|
</div>
|
|
143
|
+
</div>
|
|
110
144
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
v-for="f in formats"
|
|
118
|
-
:key="f.value"
|
|
119
|
-
type="button"
|
|
120
|
-
@click="format = f.value"
|
|
121
|
-
:class="[
|
|
122
|
-
'flex flex-col items-center gap-1.5 p-3 rounded-xl border text-sm font-medium transition-colors',
|
|
123
|
-
format === f.value
|
|
124
|
-
? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300'
|
|
125
|
-
: 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
|
|
126
|
-
]"
|
|
127
|
-
>
|
|
128
|
-
<IconFileTypeXls v-if="f.value === 'xlsx'" class="size-5" stroke="1.5" />
|
|
129
|
-
<IconFileTypeCsv v-else-if="f.value === 'csv'" class="size-5" stroke="1.5" />
|
|
130
|
-
<IconFileTypePdf v-else-if="f.value === 'pdf'" class="size-5" stroke="1.5" />
|
|
131
|
-
<IconCodeDots v-else class="size-5" stroke="1.5" />
|
|
132
|
-
{{ f.label }}
|
|
133
|
-
</button>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
|
|
137
|
-
<!-- Filename -->
|
|
138
|
-
<div>
|
|
139
|
-
<label class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider block mb-2">
|
|
140
|
-
Nombre de archivo
|
|
141
|
-
</label>
|
|
142
|
-
<div class="flex items-center gap-2">
|
|
143
|
-
<input
|
|
144
|
-
v-model="filename"
|
|
145
|
-
type="text"
|
|
146
|
-
class="flex-1 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
|
147
|
-
/>
|
|
148
|
-
<span class="text-sm text-slate-400">.{{ format }}</span>
|
|
149
|
-
</div>
|
|
150
|
-
</div>
|
|
151
|
-
|
|
152
|
-
<!-- Columns -->
|
|
153
|
-
<div v-if="columns.length > 0">
|
|
154
|
-
<div class="flex items-center justify-between mb-2">
|
|
155
|
-
<p class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Columnas</p>
|
|
156
|
-
<button
|
|
157
|
-
type="button"
|
|
158
|
-
@click="toggleAll"
|
|
159
|
-
class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline"
|
|
160
|
-
>
|
|
161
|
-
{{ allSelected ? 'Deseleccionar todas' : 'Seleccionar todas' }}
|
|
162
|
-
</button>
|
|
163
|
-
</div>
|
|
164
|
-
<div class="grid grid-cols-2 gap-1.5 max-h-40 overflow-y-auto pr-1">
|
|
165
|
-
<label
|
|
166
|
-
v-for="col in columns"
|
|
167
|
-
:key="col.key"
|
|
168
|
-
class="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
|
|
169
|
-
>
|
|
170
|
-
<input
|
|
171
|
-
type="checkbox"
|
|
172
|
-
:checked="selectedColumns.includes(col.key)"
|
|
173
|
-
@change="toggleColumn(col.key)"
|
|
174
|
-
class="rounded border-gray-300 dark:bg-slate-700 dark:border-slate-600 text-indigo-600"
|
|
175
|
-
/>
|
|
176
|
-
<span class="text-sm text-slate-700 dark:text-slate-200 truncate">{{ col.label }}</span>
|
|
177
|
-
</label>
|
|
178
|
-
</div>
|
|
179
|
-
</div>
|
|
145
|
+
<!-- Filename -->
|
|
146
|
+
<div>
|
|
147
|
+
<p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">Archivo</p>
|
|
148
|
+
<div class="flex items-center gap-1.5">
|
|
149
|
+
<Forms.Input v-model="filename" type="text" placeholder="nombre" class="flex-1" />
|
|
150
|
+
<span class="text-sm text-slate-400 shrink-0">.{{ format }}</span>
|
|
180
151
|
</div>
|
|
152
|
+
</div>
|
|
181
153
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
Cancelar
|
|
154
|
+
<!-- Columns -->
|
|
155
|
+
<div v-if="columns.length > 0">
|
|
156
|
+
<div class="flex items-center justify-between mb-1.5">
|
|
157
|
+
<p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">Columnas</p>
|
|
158
|
+
<button type="button" @click="toggleAll" class="text-[10px] text-blue-600 dark:text-blue-400 hover:underline font-medium">
|
|
159
|
+
{{ allSelected ? 'Quitar todas' : 'Todas' }}
|
|
189
160
|
</button>
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
161
|
+
</div>
|
|
162
|
+
<div class="grid grid-cols-2 gap-1 max-h-36 overflow-y-auto">
|
|
163
|
+
<label
|
|
164
|
+
v-for="col in columns"
|
|
165
|
+
:key="col.key"
|
|
166
|
+
class="flex items-center gap-2 py-1 px-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
|
|
194
167
|
>
|
|
195
|
-
<
|
|
196
|
-
|
|
197
|
-
|
|
168
|
+
<input
|
|
169
|
+
type="checkbox"
|
|
170
|
+
:checked="selectedColumns.includes(col.key)"
|
|
171
|
+
@change="toggleColumn(col.key)"
|
|
172
|
+
class="rounded border-gray-300 dark:bg-slate-700 dark:border-slate-600 text-blue-600"
|
|
173
|
+
/>
|
|
174
|
+
<span class="text-xs text-slate-700 dark:text-slate-200 truncate">{{ col.label }}</span>
|
|
175
|
+
</label>
|
|
198
176
|
</div>
|
|
199
177
|
</div>
|
|
200
|
-
</
|
|
178
|
+
</div>
|
|
179
|
+
|
|
180
|
+
<!-- Footer -->
|
|
181
|
+
<div class="flex gap-2 px-3 pb-3">
|
|
182
|
+
<button
|
|
183
|
+
type="button"
|
|
184
|
+
@click="isOpen = false"
|
|
185
|
+
class="flex-1 py-1.5 text-sm font-medium rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
|
|
186
|
+
>
|
|
187
|
+
Cancelar
|
|
188
|
+
</button>
|
|
189
|
+
<button
|
|
190
|
+
type="button"
|
|
191
|
+
@click="doExport"
|
|
192
|
+
class="flex-1 py-1.5 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors inline-flex items-center justify-center gap-1.5"
|
|
193
|
+
>
|
|
194
|
+
<IconDownload class="size-4" stroke="1.5" />
|
|
195
|
+
Exportar
|
|
196
|
+
</button>
|
|
197
|
+
</div>
|
|
201
198
|
</div>
|
|
202
199
|
</Transition>
|
|
203
200
|
</Teleport>
|