@innertia-solutions/nuxt-theme-spark 0.1.74 → 0.1.76

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 ───────────────────────────────────────────────────────────────────
@@ -159,8 +166,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
           ]"
         >
           <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>
+          Filtros{{ activeFilterCount > 0 ? ` (${activeFilterCount})` : '' }}
         </button>
 
         <slot name="actions" />
@@ -182,26 +188,13 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
         <TableExportable v-if="showExport" :table-ref="tableRef" :name="name" :columns="columns" />
       </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"
-      >
-        <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>
-
       <!-- Contenido: tabla + preview en flex -->
-      <div :class="previewRow && previewEnabled ? 'flex items-stretch' : ''">
+      <div :class="previewEnabled ? 'flex items-stretch overflow-hidden' : ''">
 
         <!-- Tabla -->
         <div
-          :style="previewRow && previewEnabled ? { width: currentRatio + '%', flexShrink: 0, minWidth: 0 } : {}"
+          class="min-w-0 transition-[width] duration-200 ease-out"
+          :style="previewRow && previewEnabled ? { width: currentRatio + '%', flexShrink: 0 } : {}"
         >
           <Table
             ref="tableRef"
@@ -225,25 +218,56 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
           </Table>
         </div>
 
-        <!-- 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 -->
+        <!-- Divider + preview con animación slide -->
+        <Transition
+          enter-active-class="transition ease-out duration-200"
+          enter-from-class="opacity-0 translate-x-6"
+          enter-to-class="opacity-100 translate-x-0"
+          leave-active-class="transition ease-in duration-150"
+          leave-from-class="opacity-100 translate-x-0"
+          leave-to-class="opacity-0 translate-x-6"
+        >
           <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 }"
+            v-if="previewRow && previewEnabled"
+            class="flex items-stretch shrink-0 min-w-0"
+            :style="{ width: (100 - currentRatio) + '%' }"
           >
-            <slot name="preview" :row="previewRow" :close="closePreview" />
+            <!-- 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 flex-1">
+              <slot name="preview" :row="previewRow" :close="closePreview" />
+            </div>
           </div>
-        </template>
+        </Transition>
 
       </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/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.74",
+  "version": "0.1.76",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",