@innertia-solutions/nuxt-theme-spark 0.1.141 → 0.1.143

package/components/{Table.vue → Table/index.vue}

@@ -6,6 +6,7 @@ import {
   IconChevronDown,
   IconReload,
   IconBolt,
+  IconPin,
 } from '@tabler/icons-vue'
 
 const props = defineProps({
@@ -22,6 +23,7 @@ const props = defineProps({
   clickRowToOpen:  { type: Boolean, default: false },
   previewRowId:    { type: [String, Number], default: null },
   previewMode:     { type: Boolean, default: false },
+  pinnedColumns:   { type: Object, default: null }, // { left?: string[], right?: string[] }
 })
 
 const emit = defineEmits(['update:search', 'row-click', 'loaded', 'page-change', 'per-page-change'])
@@ -55,6 +57,7 @@ const columnOrder = ref([])
 const columnSizing = ref({})
 const columnSizingInfo = ref({})
 const rowSelection = ref({})
+const columnPinning = ref({ left: [], right: [] })
 const isCustomPerPage = ref(false)
 
 const makeUpdater = (stateRef) => (updater) => {
@@ -111,6 +114,7 @@ const table = useVueTable({
     get columnSizing() { return columnSizing.value },
     get columnSizingInfo() { return columnSizingInfo.value },
     get rowSelection() { return rowSelection.value },
+    get columnPinning() { return columnPinning.value },
   },
   onPaginationChange: makeUpdater(pagination),
   onSortingChange: makeUpdater(sorting),
@@ -120,9 +124,11 @@ const table = useVueTable({
   onColumnSizingChange: makeUpdater(columnSizing),
   onColumnSizingInfoChange: makeUpdater(columnSizingInfo),
   onRowSelectionChange: makeUpdater(rowSelection),
+  onColumnPinningChange: makeUpdater(columnPinning),
   getCoreRowModel: getCoreRowModel(),
   columnResizeMode: 'onChange',
   enableColumnResizing: true,
+  enableColumnPinning: true,
   manualPagination: true,
   manualSorting: true,
   manualFiltering: true,
@@ -131,6 +137,58 @@ const table = useVueTable({
   enableRowSelection: true,
 })
 
+// ─── Column pinning helpers ───────────────────────────────────────────────────
+const pinColumn = (key, position) => {
+  table.getColumn(key)?.pin(position)
+}
+
+const getPinnedStyles = (column, isHeader = false) => {
+  const pinned = column.getIsPinned()
+  if (!pinned) return {}
+  const z = isHeader ? 2 : 1
+  const w = column.getSize() + 'px'
+  // Headers always use the solid card background.
+  // Body cells use --row-bg, which is set to solid colors only (normal + hover) via <style scoped>.
+  // Selected/preview rows intentionally don't set --row-bg so sticky cells fall back to --card,
+  // which prevents semi-transparent tints from bleeding through the sticky cell.
+  const bg = isHeader ? 'var(--card, #fff)' : 'var(--row-bg, var(--card, #fff))'
+  const base = {
+    position: 'sticky',
+    zIndex: z,
+    background: bg,
+    width: w,
+    minWidth: w,
+    maxWidth: w,
+  }
+  // inset box-shadow: paints inside the cell so it can't be covered by adjacent cells
+  // and always follows the visual sticky position (unlike border or outset box-shadow)
+  if (pinned === 'left') return { ...base, left: column.getStart('left') + 'px', boxShadow: 'inset -1px 0 0 0 var(--card-line, #e5e7eb)' }
+  if (pinned === 'right') return { ...base, right: column.getAfter('right') + 'px', boxShadow: 'inset 1px 0 0 0 var(--card-line, #e5e7eb)' }
+  return {}
+}
+
+
+// Initialize pinning from prop if provided
+onMounted(() => {
+  if (props.pinnedColumns) {
+    columnPinning.value = {
+      left: props.pinnedColumns.left ?? [],
+      right: props.pinnedColumns.right ?? [],
+    }
+  }
+})
+
+// Keep 'select' always first in the left pinning array.
+// Fires synchronously so the colgroup/headers never render in wrong order.
+watch(() => columnPinning.value.left, (left) => {
+  if (props.checkable && left.includes('select') && left[0] !== 'select') {
+    columnPinning.value = {
+      ...columnPinning.value,
+      left: ['select', ...left.filter(id => id !== 'select')],
+    }
+  }
+}, { flush: 'sync' })
+
 // ─── Fetch ────────────────────────────────────────────────────────────────────
 const buildRequestParams = () => {
   const { sort, ...otherParams } = props.params
@@ -457,6 +515,23 @@ const handleRowKeydown = (row, e) => {
   emit('row-click', row.original, e)
 }
 
+// Compute --row-bg for pinned (sticky) cells.
+// Non-pinned cells get background from Tailwind classes on <tr>.
+// Pinned cells inherit --row-bg which must be a solid opaque color (no transparency → no bleed-through).
+// color-mix() blends the Tailwind tint with the card color to produce an opaque equivalent.
+// For normal/hover rows the <style scoped> CSS rule handles it; selected/preview override via inline style.
+const pinnedRowStyle = (row) => {
+  if (props.previewRowId && row.original.id === props.previewRowId) {
+    // !bg-indigo-50 → solid indigo-50
+    return { '--row-bg': 'color-mix(in srgb, #eef2ff 100%, var(--card, #fff))' }
+  }
+  if (row.getIsSelected()) {
+    // bg-indigo-50/40 → 40% indigo-50 blended with card
+    return { '--row-bg': 'color-mix(in srgb, #eef2ff 40%, var(--card, #fff))' }
+  }
+  return {}
+}
+
 // ─── Expose ───────────────────────────────────────────────────────────────────
 const reloadTable = () => {
   clearCache()
@@ -475,6 +550,8 @@ defineExpose({
   isDataFromCache,
   cached: computed(() => props.cached),
   paginationBarRef,
+  columnPinning,
+  pinColumn,
 })
 </script>
 
@@ -488,8 +565,9 @@ defineExpose({
         :style="{ tableLayout: 'fixed', width: table.getTotalSize() + 'px', minWidth: '100%' }"
       >
         <colgroup>
+          <!-- Must use pinning order (left|center|right) — same as getHeaderGroups() and row.getVisibleCells() -->
           <col
-            v-for="col in table.getVisibleLeafColumns()"
+            v-for="col in [...table.getLeftVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns(), ...table.getRightVisibleLeafColumns()]"
             :key="col.id"
             :style="{ width: col.getSize() + 'px' }"
           >
@@ -497,24 +575,23 @@ defineExpose({
         <thead class="relative z-20 bg-card">
           <template v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
             <!-- Main header row -->
-            <tr
-              class="divide-x divide-card-line"
-            >
+            <tr class="bg-card">
               <th
                 v-for="header in headerGroup.headers"
                 :key="header.id"
                 scope="col"
-                :draggable="header.id !== 'select' && resizeHoverId !== header.id"
-                @dragstart="header.id !== 'select' && resizeHoverId !== header.id && onHeaderDragStart(header.id)"
+                :draggable="header.id !== 'select' && resizeHoverId !== header.id && !header.column.getIsPinned()"
+                @dragstart="header.id !== 'select' && resizeHoverId !== header.id && !header.column.getIsPinned() && onHeaderDragStart(header.id)"
                 @dragover="header.id !== 'select' && onHeaderDragOver($event, header.id)"
                 @dragleave="onHeaderDragLeave"
                 @drop="header.id !== 'select' && onHeaderDrop(header.id)"
-                class="relative overflow-hidden"
+                class="relative"
                 :class="[
                   header.id === 'select' ? 'text-center' : '',
                   dragOverHeaderId === header.id ? 'bg-indigo-50 dark:bg-indigo-900/20' : '',
                   header.column.getCanSort() ? 'cursor-pointer select-none' : '',
                 ]"
+                :style="getPinnedStyles(header.column, true)"
                 @click="header.column.getCanSort() && header.column.toggleSorting()"
               >
                 <!-- Select all checkbox -->
@@ -529,8 +606,12 @@ defineExpose({
                 </template>
                 <!-- Regular column header -->
                 <template v-else>
-                  <div class="px-4 py-3 flex items-center gap-x-1 text-xs font-medium text-muted-foreground w-full">
-                    {{ header.column.columnDef.meta?.label ?? header.id }}
+                  <div
+                    class="px-4 py-3 flex items-center gap-x-1 text-xs font-medium w-full overflow-hidden"
+                    :class="header.column.getIsPinned() ? 'text-foreground' : 'text-muted-foreground'"
+                  >
+                    <IconPin v-if="header.column.getIsPinned()" class="size-3 shrink-0 text-indigo-400 dark:text-indigo-500" />
+                    <span class="truncate">{{ header.column.columnDef.meta?.label ?? header.id }}</span>
                     <span v-if="header.column.getCanSort()">
                       <IconSelector v-if="!header.column.getIsSorted()" class="size-4 opacity-40" />
                       <IconChevronDown v-else-if="header.column.getIsSorted() === 'desc'" class="size-4" />
@@ -563,12 +644,15 @@ defineExpose({
             <!-- Column filter row -->
             <tr
               v-if="hasFilterableColumns"
-              class="divide-x divide-card-line border-b border-card-line bg-muted/50"
+              class="border-b border-card-line bg-muted/50"
             >
               <th
                 v-for="header in headerGroup.headers"
                 :key="'f-' + header.id"
-                :class="header.id === 'select' ? 'w-12' : 'px-3 py-1.5'"
+                :class="[
+                  header.id === 'select' ? 'w-12' : 'px-3 py-1.5',
+                ]"
+                :style="getPinnedStyles(header.column, true)"
               >
                 <input
                   v-if="header.column.getCanFilter()"
@@ -588,13 +672,15 @@ defineExpose({
             v-if="loading"
             v-for="(_, i) in skeletonRows"
             :key="'sk-' + i"
-            class="animate-pulse divide-x divide-card-line bg-card"
+            class="animate-pulse bg-card"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
               :key="'skc-' + header.id"
-              :class="header.id === 'select' ? 'text-center w-12' : 'px-4'"
-              :style="{ height: lastRowHeight + 'px' }"
+              :class="[
+                header.id === 'select' ? 'text-center w-12' : 'px-4 overflow-hidden',
+              ]"
+              :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
             >
               <div v-if="header.id === 'select'" class="w-4 h-4 bg-surface-1 rounded mx-auto"></div>
               <div v-else class="h-4 w-[50%] rounded bg-surface-1"></div>
@@ -606,12 +692,12 @@ defineExpose({
             v-if="loading && skeletonRows.length < pagination.pageSize"
             v-for="i in (pagination.pageSize - skeletonRows.length)"
             :key="'lf-' + i"
-            class="divide-x divide-card-line bg-card"
+            class="bg-card"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
               :key="'lfc-' + header.id"
-              :style="{ height: lastRowHeight + 'px' }"
+              :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
             />
           </tr>
 
@@ -620,12 +706,12 @@ defineExpose({
             v-if="!loading && tableData.length === 0"
             v-for="i in pagination.pageSize"
             :key="'esk-' + i"
-            class="divide-x divide-card-line bg-card"
+            class="bg-card"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
               :key="'eskc-' + header.id"
-              :style="{ height: lastRowHeight + 'px' }"
+              :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
             />
           </tr>
 
@@ -638,12 +724,13 @@ defineExpose({
             @click="(e) => handleRowClick(row, e)"
             @keydown="(e) => handleRowKeydown(row, e)"
             :tabindex="isRowClickEnabled ? 0 : undefined"
-            class="divide-x divide-card-line bg-card hover:bg-layer-hover transition-colors"
+            class="bg-card hover:bg-layer-hover transition-colors"
             :class="{
               'cursor-pointer': isRowClickEnabled,
               'bg-indigo-50/40 dark:bg-indigo-900/10 hover:bg-indigo-50/60': row.getIsSelected(),
               '!bg-indigo-50 dark:!bg-indigo-900/20 ring-1 ring-inset ring-indigo-200 dark:ring-indigo-700': previewRowId && row.original.id === previewRowId,
             }"
+            :style="pinnedRowStyle(row)"
           >
             <td
               v-for="cell in row.getVisibleCells()"
@@ -651,10 +738,11 @@ defineExpose({
               :data-col-id="cell.column.id"
               :class="[
                 cell.column.id === 'select'
-                  ? 'text-center w-12'
-                  : 'px-4 py-3 text-sm text-muted-foreground-1',
+                  ? 'text-center w-12 overflow-hidden'
+                  : 'px-4 py-3 text-sm text-muted-foreground-1 overflow-hidden',
                 cell.column.id !== 'select' ? cell.column.columnDef.meta?.class ?? '' : '',
               ]"
+              :style="getPinnedStyles(cell.column)"
             >
               <!-- Select checkbox -->
               <template v-if="cell.column.id === 'select'">
@@ -682,12 +770,12 @@ 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-card-line bg-card"
+            class="bg-card"
           >
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
               :key="'fillc-' + header.id"
-              :style="{ height: lastRowHeight + 'px' }"
+              :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
             />
           </tr>
         </tbody>
@@ -870,3 +958,17 @@ defineExpose({
     </div>
   </div>
 </template>
+
+<style scoped>
+/* --row-bg drives the background of sticky (pinned) body cells.
+   Only solid, opaque values here — semi-transparent tints for selected/preview
+   rows intentionally do NOT override --row-bg, so pinned cells stay opaque
+   and text from scrolling content can't bleed through. */
+tbody tr {
+  --row-bg: var(--card, #fff);
+}
+tbody tr:hover {
+  --row-bg: var(--layer-hover, #f8fafc);
+}
+</style>
+

package/components/TableExportable.vue

@@ -26,8 +26,8 @@ const toggleColumn = (key) => {
   if (idx >= 0) selectedColumns.value.splice(idx, 1)
   else selectedColumns.value.push(key)
 }
-const allSelected   = computed(() => selectedColumns.value.length === props.columns.length)
-const toggleAll     = () => {
+const allSelected = computed(() => selectedColumns.value.length === props.columns.length)
+const toggleAll   = () => {
   selectedColumns.value = allSelected.value ? [] : props.columns.map(c => c.key)
 }
 
@@ -43,12 +43,12 @@ const doExport = () => {
   isOpen.value = false
 }
 
-const panelRef  = ref(null)
+const panelRef   = ref(null)
 const triggerRef = ref(null)
 
 const onOutsideClick = (e) => {
   if (
-    panelRef.value && !panelRef.value.contains(e.target) &&
+    panelRef.value   && !panelRef.value.contains(e.target) &&
     triggerRef.value && !triggerRef.value.contains(e.target)
   ) {
     isOpen.value = false
@@ -65,19 +65,21 @@ defineExpose({ open: () => { isOpen.value = true } })
 
 <template>
   <div class="relative">
+
+    <!-- Trigger — icon-only, igual al botón de columnas -->
     <button
       ref="triggerRef"
       type="button"
       @click="isOpen = !isOpen"
+      title="Exportar"
       :class="[
-        'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
+        'p-1.5 inline-flex items-center justify-center 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-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover'
+          ? 'border-primary/40 bg-primary/10 text-primary'
+          : 'border-transparent text-muted-foreground hover:border-card-line hover:bg-muted-hover hover:text-foreground'
       ]"
     >
       <IconDownload class="size-4" stroke="1.5" />
-      Exportar
     </button>
 
     <Transition
@@ -105,7 +107,7 @@ defineExpose({ open: () => { isOpen.value = true } })
             :class="[
               'flex flex-col items-center gap-1 py-2 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/20 dark:border-blue-500 dark:text-blue-300'
+                ? 'border-primary/40 bg-primary/10 text-primary'
                 : 'border-card-line text-muted-foreground-1 hover:bg-muted-hover'
             ]"
           >
@@ -124,7 +126,7 @@ defineExpose({ open: () => { isOpen.value = true } })
             <input
               v-model="filename"
               type="text"
-              class="flex-1 rounded-lg border border-card-line bg-card text-foreground py-1.5 px-2.5 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 min-w-0"
+              class="flex-1 rounded-lg border border-card-line bg-card text-foreground py-1.5 px-2.5 text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 min-w-0"
             />
             <span class="text-xs text-muted-foreground shrink-0">.{{ format }}</span>
           </div>
@@ -134,7 +136,7 @@ defineExpose({ open: () => { isOpen.value = true } })
         <div v-if="columns.length > 0" class="mb-3 px-1">
           <div class="flex items-center justify-between mb-1.5">
             <label class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">Columnas</label>
-            <button type="button" @click="toggleAll" class="text-[10px] text-blue-600 dark:text-blue-400 hover:underline">
+            <button type="button" @click="toggleAll" class="text-[10px] text-primary hover:underline">
               {{ allSelected ? 'Ninguna' : 'Todas' }}
             </button>
           </div>
@@ -148,7 +150,7 @@ defineExpose({ open: () => { isOpen.value = true } })
                 type="checkbox"
                 :checked="selectedColumns.includes(col.key)"
                 @change="toggleColumn(col.key)"
-                class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
+                class="rounded border-card-line bg-surface shrink-0 cursor-pointer text-primary"
               />
               <span class="text-xs text-foreground truncate">{{ col.label }}</span>
             </label>
@@ -159,7 +161,7 @@ defineExpose({ open: () => { isOpen.value = true } })
         <button
           type="button"
           @click="doExport"
-          class="w-full py-1.5 px-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors inline-flex items-center justify-center gap-2"
+          class="w-full py-1.5 px-3 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-medium transition-colors inline-flex items-center justify-center gap-2"
         >
           <IconDownload class="size-4" stroke="1.5" />
           Exportar

package/package.json

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

package/shared/composables/useTablePreferences.ts

@@ -0,0 +1,33 @@
+import { useDebounceFn } from '@vueuse/core'
+
+export interface TablePreferences {
+  pinning?: { left: string[], right: string[] }
+  visibility?: Record<string, boolean>
+  order?: string[]
+}
+
+export function useTablePreferences(tableName: string) {
+  const api = useApi()
+  const prefKey = `table:${tableName}:columns`
+
+  const preferences = ref<TablePreferences>({})
+
+  const load = async () => {
+    try {
+      const data = await api.get(`auth/me/preferences/${prefKey}`)
+      preferences.value = data?.value ?? {}
+    } catch {
+      preferences.value = {}
+    }
+  }
+
+  const save = useDebounceFn(async (value: TablePreferences) => {
+    try {
+      await api.put(`auth/me/preferences/${prefKey}`, { value, cast: 'json' })
+    } catch {
+      // silent fail — preferencias no son críticas
+    }
+  }, 800)
+
+  return { preferences, load, save }
+}