@wishbone-media/spark 0.18.0 → 0.20.0

package/src/composables/sparkModalService.js

@@ -1,4 +1,5 @@
 import { reactive, markRaw } from 'vue'
+import SparkModalDialog from '@/components/SparkModalDialog.vue'
 
 class SparkModalService {
     constructor() {
@@ -21,6 +22,54 @@ class SparkModalService {
         this.state.isVisible = false
         this.state.eventHandlers = {}
     }
+
+    /**
+     * Show a confirmation dialog and return a Promise
+     *
+     * @param {Object} options - Confirmation options
+     * @param {string} [options.title='Confirm'] - Dialog title
+     * @param {string} [options.message='Are you sure?'] - Dialog message
+     * @param {string} [options.type='warning'] - Dialog type (info, success, warning, danger)
+     * @param {string} [options.confirmText='Confirm'] - Confirm button text
+     * @param {string} [options.cancelText='Cancel'] - Cancel button text
+     * @param {string} [options.confirmVariant='primary'] - Confirm button variant
+     * @returns {Promise<boolean>} - Resolves to true if confirmed, false if cancelled
+     */
+    confirm = (options = {}) => {
+        return new Promise((resolve) => {
+            const {
+                title = 'Confirm',
+                message = 'Are you sure?',
+                type = 'warning',
+                confirmText = 'Confirm',
+                cancelText = 'Cancel',
+                confirmVariant = 'primary',
+            } = options
+
+            this.show(
+                SparkModalDialog,
+                {
+                    title,
+                    message,
+                    type,
+                    buttons: [
+                        { text: confirmText, variant: confirmVariant, event: 'confirm' },
+                        { text: cancelText, variant: 'secondary', event: 'cancel' },
+                    ],
+                },
+                {
+                    confirm: () => {
+                        this.hide()
+                        resolve(true)
+                    },
+                    cancel: () => {
+                        this.hide()
+                        resolve(false)
+                    },
+                },
+            )
+        })
+    }
 }
 
 export const sparkModalService = new SparkModalService()

package/src/composables/useSparkTableRouteSync.js

@@ -0,0 +1,308 @@
+import { watch, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+/**
+ * Composable for syncing SparkTable params with URL query parameters and localStorage
+ *
+ * @param {Object} sparkTable - The sparkTable reactive object
+ * @param {Object} options - Configuration options
+ * @param {string|null} [options.namespace=null] - URL namespace for params. If null, uses flat URLs (?page=1). If string, uses namespaced URLs (?namespace[page]=1)
+ * @param {boolean} [options.syncToRoute=true] - Whether to sync params to URL
+ * @param {boolean} [options.persistToStorage=false] - Whether to persist params to localStorage
+ * @param {boolean} [options.restoreOnMount=true] - Whether to restore params on mount
+ * @param {number} [options.storageTTL=7] - Days to keep localStorage data (0 = no expiry)
+ * @returns {Object} Utility methods for manual control
+ *
+ * @example
+ * // Flat URL sync (clean URLs for single-table pages)
+ * useSparkTableRouteSync(sparkTable, { namespace: null })
+ * // Result: ?page=1&filter[status]=active
+ *
+ * @example
+ * // Namespaced URL sync (for multi-table pages)
+ * useSparkTableRouteSync(sparkTable, { namespace: 'users' })
+ * // Result: ?users[page]=1&users[filter[status]]=active
+ *
+ * @example
+ * // Both URL and localStorage (URL takes precedence)
+ * useSparkTableRouteSync(sparkTable, {
+ *   namespace: null,
+ *   syncToRoute: true,
+ *   persistToStorage: true
+ * })
+ */
+export const useSparkTableRouteSync = (sparkTable, options = {}) => {
+  const router = useRouter()
+  const route = useRoute()
+
+  const namespace = options.namespace // null = flat URLs, string = namespaced URLs
+  const useFlatUrls = namespace === null
+  const syncToRoute = options.syncToRoute !== false
+  const persistToStorage = options.persistToStorage === true
+  const restoreOnMount = options.restoreOnMount !== false
+  const storageTTL = options.storageTTL || 7 // days
+
+  // localStorage key: use namespace if provided, otherwise use route path
+  const storageKey = useFlatUrls ? `spark-table:${route.path}` : `spark-table:${namespace}`
+
+  /**
+   * Flatten nested params into query string format
+   * e.g., { filter: { role: 'admin' } } => { 'filter[role]': 'admin' }
+   */
+  const flattenParams = (params, prefix = '') => {
+    const flattened = {}
+
+    Object.keys(params).forEach((key) => {
+      const value = params[key]
+      const queryKey = prefix ? `${prefix}[${key}]` : key
+
+      if (value !== null && value !== undefined) {
+        if (typeof value === 'object' && !Array.isArray(value)) {
+          // Recursively flatten nested objects
+          Object.assign(flattened, flattenParams(value, queryKey))
+        } else {
+          flattened[queryKey] = String(value)
+        }
+      }
+    })
+
+    return flattened
+  }
+
+  /**
+   * Unflatten query params back to nested structure
+   * e.g., { 'filter[role]': 'admin' } => { filter: { role: 'admin' } }
+   */
+  const unflattenParams = (flatParams) => {
+    const unflattened = {}
+
+    Object.keys(flatParams).forEach((key) => {
+      const value = flatParams[key]
+
+      // Parse bracket notation: "filter[role]" => ["filter", "role"]
+      const matches = key.match(/([^\[]+)(?:\[([^\]]+)\])?/)
+      if (!matches) return
+
+      const [, rootKey, nestedKey] = matches
+
+      if (nestedKey) {
+        // Nested param
+        if (!unflattened[rootKey]) {
+          unflattened[rootKey] = {}
+        }
+        unflattened[rootKey][nestedKey] = value
+      } else {
+        // Top-level param
+        unflattened[rootKey] = value
+      }
+    })
+
+    return unflattened
+  }
+
+  /**
+   * Save params to localStorage with timestamp
+   */
+  const saveToStorage = () => {
+    if (!persistToStorage) return
+
+    try {
+      const data = {
+        params: sparkTable.params,
+        timestamp: Date.now(),
+      }
+      localStorage.setItem(storageKey, JSON.stringify(data))
+    } catch (error) {
+      console.warn('Failed to save table state to localStorage:', error)
+    }
+  }
+
+  /**
+   * Load params from localStorage (respecting TTL)
+   */
+  const loadFromStorage = () => {
+    if (!persistToStorage) return null
+
+    try {
+      const stored = localStorage.getItem(storageKey)
+      if (!stored) return null
+
+      const data = JSON.parse(stored)
+
+      // Check TTL if configured
+      if (storageTTL > 0) {
+        const age = Date.now() - data.timestamp
+        const maxAge = storageTTL * 24 * 60 * 60 * 1000 // days to ms
+
+        if (age > maxAge) {
+          // Expired, clear it
+          localStorage.removeItem(storageKey)
+          return null
+        }
+      }
+
+      return data.params
+    } catch (error) {
+      console.warn('Failed to load table state from localStorage:', error)
+      return null
+    }
+  }
+
+  /**
+   * Clear localStorage for this table
+   */
+  const clearStorage = () => {
+    try {
+      localStorage.removeItem(storageKey)
+    } catch (error) {
+      console.warn('Failed to clear table state from localStorage:', error)
+    }
+  }
+
+  /**
+   * Sync current sparkTable.params to route query
+   */
+  const syncParamsToRoute = () => {
+    if (!syncToRoute) return
+    const currentQuery = { ...route.query }
+
+    if (useFlatUrls) {
+      // Flat mode: remove ALL table-related params from current URL first
+      // This ensures params that were removed from sparkTable.params are also removed from URL
+      Object.keys(currentQuery).forEach((key) => {
+        if (isTableParam(key)) {
+          delete currentQuery[key]
+        }
+      })
+      // Then add back the current params
+      const flattenedParams = flattenParams(sparkTable.params)
+      Object.assign(currentQuery, flattenedParams)
+    } else {
+      // Namespaced mode: remove old namespace params
+      Object.keys(currentQuery).forEach((key) => {
+        if (key.startsWith(`${namespace}[`) || key === namespace) {
+          delete currentQuery[key]
+        }
+      })
+      // Flatten params with namespace prefix
+      const flattenedParams = flattenParams(sparkTable.params, namespace)
+      Object.assign(currentQuery, flattenedParams)
+    }
+
+    // Use replace to avoid polluting history
+    router.replace({ query: currentQuery })
+  }
+
+  /**
+   * Helper to identify if a query param belongs to SparkTable
+   */
+  const isTableParam = (key) => {
+    const tableParams = ['page', 'limit', 'search', 'orderBy', 'sortedBy']
+    if (tableParams.includes(key)) return true
+    if (key.includes('[')) return true // Any bracket notation is likely a filter
+    return false
+  }
+
+  /**
+   * Coerce URL query param values to their proper types
+   * URL params are always strings, but page/limit should be integers
+   */
+  const coerceParamValue = (key, value) => {
+    const numericParams = ['page', 'limit']
+    if (numericParams.includes(key) && value !== null && value !== undefined) {
+      const parsed = parseInt(value, 10)
+      return isNaN(parsed) ? value : parsed
+    }
+    return value
+  }
+
+  /**
+   * Restore params from route query to sparkTable
+   */
+  const restoreFromRoute = () => {
+    if (useFlatUrls) {
+      // Flat mode: read any query param that looks like a table param
+      Object.keys(route.query).forEach((key) => {
+        if (isTableParam(key)) {
+          sparkTable.params[key] = coerceParamValue(key, route.query[key])
+        }
+      })
+    } else {
+      // Namespaced mode: extract params with namespace prefix
+      const prefix = `${namespace}[`
+
+      Object.keys(route.query).forEach((key) => {
+        if (key.startsWith(prefix)) {
+          // Remove namespace prefix and trailing bracket
+          // e.g., "table[selectFilters[is_quote]]" => "selectFilters[is_quote]"
+          // e.g., "table[page]" => "page"
+          const paramKey = key.slice(prefix.length, -1)
+          sparkTable.params[paramKey] = coerceParamValue(paramKey, route.query[key])
+        }
+      })
+    }
+  }
+
+  // Watch sparkTable.params and sync to route/storage
+  watch(
+    () => sparkTable.params,
+    () => {
+      if (syncToRoute) {
+        syncParamsToRoute()
+      }
+      if (persistToStorage) {
+        saveToStorage()
+      }
+    },
+    { deep: true },
+  )
+
+  // Restore from route/storage on mount if enabled
+  // Priority: URL params > localStorage > defaults
+  if (restoreOnMount) {
+    onMounted(() => {
+      let hasUrlParams = false
+
+      // First, try to restore from URL
+      if (syncToRoute) {
+        let hasRelevantParams = false
+
+        if (useFlatUrls) {
+          // Flat mode: check if any query param looks like a table param
+          hasRelevantParams = Object.keys(route.query).some((key) => isTableParam(key))
+        } else {
+          // Namespaced mode: check for namespace prefix
+          const prefix = `${namespace}[`
+          hasRelevantParams = Object.keys(route.query).some((key) =>
+            key.startsWith(prefix)
+          )
+        }
+
+        if (hasRelevantParams) {
+          hasUrlParams = true
+          restoreFromRoute()
+        }
+      }
+
+      // If no URL params, try localStorage
+      if (!hasUrlParams && persistToStorage) {
+        const storedParams = loadFromStorage()
+        if (storedParams && Object.keys(storedParams).length > 0) {
+          // Coerce numeric params in case localStorage has string values from previous buggy saves
+          Object.keys(storedParams).forEach((key) => {
+            storedParams[key] = coerceParamValue(key, storedParams[key])
+          })
+          Object.assign(sparkTable.params, storedParams)
+        }
+      }
+    })
+  }
+
+  return {
+    syncToRoute: syncParamsToRoute,
+    restoreFromRoute,
+    saveToStorage,
+    loadFromStorage,
+    clearStorage,
+  }
+}

package/src/containers/SparkDefaultContainer.vue

@@ -117,7 +117,7 @@
 
           <slot name="header-center">
             <div
-              v-if="appStore.state.showBrandSelector"
+              v-if="showBrandSelector"
               class="absolute left-1/2 -translate-x-1/2 cursor-pointer h-9 flex items-center"
               @click="toggleBrandSelector"
             >
@@ -167,6 +167,7 @@
 
 <script setup>
 import { computed, h, useSlots } from 'vue'
+import { useRoute } from 'vue-router'
 import {
   SparkOverlay,
   SparkBrandSelector,
@@ -196,6 +197,7 @@ const props = defineProps({
 const emit = defineEmits(['overlayClose'])
 
 const slots = useSlots()
+const route = useRoute()
 
 const sparkBrandFilterStore = useSparkBrandFilterStore()
 const sparkAppSelectorStore = useSparkAppSelectorStore()
@@ -204,6 +206,14 @@ const appIcon = computed(() => {
   return sparkAppSelectorStore.getAppIcon(props.appStore.state.app)
 })
 
+const showBrandSelector = computed(() => {
+  // Route meta takes precedence, falls back to app store setting
+  if (route.meta.hideBrandSelector === true) {
+    return false
+  }
+  return props.appStore.state.showBrandSelector
+})
+
 const toggleAppSelector = () => {
   // Create component wrappers for slots if they exist
   const slotProps = {}

package/src/plugins/fontawesome.js

@@ -40,6 +40,8 @@ import {
   faSignOut,
   faEye,
   faUndo,
+  faBolt,
+  faCloudDownload,
 } from '@fortawesome/pro-regular-svg-icons'
 
 import {
@@ -87,6 +89,9 @@ export const Icons = {
   farSignOut: faSignOut,
   farEye: faEye,
   farUndo: faUndo,
+  farBolt: faBolt,
+  farCloudDownload: faCloudDownload,
+
   fadSort: faSortDuotone,
   fadSortDown: faSortDownDuotone,
   fadSortUp: faSortUpDuotone,

package/src/stores/app-selector.js

@@ -2,6 +2,12 @@ import { defineStore } from 'pinia'
 import { computed, reactive } from 'vue'
 
 const DEFAULT_APPS = [
+  {
+    name: 'Bolt',
+    description: 'Job management',
+    href: 'https://bolt-next.letsbolt.io',
+    icon: 'farBolt',
+  },
   {
     name: '3CX',
     description: 'VOIP Phone',
@@ -34,13 +40,13 @@ const DEFAULT_APPS = [
   },
   {
     name: 'ReVuze',
-    description: 'Get Customer feedback',
+    description: 'Get customer feedback',
     href: 'https://revuze-next.letsbolt.io',
     icon: 'farComments',
   },
   {
     name: 'Tabula',
-    description: 'Admin interface',
+    description: 'Admin interface template',
     href: 'https://tabula.letsbolt.io',
     icon: 'farCompass',
   },

package/src/stores/brand-filter.js

@@ -17,7 +17,7 @@ export const useSparkBrandFilterStore = defineStore(
 
     // Validate brand structure
     const validBrands = config.brands.filter((brand) => {
-      const isValid = brand.id && brand.name && brand.logo
+      const isValid = brand.name && brand.logo
       if (!isValid) {
         console.warn('useSparkBrandFilterStore: Invalid brand object', brand)
       }

package/src/stores/navigation.js

@@ -14,6 +14,7 @@ export const useSparkNavStore = defineStore('sparkNav', () => {
 
   const initialize = (menuConfig = []) => {
     state.menu = menuConfig
+    syncWithRoute()
   }
 
   const findMenuItemByRoute = (items, route) => {

package/src/utils/sparkTable/renderers/actions.js

@@ -1,4 +1,5 @@
 import { icon } from '@fortawesome/fontawesome-svg-core'
+import { sparkModalService } from '@/composables/sparkModalService'
 
 /**
  * Spark Actions Renderer
@@ -25,6 +26,16 @@ import { icon } from '@fortawesome/fontawesome-svg-core'
  *       {
  *         icon: 'download',
  *         handler: (row) => downloadFile(row.file_url)
+ *       },
+ *       {
+ *         icon: 'trash',
+ *         label: 'Delete',
+ *         event: 'deleteRow',
+ *         confirm: true,
+ *         confirmTitle: 'Delete Item',
+ *         confirmType: 'danger',
+ *         confirmText: 'Delete',
+ *         cancelText: 'Keep'
  *       }
  *     ]
  *   }
@@ -37,6 +48,11 @@ import { icon } from '@fortawesome/fontawesome-svg-core'
  * @property {string} [event] - Event name to emit (e.g., 'editRow')
  * @property {Function} [handler] - Custom handler function (row) => void
  * @property {boolean|string} [confirm] - Show confirmation dialog (true or custom message)
+ * @property {string} [confirmTitle] - Custom confirmation dialog title (default: 'Confirm')
+ * @property {string} [confirmType] - Confirmation dialog type: 'info', 'success', 'warning', 'danger' (default: 'warning')
+ * @property {string} [confirmText] - Confirm button text (default: 'Confirm')
+ * @property {string} [cancelText] - Cancel button text (default: 'Cancel')
+ * @property {string} [confirmVariant] - Confirm button variant (default: 'primary')
  * @property {Function} [condition] - Conditional visibility (row) => boolean
  */
 
@@ -89,7 +105,7 @@ export const actionsRenderer = (sparkTable) => {
       }
 
       // Add click handler
-      button.addEventListener('click', (e) => {
+      button.addEventListener('click', async (e) => {
         e.preventDefault()
         e.stopPropagation()
 
@@ -100,7 +116,16 @@ export const actionsRenderer = (sparkTable) => {
               ? action.confirm
               : `Are you sure you want to ${action.label?.toLowerCase() || 'perform this action'}?`
 
-          if (!window.confirm(confirmMessage)) {
+          const confirmed = await sparkModalService.confirm({
+            title: action.confirmTitle,
+            message: confirmMessage,
+            type: action.confirmType,
+            confirmText: action.confirmText,
+            cancelText: action.cancelText,
+            confirmVariant: action.confirmVariant,
+          })
+
+          if (!confirmed) {
             return
           }
         }

package/src/utils/sparkTable/renderers/boolean.js

@@ -0,0 +1,97 @@
+import { icon } from '@fortawesome/fontawesome-svg-core'
+
+/**
+ * Spark Boolean Renderer
+ *
+ * Renders boolean-like values as check/times icons in a circular container
+ *
+ * Truthy values: true, 1, '1', 'yes', 'true'
+ * Falsy values: false, 0, '0', 'no', 'false', null, undefined, ''
+ *
+ * Usage:
+ * {
+ *   data: 'is_active',
+ *   renderer: 'spark.boolean',
+ *   rendererConfig: {
+ *     trueIcon: 'check',    // Default: 'check'
+ *     falseIcon: 'xmark',   // Default: 'xmark'
+ *     trueColor: 'green',   // Default: 'green'
+ *     falseColor: 'red',    // Default: 'red'
+ *     size: 32,             // Default: 32 (px)
+ *     iconPrefix: 'far'     // Default: 'far' (solid)
+ *   }
+ * }
+ */
+
+const colorClasses = {
+  green: { bg: 'bg-green-100', text: 'text-green-500' },
+  red: { bg: 'bg-red-100', text: 'text-red-500' },
+  yellow: { bg: 'bg-yellow-100', text: 'text-yellow-500' },
+  blue: { bg: 'bg-blue-100', text: 'text-blue-500' },
+  gray: { bg: 'bg-gray-100', text: 'text-gray-500' },
+  purple: { bg: 'bg-purple-100', text: 'text-purple-500' },
+}
+
+/**
+ * Determines if a value is truthy in the context of boolean display
+ * @param {*} value - The value to check
+ * @returns {boolean}
+ */
+const isTruthy = (value) => {
+  if (value === null || value === undefined || value === '') {
+    return false
+  }
+  if (typeof value === 'boolean') {
+    return value
+  }
+  if (typeof value === 'number') {
+    return value === 1
+  }
+  if (typeof value === 'string') {
+    const normalized = value.toLowerCase().trim()
+    return normalized === '1' || normalized === 'yes' || normalized === 'true'
+  }
+  return false
+}
+
+export const booleanRenderer = (sparkTable) => {
+  return (instance, td, row, col, prop, value, cellProperties) => {
+    // Clear cell
+    td.innerHTML = ''
+    td.classList.add('spark-table-cell-boolean')
+
+    const config = cellProperties.rendererConfig || {}
+
+    const truthy = isTruthy(value)
+    const iconName = truthy ? (config.trueIcon || 'check') : (config.falseIcon || 'xmark')
+    const colorName = truthy ? (config.trueColor || 'green') : (config.falseColor || 'red')
+    const size = config.size || 32
+    const iconPrefix = config.iconPrefix || 'far'
+
+    const colors = colorClasses[colorName] || colorClasses.gray
+
+    // Create circular container
+    const container = document.createElement('div')
+    container.classList.add(
+      'inline-flex',
+      'items-center',
+      'justify-center',
+      'rounded-full',
+      colors.bg,
+      colors.text,
+    )
+    container.style.width = `${size}px`
+    container.style.height = `${size}px`
+
+    // Create icon
+    const iconElement = document.createElement('span')
+    iconElement.innerHTML = icon({ prefix: iconPrefix, iconName }).html
+    iconElement.classList.add('flex', 'items-center', 'justify-center')
+    // Icon size is roughly 50% of container
+    const iconSize = Math.round(size * 0.5)
+    iconElement.style.fontSize = `${iconSize}px`
+
+    container.appendChild(iconElement)
+    td.appendChild(container)
+  }
+}

package/src/utils/sparkTable/renderers/index.js

@@ -1,6 +1,7 @@
 import { baseRenderer, registerRenderer } from 'handsontable/renderers'
 import { actionsRenderer } from './actions.js'
 import { badgeRenderer } from './badge.js'
+import { booleanRenderer } from './boolean.js'
 import { linkRenderer } from './link.js'
 import { imageRenderer } from './image.js'
 import { dateRenderer } from './date.js'
@@ -50,6 +51,7 @@ export const getRenderer = (key) => {
  * Registers the following renderers:
  * - spark.actions: Inline action buttons
  * - spark.badge: Colored status badges
+ * - spark.boolean: Boolean indicators with check/times icons
  * - spark.link: Clickable links (email, phone, custom)
  * - spark.image: Image thumbnails
  * - spark.date: Formatted dates
@@ -61,6 +63,7 @@ export const registerSparkRenderers = (sparkTable) => {
   // Register Spark renderers
   register('spark.actions', actionsRenderer(sparkTable))
   register('spark.badge', badgeRenderer(sparkTable))
+  register('spark.boolean', booleanRenderer(sparkTable))
   register('spark.link', linkRenderer(sparkTable))
   register('spark.image', imageRenderer(sparkTable))
   register('spark.date', dateRenderer(sparkTable))