@wishbone-media/spark 0.24.0 → 0.26.0

package/package.json

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

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

@@ -9,7 +9,7 @@
   --ht-header-highlighted-background-color: transparent;
 }
 
-.spark-table .handsontable td.current {
+.spark-table .handsontable td.current:not(.spark-table-cell-actions) {
   @apply relative;
 
   &::before {

package/src/components/SparkButton.vue

@@ -93,23 +93,23 @@ const computedButtonClass = computed(() => {
 
   switch (props.size) {
     case 'xs':
-      classes += ' px-2 py-1 text-xs'
+      classes += ' px-4 py-1 text-xs'
       roundingSize = 'sm'
       break
     case 'sm':
-      classes += ' px-2 py-1 text-sm'
+      classes += ' px-4 py-1 text-sm'
       roundingSize = 'sm'
       break
     case 'md':
-      classes += ' px-2.5 py-1.5 text-sm'
+      classes += ' px-5 py-1.5 text-sm'
       roundingSize = 'md'
       break
     case 'lg':
-      classes += ' px-3 py-2 text-sm'
+      classes += ' px-6 py-2 text-sm'
       roundingSize = 'md'
       break
     case 'xl':
-      classes += ' px-3.5 py-2.5 min-h-[42px] text-sm'
+      classes += ' px-7 py-2.5 min-h-[42px] text-sm'
       roundingSize = 'md'
       break
   }

package/src/components/SparkCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="divide-y divide-gray-300 rounded-lg border border-gray-300 text-gray-700 bg-gray-100">
-    <div v-if="$slots.header" class="p-5">
+    <div v-if="$slots.header" class="px-[30px] py-5">
       <slot name="header" />
     </div>
 

package/src/components/plugins/SparkTableFilterButtons.vue

@@ -6,6 +6,7 @@
         v-for="option in config.options"
         :key="option.value"
         size="xl"
+        button-class="px-3.5"
         :variant="isSelected(option.value) ? 'primary' : 'secondary'"
         @click="handleSelect(option.value)"
       >

package/src/components/plugins/SparkTableReset.vue

@@ -3,6 +3,7 @@
     <SparkButton
       @click="handleReset"
       variant="secondary"
+      button-class="px-3.5"
       size="xl"
     >
       <font-awesome-icon v-if="config.icon" :icon="['far', config.icon]" :class="{'mr-1.5': config.label}"/>

package/src/plugins/fontawesome.js

@@ -1,4 +1,4 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
+import { library, icon as faIconToSvg } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import {
@@ -43,6 +43,19 @@ import {
   faBolt,
   faCloudDownload,
   faInbox,
+  // Additional icons for FormKit genesis replacement
+  faPlus,
+  faArrowDown,
+  faArrowUp,
+  faCalendar,
+  faFile,
+  faCircle,
+  faCircleDot,
+  faSpinnerThird,
+  faStar,
+  faAnglesRight,
+  faAnglesLeft,
+  faEyeDropper,
 } from '@fortawesome/pro-regular-svg-icons'
 
 import {
@@ -97,6 +110,82 @@ export const Icons = {
   fadSort: faSortDuotone,
   fadSortDown: faSortDownDuotone,
   fadSortUp: faSortUpDuotone,
+
+  // Additional icons for FormKit genesis replacement
+  farPlus: faPlus,
+  farArrowDown: faArrowDown,
+  farArrowUp: faArrowUp,
+  farCalendar: faCalendar,
+  farFile: faFile,
+  farCircle: faCircle,
+  farSpinner: faSpinnerThird,
+  farStar: faStar,
+  farAnglesRight: faAnglesRight,
+  farAnglesLeft: faAnglesLeft,
+  farEyeDropper: faEyeDropper,
+  farCircleDot: faCircleDot,
+}
+
+/**
+ * Icons converted to SVG strings for FormKit's icon system.
+ * Use with FormKit's prefix-icon/suffix-icon props: prefix-icon="farCheck"
+ * These are registered in formkit.config.js and preloaded at app initialization.
+ */
+export const formKitIcons = Object.fromEntries(
+  Object.entries(Icons).map(([key, iconDef]) => {
+    const result = faIconToSvg(iconDef)
+    return [key, result?.html?.[0] || '']
+  })
+)
+
+/**
+ * FontAwesome replacements for FormKit's built-in genesis icons.
+ * These override the default icons used by FormKit components (datepicker, select, etc.)
+ * Keys match the genesis icon names so FormKit uses these instead.
+ */
+const genesisIconMapping = {
+  add: faPlus,
+  arrowDown: faArrowDown,
+  arrowUp: faArrowUp,
+  check: faCheck,
+  close: faXmark,
+  checkboxDecorator: faCheck,
+  date: faCalendar,
+  dragHandle: faGripDotsVertical,
+  fileItem: faFile,
+  fileRemove: faXmark,
+  noFiles: faFile,
+  radioDecorator: faCircleDot, // Circle with dot for radio indicator
+  select: faChevronDown,
+  spinner: faSpinnerThird,
+  star: faStar,
+  trash: faTrash,
+  fastForward: faAnglesRight,
+  right: faChevronRight,
+  left: faChevronLeft,
+  rewind: faAnglesLeft,
+  color: faEyeDropper,
+}
+
+export const formKitGenesisOverride = Object.fromEntries(
+  Object.entries(genesisIconMapping).map(([key, iconDef]) => {
+    const result = faIconToSvg(iconDef)
+    return [key, result?.html?.[0] || '']
+  })
+)
+
+/**
+ * FormKit iconLoader that looks up icons from the Icons object.
+ * This handles icons added by consumer apps via addIcons() after FormKit is configured.
+ * Called lazily by FormKit when an icon isn't found in the pre-registered registry.
+ */
+export function formKitIconLoader(iconName) {
+  const iconDef = Icons[iconName]
+  if (iconDef) {
+    const result = faIconToSvg(iconDef)
+    return Promise.resolve(result?.html?.[0] || undefined)
+  }
+  return Promise.resolve(undefined)
 }
 
 export function addIcons(newIcons) {

package/src/plugins/index.js

@@ -1,4 +1,4 @@
-export { Icons, addIcons, setupFontAwesome } from './fontawesome.js'
+export { Icons, addIcons, setupFontAwesome, formKitIcons, formKitIconLoader, formKitGenesisOverride } from './fontawesome.js'
 export { createAuthRoutes, setupAuthGuards, create403Route, create404Route, setupBootstrapGuard } from './router.js'
 export { createAxiosInstance, setupAxios, getAxiosInstance } from './axios.js'
 export { createBootstrapService } from './app-bootstrap.js'