formeo 5.0.0 → 5.0.2

package/dist/formeo.cjs.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.5
+Version: 5.0.1
 Author: Draggable https://draggable.io
 */
 
@@ -434,7 +434,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "4.2.5";
+const version$2 = "5.0.1";
 const pkg = {
   name: name$1,
   version: version$2
@@ -1206,9 +1206,9 @@ var hasRequired_cloneBuffer;
 function require_cloneBuffer() {
   if (hasRequired_cloneBuffer) return _cloneBuffer.exports;
   hasRequired_cloneBuffer = 1;
-  (function(module2, exports2) {
+  (function(module2, exports$1) {
     var root = require_root();
-    var freeExports = exports2 && !exports2.nodeType && exports2;
+    var freeExports = exports$1 && !exports$1.nodeType && exports$1;
     var freeModule = freeExports && true && module2 && !module2.nodeType && module2;
     var moduleExports = freeModule && freeModule.exports === freeExports;
     var Buffer = moduleExports ? root.Buffer : void 0, allocUnsafe = Buffer ? Buffer.allocUnsafe : void 0;
@@ -1454,9 +1454,9 @@ var hasRequiredIsBuffer;
 function requireIsBuffer() {
   if (hasRequiredIsBuffer) return isBuffer.exports;
   hasRequiredIsBuffer = 1;
-  (function(module2, exports2) {
+  (function(module2, exports$1) {
     var root = require_root(), stubFalse = requireStubFalse();
-    var freeExports = exports2 && !exports2.nodeType && exports2;
+    var freeExports = exports$1 && !exports$1.nodeType && exports$1;
     var freeModule = freeExports && true && module2 && !module2.nodeType && module2;
     var moduleExports = freeModule && freeModule.exports === freeExports;
     var Buffer = moduleExports ? root.Buffer : void 0;
@@ -1527,9 +1527,9 @@ var hasRequired_nodeUtil;
 function require_nodeUtil() {
   if (hasRequired_nodeUtil) return _nodeUtil.exports;
   hasRequired_nodeUtil = 1;
-  (function(module2, exports2) {
+  (function(module2, exports$1) {
     var freeGlobal = require_freeGlobal();
-    var freeExports = exports2 && !exports2.nodeType && exports2;
+    var freeExports = exports$1 && !exports$1.nodeType && exports$1;
     var freeModule = freeExports && true && module2 && !module2.nodeType && module2;
     var moduleExports = freeModule && freeModule.exports === freeExports;
     var freeProcess = moduleExports && freeGlobal.process;
@@ -10063,12 +10063,12 @@ class Control {
         // will auto navigated between the groups
         focus: ({ target }) => {
           const group = target.closest(`.${CONTROL_GROUP_CLASSNAME}`);
-          return group && Controls$2.panels.nav.refresh(indexOfNode(group));
+          return group && Controls$1.panels.nav.refresh(indexOfNode(group));
         },
         click: ({ target }) => {
           const controlId = target.closest(".field-control")?.id;
           if (controlId) {
-            Controls$2.addElement(controlId);
+            Controls$1.addElement(controlId);
           }
         }
       }
@@ -10130,7 +10130,7 @@ const defaultOptions = Object.freeze({
   container: null,
   panels: { displayType: "slider" }
 });
-let Controls$1 = class Controls {
+let Controls$2 = class Controls {
   constructor() {
     this.data = /* @__PURE__ */ new Map();
     this.buttonActions = {
@@ -10440,11 +10440,11 @@ let Controls$1 = class Controls {
     return Promise.all(this.registerControls([...allControls, ...elements]));
   };
 };
-const Controls$2 = new Controls$1();
+const Controls$1 = new Controls$2();
 const index$7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Controls: Controls$1,
-  default: Controls$2
+  Controls: Controls$2,
+  default: Controls$1
 }, Symbol.toStringTag, { value: "Module" }));
 const checkableTypes = /* @__PURE__ */ new Set(["checkbox", "radio"]);
 const isSelectableType = /* @__PURE__ */ new Set(["radio", "checkbox", "select-one", "select-multiple"]);
@@ -10672,7 +10672,7 @@ let Fields$1 = class Fields extends ComponentData {
   get = (path) => {
     let found = path && get(this.data, path);
     if (!found) {
-      const control = Controls$2.get(path);
+      const control = Controls$1.get(path);
       if (control) {
         found = this.add(null, control.controlData);
       }
@@ -10714,13 +10714,27 @@ const Stages2 = stages;
 const Rows2 = rows;
 const Columns2 = columns;
 const Fields2 = fields;
-const Controls2 = Controls$2;
+const Controls2 = Controls$1;
 const getFormData = (formData, useSessionStorage = false) => {
-  if (formData) {
-    return clone$1(parseData(formData));
+  if (formData !== void 0 && formData !== null) {
+    const parsed = parseData(formData);
+    if (parsed && typeof parsed === "object") {
+      const cloned = clone$1(parsed);
+      return {
+        id: cloned.id || DEFAULT_FORMDATA().id,
+        stages: cloned.stages || DEFAULT_FORMDATA().stages,
+        rows: cloned.rows || {},
+        columns: cloned.columns || {},
+        fields: cloned.fields || {}
+      };
+    }
+    console.warn("Formeo: Invalid formData provided, using default");
   }
   if (useSessionStorage) {
-    return sessionStorage.get(SESSION_FORMDATA_KEY) || DEFAULT_FORMDATA();
+    const sessionData = sessionStorage.get(SESSION_FORMDATA_KEY);
+    if (sessionData) {
+      return sessionData;
+    }
   }
   return DEFAULT_FORMDATA();
 };
@@ -10841,6 +10855,8 @@ const defaults$1 = {
   },
   onAdd: () => {
   },
+  onRemove: () => {
+  },
   onChange: (evt) => events.opts?.debug && console.log(evt),
   onUpdate: (evt) => events.opts?.debug && console.log(evt),
   onUpdateStage: (evt) => events.opts?.debug && console.log(evt),
@@ -10933,31 +10949,37 @@ document.addEventListener(EVENT_FORMEO_UPDATED_FIELD, (evt) => {
 document.addEventListener(EVENT_FORMEO_ADDED_ROW, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onAdd(eventData);
   events.opts.onAddRow(eventData);
 });
 document.addEventListener(EVENT_FORMEO_ADDED_COLUMN, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onAdd(eventData);
   events.opts.onAddColumn(eventData);
 });
 document.addEventListener(EVENT_FORMEO_ADDED_FIELD, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onAdd(eventData);
   events.opts.onAddField(eventData);
 });
 document.addEventListener(EVENT_FORMEO_REMOVED_ROW, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onRemove(eventData);
   events.opts.onRemoveRow(eventData);
 });
 document.addEventListener(EVENT_FORMEO_REMOVED_COLUMN, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onRemove(eventData);
   events.opts.onRemoveColumn(eventData);
 });
 document.addEventListener(EVENT_FORMEO_REMOVED_FIELD, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onRemove(eventData);
   events.opts.onRemoveField(eventData);
 });
 document.addEventListener(EVENT_FORMEO_ON_RENDER, (evt) => {
@@ -11124,7 +11146,18 @@ const defaults = {
     };
   }
 };
+const INIT_STATES = {
+  CREATED: "created",
+  LOADING_RESOURCES: "loading",
+  INITIALIZING: "initializing",
+  READY: "ready",
+  ERROR: "error"
+};
 let FormeoEditor$1 = class FormeoEditor {
+  #initState = INIT_STATES.CREATED;
+  #initPromise = null;
+  #lockedFormData = null;
+  #dataLoadedOnce = false;
   /**
    * @param  {Object} options  formeo options
    * @param  {String|Object}   userFormData loaded formData
@@ -11139,7 +11172,9 @@ let FormeoEditor$1 = class FormeoEditor {
     this.opts = opts;
     dom.setOptions = opts;
     components.config = config;
-    this.userFormData = userFormData || formData;
+    const providedData = userFormData || formData;
+    this.#lockedFormData = providedData ? cleanFormData(providedData) : null;
+    this.userFormData = this.#lockedFormData;
     this.Components = components;
     this.dom = dom;
     events.init({ debug, ...events$1 });
@@ -11154,7 +11189,9 @@ let FormeoEditor$1 = class FormeoEditor {
     return this.Components.formData;
   }
   set formData(data = {}) {
-    this.userFormData = cleanFormData(data);
+    const cleaned = cleanFormData(data);
+    this.#lockedFormData = cleaned;
+    this.userFormData = cleaned;
     this.load(this.userFormData, this.opts);
   }
   loadData(data = {}) {
@@ -11168,7 +11205,9 @@ let FormeoEditor$1 = class FormeoEditor {
    * @return {void}
    */
   clear() {
-    this.userFormData = DEFAULT_FORMDATA();
+    const defaultData = DEFAULT_FORMDATA();
+    this.#lockedFormData = defaultData;
+    this.userFormData = defaultData;
     this.Components.load(this.userFormData, this.opts);
     this.render();
   }
@@ -11178,6 +11217,7 @@ let FormeoEditor$1 = class FormeoEditor {
    */
   async loadResources() {
     document.removeEventListener("DOMContentLoaded", this.loadResources);
+    this.#initState = INIT_STATES.LOADING_RESOURCES;
     const promises = [
       fetchIcons(this.opts.svgSprite),
       fetchFormeoStyle(this.opts.style),
@@ -11187,38 +11227,142 @@ let FormeoEditor$1 = class FormeoEditor {
         locale: globalThis.sessionStorage?.getItem(SESSION_LOCALE_KEY)
       })
     ].filter(Boolean);
-    await Promise.all(promises);
-    if (this.opts.allowEdit) {
-      this.init();
+    try {
+      await Promise.all(promises);
+      if (this.opts.allowEdit) {
+        this.init();
+      }
+    } catch (error) {
+      this.#initState = INIT_STATES.ERROR;
+      console.error("Failed to load resources:", error);
+      throw error;
     }
   }
   /**
    * Formeo initializer
-   * @return {Object} References to formeo instance,
+   * @return {Promise} References to formeo instance,
    * dom elements, actions events and more.
    */
   init() {
-    return Controls$2.init(this.opts.controls, this.opts.stickyControls).then((controls) => {
+    if (this.#initState === INIT_STATES.INITIALIZING) {
+      return this.#initPromise;
+    }
+    if (this.#initState === INIT_STATES.READY) {
+      return this.#refreshUI();
+    }
+    this.#initState = INIT_STATES.INITIALIZING;
+    this.#initPromise = Controls$1.init(this.opts.controls, this.opts.stickyControls).then((controls) => {
       this.controls = controls;
-      this.load(this.userFormData, this.opts);
+      if (!this.#dataLoadedOnce) {
+        this.#loadInitialData();
+        this.#dataLoadedOnce = true;
+      }
       this.formId = components.get("id");
       this.i18n = {
-        setLang: (formeoLocale) => {
-          globalThis.sessionStorage?.setItem(SESSION_LOCALE_KEY, formeoLocale);
-          const loadLang = mi18n.setCurrent(formeoLocale);
-          loadLang.then(() => {
-            this.init();
-          }, console.error);
-        }
+        setLang: this.#setLanguage.bind(this)
       };
+      this.render();
+      this.#initState = INIT_STATES.READY;
       this.opts.onLoad?.(this);
       this.tooltipInstance = new SmartTooltip();
+      return this;
+    }).catch((error) => {
+      this.#initState = INIT_STATES.ERROR;
+      console.error("Failed to initialize editor:", error);
+      throw error;
     });
+    return this.#initPromise;
+  }
+  /**
+   * Set language without reloading form data (fixes race condition)
+   * @param {string} formeoLocale - locale code
+   * @return {Promise}
+   */
+  async #setLanguage(formeoLocale) {
+    globalThis.sessionStorage?.setItem(SESSION_LOCALE_KEY, formeoLocale);
+    await mi18n.setCurrent(formeoLocale);
+    await this.#refreshUI();
+  }
+  /**
+   * Refresh UI without reloading data (used for language changes)
+   * @return {Promise}
+   */
+  async #refreshUI() {
+    this.controls = await Controls$1.init(this.opts.controls, this.opts.stickyControls);
+    this.render();
+    return this;
+  }
+  /**
+   * Load initial data with proper priority
+   */
+  #loadInitialData() {
+    const dataToLoad = this.#getDataWithPriority();
+    this.Components.load(dataToLoad, this.opts);
+  }
+  /**
+   * Get form data with proper priority:
+   * 1. User-provided data (locked at construction)
+   * 2. SessionStorage (if enabled)
+   * 3. Default empty form
+   * @return {Object} form data to load
+   */
+  #getDataWithPriority() {
+    if (this.#lockedFormData) {
+      return clone$1(this.#lockedFormData);
+    }
+    if (this.opts.sessionStorage) {
+      const sessionData = sessionStorage.get(SESSION_FORMDATA_KEY);
+      if (sessionData) {
+        return sessionData;
+      }
+    }
+    return DEFAULT_FORMDATA();
   }
   load(formData = this.userFormData, opts = this.opts) {
     this.Components.load(formData, opts);
     this.render();
   }
+  /**
+   * Get current initialization state
+   * @return {string} current state
+   */
+  get initState() {
+    return this.#initState;
+  }
+  /**
+   * Check if the editor is ready
+   * @return {boolean}
+   */
+  get isReady() {
+    return this.#initState === INIT_STATES.READY;
+  }
+  /**
+   * Wait for the editor to be ready
+   * @return {Promise} resolves when editor is ready
+   */
+  async whenReady() {
+    if (this.#initState === INIT_STATES.READY) {
+      return this;
+    }
+    if (this.#initState === INIT_STATES.ERROR) {
+      return Promise.reject(new Error("Editor initialization failed"));
+    }
+    if (this.#initPromise) {
+      return this.#initPromise;
+    }
+    return new Promise((resolve, reject) => {
+      const checkReady = () => {
+        if (this.#initState === INIT_STATES.READY) {
+          resolve(this);
+        } else if (this.#initState === INIT_STATES.ERROR) {
+          reject(new Error("Editor initialization failed"));
+        } else {
+          globalThis.requestAnimationFrame(checkReady);
+        }
+      };
+      checkReady();
+    });
+  }
   /**
    * Render the formeo sections
    * @return {void}

package/dist/formeo.css

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