@innertia-solutions/nuxt-theme-spark 0.1.77 → 0.1.79

package/components/Table/Standard.vue

@@ -48,6 +48,9 @@ const previewRow      = ref(null)
 const currentRatio    = ref(props.splitRatio)
 const containerRef    = ref(null)
 const previewEnabled  = ref(false)
+const paginationHeight = ref(0)
+
+const previewCacheKey = computed(() => `table-preview-${props.name}`)
 
 const closePreview = () => { previewRow.value = null }
 
@@ -59,6 +62,35 @@ const handleRowClick = (row) => {
   }
 }
 
+// Persist preview row in session cache when table cache is enabled
+watch(previewRow, (row) => {
+  if (!props.cached) return
+  if (row) sessionStorage.setItem(previewCacheKey.value, JSON.stringify(row))
+  else sessionStorage.removeItem(previewCacheKey.value)
+})
+
+// When data reloads, update previewRow with fresh data from response
+const handleLoaded = (res) => {
+  emit('loaded', res)
+  if (previewRow.value && Array.isArray(res?.data)) {
+    const fresh = res.data.find(r => r.id === previewRow.value.id)
+    if (fresh) previewRow.value = fresh
+  }
+}
+
+// Track pagination bar height so the overlay never covers it
+let paginationObserver = null
+watch(() => tableRef.value?.paginationBarRef, (el) => {
+  paginationObserver?.disconnect()
+  paginationObserver = null
+  if (!el) return
+  paginationHeight.value = el.offsetHeight
+  paginationObserver = new ResizeObserver(() => {
+    paginationHeight.value = el.offsetHeight
+  })
+  paginationObserver.observe(el)
+}, { flush: 'post' })
+
 const startResize = (e) => {
   e.preventDefault()
   const onMove = (ev) => {
@@ -79,8 +111,18 @@ const onEsc = (e) => { if (e.key === 'Escape' && previewRow.value) closePreview(
 onMounted(() => {
   previewEnabled.value = !!slots.preview
   window.addEventListener('keydown', onEsc)
+  // Restore preview from session cache
+  if (props.cached && previewEnabled.value) {
+    try {
+      const raw = sessionStorage.getItem(previewCacheKey.value)
+      if (raw) previewRow.value = JSON.parse(raw)
+    } catch {}
+  }
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onEsc)
+  paginationObserver?.disconnect()
 })
-onBeforeUnmount(() => window.removeEventListener('keydown', onEsc))
 
 // ─── Column panel ─────────────────────────────────────────────────────────────
 const showColumnPanel = ref(false)
@@ -208,37 +250,34 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
         <TableExportable v-if="showExport" :table-ref="tableRef" :name="name" :columns="columns" />
       </div>
 
-      <!-- Contenido: tabla + preview en flex -->
-      <div :class="previewEnabled ? 'flex items-stretch overflow-hidden' : ''">
+      <!-- Contenido: tabla siempre full width + preview overlay -->
+      <div class="relative">
 
         <!-- Tabla -->
-        <div
-          class="min-w-0 transition-[width] duration-200 ease-out"
-          :style="previewEnabled ? { width: (previewRow ? currentRatio : 100) + '%', flexShrink: 0 } : {}"
+        <Table
+          ref="tableRef"
+          :endpoint="endpoint"
+          :columns="columns"
+          :name="name"
+          :params="mergedParams"
+          :search="search"
+          :checkable="checkable"
+          :cached="cached"
+          :show-reload-button="showReloadButton"
+          :click-row-to-open="clickRowToOpen"
+          :preview-row-id="previewRow?.id ?? null"
+          :preview-mode="!!previewEnabled"
+          @row-click="handleRowClick"
+          @loaded="handleLoaded"
+          @page-change="closePreview"
+          @per-page-change="closePreview"
         >
-          <Table
-            ref="tableRef"
-            :endpoint="endpoint"
-            :columns="columns"
-            :name="name"
-            :params="mergedParams"
-            :search="search"
-            :checkable="checkable"
-            :cached="cached"
-            :show-reload-button="showReloadButton"
-            :click-row-to-open="clickRowToOpen"
-            :preview-row-id="previewRow?.id ?? null"
-            :preview-mode="!!previewEnabled"
-            @row-click="handleRowClick"
-            @loaded="emit('loaded', $event)"
-          >
-            <template v-for="(_, name) in $slots" #[name]="slotProps">
-              <slot :name="name" v-bind="slotProps ?? {}" />
-            </template>
-          </Table>
-        </div>
+          <template v-for="(_, name) in $slots" #[name]="slotProps">
+            <slot :name="name" v-bind="slotProps ?? {}" />
+          </template>
+        </Table>
 
-        <!-- Divider + preview con animación slide -->
+        <!-- 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"
@@ -249,8 +288,8 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
         >
           <div
             v-if="previewRow && previewEnabled"
-            class="flex items-stretch shrink-0 min-w-0"
-            :style="{ width: (100 - currentRatio) + '%' }"
+            class="absolute top-0 right-0 z-10 flex bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700 shadow-xl"
+            :style="{ width: (100 - currentRatio) + '%', bottom: paginationHeight + 'px' }"
           >
             <!-- Resize handle -->
             <div
@@ -258,7 +297,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
               @mousedown="startResize"
             />
             <!-- Preview -->
-            <div class="flex flex-col overflow-y-auto border-l border-slate-200 dark:border-slate-700 flex-1">
+            <div class="flex flex-col overflow-y-auto flex-1">
               <slot name="preview" :row="previewRow" :close="closePreview" />
             </div>
           </div>

package/components/Table.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   previewMode:     { type: Boolean, default: false },
 })
 
-const emit = defineEmits(['update:search', 'row-click', 'loaded'])
+const emit = defineEmits(['update:search', 'row-click', 'loaded', 'page-change', 'per-page-change'])
 const instance = getCurrentInstance()
 
 // ─── API / toast ─────────────────────────────────────────────────────────────
@@ -39,6 +39,7 @@ const isDataFromCache = ref(false)
 const lastDataLength = ref(-1)
 const lastRowHeight = ref(48)
 const tableBodyRef = ref(null)
+const paginationBarRef = ref(null)
 const skeletonRows = computed(() => {
   const count = lastDataLength.value < 0 ? pagination.value.pageSize : lastDataLength.value
   return Array.from({ length: count })
@@ -261,6 +262,13 @@ watch(tableData, (newData) => {
 }, { flush: 'post' })
 
 watch(pagination, () => { if (!isRestoring.value) scheduleFetch(0) }, { deep: true })
+
+watch(() => pagination.value.pageIndex, (val, old) => {
+  if (!isRestoring.value && val !== old) emit('page-change', val)
+})
+watch(() => pagination.value.pageSize, (val, old) => {
+  if (!isRestoring.value && val !== old) emit('per-page-change', val)
+})
 watch(sorting, () => { if (!isRestoring.value) scheduleFetch(0) }, { deep: true })
 watch(columnFilters, () => { if (!isRestoring.value) scheduleFetch(300) }, { deep: true })
 
@@ -463,6 +471,7 @@ defineExpose({
   setColumnOrder,
   isDataFromCache,
   cached: computed(() => props.cached),
+  paginationBarRef,
 })
 </script>
 
@@ -757,7 +766,7 @@ defineExpose({
     </div>
 
     <!-- Pagination & controls bar -->
-    <div 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-700">
       <!-- Left: reload, total, cache, columns button -->
       <div class="flex items-center gap-x-4 flex-wrap gap-y-2">
         <!-- Reload button -->

package/package.json

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