@innertia-solutions/nuxt-theme-spark 0.1.33 → 0.1.35

package/components/Table/Standard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { IconSearch, IconAdjustmentsHorizontal, IconLayoutColumns, IconGripVertical } from '@tabler/icons-vue'
+import { IconSearch, IconAdjustmentsHorizontal, IconLayoutColumns, IconGripVertical, IconBolt, IconReload } from '@tabler/icons-vue'
 
 const props = defineProps({
   endpoint: { type: String, required: true },
@@ -92,15 +92,12 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
       <!-- 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
+        <div v-if="showSearch" class="flex-1 min-w-48">
+          <Forms.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"
+            :icon-left="IconSearch"
           />
         </div>
 
@@ -126,6 +123,31 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
 
         <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>
+
         <!-- Column visibility toggle -->
         <button
           type="button"

package/components/Table.vue

@@ -412,6 +412,8 @@ defineExpose({
   clearCache,
   table,
   setColumnOrder,
+  isDataFromCache,
+  cached: computed(() => props.cached),
 })
 </script>
 

package/package.json

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