@innertia-solutions/nuxt-theme-spark 0.1.71 → 0.1.73

package/components/Admin/Base.vue

@@ -1,61 +1,73 @@
 <script setup lang="ts">
-const props = defineProps({
-  floating: { type: Boolean, default: false },
-})
+const isOpen = ref(false)
+const open = () => { isOpen.value = true }
+const close = () => { isOpen.value = false }
+
+provide('vantage:sidebar', { isOpen, open, close })
 </script>
 
 <template>
-  <aside
-    id="hs-pro-sidebar"
-    :class="[
-      'hs-overlay [--auto-close:lg]',
-      'hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform',
-      'w-65 hidden fixed z-60',
-      'lg:block lg:translate-x-0 lg:inset-e-auto',
-      floating
-        ? 'inset-y-3 start-3 rounded-2xl shadow-sm border border-sidebar-line bg-sidebar'
-        : 'inset-y-0 inset-s-0 h-full border-e border-sidebar-line bg-sidebar lg:bottom-0',
-    ]"
-    tabindex="-1"
-    aria-label="Sidebar"
-  >
-    <div class="relative flex flex-col h-full max-h-full pt-3">
-      <!-- Logo + close button (mobile) -->
-      <header class="h-11.5 ps-2 pe-2 lg:ps-5 flex items-center gap-x-1 shrink-0">
-        <slot name="logo" />
-        <div class="lg:hidden ms-auto">
-          <button
-            type="button"
-            class="w-6 h-7 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus"
-            data-hs-overlay="#hs-pro-sidebar"
-          >
-            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <polyline points="7 8 3 12 7 16" />
-              <line x1="21" x2="11" y1="12" y2="12" />
-              <line x1="21" x2="11" y1="6" y2="6" />
-              <line x1="21" x2="11" y1="18" y2="18" />
-            </svg>
-          </button>
+  <div class="bg-slate-50 dark:bg-slate-900 min-h-screen">
+
+    <!-- Backdrop mobile -->
+    <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
+      tabindex="-1"
+      aria-label="Sidebar"
+      :class="[
+        'fixed inset-y-0 start-0 z-60 w-65 h-full',
+        'bg-white dark:bg-slate-800 border-e border-slate-200 dark:border-slate-700',
+        'transition-transform duration-300',
+        'lg:translate-x-0',
+        isOpen ? 'translate-x-0' : 'max-lg:-translate-x-full',
+      ]"
+    >
+      <div class="flex flex-col h-full pt-3 lg:pt-6">
+
+        <!-- Logo + close mobile -->
+        <header class="h-11.5 ps-2 pe-2 lg:ps-5 flex items-center gap-x-1 shrink-0">
+          <slot name="logo" />
+          <div class="lg:hidden ms-auto">
+            <button type="button"
+              class="w-6 h-7 inline-flex justify-center items-center rounded-md border border-slate-200 bg-white text-slate-500 hover:bg-slate-50 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700"
+              @click="close">
+              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="7 8 3 12 7 16" />
+                <line x1="21" x2="11" y1="12" y2="12" />
+                <line x1="21" x2="11" y1="6"  y2="6"  />
+                <line x1="21" x2="11" y1="18" y2="18" />
+              </svg>
+            </button>
+          </div>
+        </header>
+
+        <!-- Menu scrollable -->
+        <div class="flex-1 min-h-0 mt-1.5 overflow-y-auto
+          [&::-webkit-scrollbar]:w-2
+          [&::-webkit-scrollbar-thumb]:rounded-full
+          [&::-webkit-scrollbar-track]:bg-slate-100
+          [&::-webkit-scrollbar-thumb]:bg-slate-300
+          dark:[&::-webkit-scrollbar-track]:bg-slate-700
+          dark:[&::-webkit-scrollbar-thumb]:bg-slate-500">
+          <slot name="menu" />
         </div>
-      </header>
 
-      <!-- Search slot -->
-      <div v-if="$slots.search" class="px-4 py-2 shrink-0">
-        <slot name="search" />
-      </div>
+        <!-- User footer -->
+        <div class="shrink-0 border-t border-slate-200 dark:border-slate-700 p-5">
+          <slot name="user-footer" />
+        </div>
 
-      <!-- Nav content - scrollable -->
-      <div class="flex-1 min-h-0 mt-1.5 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
-        <slot name="menu" />
       </div>
+    </aside>
 
-      <!-- User footer -->
-      <div v-if="$slots['user-footer']" class="shrink-0">
-        <slot name="user-footer" />
-      </div>
-    </div>
-  </aside>
+    <!-- Main content -->
+    <slot />
 
