@innertia-solutions/nuxt-theme-spark 0.1.27 → 0.1.29

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

@@ -513,8 +513,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"
@@ -545,7 +544,7 @@ defineExpose({
                 </template>
                 <!-- Regular column header -->
                 <template v-else>
-                  <div class="px-6 py-3 flex items-center gap-x-1 text-[11px] font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider w-full">
+                  <div class="px-4 py-3 flex items-center gap-x-1 text-xs font-medium text-slate-500 dark:text-slate-400 w-full">
                     {{ header.column.columnDef.meta?.label ?? header.id }}
                     <span v-if="header.column.getCanSort()">
                       <IconArrowsSort v-if="!header.column.getIsSorted()" class="size-4 opacity-40" />
@@ -606,7 +605,7 @@ defineExpose({
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
               :key="'skc-' + header.id"
-              :class="header.id === 'select' ? 'text-center w-12' : 'px-6'"
+              :class="header.id === 'select' ? 'text-center w-12' : 'px-4'"
               :style="{ height: lastRowHeight + 'px' }"
             >
               <div v-if="header.id === 'select'" class="w-4 h-4 bg-gray-300 dark:bg-slate-600 rounded mx-auto"></div>
@@ -624,7 +623,7 @@ defineExpose({
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
               :key="'eskc-' + header.id"
-              :class="header.id === 'select' ? 'text-center w-12' : 'px-6'"
+              :class="header.id === 'select' ? 'text-center w-12' : 'px-4'"
               :style="{ height: lastRowHeight + 'px' }"
             >
               <div v-if="header.id === 'select'" class="w-4 h-4 bg-gray-200 dark:bg-slate-600 rounded mx-auto"></div>
@@ -652,7 +651,7 @@ defineExpose({
               :class="[
                 cell.column.id === 'select'
                   ? 'text-center w-12'
-                  : 'px-6 py-3 text-sm text-slate-600 dark:text-slate-300',
+                  : 'px-4 py-3 text-sm text-slate-600 dark:text-slate-300',
                 cell.column.id !== 'select' ? cell.column.columnDef.meta?.class ?? '' : '',
               ]"
               @click.stop="cell.column.id === 'select' ? null : undefined"
@@ -756,7 +755,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 -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/nuxt-theme-spark",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",
@@ -43,4 +43,4 @@
     "nuxt": "^4.4.2",
     "vue": "^3.5.0"
   }
-}
+}