formeo 4.1.4 → 4.2.0

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "formeo",
-  "version": "4.1.4",
+  "version": "4.2.0",
   "type": "module",
   "main": "dist/formeo.cjs.js",
   "module": "dist/formeo.es.js",
@@ -92,7 +92,7 @@
     "copy:lang": "node ./tools/copy-directory.mjs ./node_modules/formeo-i18n/dist/lang ./src/demo/assets/lang",
     "travis-deploy-once": "travis-deploy-once --pro",
     "playwright:test": "playwright test",
-    "playwright:test:headed": "playwright test --headed",
+    "playwright:test:ui": "playwright test --ui",
     "playwright:test:report": "playwright show-report",
     "playwright:test:ci": "playwright test --reporter=dot",
     "prepush": "npm test",