@innertia-solutions/nuxt-theme-spark 0.1.28 → 0.1.30

package/components/Table/Standard.vue

@@ -47,9 +47,9 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <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">
+    <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">
@@ -59,7 +59,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
           v-model="search"
           type="search"
           :placeholder="searchPlaceholder"
-          class="block 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-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          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"
         />
       </div>
 
@@ -69,10 +69,10 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
         type="button"
         @click="showFilterPanel = !showFilterPanel"
         :class="[
-          'py-2 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
+          '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-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+            : '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" />
@@ -105,7 +105,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
     >
       <div
         v-if="showFilterPanel && hasFilterableColumns"
-        class="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700"
+        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>

package/components/Table.vue

@@ -440,11 +440,17 @@ const handleRowKeydown = (row, e) => {
 }
 
 // ─── Expose ───────────────────────────────────────────────────────────────────
+const reloadTable = () => {
+  clearCache()
+  isDataFromCache.value = false
+  fetchData()
+}
+
 defineExpose({
   getSelectedRows,
   loading,
   exportTable,
-  reload: () => { clearCache(); fetchData() },
+  reload: reloadTable,
   clearCache,
   table,
 })
@@ -513,8 +519,7 @@ defineExpose({
           <template v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
             <!-- Main header row -->
             <tr
-              class="divide-x divide-gray-200 dark:border-slate-700 dark:divide-slate-700"
-              :class="{ 'border-t border-gray-200': loading || tableData.length > 0 }"
+              class="divide-x divide-slate-200 dark:divide-slate-700"
             >
               <th
                 v-for="header in headerGroup.headers"
@@ -756,7 +761,7 @@ defineExpose({
     </div>
 
     <!-- Pagination & controls bar -->
-    <div class="flex flex-col sm:flex-row items-center justify-between gap-y-4 sm:gap-y-0 mt-4 px-6 pb-6">
+    <div class="flex flex-col sm:flex-row items-center justify-between gap-y-4 sm:gap-y-0 px-4 py-3 border-t border-slate-200 dark:border-slate-700">
       <!-- Left: reload, total, cache, columns button -->
       <div class="flex items-center gap-x-4 flex-wrap gap-y-2">
         <!-- Reload button -->
@@ -764,7 +769,7 @@ defineExpose({
           <IconReload
             v-if="!loading"
             class="size-4 cursor-pointer text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-300 transition-colors"
-            @click="() => { clearCache(); isDataFromCache.value = false; fetchData() }"
+            @click="reloadTable"
           />
           <div v-else>
             <svg class="animate-spin size-4 text-slate-400 dark:text-slate-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

package/package.json

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