@innertia-solutions/nuxt-theme-spark 0.1.29 → 0.1.31

package/components/Table/Standard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { IconSearch, IconAdjustmentsHorizontal } from '@tabler/icons-vue'
+import { IconSearch, IconAdjustmentsHorizontal, IconLayoutColumns } from '@tabler/icons-vue'
 
 // Standard admin table: search + filters + Table (TanStack) + export
 const props = defineProps({
@@ -85,6 +85,21 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
 
       <slot name="actions" />
 
+      <!-- Column visibility -->
+      <button
+        type="button"
+        @click="tableRef?.toggleColumnPanel()"
+        :class="[
+          'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
+          tableRef?.showColumnPanel
+            ? '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-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+        ]"
+      >
+        <IconLayoutColumns class="size-4" />
+        Columnas
+      </button>
+
       <!-- Export -->
       <TableExportable
         v-if="showExport"

package/components/Table.vue

@@ -440,13 +440,23 @@ const handleRowKeydown = (row, e) => {
 }
 
 // ─── Expose ───────────────────────────────────────────────────────────────────
+const reloadTable = () => {
+  clearCache()
+  isDataFromCache.value = false
+  fetchData()
+}
+
+const toggleColumnPanel = () => { showColumnPanel.value = !showColumnPanel.value }
+
 defineExpose({
   getSelectedRows,
   loading,
   exportTable,
-  reload: () => { clearCache(); fetchData() },
+  reload: reloadTable,
   clearCache,
   table,
+  showColumnPanel,
+  toggleColumnPanel,
 })
 </script>
 
@@ -465,7 +475,7 @@ defineExpose({
       <div
         v-if="showColumnPanel"
         ref="columnPanelRef"
-        class="absolute bottom-16 right-6 z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
+        class="absolute top-0 right-0 z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
       >
         <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 px-1">
           Columnas visibles
@@ -763,7 +773,7 @@ defineExpose({
           <IconReload
             v-if="!loading"
             class="size-4 cursor-pointer text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 transition-colors"
-            @click="() => { clearCache(); isDataFromCache.value = false; fetchData() }"
+            @click="reloadTable"
           />
           <div v-else>
             <svg class="animate-spin size-4 text-slate-400 dark:text-slate-600" 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">
@@ -791,15 +801,6 @@ defineExpose({
           </div>
         </div>
 
-        <!-- Columns panel button -->
-        <button
-          @click="showColumnPanel = !showColumnPanel"
-          class="flex items-center gap-x-1.5 py-1 px-2.5 rounded-lg text-[11px] font-bold text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors border border-transparent"
-          :class="showColumnPanel ? 'bg-slate-100 dark:bg-slate-700 border-slate-200 dark:border-slate-600' : ''"
-        >
-          <IconLayoutColumns class="size-4" />
-          Columnas
-        </button>
       </div>
 
       <!-- Right: per-page + pagination -->

package/package.json

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