@innertia-solutions/nuxt-theme-spark 0.1.18 → 0.1.19

package/components/Table/Database.vue

@@ -0,0 +1,183 @@
+<script setup>
+import { IconSearch, IconLoader2, IconCheck, IconX } from '@tabler/icons-vue'
+
+// Dense database view with inline cell editing — click cell → input → blur → mutation
+const props = defineProps({
+  endpoint: { type: String, required: true },
+  columns: { type: Array, required: true }, // [{ key, label, editable?, type?: 'text'|'number'|'select', options?: [] }]
+  name: { type: String, required: true },
+  params: { type: Object, default: () => ({}) },
+  updateMutation: { type: Function, default: null }, // (id, field, value) => Promise
+  cached: { type: Boolean, default: false },
+  searchPlaceholder: { type: String, default: 'Buscar...' },
+  showSearch: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['row-click', 'cell-save'])
+
+const tableRef = ref(null)
+
+// ─── Inline editing ───────────────────────────────────────────────────────────
+const editingCell = ref(null) // { rowId, key }
+const editingValue = ref('')
+const savingCell = ref(null)
+const cellError = ref(null)
+
+const startEdit = (row, col) => {
+  if (!col.editable) return
+  editingCell.value = { rowId: row.id, key: col.key }
+  editingValue.value = row[col.key] ?? ''
+  cellError.value = null
+  nextTick(() => {
+    const input = document.querySelector(`[data-cell-input="${row.id}-${col.key}"]`)
+    input?.focus()
+    input?.select()
+  })
+}
+
+const cancelEdit = () => {
+  editingCell.value = null
+  editingValue.value = ''
+  cellError.value = null
+}
+
+const saveEdit = async (row, col) => {
+  if (!editingCell.value) return
+  const newValue = editingValue.value
+  const oldValue = row[col.key]
+
+  if (newValue === String(oldValue ?? '')) {
+    cancelEdit()
+    return
+  }
+
+  editingCell.value = null
+  savingCell.value = { rowId: row.id, key: col.key }
+
+  try {
+    if (props.updateMutation) {
+      await props.updateMutation(row.id, col.key, newValue)
+    }
+    // Patch local row
+    row[col.key] = newValue
+    emit('cell-save', { id: row.id, field: col.key, value: newValue, oldValue })
+    tableRef.value?.reload()
+  } catch (e) {
+    cellError.value = { rowId: row.id, key: col.key, message: e.message }
+  } finally {
+    savingCell.value = null
+  }
+}
+
+const isEditing = (rowId, key) => editingCell.value?.rowId === rowId && editingCell.value?.key === key
+const isSaving = (rowId, key) => savingCell.value?.rowId === rowId && savingCell.value?.key === key
+
+const search = ref('')
+const mergedParams = computed(() => ({ ...props.params }))
+
+const reload = () => tableRef.value?.reload()
+defineExpose({ reload })
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div v-if="showSearch" class="relative max-w-sm">
+      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+        <IconSearch class="size-4 text-slate-400" stroke="1.5" />
+      </div>
+      <input
+        v-model="search"
+        type="search"
+        :placeholder="searchPlaceholder"
+        class="block w-full rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-1.5 ps-9 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+      />
+    </div>
+
+    <!-- Dense table wrapper — override Table's default padding with compact styles -->
+    <div class="overflow-x-auto border border-slate-200 dark:border-slate-700 rounded-xl">
+      <Table
+        ref="tableRef"
+        :endpoint="endpoint"
+        :columns="columns"
+        :name="name"
+        :params="mergedParams"
+        :search="search"
+        :cached="cached"
+        :show-reload-button="false"
+        class="[&_td]:py-1 [&_td]:px-2 [&_th]:py-1.5 [&_th]:px-2 [&_td]:text-xs [&_th]:text-xs"
+        @row-click="emit('row-click', $event)"
+      >
+        <!-- Override each cell slot to support inline editing -->
+        <template
+          v-for="col in columns"
+          :key="col.key"
+          #[`cell-${col.key}`]="{ row }"
+        >
+          <!-- Editing state -->
+          <div v-if="isEditing(row.id, col.key)" class="flex items-center gap-1 -mx-1">
+            <select
+              v-if="col.type === 'select' && col.options"
+              v-model="editingValue"
+              :data-cell-input="`${row.id}-${col.key}`"
+              @blur="saveEdit(row, col)"
+              @keydown.enter="saveEdit(row, col)"
+              @keydown.escape="cancelEdit"
+              class="flex-1 min-w-0 rounded border border-indigo-400 bg-white dark:bg-slate-700 text-slate-900 dark:text-white py-0.5 px-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            >
+              <option v-for="opt in col.options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+            </select>
+            <input
+              v-else
+              v-model="editingValue"
+              :type="col.type === 'number' ? 'number' : 'text'"
+              :data-cell-input="`${row.id}-${col.key}`"
+              @blur="saveEdit(row, col)"
+              @keydown.enter="saveEdit(row, col)"
+              @keydown.escape="cancelEdit"
+              class="flex-1 min-w-0 rounded border border-indigo-400 bg-white dark:bg-slate-700 text-slate-900 dark:text-white py-0.5 px-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            />
+          </div>
+
+          <!-- Saving state -->
+          <div v-else-if="isSaving(row.id, col.key)" class="flex items-center gap-1 text-slate-400">
+            <IconLoader2 class="size-3 animate-spin shrink-0" stroke="1.5" />
+            <span class="truncate">{{ row[col.key] }}</span>
+          </div>
+
+          <!-- Error state -->
+          <div
+            v-else-if="cellError?.rowId === row.id && cellError?.key === col.key"
+            :title="cellError.message"
+            class="flex items-center gap-1 text-red-500 cursor-pointer"
+            @click="startEdit(row, col)"
+          >
+            <IconX class="size-3 shrink-0" stroke="2" />
+            <span class="truncate text-xs">{{ row[col.key] }}</span>
+          </div>
+
+          <!-- View state -->
+          <div
+            v-else
+            :class="[
+              'truncate',
+              col.editable ? 'cursor-text hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded px-1 -mx-1 group relative' : ''
+            ]"
+            @click="col.editable ? startEdit(row, col) : emit('row-click', row)"
+          >
+            <slot :name="`cell-${col.key}`" :row="row">
+              {{ row[col.key] }}
+            </slot>
+            <span
+              v-if="col.editable"
+              class="absolute inset-y-0 right-0 flex items-center opacity-0 group-hover:opacity-100 pr-1"
+            >
+              <svg class="size-3 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+              </svg>
+            </span>
+          </div>
+        </template>
+      </Table>
+    </div>
+  </div>
+</template>

