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

package/components/Table/Standard.vue

@@ -2,10 +2,9 @@
 import { IconSearch, IconAdjustmentsHorizontal, IconLayoutColumns, IconGripVertical } from '@tabler/icons-vue'
 
 const props = defineProps({
-  table:             { type: Object,  default: null },   // TableDefinition — preferred
-  endpoint:          { type: String,  default: undefined },
+  endpoint:          { type: String,  required: true },
   columns:           { type: Array,   required: true },
-  name:              { type: String,  default: undefined },
+  name:              { type: String,  required: true },
   params:            { type: Object,  default: () => ({}) },
   checkable:         { type: Boolean, default: false },
   cached:            { type: Boolean, default: true },
@@ -19,10 +18,7 @@ const props = defineProps({
   splitRatio:        { type: Number,  default: 60 },
 })
 
-const emit = defineEmits(['row-click', 'loaded', 'preview'])
-
-const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
-const resolvedName     = computed(() => props.table?.name     ?? props.name)
+const emit = defineEmits(['row-click', 'loaded'])
 const slots = useSlots()
 const forwardedSlots = computed(() => {
   const excluded = new Set(['toolbar', 'preview'])
@@ -60,13 +56,12 @@ const paginationHeight = ref(0)
 
 const previewCacheKey = computed(() => `table-preview-${props.name}`)
 
+const previewFromCache = ref(false)
 const closePreview = () => { previewRow.value = null }
 
 const handleRowClick = (row) => {
   if (previewEnabled.value) {
-    const toggled = previewRow.value?.id === row.id ? null : row
-    previewRow.value = toggled
-    if (toggled) emit('preview', toggled)
+    previewRow.value = previewRow.value?.id === row.id ? null : row
   } else {
     emit('row-click', row)
   }
@@ -121,11 +116,16 @@ const onEsc = (e) => { if (e.key === 'Escape' && previewRow.value) closePreview(
 onMounted(() => {
   previewEnabled.value = !!slots.preview
   window.addEventListener('keydown', onEsc)
-  // Restore preview from session cache
+  // Restore preview from session cache — mark as from-cache to skip enter animation
   if (props.cached && previewEnabled.value) {
     try {
       const raw = sessionStorage.getItem(previewCacheKey.value)
-      if (raw) previewRow.value = JSON.parse(raw)
+      if (raw) {
+        previewFromCache.value = true
+        previewRow.value = JSON.parse(raw)
+        await nextTick()
+        previewFromCache.value = false
+      }
     } catch {}
   }
 })
@@ -191,17 +191,17 @@ const reload          = () => tableRef.value?.reload()
 const clearCache      = () => tableRef.value?.clearCache()
 const exportTable     = (format, allPages, filteredRows) => tableRef.value?.exportTable(format, allPages, filteredRows)
 
-defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, closePreview })
+defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
 </script>
 
 <template>
   <div class="relative" ref="containerRef">
 
     <!-- Card único -->
-    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm overflow-hidden">
+    <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-sm overflow-hidden">
 
       <!-- Toolbar -->
-      <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+      <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-700">
         <div v-if="showSearch" class="flex-1 min-w-48">
           <Forms.Input v-model="search" type="search" :placeholder="searchPlaceholder" :icon-left="IconSearch" />
         </div>
@@ -214,7 +214,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
               'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
               showFilterPanel || activeFilterCount > 0
                 ? '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-800 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+                : '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'
             ]"
           >
             <IconAdjustmentsHorizontal class="size-4" stroke="1.5" />
@@ -233,7 +233,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
             <div
               v-if="showFilterPanel"
               ref="filterPanelRef"
-              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"
+              class="absolute top-full left-0 z-50 mt-1.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-2xl p-3 min-w-56 max-h-96 overflow-y-auto"
             >
               <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3 px-1">Filtros</p>
               <TableFilter v-model="activeFilters" :columns="filtersConfig" />
@@ -250,14 +250,14 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
             'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
             showColumnPanel
               ? '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-800 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+              : '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'
           ]"
         >
           <IconLayoutColumns class="size-4" />
           Columnas
         </button>
 
-        <TableExportable v-if="showExport" :table-ref="tableRef" :name="resolvedName" :columns="columns" />
+        <TableExportable v-if="showExport" :table-ref="tableRef" :name="name" :columns="columns" />
       </div>
 
       <!-- Contenido: tabla siempre full width + preview overlay -->
@@ -266,9 +266,9 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
         <!-- Tabla -->
         <Table
           ref="tableRef"
-          :endpoint="resolvedEndpoint"
+          :endpoint="endpoint"
           :columns="columns"
-          :name="resolvedName"
+          :name="name"
           :params="mergedParams"
           :search="search"
           :checkable="checkable"
@@ -289,16 +289,16 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
 
         <!-- Preview panel overlay — slides in from right, tapa la tabla -->
         <Transition
-          enter-active-class="transition ease-out duration-200"
-          enter-from-class="opacity-0 translate-x-6"
-          enter-to-class="opacity-100 translate-x-0"
+          :enter-active-class="previewFromCache ? '' : 'transition ease-out duration-200'"
+          :enter-from-class="previewFromCache ? '' : 'opacity-0 translate-x-6'"
+          :enter-to-class="previewFromCache ? '' : 'opacity-100 translate-x-0'"
           leave-active-class="transition ease-in duration-150"
           leave-from-class="opacity-100 translate-x-0"
           leave-to-class="opacity-0 translate-x-6"
         >
           <div
             v-if="previewRow && previewEnabled"
-            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)]"
+            class="absolute top-0 right-0 z-30 flex bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700 shadow-[-4px_0_16px_rgba(0,0,0,0.06)]"
             :style="{ width: (100 - currentRatio) + '%', bottom: paginationHeight + 'px' }"
           >
             <!-- Resize handle -->
@@ -328,7 +328,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
       <div
         v-if="showColumnPanel"
         ref="columnPanelRef"
-        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"
+        class="absolute top-12 right-0 z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
       >
         <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 px-1">
           Columnas visibles

package/components/Table.vue

@@ -309,26 +309,6 @@ onBeforeUnmount(() => {
   if (props.cached && tableData.value.length > 0) saveToCache()
 })
 
-// ─── TanStack Query invalidation signal ───────────────────────────────────────
-// A lightweight query keyed by table name. Calling invalidateQueries(['table', name])
-// from anywhere triggers clearCache + scheduleFetch without a full refactor.
-const queryClient = useQueryClient()
-const { data: _invalidateSignal } = useQuery({
-  queryKey: computed(() => ['table', props.name]),
-  queryFn: () => Date.now(),
-  initialData: 0,
-  staleTime: Infinity,
-  refetchOnWindowFocus: false,
-  refetchOnMount: false,
-})
-let _signalReady = false
-onMounted(() => { _signalReady = true })
-watch(_invalidateSignal, () => {
-  if (!_signalReady) return
-  clearCache()
-  scheduleFetch(0)
-})
-
 // ─── Column settings panel ────────────────────────────────────────────────────
 const setColumnOrder = (order) => { columnOrder.value = order }
 
@@ -504,7 +484,7 @@ defineExpose({
     <!-- Table view -->
     <div v-if="!isGridView" class="overflow-x-auto relative">
       <table
-        class="relative divide-y divide-gray-200 dark:divide-slate-800"
+        class="relative divide-y divide-gray-200 dark:divide-slate-700"
         :style="{ tableLayout: 'fixed', width: table.getTotalSize() + 'px', minWidth: '100%' }"
       >
         <colgroup>
@@ -514,11 +494,11 @@ defineExpose({
             :style="{ width: col.getSize() + 'px' }"
           >
         </colgroup>
-        <thead class="relative z-20 bg-white dark:bg-slate-900">
+        <thead class="relative z-20 bg-white dark:bg-slate-800">
           <template v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
             <!-- Main header row -->
             <tr
-              class="divide-x divide-slate-200 dark:divide-slate-800"
+              class="divide-x divide-slate-200 dark:divide-slate-700"
             >
               <th
                 v-for="header in headerGroup.headers"
@@ -544,7 +524,7 @@ defineExpose({
                     :checked="table.getIsAllRowsSelected()"
                     :indeterminate="table.getIsSomeRowsSelected()"
                     @change="table.getToggleAllRowsSelectedHandler()($event)"
-                    class="mx-2 shrink-0 border-gray-300 rounded-sm text-blue-900 focus:ring-0 focus:ring-offset-0 dark:bg-slate-900 dark:border-slate-600"
+                    class="mx-2 shrink-0 border-gray-300 rounded-sm text-blue-900 focus:ring-0 focus:ring-offset-0 dark:bg-slate-800 dark:border-slate-600"
                   />
                 </template>
                 <!-- Regular column header -->
@@ -583,7 +563,7 @@ defineExpose({
             <!-- Column filter row -->
             <tr
               v-if="hasFilterableColumns"
-              class="divide-x divide-gray-200 dark:divide-slate-800 border-b border-gray-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50"
+              class="divide-x divide-gray-200 dark:divide-slate-700 border-b border-gray-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50"
             >
               <th
                 v-for="header in headerGroup.headers"
@@ -595,20 +575,20 @@ defineExpose({
                   :value="header.column.getFilterValue() ?? ''"
                   @input="(e) => header.column.setFilterValue(e.target.value || undefined)"
                   :placeholder="`Filtrar ${header.column.columnDef.meta?.label ?? ''}...`"
-                  class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-xs text-slate-600 dark:text-slate-300 px-2.5 py-1 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 dark:focus:border-indigo-500 outline-none transition-all"
+                  class="w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-xs text-slate-600 dark:text-slate-300 px-2.5 py-1 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 dark:focus:border-indigo-500 outline-none transition-all"
                 />
               </th>
             </tr>
           </template>
         </thead>
 
-        <tbody ref="tableBodyRef" class="divide-y divide-gray-200 dark:divide-slate-800">
+        <tbody ref="tableBodyRef" class="divide-y divide-gray-200 dark:divide-slate-700">
           <!-- Loading skeleton rows -->
           <tr
             v-if="loading"
             v-for="(_, i) in skeletonRows"
             :key="'sk-' + i"
-            class="animate-pulse divide-x divide-gray-200 dark:divide-slate-800 bg-white dark:bg-slate-900"
+            class="animate-pulse divide-x divide-gray-200 dark:divide-slate-700 bg-white dark:bg-slate-800"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -626,7 +606,7 @@ defineExpose({
             v-if="loading && skeletonRows.length < pagination.pageSize"
             v-for="i in (pagination.pageSize - skeletonRows.length)"
             :key="'lf-' + i"
-            class="divide-x divide-gray-200 dark:divide-slate-800 bg-white dark:bg-slate-900"
+            class="divide-x divide-gray-200 dark:divide-slate-700 bg-white dark:bg-slate-800"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -640,7 +620,7 @@ defineExpose({
             v-if="!loading && tableData.length === 0"
             v-for="i in pagination.pageSize"
             :key="'esk-' + i"
-            class="divide-x divide-gray-200 dark:divide-slate-800 bg-white dark:bg-slate-900"
+            class="divide-x divide-gray-200 dark:divide-slate-700 bg-white dark:bg-slate-800"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -658,7 +638,7 @@ defineExpose({
             @click="(e) => handleRowClick(row, e)"
             @keydown="(e) => handleRowKeydown(row, e)"
             :tabindex="isRowClickEnabled ? 0 : undefined"
-            class="divide-x divide-gray-200 dark:divide-slate-800 bg-white hover:bg-gray-50 dark:bg-slate-900 dark:hover:bg-slate-900 transition-colors"
+            class="divide-x divide-gray-200 dark:divide-slate-700 bg-white hover:bg-gray-50 dark:bg-slate-800 dark:hover:bg-slate-900 transition-colors"
             :class="{
               'cursor-pointer': isRowClickEnabled,
               'bg-indigo-50/40 dark:bg-indigo-900/10 hover:bg-indigo-50/60': row.getIsSelected(),
@@ -684,7 +664,7 @@ defineExpose({
                     :checked="row.getIsSelected()"
                     :disabled="!row.getCanSelect()"
                     @change="row.getToggleSelectedHandler()($event)"
-                    class="rounded border-gray-300 focus:ring-0 focus:ring-offset-0 dark:bg-slate-900 dark:border-slate-600"
+                    class="rounded border-gray-300 focus:ring-0 focus:ring-offset-0 dark:bg-slate-800 dark:border-slate-600"
                   />
                 </div>
               </template>
@@ -702,7 +682,7 @@ defineExpose({
             v-if="!loading && tableData.length > 0 && tableData.length < pagination.pageSize"
             v-for="i in (pagination.pageSize - tableData.length)"
             :key="'fill-' + i"
-            class="divide-x divide-gray-200 dark:divide-slate-800 bg-white dark:bg-slate-900"
+            class="divide-x divide-gray-200 dark:divide-slate-700 bg-white dark:bg-slate-800"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -716,7 +696,7 @@ defineExpose({
       <!-- Empty state overlays -->
       <div
         v-if="!loading && tableData.length === 0 && !search && !columnFilters.length"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-white/60 dark:bg-slate-900/60 rounded-xl"
+        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-white/60 dark:bg-slate-800/60 rounded-xl"
       >
         <slot name="empty">
           <p class="text-slate-400 dark:text-slate-500 text-lg font-medium italic">No hay registros</p>
@@ -725,7 +705,7 @@ defineExpose({
 
       <div
         v-if="!loading && tableData.length === 0 && (search || columnFilters.length)"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-white/60 dark:bg-slate-900/60 rounded-xl"
+        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-white/60 dark:bg-slate-800/60 rounded-xl"
       >
         <slot name="empty-search">
           <p class="text-slate-400 dark:text-slate-500 text-lg font-medium italic">No hay registros en la búsqueda</p>
@@ -738,7 +718,7 @@ defineExpose({
       <div v-if="loading" :class="gridClass">
         <div v-for="(_, i) in skeletonRows" :key="'gsk-' + i" class="animate-pulse">
           <slot name="grid-skeleton">
-            <div class="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-800 p-4">
+            <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-4">
               <div class="space-y-3">
                 <div class="h-4 bg-gray-200 dark:bg-slate-600 rounded w-3/4"></div>
                 <div class="h-4 bg-gray-200 dark:bg-slate-600 rounded w-1/2"></div>
@@ -760,11 +740,11 @@ defineExpose({
           :checkable="checkable"
           :toggle-row="() => row.toggleSelected()"
         >
-          <div class="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-800 p-4 hover:shadow-md transition-shadow relative"
+          <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-4 hover:shadow-md transition-shadow relative"
             :class="{ 'ring-2 ring-indigo-400 dark:ring-indigo-600': row.getIsSelected() }">
             <div v-if="checkable" class="absolute top-2 left-2 z-10">
               <input type="checkbox" :checked="row.getIsSelected()" @change="row.toggleSelected()"
-                class="rounded border-gray-300 dark:bg-slate-900 dark:border-slate-600" />
+                class="rounded border-gray-300 dark:bg-slate-800 dark:border-slate-600" />
             </div>
             <div class="space-y-2" :class="{ 'pt-6': checkable }">
               <div v-for="cell in row.getVisibleCells().filter(c => c.column.id !== 'select')" :key="cell.id" class="flex justify-between">
@@ -789,7 +769,7 @@ defineExpose({
     </div>
 
     <!-- Pagination & controls bar -->
-    <div ref="paginationBarRef" class="flex flex-col sm:flex-row items-center justify-between gap-y-4 sm:gap-y-0 px-4 py-3 border-t border-slate-200 dark:border-slate-800">
+    <div ref="paginationBarRef" class="flex flex-col sm:flex-row items-center justify-between gap-y-4 sm:gap-y-0 px-4 py-3 border-t border-slate-200 dark:border-slate-700">
       <!-- Left: reload, total, cache, columns button -->
       <div class="flex items-center gap-x-4 flex-wrap gap-y-2">
         <!-- Reload button -->
@@ -836,7 +816,7 @@ defineExpose({
             v-if="!isCustomPerPage"
             :value="pagination.pageSize"
             @change="(e) => handlePerPageChange(e.target.value)"
-            class="bg-slate-100 dark:bg-slate-900 border-none text-[11px] font-bold text-slate-600 dark:text-slate-300 rounded-lg focus:ring-0 cursor-pointer py-1 pl-2 pr-8"
+            class="bg-slate-100 dark:bg-slate-800 border-none text-[11px] font-bold text-slate-600 dark:text-slate-300 rounded-lg focus:ring-0 cursor-pointer py-1 pl-2 pr-8"
           >
             <option :value="10">10</option>
             <option :value="25">25</option>
@@ -850,7 +830,7 @@ defineExpose({
               :value="pagination.pageSize"
               @change="(e) => table.setPageSize(parseInt(e.target.value) || 10)"
               min="1" max="500"
-              class="w-14 bg-slate-100 dark:bg-slate-900 border-none text-[11px] font-bold text-slate-600 dark:text-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500/20 py-1 px-2"
+              class="w-14 bg-slate-100 dark:bg-slate-800 border-none text-[11px] font-bold text-slate-600 dark:text-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500/20 py-1 px-2"
             />
             <button @click="resetPerPage" class="text-[10px] text-indigo-500 font-bold hover:underline">Volver</button>
           </div>