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

package/components/TableExportable.vue

@@ -7,29 +7,33 @@ 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: () => [] }, // [{ key, label }]
+  columns: { type: Array, default: () => [] },
 })
 
 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({})
 
-watch(() => props.columns, (cols) => {
+const exportableColumns = computed(() => props.columns.filter(c => c.label))
+
+watch(exportableColumns, (cols) => {
   selectedColumns.value = cols.map(c => c.key)
 }, { immediate: true })
 
 watch(() => props.name, (v) => { filename.value = v })
 
 const formats = [
-  { value: 'xlsx', label: 'Excel', icon: 'xlsx' },
-  { value: 'csv', label: 'CSV', icon: 'csv' },
-  { value: 'pdf', label: 'PDF', icon: 'pdf' },
-  { value: 'json', label: 'JSON', icon: 'json' },
+  { value: 'xlsx', label: 'Excel', icon: IconFileTypeXls },
+  { value: 'csv',  label: 'CSV',   icon: IconFileTypeCsv },
+  { value: 'pdf',  label: 'PDF',   icon: IconFileTypePdf },
+  { value: 'json', label: 'JSON',  icon: IconCodeDots },
 ]
 
 const toggleColumn = (key) => {
@@ -39,165 +43,181 @@ const toggleColumn = (key) => {
 }
 
 const toggleAll = () => {
-  if (selectedColumns.value.length === props.columns.length)
+  if (selectedColumns.value.length === exportableColumns.value.length)
     selectedColumns.value = []
   else
-    selectedColumns.value = props.columns.map(c => c.key)
+    selectedColumns.value = exportableColumns.value.map(c => c.key)
 }
 
-const allSelected = computed(() => selectedColumns.value.length === props.columns.length)
-const indeterminate = computed(() => selectedColumns.value.length > 0 && !allSelected.value)
+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 doExport = () => {
-  if (props.tableRef) {
+  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 {
     props.tableRef.exportTable(format.value, true, true)
   }
   isOpen.value = false
 }
 
-const open = () => { isOpen.value = true }
-
 defineExpose({ open })
 </script>
 
 <template>
-  <div>
+  <div class="relative">
     <button
+      ref="btnRef"
       type="button"
-      @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"
+      @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'
+      ]"
     >
-      <IconDownload class="shrink-0 size-4" stroke="1.5" />
+      <IconDownload class="size-4" stroke="1.5" />
       Exportar
     </button>
 
-    <!-- Modal -->
+    <!-- Dropdown panel — teleported to body to avoid overflow-hidden clipping -->
     <Teleport to="body">
       <Transition
-        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"
+        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"
       >
         <div
           v-if="isOpen"
-          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
-          @click.self="isOpen = false"
+          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"
         >
-          <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>
+          <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">
                 <button
+                  v-for="f in formats"
+                  :key="f.value"
                   type="button"
-                  @click="isOpen = false"
-                  class="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
+                  @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'
+                  ]"
                 >
-                  <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>
+                  <component :is="f.icon" class="size-4" stroke="1.5" />
+                  {{ f.label }}
                 </button>
               </div>
+            </div>
 
-              <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>
+            <!-- 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>
+            </div>
 
-              <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
+            <!-- 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' }}
                 </button>
-                <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"
+              </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"
                 >
-                  <IconDownload class="size-4" stroke="1.5" />
-                  Exportar
-                </button>
+                  <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>
               </div>
             </div>
-          </Transition>
+          </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>
         </div>
       </Transition>
     </Teleport>

package/package.json

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

package/spark.css

@@ -8,6 +8,11 @@
 @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);
 
@@ -113,9 +118,9 @@
 
 /* ─── Dark theme ────────────────────────────────────────────── */
 .dark {
-    --background: #020617;
-    --background-1: #0f172a;
-    --background-2: #111827;
+    --background: #020617;    /* slate-950 — base page */
+    --background-1: #0f172a;  /* slate-900 — panels */
+    --background-2: #1e293b;  /* slate-800 — elevated */
     --foreground: #f8fafc;
     --foreground-inverse: #020617;
 
@@ -125,35 +130,35 @@
     --primary-focus: #93c5fd;
     --primary-line: #3b82f6;
 
-    --card: #111827;
-    --card-line: #1f2937;
-    --card-divider: #1f2937;
+    --card: #0f172a;
+    --card-line: #1e293b;
+    --card-divider: #1e293b;
 
-    --layer: #111827;
-    --layer-line: #1f2937;
+    --layer: #0f172a;
+    --layer-line: #1e293b;
     --layer-hover: #1e293b;
     --layer-focus: #334155;
 
-    --surface: #1f2937;
+    --surface: #1e293b;
     --surface-1: #334155;
-    --surface-foreground: #e5e7eb;
+    --surface-foreground: #e2e8f0;
 
-    --muted: #111827;
+    --muted: #0f172a;
     --muted-foreground: #94a3b8;
     --muted-foreground-1: #cbd5e1;
     --muted-foreground-2: #64748b;
     --muted-hover: #1e293b;
     --muted-focus: #334155;
 
-    --navbar: #111827;
-    --navbar-line: #1f2937;
-    --sidebar: #111827;
-    --sidebar-line: #1f2937;
+    --navbar: #0f172a;
+    --navbar-line: #1e293b;
+    --sidebar: #0f172a;
+    --sidebar-line: #1e293b;
 
-    --dropdown: #111827;
-    --dropdown-line: #1f2937;
-    --dropdown-divider: #1f2937;
-    --dropdown-item-foreground: #e5e7eb;
+    --dropdown: #0f172a;
+    --dropdown-line: #1e293b;
+    --dropdown-divider: #1e293b;
+    --dropdown-item-foreground: #e2e8f0;
     --dropdown-item-hover: #1e293b;
     --dropdown-item-focus: #334155;
 
@@ -161,7 +166,7 @@
     --tooltip-line: #f8fafc;
     --tooltip-foreground: #020617;
 
-    --scrollbar-track: #111827;
+    --scrollbar-track: #0f172a;
     --scrollbar-thumb: #475569;
 }
 

package/components/Admin/Header.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  title?: string
-}>()
-
-const sidebar = inject('vantage:sidebar', null) as any
-</script>
-
-<template>
-  <header class="sticky top-0 z-40 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 lg:px-6 h-14 flex items-center gap-x-3">
-    <!-- Hamburger mobile -->
-    <button type="button"
-      class="lg:hidden size-8 flex items-center justify-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
-      @click="sidebar?.open()">
-      <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
-      </svg>
-    </button>
-
-    <!-- Left slot -->
-    <div class="flex-1 flex items-center gap-x-3">
-      <slot name="left">
-        <span v-if="title" class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ title }}</span>
-      </slot>
-    </div>
-
-    <!-- Right slot -->
-    <div class="flex items-center gap-x-2">
-      <slot name="right" />
-    </div>
-  </header>
-</template>