@innertia-solutions/nuxt-theme-spark 0.1.133 → 0.1.135

package/components/Admin/Base.vue

@@ -11,7 +11,7 @@ const isOpen = ref(false)
 const open  = () => { isOpen.value = true }
 const close = () => { isOpen.value = false }
 
-provide('vantage:sidebar', { isOpen, open, close })
+provide('spark:sidebar', { isOpen, open, close })
 
 const userInitial = computed(() =>
   props.user?.name?.charAt(0).toUpperCase() ?? props.user?.email?.charAt(0).toUpperCase() ?? 'U'

package/components/Admin/Header.vue

@@ -3,7 +3,7 @@ defineProps<{
   title?: string
 }>()
 
-const sidebar = inject('vantage:sidebar', null) as any
+const sidebar = inject('spark:sidebar', null) as any
 </script>
 
 <template>

package/components/Layout/SidebarWithAppColumn.vue

@@ -0,0 +1,388 @@
+<script setup lang="ts">
+import * as TablerIcons from '@tabler/icons-vue'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface NavItem {
+  label:    string
+  icon:     string
+  route:    string
+  pattern?: string
+}
+
+interface AppItem {
+  label:  string
+  icon:   string
+  route:  string
+  bg?:    string
+  text?:  string
+  nav?:   NavItem[]
+}
+
+interface MenuItem {
+  label:     string
+  icon:      string
+  route?:    string
+  pattern?:  string
+  children?: NavItem[]
+}
+
+// ─── Props / Emits ────────────────────────────────────────────────────────────
+
+const props = withDefaults(defineProps<{
+  appItems?:  AppItem[]
+  menuItems?: MenuItem[]
+  homeRoute?: string
+  user?:      { name?: string; email?: string } | null
+  floating?:  boolean
+}>(), {
+  appItems:  () => [],
+  menuItems: () => [],
+  homeRoute: '/',
+})
+
+const emit = defineEmits<{ logout: [] }>()
+
+// ─── Mobile sidebar ───────────────────────────────────────────────────────────
+
+const isOpen = ref(false)
+const open  = () => { isOpen.value = true }
+const close = () => { isOpen.value = false }
+provide('spark:sidebar', { isOpen, open, close })
+
+// ─── Route matching ───────────────────────────────────────────────────────────
+
+const route = useRoute()
+
+const matchPattern = (pattern?: string) => {
+  if (!pattern) return false
+  return new RegExp('^' + pattern.replace(/\*/g, '.*') + '$').test(route.path)
+}
+
+const isChildActive = (children?: NavItem[]) =>
+  children?.some(c => matchPattern(c.pattern ?? c.route + '/*')) ?? false
+
+// ─── Active app detection ─────────────────────────────────────────────────────
+
+const currentApp = computed(() =>
+  props.appItems.find(a => route.path.startsWith(a.route)) ?? null
+)
+const isInApp = computed(() => !!currentApp.value)
+
+// ─── Hover preview ────────────────────────────────────────────────────────────
+
+const hoveredApp = ref<AppItem | 'home' | null>(null)
+
+const previewApp = computed(() =>
+  hoveredApp.value && hoveredApp.value !== 'home'
+    ? hoveredApp.value as AppItem
+    : currentApp.value
+)
+
+const showMainMenu = computed(() =>
+  hoveredApp.value === 'home' || (!hoveredApp.value && !isInApp.value)
+)
+
+watch(isInApp, (val) => { if (!val) hoveredApp.value = null })
+
+// ─── Main menu accordion ──────────────────────────────────────────────────────
+
+const openAccordions = ref<Record<number, boolean>>({})
+const toggleAccordion = (i: number) => { openAccordions.value[i] = !openAccordions.value[i] }
+
+watch(() => route.path, () => {
+  let active = -1
+  props.menuItems.forEach((item, i) => {
+    if (item.children && (matchPattern(item.pattern) || isChildActive(item.children))) active = i
+  })
+  openAccordions.value = active !== -1 ? { [active]: true } : {}
+}, { immediate: true })
+
+// ─── User / env ───────────────────────────────────────────────────────────────
+
+const userInitial = computed(() =>
+  props.user?.name?.charAt(0).toUpperCase() ??
+  props.user?.email?.charAt(0).toUpperCase() ?? 'U'
+)
+
+const config   = useRuntimeConfig()
+const appEnv   = config.public.appEnv as string | undefined
+const envLabel = computed(() => (!appEnv || appEnv === 'production') ? null : appEnv)
+
+// ─── Icon resolver ────────────────────────────────────────────────────────────
+
+const icon = (name: string) => (TablerIcons as Record<string, unknown>)[name]
+</script>
+
+<template>
+  <div class="bg-background-1 min-h-screen">
+
+    <!-- Mobile backdrop -->
+    <Transition
+      enter-from-class="opacity-0" enter-active-class="transition-opacity duration-300"
+      leave-to-class="opacity-0"   leave-active-class="transition-opacity duration-300"
+    >
+      <div
+        v-if="isOpen"
+        class="lg:hidden fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+        @click="close"
+      />
+    </Transition>
+
+    <!-- ═══ SIDEBAR ════════════════════════════════════════════════════════════ -->
+    <aside
+      :class="[
+        'fixed inset-y-0 start-0 z-60 w-65',
+        'transition-transform duration-300 lg:translate-x-0',
+        isOpen ? 'translate-x-0' : 'max-lg:-translate-x-full',
+        floating ? 'p-3' : '',
+      ]"
+    >
+      <div
+        :class="[
+          'flex flex-col h-full bg-sidebar',
+          floating
+            ? 'rounded-2xl border border-sidebar-line shadow-sm overflow-hidden'
+            : 'border-e border-sidebar-line',
+        ]"
+      >
+
+        <!-- Logo ─────────────────────────────────────────────────────────────── -->
+        <header class="px-4 pt-4 pb-3 border-b border-sidebar-line shrink-0 flex items-center gap-x-2">
+          <div class="flex-1 min-w-0">
+            <slot name="logo" />
+          </div>
+          <!-- Mobile close -->
+          <button
+            type="button"
+            class="lg:hidden size-7 inline-flex justify-center items-center rounded-lg text-muted-foreground hover:bg-muted-hover transition-colors"
+            @click="close"
+          >
+            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </header>
+
+        <!-- Search (optional) ───────────────────────────────────────────────── -->
+        <div v-if="$slots.search" class="px-3 pb-2 border-b border-sidebar-line shrink-0">
+          <slot name="search" />
+        </div>
+
+        <!-- Body: icon strip + right panel ──────────────────────────────────── -->
+        <div class="flex flex-1 min-h-0" @mouseleave="hoveredApp = null">
+
+          <!-- ── Icon strip (50 px) ──────────────────────────────────────────── -->
+          <div class="w-[50px] shrink-0 flex flex-col relative">
+
+            <!-- Separator line (behind strip items via z-0) -->
+            <span class="pointer-events-none absolute right-0 inset-y-0 w-px bg-sidebar-line z-0" />
+
+            <div class="flex-1 flex flex-col py-2 gap-1.5 overflow-y-auto relative z-10">
+
+              <!-- Home button -->
+              <NuxtLink
+                :to="homeRoute"
+                class="group relative flex items-center justify-center h-12 border border-r-0"
+                :class="!isInApp
+                  ? 'ml-[2px] bg-card border-sidebar-line rounded-l-lg'
+                  : 'ml-[1px] w-12 border-transparent rounded-lg'"
+                @mouseenter="hoveredApp = 'home'"
+              >
+                <span
+                  class="size-10 flex items-center justify-center rounded-lg shrink-0 transition-opacity duration-150 bg-surface text-muted-foreground"
+                  :class="!isInApp ? 'opacity-100' : 'opacity-50 group-hover:opacity-100'"
+                >
+                  <component :is="icon('IconHome')" class="size-[22px]" />
+                </span>
+              </NuxtLink>
+
+              <!-- App items -->
+              <NuxtLink
+                v-for="app in appItems"
+                :key="app.route"
+                :to="app.route"
+                class="group relative flex items-center justify-center h-12 border border-r-0"
+                :class="route.path.startsWith(app.route)
+                  ? 'ml-[2px] bg-card border-sidebar-line rounded-l-lg'
+                  : 'ml-[1px] w-12 border-transparent rounded-lg'"
+                @mouseenter="hoveredApp = app"
+              >
+                <span
+                  class="size-10 flex items-center justify-center rounded-lg shrink-0 transition-opacity duration-150"
+                  :class="[
+                    app.bg ?? 'bg-surface',
+                    app.text ?? 'text-muted-foreground',
+                    route.path.startsWith(app.route) ? 'opacity-100' : 'opacity-50 group-hover:opacity-100',
+                  ]"
+                >
+                  <component :is="icon(app.icon)" class="size-[22px]" />
+                </span>
+              </NuxtLink>
+
+            </div>
+          </div>
+          <!-- /icon strip -->
+
+          <!-- ── Right panel ─────────────────────────────────────────────────── -->
+          <div class="flex-1 relative overflow-hidden bg-card">
+
+            <!-- MAIN MENU -->
+            <Transition name="panel-swap">
+              <div v-if="showMainMenu" key="main" class="absolute inset-0 overflow-y-auto">
+                <ul class="flex flex-col gap-y-1 px-3 pt-2 pb-3">
+                  <li v-for="(item, index) in menuItems" :key="'menu-' + index">
+
+                    <!-- Simple link -->
+                    <NuxtLink
+                      v-if="!item.children && item.route"
+                      :to="item.route"
+                      class="flex items-center gap-x-3 py-2 px-3 text-sm text-muted-foreground rounded-lg hover:bg-muted-hover transition-all border border-transparent"
+                      :class="{ 'bg-surface text-foreground font-semibold border-card-line': matchPattern(item.pattern ?? item.route) }"
+                    >
+                      <component :is="icon(item.icon)" class="shrink-0 size-4" />
+                      {{ item.label }}
+                    </NuxtLink>
+
+                    <!-- Accordion group -->
+                    <div v-else-if="item.children" class="flex flex-col">
+                      <button
+                        type="button"
+                        class="w-full text-start flex items-center gap-x-3 py-2 px-3 text-sm text-muted-foreground rounded-lg hover:bg-muted-hover transition-all"
+                        :class="{ 'bg-muted text-foreground font-semibold': openAccordions[index] }"
+                        @click="toggleAccordion(index)"
+                      >
+                        <component :is="icon(item.icon)" class="shrink-0 size-4" />
+                        <span class="flex-1">{{ item.label }}</span>
+                        <component
+                          :is="icon('IconChevronDown')"
+                          class="shrink-0 size-4 transition-transform duration-300"
+                          :class="{ '-rotate-180': openAccordions[index] }"
+                        />
+                      </button>
+                      <div
+                        class="overflow-hidden transition-all duration-300 ease-in-out"
+                        :style="{
+                          maxHeight: openAccordions[index] ? '300px' : '0px',
+                          opacity:   openAccordions[index] ? '1'    : '0',
+                          marginTop: openAccordions[index] ? '4px'  : '0px',
+                        }"
+                      >
+                        <ul class="ps-8 flex flex-col gap-y-1 relative before:absolute before:start-4.5 before:w-px before:h-full before:bg-sidebar-line">
+                          <li v-for="child in item.children" :key="child.route">
+                            <NuxtLink
+                              :to="child.route"
+                              class="flex items-center gap-x-4 py-2 px-3 text-sm text-muted-foreground rounded-lg hover:bg-muted-hover transition-colors border border-transparent"
+                              :class="{ 'bg-surface text-foreground font-semibold': matchPattern(child.pattern ?? child.route) }"
+                            >
+                              <component :is="icon(child.icon)" class="shrink-0 size-4" />
+                              {{ child.label }}
+                            </NuxtLink>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+
+                  </li>
+                </ul>
+              </div>
+            </Transition>
+
+            <!-- APP SUBNAV -->
+            <Transition name="panel-swap">
+              <div v-if="!showMainMenu" :key="previewApp?.route ?? 'app'" class="absolute inset-0 flex flex-col">
+                <div class="px-3 pt-3 pb-3 border-b border-sidebar-line shrink-0">
+                  <span class="text-[13px] font-bold text-muted-foreground uppercase tracking-wider truncate">
+                    {{ previewApp?.label }}
+                  </span>
+                </div>
+                <nav class="flex-1 overflow-y-auto py-2 px-2">
+                  <ul class="flex flex-col gap-0.5">
+                    <li v-for="item in (previewApp?.nav ?? [])" :key="item.route">
+                      <NuxtLink
+                        :to="item.route"
+                        class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-muted-hover transition-colors border border-transparent"
+                        :class="{ 'bg-surface text-foreground font-semibold border-card-line': matchPattern(item.pattern ?? item.route + '*') }"
+                      >
+                        <component :is="icon(item.icon)" class="size-4 shrink-0" />
+                        {{ item.label }}
+                      </NuxtLink>
+                    </li>
+                  </ul>
+                </nav>
+              </div>
+            </Transition>
+
+          </div>
+          <!-- /right panel -->
+
+        </div>
+        <!-- /body -->
+
+        <!-- Footer ───────────────────────────────────────────────────────────── -->
+        <div class="shrink-0 border-t border-sidebar-line">
+
+          <!-- Controls slot (dark mode, notifications, etc.) -->
+          <div v-if="$slots['user-controls']" class="flex items-center gap-x-1.5 px-3 pt-3">
+            <slot name="user-controls" />
+          </div>
+
+          <!-- User info + logout -->
+          <div v-if="user" class="flex items-center gap-x-3 px-3 py-3">
+            <div class="size-9 rounded-lg bg-primary flex items-center justify-center text-primary-foreground text-sm font-bold shrink-0 select-none">
+              {{ userInitial }}
+            </div>
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-semibold text-foreground truncate">{{ user.name ?? user.email }}</p>
+              <p v-if="user.name && user.email" class="text-xs text-muted-foreground truncate">{{ user.email }}</p>
+            </div>
+            <button
+              type="button"
+              class="size-7 inline-flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors shrink-0"
+              title="Cerrar sesión"
+              @click="emit('logout')"
+            >
+              <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M18 9l3 3m0 0l-3 3m3-3H9" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Extra footer slot -->
+          <slot name="user-footer" />
+
+          <!-- Env banner -->
+          <div
+            v-if="envLabel"
+            class="flex items-center justify-center gap-x-2 py-2 bg-amber-400/15 border-t border-amber-400/30"
+          >
+            <span class="size-1.5 rounded-full bg-amber-400 shrink-0" />
+            <span class="text-[11px] font-semibold text-amber-600 dark:text-amber-400 uppercase tracking-wide">
+              {{ envLabel }}
+            </span>
+          </div>
+
+        </div>
+        <!-- /footer -->
+
+      </div>
+    </aside>
+
+    <!-- ═══ MAIN CONTENT ══════════════════════════════════════════════════════ -->
+    <div class="lg:ps-65 flex flex-col min-h-screen">
+      <slot name="topbar" />
+      <div class="flex-1 min-h-0">
+        <slot />
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+/* Panel swap animation */
+.panel-swap-enter-active,
+.panel-swap-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
+.panel-swap-enter-from   { opacity: 0; transform: translateX(10px);  }
+.panel-swap-leave-to     { opacity: 0; transform: translateX(-10px); }
+</style>

