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

package/components/Table/Standard.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { IconSearch, IconAdjustmentsHorizontal, IconLayoutColumns } from '@tabler/icons-vue'
+import { IconSearch, IconAdjustmentsHorizontal, IconLayoutColumns, IconGripVertical, IconBolt, IconReload } 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 },
@@ -32,12 +31,52 @@ 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,
 }))
 
+// ─── Column panel ─────────────────────────────────────────────────────────────
+const showColumnPanel = ref(false)
+const columnPanelRef = ref(null)
+
+const orderedColumns = computed(() => {
+  if (!tableRef.value) return props.columns
+  const ids = tableRef.value.table.getAllLeafColumns().map(c => c.id)
+  return ids.map(id => props.columns.find(c => c.key === id)).filter(Boolean)
+})
+
+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)
+  tableRef.value?.setColumnOrder(ids)
+  draggedKey = null
+  dragOverKey.value = null
+}
+
+const onPanelOutsideClick = (e) => {
+  if (columnPanelRef.value && !columnPanelRef.value.contains(e.target)) {
+    showColumnPanel.value = false
+  }
+}
+
+watch(showColumnPanel, (v) => {
+  if (v) document.addEventListener('mousedown', onPanelOutsideClick)
+  else document.removeEventListener('mousedown', onPanelOutsideClick)
+})
+
+// ─── Expose ───────────────────────────────────────────────────────────────────
 const getSelectedRows = () => tableRef.value?.getSelectedRows()
 const reload = () => tableRef.value?.reload()
 const clearCache = () => tableRef.value?.clearCache()
@@ -47,103 +86,174 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
 </script>
 
 <template>
-  <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
-    <!-- Toolbar -->
-    <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-700">
-      <!-- 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 class="relative">
+    <!-- Card -->
+    <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+      <!-- Toolbar -->
+      <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-700">
+        <!-- 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-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white py-1.5 ps-9 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+
+        <!-- Filter toggle -->
+        <button
+          v-if="showFilters && hasFilterableColumns"
+          type="button"
+          @click="showFilterPanel = !showFilterPanel"
+          :class="[
+            'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
+            showFilterPanel || activeFilterCount > 0
+              ? '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'
+          ]"
+        >
+          <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-blue-600 text-white text-xs font-bold"
+          >{{ activeFilterCount }}</span>
+        </button>
+
+        <slot name="actions" />
+
+        <!-- Reload -->
+        <button
+          type="button"
+          @click="reload()"
+          class="py-1.5 px-2.5 inline-flex items-center gap-2 text-sm font-medium rounded-lg border 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 transition-colors"
+          title="Recargar"
+        >
+          <IconReload class="size-4" />
+        </button>
+
+        <!-- Cache badge -->
+        <div v-if="tableRef?.isDataFromCache && tableRef?.cached" class="group relative flex items-center">
+          <div class="flex items-center gap-x-1.5 py-1.5 px-2.5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-lg cursor-help hover:bg-emerald-500/20 transition-colors border border-emerald-200 dark:border-emerald-800">
+            <IconBolt class="size-3.5 fill-current" />
+            <span class="text-[10px] font-bold uppercase tracking-wider">Instant</span>
+          </div>
+          <div class="absolute top-full mt-2 right-0 hidden group-hover:block w-48 p-2.5 bg-slate-900 text-white text-[11px] leading-relaxed rounded-xl shadow-2xl z-50">
+            <div class="font-bold mb-1 flex items-center gap-x-1.5 text-emerald-400">
+              <IconBolt class="size-3" /> Datos en Caché
+            </div>
+            Cargados desde memoria local. Recarga para sincronizar.
+            <div class="absolute bottom-full right-4 mb-[-1px] border-4 border-transparent border-b-slate-900"></div>
+          </div>
         </div>
-        <input
-          v-model="search"
-          type="search"
-          :placeholder="searchPlaceholder"
-          class="block w-full rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 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 focus:border-indigo-500"
+
+        <!-- Column visibility toggle -->
+        <button
+          type="button"
+          @click="showColumnPanel = !showColumnPanel"
+          :class="[
+            'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
+            showColumnPanel
+              ? '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'
+          ]"
+        >
+          <IconLayoutColumns class="size-4" />
+          Columnas
+        </button>
+
+        <!-- Export -->
+        <TableExportable
+          v-if="showExport"
+          :table-ref="tableRef"
+          :name="name"
+          :columns="columns"
         />
       </div>
 
-      <!-- Filter toggle -->
-      <button
-        v-if="showFilters && hasFilterableColumns"
-        type="button"
-        @click="showFilterPanel = !showFilterPanel"
-        :class="[
-          'py-1.5 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-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
-        ]"
+      <!-- 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"
       >
-        <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" />
-
-      <!-- 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"
-        :table-ref="tableRef"
-        :name="name"
+        <div
+          v-if="showFilterPanel && hasFilterableColumns"
+          class="px-4 py-3 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50"
+        >
+          <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>
 
-    <!-- Filter panel -->
+    <!-- Column panel — outside overflow-hidden so never clipped -->
     <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"
+      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"
-      leave-to-class="opacity-0 -translate-y-2"
+      leave-from-class="opacity-100 translate-y-0 scale-100"
+      leave-to-class="opacity-0 translate-y-1 scale-95"
     >
       <div
