@wishbone-media/spark 0.45.0 → 0.46.0

package/formkit.config.js

@@ -1,5 +1,5 @@
 // Note: Consumer apps should wrap the returned config with defaultConfig()
-import { createAutoAnimatePlugin } from '@formkit/addons';
+import { createAutoAnimatePlugin } from '@formkit/addons'
 import {
   createProPlugin,
   autocomplete,
@@ -12,9 +12,14 @@ import {
   taglist,
   toggle,
   togglebuttons,
-} from '@formkit/pro';
-import { rootClasses } from '@wishbone-media/spark/formkit.theme.mjs';
-import { formKitIcons, formKitIconLoader, formKitGenesisOverride } from '@wishbone-media/spark';
+} from '@formkit/pro'
+import { rootClasses } from '@wishbone-media/spark/formkit.theme.mjs'
+import {
+  formKitIcons,
+  formKitIconLoader,
+  formKitGenesisOverride,
+  createPasswordTogglePlugin,
+} from '@wishbone-media/spark'
 
 const autoAnimatePlugin = createAutoAnimatePlugin(
   {
@@ -22,20 +27,22 @@ const autoAnimatePlugin = createAutoAnimatePlugin(
     // default:
     duration: 250,
     easing: 'ease-in-out',
-    delay: 0
+    delay: 0,
   },
   {
     /* optional animation targets object */
     // default:
     global: ['outer', 'inner'],
     form: ['form'],
-    repeater: ['items']
-  }
-);
+    repeater: ['items'],
+  },
+)
 
 export default function createFormKitConfig(formKitProKey) {
   if (!formKitProKey) {
-    throw new Error('FormKit Pro key is required. Please provide VITE_FORMKIT_PRO_KEY in your environment variables.');
+    throw new Error(
+      'FormKit Pro key is required. Please provide VITE_FORMKIT_PRO_KEY in your environment variables.',
+    )
   }
 
   const proPlugin = createProPlugin(formKitProKey, {
@@ -49,18 +56,18 @@ export default function createFormKitConfig(formKitProKey) {
     taglist,
     toggle,
     togglebuttons,
-  });
+  })
 
   // Return plain config object - consumer apps wrap with defaultConfig()
   return {
     config: {
-      rootClasses
+      rootClasses,
     },
     icons: {
       ...formKitGenesisOverride, // FontAwesome replacements for FormKit's built-in icons
-      ...formKitIcons,           // Additional FA icons available via prefix-icon/suffix-icon
+      ...formKitIcons, // Additional FA icons available via prefix-icon/suffix-icon
     },
     iconLoader: formKitIconLoader,
-    plugins: [proPlugin, autoAnimatePlugin]
-  };
+    plugins: [proPlugin, autoAnimatePlugin, createPasswordTogglePlugin()],
+  }
 }

package/package.json

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

package/src/plugins/fontawesome.js

@@ -40,6 +40,8 @@ import {
   faXmark,
   faSignOut,
   faEye,
+  faEyeSlash,
+  faLock,
   faUndo,
   faBolt,
   faCloudDownload,
@@ -109,6 +111,8 @@ export const Icons = {
   farXmark: faXmark,
   farSignOut: faSignOut,
   farEye: faEye,
+  farEyeSlash: faEyeSlash,
+  farLock: faLock,
   farUndo: faUndo,
   farBolt: faBolt,
   farCloudDownload: faCloudDownload,

package/src/plugins/formkit-password.js

@@ -0,0 +1,56 @@
+function isTruthy(value) {
+  return value !== undefined && value !== false
+}
+
+function loadIcon(node, sectionKey, iconName) {
+  const iconHandler = node.props.iconHandler
+  if (!iconHandler) return
+
+  const rawProp = `_raw${sectionKey.charAt(0).toUpperCase()}${sectionKey.slice(1)}`
+  node.addProps([sectionKey, rawProp])
+
+  node.props[sectionKey] = iconName
+  const svg = iconHandler(iconName)
+  if (svg instanceof Promise) {
+    svg.then((s) => {
+      node.props[rawProp] = s
+    })
+  } else {
+    node.props[rawProp] = svg
+  }
+
+  node.on(`prop:${sectionKey}`, (event) => {
+    const newSvg = iconHandler(event.payload)
+    if (newSvg instanceof Promise) {
+      newSvg.then((s) => {
+        node.props[rawProp] = s
+      })
+    } else {
+      node.props[rawProp] = newSvg
+    }
+  })
+}
+
+export function createPasswordTogglePlugin() {
+  return function passwordTogglePlugin(node) {
+    if (node.props.type !== 'password') return
+
+    node.addProps(['toggleVisibility', 'showPrefixLock'])
+
+    if (isTruthy(node.props.toggleVisibility)) {
+      loadIcon(node, 'suffixIcon', 'farEyeSlash')
+      node.addProps(['onSuffixIconClick'])
+      node.props.onSuffixIconClick = (innerNode) => {
+        const el = document.getElementById(innerNode.props.id)
+        if (!el) return
+        const isHidden = el.type === 'password'
+        el.type = isHidden ? 'text' : 'password'
+        innerNode.props.suffixIcon = isHidden ? 'farEye' : 'farEyeSlash'
+      }
+    }
+
+    if (isTruthy(node.props.showPrefixLock)) {
+      loadIcon(node, 'prefixIcon', 'farLock')
+    }
+  }
+}

package/src/plugins/index.js

@@ -17,3 +17,4 @@ export {
 export { createAxiosInstance, setupAxios, getAxiosInstance } from './axios.js'
 export { createBootstrapService } from './app-bootstrap.js'
 export { setupTooltip } from './tooltip.js'
+export { createPasswordTogglePlugin } from './formkit-password.js'