@wishbone-media/spark 0.38.0 → 0.40.0

package/src/components/SparkTable.vue

@@ -1,47 +1,55 @@
 <template>
   <div class="spark-table">
     <!-- Header Toolbar: All plugins flow left to right -->
-    <spark-table-toolbar v-if="sparkTable.computed.ready && headerPlugins && headerPlugins.length" position="header">
+    <SparkTableToolbar
+      v-if="sparkTable.computed.ready && headerPlugins && headerPlugins.length"
+      position="header"
+    >
       <component
+        :is="pluginComponentsByType[plugin.config.type]"
         v-for="plugin in headerPlugins"
         :key="plugin.name"
-        :is="pluginComponentsByType[plugin.config.type]"
         :class="plugin.config.align ? `self-${plugin.config.align}` : ''"
         :spark-table="sparkTable"
         :config="plugin.config"
       />
-      <slot name="header" :spark-table="sparkTable" :loading="loading" :error="error"></slot>
-    </spark-table-toolbar>
-    <div v-else class="pt-5"></div>
+      <slot name="header" :spark-table="sparkTable" :loading="loading" :error="error" />
+    </SparkTableToolbar>
+    <div v-else class="pt-5" />
 
     <!-- Table Grid -->
-    <HotTable v-show="!isEmpty" theme-name="ht-theme-classic" ref="table" :settings="sparkTable.tableSettings" />
+    <HotTable
+      v-show="!isEmpty"
+      ref="table"
+      theme-name="ht-theme-classic"
+      :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">
+    <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"
-      />
+    <SparkTableToolbar v-if="sparkTable.computed.ready" position="footer">
+      <SparkTablePaginationDetails v-if="!isEmpty" :spark-table="sparkTable" />
       <div class="flex items-center gap-x-3 ml-auto">
-        <spark-table-pagination-paging
+        <SparkTablePaginationPaging
           v-if="!isEmpty"
           :spark-table="sparkTable"
           @paginate="sparkTable.methods.applyParams"
         />
-        <spark-table-pagination-per-page
+        <SparkTablePaginationPerPage
           :spark-table="sparkTable"
           @paginate="sparkTable.methods.applyParams"
         />
-        <slot name="footer" :spark-table="sparkTable" :loading="loading" :error="error"></slot>
+        <slot name="footer" :spark-table="sparkTable" :loading="loading" :error="error" />
       </div>
-    </spark-table-toolbar>
+    </SparkTableToolbar>
   </div>
 </template>
 
@@ -92,16 +100,24 @@ import SparkTablePaginationDetails from './SparkTablePaginationDetails.vue'
 import SparkTablePaginationPaging from './SparkTablePaginationPaging.vue'
 import SparkTablePaginationPerPage from './SparkTablePaginationPerPage.vue'
 import SparkTableToolbar from './SparkTableToolbar.vue'
