@wishbone-media/spark 0.25.0 → 0.26.0

package/formkit.config.js

@@ -1,5 +1,4 @@
-import { defaultConfig } from '@formkit/vue';
-import { genesisIcons } from '@formkit/icons';
+// Note: Consumer apps should wrap the returned config with defaultConfig()
 import { createAutoAnimatePlugin } from '@formkit/addons';
 import {
   createProPlugin,
@@ -15,6 +14,7 @@ import {
   togglebuttons,
 } from '@formkit/pro';
 import { rootClasses } from '@wishbone-media/spark/formkit.theme.mjs';
+import { formKitIcons, formKitIconLoader, formKitGenesisOverride } from '@wishbone-media/spark';
 
 const autoAnimatePlugin = createAutoAnimatePlugin(
   {
@@ -51,13 +51,16 @@ export default function createFormKitConfig(formKitProKey) {
     togglebuttons,
   });
 
-  return defaultConfig({
+  // Return plain config object - consumer apps wrap with defaultConfig()
+  return {
     config: {
       rootClasses
     },
     icons: {
-      ...genesisIcons
+      ...formKitGenesisOverride, // FontAwesome replacements for FormKit's built-in icons
+      ...formKitIcons,           // Additional FA icons available via prefix-icon/suffix-icon
     },
+    iconLoader: formKitIconLoader,
     plugins: [proPlugin, autoAnimatePlugin]
-  });
+  };
 }

package/package.json

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

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'