@wishbone-media/spark 0.18.0 → 0.19.0

package/formkit.theme.mjs

@@ -344,7 +344,7 @@ const classes = {
     "flex": true,
     "items-center": true,
     "text-gray-700": true,
-    "z-200": true,
+    "z-1000": true,
     "dark:text-gray-300": true,
     "data-[disabled]:cursor-not-allowed": true
   },
@@ -356,7 +356,7 @@ const classes = {
     "items-center": true,
     "text-gray-700": true,
     "hover:text-red-400": true,
-    "z-200": true,
+    "z-1000": true,
     "dark:text-gray-300": true
   },
   "family:dropdown__controlLabel": {
@@ -1615,7 +1615,7 @@ const classes = {
     "mr-2.5": true,
     "text-gray-700": true,
     "hover:text-red-400": true,
-    "z-200": true,
+    "z-1000": true,
     "dark:text-gray-300": true
   },
   "datepicker__clearIcon": {
@@ -1631,7 +1631,7 @@ const classes = {
     "rounded-md": true,
     "p-5": true,
     "bg-white": true,
-    "z-200": true,
+    "z-1000": true,
     "dark:bg-gray-800": true,
     "[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:!fixed": true,
     "[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:top-auto": true,

package/package.json

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

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

@@ -1,3 +1,18 @@
+.ht-theme-classic,
+.ht-theme-classic-dark,
+.ht-theme-classic-dark-auto {
+  --ht-font-size: 12px;
+  --ht-line-height: 16px;
+  --ht-wrapper-border-width: 1px;
+  --ht-wrapper-border-radius: 6px;
+  --ht-wrapper-border-color: var(--color-gray-300);
+  --ht-header-highlighted-background-color: transparent;
+}
+
+.spark-table .ht_master .wtBorder {
+  @apply !hidden;
+}
+
 .spark-table-table {
   tbody {
     tr:nth-child(even) td {
@@ -30,17 +45,13 @@
     @apply cursor-pointer;
   }
 
-  &.ht__highlight .relative {
-    @apply bg-gray-200;
-  }
-
   &.ht__active_highlight .relative {
     @apply bg-blue-400 text-black;
   }
 
   & > .relative {
     @apply text-left text-xs font-semibold bg-gray-50 text-gray-800 whitespace-normal
-        tracking-wider focus:outline-hidden drop-shadow-sm filter flex items-center;
+        tracking-wider focus:outline-hidden filter flex items-center;
 
     @apply !px-5 !py-3;
 
@@ -73,7 +84,7 @@
   }
 
   .colHeader {
-    @apply leading-5;
+    @apply leading-4 text-gray-800;
   }
 }
 
@@ -97,3 +108,17 @@
 .spark-table-head-sorting {
   @apply absolute right-5 w-5 h-5 border border-gray-200 rounded-md grid place-items-center;
 }
+
+.spark-table-head-title-wrapper {
+  @apply h-full;
+}
+
+.spark-table-toolbar-header {
+  ::placeholder {
+    @apply text-gray-700;
+  }
+}
+
+.spark-table-toolbar-footer {
+  @apply min-h-15;
+}

package/src/components/SparkBrandSelector.vue

@@ -25,24 +25,24 @@
           class="flex px-[22px] py-[15px] cursor-pointer"
           @click="selectBrand(brand)"
         >
-          <div class="gap-y-1 flex">
-            <div class="flex items-center mr-4">
-              <img :src="brand.logo" :alt="`${brand.name} logo`" class="h-8 w-auto" />
-            </div>
-            <div class="ml-auto flex flex-col">
-              <div class="text-base text-gray-800 flex items-center">
-                <div class="font-medium">{{ brand.name }}</div>
+          <div class="w-full gap-y-1 flex justify-between">
+            <div class="flex flex-col">
+              <div class="flex items-center">
+                <div class="font-medium text-base text-gray-900">{{ brand.name }}</div>
                 <span
                   v-if="brand.current"
-                  class="inline-flex items-center rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700 ml-1"
+                  class="inline-flex items-center rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-800 ml-1"
                 >
                   Current
                 </span>
               </div>
-              <div class="text-sm text-gray-500">
+              <div class="text-sm text-gray-500 font-normal">
                 {{ brand.current ? 'Current Brand' : 'Change to' }}
               </div>
             </div>
+            <div class="flex items-center">
+              <img :src="brand.logo" :alt="`${brand.name} logo`" class="h-8 w-auto" />
+            </div>
           </div>
         </div>
         <div></div>

package/src/components/SparkModalContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :show="sparkModalService.state.isVisible">
-    <Dialog class="relative z-200" @close="sparkModalService.hide">
+    <Dialog class="relative z-1000" @close="sparkModalService.hide">
       <TransitionChild
           as="template"
           enter="ease-out duration-300"

package/src/components/SparkOverlay.vue

@@ -2,7 +2,7 @@
   <TransitionRoot :show="overlayInstance.state.isVisible" as="template">
     <Dialog
         :initialFocus="panelRef"
-        class="relative z-200"
+        class="relative z-1000"
         @close="handleClose"
     >
       <TransitionChild

package/src/components/SparkTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="spark-table">
     <!-- Header Toolbar: All plugins flow left to right -->
-    <spark-table-toolbar v-if="sparkTable.computed.ready" position="header">
+    <spark-table-toolbar v-if="sparkTable.computed.ready && headerPlugins && headerPlugins.length" position="header">
       <component
         v-for="plugin in headerPlugins"
         :key="plugin.name"
@@ -12,6 +12,7 @@
       />
       <slot name="header" :spark-table="sparkTable" :loading="loading" :error="error"></slot>
     </spark-table-toolbar>
+    <div v-else class="pt-5"></div>
 
     <!-- Table Grid -->
     <HotTable theme-name="ht-theme-classic" ref="table" :settings="sparkTable.tableSettings" />
@@ -38,8 +39,8 @@
 
 <script>
 const defaultOptions = {
-  perPages: [100, 200, 500],
-  limit: 100,
+  perPages: [15, 30, 50, 100, 200, 500],
+  limit: 15,
 }
 
 const defaultParams = {
@@ -60,7 +61,7 @@ const defaultTableSettings = {
 }
 </script>
 <script setup>
-import { computed, onMounted, ref, reactive, inject } from 'vue'
+import { computed, onMounted, onUnmounted, ref, reactive, inject, watch } from 'vue'
 import nprogress from 'nprogress'
 import { has, get, find } from 'lodash'
 import { HotTable } from '@handsontable/vue3'
@@ -78,6 +79,7 @@ import { watchDebounced } from '@vueuse/core'
 import { customiseHeader, syncSortClasses } from '@/utils/sparkTable/header.js'
 import { registerSparkRenderers } from '@/utils/sparkTable/renderers'
 import { updateRow } from '@/utils/sparkTable/update-row.js'
+import { useSparkTableRouteSync } from '@/composables/useSparkTableRouteSync.js'
 import SparkTablePaginationDetails from './SparkTablePaginationDetails.vue'
 import SparkTablePaginationPaging from './SparkTablePaginationPaging.vue'
 import SparkTablePaginationPerPage from './SparkTablePaginationPerPage.vue'
@@ -141,6 +143,16 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+
+  syncToRoute: {
+    type: [Boolean, String],
+    default: false,
+  },
+
+  persistToStorage: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 registerAllCellTypes()
@@ -155,6 +167,7 @@ const emit = defineEmits([
   'viewRow',
   'editRow',
   'deleteRow',
+  'downloadRow',
   'ready',
   'loading',
   'load',
@@ -168,6 +181,7 @@ const axios = inject('axios')
 const table = ref(null)
 const loading = ref(false)
 const error = ref(null)
+let isUnmounted = false
 
 // Plugin component mapping by type
 const pluginComponentsByType = {
@@ -178,16 +192,9 @@ const pluginComponentsByType = {
   reset: SparkTableReset,
 }
 
-// Header plugins: all enabled plugins flow left to right
-const headerPlugins = computed(() => {
-  return Object.entries(props.plugins)
-    .filter(([_, config]) => config && config.enabled)
-    .map(([name, config]) => ({ name, config }))
-})
-
 const sparkTable = reactive({
   hotInstance: null,
-  url: props.url,
+  url: computed(() => props.url),
   plugins: props.plugins,
   response: {},
   params: {
@@ -242,6 +249,9 @@ const sparkTable = reactive({
           return
         }
 
+        // Check if component was unmounted during async operation
+        if (isUnmounted) return
+
         sparkTable.hotInstance.updateData(sparkTable.response.data)
 
         if (sparkTable.options.callback && typeof sparkTable.options.callback === 'function') {
@@ -249,8 +259,15 @@ const sparkTable = reactive({
         }
 
         // @see: https://forum.handsontable.com/t/table-not-maintaning-width/3116/11
+        // Selectively recalculate column widths - skip columns with explicit width
         const autoColumnSize = sparkTable.hotInstance.getPlugin('autoColumnSize')
-        autoColumnSize.recalculateAllColumnsWidth()
+        const columns = get(props.settings, 'columns', [])
+
+        columns.forEach((column, index) => {
+          if (!column.width) {
+            autoColumnSize.calculateColumnsWidth(index, index, true)
+          }
+        })
 
         emit('load', {
           data: sparkTable.response.data,
@@ -325,11 +342,112 @@ const sparkTable = reactive({
       }),
       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
+      },
     },
     ...props.settings,
   })),
 })
 
+/**
+ * Get the param key for a plugin based on its type and configuration
+ */
+const getPluginParamKey = (pluginConfig) => {
+  if (!pluginConfig) return null
+
+  switch (pluginConfig.type) {
+    case 'search':
+      return pluginConfig.param || 'search'
+    case 'filterSelect':
+    case 'filterButtons':
+    case 'datePicker':
+      return pluginConfig.param || `filter[${pluginConfig.key}]`
+    default:
+      return null
+  }
+}
+
+/**
+ * Check if a plugin is currently enabled
+ */
+const isPluginEnabled = (pluginConfig) => {
+  if (!pluginConfig) return false
+  return typeof pluginConfig.enabled === 'function'
+    ? pluginConfig.enabled(sparkTable.params)
+    : pluginConfig.enabled
+}
+
+// Header plugins: all enabled plugins flow left to right
+// `enabled` can be a boolean or a function that receives current params
+const headerPlugins = computed(() => {
+  return Object.entries(props.plugins)
+    .filter(([_, config]) => isPluginEnabled(config))
+    .map(([name, config]) => ({ name, config }))
+})
+
+// Get all plugin param keys (regardless of enabled state)
+const getAllPluginParamKeys = () => {
+  const keys = []
+  Object.values(props.plugins).forEach((config) => {
+    const paramKey = getPluginParamKey(config)
+    if (paramKey) keys.push(paramKey)
+  })
+  return keys
+}
+
+// Watch sparkTable.params for changes and clear params of disabled plugins
+// Uses flush: 'sync' to run synchronously before other watchers (like the debounced loadTable)
+watch(
+  () => ({ ...sparkTable.params }),
+  () => {
+    // Check each plugin - if it's disabled but has a param value, remove it
+    const paramsToRemove = []
+
+    Object.values(props.plugins).forEach((config) => {
+      const paramKey = getPluginParamKey(config)
+      if (!paramKey) return
+
+      const isEnabled = isPluginEnabled(config)
+      const hasValue = sparkTable.params[paramKey] !== undefined
+
+      if (!isEnabled && hasValue) {
+        paramsToRemove.push(paramKey)
+      }
+    })
+
+    // Clear disabled plugin params synchronously before loadTable runs
+    if (paramsToRemove.length > 0) {
+      paramsToRemove.forEach((paramKey) => {
+        delete sparkTable.params[paramKey]
+      })
+    }
+  },
+  { deep: true, flush: 'sync' }
+)
+
+// Setup route sync and/or storage persistence if enabled
+if (props.syncToRoute || props.persistToStorage) {
+  // If syncToRoute is a string, use it as namespace (for multi-table pages)
+  // If syncToRoute is true (boolean), use null for flat URLs
+  const hasExplicitNamespace = typeof props.syncToRoute === 'string'
+  useSparkTableRouteSync(sparkTable, {
+    namespace: hasExplicitNamespace ? props.syncToRoute : null,
+    syncToRoute: !!props.syncToRoute,
+    persistToStorage: props.persistToStorage,
+  })
+}
+
 watchDebounced(
   () => props.params,
   async () => {
@@ -346,11 +464,25 @@ watchDebounced(
   { debounce: 50, maxWait: 1000 },
 )
 
+watch(
+    () => props.url,
+    async (newUrl, oldUrl) => {
+      if (newUrl !== oldUrl) {
+        sparkTable.params.page = 1
+        await sparkTable.methods.loadTable()
+      }
+    }
+)
+
 onMounted(async () => {
   await sparkTable.methods.loadTable()
   emit('ready')
 })
 
+onUnmounted(() => {
+  isUnmounted = true
+})
+
 registerSparkRenderers(sparkTable)
 
 defineExpose({

package/src/components/SparkTablePaginationDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex items-center gap-4 px-4 py-3">
+    <div class="flex items-center gap-4 py-3">
       <div class="shrink-0">
         <div class="text-sm text-gray-700">
           Showing

package/src/components/SparkTableToolbar.vue

@@ -20,7 +20,7 @@ const slots = useSlots()
 const hasContent = computed(() => !!slots.default)
 
 const toolbarClass = computed(() => {
-  const baseClasses = 'spark-table-toolbar flex flex-wrap items-center gap-x-5 px-5 w-full'
+  const baseClasses = 'spark-table-toolbar flex flex-wrap items-center gap-x-5 w-full'
 
   // Footer has pagination details on left, controls on right
   if (props.position === 'footer') {

package/src/components/plugins/SparkTableFilterSelect.vue

@@ -105,11 +105,17 @@ watch(selectedValue, (newValue) => {
   }
 })
 
-// Watch for external param changes
+// Watch for external param changes (e.g., from route sync, reset button)
 watch(
   () => props.sparkTable.params[paramKey],
   (newValue) => {
-    if (!newValue && selectedValue.value) {
+    if (newValue !== undefined && newValue !== null && newValue !== '') {
+      // Param was set externally (e.g., restored from URL)
+      if (selectedValue.value !== newValue) {
+        selectedValue.value = newValue
+      }
+    } else if (selectedValue.value) {
+      // Param was cleared externally
       selectedValue.value = ''
     }
   },

package/src/components/plugins/SparkTableReset.vue

@@ -77,42 +77,71 @@ const handleReset = () => {
   // Get all plugin params from the plugins config
   const plugins = props.sparkTable.plugins || {}
 
-  // Collect all params to clear
+  // Collect params to clear and params to reset to initialValue
   const paramsToClear = []
+  const paramsToReset = {}
 
-  Object.entries(plugins).forEach(([name, pluginConfig]) => {
-    if (!pluginConfig || !pluginConfig.enabled || pluginConfig.type === 'reset') {
+  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
+
+    if (!isEnabled) {
       return
     }
 
     // Get the param key based on plugin type
+    let param = null
     if (pluginConfig.type === 'search') {
-      if (pluginConfig.param) {
-        paramsToClear.push(pluginConfig.param)
-      }
+      param = pluginConfig.param || 'search'
     } else if (pluginConfig.type === 'filterSelect' || pluginConfig.type === 'filterButtons') {
-      const param = pluginConfig.param || `filter[${pluginConfig.key}]`
-      paramsToClear.push(param)
+      param = pluginConfig.param || `filter[${pluginConfig.key}]`
     } else if (pluginConfig.type === 'datePicker') {
-      const param = pluginConfig.param || `filter[${pluginConfig.key}]`
+      param = pluginConfig.param || `filter[${pluginConfig.key}]`
+    }
+
+    if (!param) return
+
+    // Check if this plugin has an initialValue
+    if (pluginConfig.initialValue !== undefined && pluginConfig.initialValue !== null) {
+      // Reset to initialValue
+      paramsToReset[param] = pluginConfig.initialValue
+    } else {
+      // Clear the param
       paramsToClear.push(param)
     }
   })
 
-  // Check if any params actually exist and need to be cleared
+  // 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] !== ''
   )
 
-  // If nothing to clear, don't do anything
-  if (paramsToActuallyClear.length === 0) {
+  const paramsToActuallyReset = Object.entries(paramsToReset).filter(([param, value]) =>
+    props.sparkTable.params[param] !== value
+  )
+
+  // If nothing to change, don't do anything
+  if (paramsToActuallyClear.length === 0 && paramsToActuallyReset.length === 0) {
     return
   }
 
-  // Use the clearParams helper method to clear all params at once
-  props.sparkTable.methods.clearParams(paramsToActuallyClear)
+  // Build the new params object
+  // First, clear all the params that should be cleared
+  paramsToActuallyClear.forEach(param => {
+    delete props.sparkTable.params[param]
+  })
+
+  // Then apply the reset values and go to page 1
+  const resetParams = Object.fromEntries(paramsToActuallyReset)
+  props.sparkTable.methods.applyParams({ ...resetParams, page: 1 })
 }
 </script>
 

package/src/components/plugins/SparkTableSearch.vue

@@ -4,9 +4,10 @@
       v-model="searchValue"
       type="text"
       :placeholder="placeholder"
+      suffixIcon="search"
       outer-class="!mb-0"
       wrapper-class="!mb-0"
-      input-class="!w-64 !pr-8"
+      input-class="!w-44 !pr-8"
       v-bind="props.config.formkitProps || {}"
     />
   </div>
@@ -25,7 +26,7 @@
  *     enabled: true,
  *     placeholder: 'Search brands...',
  *     param: 'search',
- *     debounce: 300,
+ *     debounce: 400,
  *     position: 'header-left',
  *   },
  * }
@@ -54,7 +55,7 @@ const props = defineProps({
     default: () => ({
       placeholder: 'Search...',
       param: 'search',
-      debounce: 300,
+      debounce: 400,
     }),
   },
 })
@@ -97,11 +98,15 @@ watch(searchValue, (newValue) => {
 
 const placeholder = props.config.placeholder || 'Search...'
 
-// Watch for external param changes
+// Watch for external param changes (e.g., from route sync, reset button)
 watch(
   () => props.sparkTable.params[paramKey],
   (newValue) => {
-    if (!newValue && searchValue.value) {
+    if (newValue && newValue !== searchValue.value) {
+      // Param was set externally (e.g., restored from URL)
+      searchValue.value = newValue
+    } else if (!newValue && searchValue.value) {
+      // Param was cleared externally
       searchValue.value = ''
     }
   },

package/src/composables/index.js

@@ -1,3 +1,4 @@
 export { sparkModalService } from './sparkModalService.js'
 export { sparkOverlayService } from './sparkOverlayService.js'
-export { useSparkOverlay } from './useSparkOverlay.js'
+export { useSparkOverlay } from './useSparkOverlay.js'
+export { useSparkTableRouteSync } from './useSparkTableRouteSync.js'