@wishbone-media/spark 0.19.0 → 0.21.0

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