feat: onRemove and onAdd events

Author: kevinchappell

src/demo/js/options/config.js

@@ -22,6 +22,13 @@ const config = {
     },
   },
   fields: {
+    all: {
+      events: {
+        onRemove: evt => {
+          console.log(`You just removed the field with the id "${evt.target.id}"`, evt)
+        },
+      },
+    },
     checkbox: {
       actionButtons: {
         // buttons: ['edit'], // array of allow action buttons

src/lib/js/common/events.js

@@ -2,10 +2,16 @@ import components, { Columns, Controls } from '../components/index.js'
 import {
   ANIMATION_SPEED_BASE,
   ANIMATION_SPEED_FAST,
+  EVENT_FORMEO_ADDED_COLUMN,
+  EVENT_FORMEO_ADDED_FIELD,
+  EVENT_FORMEO_ADDED_ROW,
   EVENT_FORMEO_CHANGED,
   EVENT_FORMEO_CLEARED,
   EVENT_FORMEO_CONDITION_UPDATED,
   EVENT_FORMEO_ON_RENDER,
+  EVENT_FORMEO_REMOVED_COLUMN,
+  EVENT_FORMEO_REMOVED_FIELD,
+  EVENT_FORMEO_REMOVED_ROW,
   EVENT_FORMEO_SAVED,
   EVENT_FORMEO_UPDATED,
   EVENT_FORMEO_UPDATED_COLUMN,
@@ -33,6 +39,12 @@ const defaults = {
   onUpdateRow: evt => events.opts?.debug && console.log(evt),
   onUpdateColumn: evt => events.opts?.debug && console.log(evt),
   onUpdateField: evt => events.opts?.debug && console.log(evt),
+  onAddRow: evt => events.opts?.debug && console.log(evt),
+  onAddColumn: evt => events.opts?.debug && console.log(evt),
+  onAddField: evt => events.opts?.debug && console.log(evt),
+  onRemoveRow: evt => events.opts?.debug && console.log(evt),
+  onRemoveColumn: evt => events.opts?.debug && console.log(evt),
+  onRemoveField: evt => events.opts?.debug && console.log(evt),
   onRender: evt => events.opts?.debug && console.log(evt),
   onSave: _evt => {},
   confirmClearAll: evt => {
@@ -74,6 +86,12 @@ const events = {
   formeoCleared: evt => defaultCustomEvent(evt, EVENT_FORMEO_CLEARED),
   formeoOnRender: evt => defaultCustomEvent(evt, EVENT_FORMEO_ON_RENDER),
   formeoConditionUpdated: evt => defaultCustomEvent(evt, EVENT_FORMEO_CONDITION_UPDATED),
+  formeoAddedRow: evt => defaultCustomEvent(evt, EVENT_FORMEO_ADDED_ROW),
+  formeoAddedColumn: evt => defaultCustomEvent(evt, EVENT_FORMEO_ADDED_COLUMN),
+  formeoAddedField: evt => defaultCustomEvent(evt, EVENT_FORMEO_ADDED_FIELD),
+  formeoRemovedRow: evt => defaultCustomEvent(evt, EVENT_FORMEO_REMOVED_ROW),
+  formeoRemovedColumn: evt => defaultCustomEvent(evt, EVENT_FORMEO_REMOVED_COLUMN),
+  formeoRemovedField: evt => defaultCustomEvent(evt, EVENT_FORMEO_REMOVED_FIELD),
 }
 
 const formeoUpdatedThrottled = throttle(() => {
@@ -115,6 +133,42 @@ document.addEventListener(EVENT_FORMEO_UPDATED_FIELD, evt => {
   events.opts.onUpdateField(eventData)
 })
 
+document.addEventListener(EVENT_FORMEO_ADDED_ROW, evt => {
+  const { timeStamp, type, detail } = evt
+  const eventData = { timeStamp, type, detail }
+  events.opts.onAddRow(eventData)
+})
+
+document.addEventListener(EVENT_FORMEO_ADDED_COLUMN, evt => {
+  const { timeStamp, type, detail } = evt
+  const eventData = { timeStamp, type, detail }
+  events.opts.onAddColumn(eventData)
+})
+
+document.addEventListener(EVENT_FORMEO_ADDED_FIELD, evt => {
+  const { timeStamp, type, detail } = evt
+  const eventData = { timeStamp, type, detail }
+  events.opts.onAddField(eventData)
+})
+
+document.addEventListener(EVENT_FORMEO_REMOVED_ROW, evt => {
+  const { timeStamp, type, detail } = evt
+  const eventData = { timeStamp, type, detail }
+  events.opts.onRemoveRow(eventData)
+})
+
+document.addEventListener(EVENT_FORMEO_REMOVED_COLUMN, evt => {
+  const { timeStamp, type, detail } = evt
+  const eventData = { timeStamp, type, detail }
+  events.opts.onRemoveColumn(eventData)
+})
+
+document.addEventListener(EVENT_FORMEO_REMOVED_FIELD, evt => {
+  const { timeStamp, type, detail } = evt
+  const eventData = { timeStamp, type, detail }
+  events.opts.onRemoveField(eventData)
+})
+
 document.addEventListener(EVENT_FORMEO_ON_RENDER, evt => {
   const { timeStamp, type, detail } = evt
   events.opts.onRender({

src/lib/js/common/events.test.js

@@ -7,10 +7,16 @@ import { strict as assert } from 'node:assert'
 import { clear } from 'node:console'
 import { afterEach, beforeEach, describe, it, mock } from 'node:test'
 import {
+  EVENT_FORMEO_ADDED_COLUMN,
+  EVENT_FORMEO_ADDED_FIELD,
+  EVENT_FORMEO_ADDED_ROW,
   EVENT_FORMEO_CHANGED,
   EVENT_FORMEO_CLEARED,
   EVENT_FORMEO_CONDITION_UPDATED,
   EVENT_FORMEO_ON_RENDER,
+  EVENT_FORMEO_REMOVED_COLUMN,
+  EVENT_FORMEO_REMOVED_FIELD,
+  EVENT_FORMEO_REMOVED_ROW,
   EVENT_FORMEO_SAVED,
   EVENT_FORMEO_UPDATED,
   EVENT_FORMEO_UPDATED_COLUMN,
@@ -380,4 +386,170 @@ describe('Events System', () => {
       consoleSpy.mock.restore()
     })
   })
+
+  describe('Add events', () => {
+    it('should dispatch formeoAddedRow event', () => {
+      return new Promise(resolve => {
+        const testData = { componentId: 'row-123', componentType: 'row' }
+
+        addTestListener(EVENT_FORMEO_ADDED_ROW, evt => {
+          assert.ok(evt.type === EVENT_FORMEO_ADDED_ROW)
+          assert.deepEqual(evt.detail, testData)
+          resolve()
+        })
+
+        Events.formeoAddedRow(testData)
+      })
+    })
+
+    it('should dispatch formeoAddedColumn event', () => {
+      return new Promise(resolve => {
+        const testData = { componentId: 'column-123', componentType: 'column' }
+
+        addTestListener(EVENT_FORMEO_ADDED_COLUMN, evt => {
+          assert.ok(evt.type === EVENT_FORMEO_ADDED_COLUMN)
+          assert.deepEqual(evt.detail, testData)
+          resolve()
+        })
+
+        Events.formeoAddedColumn(testData)
+      })
+    })
+
+    it('should dispatch formeoAddedField event', () => {
+      return new Promise(resolve => {
+        const testData = { componentId: 'field-123', componentType: 'field' }
+
+        addTestListener(EVENT_FORMEO_ADDED_FIELD, evt => {
+          assert.ok(evt.type === EVENT_FORMEO_ADDED_FIELD)
+          assert.deepEqual(evt.detail, testData)
+          resolve()
+        })
+
+        Events.formeoAddedField(testData)
+      })
+    })
+
+    it('should call onAddRow callback for row additions', () => {
+      return new Promise(resolve => {
+        const onAddRow = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_ADDED_ROW)
+          resolve()
+        })
+
+        Events.init({ onAddRow })
+
+        Events.formeoAddedRow({ componentId: 'row-test' })
+      })
+    })
+
+    it('should call onAddColumn callback for column additions', () => {
+      return new Promise(resolve => {
+        const onAddColumn = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_ADDED_COLUMN)
+          resolve()
+        })
+
+        Events.init({ onAddColumn })
+
+        Events.formeoAddedColumn({ componentId: 'column-test' })
+      })
+    })
+
+    it('should call onAddField callback for field additions', () => {
+      return new Promise(resolve => {
+        const onAddField = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_ADDED_FIELD)
+          resolve()
+        })
+
+        Events.init({ onAddField })
+
+        Events.formeoAddedField({ componentId: 'field-test' })
+      })
+    })
+  })
+
+  describe('Remove events', () => {
+    it('should dispatch formeoRemovedRow event', () => {
+      return new Promise(resolve => {
+        const testData = { componentId: 'row-123', componentType: 'row' }
+
+        addTestListener(EVENT_FORMEO_REMOVED_ROW, evt => {
+          assert.ok(evt.type === EVENT_FORMEO_REMOVED_ROW)
+          assert.deepEqual(evt.detail, testData)
+          resolve()
+        })
+
+        Events.formeoRemovedRow(testData)
+      })
+    })
+
+    it('should dispatch formeoRemovedColumn event', () => {
+      return new Promise(resolve => {
+        const testData = { componentId: 'column-123', componentType: 'column' }
+
+        addTestListener(EVENT_FORMEO_REMOVED_COLUMN, evt => {
+          assert.ok(evt.type === EVENT_FORMEO_REMOVED_COLUMN)
+          assert.deepEqual(evt.detail, testData)
+          resolve()
+        })
+
+        Events.formeoRemovedColumn(testData)
+      })
+    })
+
+    it('should dispatch formeoRemovedField event', () => {
+      return new Promise(resolve => {
+        const testData = { componentId: 'field-123', componentType: 'field' }
+
+        addTestListener(EVENT_FORMEO_REMOVED_FIELD, evt => {
+          assert.ok(evt.type === EVENT_FORMEO_REMOVED_FIELD)
+          assert.deepEqual(evt.detail, testData)
+          resolve()
+        })
+
+        Events.formeoRemovedField(testData)
+      })
+    })
+
+    it('should call onRemoveRow callback for row removals', () => {
+      return new Promise(resolve => {
+        const onRemoveRow = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_REMOVED_ROW)
+          resolve()
+        })
+
+        Events.init({ onRemoveRow })
+
+        Events.formeoRemovedRow({ componentId: 'row-test' })
+      })
+    })
+
+    it('should call onRemoveColumn callback for column removals', () => {
+      return new Promise(resolve => {
+        const onRemoveColumn = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_REMOVED_COLUMN)
+          resolve()
+        })
+
+        Events.init({ onRemoveColumn })
+
+        Events.formeoRemovedColumn({ componentId: 'column-test' })
+      })
+    })
+
+    it('should call onRemoveField callback for field removals', () => {
+      return new Promise(resolve => {
+        const onRemoveField = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_REMOVED_FIELD)
+          resolve()
+        })
+
+        Events.init({ onRemoveField })
+
+        Events.formeoRemovedField({ componentId: 'field-test' })
+      })
+    })
+  })
 })