-  <!-- Main content -->
-  <slot />
+  </div>
 </template>

package/components/Admin/Header.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+
+const sidebar = inject('vantage:sidebar', null) as any
+</script>
+
+<template>
+  <header class="sticky top-0 z-40 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 lg:px-6 h-14 flex items-center gap-x-3">
+    <!-- Hamburger mobile -->
+    <button type="button"
+      class="lg:hidden size-8 flex items-center justify-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+      @click="sidebar?.open()">
+      <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+      </svg>
+    </button>
+
+    <!-- Left slot -->
+    <div class="flex-1 flex items-center gap-x-3">
+      <slot name="left">
+        <span v-if="title" class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ title }}</span>
+      </slot>
+    </div>
+
+    <!-- Right slot -->
+    <div class="flex items-center gap-x-2">
+      <slot name="right" />
+    </div>
+  </header>
+</template>

package/components/App/PageLoadingSpinner.vue

@@ -57,7 +57,7 @@ onBeforeUnmount(() => {
 <style scoped>
 .page-loading-spinner {
   position: fixed;
-  bottom: 0.625rem;
+  top: 0.625rem;
   right: 0.5rem;
   z-index: 2147483647;
   display: flex;

package/components/Layout/Admin.vue

@@ -1,8 +1,4 @@
 <script setup>
-const props = defineProps({
-  floating: { type: Boolean, default: false },
-})
-
 const showAnimation = ref(false)
 onMounted(() => {
   const seen = sessionStorage.getItem('auth-entered')
@@ -15,57 +11,12 @@ onMounted(() => {
 
 <template>
   <div :class="{ 'animate-entrance': showAnimation }">
-    <!-- Header - matches Preline exactly -->
-    <header class="lg:ms-65 fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 bg-navbar border-b border-navbar-line">
-      <div class="flex justify-between xl:grid xl:grid-cols-3 basis-full items-center w-full py-2.5 px-2 sm:px-5">
-
-        <!-- Left col: mobile toggle + desktop search -->
-        <div class="xl:col-span-1 flex items-center md:gap-x-3">
-          <!-- Mobile sidebar toggle -->
-          <div class="lg:hidden">
-            <button
-              type="button"
-              class="w-7 h-9.5 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus"
-              aria-haspopup="dialog"
-              aria-expanded="false"
-              aria-controls="hs-pro-sidebar"
-              aria-label="Toggle navigation"
-              data-hs-overlay="#hs-pro-sidebar"
-            >
-              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M17 8L21 12L17 16M3 12H13M3 6H13M3 18H13" />
-              </svg>
-            </button>
-          </div>
-
-          <!-- Desktop search -->
-          <div class="hidden lg:block min-w-80 xl:w-full">
-            <slot name="header-left" />
-          </div>
-        </div>
-
-        <!-- Right col: actions -->
-        <div class="xl:col-span-2 flex justify-end items-center gap-x-2">
-          <div class="flex items-center">
-            <!-- Mobile search icon -->
-            <div class="lg:hidden">
-              <slot name="header-search-mobile" />
-            </div>
-
-            <slot name="header-right" />
-          </div>
-        </div>
-
-      </div>
-    </header>
-
-    <!-- Sidebar + main content -->
-    <AdminBase :floating="floating">
+    <AdminBase>
       <template #logo><slot name="logo" /></template>
       <template #menu><slot name="menu" /></template>
       <template #user-footer><slot name="user-footer" /></template>
 
-      <div :class="floating ? 'lg:ps-70 pt-14' : 'lg:ps-65 pt-14'">
+      <div class="lg:ps-65">
         <slot />
       </div>
     </AdminBase>

package/components/Table/Standard.vue

@@ -51,8 +51,10 @@ const previewEnabled  = ref(false)
 const closePreview = () => { previewRow.value = null }
 
 const handleRowClick = (row) => {
+  console.log('[Standard] handleRowClick | previewEnabled:', previewEnabled.value, '| row:', row?.name ?? row?.id)
   if (previewEnabled.value) {
     previewRow.value = previewRow.value?.id === row.id ? null : row
+    console.log('[Standard] previewRow =', previewRow.value?.name ?? previewRow.value?.id)
   } else {
     emit('row-click', row)
   }
@@ -77,6 +79,7 @@ const startResize = (e) => {
 const onEsc = (e) => { if (e.key === 'Escape' && previewRow.value) closePreview() }
 onMounted(() => {
   previewEnabled.value = !!slots.preview
+  console.log('[Standard] mounted | previewEnabled:', previewEnabled.value, '| slot keys:', Object.keys(slots))
   window.addEventListener('keydown', onEsc)
 })
 onBeforeUnmount(() => window.removeEventListener('keydown', onEsc))

package/components/TableExportable.vue

@@ -7,33 +7,29 @@ import {
   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: () => [] },
+  columns: { type: Array, default: () => [] }, // [{ key, label }]
 })
 
 const isOpen = ref(false)
 const format = ref('xlsx')
 const filename = ref(props.name)
 const selectedColumns = ref([])
-const btnRef = ref(null)
-const panelRef = ref(null)
-const panelStyle = ref({})
 
-const exportableColumns = computed(() => props.columns.filter(c => c.label))
-
-watch(exportableColumns, (cols) => {
+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: IconFileTypeXls },
-  { value: 'csv',  label: 'CSV',   icon: IconFileTypeCsv },
-  { value: 'pdf',  label: 'PDF',   icon: IconFileTypePdf },
-  { value: 'json', label: 'JSON',  icon: IconCodeDots },
+  { 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) => {
@@ -43,181 +39,165 @@ const toggleColumn = (key) => {
 }
 
 const toggleAll = () => {
-  if (selectedColumns.value.length === exportableColumns.value.length)
+  if (selectedColumns.value.length === props.columns.length)
     selectedColumns.value = []
   else
-    selectedColumns.value = exportableColumns.value.map(c => c.key)
+    selectedColumns.value = props.columns.map(c => c.key)
 }
 
-const allSelected = computed(() => selectedColumns.value.length === exportableColumns.value.length)
-
-const open = () => {
-  if (!btnRef.value) return
-  const rect = btnRef.value.getBoundingClientRect()
-  panelStyle.value = {
-    position: 'fixed',
-    top: (rect.bottom + 6) + 'px',
-    right: (window.innerWidth - rect.right) + 'px',
-  }
-  isOpen.value = true
-}
-
-const toggle = () => isOpen.value ? isOpen.value = false : open()
-
-const onOutsideClick = (e) => {
-  if (
-    panelRef.value && !panelRef.value.contains(e.target) &&
-    btnRef.value && !btnRef.value.contains(e.target)
-  ) {
-    isOpen.value = false
-  }
-}
-
-watch(isOpen, (v) => {
-  if (v) document.addEventListener('mousedown', onOutsideClick)
-  else document.removeEventListener('mousedown', onOutsideClick)
-})
-
-const selectedRows = computed(() => {
-  if (!props.tableRef) return { meta: { all: false }, rows: [] }
-  return props.tableRef.getSelectedRows() ?? { meta: { all: false }, rows: [] }
-})
-
-const hasSelection = computed(() => selectedRows.value.rows.length > 0)
+const allSelected = computed(() => selectedColumns.value.length === props.columns.length)
+const indeterminate = computed(() => selectedColumns.value.length > 0 && !allSelected.value)
 
 const doExport = () => {
-  if (!props.tableRef) return
-  if (hasSelection.value) {
-    const ids = selectedRows.value.rows.map(r => r.id)
-    props.tableRef.exportTable(format.value, false, false, ids)
-  } else {
+  if (props.tableRef) {
     props.tableRef.exportTable(format.value, true, true)
   }
   isOpen.value = false
 }
 
+const open = () => { isOpen.value = true }
+
 defineExpose({ open })
 </script>
 
 <template>
-  <div class="relative">
+  <div>
     <button
-      ref="btnRef"
       type="button"
-      @click="toggle"
-      :class="[
-        'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
-        isOpen
-          ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
-          : 'border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
-      ]"
+      @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="size-4" stroke="1.5" />
+      <IconDownload class="shrink-0 size-4" stroke="1.5" />
       Exportar
     </button>
 
-    <!-- Dropdown panel — teleported to body to avoid overflow-hidden clipping -->
+    <!-- Modal -->
     <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"
+        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"
-          ref="panelRef"
-          :style="panelStyle"
-          class="z-50 w-72 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-2xl"
+          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
+          @click.self="isOpen = false"
         >
-          <div class="p-3 space-y-4">
-            <!-- Format -->
-            <div>
-              <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2">Formato</p>
-              <div class="grid grid-cols-4 gap-1.5">
+          <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
-                  v-for="f in formats"
-                  :key="f.value"
                   type="button"
-                  @click="format = f.value"
-                  :class="[
-                    'flex flex-col items-center gap-1 py-2 px-1 rounded-lg border text-xs font-medium transition-colors',
-                    format === f.value
-                      ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:border-blue-500 dark:text-blue-300'
-                      : 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
-                  ]"
+                  @click="isOpen = false"
+                  class="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
                 >
-                  <component :is="f.icon" class="size-4" stroke="1.5" />
-                  {{ f.label }}
+                  <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>
 
-            <!-- Filename -->
-            <div>
-              <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">Archivo</p>
-              <div class="flex items-center gap-1.5">
-                <Forms.Input v-model="filename" type="text" placeholder="nombre" class="flex-1" />
-                <span class="text-sm text-slate-400 shrink-0">.{{ format }}</span>
+              <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>
 
-            <!-- Columns -->
-            <div v-if="exportableColumns.length > 0">
-              <div class="flex items-center justify-between mb-1.5">
-                <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">Columnas</p>
-                <button type="button" @click="toggleAll" class="text-[10px] text-blue-600 dark:text-blue-400 hover:underline font-medium">
-                  {{ allSelected ? 'Quitar todas' : 'Todas' }}
+              <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>
-              </div>
-              <div class="grid grid-cols-2 gap-1 max-h-36 overflow-y-auto">
-                <label
-                  v-for="col in exportableColumns"
-                  :key="col.key"
-                  class="flex items-center gap-2 py-1 px-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+                <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"
                 >
-                  <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-blue-600"
-                  />
-                  <span class="text-xs text-slate-700 dark:text-slate-200 truncate">{{ col.label }}</span>
-                </label>
+                  <IconDownload class="size-4" stroke="1.5" />
+                  Exportar
+                </button>
               </div>
             </div>
-          </div>
-
-          <!-- Selection info -->
-          <div class="px-3 pb-2">
-            <p v-if="hasSelection" class="text-xs text-blue-600 dark:text-blue-400 font-medium">
-              Se exportarán {{ selectedRows.rows.length }} fila{{ selectedRows.rows.length !== 1 ? 's' : '' }} seleccionada{{ selectedRows.rows.length !== 1 ? 's' : '' }}
-            </p>
-            <p v-else class="text-xs text-slate-400 dark:text-slate-500">
-              Se exportarán todos los registros
-            </p>
-          </div>
-
-          <!-- Footer -->
-          <div class="flex gap-2 px-3 pb-3">
-            <button
-              type="button"
-              @click="isOpen = false"
-              class="flex-1 py-1.5 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="flex-1 py-1.5 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors inline-flex items-center justify-center gap-1.5"
-            >
-              <IconDownload class="size-4" stroke="1.5" />
-              Exportar
-            </button>
-          </div>
+          </Transition>
         </div>
       </Transition>
     </Teleport>

package/package.json

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

package/components/App/DevEnvironmentBar.vue

@@ -1,43 +0,0 @@
-<script setup>
-const props = defineProps({ sidebar: { type: Boolean, default: false } })
-
-const config = useRuntimeConfig()
-const appEnv = config.public.appEnv
-
-const isVisible = computed(() => appEnv && appEnv !== 'production')
-
-useHead({
-  htmlAttrs: { class: (!props.sidebar && isVisible.value) ? 'has-env-bar' : '' },
-  style: [{ children: (!props.sidebar && isVisible.value) ? ':root { --env-bar-height: 1.5rem; }' : ':root { --env-bar-height: 0px; }' }],
-})
-
-const envColor = computed(() => {
-  const env = appEnv.toLowerCase()
-  if (env === 'staging') return props.sidebar ? 'bg-amber-50 text-amber-600 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/30' : 'bg-amber-500 text-white'
-  if (env === 'local' || env === 'dev') return props.sidebar ? 'bg-blue-50 text-blue-600 border border-blue-200 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/30' : 'bg-blue-600 text-white'
-  return props.sidebar ? 'bg-red-50 text-red-600 border border-red-200 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/30' : 'bg-red-600 text-white'
-})
-</script>
-
-<template>
-  <!-- Sidebar inline variant -->
-  <div v-if="isVisible && sidebar"
-    :class="['w-full rounded-lg px-3 py-1.5 flex items-center justify-center gap-x-1.5 select-none', envColor]"
-  >
-    <span class="text-[9px] font-black tracking-widest uppercase">ENTORNO: {{ appEnv }}</span>
-  </div>
-
-  <!-- Full-width fixed bar -->
-  <div v-else-if="isVisible && !sidebar"
-    class="fixed bottom-0 left-0 right-0 z-[100] h-6 overflow-hidden select-none pointer-events-none"
-  >
-    <div
-      class="flex items-center justify-center w-full h-full text-[10px] font-bold tracking-widest uppercase opacity-90 shadow-lg border-t border-white/10"
-      :class="envColor"
-    >
-      <span class="mr-2">━━━━━</span>
-      ENTORNO: {{ appEnv }}
-      <span class="ml-2">━━━━━</span>
-    </div>
-  </div>
-</template>