-import { SparkTableSearch, SparkTableFilterSelect, SparkTableFilterButtons, SparkTableDatePicker, SparkTableReset } from './plugins'
+import {
+  SparkTableSearch,
+  SparkTableFilterSelect,
+  SparkTableFilterButtons,
+  SparkTableDatePicker,
+  SparkTableReset,
+} from './plugins'
 import { Icons } from '@/plugins/fontawesome.js'
 
 const props = defineProps({
   url: {
     type: String,
+    default: null,
   },
 
   dataProvider: {
     type: Function,
+    default: null,
   },
 
   dataTransformer: {
@@ -316,7 +332,7 @@ const sparkTable = reactive({
     clearParams: (keys) => {
       // Clear multiple params at once without triggering multiple reloads
       const keysArray = Array.isArray(keys) ? keys : [keys]
-      keysArray.forEach(key => {
+      keysArray.forEach((key) => {
         if (sparkTable.params[key] !== undefined) {
           delete sparkTable.params[key]
         }
@@ -342,60 +358,42 @@ const sparkTable = reactive({
 
   tableSettings: computed(() => ({
     ...defaultTableSettings,
-    ...{
-      ...{
-        nestedHeaders: get(props.settings, 'nestedHeaders', []),
-      },
-      ...(!get(props.settings, 'nestedHeaders') && {
-        afterGetColHeader: (col, th) => customiseHeader(col, th, sparkTable),
-      }),
-      afterChange: (changes, source) => updateRow(changes, source, sparkTable),
-      afterRender: () => syncSortClasses(sparkTable),
-      /**
-       * Prevent columns with explicit width from being stretched
-       * This hook fires BEFORE stretchH is applied, allowing us to cap specific columns
-       * while letting others stretch normally
-       */
-      beforeStretchingColumnWidth: (stretchedWidth, column) => {
-        const columns = get(props.settings, 'columns', [])
-        const columnSettings = columns[column]
-        if (columnSettings && columnSettings.width !== undefined) {
-          return columnSettings.width
-        }
-        return stretchedWidth
-      },
-      /**
-       * Copy displayed cell content instead of raw data values
-       * This ensures custom renderers copy their visual output, not the underlying data
-       */
-      beforeCopy: (data, coords) => {
-        const hot = table.value?.hotInstance
-        if (!hot) return
-
-        coords.forEach((range) => {
-          for (let row = range.startRow; row <= range.endRow; row++) {
-            for (let col = range.startCol; col <= range.endCol; col++) {
-              const td = hot.getCell(row, col)
-              if (td) {
-                const dataRow = row - coords[0].startRow
-                const dataCol = col - coords[0].startCol
-                // Prefer data-copy-value (for renderers like boolean with icons)
-                // Fall back to textContent for standard rendered content
-                data[dataRow][dataCol] = td.dataset.copyValue ?? td.textContent ?? ''
-              }
+    nestedHeaders: get(props.settings, 'nestedHeaders', []),
+    ...(!get(props.settings, 'nestedHeaders') && {
+      afterGetColHeader: (col, th) => customiseHeader(col, th, sparkTable),
+    }),
+    afterChange: (changes, source) => updateRow(changes, source, sparkTable),
+    afterRender: () => syncSortClasses(sparkTable),
+    beforeStretchingColumnWidth: (stretchedWidth, column) => {
+      const columns = get(props.settings, 'columns', [])
+      const columnSettings = columns[column]
+      if (columnSettings && columnSettings.width !== undefined) {
+        return columnSettings.width
+      }
+      return stretchedWidth
+    },
+    beforeCopy: (data, coords) => {
+      const hot = table.value?.hotInstance
+      if (!hot) return
+      coords.forEach((range) => {
+        for (let row = range.startRow; row <= range.endRow; row++) {
+          for (let col = range.startCol; col <= range.endCol; col++) {
+            const td = hot.getCell(row, col)
+            if (td) {
+              const dataRow = row - coords[0].startRow
+              const dataCol = col - coords[0].startCol
+              data[dataRow][dataCol] = td.dataset.copyValue ?? td.textContent ?? ''
             }
           }
-        })
-      },
+        }
+      })
     },
     ...props.settings,
   })),
 })
 
 // Empty state detection - true when data has loaded but contains no records
-const isEmpty = computed(() =>
-  sparkTable.computed.ready && sparkTable.response.data?.length === 0
-)
+const isEmpty = computed(() => sparkTable.computed.ready && sparkTable.response.data?.length === 0)
 
 /**
  * Get the param key for a plugin based on its type and configuration
@@ -429,12 +427,13 @@ const isPluginEnabled = (pluginConfig) => {
 // `enabled` can be a boolean or a function that receives current params
 const headerPlugins = computed(() => {
   return Object.entries(props.plugins)
-    .filter(([_, config]) => isPluginEnabled(config))
+    .filter(([, config]) => isPluginEnabled(config))
     .map(([name, config]) => ({ name, config }))
 })
 
 // Get all plugin param keys (regardless of enabled state)
-const getAllPluginParamKeys = () => {
+// eslint-disable-next-line no-unused-vars -- reserved for future external use
+const _getAllPluginParamKeys = () => {
   const keys = []
   Object.values(props.plugins).forEach((config) => {
     const paramKey = getPluginParamKey(config)
@@ -470,7 +469,7 @@ watch(
       })
     }
   },
-  { deep: true, flush: 'sync' }
+  { deep: true, flush: 'sync' },
 )
 
 // Setup route sync and/or storage persistence if enabled
@@ -502,13 +501,13 @@ watchDebounced(
 )
 
 watch(
-    () => props.url,
-    async (newUrl, oldUrl) => {
-      if (newUrl !== oldUrl) {
-        sparkTable.params.page = 1
-        await sparkTable.methods.loadTable()
-      }
+  () => props.url,
+  async (newUrl, oldUrl) => {
+    if (newUrl !== oldUrl) {
+      sparkTable.params.page = 1
+      await sparkTable.methods.loadTable()
     }
+  },
 )
 
 onMounted(async () => {

package/src/components/SparkTablePaginationPaging.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex items-center gap-4 px-4 py-3">
-      <div class="shrink-0 ml-auto" v-if="pageRange.length > 1">
+      <div v-if="pageRange.length > 1" class="shrink-0 ml-auto">
         <div>
           <nav
             class="isolate inline-flex -space-x-px rounded-md shadow-xs bg-white"
@@ -33,9 +33,9 @@
 
             <a
               :class="canNext ? '' : 'disabled'"
-              @click.prevent="pageChanged(1)"
               href="#"
               class="relative inline-flex items-center rounded-r-md px-2 py-[9px] text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+              @click.prevent="pageChanged(1)"
             >
               <font-awesome-icon :icon="Icons.farChevronRight" class="size-5" />
             </a>

package/src/components/SparkTableToolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="hasContent" :class="toolbarClass">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

package/src/components/SparkToastContainer.vue

@@ -1,7 +1,9 @@
 <template>
   <Teleport to="body">
     <!-- Top Left -->
-    <div class="fixed top-4 left-4 z-[2000] flex flex-col gap-3 max-w-sm w-full pointer-events-none">
+    <div
+      class="fixed top-4 left-4 z-[2000] flex flex-col gap-3 max-w-sm w-full pointer-events-none"
+    >
       <TransitionGroup
         enter-active-class="transition-all duration-300 ease-out"
         enter-from-class="opacity-0 -translate-x-4"
@@ -18,11 +20,7 @@
             @mouseenter="handleMouseEnter(toast.id)"
             @mouseleave="handleMouseLeave(toast.id)"
           >
-            <component
-              v-if="toast.component"
-              :is="toast.component"
-              v-bind="toast.props"
-            />
+            <component :is="toast.component" v-if="toast.component" v-bind="toast.props" />
             <template v-else>{{ toast.message }}</template>
           </SparkAlert>
         </div>
@@ -30,7 +28,9 @@
     </div>
 
     <!-- Top Right -->
-    <div class="fixed top-4 right-4 z-[2000] flex flex-col gap-3 max-w-sm w-full pointer-events-none">
+    <div
+      class="fixed top-4 right-4 z-[2000] flex flex-col gap-3 max-w-sm w-full pointer-events-none"
+    >
       <TransitionGroup
         enter-active-class="transition-all duration-300 ease-out"
         enter-from-class="opacity-0 translate-x-4"
@@ -47,11 +47,7 @@
             @mouseenter="handleMouseEnter(toast.id)"
             @mouseleave="handleMouseLeave(toast.id)"
           >
-            <component
-              v-if="toast.component"
-              :is="toast.component"
-              v-bind="toast.props"
-            />
+            <component :is="toast.component" v-if="toast.component" v-bind="toast.props" />
             <template v-else>{{ toast.message }}</template>
           </SparkAlert>
         </div>
@@ -59,7 +55,9 @@
     </div>
 
     <!-- Center (slightly above center) -->
-    <div class="fixed top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 z-[2000] flex flex-col gap-3 max-w-sm w-full pointer-events-none">
+    <div
+      class="fixed top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 z-[2000] flex flex-col gap-3 max-w-sm w-full pointer-events-none"
+    >
       <TransitionGroup
         enter-active-class="transition-all duration-300 ease-out"
         enter-from-class="opacity-0 scale-95"
@@ -76,11 +74,7 @@
             @mouseenter="handleMouseEnter(toast.id)"
             @mouseleave="handleMouseLeave(toast.id)"
           >
-            <component
-              v-if="toast.component"
-              :is="toast.component"
-              v-bind="toast.props"
-            />
+            <component :is="toast.component" v-if="toast.component" v-bind="toast.props" />
             <template v-else>{{ toast.message }}</template>
           </SparkAlert>
         </div>
@@ -88,7 +82,9 @@
     </div>
 
     <!-- Bottom Left -->
-    <div class="fixed bottom-4 left-4 z-[2000] flex flex-col-reverse gap-3 max-w-sm w-full pointer-events-none">
+    <div
+      class="fixed bottom-4 left-4 z-[2000] flex flex-col-reverse gap-3 max-w-sm w-full pointer-events-none"
+    >
       <TransitionGroup
         enter-active-class="transition-all duration-300 ease-out"
         enter-from-class="opacity-0 -translate-x-4"
@@ -105,11 +101,7 @@
             @mouseenter="handleMouseEnter(toast.id)"
             @mouseleave="handleMouseLeave(toast.id)"
           >
-            <component
-              v-if="toast.component"
-              :is="toast.component"
-              v-bind="toast.props"
-            />
+            <component :is="toast.component" v-if="toast.component" v-bind="toast.props" />
             <template v-else>{{ toast.message }}</template>
           </SparkAlert>
         </div>
@@ -117,7 +109,9 @@
     </div>
 
     <!-- Bottom Right -->
-    <div class="fixed bottom-4 right-4 z-[2000] flex flex-col-reverse gap-3 max-w-sm w-full pointer-events-none">
+    <div
+      class="fixed bottom-4 right-4 z-[2000] flex flex-col-reverse gap-3 max-w-sm w-full pointer-events-none"
+    >
       <TransitionGroup
         enter-active-class="transition-all duration-300 ease-out"
         enter-from-class="opacity-0 translate-x-4"
@@ -134,11 +128,7 @@
             @mouseenter="handleMouseEnter(toast.id)"
             @mouseleave="handleMouseLeave(toast.id)"
           >
-            <component
-              v-if="toast.component"
-              :is="toast.component"
-              v-bind="toast.props"
-            />
+            <component :is="toast.component" v-if="toast.component" v-bind="toast.props" />
             <template v-else>{{ toast.message }}</template>
           </SparkAlert>
         </div>
@@ -154,20 +144,14 @@ import SparkAlert from '@/components/SparkAlert.vue'
 
 const toastState = sparkNotificationService.toastState
 
-const topLeftToasts = computed(() =>
-  toastState.toasts.filter(t => t.position === 'top-left')
-)
-const topRightToasts = computed(() =>
-  toastState.toasts.filter(t => t.position === 'top-right')
-)
-const centerToasts = computed(() =>
-  toastState.toasts.filter(t => t.position === 'center')
-)
+const topLeftToasts = computed(() => toastState.toasts.filter((t) => t.position === 'top-left'))
+const topRightToasts = computed(() => toastState.toasts.filter((t) => t.position === 'top-right'))
+const centerToasts = computed(() => toastState.toasts.filter((t) => t.position === 'center'))
 const bottomLeftToasts = computed(() =>
-  toastState.toasts.filter(t => t.position === 'bottom-left')
+  toastState.toasts.filter((t) => t.position === 'bottom-left'),
 )
 const bottomRightToasts = computed(() =>
-  toastState.toasts.filter(t => t.position === 'bottom-right')
+  toastState.toasts.filter((t) => t.position === 'bottom-right'),
 )
 
 const handleClose = (toastId) => {

package/src/components/SparkTooltip.vue

@@ -20,15 +20,11 @@
         role="tooltip"
       >
         <slot name="content">
+          <!-- eslint-disable-next-line vue/no-v-html -- html prop is opt-in, consumer responsibility -->
           <span v-if="html" v-html="content" />
           <span v-else>{{ content }}</span>
         </slot>
-        <div
-          v-if="showArrow"
-          ref="arrowRef"
-          class="spark-tooltip-arrow"
-          :style="arrowStyles"
-        />
+        <div v-if="showArrow" ref="arrowRef" class="spark-tooltip-arrow" :style="arrowStyles" />
       </div>
     </Transition>
   </Teleport>
@@ -101,26 +97,22 @@ let showTimeout = null
 let hideTimeout = null
 
 const middleware = computed(() => {
-  const mw = [
-    offsetMiddleware(props.offset),
-    flip(),
-    shift({ padding: 8 }),
-  ]
+  const mw = [offsetMiddleware(props.offset), flip(), shift({ padding: 8 })]
   if (props.showArrow) {
     mw.push(arrowMiddleware({ element: arrowRef, padding: 5 }))
   }
   return mw
 })
 
-const { floatingStyles, middlewareData, placement: actualPlacement } = useFloating(
-  referenceRef,
-  floatingRef,
-  {
-    placement: computed(() => props.placement),
-    middleware,
-    whileElementsMounted: autoUpdate,
-  },
-)
+const {
+  floatingStyles,
+  middlewareData,
+  placement: actualPlacement,
+} = useFloating(referenceRef, floatingRef, {
+  placement: computed(() => props.placement),
+  middleware,
+  whileElementsMounted: autoUpdate,
+})
 
 const arrowStyles = computed(() => {
   const data = middlewareData.value?.arrow
@@ -141,7 +133,7 @@ function show() {
   if (!props.content && !slots.content) return
 
   clearTimeout(hideTimeout)
-  const delay = typeof props.delay === 'number' ? props.delay : props.delay.show ?? 200
+  const delay = typeof props.delay === 'number' ? props.delay : (props.delay.show ?? 200)
   showTimeout = setTimeout(() => {
     isVisible.value = true
   }, delay)
@@ -149,7 +141,7 @@ function show() {
 
 function hide() {
   clearTimeout(showTimeout)
-  const delay = typeof props.delay === 'number' ? 0 : props.delay.hide ?? 0
+  const delay = typeof props.delay === 'number' ? 0 : (props.delay.hide ?? 0)
   hideTimeout = setTimeout(() => {
     isVisible.value = false
   }, delay)

package/src/components/plugins/SparkTableFilterButtons.vue

@@ -89,7 +89,11 @@ if (props.sparkTable.params[paramKey] !== undefined) {
 const isSelected = (value) => {
   // Handle null/undefined comparison
   if (value === null || value === undefined) {
-    return selectedValue.value === null || selectedValue.value === undefined || selectedValue.value === ''
+    return (
+      selectedValue.value === null ||
+      selectedValue.value === undefined ||
+      selectedValue.value === ''
+    )
   }
   return selectedValue.value === value
 }

package/src/components/plugins/SparkTableFilterSelect.vue

@@ -87,10 +87,7 @@ const label = props.config.label || null
 
 // Format options for FormKit - add empty option for "All"
 const selectOptions = computed(() => {
-  return [
-    { label: props.config.placeholder || 'All', value: '' },
-    ...props.config.options,
-  ]
+  return [{ label: props.config.placeholder || 'All', value: '' }, ...props.config.options]
 })
 
 // Watch selectedValue for changes and apply filter

package/src/components/plugins/SparkTableReset.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="spark-table-reset">
-    <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}"/>
-      <span v-if="config.label" >{{ config.label }}</span>
+    <SparkButton variant="secondary" button-class="px-3.5" size="xl" @click="handleReset">
+      <font-awesome-icon
+        v-if="config.icon"
+        :icon="['far', config.icon]"
+        :class="{ 'mr-1.5': config.label }"
+      />
+      <span v-if="config.label">{{ config.label }}</span>
     </SparkButton>
   </div>
 </template>
@@ -82,15 +81,16 @@ const handleReset = () => {
   const paramsToClear = []
   const paramsToReset = {}
 
-  Object.entries(plugins).forEach(([_, pluginConfig]) => {
+  Object.entries(plugins).forEach(([, pluginConfig]) => {
     if (!pluginConfig || pluginConfig.type === 'reset') {
       return
     }
 
     // Check if plugin is enabled (can be boolean or function)
-    const isEnabled = typeof pluginConfig.enabled === 'function'
-      ? pluginConfig.enabled(props.sparkTable.params)
-      : pluginConfig.enabled
+    const isEnabled =
+      typeof pluginConfig.enabled === 'function'
+        ? pluginConfig.enabled(props.sparkTable.params)
+        : pluginConfig.enabled
 
     if (!isEnabled) {
       return
@@ -119,14 +119,15 @@ const handleReset = () => {
   })
 
   // Check if any params actually need to be changed
-  const paramsToActuallyClear = paramsToClear.filter(param =>
-    props.sparkTable.params[param] !== undefined &&
-    props.sparkTable.params[param] !== null &&
-    props.sparkTable.params[param] !== ''
+  const paramsToActuallyClear = paramsToClear.filter(
+    (param) =>
+      props.sparkTable.params[param] !== undefined &&
+      props.sparkTable.params[param] !== null &&
+      props.sparkTable.params[param] !== '',
   )
 
-  const paramsToActuallyReset = Object.entries(paramsToReset).filter(([param, value]) =>
-    props.sparkTable.params[param] !== value
+  const paramsToActuallyReset = Object.entries(paramsToReset).filter(
+    ([param, value]) => props.sparkTable.params[param] !== value,
   )
 
   // If nothing to change, don't do anything
@@ -136,7 +137,8 @@ const handleReset = () => {
 
   // Build the new params object
   // First, clear all the params that should be cleared
-  paramsToActuallyClear.forEach(param => {
+  paramsToActuallyClear.forEach((param) => {
+    // eslint-disable-next-line vue/no-mutating-props -- sparkTable.params is a shared reactive object
     delete props.sparkTable.params[param]
   })
 

package/src/components/plugins/SparkTableSearch.vue

@@ -4,7 +4,7 @@
       v-model="searchValue"
       type="text"
       :placeholder="placeholder"
-      suffixIcon="search"
+      suffix-icon="search"
       outer-class="!mb-0"
       wrapper-class="!mb-0"
       input-class="!w-44 !pr-8"
@@ -74,7 +74,8 @@ if (props.sparkTable.params[paramKey]) {
   })
 }
 
-const clearSearch = () => {
+// eslint-disable-next-line no-unused-vars -- reserved for programmatic search reset
+const _clearSearch = () => {
   searchValue.value = ''
   props.sparkTable.methods.removeParam(paramKey)
 }

package/src/composables/index.js

@@ -12,4 +12,4 @@ export {
   getDirtyFormMessage,
   clearAllDirtyForms,
 } from './useFormDirtyGuard.js'
-export { useGooglePlaces } from './useGooglePlaces.js'
+export { useGooglePlaces } from './useGooglePlaces.js'