@wishbone-media/spark 0.22.0 → 0.23.1

package/package.json

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

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

@@ -9,14 +9,6 @@
   --ht-header-highlighted-background-color: transparent;
 }
 
-.spark-table .handsontable td.current {
-  @apply relative;
-
-  &::before {
-    @apply absolute opacity-[0.14] content-[''] inset-0 bg-[var(--ht-cell-selection-background-color,#1a42e8)];
-  }
-}
-
 .spark-table .handsontable tr.ht__row_odd:hover td,
 .spark-table .handsontable tr.ht__row_even:hover td {
   @apply !bg-gray-100;

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

@@ -0,0 +1,71 @@
+/**
+ * Spark Currency Renderer
+ *
+ * Formats numbers as Australian currency with dollar sign and comma separators.
+ *
+ * Usage:
+ * {
+ *   data: 'total',
+ *   renderer: 'spark.currency',
+ *   rendererConfig: {
+ *     decimals: 2,          // Decimal places (default: 2)
+ *     emptyText: '-',       // Text for null/empty values (default: '')
+ *   }
+ * }
+ *
+ * Examples:
+ * - 1234.5    → "$1,234.50"
+ * - 1000000   → "$1,000,000.00"
+ * - -500      → "-$500.00"
+ * - null      → ""
+ */
+
+/**
+ * Format a number as Australian currency
+ * @param {number} value
+ * @param {number} decimals
+ * @returns {string}
+ */
+const formatCurrency = (value, decimals = 2) => {
+  const num = Number(value)
+  if (isNaN(num)) return null
+
+  const isNegative = num < 0
+  const absValue = Math.abs(num)
+
+  // Format with commas and decimals
+  const formatted = absValue.toLocaleString('en-AU', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  })
+
+  // Add dollar sign (after negative sign if negative)
+  return isNegative ? `-$${formatted}` : `$${formatted}`
+}
+
+export const currencyRenderer = (sparkTable) => {
+  return (instance, td, row, col, prop, value, cellProperties) => {
+    td.innerHTML = ''
+    td.classList.add('spark-table-cell-currency')
+
+    const config = cellProperties.rendererConfig || {}
+    const { decimals = 2, emptyText = '' } = config
+
+    // Handle null/empty values
+    if (value === null || value === undefined || value === '') {
+      td.textContent = emptyText
+      return
+    }
+
+    const formatted = formatCurrency(value, decimals)
+
+    if (formatted === null) {
+      td.textContent = emptyText
+      return
+    }
+
+    const span = document.createElement('span')
+    span.textContent = formatted
+    td.appendChild(span)
+  }
+}

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

@@ -2,6 +2,7 @@ import { baseRenderer, registerRenderer } from 'handsontable/renderers'
 import { actionsRenderer } from './actions.js'
 import { badgeRenderer } from './badge.js'
 import { booleanRenderer } from './boolean.js'
+import { currencyRenderer } from './currency.js'
 import { linkRenderer } from './link.js'
 import { imageRenderer } from './image.js'
 import { dateRenderer } from './date.js'
@@ -53,9 +54,11 @@ export const getRenderer = (key) => {
  * - spark.actions: Inline action buttons
  * - spark.badge: Colored status badges
  * - spark.boolean: Boolean indicators with check/times icons
+ * - spark.currency: Australian currency formatting
  * - spark.link: Clickable links (email, phone, custom)
  * - spark.image: Image thumbnails
  * - spark.date: Formatted dates
+ * - spark.datetime: Advanced datetime formatting with timezone support
  * - style.capitalize: Legacy renderer for text capitalization
  *
  * @param {Object} sparkTable - SparkTable instance
@@ -65,6 +68,7 @@ export const registerSparkRenderers = (sparkTable) => {
   register('spark.actions', actionsRenderer(sparkTable))
   register('spark.badge', badgeRenderer(sparkTable))
   register('spark.boolean', booleanRenderer(sparkTable))
+  register('spark.currency', currencyRenderer(sparkTable))
   register('spark.link', linkRenderer(sparkTable))
   register('spark.image', imageRenderer(sparkTable))
   register('spark.date', dateRenderer(sparkTable))