@wishbone-media/spark 0.23.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/assets/css/spark-table.css

@@ -13,7 +13,7 @@
   @apply relative;
 
   &::before {
-    @apply absolute opacity-[0.14] content-[''] inset-0 bg-[var(--ht-cell-selection-background-color,#1a42e8)];
+    @apply absolute opacity-[0.14] content-[''] inset-0 bg-[var(--ht-cell-selection-background-color,#1a42e8)] pointer-events-none;
   }
 }
 

package/src/components/SparkTable.vue

@@ -15,15 +15,23 @@
     <div v-else class="pt-5"></div>
 
     <!-- Table Grid -->
-    <HotTable theme-name="ht-theme-classic" ref="table" :settings="sparkTable.tableSettings" />
+    <HotTable v-show="!isEmpty" theme-name="ht-theme-classic" ref="table" :settings="sparkTable.tableSettings" />
+
+    <!-- Empty State -->
+    <div v-if="isEmpty" class="flex flex-col items-center justify-center py-16 text-gray-500 rounded-md border border-gray-300 bg-white">
+      <font-awesome-icon :icon="Icons.farInbox" class="size-12 mb-4 text-gray-300" />
+      <p class="text-sm">No records found</p>
+    </div>
 
     <!-- Footer Toolbar: Pagination always on the right -->
     <spark-table-toolbar v-if="sparkTable.computed.ready" position="footer">
       <spark-table-pagination-details
+        v-if="!isEmpty"
         :spark-table="sparkTable"
       />
-      <div class="flex items-center gap-x-3">
+      <div class="flex items-center gap-x-3 ml-auto">
         <spark-table-pagination-paging
+          v-if="!isEmpty"
           :spark-table="sparkTable"
           @paginate="sparkTable.methods.applyParams"
         />
@@ -85,6 +93,7 @@ import SparkTablePaginationPaging from './SparkTablePaginationPaging.vue'
 import SparkTablePaginationPerPage from './SparkTablePaginationPerPage.vue'
 import SparkTableToolbar from './SparkTableToolbar.vue'
 import { SparkTableSearch, SparkTableFilterSelect, SparkTableFilterButtons, SparkTableDatePicker, SparkTableReset } from './plugins'
+import { Icons } from '@/plugins/fontawesome.js'
 
 const props = defineProps({
   url: {
@@ -383,6 +392,11 @@ const sparkTable = reactive({
   })),
 })
 
+// Empty state detection - true when data has loaded but contains no records
+const isEmpty = computed(() =>
+  sparkTable.computed.ready && sparkTable.response.data?.length === 0
+)
+
 /**
  * Get the param key for a plugin based on its type and configuration
  */

package/src/plugins/fontawesome.js

@@ -42,6 +42,7 @@ import {
   faUndo,
   faBolt,
   faCloudDownload,
+  faInbox,
 } from '@fortawesome/pro-regular-svg-icons'
 
 import {
@@ -91,6 +92,7 @@ export const Icons = {
   farUndo: faUndo,
   farBolt: faBolt,
   farCloudDownload: faCloudDownload,
+  farInbox: faInbox,
 
   fadSort: faSortDuotone,
   fadSortDown: faSortDownDuotone,