formeo 4.0.0 → 4.1.0

package/dist/demo/assets/js/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/demo/assets/js/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 3.1.4
+Version: 4.0.0
 Author: Draggable https://draggable.io
 */
 
@@ -435,7 +435,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 = "dist/formeo.es.js";
@@ -566,7 +566,7 @@ const dependencies = {
   sortablejs: "^1.15.3"
 };
 const release = {
-  branch: "master",
+  branch: "main",
   verifyConditions: [
     "@semantic-release/changelog",
     "@semantic-release/npm",
@@ -5000,7 +5000,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;
@@ -7032,7 +7032,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;
@@ -7288,6 +7288,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);
@@ -7429,6 +7435,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({
@@ -7500,11 +7511,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 _a2;
+    if (!((_a2 = this.eventListeners) == null ? void 0 : _a2.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 _a2;
+    const fullEventData = {
+      component: this,
+      type: eventName,
+      timestamp: Date.now(),
+      ...eventData
+    };
+    if ((_a2 = this.eventListeners) == null ? void 0 : _a2.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()
@@ -7707,7 +7798,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
+    });
     (_b2 = (_a2 = this.config.events) == null ? void 0 : _a2.onAddChild) == null ? void 0 : _b2.call(_a2, { parent: this, child });
     const grandChildren = child.get("children");
     if (grandChildren == null ? void 0 : grandChildren.length) {
@@ -7816,6 +7924,17 @@ class Component extends Data {
       }
     };
     const component = (_a2 = onAddConditions[fromType]) == null ? void 0 : _a2.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;
   }
@@ -7838,6 +7957,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;