@wishbone-media/spark 0.19.0 → 0.20.0

package/package.json

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

package/src/assets/css/index.css

@@ -1,4 +1,5 @@
 @import './fonts.css';
+@import './nprogress.css';
 
 :root {
   font-family:

package/src/assets/css/nprogress.css

@@ -0,0 +1,6 @@
+@import 'nprogress/nprogress.css';
+
+#nprogress .bar {
+  @apply bg-primary-300 drop-shadow-md;
+  height: 2px;
+}

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

@@ -203,6 +203,19 @@ export const useSparkTableRouteSync = (sparkTable, options = {}) => {
     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
    */
@@ -211,7 +224,7 @@ export const useSparkTableRouteSync = (sparkTable, options = {}) => {
       // Flat mode: read any query param that looks like a table param
       Object.keys(route.query).forEach((key) => {
         if (isTableParam(key)) {
-          sparkTable.params[key] = route.query[key]
+          sparkTable.params[key] = coerceParamValue(key, route.query[key])
         }
       })
     } else {
@@ -224,7 +237,7 @@ export const useSparkTableRouteSync = (sparkTable, options = {}) => {
           // e.g., "table[selectFilters[is_quote]]" => "selectFilters[is_quote]"
           // e.g., "table[page]" => "page"
           const paramKey = key.slice(prefix.length, -1)
-          sparkTable.params[paramKey] = route.query[key]
+          sparkTable.params[paramKey] = coerceParamValue(paramKey, route.query[key])
         }
       })
     }
@@ -275,6 +288,10 @@ export const useSparkTableRouteSync = (sparkTable, options = {}) => {
       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)
         }
       }

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))