@innertia-solutions/nuxt-theme-spark 0.1.87 → 0.1.88

package/components/TableExportable.vue

@@ -7,33 +7,29 @@ import {
   IconDownload,
 } from '@tabler/icons-vue'
 
+// Modal with format selector, pre-filled filename, columns checkboxes
 const props = defineProps({
   tableRef: { type: Object, default: null },
   name: { type: String, default: 'export' },
-  columns: { type: Array, default: () => [] },
+  columns: { type: Array, default: () => [] }, // [{ key, label }]
 })
 
 const isOpen = ref(false)
 const format = ref('xlsx')
 const filename = ref(props.name)
 const selectedColumns = ref([])
-const btnRef = ref(null)
-const panelRef = ref(null)
-const panelStyle = ref({})
 
-const exportableColumns = computed(() => props.columns.filter(c => c.label))
-
-watch(exportableColumns, (cols) => {
+watch(() => props.columns, (cols) => {
   selectedColumns.value = cols.map(c => c.key)
 }, { immediate: true })
 
 watch(() => props.name, (v) => { filename.value = v })
 
 const formats = [
-  { value: 'xlsx', label: 'Excel', icon: IconFileTypeXls },
-  { value: 'csv',  label: 'CSV',   icon: IconFileTypeCsv },
-  { value: 'pdf',  label: 'PDF',   icon: IconFileTypePdf },
-  { value: 'json', label: 'JSON',  icon: IconCodeDots },
+  { value: 'xlsx', label: 'Excel', icon: 'xlsx' },
+  { value: 'csv', label: 'CSV', icon: 'csv' },
+  { value: 'pdf', label: 'PDF', icon: 'pdf' },
+  { value: 'json', label: 'JSON', icon: 'json' },
 ]
 
 const toggleColumn = (key) => {
@@ -43,181 +39,165 @@ const toggleColumn = (key) => {
 }
 
 const toggleAll = () => {
-  if (selectedColumns.value.length === exportableColumns.value.length)
+  if (selectedColumns.value.length === props.columns.length)
     selectedColumns.value = []
   else
-    selectedColumns.value = exportableColumns.value.map(c => c.key)
+    selectedColumns.value = props.columns.map(c => c.key)
 }
 
-const allSelected = computed(() => selectedColumns.value.length === exportableColumns.value.length)
-
-const open = () => {
-  if (!btnRef.value) return
-  const rect = btnRef.value.getBoundingClientRect()
-  panelStyle.value = {
-    position: 'fixed',
-    top: (rect.bottom + 6) + 'px',
-    right: (window.innerWidth - rect.right) + 'px',
-  }
-  isOpen.value = true
-}
-
-const toggle = () => isOpen.value ? isOpen.value = false : open()
-
-const onOutsideClick = (e) => {
-  if (
-    panelRef.value && !panelRef.value.contains(e.target) &&
-    btnRef.value && !btnRef.value.contains(e.target)
-  ) {
-    isOpen.value = false
-  }
-}
-
-watch(isOpen, (v) => {
-  if (v) document.addEventListener('mousedown', onOutsideClick)
-  else document.removeEventListener('mousedown', onOutsideClick)
-})
-
-const selectedRows = computed(() => {
-  if (!props.tableRef) return { meta: { all: false }, rows: [] }
-  return props.tableRef.getSelectedRows() ?? { meta: { all: false }, rows: [] }
-})
-
-const hasSelection = computed(() => selectedRows.value.rows.length > 0)
+const allSelected = computed(() => selectedColumns.value.length === props.columns.length)
+const indeterminate = computed(() => selectedColumns.value.length > 0 && !allSelected.value)
 
 const doExport = () => {
-  if (!props.tableRef) return
-  if (hasSelection.value) {
-    const ids = selectedRows.value.rows.map(r => r.id)
-    props.tableRef.exportTable(format.value, false, false, ids)
-  } else {
+  if (props.tableRef) {
     props.tableRef.exportTable(format.value, true, true)
   }
   isOpen.value = false
 }
 
+const open = () => { isOpen.value = true }
+
 defineExpose({ open })
 </script>
 
 <template>
-  <div class="relative">
+  <div>
     <button
-      ref="btnRef"
       type="button"
-      @click="toggle"
-      :class="[
-        'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
-        isOpen
-          ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
-          : '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'
-      ]"
+      @click="isOpen = true"
+      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-lg border border-slate-200 bg-white text-slate-800 shadow-2xs hover:bg-slate-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700"
     >
-      <IconDownload class="size-4" stroke="1.5" />
+      <IconDownload class="shrink-0 size-4" stroke="1.5" />
       Exportar
     </button>
 
-    <!-- Dropdown panel — teleported to body to avoid overflow-hidden clipping -->
+    <!-- Modal -->
     <Teleport to="body">
       <Transition
-        enter-active-class="transition ease-out duration-150"
-        enter-from-class="opacity-0 translate-y-1 scale-95"
-        enter-to-class="opacity-100 translate-y-0 scale-100"
-        leave-active-class="transition ease-in duration-100"
-        leave-from-class="opacity-100 translate-y-0 scale-100"
-        leave-to-class="opacity-0 translate-y-1 scale-95"
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition ease-in duration-150"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
       >
         <div
           v-if="isOpen"
-          ref="panelRef"
-          :style="panelStyle"
-          class="z-50 w-72 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-2xl"
+          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
+          @click.self="isOpen = false"
         >
-          <div class="p-3 space-y-4">
-            <!-- Format -->
-            <div>
-              <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2">Formato</p>
-              <div class="grid grid-cols-4 gap-1.5">
+          <Transition
+            enter-active-class="transition ease-out duration-200"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+          >
+            <div
+              v-if="isOpen"
+              class="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md border border-slate-200 dark:border-slate-700"
+            >
+              <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-slate-700">
+                <h3 class="font-semibold text-slate-800 dark:text-slate-100">Exportar tabla</h3>
                 <button
-                  v-for="f in formats"
-                  :key="f.value"
                   type="button"
-                  @click="format = f.value"
-                  :class="[
-                    'flex flex-col items-center gap-1 py-2 px-1 rounded-lg border text-xs font-medium transition-colors',
-                    format === f.value
-                      ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:border-blue-500 dark:text-blue-300'
-                      : 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
-                  ]"
+                  @click="isOpen = false"
+                  class="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
                 >
-                  <component :is="f.icon" class="size-4" stroke="1.5" />
-                  {{ f.label }}
+                  <svg class="size-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                  </svg>
                 </button>
               </div>
-            </div>
 
-            <!-- Filename -->
-            <div>
-              <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">Archivo</p>
-              <div class="flex items-center gap-1.5">
-                <Forms.Input v-model="filename" type="text" placeholder="nombre" class="flex-1" />
-                <span class="text-sm text-slate-400 shrink-0">.{{ format }}</span>
+              <div class="px-6 py-5 space-y-5">
+                <!-- Format selector -->
+                <div>
+                  <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">Formato</p>
+                  <div class="grid grid-cols-4 gap-2">
+                    <button
+                      v-for="f in formats"
+                      :key="f.value"
+                      type="button"
+                      @click="format = f.value"
+                      :class="[
+                        'flex flex-col items-center gap-1.5 p-3 rounded-xl border text-sm font-medium transition-colors',
+                        format === f.value
+                          ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300'
+                          : 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+                      ]"
+                    >
+                      <IconFileTypeXls v-if="f.value === 'xlsx'" class="size-5" stroke="1.5" />
+                      <IconFileTypeCsv v-else-if="f.value === 'csv'" class="size-5" stroke="1.5" />
+                      <IconFileTypePdf v-else-if="f.value === 'pdf'" class="size-5" stroke="1.5" />
+                      <IconCodeDots v-else class="size-5" stroke="1.5" />
+                      {{ f.label }}
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Filename -->
+                <div>
+                  <label class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider block mb-2">
+                    Nombre de archivo
+                  </label>
+                  <div class="flex items-center gap-2">
+                    <input
+                      v-model="filename"
+                      type="text"
+                      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"
+                    />
+                    <span class="text-sm text-slate-400">.{{ format }}</span>
+                  </div>
+                </div>
+
+                <!-- Columns -->
+                <div v-if="columns.length > 0">
+                  <div class="flex items-center justify-between mb-2">
+                    <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Columnas</p>
+                    <button
+                      type="button"
+                      @click="toggleAll"
+                      class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline"
+                    >
+                      {{ allSelected ? 'Deseleccionar todas' : 'Seleccionar todas' }}
+                    </button>
+                  </div>
+                  <div class="grid grid-cols-2 gap-1.5 max-h-40 overflow-y-auto pr-1">
+                    <label
+                      v-for="col in columns"
+                      :key="col.key"
+                      class="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+                    >
+                      <input
+                        type="checkbox"
+                        :checked="selectedColumns.includes(col.key)"
+                        @change="toggleColumn(col.key)"
+                        class="rounded border-gray-300 dark:bg-slate-700 dark:border-slate-600 text-indigo-600"
+                      />
+                      <span class="text-sm text-slate-700 dark:text-slate-200 truncate">{{ col.label }}</span>
+                    </label>
+                  </div>
+                </div>
               </div>
-            </div>
 
-            <!-- Columns -->
-            <div v-if="exportableColumns.length > 0">
-              <div class="flex items-center justify-between mb-1.5">
-                <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">Columnas</p>
-                <button type="button" @click="toggleAll" class="text-[10px] text-blue-600 dark:text-blue-400 hover:underline font-medium">
-                  {{ allSelected ? 'Quitar todas' : 'Todas' }}
+              <div class="flex justify-end gap-2 px-6 py-4 border-t border-slate-100 dark:border-slate-700">
+                <button
+                  type="button"
+                  @click="isOpen = false"
+                  class="py-2 px-4 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"
+                >
+                  Cancelar
                 </button>
-              </div>
-              <div class="grid grid-cols-2 gap-1 max-h-36 overflow-y-auto">
-                <label
-                  v-for="col in exportableColumns"
-                  :key="col.key"
-                  class="flex items-center gap-2 py-1 px-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+                <button
+                  type="button"
+                  @click="doExport"
+                  class="py-2 px-4 text-sm font-medium rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors inline-flex items-center gap-2"
                 >
-                  <input
-                    type="checkbox"
-                    :checked="selectedColumns.includes(col.key)"
-                    @change="toggleColumn(col.key)"
-                    class="rounded border-gray-300 dark:bg-slate-700 dark:border-slate-600 text-blue-600"
-                  />
-                  <span class="text-xs text-slate-700 dark:text-slate-200 truncate">{{ col.label }}</span>
-                </label>
+                  <IconDownload class="size-4" stroke="1.5" />
+                  Exportar
+                </button>
               </div>
             </div>
-          </div>
-
-          <!-- Selection info -->
-          <div class="px-3 pb-2">
-            <p v-if="hasSelection" class="text-xs text-blue-600 dark:text-blue-400 font-medium">
-              Se exportarán {{ selectedRows.rows.length }} fila{{ selectedRows.rows.length !== 1 ? 's' : '' }} seleccionada{{ selectedRows.rows.length !== 1 ? 's' : '' }}
-            </p>
-            <p v-else class="text-xs text-slate-400 dark:text-slate-500">
-              Se exportarán todos los registros
-            </p>
-          </div>
-
-          <!-- Footer -->
-          <div class="flex gap-2 px-3 pb-3">
-            <button
-              type="button"
-              @click="isOpen = false"
-              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"
-            >
-              Cancelar
-            </button>
-            <button
-              type="button"
-              @click="doExport"
-              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"
-            >
-              <IconDownload class="size-4" stroke="1.5" />
-              Exportar
-            </button>
-          </div>
+          </Transition>
         </div>
       </Transition>
     </Teleport>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/nuxt-theme-spark",
-  "version": "0.1.87",
+  "version": "0.1.88",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",

package/spark.css

@@ -8,11 +8,6 @@
 @source "./shared/**/*.{js,ts}";
 @source "./plugins/**/*.{js,ts}";
 
-/* Safelist: clases dinámicas del colorMap (Admin/Page, Nav/Tabs, etc.) */
-@source inline("{text,bg,border}-{blue,green,red,amber,purple,teal,slate}-{50,100,200,400,500,600,700,800,900}");
-@source inline("dark:{text,bg,border}-{blue,green,red,amber,purple,teal,slate}-{50,100,200,400,500,600,700,800,900}");
-@source inline("dark:bg-{blue,green,red,amber,purple,teal}-500/10 dark:border-{blue,green,red,amber,purple,teal}-500/30");
-
 @custom-variant dark (&:where(.dark, .dark *));
 @custom-variant hover (&:hover);
 
@@ -118,9 +113,9 @@
 
 /* ─── Dark theme ────────────────────────────────────────────── */
 .dark {
-    --background: #020617;    /* slate-950 — base page */
-    --background-1: #0f172a;  /* slate-900 — panels */
-    --background-2: #1e293b;  /* slate-800 — elevated */
+    --background: #020617;
+    --background-1: #0f172a;
+    --background-2: #111827;
     --foreground: #f8fafc;
     --foreground-inverse: #020617;
 
@@ -130,35 +125,35 @@
     --primary-focus: #93c5fd;
     --primary-line: #3b82f6;
 
-    --card: #0f172a;
-    --card-line: #1e293b;
-    --card-divider: #1e293b;
+    --card: #111827;
+    --card-line: #1f2937;
+    --card-divider: #1f2937;
 
-    --layer: #0f172a;
-    --layer-line: #1e293b;
+    --layer: #111827;
+    --layer-line: #1f2937;
     --layer-hover: #1e293b;
     --layer-focus: #334155;
 
-    --surface: #1e293b;
+    --surface: #1f2937;
     --surface-1: #334155;
-    --surface-foreground: #e2e8f0;
+    --surface-foreground: #e5e7eb;
 
-    --muted: #0f172a;
+    --muted: #111827;
     --muted-foreground: #94a3b8;
     --muted-foreground-1: #cbd5e1;
     --muted-foreground-2: #64748b;
     --muted-hover: #1e293b;
     --muted-focus: #334155;
 
-    --navbar: #0f172a;
-    --navbar-line: #1e293b;
-    --sidebar: #0f172a;
-    --sidebar-line: #1e293b;
+    --navbar: #111827;
+    --navbar-line: #1f2937;
+    --sidebar: #111827;
+    --sidebar-line: #1f2937;
 
-    --dropdown: #0f172a;
-    --dropdown-line: #1e293b;
-    --dropdown-divider: #1e293b;
-    --dropdown-item-foreground: #e2e8f0;
+    --dropdown: #111827;
+    --dropdown-line: #1f2937;
+    --dropdown-divider: #1f2937;
+    --dropdown-item-foreground: #e5e7eb;
     --dropdown-item-hover: #1e293b;
     --dropdown-item-focus: #334155;
 
@@ -166,7 +161,7 @@
     --tooltip-line: #f8fafc;
     --tooltip-foreground: #020617;
 
-    --scrollbar-track: #0f172a;
+    --scrollbar-track: #111827;
     --scrollbar-thumb: #475569;
 }