formeo 4.0.0 → 4.1.1

package/dist/formeo.css

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

package/dist/formeo.es.js

@@ -1,14 +1,14 @@
 
 /**
 formeo - https://formeo.io
-Version: 3.1.4
+Version: 4.1.0
 Author: Draggable https://draggable.io
 */
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var _a, _b;
+var _a, _b, _c;
 async function fetchData(url) {
   try {
     const response = await fetch(url);
@@ -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.1.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",
@@ -1706,7 +1706,7 @@ const POLYFILLS = [
 ];
 const relativeSpritePath = `../../lib/icons/${formeoSpriteId}.svg`;
 const localSpriteUrl = typeof import.meta.resolve === "function" ? import.meta.resolve(relativeSpritePath) : relativeSpritePath;
-const isDev = ((_b = (_a = import.meta) == null ? void 0 : _a.env) == null ? void 0 : _b.DEV) || process.env.NODE_ENV === "development" || false;
+const isDev = ((_b = (_a = import.meta) == null ? void 0 : _a.env) == null ? void 0 : _b.DEV) || typeof process !== "undefined" && ((_c = process.env) == null ? void 0 : _c.NODE_ENV) === "development" || false;
 const SVG_SPRITE_URL = isDev ? localSpriteUrl : `https://cdn.jsdelivr.net/npm/formeo@${version$1}/dist/${formeoSpriteId}.svg`;
 const FALLBACK_SVG_SPRITE_URL = `https://draggable.github.io/formeo/assets/img/${formeoSpriteId}.svg`;
 const CSS_URL = `https://cdn.jsdelivr.net/npm/formeo@${version$1}/dist/formeo.min.css`;
@@ -4953,13 +4953,13 @@ const iconFontTemplates = {
 };
 const inputTags = /* @__PURE__ */ new Set(["input", "textarea", "select"]);
 const getName = (elem = {}) => {
-  var _a2, _b2, _c;
+  var _a2, _b2, _c2;
   let name2 = ((_a2 = elem == null ? void 0 : elem.attrs) == null ? void 0 : _a2.name) || (elem == null ? void 0 : elem.name);
   if (name2) {
     return name2;
   }
   const id = uuid(elem);
-  let label = ((_b2 = elem.config) == null ? void 0 : _b2.label) || ((_c = elem.attrs) == null ? void 0 : _c.label) || (elem == null ? void 0 : elem.label);
+  let label = ((_b2 = elem.config) == null ? void 0 : _b2.label) || ((_c2 = elem.attrs) == null ? void 0 : _c2.label) || (elem == null ? void 0 : elem.label);
   if (label) {
     if (typeof label === "object") {
       label = dom.create(label).textContent;
@@ -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;