formeo 4.0.0 → 4.1.0

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 3.1.4
+Version: 4.0.0
 Author: Draggable https://draggable.io
 */
 
@@ -438,7 +438,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     window.SmartTooltip = SmartTooltip;
   }
   const name$1 = "formeo";
-  const version$2 = "3.1.4";
+  const version$2 = "4.0.0";
   const type = "module";
   const main = "dist/formeo.cjs.js";
   const module2 = "dist/formeo.es.js";
@@ -569,7 +569,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     sortablejs: "^1.15.3"
   };
   const release = {
-    branch: "master",
+    branch: "main",
     verifyConditions: [
       "@semantic-release/changelog",
       "@semantic-release/npm",
@@ -5003,7 +5003,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         const _this = this;
         const processed = ["children", "content"];
-        const { className, options, dataset, conditions, ...elem } = this.processElemArg(elemArg);
+        const { className, options, dataset, ...elem } = this.processElemArg(elemArg);
         processed.push("tag");
         let childType;
         const { tag } = elem;
@@ -7035,7 +7035,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     getPanelDisplay() {
       const column = this.panelsWrap;
-      const width = Number.parseInt(dom.getStyle(column, "width"));
+      const width = Number.parseInt(dom.getStyle(column, "width"), 10);
       const autoDisplayType = width > 390 ? "tabbed" : "slider";
       const isAuto = this.opts.displayType === "auto";
       this.panelDisplay = isAuto ? autoDisplayType : this.opts.displayType || defaults$2.displayType;
@@ -7291,6 +7291,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         const parent = this.parent;
         const children = this.children;
+        this.dispatchComponentEvent("onRemove", {
+          path,
+          parent,
+          children: [...children]
+          // copy array since children will be modified
+        });
         forEach(children, (child) => child.remove());
         this.dom.parentElement.removeChild(this.dom);
         remove(components.getAddress(`${parent.name}s.${parent.id}.children`), this.id);
@@ -7432,6 +7438,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (this.name !== "field") {
           this.cloneChildren(newClone);
         }
+        this.dispatchComponentEvent("onClone", {
+          original: this,
+          clone: newClone,
+          parent
+        });
         return newClone;
       });
       __publicField(this, "createChildWrap", (children) => dom.create({
@@ -7503,11 +7514,91 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.address = `${this.name}s.${this.id}`;
       this.dataPath = `${this.address}.`;
       this.editPanels = /* @__PURE__ */ new Map();
+      this.eventListeners = /* @__PURE__ */ new Map();
+      this.initEventHandlers();
+    }
+    /**
+     * Initialize event handlers based on config
+     */
+    initEventHandlers() {
+      if (!this.config.events) {
+        return;
+      }
+      Object.entries(this.config.events).forEach(([eventName, handler]) => {
+        this.addEventListener(eventName, handler);
+      });
+    }
+    /**
+     * Add an event listener to this component
+     * @param {string} eventName - Name of the event
+     * @param {function} handler - Event handler function
+     */
+    addEventListener(eventName, handler) {
+      if (!this.eventListeners.has(eventName)) {
+        this.eventListeners.set(eventName, []);
+      }
+      this.eventListeners.get(eventName).push(handler);
+    }
+    /**
+     * Remove an event listener from this component
+     * @param {string} eventName - Name of the event
+     * @param {function} handler - Event handler function to remove
+     */
+    removeEventListener(eventName, handler) {
+      var _a;
+      if (!((_a = this.eventListeners) == null ? void 0 : _a.has(eventName))) {
+        return;
+      }
+      const handlers = this.eventListeners.get(eventName);
+      const index2 = handlers.indexOf(handler);
+      if (index2 > -1) {
+        handlers.splice(index2, 1);
+      }
+    }
+    /**
+     * Dispatch a component event to all registered listeners
+     * @param {string} eventName - Name of the event to dispatch
+     * @param {object} eventData - Data to pass to event handlers
+     */
+    dispatchComponentEvent(eventName, eventData = {}) {
+      var _a;
+      const fullEventData = {
+        component: this,
+        type: eventName,
+        timestamp: Date.now(),
+        ...eventData
+      };
+      if ((_a = this.eventListeners) == null ? void 0 : _a.has(eventName)) {
+        this.eventListeners.get(eventName).forEach((handler) => {
+          try {
+            if (typeof handler === "function") {
+              handler(fullEventData);
+            }
+          } catch (error) {
+            console.error(`Error in ${eventName} event handler for ${this.name} ${this.id}:`, error);
+          }
+        });
+      }
+      return fullEventData;
+    }
+    /**
+     * Override Data.set to dispatch component update events
+     */
+    set(path, newVal) {
+      const oldVal = this.get(path);
+      const result = super.set(path, newVal);
+      if (oldVal !== newVal && this.dom) {
+        this.dispatchComponentEvent("onUpdate", {
+          path,
+          oldValue: oldVal,
+          newValue: newVal
+        });
+      }
+      return result;
     }
     // mutationHandler = mutations =>
     //   mutations.map(mutation => {
-    //     @todo pull handler form config
-    //     see dom.create.onRender for implementation pattern
+    //     @todo pull handler form config see dom.create.onRender for implementation pattern
     //   })
     // observe(container) {
     //   this.observer.disconnect()
@@ -7710,7 +7801,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       const childComponentType = `${childGroup}s`;
       const child = components.getAddress(`${childComponentType}.${childId}`) || components[childComponentType].add(childId, data);
-      childWrap.insertBefore(child.dom, childWrap.children[index2]);
+      if (index2 >= childWrap.children.length) {
+        childWrap.appendChild(child.dom);
+      } else {
+        childWrap.children[index2].before(child.dom);
+      }
+      this.dispatchComponentEvent("onAddChild", {
+        parent: this,
+        target: child,
+        child,
+        index: index2
+      });
+      child.dispatchComponentEvent("onAdd", {
+        parent: this,
+        target: child,
+        index: index2,
+        addedVia: "addChild"
+        // indicate how the component was added
+      });
       (_b = (_a = this.config.events) == null ? void 0 : _a.onAddChild) == null ? void 0 : _b.call(_a, { parent: this, child });
       const grandChildren = child.get("children");
       if (grandChildren == null ? void 0 : grandChildren.length) {
@@ -7819,6 +7927,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
       };
       const component = (_a = onAddConditions[fromType]) == null ? void 0 : _a.call(onAddConditions, item, newIndex2);
+      this.dispatchComponentEvent("onAdd", {
+        from,
+        to,
+        item,
+        newIndex: newIndex2,
+        fromType,
+        toType,
+        addedComponent: component,
+        addedVia: "dragDrop"
+        // indicate how the component was added
+      });
       defaultOnAdd();
       return component;
     }
@@ -7841,6 +7960,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
      * Callback for onRender, executes any defined onRender for component
      */
     onRender() {
+      this.dispatchComponentEvent("onRender", {
+        dom: this.dom
+      });
       const { events: events2 } = this.config;
       if (!events2) {
         return null;

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 3.1.4
+Version: 4.0.0
 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: 3.1.4
+Version: 4.0.0
 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"><nav aria-label="Footer navigation"><ul><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> <label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v3.1.4</li></ul></nav><span id="formeo-logo-wrap"></span></header><section id="main_content" class="inner"><form class="build-form"></form><div class="render-form"></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"><nav aria-label="Footer navigation"><ul><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> <label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v4.0.0</li></ul></nav><span id="formeo-logo-wrap"></span></header><section id="main_content" class="inner"><form class="build-form"></form><div class="render-form"></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: 3.1.4
+Version: 4.0.0
 Author: Draggable https://draggable.io
 */
 
@@ -436,7 +436,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "3.1.4";
+const version$2 = "4.0.0";
 const type = "module";
 const main = "dist/formeo.cjs.js";
 const module$1 = "dist/formeo.es.js";
@@ -567,7 +567,7 @@ const dependencies = {
   sortablejs: "^1.15.3"
 };
 const release = {
-  branch: "master",
+  branch: "main",
   verifyConditions: [
     "@semantic-release/changelog",
     "@semantic-release/npm",
@@ -5001,7 +5001,7 @@ class DOM {
       }
       const _this = this;
       const processed = ["children", "content"];
-      const { className, options, dataset, conditions, ...elem } = this.processElemArg(elemArg);
+      const { className, options, dataset, ...elem } = this.processElemArg(elemArg);
       processed.push("tag");
       let childType;
       const { tag } = elem;
@@ -7033,7 +7033,7 @@ class Panels {
   }
   getPanelDisplay() {
     const column = this.panelsWrap;
-    const width = Number.parseInt(dom.getStyle(column, "width"));
+    const width = Number.parseInt(dom.getStyle(column, "width"), 10);
     const autoDisplayType = width > 390 ? "tabbed" : "slider";
     const isAuto = this.opts.displayType === "auto";
     this.panelDisplay = isAuto ? autoDisplayType : this.opts.displayType || defaults$2.displayType;
@@ -7289,6 +7289,12 @@ class Component extends Data {
       }
       const parent = this.parent;
       const children = this.children;
+      this.dispatchComponentEvent("onRemove", {
+        path,
+        parent,
+        children: [...children]
+        // copy array since children will be modified
+      });
       forEach(children, (child) => child.remove());
       this.dom.parentElement.removeChild(this.dom);
       remove(components.getAddress(`${parent.name}s.${parent.id}.children`), this.id);
@@ -7430,6 +7436,11 @@ class Component extends Data {
       if (this.name !== "field") {
         this.cloneChildren(newClone);
       }
+      this.dispatchComponentEvent("onClone", {
+        original: this,
+        clone: newClone,
+        parent
+      });
       return newClone;
     });
     __publicField(this, "createChildWrap", (children) => dom.create({
@@ -7501,11 +7512,91 @@ class Component extends Data {
     this.address = `${this.name}s.${this.id}`;
     this.dataPath = `${this.address}.`;
     this.editPanels = /* @__PURE__ */ new Map();
+    this.eventListeners = /* @__PURE__ */ new Map();
+    this.initEventHandlers();
+  }
+  /**
+   * Initialize event handlers based on config
+   */
+  initEventHandlers() {
+    if (!this.config.events) {
+      return;
+    }
+    Object.entries(this.config.events).forEach(([eventName, handler]) => {
+      this.addEventListener(eventName, handler);
+    });
+  }
+  /**
+   * Add an event listener to this component
+   * @param {string} eventName - Name of the event
+   * @param {function} handler - Event handler function
+   */
+  addEventListener(eventName, handler) {
+    if (!this.eventListeners.has(eventName)) {
+      this.eventListeners.set(eventName, []);
+    }
+    this.eventListeners.get(eventName).push(handler);
+  }
+  /**
+   * Remove an event listener from this component
+   * @param {string} eventName - Name of the event
+   * @param {function} handler - Event handler function to remove
+   */
+  removeEventListener(eventName, handler) {
+    var _a;
+    if (!((_a = this.eventListeners) == null ? void 0 : _a.has(eventName))) {
+      return;
+    }
+    const handlers = this.eventListeners.get(eventName);
+    const index2 = handlers.indexOf(handler);
+    if (index2 > -1) {
+      handlers.splice(index2, 1);
+    }
+  }
+  /**
+   * Dispatch a component event to all registered listeners
+   * @param {string} eventName - Name of the event to dispatch
+   * @param {object} eventData - Data to pass to event handlers
+   */
+  dispatchComponentEvent(eventName, eventData = {}) {
+    var _a;
+    const fullEventData = {
+      component: this,
+      type: eventName,
+      timestamp: Date.now(),
+      ...eventData
+    };
+    if ((_a = this.eventListeners) == null ? void 0 : _a.has(eventName)) {
+      this.eventListeners.get(eventName).forEach((handler) => {
+        try {
+          if (typeof handler === "function") {
+            handler(fullEventData);
+          }
+        } catch (error) {
+          console.error(`Error in ${eventName} event handler for ${this.name} ${this.id}:`, error);
+        }
+      });
+    }
+    return fullEventData;
+  }
+  /**
+   * Override Data.set to dispatch component update events
+   */
+  set(path, newVal) {
+    const oldVal = this.get(path);
+    const result = super.set(path, newVal);
+    if (oldVal !== newVal && this.dom) {
+      this.dispatchComponentEvent("onUpdate", {
+        path,
+        oldValue: oldVal,
+        newValue: newVal
+      });
+    }
+    return result;
   }
   // mutationHandler = mutations =>
   //   mutations.map(mutation => {
-  //     @todo pull handler form config
-  //     see dom.create.onRender for implementation pattern
+  //     @todo pull handler form config see dom.create.onRender for implementation pattern
   //   })
   // observe(container) {
   //   this.observer.disconnect()
@@ -7708,7 +7799,24 @@ class Component extends Data {
     }
     const childComponentType = `${childGroup}s`;
     const child = components.getAddress(`${childComponentType}.${childId}`) || components[childComponentType].add(childId, data);
-    childWrap.insertBefore(child.dom, childWrap.children[index2]);
+    if (index2 >= childWrap.children.length) {
+      childWrap.appendChild(child.dom);
+    } else {
+      childWrap.children[index2].before(child.dom);
+    }
+    this.dispatchComponentEvent("onAddChild", {
+      parent: this,
+      target: child,
+      child,
+      index: index2
+    });
+    child.dispatchComponentEvent("onAdd", {
+      parent: this,
+      target: child,
+      index: index2,
+      addedVia: "addChild"
+      // indicate how the component was added
+    });
     (_b = (_a = this.config.events) == null ? void 0 : _a.onAddChild) == null ? void 0 : _b.call(_a, { parent: this, child });
     const grandChildren = child.get("children");
     if (grandChildren == null ? void 0 : grandChildren.length) {
@@ -7817,6 +7925,17 @@ class Component extends Data {
       }
     };
     const component = (_a = onAddConditions[fromType]) == null ? void 0 : _a.call(onAddConditions, item, newIndex2);
+    this.dispatchComponentEvent("onAdd", {
+      from,
+      to,
+      item,
+      newIndex: newIndex2,
+      fromType,
+      toType,
+      addedComponent: component,
+      addedVia: "dragDrop"
+      // indicate how the component was added
+    });
     defaultOnAdd();
     return component;
   }
@@ -7839,6 +7958,9 @@ class Component extends Data {
    * Callback for onRender, executes any defined onRender for component
    */
   onRender() {
+    this.dispatchComponentEvent("onRender", {
+      dom: this.dom
+    });
     const { events: events2 } = this.config;
     if (!events2) {
       return null;

package/dist/formeo.css

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