formeo 4.1.4 → 4.2.0

package/dist/demo/assets/js/formeo.umd.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.1.3
+Version: 4.1.4
 Author: Draggable https://draggable.io
 */
 
@@ -435,7 +435,7 @@ Author: Draggable https://draggable.io
     window.SmartTooltip = SmartTooltip;
   }
   const name$1 = "formeo";
-  const version$2 = "4.1.3";
+  const version$2 = "4.1.4";
   const pkg = {
     name: name$1,
     version: version$2
@@ -2283,6 +2283,7 @@ Author: Draggable https://draggable.io
   const ANIMATION_SPEED_SLOW = Math.round(ANIMATION_SPEED_BASE * 2);
   const EVENT_FORMEO_SAVED = "formeoSaved";
   const EVENT_FORMEO_UPDATED = "formeoUpdated";
+  const EVENT_FORMEO_CHANGED = "formeoChanged";
   const EVENT_FORMEO_UPDATED_STAGE = "formeoUpdatedStage";
   const EVENT_FORMEO_UPDATED_ROW = "formeoUpdatedRow";
   const EVENT_FORMEO_UPDATED_COLUMN = "formeoUpdatedColumn";
@@ -2290,6 +2291,12 @@ Author: Draggable https://draggable.io
   const EVENT_FORMEO_CLEARED = "formeoCleared";
   const EVENT_FORMEO_ON_RENDER = "formeoOnRender";
   const EVENT_FORMEO_CONDITION_UPDATED = "formeoConditionUpdated";
+  const EVENT_FORMEO_ADDED_ROW = "formeoAddedRow";
+  const EVENT_FORMEO_ADDED_COLUMN = "formeoAddedColumn";
+  const EVENT_FORMEO_ADDED_FIELD = "formeoAddedField";
+  const EVENT_FORMEO_REMOVED_ROW = "formeoRemovedRow";
+  const EVENT_FORMEO_REMOVED_COLUMN = "formeoRemovedColumn";
+  const EVENT_FORMEO_REMOVED_FIELD = "formeoRemovedField";
   const COMPARISON_OPERATORS = {
     equals: "==",
     notEquals: "!=",
@@ -3296,6 +3303,18 @@ Author: Draggable https://draggable.io
           evtData.previousValue = oldVal;
         }
         events.formeoUpdated(evtData);
+        if (this.name) {
+          const componentEventMap = {
+            stage: EVENT_FORMEO_UPDATED_STAGE,
+            row: EVENT_FORMEO_UPDATED_ROW,
+            column: EVENT_FORMEO_UPDATED_COLUMN,
+            field: EVENT_FORMEO_UPDATED_FIELD
+          };
+          const specificEvent = componentEventMap[this.name];
+          if (specificEvent) {
+            events.formeoUpdated(evtData, specificEvent);
+          }
+        }
       }
       return data;
     }
@@ -3365,6 +3384,23 @@ Author: Draggable https://draggable.io
       const component = this.Component({ ...data, id: elemId });
       this.data[elemId] = component;
       this.active = component;
