@innertia-solutions/innertia-nuxt 0.1.11 → 0.1.13

package/components/Table/views/ViewCards.vue

@@ -0,0 +1,74 @@
+<script setup>
+const props = defineProps({
+  table:         Object,
+  loading:       Boolean,
+  skeletonRows:  Array,
+  checkable:     Boolean,
+  gridClass:     String,
+  search:        String,
+  columnFilters: Array,
+  bordered:      { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['row-click'])
+</script>
+
+<template>
+  <div :class="['relative pb-4', bordered ? 'pt-4 px-4' : '']">
+    <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-card rounded-card border border-card-line p-4">
+            <div class="space-y-3">
+              <div class="h-4 bg-surface-1 rounded w-3/4"></div>
+              <div class="h-4 bg-surface-1 rounded w-1/2"></div>
+              <div class="h-6 bg-surface-1 rounded w-1/4"></div>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <div v-else-if="table.getRowModel().rows.length > 0" :class="gridClass">
+      <slot
+        name="grid-item"
+        v-for="row in table.getRowModel().rows"
+        :key="row.id"
+        :row="row.original"
+        :tanstack-row="row"
+        :is-selected="row.getIsSelected()"
+        :checkable="checkable"
+        :toggle-row="() => row.toggleSelected()"
+        :on-row-click="(e) => emit('row-click', row, e)"
+      >
+        <div
+          class="bg-card rounded-card border border-card-line p-4 hover:shadow-md transition-shadow relative cursor-pointer"
+          :class="{ 'ring-2 ring-indigo-400 dark:ring-indigo-600': row.getIsSelected() }"
+          @click="emit('row-click', row, $event)"
+        >
+          <div v-if="checkable" class="absolute top-2 left-2 z-10">
+            <input type="checkbox" :checked="row.getIsSelected()" @change="row.toggleSelected()"
+              class="rounded border-card-line dark:bg-card" @click.stop />
+          </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">
+              <span class="text-sm text-muted-foreground">{{ cell.column.columnDef.meta?.label ?? cell.column.id }}:</span>
+              <span class="text-sm text-foreground">
+                <slot :name="cell.column.id" :row="row.original" :value="cell.getValue()">{{ cell.getValue() }}</slot>
+              </span>
+            </div>
+          </div>
+        </div>
+      </slot>
+    </div>
+
+    <div v-else class="flex items-center justify-center py-12">
+      <slot v-if="!search && !columnFilters?.length" name="empty">
+        <p class="text-muted-foreground text-lg">No hay registros</p>
+      </slot>
+      <slot v-else name="empty-search">
+        <p class="text-muted-foreground text-lg">No hay registros en la búsqueda</p>
+      </slot>
+    </div>
+  </div>
+</template>

package/components/Table/views/ViewDatabase.vue

@@ -0,0 +1,236 @@
+<script setup>
+import { IconLoader2, IconX } from '@tabler/icons-vue'
+
+const props = defineProps({
+  table:         Object,
+  loading:       Boolean,
+  skeletonRows:  Array,
+  lastRowHeight: Number,
+  checkable:     Boolean,
+  editingCell:   { type: Object, default: null },   // { rowId, colKey } | null
+  editingValue:  { type: String, default: '' },
+  savingCell:    { type: Object, default: null },   // { rowId, colKey } | null
+  cellError:     { type: Object, default: null },   // { rowId, colKey, message } | null
+})
+
+const emit = defineEmits(['row-click', 'start-edit', 'save-edit', 'cancel-edit', 'editing-value-change'])
+
+const isCellEditing = (rowId, colKey) =>
+  props.editingCell?.rowId === rowId && props.editingCell?.colKey === colKey
+
+const isCellSaving = (rowId, colKey) =>
+  props.savingCell?.rowId === rowId && props.savingCell?.colKey === colKey
+
+const isCellError = (rowId, colKey) =>
+  props.cellError?.rowId === rowId && props.cellError?.colKey === colKey
+
+const getVisibleDataCols = (row) =>
+  row.getVisibleCells().filter(c => c.column.id !== 'select')
+
+const isEditable = (col) => col.columnDef.meta?.editable === true
+
+// Tab key: save current cell and move to next editable cell
+const handleTabKey = async (e, row, col) => {
+  e.preventDefault()
+  emit('save-edit', row, col)
+
+  // Find next editable cell
+  await nextTick()
+  const rows = props.table.getRowModel().rows
+  const rowIdx = rows.findIndex(r => r.id === row.id)
+  const cols = getVisibleDataCols(row)
+  const colIdx = cols.findIndex(c => c.column.id === col.column.id)
+
+  // Try next cells in the same row
+  for (let ci = colIdx + 1; ci < cols.length; ci++) {
+    if (isEditable(cols[ci].column)) {
+      const el = document.querySelector(`[data-cell-editable][data-row-idx="${rowIdx}"][data-col-idx="${ci}"]`)
+      if (el) { el.focus(); return }
+    }
+  }
+
+  // Try first editable cell in next row
+  for (let ri = rowIdx + 1; ri < rows.length; ri++) {
+    const nextRowCols = getVisibleDataCols(rows[ri])
+    for (let ci = 0; ci < nextRowCols.length; ci++) {
+      if (isEditable(nextRowCols[ci].column)) {
+        const el = document.querySelector(`[data-cell-editable][data-row-idx="${ri}"][data-col-idx="${ci}"]`)
+        if (el) { el.focus(); return }
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="overflow-x-auto">
+    <table
+      class="w-full divide-y divide-card-line"
+      :style="{ tableLayout: 'auto', minWidth: '100%' }"
+    >
+      <thead class="bg-surface">
+        <tr>
+          <th
+            v-if="checkable"
+            scope="col"
+            class="text-center py-1.5 px-2.5 border-b border-card-line"
+            style="width: 36px"
+          >
+            <input
+              type="checkbox"
+              :checked="table.getIsAllRowsSelected()"
+              :indeterminate="table.getIsSomeRowsSelected()"
+              @change="table.getToggleAllRowsSelectedHandler()($event)"
+              class="shrink-0 border-card-line rounded-control text-blue-900 focus:ring-0 focus:ring-offset-0 dark:bg-card"
+            />
+          </th>
+          <th
+            v-for="header in table.getHeaderGroups()[0]?.headers.filter(h => h.id !== 'select') ?? []"
+            :key="header.id"
+            scope="col"
+            class="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider py-1.5 px-2.5 border-b border-card-line bg-surface text-left whitespace-nowrap"
+          >
+            {{ header.column.columnDef.meta?.label ?? header.id }}
+          </th>
+        </tr>
+      </thead>
+
+      <tbody class="divide-y divide-card-line/50">
+        <!-- Loading skeleton -->
+        <tr
+          v-if="loading"
+          v-for="(_, i) in skeletonRows"
+          :key="'dbsk-' + i"
+          class="animate-pulse bg-card"
+        >
+          <td
+            v-if="checkable"
+            class="py-2 px-2.5"
+          >
+            <div class="w-3 h-3 bg-surface-1 rounded mx-auto"></div>
+          </td>
+          <td
+            v-for="header in table.getHeaderGroups()[0]?.headers.filter(h => h.id !== 'select') ?? []"
+            :key="'dbskc-' + header.id"
+            class="py-2 px-2.5"
+          >
+            <div class="h-3 w-[60%] rounded bg-surface-1"></div>
+          </td>
+        </tr>
+
+        <!-- Empty state rows -->
+        <tr
+          v-if="!loading && table.getRowModel().rows.length === 0"
+          v-for="i in (table.getState?.().pagination?.pageSize ?? 10)"
+          :key="'dbesk-' + i"
+          class="bg-card"
+        >
+          <td
+            v-if="checkable"
+            class="py-2"
+          />
+          <td
+            v-for="header in table.getHeaderGroups()[0]?.headers.filter(h => h.id !== 'select') ?? []"
+            :key="'dbeskc-' + header.id"
+            class="py-2"
+          />
+        </tr>
+
+        <!-- Data rows -->
+        <tr
+          v-else
+          v-for="(row, rowIdx) in table.getRowModel().rows"
+          :key="row.id"
+          class="hover:bg-layer-hover transition-colors border-b border-card-line/50"
+          :class="{
+            'bg-indigo-50/40 dark:bg-indigo-900/10': row.getIsSelected(),
+          }"
+          @click="emit('row-click', row, $event)"
+        >
+          <!-- Checkbox cell -->
+          <td
+            v-if="checkable"
+            class="text-center py-1.5 px-2.5"
+            style="width: 36px"
+            @click.stop
+          >
+            <input
+              type="checkbox"
+              :checked="row.getIsSelected()"
+              :disabled="!row.getCanSelect()"
+              @change="row.getToggleSelectedHandler()($event)"
+              class="rounded border-card-line focus:ring-0 focus:ring-offset-0 dark:bg-card"
+            />
+          </td>
+
+          <!-- Data cells -->
+          <td
+            v-for="(cell, colIdx) in getVisibleDataCols(row)"
+            :key="cell.id"
+            class="py-2 px-2.5 text-xs text-foreground relative group/cell overflow-hidden"
+            :class="cell.column.columnDef.meta?.class ?? ''"
+            :data-cell-editable="isEditable(cell.column) || undefined"
+            :data-row-idx="rowIdx"
+            :data-col-idx="colIdx"
+            :tabindex="isEditable(cell.column) && !isCellEditing(row.id, cell.column.id) ? 0 : undefined"
+            @click.stop="isEditable(cell.column) && !isCellEditing(row.id, cell.column.id) && emit('start-edit', row, cell)"
+            @keydown.enter.prevent="isEditable(cell.column) && !isCellEditing(row.id, cell.column.id) && emit('start-edit', row, cell)"
+          >
+            <!-- Editing state — absolute overlay so it never changes the row height -->
+            <template v-if="isCellEditing(row.id, cell.column.id)">
+              <div class="absolute inset-0 z-10 ring-1 ring-inset ring-indigo-400 bg-card">
+                <input
+                  :value="editingValue"
+                  @input="emit('editing-value-change', $event.target.value)"
+                  @keydown.enter.prevent="emit('save-edit', row, cell)"
+                  @keydown.escape.prevent="emit('cancel-edit')"
+                  @keydown.tab="handleTabKey($event, row, cell)"
+                  @click.stop
+                  autofocus
+                  class="w-full h-full px-2.5 text-xs text-foreground bg-transparent outline-none"
+                />
+              </div>
+            </template>
+
+            <!-- Saving state -->
+            <template v-else-if="isCellSaving(row.id, cell.column.id)">
+              <div class="flex items-center gap-1.5 text-muted-foreground">
+                <IconLoader2 class="size-3 animate-spin shrink-0 text-indigo-400" />
+                <span class="truncate">{{ cell.getValue() }}</span>
+              </div>
+            </template>
+
+            <!-- Error state -->
+            <template v-else-if="isCellError(row.id, cell.column.id)">
+              <div class="flex items-center gap-1 text-red-500" :title="cellError?.message">
+                <IconX class="size-3 shrink-0" />
+                <span class="truncate text-foreground">{{ cell.getValue() }}</span>
+              </div>
+            </template>
+
+            <!-- Normal display -->
+            <template v-else>
+              <div class="flex items-center gap-1">
+                <span class="truncate flex-1">
+                  <slot :name="cell.column.id" :row="row.original" :value="cell.getValue()">
+                    {{ cell.getValue() }}
+                  </slot>
+                </span>
+                <!-- Pencil indicator for editable cells -->
+                <svg
+                  v-if="isEditable(cell.column)"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  class="size-2.5 shrink-0 text-muted-foreground opacity-0 group-hover/cell:opacity-60 transition-opacity"
+                >
+                  <path d="M13.488 2.513a1.75 1.75 0 0 0-2.475 0L3.76 9.768a1.75 1.75 0 0 0-.455.88l-.5 2.5a.75.75 0 0 0 .875.876l2.5-.5a1.75 1.75 0 0 0 .88-.455l7.255-7.254a1.75 1.75 0 0 0 0-2.474ZM12.72 7.54l-.72.72L10.5 6.76l.72-.72 1.5 1.5ZM3.963 9.716l6.037-6.037 1.5 1.5-6.037 6.037a.25.25 0 0 1-.126.065l-1.68.336.336-1.68a.25.25 0 0 1 .065-.126Z" />
+                </svg>
+              </div>
+            </template>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/components/Table/views/ViewTable.vue

@@ -0,0 +1,299 @@
+<script setup>
+import {
+  IconSelector,
+  IconChevronUp,
+  IconChevronDown,
+  IconPin,
+} from '@tabler/icons-vue'
+
+const props = defineProps({
+  table:                Object,
+  loading:              Boolean,
+  skeletonRows:         Array,
+  lastRowHeight:        Number,
+  checkable:            Boolean,
+  previewRowId:         { type: [String, Number], default: null },
+  isRowClickEnabled:    Boolean,
+  search:               String,
+  columnFilters:        Array,
+  hasFilterableColumns: Boolean,
+  pagination:           Object,
+  getPinnedStyles:      Function,
+  pinnedRowStyle:       Function,
+  onHeaderDrop:         Function,
+  onAutoSizeColumn:     Function,
+})
+
+const emit = defineEmits(['row-click', 'row-keydown'])
+
+// Internal drag state — purely visual, owned by this view
+let draggedHeaderId = null
+const dragOverHeaderId = ref(null)
+const resizeHoverId = ref(null)
+
+const tableBodyEl = ref(null)
+defineExpose({ tableBodyEl })
+
+const onHeaderDragStart = (colId) => { draggedHeaderId = colId }
+const onHeaderDragOver = (e, colId) => { e.preventDefault(); dragOverHeaderId.value = colId }
+const onHeaderDragLeave = () => { dragOverHeaderId.value = null }
+const onHeaderDropLocal = (colId) => {
+  if (!draggedHeaderId || draggedHeaderId === colId) { draggedHeaderId = null; dragOverHeaderId.value = null; return }
+  if (colId === 'select') { draggedHeaderId = null; dragOverHeaderId.value = null; return }
+  props.onHeaderDrop?.(draggedHeaderId, colId)
+  draggedHeaderId = null
+  dragOverHeaderId.value = null
+}
+</script>
+
+<template>
+  <div class="overflow-x-auto relative">
+    <table
+      class="relative divide-y divide-card-line"
+      :style="{ tableLayout: 'fixed', width: table.getTotalSize() + 'px', minWidth: '100%' }"
+    >
+      <colgroup>
+        <col
+          v-for="col in [...table.getLeftVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns(), ...table.getRightVisibleLeafColumns()]"
+          :key="col.id"
+          :style="{ width: col.getSize() + 'px' }"
+        >
+      </colgroup>
+      <thead class="relative z-20 bg-card">
+        <template v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+          <!-- Main header row -->
+          <tr class="bg-card">
+            <th
+              v-for="header in headerGroup.headers"
+              :key="header.id"
+              scope="col"
+              :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' && onHeaderDropLocal(header.id)"
+              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 -->
+              <template v-if="header.id === 'select'">
+                <input
+                  type="checkbox"
+                  :checked="table.getIsAllRowsSelected()"
+                  :indeterminate="table.getIsSomeRowsSelected()"
+                  @change="table.getToggleAllRowsSelectedHandler()($event)"
+                  class="mx-2 shrink-0 border-card-line rounded-control text-blue-900 focus:ring-0 focus:ring-offset-0 dark:bg-card"
+                />
+              </template>
+              <!-- Regular column header -->
+              <template v-else>
+                <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" />
+                    <IconChevronUp v-else class="size-4" />
+                  </span>
+                </div>
+                <!-- Resize handle -->
+                <div
+                  v-if="header.column.getCanResize()"
+                  class="absolute right-0 top-0 h-full w-3 cursor-col-resize group/rz flex items-center justify-center select-none touch-none"
+                  @mouseenter="resizeHoverId = header.id"
+                  @mouseleave="resizeHoverId = null"
+                  @mousedown.stop="header.getResizeHandler()?.($event)"
+                  @touchstart.passive.stop="header.getResizeHandler()?.($event)"
+                  @dblclick.stop="onAutoSizeColumn?.(header)"
+                  @dragstart.stop.prevent
+                  @click.stop
+                >
+                  <div
+                    class="h-4 w-px transition-all"
+                    :class="header.column.getIsResizing()
+                      ? 'bg-indigo-400 dark:bg-indigo-500 !w-0.5'
+                      : 'bg-surface-1 group-hover/rz:bg-indigo-300 dark:group-hover/rz:bg-indigo-600 group-hover/rz:w-0.5'"
+                  />
+                </div>
+              </template>
+            </th>
+          </tr>
+
+          <!-- Column filter row -->
+          <tr
+            v-if="hasFilterableColumns"
+            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',
+              ]"
+              :style="getPinnedStyles(header.column, true)"
+            >
+              <input
+                v-if="header.column.getCanFilter()"
+                :value="header.column.getFilterValue() ?? ''"
+                @input="(e) => header.column.setFilterValue(e.target.value || undefined)"
+                :placeholder="`Filtrar ${header.column.columnDef.meta?.label ?? ''}...`"
+                class="w-full bg-card border border-card-line rounded-control text-xs text-muted-foreground-1 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="tableBodyEl" class="divide-y divide-card-line">
+        <!-- Loading skeleton rows -->
+        <tr
+          v-if="loading"
+          v-for="(_, i) in skeletonRows"
+          :key="'sk-' + i"
+          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 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>
+          </td>
+        </tr>
+
+        <!-- Loading filler rows -->
+        <tr
+          v-if="loading && skeletonRows.length < pagination.pageSize"
+          v-for="i in (pagination.pageSize - skeletonRows.length)"
+          :key="'lf-' + i"
+          class="bg-card"
+        >
+          <td
+            v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
+            :key="'lfc-' + header.id"
+            :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
+          />
+        </tr>
+
+        <!-- Empty filler rows -->
+        <tr
+          v-if="!loading && table.getRowModel().rows.length === 0"
+          v-for="i in pagination.pageSize"
+          :key="'esk-' + i"
+          class="bg-card"
+        >
+          <td
+            v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
+            :key="'eskc-' + header.id"
+            :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
+          />
+        </tr>
+
+        <!-- Data rows -->
+        <tr
+          v-else
+          v-for="row in table.getRowModel().rows"
+          :key="row.id"
+          data-row-type="data"
+          @click="(e) => emit('row-click', row, e)"
+          @keydown="(e) => emit('row-keydown', row, e)"
+          :tabindex="isRowClickEnabled ? 0 : undefined"
+          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()"
+            :key="cell.id"
+            :data-col-id="cell.column.id"
+            :class="[
+              cell.column.id === 'select'
+                ? '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'">
+              <div @click.stop>
+                <input
+                  type="checkbox"
+                  :checked="row.getIsSelected()"
+                  :disabled="!row.getCanSelect()"
+                  @change="row.getToggleSelectedHandler()($event)"
+                  class="rounded border-card-line focus:ring-0 focus:ring-offset-0 dark:bg-card"
+                />
+              </div>
+            </template>
+            <!-- Data cell with slot -->
+            <template v-else>
+              <slot :name="cell.column.id" :row="row.original" :value="cell.getValue()">
+                {{ cell.getValue() }}
+              </slot>
+            </template>
+          </td>
+        </tr>
+
+        <!-- Filler rows: pad table to full page height -->
+        <tr
+          v-if="!loading && table.getRowModel().rows.length > 0 && table.getRowModel().rows.length < pagination.pageSize"
+          v-for="i in (pagination.pageSize - table.getRowModel().rows.length)"
+          :key="'fill-' + i"
+          class="bg-card"
+        >
+          <td
+            v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
+            :key="'fillc-' + header.id"
+            :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
+          />
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Empty state overlays -->
+    <div
+      v-if="!loading && table.getRowModel().rows.length === 0 && !search && !columnFilters?.length"
+      class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 rounded-card"
+    >
+      <slot name="empty">
+        <p class="text-muted-foreground text-lg font-medium italic">No hay registros</p>
+      </slot>
+    </div>
+
+    <div
+      v-if="!loading && table.getRowModel().rows.length === 0 && (search || columnFilters?.length)"
+      class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 rounded-card"
+    >
+      <slot name="empty-search">
+        <p class="text-muted-foreground text-lg font-medium italic">No hay registros en la búsqueda</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+tbody tr {
+  --row-bg: var(--card, #fff);
+}
+tbody tr:hover {
+  --row-bg: var(--layer-hover, #f8fafc);
+}
+</style>