package/components/Layout/TopBar.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+// ─── Props / Emits ────────────────────────────────────────────────────────────
+
+const props = withDefaults(defineProps<{
+  user?:                { name?: string; email?: string; role?: string } | null
+  notificationsCount?:  number
+  searchPlaceholder?:   string
+  showSearch?:          boolean
+  showNotifications?:   boolean
+  showUser?:            boolean
+}>(), {
+  user:                 null,
+  notificationsCount:   0,
+  searchPlaceholder:    'Buscar…',
+  showSearch:           true,
+  showNotifications:    true,
+  showUser:             true,
+})
+
+const emit = defineEmits<{
+  search:              [query: string]
+  'notification-click': []
+  logout:              []
+}>()
+
+// ─── Search ───────────────────────────────────────────────────────────────────
+
+const searchQuery = ref('')
+
+const handleSearch = () => emit('search', searchQuery.value)
+
+// ⌘K / Ctrl+K → focus search
+const searchRef = ref<HTMLInputElement | null>(null)
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault()
+      searchRef.value?.focus()
+    }
+  })
+})
+
+// ─── User initials ────────────────────────────────────────────────────────────
+
+const userInitials = computed(() => {
+  const name = props.user?.name ?? props.user?.email ?? ''
+  return name.split(' ').slice(0, 2).map(p => p[0]).join('').toUpperCase() || 'U'
+})
+</script>
+
+<template>
+  <header class="sticky top-0 z-40 h-14 bg-card/95 backdrop-blur-sm border-b border-card-line flex items-center gap-4 px-6">
+
+    <!-- Left slot (breadcrumb, page title, etc.) -->
+    <div v-if="$slots.left" class="flex items-center gap-3 min-w-0 mr-auto">
+      <slot name="left" />
+    </div>
+    <div v-else class="mr-auto" />
+
+    <!-- Global search -->
+    <div v-if="showSearch" class="relative hidden sm:block w-72">
+      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+        <svg class="size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+        </svg>
+      </div>
+      <input
+        ref="searchRef"
+        v-model="searchQuery"
+        type="search"
+        :placeholder="searchPlaceholder"
+        class="w-full h-9 pl-9 pr-12 text-sm bg-surface border border-card-line rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition"
+        @keydown.enter="handleSearch"
+      />
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <kbd class="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-mono font-semibold text-muted-foreground bg-muted border border-card-line rounded">
+          <span class="text-[9px]">⌘</span>K
+        </kbd>
+      </div>
+    </div>
+
+    <!-- Right slot -->
+    <slot name="right" />
+
+    <!-- Notifications -->
+    <button
+      v-if="showNotifications"
+      type="button"
+      class="relative size-9 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+      @click="emit('notification-click')"
+    >
+      <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+      </svg>
+      <span
+        v-if="notificationsCount > 0"
+        class="absolute top-1.5 right-1.5 min-w-[16px] h-4 px-1 flex items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white leading-none"
+      >{{ notificationsCount > 99 ? '99+' : notificationsCount }}</span>
+    </button>
+
+    <!-- User -->
+    <div v-if="showUser && user" class="flex items-center gap-2.5 pl-2 border-l border-card-line">
+      <div class="size-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold shrink-0 select-none">
+        {{ userInitials }}
+      </div>
+      <div class="hidden md:block min-w-0">
+        <p class="text-sm font-semibold text-foreground truncate leading-tight">{{ user.name ?? user.email }}</p>
+        <p v-if="user.role" class="text-xs text-muted-foreground truncate leading-tight">{{ user.role }}</p>
+      </div>
+    </div>
+
+  </header>
+</template>