+      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;
     };
     /**
@@ -7570,7 +7606,7 @@ Author: Draggable https://draggable.io
       };
       const editPanelButtons = [];
       if (type === "conditions") {
-        if (!mi18n.current.clearAll) {
+        if (mi18n.current && !mi18n.current.clearAll) {
           mi18n.put("clearAll", "Clear All");
         }
         const clearAllBtn = {
@@ -8064,6 +8100,7 @@ Author: Draggable https://draggable.io
     dispatchComponentEvent(eventName, eventData = {}) {
       const fullEventData = {
         component: this,
+        target: this,
         type: eventName,
         timestamp: Date.now(),
         ...eventData
@@ -8149,6 +8186,22 @@ Author: Draggable https://draggable.io
       if (parent.name === "row") {
         parent.autoColumnWidths();
       }
+      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
+          },
+          removeEvent
+        );
+      }
       return components[`${this.name}s`].delete(this.id);
     };
     /**
@@ -9445,7 +9498,7 @@ Author: Draggable https://draggable.io
     }
     onAdd(...args) {
       const component = super.onAdd(...args);
-      if (component && component.name === "column") {
+      if (component?.name === "column") {
         component.parent.autoColumnWidths();
       }
     }
@@ -10398,12 +10451,18 @@ Author: Draggable https://draggable.io
     },
     onAdd: () => {
     },
-    onChange: (...args) => defaults$1.onUpdate(...args),
+    onChange: (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),
+    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) => {
     },
@@ -10419,6 +10478,13 @@ Author: Draggable https://draggable.io
       bubbles: events.opts?.debug || events.opts?.bubbles
     });
     evt.data = (src || document).dispatchEvent(evt);
+    if (type === EVENT_FORMEO_UPDATED) {
+      const changedEvt = new window.CustomEvent(EVENT_FORMEO_CHANGED, {
+        detail: evtData,
+        bubbles: events.opts?.debug || events.opts?.bubbles
+      });
+      (src || document).dispatchEvent(changedEvt);
+    }
     return evt;
   };
   const events = {
@@ -10427,50 +10493,82 @@ Author: Draggable https://draggable.io
       return this;
     },
     formeoSaved: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_SAVED),
-    formeoUpdated: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_UPDATED),
+    formeoUpdated: (evt, eventType) => defaultCustomEvent(evt, eventType || EVENT_FORMEO_UPDATED),
     formeoCleared: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_CLEARED),
     formeoOnRender: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_ON_RENDER),
-    formeoConditionUpdated: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_CONDITION_UPDATED)
+    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$1(() => {
-    events.opts.onUpdate({
+    const eventData = {
       timeStamp: window.performance.now(),
       type: EVENT_FORMEO_UPDATED,
       detail: components.formData
-    });
+    };
+    events.opts.onUpdate(eventData);
+    if (events.opts.onChange !== events.opts.onUpdate) {
+      events.opts.onChange(eventData);
+    }
   }, ANIMATION_SPEED_FAST);
   document.addEventListener(EVENT_FORMEO_UPDATED, formeoUpdatedThrottled);
   document.addEventListener(EVENT_FORMEO_UPDATED_STAGE, (evt) => {
     const { timeStamp, type, detail } = evt;
-    events.opts.onUpdate({
-      timeStamp,
-      type,
-      detail
-    });
+    const eventData = { timeStamp, type, detail };
+    events.opts.onUpdate(eventData);
+    events.opts.onUpdateStage(eventData);
   });
   document.addEventListener(EVENT_FORMEO_UPDATED_ROW, (evt) => {
     const { timeStamp, type, detail } = evt;
-    events.opts.onUpdate({
-      timeStamp,
-      type,
-      detail
-    });
+    const eventData = { timeStamp, type, detail };
+    events.opts.onUpdate(eventData);
+    events.opts.onUpdateRow(eventData);
   });
   document.addEventListener(EVENT_FORMEO_UPDATED_COLUMN, (evt) => {
     const { timeStamp, type, detail } = evt;
-    events.opts.onUpdate({
-      timeStamp,
-      type,
-      detail
-    });
+    const eventData = { timeStamp, type, detail };
+    events.opts.onUpdate(eventData);
+    events.opts.onUpdateColumn(eventData);
   });
   document.addEventListener(EVENT_FORMEO_UPDATED_FIELD, (evt) => {
     const { timeStamp, type, detail } = evt;
-    events.opts.onUpdate({
-      timeStamp,
-      type,
-      detail
-    });
+    const eventData = { timeStamp, type, detail };
+    events.opts.onUpdate(eventData);
+    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;
@@ -10669,6 +10767,9 @@ Author: Draggable https://draggable.io
       this.userFormData = cleanFormData(data);
       this.load(this.userFormData, this.opts);
     }
+    loadData(data = {}) {
+      this.formData = data;
+    }
     get json() {
       return this.Components.json;
     }

package/dist/demo/assets/js/index.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.1.3
+Version: 4.1.4
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/index.min2.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.1.3
+Version: 4.1.4
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/index.min3.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.1.3
+Version: 4.1.4
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/mode-json.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.1.3
+Version: 4.1.4
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/theme-github_light_default.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.1.3
+Version: 4.1.4
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en" xml:lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vanilla Javascript form building module"><meta name="theme-color" content="#232323"><title>Formeo | Drag &amp; Drop Form Creation</title><script type="module" crossorigin src="/formeo/assets/js/demo.min.js"></script><link rel="stylesheet" crossorigin href="/formeo/assets/css/demo.min.css"></head><body><div class="site-wrap"><header id="demo-header"><div class="header-inner"><img id="formeo-logo" src="/formeo/assets/img/formeo-logo.svg" alt="Formeo Logo" width="100"><nav aria-label="Framework navigation"><ul><li><label for="framework-select">Framework:</label> <select name="framework-select" id="framework-select" class="form-control"><option value="vanilla">Vanilla JavaScript</option><option value="angular">Angular</option><option value="react">React</option></select></li><li><label for="locale">Language</label> <select name="locale" id="locale" class="form-control"><option value="af-ZA" dir="ltr">Afrikaans (Suid-Afrika)</option><option value="ar-TN" dir="rtl">العربية (تونس)</option><option value="cs-CZ" dir="ltr">čeština (Česko)</option><option value="de-DE" dir="ltr">Deutsch (Deutschland)</option><option value="en-US" dir="ltr">English</option><option value="es-ES" dir="ltr">español de España</option><option value="fa-IR" dir="rtl">فارسی (ایران)</option><option value="fi-FI" dir="ltr">suomi (Suomi)</option><option value="fr-FR" dir="ltr">français (France)</option><option value="he-IL" dir="rtl">עברית (ישראל)</option><option value="hi-IN" dir="ltr">हिन्दी (भारत)</option><option value="hu-HU" dir="ltr">magyar (Magyarország)</option><option value="it-IT" dir="ltr">italiano (Italia)</option><option value="ja-JP" dir="ltr">日本語 (日本)</option><option value="nb-NO" dir="ltr">norsk bokmål (Norge)</option><option value="pl-PL" dir="ltr">polski (Polska)</option><option value="pt-BR" dir="ltr">português (Brasil)</option><option value="pt-PT" dir="ltr">português europeu</option><option value="ro-RO" dir="ltr">română (România)</option><option value="ru-RU" dir="ltr">русский (Россия)</option><option value="th-TH" dir="ltr">ไทย (ไทย)</option><option value="tr-TR" dir="ltr">Türkçe (Türkiye)</option><option value="zh-CN" dir="ltr">中文（中国）</option><option value="zh-HK" dir="ltr">中文（中國香港特別行政區）</option></select></li><li><label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v4.1.3</li></ul></nav></div></header><section id="main_content" class="inner"><div id="framework-container"></div></section><div class="container render-btn-wrap" id="editor-action-buttons"></div><div id="formData-popover" popover><div class="popover-header"><h3>Test formData</h3><div><button type="button" id="format-json">Format</button> <button type="button" id="collapse-json">Collapse</button> <button type="button" id="copy-json">Copy to Clipboard</button></div></div><pre id="formData-editor"></pre><div class="formData-actions"><button popovertarget="formData-popover" popovertargetaction="hide" type="button">Cancel</button> <button id="submit-formData" type="button">Submit</button></div></div><footer id="demo-footer"><nav aria-label="Footer navigation"><ul><li><a href="https://github.com/Draggable/formeo" target="_blank" title="View project on GitHub"><img src="/formeo/assets/img/github.png" width="77" alt="GitHub"></a></li></ul></nav></footer></div></body></html>
+<!doctype html><html lang="en" xml:lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vanilla Javascript form building module"><meta name="theme-color" content="#232323"><title>Formeo | Drag &amp; Drop Form Creation</title><script type="module" crossorigin src="/formeo/assets/js/demo.min.js"></script><link rel="stylesheet" crossorigin href="/formeo/assets/css/demo.min.css"></head><body><div class="site-wrap"><header id="demo-header"><div class="header-inner"><img id="formeo-logo" src="/formeo/assets/img/formeo-logo.svg" alt="Formeo Logo" width="100"><nav aria-label="Framework navigation"><ul><li><label for="framework-select">Framework:</label> <select name="framework-select" id="framework-select" class="form-control"><option value="vanilla">Vanilla JavaScript</option><option value="angular">Angular</option><option value="react">React</option></select></li><li><label for="locale">Language</label> <select name="locale" id="locale" class="form-control"><option value="af-ZA" dir="ltr">Afrikaans (Suid-Afrika)</option><option value="ar-TN" dir="rtl">العربية (تونس)</option><option value="cs-CZ" dir="ltr">čeština (Česko)</option><option value="de-DE" dir="ltr">Deutsch (Deutschland)</option><option value="en-US" dir="ltr">English</option><option value="es-ES" dir="ltr">español de España</option><option value="fa-IR" dir="rtl">فارسی (ایران)</option><option value="fi-FI" dir="ltr">suomi (Suomi)</option><option value="fr-FR" dir="ltr">français (France)</option><option value="he-IL" dir="rtl">עברית (ישראל)</option><option value="hi-IN" dir="ltr">हिन्दी (भारत)</option><option value="hu-HU" dir="ltr">magyar (Magyarország)</option><option value="it-IT" dir="ltr">italiano (Italia)</option><option value="ja-JP" dir="ltr">日本語 (日本)</option><option value="nb-NO" dir="ltr">norsk bokmål (Norge)</option><option value="pl-PL" dir="ltr">polski (Polska)</option><option value="pt-BR" dir="ltr">português (Brasil)</option><option value="pt-PT" dir="ltr">português europeu</option><option value="ro-RO" dir="ltr">română (România)</option><option value="ru-RU" dir="ltr">русский (Россия)</option><option value="th-TH" dir="ltr">ไทย (ไทย)</option><option value="tr-TR" dir="ltr">Türkçe (Türkiye)</option><option value="zh-CN" dir="ltr">中文（中国）</option><option value="zh-HK" dir="ltr">中文（中國香港特別行政區）</option></select></li><li><label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v4.1.4</li></ul></nav></div></header><section id="main_content" class="inner"><div id="framework-container"></div></section><div class="container render-btn-wrap" id="editor-action-buttons"></div><div id="formData-popover" popover><div class="popover-header"><h3>Test formData</h3><div><button type="button" id="format-json">Format</button> <button type="button" id="collapse-json">Collapse</button> <button type="button" id="copy-json">Copy to Clipboard</button></div></div><pre id="formData-editor"></pre><div class="formData-actions"><button popovertarget="formData-popover" popovertargetaction="hide" type="button">Cancel</button> <button id="submit-formData" type="button">Submit</button></div></div><footer id="demo-footer"><nav aria-label="Footer navigation"><ul><li><a href="https://github.com/Draggable/formeo" target="_blank" title="View project on GitHub"><img src="/formeo/assets/img/github.png" width="77" alt="GitHub"></a></li></ul></nav></footer></div></body></html>

package/dist/formeo.cjs.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.1.3
+Version: 4.1.4
 Author: Draggable https://draggable.io
 */
 
