npm - @innertia-solutions/nuxt-theme-spark - Versions diffs - 0.1.75 → 0.1.77 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/components/Table/Standard.vue +59 -49
package/package.json +1 -1

package/components/Table/Standard.vue CHANGED Viewed

@@ -154,20 +154,40 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
           <Forms.Input v-model="search" type="search" :placeholder="searchPlaceholder" :icon-left="IconSearch" />
         </div>
-        <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{{ activeFilterCount > 0 ? ` (${activeFilterCount})` : '' }}
-        </button>
+        <div v-if="showFilters && hasFilterableColumns" class="relative">
+          <button
+            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{{ activeFilterCount > 0 ? ` (${activeFilterCount})` : '' }}
+          </button>
+          <!-- Filter panel — anchored below button -->
+          <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"
+              ref="filterPanelRef"
+              class="absolute top-full left-0 z-50 mt-1.5 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-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>
+        </div>
         <slot name="actions" />
@@ -189,11 +209,12 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
       </div>
       <!-- 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="previewEnabled ? { width: (previewRow ? currentRatio : 100) + '%', flexShrink: 0 } : {}"
         >
           <Table
             ref="tableRef"
@@ -217,46 +238,35 @@ 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/package.json CHANGED Viewed

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