@wishbone-media/spark 0.23.1 → 0.25.0

package/package.json

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

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

@@ -9,6 +9,14 @@
   --ht-header-highlighted-background-color: transparent;
 }
 
+.spark-table .handsontable td.current:not(.spark-table-cell-actions) {
+  @apply relative;
+
+  &::before {
+    @apply absolute opacity-[0.14] content-[''] inset-0 bg-[var(--ht-cell-selection-background-color,#1a42e8)] pointer-events-none;
+  }
+}
+
 .spark-table .handsontable tr.ht__row_odd:hover td,
 .spark-table .handsontable tr.ht__row_even:hover td {
   @apply !bg-gray-100;

package/src/components/SparkButton.vue

@@ -93,23 +93,23 @@ const computedButtonClass = computed(() => {
 
   switch (props.size) {
     case 'xs':
-      classes += ' px-2 py-1 text-xs'
+      classes += ' px-4 py-1 text-xs'
       roundingSize = 'sm'
       break
     case 'sm':
-      classes += ' px-2 py-1 text-sm'
+      classes += ' px-4 py-1 text-sm'
       roundingSize = 'sm'
       break
     case 'md':
-      classes += ' px-2.5 py-1.5 text-sm'
+      classes += ' px-5 py-1.5 text-sm'
       roundingSize = 'md'
       break
     case 'lg':
-      classes += ' px-3 py-2 text-sm'
+      classes += ' px-6 py-2 text-sm'
       roundingSize = 'md'
       break
     case 'xl':
-      classes += ' px-3.5 py-2.5 min-h-[42px] text-sm'
+      classes += ' px-7 py-2.5 min-h-[42px] text-sm'
       roundingSize = 'md'
       break
   }

package/src/components/SparkCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="divide-y divide-gray-300 rounded-lg border border-gray-300 text-gray-700 bg-gray-100">
-    <div v-if="$slots.header" class="p-5">
+    <div v-if="$slots.header" class="px-[30px] py-5">
       <slot name="header" />
     </div>
 

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/components/plugins/SparkTableFilterButtons.vue

@@ -6,6 +6,7 @@
         v-for="option in config.options"
         :key="option.value"
         size="xl"
+        button-class="px-3.5"
         :variant="isSelected(option.value) ? 'primary' : 'secondary'"
         @click="handleSelect(option.value)"
       >

package/src/components/plugins/SparkTableReset.vue

@@ -3,6 +3,7 @@
     <SparkButton
       @click="handleReset"
       variant="secondary"
+      button-class="px-3.5"
       size="xl"
     >
       <font-awesome-icon v-if="config.icon" :icon="['far', config.icon]" :class="{'mr-1.5': config.label}"/>

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,