@innertia-solutions/nuxt-theme-spark 0.1.78 → 0.1.80

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)
@@ -209,7 +251,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
       </div>
 
       <!-- Contenido: tabla siempre full width + preview overlay -->
-      <div class="relative">
+      <div class="relative overflow-hidden">
 
         <!-- Tabla -->
         <Table
@@ -226,7 +268,9 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
           :preview-row-id="previewRow?.id ?? null"
           :preview-mode="!!previewEnabled"
           @row-click="handleRowClick"
-          @loaded="emit('loaded', $event)"
+          @loaded="handleLoaded"
+          @page-change="closePreview"
+          @per-page-change="closePreview"
         >
           <template v-for="(_, name) in $slots" #[name]="slotProps">
             <slot :name="name" v-bind="slotProps ?? {}" />
@@ -244,8 +288,8 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
         >
           <div
             v-if="previewRow && previewEnabled"
-            class="absolute inset-y-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) + '%' }"
+            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 -->
             <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.78",
+  "version": "0.1.80",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",