-        v-if="showFilterPanel && hasFilterableColumns"
-        class="px-4 py-3 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50"
+        v-if="showColumnPanel"
+        ref="columnPanelRef"
+        class="absolute top-12 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"
       >
-        <TableFilter v-model="filters" :columns="columns" />
+        <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 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-blue-50 dark:bg-blue-900/20 ring-1 ring-blue-300 dark:ring-blue-700'
+            : 'hover:bg-slate-50 dark:hover:bg-slate-700 cursor-grab'"
+        >
+          <IconGripVertical class="size-4 text-slate-300 dark:text-slate-600 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-gray-300 dark:bg-slate-700 dark:border-slate-600 shrink-0 cursor-pointer"
+          />
+          <span class="text-sm text-slate-700 dark:text-slate-200 truncate">{{ col.label }}</span>
+        </div>
       </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/Table.vue

@@ -6,8 +6,6 @@ import {
   IconSortDescendingSmallBig,
   IconReload,
   IconBolt,
-  IconLayoutColumns,
-  IconGripVertical,
 } from '@tabler/icons-vue'
 
 const props = defineProps({
@@ -285,47 +283,7 @@ onBeforeUnmount(() => {
 })
 
 // ─── Column settings panel ────────────────────────────────────────────────────
-const showColumnPanel = ref(false)
-const columnPanelRef = ref(null)
-
-const orderedColumns = computed(() => {
-  if (!columnOrder.value.length) return props.columns
-  return [...props.columns].sort((a, b) => {
-    const ia = columnOrder.value.indexOf(a.key)
-    const ib = columnOrder.value.indexOf(b.key)
-    return (ia < 0 ? 999 : ia) - (ib < 0 ? 999 : ib)
-  })
-})
-
-let draggedPanelKey = null
-const dragOverPanelKey = ref(null)
-
-const onPanelDragStart = (key) => { draggedPanelKey = key }
-const onPanelDragOver = (e, key) => { e.preventDefault(); dragOverPanelKey.value = key }
-const onPanelDragLeave = () => { dragOverPanelKey.value = null }
-const onPanelDrop = (key) => {
-  if (!draggedPanelKey || draggedPanelKey === key) return
-  const order = [...columnOrder.value]
-  const from = order.indexOf(draggedPanelKey)
-  const to = order.indexOf(key)
-  if (from < 0 || to < 0) return
-  order.splice(from, 1)
-  order.splice(to, 0, draggedPanelKey)
-  columnOrder.value = order
-  draggedPanelKey = null
-  dragOverPanelKey.value = null
-}
-
-const handlePanelOutsideClick = (e) => {
-  if (columnPanelRef.value && !columnPanelRef.value.contains(e.target)) {
-    showColumnPanel.value = false
-  }
-}
-
-watch(showColumnPanel, (v) => {
-  if (v) document.addEventListener('mousedown', handlePanelOutsideClick)
-  else document.removeEventListener('mousedown', handlePanelOutsideClick)
-})
+const setColumnOrder = (order) => { columnOrder.value = order }
 
 // ─── Header drag reorder ──────────────────────────────────────────────────────
 let draggedHeaderId = null
@@ -446,8 +404,6 @@ const reloadTable = () => {
   fetchData()
 }
 
-const toggleColumnPanel = () => { showColumnPanel.value = !showColumnPanel.value }
-
 defineExpose({
   getSelectedRows,
   loading,
@@ -455,57 +411,15 @@ defineExpose({
   reload: reloadTable,
   clearCache,
   table,
-  showColumnPanel,
-  toggleColumnPanel,
+  setColumnOrder,
+  isDataFromCache,
+  cached: computed(() => props.cached),
 })
 </script>
 
 <template>
   <div class="relative">
 
-    <!-- Column settings 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="showColumnPanel"
-        ref="columnPanelRef"
-        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
-        </p>
-        <div
-          v-for="col in orderedColumns"
-          :key="col.key"
-          draggable="true"
-          @dragstart="onPanelDragStart(col.key)"
-          @dragover="(e) => onPanelDragOver(e, col.key)"
-          @dragleave="onPanelDragLeave"
-          @drop="onPanelDrop(col.key)"
-          class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none transition-colors"
-          :class="dragOverPanelKey === col.key
-            ? 'bg-indigo-50 dark:bg-indigo-900/20 ring-1 ring-indigo-300 dark:ring-indigo-700'
-            : 'hover:bg-slate-50 dark:hover:bg-slate-700 cursor-grab'"
-        >
-          <IconGripVertical class="size-4 text-slate-300 dark:text-slate-600 shrink-0" />
-          <input
-            type="checkbox"
-            :checked="table.getColumn(col.key)?.getIsVisible() ?? true"
-            @change="table.getColumn(col.key)?.toggleVisibility()"
-            @click.stop
-            class="rounded border-gray-300 dark:bg-slate-700 dark:border-slate-600 shrink-0 cursor-pointer"
-          />
-          <span class="text-sm text-slate-700 dark:text-slate-200 truncate">{{ col.label }}</span>
-        </div>
-      </div>
-    </Transition>
-
     <!-- Table view -->
     <div v-if="!isGridView" class="overflow-x-auto relative">
       <table

package/package.json

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