@innertia-solutions/nuxt-theme-spark 0.1.30 → 0.1.32

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

@@ -446,6 +446,8 @@ const reloadTable = () => {
   fetchData()
 }
 
+const toggleColumnPanel = () => { showColumnPanel.value = !showColumnPanel.value }
+
 defineExpose({
   getSelectedRows,
   loading,
@@ -453,6 +455,8 @@ defineExpose({
   reload: reloadTable,
   clearCache,
   table,
+  showColumnPanel,
+  toggleColumnPanel,
 })
 </script>
 
@@ -471,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
@@ -682,6 +686,20 @@ defineExpose({
               </template>
             </td>
           </tr>
+
+          <!-- Filler rows: pad table to full page height when data < perPage -->
+          <tr
+            v-if="!loading && tableData.length > 0 && tableData.length < pagination.pageSize"
+            v-for="i in (pagination.pageSize - tableData.length)"
+            :key="'fill-' + i"
+            class="divide-x divide-gray-200 dark:divide-slate-700 bg-white dark:bg-slate-800"
+          >
+            <td
+              v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
+              :key="'fillc-' + header.id"
+              :style="{ height: lastRowHeight + 'px' }"
+            />
+          </tr>
         </tbody>
       </table>
 
@@ -797,15 +815,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.30",
+  "version": "0.1.32",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",