package/components/Table/Grid.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { IconSearch } from '@tabler/icons-vue'
+
+// Grid / card layout view — wraps DataTable with viewMode="grid"
+const props = defineProps({
+  endpoint: { type: String, required: true },
+  columns: { type: Array, required: true },
+  name: { type: String, required: true },
+  params: { type: Object, default: () => ({}) },
+  cached: { type: Boolean, default: true },
+  searchPlaceholder: { type: String, default: 'Buscar...' },
+  showSearch: { type: Boolean, default: true },
+  gridClass: { type: String, default: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4' },
+  clickRowToOpen: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['row-click', 'loaded'])
+
+const search = ref('')
+const tableRef = ref(null)
+
+const reload = () => tableRef.value?.reload()
+const clearCache = () => tableRef.value?.clearCache()
+
+defineExpose({ reload, clearCache })
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div v-if="showSearch" class="relative">
+      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+        <IconSearch class="size-4 text-slate-400" stroke="1.5" />
+      </div>
+      <input
+        v-model="search"
+        type="search"
+        :placeholder="searchPlaceholder"
+        class="block w-full rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+      />
+    </div>
+
+    <DataTable
+      ref="tableRef"
+      :endpoint="endpoint"
+      :columns="columns"
+      :name="name"
+      :params="params"
+      :search="search"
+      :cached="cached"
+      :click-row-to-open="clickRowToOpen"
+      view-mode="grid"
+      :grid-class="gridClass"
+      @row-click="emit('row-click', $event)"
+      @loaded="emit('loaded', $event)"
+    >
+      <!-- Card slot: pass through for custom card rendering -->
+      <template v-if="$slots.card" #card="slotProps">
+        <slot name="card" v-bind="slotProps" />
+      </template>
+    </DataTable>
+  </div>
+</template>

package/components/Table/Kanban.vue

@@ -0,0 +1,188 @@
+<script setup>
+import { IconLoader2, IconPlus } from '@tabler/icons-vue'
+import { useQueryClient } from '@tanstack/vue-query'
+
+// Kanban board: states as columns, HTML5 DnD, optimistic updates
+// Usage: <TableKanban endpoint="..." :states="[{key:'todo',label:'Pendiente',color:'slate'}]" state-key="status" ... />
+
+const props = defineProps({
+  endpoint: { type: String, required: true },     // POST endpoint returning paginated list
+  name: { type: String, required: true },          // used as queryKey base
+  params: { type: Object, default: () => ({}) },
+  stateKey: { type: String, default: 'status' },   // field in row that holds the state key
+  states: {                                         // column definitions
+    type: Array,
+    required: true,
+    // [{ key: 'todo', label: 'Pendiente', color: 'slate' }]
+    // color = tailwind color name: slate|red|yellow|green|blue|indigo|purple|pink
+  },
+  moveMutation: { type: Function, default: null }, // (id, newState) => Promise — called on drop
+  perPage: { type: Number, default: 50 },
+})
+
+const emit = defineEmits(['move', 'card-click'])
+
+const api = useApi()
+const queryClient = useQueryClient()
+
+// ─── Fetch all rows ───────────────────────────────────────────────────────────
+const loading = ref(false)
+const rows = ref([])
+
+const fetchAll = async () => {
+  loading.value = true
+  try {
+    const res = await api.post(props.endpoint, { perPage: props.perPage, ...props.params })
+    rows.value = Array.isArray(res?.data) ? res.data : (Array.isArray(res) ? res : [])
+  } catch (e) {
+    console.error('[Kanban] fetch error', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(fetchAll)
+
+watch(() => props.params, fetchAll, { deep: true })
+
+// ─── Rows grouped by state ────────────────────────────────────────────────────
+const columnRows = computed(() => {
+  const map = {}
+  for (const s of props.states) map[s.key] = []
+  for (const row of rows.value) {
+    const state = row[props.stateKey]
+    if (map[state]) map[state].push(row)
+  }
+  return map
+})
+
+// ─── DnD ─────────────────────────────────────────────────────────────────────
+const draggedId = ref(null)
+const draggedFromState = ref(null)
+const dragOverState = ref(null)
+
+const onDragStart = (row, state) => {
+  draggedId.value = row.id
+  draggedFromState.value = state
+}
+
+const onDragOver = (e, state) => {
+  e.preventDefault()
+  dragOverState.value = state
+}
+
+const onDragLeave = () => { dragOverState.value = null }
+
+const onDrop = async (targetState) => {
+  dragOverState.value = null
+  if (!draggedId.value || draggedFromState.value === targetState) {
+    draggedId.value = null
+    draggedFromState.value = null
+    return
+  }
+
+  const id = draggedId.value
+  const fromState = draggedFromState.value
+  draggedId.value = null
+  draggedFromState.value = null
+
+  // Optimistic update
+  const idx = rows.value.findIndex(r => r.id === id)
+  if (idx >= 0) rows.value[idx] = { ...rows.value[idx], [props.stateKey]: targetState }
+
+  emit('move', { id, from: fromState, to: targetState })
+
+  if (props.moveMutation) {
+    try {
+      await props.moveMutation(id, targetState)
+    } catch (e) {
+      // Rollback
+      const ridx = rows.value.findIndex(r => r.id === id)
+      if (ridx >= 0) rows.value[ridx] = { ...rows.value[ridx], [props.stateKey]: fromState }
+      console.error('[Kanban] move failed, rolled back', e)
+    }
+  }
+}
+
+// ─── Color map ────────────────────────────────────────────────────────────────
+const colorMap = {
+  slate:  { header: 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300', over: 'ring-2 ring-slate-400' },
+  red:    { header: 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300',       over: 'ring-2 ring-red-400' },
+  yellow: { header: 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300', over: 'ring-2 ring-yellow-400' },
+  green:  { header: 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300', over: 'ring-2 ring-green-400' },
+  blue:   { header: 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300',   over: 'ring-2 ring-blue-400' },
+  indigo: { header: 'bg-indigo-50 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-300', over: 'ring-2 ring-indigo-400' },
+  purple: { header: 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300', over: 'ring-2 ring-purple-400' },
+  pink:   { header: 'bg-pink-50 dark:bg-pink-900/20 text-pink-700 dark:text-pink-300',   over: 'ring-2 ring-pink-400' },
+}
+
+const getColors = (state) => colorMap[state.color ?? 'slate'] ?? colorMap.slate
+
+const reload = () => fetchAll()
+defineExpose({ reload, rows })
+</script>
+
+<template>
+  <div>
+    <!-- Loading -->
+    <div v-if="loading" class="flex items-center justify-center py-16 gap-2 text-slate-400">
+      <IconLoader2 class="size-5 animate-spin" stroke="1.5" />
+      <span class="text-sm">Cargando...</span>
+    </div>
+
+    <!-- Board -->
+    <div v-else class="flex gap-4 overflow-x-auto pb-4">
+      <div
+        v-for="state in states"
+        :key="state.key"
+        class="flex-shrink-0 w-72 flex flex-col rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden transition-shadow"
+        :class="dragOverState === state.key ? getColors(state).over : ''"
+        @dragover="onDragOver($event, state.key)"
+        @dragleave="onDragLeave"
+        @drop="onDrop(state.key)"
+      >
+        <!-- Column header -->
+        <div :class="['px-4 py-3 flex items-center justify-between', getColors(state).header]">
+          <span class="font-semibold text-sm">{{ state.label }}</span>
+          <span class="text-xs font-bold bg-white/60 dark:bg-black/20 rounded-full px-2 py-0.5">
+            {{ columnRows[state.key]?.length ?? 0 }}
+          </span>
+        </div>
+
+        <!-- Cards -->
+        <div class="flex-1 flex flex-col gap-2 p-3 bg-slate-50/60 dark:bg-slate-900/30 min-h-24">
+          <div
+            v-for="row in columnRows[state.key]"
+            :key="row.id"
+            draggable="true"
+            @dragstart="onDragStart(row, state.key)"
+            class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-3 cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow select-none"
+            :class="draggedId === row.id ? 'opacity-40' : ''"
+            @click="emit('card-click', row)"
+          >
+            <slot name="card" :row="row" :state="state">
+              <!-- Default card -->
+              <div class="space-y-1">
+                <div
+                  v-for="(val, key) in Object.fromEntries(Object.entries(row).filter(([k]) => k !== props.stateKey).slice(0, 3))"
+                  :key="key"
+                  class="text-sm"
+                >
+                  <span class="text-slate-400 dark:text-slate-500 text-xs capitalize">{{ key }}: </span>
+                  <span class="text-slate-800 dark:text-slate-200 font-medium">{{ val }}</span>
+                </div>
+              </div>
+            </slot>
+          </div>
+
+          <div
+            v-if="!columnRows[state.key]?.length"
+            class="flex-1 flex items-center justify-center py-6 text-sm text-slate-300 dark:text-slate-600"
+          >
+            Sin elementos
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Table/List.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { IconSearch, IconLoader2 } from '@tabler/icons-vue'
+import { useInfiniteQuery } from '@tanstack/vue-query'
+
+// Infinite scroll list — fetches next page when sentinel enters viewport
+const props = defineProps({
+  endpoint: { type: String, required: true },
+  name: { type: String, required: true },
+  params: { type: Object, default: () => ({}) },
+  searchPlaceholder: { type: String, default: 'Buscar...' },
+  showSearch: { type: Boolean, default: true },
+  perPage: { type: Number, default: 20 },
+})
+
+const emit = defineEmits(['row-click'])
+
+const api = useApi()
+const search = ref('')
+const sentinel = ref(null)
+
+let searchTimeout = null
+const debouncedSearch = ref('')
+watch(search, (v) => {
+  if (searchTimeout) clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => { debouncedSearch.value = v }, 400)
+})
+
+const queryKey = computed(() => [props.name, 'infinite', debouncedSearch.value, props.params])
+
+const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } = useInfiniteQuery({
+  queryKey,
+  queryFn: ({ pageParam = 1 }) =>
+    api.post(props.endpoint, {
+      search: debouncedSearch.value,
+      page: pageParam,
+      perPage: props.perPage,
+      ...props.params,
+    }),
+  getNextPageParam: (lastPage) => {
+    const meta = lastPage?.meta ?? lastPage
+    if (!meta?.current_page || !meta?.last_page) return undefined
+    return meta.current_page < meta.last_page ? meta.current_page + 1 : undefined
+  },
+  initialPageParam: 1,
+})
+
+const rows = computed(() => data.value?.pages.flatMap(p => p?.data ?? (Array.isArray(p) ? p : [])) ?? [])
+
+// Intersection observer for auto-load
+let observer = null
+onMounted(() => {
+  observer = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting && hasNextPage.value && !isFetchingNextPage.value) {
+      fetchNextPage()
+    }
+  }, { rootMargin: '200px' })
+  if (sentinel.value) observer.observe(sentinel.value)
+})
+onBeforeUnmount(() => observer?.disconnect())
+
+watch(sentinel, (el) => {
+  if (el && observer) observer.observe(el)
+})
+
+const reload = () => refetch()
+defineExpose({ reload, rows })
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div v-if="showSearch" class="relative">
+      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+        <IconSearch class="size-4 text-slate-400" stroke="1.5" />
+      </div>
+      <input
+        v-model="search"
+        type="search"
+        :placeholder="searchPlaceholder"
+        class="block w-full rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+      />
+    </div>
+
+    <!-- Loading skeleton -->
+    <div v-if="isLoading" class="space-y-2">
+      <div
+        v-for="i in 8"
+        :key="i"
+        class="h-16 bg-slate-100 dark:bg-slate-800 rounded-xl animate-pulse"
+      />
+    </div>
+
+    <!-- Rows -->
+    <div v-else class="space-y-2">
+      <div
+        v-for="row in rows"
+        :key="row.id ?? JSON.stringify(row)"
+        class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl px-4 py-3 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors cursor-pointer"
+        @click="emit('row-click', row)"
+      >
+        <slot name="item" :row="row">
+          <!-- Default: show first few keys -->
+          <div class="flex flex-wrap gap-x-6 gap-y-1">
+            <div
+              v-for="(val, key) in Object.fromEntries(Object.entries(row).slice(0, 4))"
+              :key="key"
+              class="text-sm"
+            >
+              <span class="text-slate-400 dark:text-slate-500 text-xs">{{ key }}: </span>
+              <span class="text-slate-800 dark:text-slate-200">{{ val }}</span>
+            </div>
+          </div>
+        </slot>
+      </div>
+
+      <div v-if="rows.length === 0" class="text-center py-12 text-slate-400 dark:text-slate-500 text-sm">
+        Sin resultados
+      </div>
+    </div>
+
+    <!-- Sentinel + loader -->
+    <div ref="sentinel" class="flex justify-center py-4">
+      <div v-if="isFetchingNextPage" class="flex items-center gap-2 text-sm text-slate-400">
+        <IconLoader2 class="size-4 animate-spin" stroke="1.5" />
+        Cargando más...
+      </div>
+    </div>
+  </div>
+</template>

package/components/Table/Standard.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { IconSearch, IconAdjustmentsHorizontal } from '@tabler/icons-vue'
+
+// Standard admin table: search + filters + Table (TanStack) + export
+const props = defineProps({
+  endpoint: { type: String, required: true },
+  columns: { type: Array, required: true },
+  name: { type: String, required: true },
+  params: { type: Object, default: () => ({}) },
+  checkable: { type: Boolean, default: false },
+  cached: { type: Boolean, default: true },
+  showReloadButton: { type: Boolean, default: true },
+  clickRowToOpen: { type: Boolean, default: false },
+  searchPlaceholder: { type: String, default: 'Buscar...' },
+  showSearch: { type: Boolean, default: true },
+  showFilters: { type: Boolean, default: true },
+  showExport: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['row-click', 'loaded'])
+
+const search = ref('')
+const filters = ref({})
+const showFilterPanel = ref(false)
+const tableRef = ref(null)
+
+const hasFilterableColumns = computed(() =>
+  props.columns.some(c => c.filterType)
+)
+
+const activeFilterCount = computed(() =>
+  Object.values(filters.value).filter(v => v !== null && v !== undefined && v !== '').length
+)
+
+// Merge filters into params
+const mergedParams = computed(() => ({
+  ...props.params,
+  ...filters.value,
+}))
+
+const getSelectedRows = () => tableRef.value?.getSelectedRows()
+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 })
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <!-- Toolbar -->
+    <div class="flex flex-wrap items-center gap-3">
+      <!-- Search -->
+      <div v-if="showSearch" class="relative flex-1 min-w-48">
+        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+          <IconSearch class="size-4 text-slate-400" stroke="1.5" />
+        </div>
+        <input
+          v-model="search"
+          type="search"
+          :placeholder="searchPlaceholder"
+          class="block w-full rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        />
+      </div>
+
+      <!-- Filter toggle -->
+      <button
+        v-if="showFilters && hasFilterableColumns"
+        type="button"
+        @click="showFilterPanel = !showFilterPanel"
+        :class="[
+          'py-2 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
+          showFilterPanel || activeFilterCount > 0
+            ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/20 dark:border-indigo-500 dark:text-indigo-300'
+            : 'border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+        ]"
+      >
+        <IconAdjustmentsHorizontal class="size-4" stroke="1.5" />
+        Filtros
+        <span
+          v-if="activeFilterCount > 0"
+          class="inline-flex items-center justify-center size-5 rounded-full bg-indigo-600 text-white text-xs font-bold"
+        >{{ activeFilterCount }}</span>
+      </button>
+
+      <slot name="actions" />
+
+      <!-- Export -->
+      <TableExportable
+        v-if="showExport"
+        :table-ref="tableRef"
+        :name="name"
+        :columns="columns"
+      />
+    </div>
+
+    <!-- Filter panel -->
+    <Transition
+      enter-active-class="transition ease-out duration-150"
+      enter-from-class="opacity-0 -translate-y-2"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition ease-in duration-100"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-2"
+    >
+      <div
+        v-if="showFilterPanel && hasFilterableColumns"
+        class="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700"
+      >
+        <TableFilter v-model="filters" :columns="columns" />
+      </div>
+    </Transition>
+
+    <!-- Table -->
+    <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"
+      @row-click="emit('row-click', $event)"
+      @loaded="emit('loaded', $event)"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps ?? {}" />
+      </template>
+    </Table>
+  </div>
+</template>

package/components/TableExportable.vue

@@ -0,0 +1,205 @@
+<script setup>
+import {
+  IconFileTypeXls,
+  IconCodeDots,
+  IconFileTypePdf,
+  IconFileTypeCsv,
+  IconDownload,
+} from '@tabler/icons-vue'
+
+// Modal with format selector, pre-filled filename, columns checkboxes
+const props = defineProps({
+  tableRef: { type: Object, default: null },
+  name: { type: String, default: 'export' },
+  columns: { type: Array, default: () => [] }, // [{ key, label }]
+})
+
+const isOpen = ref(false)
+const format = ref('xlsx')
+const filename = ref(props.name)
+const selectedColumns = ref([])
+
+watch(() => props.columns, (cols) => {
+  selectedColumns.value = cols.map(c => c.key)
+}, { immediate: true })
+
+watch(() => props.name, (v) => { filename.value = v })
+
+const formats = [
+  { value: 'xlsx', label: 'Excel', icon: 'xlsx' },
+  { value: 'csv', label: 'CSV', icon: 'csv' },
+  { value: 'pdf', label: 'PDF', icon: 'pdf' },
+  { value: 'json', label: 'JSON', icon: 'json' },
+]
+
+const toggleColumn = (key) => {
+  const idx = selectedColumns.value.indexOf(key)
+  if (idx >= 0) selectedColumns.value.splice(idx, 1)
+  else selectedColumns.value.push(key)
+}
+
+const toggleAll = () => {
+  if (selectedColumns.value.length === props.columns.length)
+    selectedColumns.value = []
+  else
+    selectedColumns.value = props.columns.map(c => c.key)
+}
+
+const allSelected = computed(() => selectedColumns.value.length === props.columns.length)
+const indeterminate = computed(() => selectedColumns.value.length > 0 && !allSelected.value)
+
+const doExport = () => {
+  if (props.tableRef) {
+    props.tableRef.exportTable(format.value, true, true)
+  }
+  isOpen.value = false
+}
+
+const open = () => { isOpen.value = true }
+
+defineExpose({ open })
+</script>
+
+<template>
+  <div>
+    <button
+      type="button"
+      @click="isOpen = true"
+      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-lg border border-slate-200 bg-white text-slate-800 shadow-2xs hover:bg-slate-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700"
+    >
+      <IconDownload class="shrink-0 size-4" stroke="1.5" />
+      Exportar
+    </button>
+
+    <!-- Modal -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition ease-in duration-150"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="isOpen"
+          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
+          @click.self="isOpen = false"
+        >
+          <Transition
+            enter-active-class="transition ease-out duration-200"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+          >
+            <div
+              v-if="isOpen"
+              class="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md border border-slate-200 dark:border-slate-700"
+            >
+              <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-slate-700">
+                <h3 class="font-semibold text-slate-800 dark:text-slate-100">Exportar tabla</h3>
+                <button
+                  type="button"
+                  @click="isOpen = false"
+                  class="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
+                >
+                  <svg class="size-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                  </svg>
+                </button>
+              </div>
+
+              <div class="px-6 py-5 space-y-5">
+                <!-- Format selector -->
+                <div>
+                  <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">Formato</p>
+                  <div class="grid grid-cols-4 gap-2">
+                    <button
+                      v-for="f in formats"
+                      :key="f.value"
+                      type="button"
+                      @click="format = f.value"
+                      :class="[
+                        'flex flex-col items-center gap-1.5 p-3 rounded-xl border text-sm font-medium transition-colors',
+                        format === f.value
+                          ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300'
+                          : 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+                      ]"
+                    >
+                      <IconFileTypeXls v-if="f.value === 'xlsx'" class="size-5" stroke="1.5" />
+                      <IconFileTypeCsv v-else-if="f.value === 'csv'" class="size-5" stroke="1.5" />
+                      <IconFileTypePdf v-else-if="f.value === 'pdf'" class="size-5" stroke="1.5" />
+                      <IconCodeDots v-else class="size-5" stroke="1.5" />
+                      {{ f.label }}
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Filename -->
+                <div>
+                  <label class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider block mb-2">
+                    Nombre de archivo
+                  </label>
+                  <div class="flex items-center gap-2">
+                    <input
+                      v-model="filename"
+                      type="text"
+                      class="flex-1 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                    />
+                    <span class="text-sm text-slate-400">.{{ format }}</span>
+                  </div>
+                </div>
+
+                <!-- Columns -->
+                <div v-if="columns.length > 0">
+                  <div class="flex items-center justify-between mb-2">
+                    <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Columnas</p>
+                    <button
+                      type="button"
+                      @click="toggleAll"
+                      class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline"
+                    >
+                      {{ allSelected ? 'Deseleccionar todas' : 'Seleccionar todas' }}
+                    </button>
+                  </div>
+                  <div class="grid grid-cols-2 gap-1.5 max-h-40 overflow-y-auto pr-1">
+                    <label
+                      v-for="col in columns"
+                      :key="col.key"
+                      class="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+                    >
+                      <input
+                        type="checkbox"
+                        :checked="selectedColumns.includes(col.key)"
+                        @change="toggleColumn(col.key)"
+                        class="rounded border-gray-300 dark:bg-slate-700 dark:border-slate-600 text-indigo-600"
+                      />
+                      <span class="text-sm text-slate-700 dark:text-slate-200 truncate">{{ col.label }}</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="flex justify-end gap-2 px-6 py-4 border-t border-slate-100 dark:border-slate-700">
+                <button
+                  type="button"
+                  @click="isOpen = false"
+                  class="py-2 px-4 text-sm font-medium rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="button"
+                  @click="doExport"
+                  class="py-2 px-4 text-sm font-medium rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors inline-flex items-center gap-2"
+                >
+                  <IconDownload class="size-4" stroke="1.5" />
+                  Exportar
+                </button>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>

package/components/TableFilter.vue

@@ -0,0 +1,100 @@
+<script setup>
+// Reusable filter panel — reads filterType from column definitions
+// Column definition: { key, label, filterType: 'text' | 'select' | 'daterange', filterOptions?: [{value, label}] }
+
+const props = defineProps({
+  modelValue: { type: Object, default: () => ({}) }, // { [key]: value }
+  columns: { type: Array, required: true },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const filterableColumns = computed(() =>
+  props.columns.filter(c => c.filterType)
+)
+
+const localFilters = ref({ ...props.modelValue })
+
+watch(() => props.modelValue, (v) => {
+  localFilters.value = { ...v }
+}, { deep: true })
+
+const updateFilter = (key, value) => {
+  localFilters.value[key] = value
+  emit('update:modelValue', { ...localFilters.value })
+}
+
+const clearAll = () => {
+  localFilters.value = {}
+  emit('update:modelValue', {})
+}
+
+const activeCount = computed(() =>
+  Object.values(localFilters.value).filter(v => v !== null && v !== undefined && v !== '').length
+)
+</script>
+
+<template>
+  <div class="flex flex-wrap items-end gap-3">
+    <template v-for="col in filterableColumns" :key="col.key">
+      <!-- text filter -->
+      <div v-if="col.filterType === 'text'" class="flex flex-col gap-1 min-w-40">
+        <label class="text-xs text-slate-500 dark:text-slate-400">{{ col.label }}</label>
+        <input
+          type="text"
+          :value="localFilters[col.key] ?? ''"
+          @input="updateFilter(col.key, $event.target.value)"
+          :placeholder="`Filtrar ${col.label.toLowerCase()}...`"
+          class="rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        />
+      </div>
+
+      <!-- select filter -->
+      <div v-else-if="col.filterType === 'select'" class="flex flex-col gap-1 min-w-40">
+        <label class="text-xs text-slate-500 dark:text-slate-400">{{ col.label }}</label>
+        <select
+          :value="localFilters[col.key] ?? ''"
+          @change="updateFilter(col.key, $event.target.value || null)"
+          class="rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        >
+          <option value="">Todos</option>
+          <option
+            v-for="opt in col.filterOptions ?? []"
+            :key="opt.value"
+            :value="opt.value"
+          >{{ opt.label }}</option>
+        </select>
+      </div>
+
+      <!-- daterange filter -->
+      <div v-else-if="col.filterType === 'daterange'" class="flex flex-col gap-1">
+        <label class="text-xs text-slate-500 dark:text-slate-400">{{ col.label }}</label>
+        <div class="flex items-center gap-1.5">
+          <input
+            type="date"
+            :value="localFilters[col.key]?.from ?? ''"
+            @change="updateFilter(col.key, { ...localFilters[col.key], from: $event.target.value || null })"
+            class="rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          />
+          <span class="text-slate-400 text-sm">—</span>
+          <input
+            type="date"
+            :value="localFilters[col.key]?.to ?? ''"
+            @change="updateFilter(col.key, { ...localFilters[col.key], to: $event.target.value || null })"
+            class="rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          />
+        </div>
+      </div>
+    </template>
+
+    <button
+      v-if="activeCount > 0"
+      type="button"
+      @click="clearAll"
+      class="py-2 px-3 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors flex items-center gap-1.5 self-end"
+    >
+      <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+      Limpiar ({{ activeCount }})
+    </button>
+  </div>
+</template>

package/package.json

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