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

package/components/Table/Standard.vue

@@ -24,6 +24,7 @@ const slots = useSlots()
 const search       = ref('')
 const activeFilters = ref({})
 const showFilterPanel = ref(false)
+const filterPanelRef  = ref(null)
 const tableRef     = ref(null)
 
 // ─── Filter config ─────────────────────────────────────────────────────────────
@@ -51,10 +52,8 @@ 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)
   }
@@ -79,7 +78,6 @@ 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))
@@ -115,15 +113,24 @@ const onDrop = (key) => {
   dragOverKey.value = null
 }
 
-const onPanelOutsideClick = (e) => {
+const onColumnPanelOutsideClick = (e) => {
   if (columnPanelRef.value && !columnPanelRef.value.contains(e.target)) {
     showColumnPanel.value = false
   }
 }
+const onFilterPanelOutsideClick = (e) => {
+  if (filterPanelRef.value && !filterPanelRef.value.contains(e.target)) {
+    showFilterPanel.value = false
+  }
+}
 
 watch(showColumnPanel, (v) => {
-  if (v) document.addEventListener('mousedown', onPanelOutsideClick)
-  else document.removeEventListener('mousedown', onPanelOutsideClick)
+  if (v) document.addEventListener('mousedown', onColumnPanelOutsideClick)
+  else document.removeEventListener('mousedown', onColumnPanelOutsideClick)
+})
+watch(showFilterPanel, (v) => {
+  if (v) document.addEventListener('mousedown', onFilterPanelOutsideClick)
+  else document.removeEventListener('mousedown', onFilterPanelOutsideClick)
 })
 
 // ─── Expose ───────────────────────────────────────────────────────────────────
@@ -137,140 +144,119 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
 
 <template>
   <div class="relative" ref="containerRef">
-    <div :class="previewRow && previewEnabled ? 'flex items-stretch gap-3' : ''">
 
-      <!-- Card -->
-      <div
-        class="relative bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-sm overflow-hidden"
-        :style="previewRow && previewEnabled ? { width: currentRatio + '%', minWidth: 0, flexShrink: 0 } : {}"
-      >
-        <!-- 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="flex-1 min-w-48">
-            <Forms.Input
-              v-model="search"
-              type="search"
-              :placeholder="searchPlaceholder"
-              :icon-left="IconSearch"
-            />
-          </div>
+    <!-- Card único -->
+    <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-sm overflow-hidden">
 
-          <!-- 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" />
-
-          <!-- 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"
-          />
+      <!-- Toolbar -->
+      <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-700">
+        <div v-if="showSearch" class="flex-1 min-w-48">
+          <Forms.Input v-model="search" type="search" :placeholder="searchPlaceholder" :icon-left="IconSearch" />
         </div>
 
-        <!-- 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"
+        <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'
+          ]"
         >
-          <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="activeFilters" :columns="filtersConfig" />
-          </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"
-          :preview-row-id="previewRow?.id ?? null"
-          :preview-mode="!!previewEnabled"
-          @row-click="handleRowClick"
-          @loaded="emit('loaded', $event)"
+          <IconAdjustmentsHorizontal class="size-4" stroke="1.5" />
+          Filtros{{ activeFilterCount > 0 ? ` (${activeFilterCount})` : '' }}
+        </button>
+
+        <slot name="actions" />
+
+        <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'
+          ]"
         >
-          <template v-for="(_, name) in $slots" #[name]="slotProps">
-            <slot :name="name" v-bind="slotProps ?? {}" />
-          </template>
-        </Table>
-      </div>
+          <IconLayoutColumns class="size-4" />
+          Columnas
+        </button>
 
-      <!-- Resize handle -->
-      <div
-        v-if="previewRow && previewEnabled"
-        class="w-3 flex items-center justify-center cursor-col-resize shrink-0 group"
-        @mousedown="startResize"
-      >
-        <div class="w-px h-12 bg-slate-200 dark:bg-slate-600 rounded-full group-hover:bg-indigo-400 dark:group-hover:bg-indigo-500 transition-colors" />
+        <TableExportable v-if="showExport" :table-ref="tableRef" :name="name" :columns="columns" />
       </div>
 