src/lib/js/components/component-data.js

@@ -1,5 +1,7 @@
+import events from '../common/events.js'
 import { clone, merge, parseData, uuid } from '../common/utils/index.mjs'
 import { get } from '../common/utils/object.mjs'
+import { EVENT_FORMEO_ADDED_COLUMN, EVENT_FORMEO_ADDED_FIELD, EVENT_FORMEO_ADDED_ROW } from '../constants.js'
 import Data from './data.js'
 
 export default class ComponentData extends Data {
@@ -34,6 +36,26 @@ export default class ComponentData extends Data {
     // this.set(elemId, component)
     this.active = component
 
+    // Dispatch add events based on component type
+    const componentEventMap = {
+      row: EVENT_FORMEO_ADDED_ROW,
+      column: EVENT_FORMEO_ADDED_COLUMN,
+      field: EVENT_FORMEO_ADDED_FIELD,
+    }
+
+    const addEvent = componentEventMap[this.name]
+    if (addEvent) {
+      events.formeoUpdated(
+        {
+          entity: component,
+          componentId: elemId,
+          componentType: this.name,
+          data: component.data,
+        },
+        addEvent
+      )
+    }
+
     return component
   }
 

src/lib/js/components/component.js

@@ -2,6 +2,7 @@
 
 import animate from '../common/animation.js'
 import dom from '../common/dom.js'
+import events from '../common/events.js'
 import { forEach, indexOfNode, isInt, map } from '../common/helpers.mjs'
 import { clone, componentType, identity, merge, remove, unique, uuid } from '../common/utils/index.mjs'
 import { get, objectFromStringArray, set } from '../common/utils/object.mjs'
@@ -13,6 +14,9 @@ import {
   COMPONENT_TYPE_CLASSNAMES,
   COMPONENT_TYPE_MAP,
   CONTROL_GROUP_CLASSNAME,
+  EVENT_FORMEO_REMOVED_COLUMN,
+  EVENT_FORMEO_REMOVED_FIELD,
+  EVENT_FORMEO_REMOVED_ROW,
   PARENT_TYPE_MAP,
   PROPERTY_OPTIONS,
 } from '../constants.js'
@@ -97,6 +101,7 @@ export default class Component extends Data {
     // Create event data with component context
     const fullEventData = {
       component: this,
+      target: this,
       type: eventName,
       timestamp: Date.now(),
       ...eventData,
@@ -202,6 +207,25 @@ export default class Component extends Data {
       parent.autoColumnWidths()
     }
 
+    // Dispatch remove events based on component type
+    const componentEventMap = {
+      row: EVENT_FORMEO_REMOVED_ROW,
+      column: EVENT_FORMEO_REMOVED_COLUMN,
+      field: EVENT_FORMEO_REMOVED_FIELD,
+    }
+
+    const removeEvent = componentEventMap[this.name]
+    if (removeEvent) {
+      events.formeoUpdated(
+        {
+          componentId: this.id,
+          componentType: this.name,
+          parent: parent,
+        },
+        removeEvent
+      )
+    }
+
     return Components[`${this.name}s`].delete(this.id)
   }
 

src/lib/js/constants.js

@@ -161,6 +161,12 @@ export const EVENT_FORMEO_UPDATED_FIELD = 'formeoUpdatedField'
 export const EVENT_FORMEO_CLEARED = 'formeoCleared'
 export const EVENT_FORMEO_ON_RENDER = 'formeoOnRender'
 export const EVENT_FORMEO_CONDITION_UPDATED = 'formeoConditionUpdated'
+export const EVENT_FORMEO_ADDED_ROW = 'formeoAddedRow'
+export const EVENT_FORMEO_ADDED_COLUMN = 'formeoAddedColumn'
+export const EVENT_FORMEO_ADDED_FIELD = 'formeoAddedField'
+export const EVENT_FORMEO_REMOVED_ROW = 'formeoRemovedRow'
+export const EVENT_FORMEO_REMOVED_COLUMN = 'formeoRemovedColumn'
+export const EVENT_FORMEO_REMOVED_FIELD = 'formeoRemovedField'
 export const COMPARISON_OPERATORS = {
   equals: '==',
   notEquals: '!=',