@wishbone-media/spark 0.45.0 → 0.47.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.47.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

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

@@ -37,7 +37,8 @@
     }
 
     td {
-      @apply px-6 py-4 whitespace-nowrap text-gray-500 text-sm align-middle h-auto;
+      @apply whitespace-nowrap text-gray-500 text-sm align-middle h-auto;
+      padding: var(--spark-table-cell-py, 16px) var(--spark-table-cell-px, 24px);
       @apply !border-l-0 !border-r-0 !border-gray-200;
 
       &:not(.read-only) {
@@ -48,6 +49,10 @@
     td:not(:last-child) {
       @apply !border-r-0;
     }
+
+    td.spark-table-word-wrap {
+      @apply whitespace-normal break-words;
+    }
   }
 }
 
@@ -66,7 +71,7 @@
     @apply text-left text-xs font-semibold bg-gray-50 text-gray-800 whitespace-normal
         tracking-wider focus:outline-hidden filter flex items-center;
 
-    @apply !px-5 !py-3;
+    padding: var(--spark-table-header-py, 12px) var(--spark-table-header-px, 20px) !important;
 
     .fa-sort-up,
     .fa-sort-down {
@@ -119,7 +124,8 @@
 }
 
 .spark-table-head-sorting {
-  @apply absolute right-5 w-5 h-5 border border-gray-200 rounded-md grid place-items-center;
+  @apply absolute w-5 h-5 border border-gray-200 rounded-md grid place-items-center;
+  right: var(--spark-table-header-px, 20px);
 }
 
 .spark-table-head-title-wrapper {

package/src/components/SparkTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="spark-table">
+  <div class="spark-table" :style="spacingStyles">
     <!-- Header Toolbar: All plugins flow left to right -->
     <SparkTableToolbar
       v-if="sparkTable.computed.ready && headerPlugins && headerPlugins.length"
@@ -75,6 +75,12 @@ const defaultTableSettings = {
   readOnlyCellClassName: 'read-only',
   licenseKey: 'non-commercial-and-evaluation',
 }
+
+const spacingPresets = {
+  sm: { cellPx: 12, cellPy: 8, headerPx: 12, headerPy: 12 },
+  base: { cellPx: 24, cellPy: 16, headerPx: 20, headerPy: 12 },
+  lg: { cellPx: 32, cellPy: 20, headerPx: 24, headerPy: 16 },
+}
 </script>
 <script setup>
 import { computed, onMounted, onUnmounted, ref, reactive, inject, watch } from 'vue'
@@ -178,6 +184,23 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+
+  spacing: {
+    type: [String, Object],
+    default: null,
+  },
+})
+
+const spacingStyles = computed(() => {
+  if (!props.spacing) return {}
+  const values = typeof props.spacing === 'string' ? spacingPresets[props.spacing] : props.spacing
+  if (!values) return {}
+  const styles = {}
+  if (values.cellPx !== undefined) styles['--spark-table-cell-px'] = `${values.cellPx}px`
+  if (values.cellPy !== undefined) styles['--spark-table-cell-py'] = `${values.cellPy}px`
+  if (values.headerPx !== undefined) styles['--spark-table-header-px'] = `${values.headerPx}px`
+  if (values.headerPy !== undefined) styles['--spark-table-header-py'] = `${values.headerPy}px`
+  return styles
 })
 
 registerAllCellTypes()
@@ -356,40 +379,75 @@ const sparkTable = reactive({
     ...props.options,
   })),
 
-  tableSettings: computed(() => ({
-    ...defaultTableSettings,
-    nestedHeaders: get(props.settings, 'nestedHeaders', []),
-    ...(!get(props.settings, 'nestedHeaders') && {
-      afterGetColHeader: (col, th) => customiseHeader(col, th, sparkTable),
-    }),
-    afterChange: (changes, source) => updateRow(changes, source, sparkTable),
-    afterRender: () => syncSortClasses(sparkTable),
-    beforeStretchingColumnWidth: (stretchedWidth, column) => {
-      const columns = get(props.settings, 'columns', [])
-      const columnSettings = columns[column]
-      if (columnSettings && columnSettings.width !== undefined) {
-        return columnSettings.width
+  tableSettings: computed(() => {
+    const columns = get(props.settings, 'columns', [])
+
+    const transformedColumns = columns.map((col) => {
+      if (!col.wordWrap) return col
+      return {
+        ...col,
+        className: [col.className, 'spark-table-word-wrap'].filter(Boolean).join(' '),
       }
-      return stretchedWidth
-    },
-    beforeCopy: (data, coords) => {
-      const hot = table.value?.hotInstance
-      if (!hot) return
-      coords.forEach((range) => {
-        for (let row = range.startRow; row <= range.endRow; row++) {
-          for (let col = range.startCol; col <= range.endCol; col++) {
-            const td = hot.getCell(row, col)
-            if (td) {
-              const dataRow = row - coords[0].startRow
-              const dataCol = col - coords[0].startCol
-              data[dataRow][dataCol] = td.dataset.copyValue ?? td.textContent ?? ''
+    })
+
+    const hasClampedColumns = columns.some(
+      (col) => typeof col.wordWrap === 'object' && col.wordWrap?.maxLines,
+    )
+
+    const userAfterRenderer = props.settings.afterRenderer
+
+    return {
+      ...defaultTableSettings,
+      nestedHeaders: get(props.settings, 'nestedHeaders', []),
+      ...(!get(props.settings, 'nestedHeaders') && {
+        afterGetColHeader: (col, th) => customiseHeader(col, th, sparkTable),
+      }),
+      afterChange: (changes, source) => updateRow(changes, source, sparkTable),
+      afterRender: () => syncSortClasses(sparkTable),
+      beforeStretchingColumnWidth: (stretchedWidth, column) => {
+        const columnSettings = columns[column]
+        if (columnSettings && columnSettings.width !== undefined) {
+          return columnSettings.width
+        }
+        return stretchedWidth
+      },
+      beforeCopy: (data, coords) => {
+        const hot = table.value?.hotInstance
+        if (!hot) return
+        coords.forEach((range) => {
+          for (let row = range.startRow; row <= range.endRow; row++) {
+            for (let col = range.startCol; col <= range.endCol; col++) {
+              const td = hot.getCell(row, col)
+              if (td) {
+                const dataRow = row - coords[0].startRow
+                const dataCol = col - coords[0].startCol
+                data[dataRow][dataCol] = td.dataset.copyValue ?? td.textContent ?? ''
+              }
             }
           }
-        }
-      })
-    },
-    ...props.settings,
-  })),
+        })
+      },
+      ...props.settings,
+      columns: transformedColumns,
+      ...(hasClampedColumns && {
+        afterRenderer: (td, row, col) => {
+          userAfterRenderer?.(td, row, col)
+          const colConfig = columns[col]
+          const wordWrap = colConfig?.wordWrap
+          if (!wordWrap || wordWrap === true || !wordWrap.maxLines) return
+
+          const wrapper = document.createElement('div')
+          wrapper.style.display = '-webkit-box'
+          wrapper.style.webkitBoxOrient = 'vertical'
+          wrapper.style.webkitLineClamp = wordWrap.maxLines
+          wrapper.style.overflow = 'hidden'
+
+          while (td.firstChild) wrapper.appendChild(td.firstChild)
+          td.appendChild(wrapper)
+        },
+      }),
+    }
+  }),
 })
 
 // Empty state detection - true when data has loaded but contains no records

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'