-      <!-- Preview panel -->
-      <Transition
-        enter-active-class="transition ease-out duration-300"
-        enter-from-class="opacity-0 translate-x-4"
-        enter-to-class="opacity-100 translate-x-0"
-        leave-active-class="transition ease-in duration-200"
-        leave-from-class="opacity-100 translate-x-0"
-        leave-to-class="opacity-0 translate-x-4"
-      >
+      <!-- Contenido: tabla + preview en flex -->
+      <div :class="previewRow && previewEnabled ? 'flex items-stretch' : ''">
+
+        <!-- Tabla -->
         <div
-          v-if="previewRow && previewEnabled"
-          class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-sm overflow-hidden flex flex-col"
-          :style="{ width: (100 - currentRatio) + '%', minWidth: 0, flexShrink: 0 }"
+          :style="previewRow && previewEnabled ? { width: currentRatio + '%', flexShrink: 0, minWidth: 0 } : {}"
         >
-          <slot name="preview" :row="previewRow" :close="closePreview" />
+          <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"
+            :preview-row-id="previewRow?.id ?? null"
+            :preview-mode="!!previewEnabled"
+            @row-click="handleRowClick"
+            @loaded="emit('loaded', $event)"
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotProps">
+              <slot :name="name" v-bind="slotProps ?? {}" />
+            </template>
+          </Table>
         </div>
-      </Transition>
 
+        <!-- Divider + preview -->
+        <template v-if="previewRow && previewEnabled">
+          <!-- Resize handle -->
+          <div
+            class="w-1 shrink-0 cursor-col-resize bg-slate-100 dark:bg-slate-700/60 hover:bg-indigo-300 dark:hover:bg-indigo-600 transition-colors"
+            @mousedown="startResize"
+          />
+          <!-- Preview -->
+          <div
+            class="flex flex-col overflow-y-auto border-l border-slate-200 dark:border-slate-700"
+            :style="{ width: (100 - currentRatio) + '%', flexShrink: 0, minWidth: 0 }"
+          >
+            <slot name="preview" :row="previewRow" :close="closePreview" />
+          </div>
+        </template>
+
+      </div>
     </div>
 
+    <!-- Filter panel — outside overflow-hidden so never clipped -->
+    <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 && hasFilterableColumns"
+        ref="filterPanelRef"
+        class="absolute top-12 left-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-64 max-h-96 overflow-y-auto"
+      >
+        <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3 px-1">
+          Filtros
+        </p>
+        <TableFilter v-model="activeFilters" :columns="filtersConfig" />
+      </div>
+    </Transition>
+
     <!-- Column panel — outside overflow-hidden so never clipped -->
     <Transition
       enter-active-class="transition ease-out duration-150"

package/components/Table.vue