@@ -433,7 +433,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "4.1.3";
+const version$2 = "4.1.4";
 const pkg = {
   name: name$1,
   version: version$2
@@ -2281,6 +2281,7 @@ const ANIMATION_SPEED_FAST = Math.round(ANIMATION_SPEED_BASE / 2);
 const ANIMATION_SPEED_SLOW = Math.round(ANIMATION_SPEED_BASE * 2);
 const EVENT_FORMEO_SAVED = "formeoSaved";
 const EVENT_FORMEO_UPDATED = "formeoUpdated";
+const EVENT_FORMEO_CHANGED = "formeoChanged";
 const EVENT_FORMEO_UPDATED_STAGE = "formeoUpdatedStage";
 const EVENT_FORMEO_UPDATED_ROW = "formeoUpdatedRow";
 const EVENT_FORMEO_UPDATED_COLUMN = "formeoUpdatedColumn";
@@ -2288,6 +2289,12 @@ const EVENT_FORMEO_UPDATED_FIELD = "formeoUpdatedField";
 const EVENT_FORMEO_CLEARED = "formeoCleared";
 const EVENT_FORMEO_ON_RENDER = "formeoOnRender";
 const EVENT_FORMEO_CONDITION_UPDATED = "formeoConditionUpdated";
+const EVENT_FORMEO_ADDED_ROW = "formeoAddedRow";
+const EVENT_FORMEO_ADDED_COLUMN = "formeoAddedColumn";
+const EVENT_FORMEO_ADDED_FIELD = "formeoAddedField";
+const EVENT_FORMEO_REMOVED_ROW = "formeoRemovedRow";
+const EVENT_FORMEO_REMOVED_COLUMN = "formeoRemovedColumn";
+const EVENT_FORMEO_REMOVED_FIELD = "formeoRemovedField";
 const COMPARISON_OPERATORS = {
   equals: "==",
   notEquals: "!=",
@@ -3294,6 +3301,18 @@ class Data {
         evtData.previousValue = oldVal;
       }
       events.formeoUpdated(evtData);
+      if (this.name) {
+        const componentEventMap = {
+          stage: EVENT_FORMEO_UPDATED_STAGE,
+          row: EVENT_FORMEO_UPDATED_ROW,
+          column: EVENT_FORMEO_UPDATED_COLUMN,
+          field: EVENT_FORMEO_UPDATED_FIELD
+        };
+        const specificEvent = componentEventMap[this.name];
+        if (specificEvent) {
+          events.formeoUpdated(evtData, specificEvent);
+        }
+      }
     }
     return data;
   }