package/components/Modal/Base.vue

@@ -0,0 +1,29 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title:      { type: String,  default: '' },
+  size:       { type: String,  default: 'md' },
+  loading:    { type: Boolean, default: false },
+  closable:   { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue', 'close'])
+</script>
+
+<template>
+  <Modal
+    :model-value="modelValue"
+    :title="title"
+    :size="size"
+    :closable="closable && !loading"
+    :backdrop-dismiss="closable && !loading"
+    :show-footer="!!$slots.footer"
+    @update:model-value="emit('update:modelValue', $event)"
+    @close="emit('close')"
+  >
+    <slot />
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </Modal>
+</template>

package/components/Table/Enterprise.vue

@@ -0,0 +1,540 @@
+<script setup>
+import { IconSearch, IconAdjustmentsHorizontal, IconLayoutColumns, IconGripVertical, IconDownload, IconBookmark, IconChevronDown, IconX } from '@tabler/icons-vue'
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+const props = defineProps({
+  // DataTable wiring
+  table:             { type: Object,  default: null },
+  endpoint:          { type: String,  default: '' },
+  endpointParams:    { type: Object,  default: () => ({}) },
+  columns:           { type: Array,   required: true },
+  name:              { type: String,  default: '' },
+  params:            { type: Object,  default: () => ({}) },
+  cached:            { type: Boolean, default: true },
+  showReloadButton:  { type: Boolean, default: true },
+  clickRowToOpen:    { type: Boolean, default: false },
+  // Toolbar
+  searchPlaceholder: { type: String,  default: 'Buscar...' },
+  showSearch:        { type: Boolean, default: true },
+  showFilters:       { type: Boolean, default: true },
+  showColumns:       { type: Boolean, default: true },
+  showExport:        { type: Boolean, default: true },
+  showSaveView:      { type: Boolean, default: false },
+  // Checkboxes
+  checkable:         { type: Boolean, default: true },
+  // Preview panel tabs: [{ key: 'resumen', label: 'Resumen' }, ...]
+  previewTabs:       { type: Array,   default: () => [] },
+  // Split ratio
+  splitRatio:        { type: Number,  default: 55 },
+  // Filters as chips in the filter bar: [{ key, label, options: [{value,label}] }]
+  filterChips:       { type: Array,   default: () => [] },
+})
+
+const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
+const resolvedName     = computed(() => props.table?.name     ?? props.name)
+
+// ─── Emits / Slots ────────────────────────────────────────────────────────────
+
+const emit = defineEmits(['row-click', 'loaded', 'save-view'])
+const slots = useSlots()
+
+const excludedSlots = new Set(['toolbar', 'action', 'filter-bar', 'preview', 'preview-header'])
+const forwardedSlots = computed(() =>
+  Object.fromEntries(Object.entries(slots).filter(([k]) => !excludedSlots.has(k)))
+)
+
+// ─── Search & filters ─────────────────────────────────────────────────────────
+
+const search        = ref('')
+const activeFilters = ref({})
+
+// Filter chips state: { [key]: selectedValue }
+const chipValues = reactive(
+  Object.fromEntries((props.filterChips ?? []).map(f => [f.key, '']))
+)
+const openChip = ref(null)
+
+const clearChips = () => {
+  for (const key of Object.keys(chipValues)) chipValues[key] = ''
+}
+const hasActiveChips = computed(() =>
+  Object.values(chipValues).some(v => v !== '' && v !== null && v !== undefined)
+)
+
+// Advanced filter panel
+const showFilterPanel = ref(false)
+const filterPanelRef  = ref(null)
+
+const filtersConfig = computed(() =>
+  props.columns.filter(c => c.filterType)
+)
+const activeFilterCount = computed(() =>
+  Object.values(activeFilters.value).filter(v => v !== null && v !== undefined && v !== '').length
+)
+
+const mergedParams = computed(() => ({
+  ...props.params,
+  ...props.endpointParams,
+  ...activeFilters.value,
+  ...Object.fromEntries(Object.entries(chipValues).filter(([, v]) => v !== '')),
+}))
+
+// ─── Preview panel ────────────────────────────────────────────────────────────
+
+const previewRow      = ref(null)
+const currentRatio    = ref(props.splitRatio)
+const containerRef    = ref(null)
+const previewEnabled  = ref(false)
+const paginationHeight = ref(0)
+const previewFromCache = ref(false)
+
+const previewCacheKey = computed(() => `table-enterprise-preview-${resolvedName.value}`)
+
+// Active preview tab
+const firstTabKey = computed(() =>
+  props.previewTabs?.length ? props.previewTabs[0].key : 'datos'
+)
+const previewTab = ref(firstTabKey.value)
+watch(previewRow, () => { previewTab.value = firstTabKey.value })
+
+const closePreview = () => { previewRow.value = null }
+
+const tableRef  = ref(null)
+const tableMeta = ref(null)
+
+const handleRowClick = (row) => {
+  if (previewEnabled.value) {
+    previewRow.value = previewRow.value?.id === row.id ? null : row
+  } else {
+    emit('row-click', row)
+  }
+}
+
+const handleLoaded = (res) => {
+  emit('loaded', res)
+  if (res?.meta) tableMeta.value = res.meta
+  if (previewRow.value && Array.isArray(res?.data)) {
+    const fresh = res.data.find(r => r.id === previewRow.value.id)
+    if (fresh) previewRow.value = fresh
+    else closePreview()
+  }
+}
+
+// Persist preview in session cache
+watch(previewRow, (row) => {
+  if (!props.cached) return
+  if (row) sessionStorage.setItem(previewCacheKey.value, JSON.stringify(row))
+  else sessionStorage.removeItem(previewCacheKey.value)
+})
+
+// Track pagination height
+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' })
+
+// Resize handle
+const startResize = (e) => {
+  e.preventDefault()
+  const onMove = (ev) => {
+    if (!containerRef.value) return
+    const rect = containerRef.value.getBoundingClientRect()
+    const ratio = ((ev.clientX - rect.left) / rect.width) * 100
+    currentRatio.value = Math.min(80, Math.max(25, ratio))
+  }
+  const onUp = () => {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}
+
+// ─── Column panel ─────────────────────────────────────────────────────────────
+
+const showColumnPanel  = ref(false)
+const columnPanelRef   = ref(null)
+const columnButtonRef  = ref(null)
+const columnPanelStyle = ref({})
+
+const orderedColumns = computed(() => {
+  if (!tableRef.value) return props.columns.filter(c => c.label)
+  const ids = tableRef.value.table.getAllLeafColumns().map(c => c.id).filter(id => id !== 'select')
+  return ids.map(id => props.columns.find(c => c.key === id)).filter(c => c?.label)
+})
+
+let draggedKey = null
+const dragOverKey = ref(null)
+const onDragStart = (key) => { draggedKey = key }
+const onDragOver  = (e, key) => { e.preventDefault(); dragOverKey.value = key }
+const onDragLeave = () => { dragOverKey.value = null }
+const onDrop = (key) => {
+  if (!draggedKey || draggedKey === key) return
+  const ids = tableRef.value?.table.getAllLeafColumns().map(c => c.id) ?? []
+  const from = ids.indexOf(draggedKey)
+  const to   = ids.indexOf(key)
+  if (from < 0 || to < 0) return
+  ids.splice(from, 1); ids.splice(to, 0, draggedKey)
+  const selIdx = ids.indexOf('select')
+  if (selIdx > 0) { ids.splice(selIdx, 1); ids.unshift('select') }
+  tableRef.value?.setColumnOrder(ids)
+  draggedKey = null; dragOverKey.value = null
+}
+
+// ─── Outside-click helpers ────────────────────────────────────────────────────
+
+const onColumnOutsideClick = (e) => {
+  if (
+    columnPanelRef.value && !columnPanelRef.value.contains(e.target) &&
+    columnButtonRef.value && !columnButtonRef.value.contains(e.target)
+  ) showColumnPanel.value = false
+}
+const onFilterOutsideClick = (e) => {
+  if (filterPanelRef.value && !filterPanelRef.value.contains(e.target)) showFilterPanel.value = false
+}
+
+watch(showColumnPanel, async (v) => {
+  if (v) {
+    await nextTick()
+    const rect = columnButtonRef.value?.getBoundingClientRect()
+    if (rect) columnPanelStyle.value = { top: rect.bottom + 6 + 'px', right: window.innerWidth - rect.right + 'px' }
+    document.addEventListener('mousedown', onColumnOutsideClick)
+  } else {
+    document.removeEventListener('mousedown', onColumnOutsideClick)
+  }
+})
+watch(showFilterPanel, (v) => {
+  if (v) document.addEventListener('mousedown', onFilterOutsideClick)
+  else document.removeEventListener('mousedown', onFilterOutsideClick)
+})
+
+// ─── Lifecycle ────────────────────────────────────────────────────────────────
+
+const onEsc = (e) => { if (e.key === 'Escape' && previewRow.value) closePreview() }
+onMounted(async () => {
+  previewEnabled.value = !!(slots.preview)
+  window.addEventListener('keydown', onEsc)
+  if (props.cached && previewEnabled.value) {
+    try {
+      const raw = sessionStorage.getItem(previewCacheKey.value)
+      if (raw) {
+        previewFromCache.value = true
+        previewRow.value = JSON.parse(raw)
+        await nextTick()
+        previewFromCache.value = false
+      }
+    } catch {}
+  }
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onEsc)
+  paginationObserver?.disconnect()
+})
+
+// ─── Expose ───────────────────────────────────────────────────────────────────
+
+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, closePreview })
+</script>
+
+<template>
+  <div class="relative" ref="containerRef">
+    <div class="bg-card border border-card-line rounded-2xl shadow-sm overflow-hidden">
+
+      <!-- ── Toolbar ──────────────────────────────────────────────────────── -->
+      <div class="flex flex-wrap items-center gap-2 px-4 py-3 border-b border-card-line">
+
+        <!-- Search -->
+        <div v-if="showSearch" class="flex-1 min-w-48">
+          <Forms.Input v-model="search" type="search" :placeholder="searchPlaceholder" :icon-left="IconSearch" size="sm" />
+        </div>
+
+        <!-- Advanced filters button -->
+        <button
+          v-if="showFilters && filtersConfig.length > 0"
+          type="button"
+          @click="showFilterPanel = !showFilterPanel"
+          :class="[
+            'py-1.5 px-3 inline-flex items-center gap-1.5 text-sm font-medium rounded-lg border transition-colors',
+            showFilterPanel || activeFilterCount > 0
+              ? 'border-primary/50 bg-primary/5 text-primary dark:bg-primary/10'
+              : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover',
+          ]"
+        >
+          <IconAdjustmentsHorizontal class="size-4" stroke="1.5" />
+          Filtros
+          <span v-if="activeFilterCount > 0" class="text-xs font-bold">({{ activeFilterCount }})</span>
+          <IconChevronDown class="size-3.5" stroke="2" />
+        </button>
+
+        <!-- Toolbar slot (custom filter dropdowns, etc.) -->
+        <slot name="toolbar" />
+
+        <!-- Spacer -->
+        <div class="flex-1" />
+
+        <!-- Save view -->
+        <button
+          v-if="showSaveView"
+          type="button"
+          class="py-1.5 px-3 inline-flex items-center gap-1.5 text-sm font-medium rounded-lg border border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover transition-colors"
+          @click="emit('save-view')"
+        >
+          <IconBookmark class="size-4" stroke="1.5" />
+          Guardar vista
+        </button>
+
+        <!-- Columns -->
+        <button
+          v-if="showColumns"
+          ref="columnButtonRef"
+          type="button"
+          @click="showColumnPanel = !showColumnPanel"
+          :class="[
+            'py-1.5 px-3 inline-flex items-center gap-1.5 text-sm font-medium rounded-lg border transition-colors',
+            showColumnPanel
+              ? 'border-primary/50 bg-primary/5 text-primary dark:bg-primary/10'
+              : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover',
+          ]"
+        >
+          <IconLayoutColumns class="size-4" stroke="1.5" />
+          Columnas
+        </button>
+
+        <!-- Export -->
+        <TableExportable v-if="showExport" :table-ref="tableRef" :name="resolvedName" :columns="columns" />
+
+        <!-- Primary action slot -->
+        <slot name="action" />
+      </div>
+
+      <!-- ── Filter bar (chips) ───────────────────────────────────────────── -->
+      <div
+        v-if="filterChips.length > 0 || $slots['filter-bar']"
+        class="flex flex-wrap items-center gap-2 px-4 py-2.5 border-b border-card-line bg-surface/40"
+      >
+        <!-- Built-in chips from filterChips prop -->
+        <template v-if="filterChips.length > 0">
+          <div
+            v-for="chip in filterChips"
+            :key="chip.key"
+            class="relative"
+          >
+            <button
+              type="button"
+              @click="openChip = openChip === chip.key ? null : chip.key"
+              :class="[
+                'inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-sm border transition-colors',
+                chipValues[chip.key]
+                  ? 'border-primary/50 bg-primary/5 text-primary font-medium dark:bg-primary/10'
+                  : 'border-card-line bg-card text-muted-foreground hover:bg-muted-hover',
+              ]"
+            >
+              <span class="text-muted-foreground">{{ chip.label }}:</span>
+              <span class="font-medium">
+                {{ chip.options?.find(o => o.value === chipValues[chip.key])?.label ?? 'Todos' }}
+              </span>
+              <IconChevronDown class="size-3" stroke="2" />
+            </button>
+
+            <!-- Chip dropdown -->
+            <Transition
+              enter-active-class="transition ease-out duration-100"
+              enter-from-class="opacity-0 scale-95"
+              enter-to-class="opacity-100 scale-100"
+              leave-active-class="transition ease-in duration-75"
+              leave-from-class="opacity-100 scale-100"
+              leave-to-class="opacity-0 scale-95"
+            >
+              <div
+                v-if="openChip === chip.key"
+                v-click-outside="() => openChip = null"
+                class="absolute top-full left-0 z-50 mt-1 bg-dropdown border border-dropdown-line rounded-xl shadow-xl py-1 min-w-40"
+              >
+                <button
+                  type="button"
+                  class="w-full text-left px-3 py-1.5 text-sm hover:bg-muted-hover transition-colors"
+                  :class="chipValues[chip.key] === '' ? 'font-semibold text-foreground' : 'text-muted-foreground'"
+                  @click="chipValues[chip.key] = ''; openChip = null"
+                >Todos</button>
+                <button
+                  v-for="opt in chip.options"
+                  :key="opt.value"
+                  type="button"
+                  class="w-full text-left px-3 py-1.5 text-sm hover:bg-muted-hover transition-colors"
+                  :class="chipValues[chip.key] === opt.value ? 'font-semibold text-foreground' : 'text-muted-foreground'"
+                  @click="chipValues[chip.key] = opt.value; openChip = null"
+                >{{ opt.label }}</button>
+              </div>
+            </Transition>
+          </div>
+
+          <button
+            v-if="hasActiveChips"
+            type="button"
+            class="inline-flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+            @click="clearChips"
+          >
+            <IconX class="size-3" stroke="2" />
+            Limpiar filtros
+          </button>
+        </template>
+
+        <!-- Custom filter bar slot -->
+        <slot name="filter-bar" />
+      </div>
+
+      <!-- Advanced filter panel -->
+      <Transition
+        enter-active-class="transition ease-out duration-150"
+        enter-from-class="opacity-0 translate-y-1 scale-95"
+        enter-to-class="opacity-100 translate-y-0 scale-100"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100 translate-y-0 scale-100"
+        leave-to-class="opacity-0 translate-y-1 scale-95"
+      >
+        <div
+          v-if="showFilterPanel"
+          ref="filterPanelRef"
+          class="absolute top-14 left-4 z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 min-w-64 max-h-96 overflow-y-auto"
+        >
+          <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-3 px-1">Filtros avanzados</p>
+          <TableFilter v-model="activeFilters" :columns="filtersConfig" />
+        </div>
+      </Transition>
+
+      <!-- ── Table + Preview ──────────────────────────────────────────────── -->
+      <div class="relative overflow-hidden">
+
+        <Table
+          ref="tableRef"
+          :endpoint="resolvedEndpoint"
+          :columns="columns"
+          :name="resolvedName"
+          :params="mergedParams"
+          :search="search"
+          :checkable="checkable"
+          :cached="cached"
+          :show-reload-button="showReloadButton"
+          :click-row-to-open="clickRowToOpen"
+          :preview-row-id="previewRow?.id ?? null"
+          :preview-mode="!!previewEnabled"
+          @row-click="handleRowClick"
+          @loaded="handleLoaded"
+          @page-change="closePreview"
+          @per-page-change="closePreview"
+        >
+          <template v-for="(_, sname) in forwardedSlots" #[sname]="slotProps">
+            <slot :name="sname" v-bind="slotProps ?? {}" />
+          </template>
+        </Table>
+
+        <!-- Preview overlay -->
+        <Transition
+          :enter-active-class="previewFromCache ? '' : 'transition ease-out duration-200'"
+          :enter-from-class="previewFromCache ? '' : 'opacity-0 translate-x-6'"
+          :enter-to-class="previewFromCache ? '' : 'opacity-100 translate-x-0'"
+          leave-active-class="transition ease-in duration-150"
+          leave-from-class="opacity-100 translate-x-0"
+          leave-to-class="opacity-0 translate-x-6"
+        >
+          <div
+            v-if="previewRow && previewEnabled"
+            class="absolute top-0 right-0 z-30 flex bg-card border-l border-card-line shadow-[-4px_0_16px_rgba(0,0,0,0.06)]"
+            :style="{ width: (100 - currentRatio) + '%', bottom: paginationHeight + 'px' }"
+          >
+            <!-- Resize handle -->
+            <div
+              class="w-1 shrink-0 cursor-col-resize bg-surface hover:bg-primary/40 transition-colors"
+              @mousedown="startResize"
+            />
+
+            <div class="flex flex-col flex-1 overflow-hidden">
+
+              <!-- Fixed header -->
+              <div v-if="$slots['preview-header']" class="shrink-0 border-b border-card-line">
+                <slot name="preview-header" :row="previewRow" :close="closePreview" />
+              </div>
+
+              <!-- Tabs (top) — only if previewTabs provided -->
+              <div
+                v-if="previewTabs && previewTabs.length > 1"
+                class="shrink-0 flex border-b border-card-line overflow-x-auto"
+              >
+                <button
+                  v-for="tab in previewTabs"
+                  :key="tab.key"
+                  type="button"
+                  @click="previewTab = tab.key"
+                  :class="[
+                    'px-4 py-2.5 text-xs font-semibold whitespace-nowrap transition-colors border-b-2 -mb-px',
+                    previewTab === tab.key
+                      ? 'border-primary text-primary'
+                      : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover',
+                  ]"
+                >{{ tab.label }}</button>
+              </div>
+
+              <!-- Scrollable preview content -->
+              <div class="flex-1 overflow-y-auto min-h-0">
+                <slot name="preview" :row="previewRow" :tab="previewTab" :close="closePreview" />
+              </div>
+
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+
+    <!-- Column panel (teleported) -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition ease-out duration-150"
+        enter-from-class="opacity-0 translate-y-1 scale-95"
+        enter-to-class="opacity-100 translate-y-0 scale-100"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100 translate-y-0 scale-100"
+        leave-to-class="opacity-0 translate-y-1 scale-95"
+      >
+        <div
+          v-if="showColumnPanel"
+          ref="columnPanelRef"
+          class="fixed z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
+          :style="columnPanelStyle"
+        >
+          <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-2 px-1">Columnas visibles</p>
+          <div
+            v-for="col in orderedColumns"
+            :key="col.key"
+            draggable="true"
+            @dragstart="onDragStart(col.key)"
+            @dragover="(e) => onDragOver(e, col.key)"
+            @dragleave="onDragLeave"
+            @drop="onDrop(col.key)"
+            class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none transition-colors"
+            :class="dragOverKey === col.key ? 'bg-primary/10 ring-1 ring-primary/30' : 'hover:bg-muted-hover cursor-grab'"
+          >
+            <IconGripVertical class="size-4 text-muted-foreground-2 shrink-0" />
+            <input
+              type="checkbox"
+              :checked="tableRef?.table.getColumn(col.key)?.getIsVisible() ?? true"
+              @change="tableRef?.table.getColumn(col.key)?.toggleVisibility()"
+              @click.stop
+              class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
+            />
+            <span class="text-sm text-foreground truncate">{{ col.label }}</span>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>

package/package.json

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