@@ -318,13 +318,11 @@ const measureText = (text, font) => {
 
 const autoSizeColumn = (header) => {
   const colId = header.column.id
-  const pad = 32 // px-4 on each side
+  const pad = 32
 
-  // Measure header label
   const label = header.column.columnDef.meta?.label ?? header.id
-  let max = measureText(label, '500 12px ui-sans-serif,system-ui,sans-serif') + pad + 20 // +20 for sort icon
+  let max = measureText(label, '500 12px ui-sans-serif,system-ui,sans-serif') + pad + 20
 
-  // Measure all visible data cells
   if (tableBodyRef.value) {
     tableBodyRef.value.querySelectorAll(`td[data-col-id="${colId}"]`).forEach(td => {
       const w = measureText(td.textContent?.trim(), '14px ui-sans-serif,system-ui,sans-serif') + pad
@@ -332,7 +330,7 @@ const autoSizeColumn = (header) => {
     })
   }
 
-  header.column.setSize(Math.ceil(max))
+  table.setColumnSizing(prev => ({ ...prev, [colId]: Math.ceil(max) }))
 }
 
 const onHeaderDragStart = (colId) => { draggedHeaderId = colId }

package/components/TableFilter.vue

@@ -1,17 +1,12 @@
 <script setup>
-// Reusable filter panel — reads filterType from column definitions
-// Column definition: { key, label, filterType: 'text' | 'select' | 'daterange', filterOptions?: [{value, label}] }
-
 const props = defineProps({
-  modelValue: { type: Object, default: () => ({}) }, // { [key]: value }
-  columns: { type: Array, required: true },
+  modelValue: { type: Object, default: () => ({}) },
+  columns:    { type: Array,  required: true },
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-const filterableColumns = computed(() =>
-  props.columns.filter(c => c.filterType)
-)
+const filterableColumns = computed(() => props.columns.filter(c => c.filterType))
 
 const localFilters = ref({ ...props.modelValue })
 
@@ -20,7 +15,7 @@ watch(() => props.modelValue, (v) => {
 }, { deep: true })
 
 const updateFilter = (key, value) => {
-  localFilters.value[key] = value
+  localFilters.value[key] = value || null
   emit('update:modelValue', { ...localFilters.value })
 }
 
@@ -35,66 +30,64 @@ const activeCount = computed(() =>
 </script>
 
 <template>
-  <div class="flex flex-wrap items-end gap-3">
+  <div class="space-y-3">
     <template v-for="col in filterableColumns" :key="col.key">
-      <!-- text filter -->
-      <div v-if="col.filterType === 'text'" class="flex flex-col gap-1 min-w-40">
-        <label class="text-xs text-slate-500 dark:text-slate-400">{{ col.label }}</label>
+
+      <!-- text -->
+      <div v-if="col.filterType === 'text'">
+        <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">{{ col.label }}</label>
         <input
           type="text"
           :value="localFilters[col.key] ?? ''"
           @input="updateFilter(col.key, $event.target.value)"
           :placeholder="`Filtrar ${col.label.toLowerCase()}...`"
-          class="rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          class="w-full rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
         />
       </div>
 
-      <!-- select filter -->
-      <div v-else-if="col.filterType === 'select'" class="flex flex-col gap-1 min-w-40">
-        <label class="text-xs text-slate-500 dark:text-slate-400">{{ col.label }}</label>
-        <select
-          :value="localFilters[col.key] ?? ''"
-          @change="updateFilter(col.key, $event.target.value || null)"
-          class="rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
-        >
-          <option value="">Todos</option>
-          <option
-            v-for="opt in col.filterOptions ?? []"
-            :key="opt.value"
-            :value="opt.value"
-          >{{ opt.label }}</option>
-        </select>
+      <!-- select -->
+      <div v-else-if="col.filterType === 'select'">
+        <Forms.Select
+          :model-value="localFilters[col.key] ?? ''"
+          @update:model-value="updateFilter(col.key, $event)"
+          :options="[{ value: '', label: 'Todos' }, ...(col.filterOptions ?? [])]"
+          :label="col.label"
+        />
       </div>
 
-      <!-- daterange filter -->
-      <div v-else-if="col.filterType === 'daterange'" class="flex flex-col gap-1">
-        <label class="text-xs text-slate-500 dark:text-slate-400">{{ col.label }}</label>
+      <!-- daterange -->
+      <div v-else-if="col.filterType === 'daterange'">
+        <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">{{ col.label }}</label>
         <div class="flex items-center gap-1.5">
           <input
             type="date"
             :value="localFilters[col.key]?.from ?? ''"
             @change="updateFilter(col.key, { ...localFilters[col.key], from: $event.target.value || null })"
-            class="rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            class="flex-1 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
           />
-          <span class="text-slate-400 text-sm">—</span>
+          <span class="text-slate-400 text-xs shrink-0">—</span>
           <input
             type="date"
             :value="localFilters[col.key]?.to ?? ''"
             @change="updateFilter(col.key, { ...localFilters[col.key], to: $event.target.value || null })"
-            class="rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            class="flex-1 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
           />
         </div>
       </div>
+
     </template>
 
-    <button
-      v-if="activeCount > 0"
-      type="button"
-      @click="clearAll"
-      class="py-2 px-3 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors flex items-center gap-1.5 self-end"
-    >
-      <svg class="size-4" 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>
-      Limpiar ({{ activeCount }})
-    </button>
+    <div class="pt-2 border-t border-slate-100 dark:border-slate-700/60">
+      <button
+        v-if="activeCount > 0"
+        type="button"
+        @click="clearAll"
+        class="w-full py-1.5 px-3 text-sm text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-lg transition-colors flex items-center justify-center gap-1.5"
+      >
+        <svg class="size-3.5" 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>
+        Limpiar filtros
+      </button>
+      <p v-else class="text-xs text-center text-slate-400 dark:text-slate-500 py-0.5">Sin filtros activos</p>
+    </div>
   </div>
 </template>

package/package.json

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