@@ -3363,6 +3382,23 @@ class ComponentData extends Data {
     const component = this.Component({ ...data, id: elemId });
     this.data[elemId] = component;
     this.active = component;
+    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;
   };
   /**
@@ -7568,7 +7604,7 @@ class EditPanel {
     };
     const editPanelButtons = [];
     if (type === "conditions") {
-      if (!mi18n.current.clearAll) {
+      if (mi18n.current && !mi18n.current.clearAll) {
         mi18n.put("clearAll", "Clear All");
       }
       const clearAllBtn = {
@@ -8062,6 +8098,7 @@ class Component extends Data {
   dispatchComponentEvent(eventName, eventData = {}) {
     const fullEventData = {
       component: this,
+      target: this,
       type: eventName,
       timestamp: Date.now(),
       ...eventData
@@ -8147,6 +8184,22 @@ class Component extends Data {
     if (parent.name === "row") {
       parent.autoColumnWidths();
     }
+    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
+        },
+        removeEvent
+      );
+    }
     return components[`${this.name}s`].delete(this.id);
   };
   /**
@@ -9443,7 +9496,7 @@ class Stage extends Component {
   }
   onAdd(...args) {
     const component = super.onAdd(...args);
-    if (component && component.name === "column") {
+    if (component?.name === "column") {
       component.parent.autoColumnWidths();
     }
   }
@@ -10396,12 +10449,18 @@ const defaults$1 = {
   },
   onAdd: () => {
   },
-  onChange: (...args) => defaults$1.onUpdate(...args),
+  onChange: (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),
+  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) => {
   },
@@ -10417,6 +10476,13 @@ const defaultCustomEvent = ({ src, ...evtData }, type = EVENT_FORMEO_UPDATED) =>
     bubbles: events.opts?.debug || events.opts?.bubbles
   });
   evt.data = (src || document).dispatchEvent(evt);
+  if (type === EVENT_FORMEO_UPDATED) {
+    const changedEvt = new window.CustomEvent(EVENT_FORMEO_CHANGED, {
+      detail: evtData,
+      bubbles: events.opts?.debug || events.opts?.bubbles
+    });
+    (src || document).dispatchEvent(changedEvt);
+  }
   return evt;
 };
 const events = {
@@ -10425,50 +10491,82 @@ const events = {
     return this;
   },
   formeoSaved: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_SAVED),
-  formeoUpdated: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_UPDATED),
+  formeoUpdated: (evt, eventType) => defaultCustomEvent(evt, eventType || EVENT_FORMEO_UPDATED),
   formeoCleared: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_CLEARED),
   formeoOnRender: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_ON_RENDER),
-  formeoConditionUpdated: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_CONDITION_UPDATED)
+  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$1(() => {
-  events.opts.onUpdate({
+  const eventData = {
     timeStamp: window.performance.now(),
     type: EVENT_FORMEO_UPDATED,
     detail: components.formData
-  });
+  };
+  events.opts.onUpdate(eventData);
+  if (events.opts.onChange !== events.opts.onUpdate) {
+    events.opts.onChange(eventData);
+  }
 }, ANIMATION_SPEED_FAST);
 document.addEventListener(EVENT_FORMEO_UPDATED, formeoUpdatedThrottled);
 document.addEventListener(EVENT_FORMEO_UPDATED_STAGE, (evt) => {
   const { timeStamp, type, detail } = evt;
-  events.opts.onUpdate({
-    timeStamp,
-    type,
-    detail
-  });
+  const eventData = { timeStamp, type, detail };
+  events.opts.onUpdate(eventData);
+  events.opts.onUpdateStage(eventData);
 });
 document.addEventListener(EVENT_FORMEO_UPDATED_ROW, (evt) => {
   const { timeStamp, type, detail } = evt;
-  events.opts.onUpdate({
-    timeStamp,
-    type,
-    detail
-  });
+  const eventData = { timeStamp, type, detail };
+  events.opts.onUpdate(eventData);
+  events.opts.onUpdateRow(eventData);
 });
 document.addEventListener(EVENT_FORMEO_UPDATED_COLUMN, (evt) => {
   const { timeStamp, type, detail } = evt;
-  events.opts.onUpdate({
-    timeStamp,
-    type,
-    detail
-  });
+  const eventData = { timeStamp, type, detail };
+  events.opts.onUpdate(eventData);
+  events.opts.onUpdateColumn(eventData);
 });
 document.addEventListener(EVENT_FORMEO_UPDATED_FIELD, (evt) => {
   const { timeStamp, type, detail } = evt;
-  events.opts.onUpdate({
-    timeStamp,
-    type,
-    detail
-  });
+  const eventData = { timeStamp, type, detail };
+  events.opts.onUpdate(eventData);
+  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;
@@ -10667,6 +10765,9 @@ let FormeoEditor$1 = class FormeoEditor {
     this.userFormData = cleanFormData(data);
     this.load(this.userFormData, this.opts);
   }
+  loadData(data = {}) {
+    this.formData = data;
+  }
   get json() {
     return this.Components.json;
   }

package/dist/formeo.css

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.1.3
+Version: 4.1.4
 Author: Draggable https://draggable.io
 */