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

package/components/Table/Standard.vue

@@ -2,9 +2,10 @@
 import { IconSearch, IconAdjustmentsHorizontal, IconLayoutColumns, IconGripVertical } from '@tabler/icons-vue'
 
 const props = defineProps({
-  endpoint:          { type: String,  required: true },
+  table:             { type: Object,  default: null },   // TableDefinition — preferred
+  endpoint:          { type: String,  default: undefined },
   columns:           { type: Array,   required: true },
-  name:              { type: String,  required: true },
+  name:              { type: String,  default: undefined },
   params:            { type: Object,  default: () => ({}) },
   checkable:         { type: Boolean, default: false },
   cached:            { type: Boolean, default: true },
@@ -18,7 +19,10 @@ const props = defineProps({
   splitRatio:        { type: Number,  default: 60 },
 })
 
-const emit = defineEmits(['row-click', 'loaded'])
+const emit = defineEmits(['row-click', 'loaded', 'preview'])
+
+const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
+const resolvedName     = computed(() => props.table?.name     ?? props.name)
 const slots = useSlots()
 const forwardedSlots = computed(() => {
   const excluded = new Set(['toolbar', 'preview'])
@@ -60,7 +64,9 @@ const closePreview = () => { previewRow.value = null }
 
 const handleRowClick = (row) => {
   if (previewEnabled.value) {
-    previewRow.value = previewRow.value?.id === row.id ? null : row
+    const toggled = previewRow.value?.id === row.id ? null : row
+    previewRow.value = toggled
+    if (toggled) emit('preview', toggled)
   } else {
     emit('row-click', row)
   }
@@ -185,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 })
+defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, closePreview })
 </script>
 
 <template>
   <div class="relative" ref="containerRef">
 
     <!-- Card único -->
-    <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-sm overflow-hidden">
+    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 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-700">
+      <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-800">
         <div v-if="showSearch" class="flex-1 min-w-48">
           <Forms.Input v-model="search" type="search" :placeholder="searchPlaceholder" :icon-left="IconSearch" />
         </div>
@@ -208,7 +214,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
               '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-700 bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+                : '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'
             ]"
           >
             <IconAdjustmentsHorizontal class="size-4" stroke="1.5" />
@@ -227,7 +233,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
             <div
               v-if="showFilterPanel"
               ref="filterPanelRef"
-              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"
+              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"
             >
               <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" />
@@ -244,14 +250,14 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
             '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-700 bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+              : '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'
           ]"
         >
           <IconLayoutColumns class="size-4" />
           Columnas
         </button>
 
-        <TableExportable v-if="showExport" :table-ref="tableRef" :name="name" :columns="columns" />
+        <TableExportable v-if="showExport" :table-ref="tableRef" :name="resolvedName" :columns="columns" />
       </div>
 
       <!-- Contenido: tabla siempre full width + preview overlay -->
@@ -260,9 +266,9 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
         <!-- Tabla -->
         <Table
           ref="tableRef"
-          :endpoint="endpoint"
+          :endpoint="resolvedEndpoint"
           :columns="columns"
-          :name="name"
+          :name="resolvedName"
           :params="mergedParams"
           :search="search"
           :checkable="checkable"
@@ -292,7 +298,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
         >
           <div
             v-if="previewRow && previewEnabled"
-            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)]"
+            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)]"
             :style="{ width: (100 - currentRatio) + '%', bottom: paginationHeight + 'px' }"
           >
             <!-- Resize handle -->
@@ -322,7 +328,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
       <div
         v-if="showColumnPanel"
         ref="columnPanelRef"
-        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"
+        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"
       >
         <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,6 +309,26 @@ 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 }
 
