Fix: row render styles

package.json

@@ -72,6 +72,7 @@
     "build:icons": "node ./tools/generate-sprite",
     "lint": "eslint ./src --ext .js || true",
     "test": "node --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
+    "test:watch": "node --watch --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
     "test:updateSnapshots": "node --experimental-test-snapshots --test-update-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
     "test:ci": "npm test --coverage",
     "start": "npm-run-all build:icons dev",
@@ -104,6 +105,7 @@
   "dependencies": {
     "@draggable/formeo-languages": "^3.1.3",
     "@draggable/i18n": "^1.0.7",
+    "@draggable/tooltip": "^1.2.1",
     "lodash": "^4.17.21",
     "sortablejs": "^1.15.3"
   },

src/lib/js/common/dom.js

@@ -94,11 +94,12 @@ class DOM {
       return
     }
 
-    const { className, options, ...elem } = this.processTagName(elemArg)
     const _this = this
+    const processed = ['children', 'content']
+    const { className, options, dataset, ...elem } = this.processTagName(elemArg)
+    processed.push('tag')
     let childType
     const { tag } = elem
-    const processed = ['children', 'content']
     let i
     const wrap = {
       attrs: {},
@@ -141,11 +142,9 @@ class DOM {
       boolean: () => null,
     }
 
-    processed.push('tag')
-
     // check for root className property
     if (className) {
-      elem.attrs = { ...elem.attrs, className }
+      elem.attrs = merge(elem.attrs, { className })
     }
 
     if (options) {
@@ -182,7 +181,10 @@ class DOM {
         const label = _this.label(elem)
 
         if (!elem.config.hideLabel) {
-          const wrapContent = [...(_this.labelAfter(elem) ? [element, label] : [label, element])]
+          const wrapContent = [label, element]
+          if (_this.labelAfter(elem)) {
+            wrapContent.reverse()
+          }
           wrap.children.push(wrapContent)
         }
       }
@@ -201,10 +203,10 @@ class DOM {
     }
 
     // Set the new element's dataset
-    if (elem.dataset) {
-      for (const data in elem.dataset) {
-        if (Object.hasOwn(elem.dataset, data)) {
-          element.dataset[data] = typeof elem.dataset[data] === 'function' ? elem.dataset[data]() : elem.dataset[data]
+    if (dataset) {
+      for (const data in dataset) {
+        if (Object.hasOwn(dataset, data)) {
+          element.dataset[data] = typeof dataset[data] === 'function' ? dataset[data]() : dataset[data]
         }
       }
       processed.push('dataset')
@@ -268,7 +270,7 @@ class DOM {
     const createSvgIconConfig = symbolId => ({
       tag: 'svg',
       attrs: {
-        className: `svg-icon ${symbolId}`,
+        className: ['svg-icon', symbolId],
       },
       children: [
         {
@@ -283,9 +285,10 @@ class DOM {
 
     this.iconSymbols = Array.from(iconSymbolNodes).reduce((acc, symbol) => {
       const name = symbol.id.replace(iconPrefix, '')
-      acc[name] = dom.create(createSvgIconConfig(symbol.id))
+      acc[name] = createSvgIconConfig(symbol.id)
       return acc
     }, {})
+    this.cachedIcons = {}
 
     return this.iconSymbols
   }
@@ -296,20 +299,33 @@ class DOM {
    *  - we don't need the perks of having icons be DOM objects at this stage
    *  - it forces the icon to be appended using innerHTML which helps svg render
    * @param  {String} name - icon name
+   * @param  {Function} config - dom element config object
    * @return {String} icon markup
    */
-  icon(name = null, classNames = []) {
+  icon(name, config) {
     if (!name) {
       return
     }
 
-    const icon = this.icons[name]
+    const cacheKey = `${name}?${new URLSearchParams(config).toString()}`
+
+    if (this.cachedIcons?.[cacheKey]) {
+      return this.cachedIcons[cacheKey]
+    }
+
+    const iconConfig = this.icons[name]
+
+    if (iconConfig) {
+      if (config) {
+        const mergedConfig = merge(iconConfig, config)
+
+        this.cachedIcons[cacheKey] = dom.create(mergedConfig).outerHTML
 
-    if (icon) {
-      const iconClone = icon.cloneNode(true)
-      iconClone.classList.add(...classNames)
+        return this.cachedIcons[cacheKey]
+      }
 
-      return iconClone.outerHTML
+      this.cachedIcons[cacheKey] = dom.create(iconConfig).outerHTML
+      return this.cachedIcons[cacheKey]
     }
 
     return iconFontTemplates[dom.options.iconFont]?.(name) || name
@@ -325,32 +341,36 @@ class DOM {
   processAttrs(elem, element, isPreview) {
     const { attrs = {} } = elem
 
-    if (!isPreview) {
-      if (!attrs.name && this.isInput(elem.tag)) {
-        element.setAttribute('name', uuid(elem))
-      }
+    if (!isPreview && !attrs.name && this.isInput(elem.tag)) {
+      element.setAttribute('name', uuid(elem))
     }
 
     // Set element attributes
     for (const attr of Object.keys(attrs)) {
       const name = h.safeAttrName(attr)
-      let value = attrs[attr] || ''
 
-      if (Array.isArray(value)) {
-        if (typeof value[0] === 'object') {
-          const selected = value.filter(t => t.selected === true)
-          value = selected.length ? selected[0].value : value[0].value
-        } else {
-          value = value.join(' ')
-        }
-      }
+      const value = this.processAttrValue(attrs[attr])
 
       if (value) {
         element.setAttribute(name, value === true ? '' : value)
       }
     }
   }
 
+  processAttrValue(valueArg) {
+    let value = valueArg || ''
+    if (Array.isArray(value)) {
+      if (typeof value[0] === 'object') {
+        const selected = value.filter(t => t.selected === true)
+        value = selected.length ? selected[0].value : value[0].value
+      } else {
+        value = value.join(' ')
+      }
+    }
+
+    return value
+  }
+
   /**
    * Hide or show an Array or HTMLCollection of elements
    * @param  {Array} elems

src/lib/js/common/events.js

@@ -9,6 +9,7 @@ import {
   EVENT_FORMEO_SAVED,
   EVENT_FORMEO_CLEARED,
   ANIMATION_SPEED_FAST,
+  ANIMATION_SPEED_BASE,
 } from '../constants.js'
 import components, { Columns, Controls } from '../components/index.js'
 import { throttle } from './utils/index.mjs'
@@ -21,12 +22,12 @@ const defaults = {
   bubbles: true, // bubble events from components
   formeoLoaded: evt => {},
   onAdd: () => {},
-  onUpdate: evt => events.opts.debug && console.log(evt),
-  onUpdateStage: evt => events.opts.debug && console.log(evt),
-  onUpdateRow: evt => events.opts.debug && console.log(evt),
-  onUpdateColumn: evt => events.opts.debug && console.log(evt),
-  onUpdateField: evt => events.opts.debug && console.log(evt),
-  onRender: evt => events.opts.debug && console.log(evt),
+  onUpdate: evt => events.opts?.debug && console.log(evt),
+  onUpdateStage: evt => events.opts?.debug && console.log(evt),
+  onUpdateRow: evt => events.opts?.debug && console.log(evt),
+  onUpdateColumn: evt => events.opts?.debug && console.log(evt),
+  onUpdateField: evt => events.opts?.debug && console.log(evt),
+  onRender: evt => events.opts?.debug && console.log(evt),
   onSave: evt => {},
   confirmClearAll: evt => {
     if (window.confirm(evt.confirmationMessage)) {
@@ -38,7 +39,7 @@ const defaults = {
 const defaultCustomEvent = ({ src, ...evtData }, type = EVENT_FORMEO_UPDATED) => {
   const evt = new window.CustomEvent(type, {
     detail: evtData,
-    bubbles: events.opts.debug || events.opts.bubbles,
+    bubbles: events.opts?.debug || events.opts?.bubbles,
   })
   evt.data = (src || document).dispatchEvent(evt)
   return evt
@@ -142,16 +143,16 @@ function onResizeWindow() {
     throttling ||
     window.requestAnimationFrame(() => {
       throttling = false
-      Object.values(Columns.data).forEach(column => {
+      for (const column of Object.values(Columns.data)) {
         column.dom.classList.add(NO_TRANSITION_CLASS_NAME)
         Controls.dom.classList.add(NO_TRANSITION_CLASS_NAME)
         Controls.panels.nav.refresh()
         column.refreshFieldPanels()
         throttle(() => {
           column.dom.classList.remove(NO_TRANSITION_CLASS_NAME)
           Controls.dom.classList.remove(NO_TRANSITION_CLASS_NAME)
-        }, 1000)
-      })
+        }, ANIMATION_SPEED_BASE)
+      }
     })
 }
 

src/lib/js/common/utils/index.mjs

@@ -4,6 +4,7 @@ import {
   COMPONENT_TYPE_CLASSNAMES_LOOKUP,
   CHILD_TYPE_MAP,
   ANIMATION_SPEED_SLOW,
+  ANIMATION_SPEED_BASE,
 } from '../../constants.js'
 import mergeWith from 'lodash/mergeWith.js'
 
@@ -102,16 +103,24 @@ export const uuid = elem => {
 
 /**
  * Merge one object with another.
- * This is expensive, use as little as possible.
+ * This can be expensive, use as little as possible.
  * @param  {Object} obj1
  * @param  {Object} obj2
  * @return {Object}      merged object
  */
-export const merge = (obj1, obj2, opts = Object.create(null)) => {
+export const merge = (obj1, obj2) => {
   const customizer = (objValue, srcValue) => {
     if (Array.isArray(objValue)) {
-      if (Array.isArray(srcValue)) {
-        return unique(opts.mergeArray ? objValue.concat(srcValue) : srcValue)
+      if (srcValue !== undefined && srcValue !== null) {
+        return unique(objValue.concat(srcValue))
+      }
+
+      return srcValue
+    }
+
+    if (Array.isArray(srcValue)) {
+      if (objValue !== undefined && objValue !== null) {
+        return unique(srcValue.concat(objValue))
       }
 
       return srcValue
@@ -289,10 +298,10 @@ export function throttle(callback, limit = ANIMATION_SPEED_SLOW) {
  * Creates a debounced function that delays invoking the provided function until after the specified delay.
  *
  * @param {Function} fn - The function to debounce.
- * @param {number} [delay=ANIMATION_SPEED_SLOW] - The number of milliseconds to delay invocation.
+ * @param {number} [delay=ANIMATION_SPEED_BASE] - The number of milliseconds to delay invocation.
  * @returns {Function} - A new debounced function.
  */
-export function debounce(fn, delay = ANIMATION_SPEED_SLOW) {
+export function debounce(fn, delay = ANIMATION_SPEED_BASE) {
   let timeoutID
   return function (...args) {
     if (timeoutID) {

src/lib/js/components/columns/column.js

@@ -41,8 +41,6 @@ export default class Column extends Component {
   constructor(columnData) {
     super('column', { ...DEFAULT_DATA(), ...columnData })
 
-    const _this = this
-
     const children = this.createChildWrap()
 
     this.dom = dom.create({
@@ -66,7 +64,7 @@ export default class Column extends Component {
     events.columnResized = new window.CustomEvent('columnResized', {
       detail: {
         column: this.dom,
-        instance: _this,
+        instance: this,
       },
     })
 

src/lib/js/components/component.js

@@ -27,7 +27,7 @@ export default class Component extends Data {
     this.config = Components[`${this.name}s`].config
     merge(this.config, data.config)
     this.dataPath = `${this.name}s.${this.id}.`
-    this.observer = new MutationObserver(this.mutationHandler)
+    this.observer = new window.MutationObserver(this.mutationHandler)
     this.render = render
   }
 
@@ -116,7 +116,7 @@ export default class Component extends Data {
     return {
       className: [`${this.name}-actions`, 'group-actions'],
       action: {
-        mouseenter: ({ target }) => {
+        mouseenter: () => {
           Components.stages.active.dom.classList.add(`active-hover-${this.name}`)
           this.dom.classList.add(...hoverClassnames)
         },
@@ -144,10 +144,10 @@ export default class Component extends Data {
       tag: 'span',
       className: ['component-tag', `${this.name}-tag`],
       children: [
-        (this.isColumn || this.isField) && dom.icon('component-corner', ['bottom-left']),
+        (this.isColumn || this.isField) && dom.icon('component-corner', { className: 'bottom-left' }),
         dom.icon(`handle-${this.name}`),
         toTitleCase(this.name),
-        (this.isColumn || this.isRow) && dom.icon('component-corner', ['bottom-right']),
+        (this.isColumn || this.isRow) && dom.icon('component-corner', { className: 'bottom-right' }),
       ].filter(Boolean),
     })
   }

src/lib/js/components/controls/index.js

@@ -158,7 +158,7 @@ export class Controls {
   }
 
   get(controlId) {
-    return this.data.get(controlId)
+    return clone(this.data.get(controlId))
   }
 
   /**
@@ -355,6 +355,7 @@ export class Controls {
    */
   addElement = id => {
     const controlData = get(this.get(id), 'controlData')
+
     const {
       meta: { group, id: metaId },
     } = controlData

src/lib/js/components/fields/__snapshots__/field.test.js.snapshot

@@ -0,0 +1,27 @@
+exports[`Field > should have data property matching snapshot 1`] = `
+{
+  "conditions": [
+    {
+      "if": [
+        {
+          "source": "",
+          "sourceProperty": "",
+          "comparison": "",
+          "target": "",
+          "targetProperty": ""
+        }
+      ],
+      "then": [
+        {
+          "target": "",
+          "targetProperty": "",
+          "assignment": "",
+          "value": ""
+        }
+      ]
+    }
+  ],
+  "id": "test-id",
+  "config": {}
+}
+`;