@@ -484,7 +504,7 @@ defineExpose({
     <!-- Table view -->
     <div v-if="!isGridView" class="overflow-x-auto relative">
       <table
-        class="relative divide-y divide-gray-200 dark:divide-slate-700"
+        class="relative divide-y divide-gray-200 dark:divide-slate-800"
         :style="{ tableLayout: 'fixed', width: table.getTotalSize() + 'px', minWidth: '100%' }"
       >
         <colgroup>
@@ -494,11 +514,11 @@ defineExpose({
             :style="{ width: col.getSize() + 'px' }"
           >
         </colgroup>
-        <thead class="relative z-20 bg-white dark:bg-slate-800">
+        <thead class="relative z-20 bg-white dark:bg-slate-900">
           <template v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
             <!-- Main header row -->
             <tr
-              class="divide-x divide-slate-200 dark:divide-slate-700"
+              class="divide-x divide-slate-200 dark:divide-slate-800"
             >
               <th
                 v-for="header in headerGroup.headers"
@@ -524,7 +544,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-800 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-900 dark:border-slate-600"
                   />
                 </template>
                 <!-- Regular column header -->
@@ -563,7 +583,7 @@ defineExpose({
             <!-- Column filter row -->
             <tr
               v-if="hasFilterableColumns"
-              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"
+              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"
             >
               <th
                 v-for="header in headerGroup.headers"
@@ -575,20 +595,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-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"
+                  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"
                 />
               </th>
             </tr>
           </template>
         </thead>
 
-        <tbody ref="tableBodyRef" class="divide-y divide-gray-200 dark:divide-slate-700">
+        <tbody ref="tableBodyRef" class="divide-y divide-gray-200 dark:divide-slate-800">
           <!-- 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-700 bg-white dark:bg-slate-800"
+            class="animate-pulse divide-x divide-gray-200 dark:divide-slate-800 bg-white dark:bg-slate-900"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -606,7 +626,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-700 bg-white dark:bg-slate-800"
+            class="divide-x divide-gray-200 dark:divide-slate-800 bg-white dark:bg-slate-900"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -620,7 +640,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-700 bg-white dark:bg-slate-800"
+            class="divide-x divide-gray-200 dark:divide-slate-800 bg-white dark:bg-slate-900"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -638,7 +658,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-700 bg-white hover:bg-gray-50 dark:bg-slate-800 dark:hover:bg-slate-900 transition-colors"
+            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="{
               'cursor-pointer': isRowClickEnabled,
               'bg-indigo-50/40 dark:bg-indigo-900/10 hover:bg-indigo-50/60': row.getIsSelected(),
@@ -664,7 +684,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-800 dark:border-slate-600"
+                    class="rounded border-gray-300 focus:ring-0 focus:ring-offset-0 dark:bg-slate-900 dark:border-slate-600"
                   />
                 </div>
               </template>
@@ -682,7 +702,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-700 bg-white dark:bg-slate-800"
+            class="divide-x divide-gray-200 dark:divide-slate-800 bg-white dark:bg-slate-900"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
@@ -696,7 +716,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-800/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-900/60 rounded-xl"
       >
         <slot name="empty">
           <p class="text-slate-400 dark:text-slate-500 text-lg font-medium italic">No hay registros</p>
@@ -705,7 +725,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-800/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-900/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>
@@ -718,7 +738,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-800 rounded-lg border border-gray-200 dark:border-slate-700 p-4">
+            <div class="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-800 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>
@@ -740,11 +760,11 @@ defineExpose({
           :checkable="checkable"
           :toggle-row="() => row.toggleSelected()"
         >
-          <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"
+          <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"
             :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-800 dark:border-slate-600" />
+                class="rounded border-gray-300 dark:bg-slate-900 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">
@@ -769,7 +789,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-700">
+    <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">
       <!-- Left: reload, total, cache, columns button -->
       <div class="flex items-center gap-x-4 flex-wrap gap-y-2">
         <!-- Reload button -->
@@ -816,7 +836,7 @@ defineExpose({
             v-if="!isCustomPerPage"
             :value="pagination.pageSize"
             @change="(e) => handlePerPageChange(e.target.value)"
-            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"
+            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"
           >
             <option :value="10">10</option>
             <option :value="25">25</option>
@@ -830,7 +850,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-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"
+              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"
             />
             <button @click="resetPerPage" class="text-[10px] text-indigo-500 font-bold hover:underline">Volver</button>
           </div>