formeo 5.0.0 → 5.0.2

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.5
+Version: 5.0.1
 Author: Draggable https://draggable.io
 */
 
@@ -436,7 +436,7 @@ Author: Draggable https://draggable.io
     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
@@ -1208,9 +1208,9 @@ Author: Draggable https://draggable.io
   function require_cloneBuffer() {
     if (hasRequired_cloneBuffer) return _cloneBuffer.exports;
     hasRequired_cloneBuffer = 1;
-    (function(module2, exports3) {
+    (function(module2, exports$1) {
       var root = require_root();
-      var freeExports = exports3 && !exports3.nodeType && exports3;
+      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;
@@ -1456,9 +1456,9 @@ Author: Draggable https://draggable.io
   function requireIsBuffer() {
     if (hasRequiredIsBuffer) return isBuffer.exports;
     hasRequiredIsBuffer = 1;
-    (function(module2, exports3) {
+    (function(module2, exports$1) {
       var root = require_root(), stubFalse = requireStubFalse();
-      var freeExports = exports3 && !exports3.nodeType && exports3;
+      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;
@@ -1529,9 +1529,9 @@ Author: Draggable https://draggable.io
   function require_nodeUtil() {
     if (hasRequired_nodeUtil) return _nodeUtil.exports;
     hasRequired_nodeUtil = 1;
-    (function(module2, exports3) {
+    (function(module2, exports$1) {
       var freeGlobal = require_freeGlobal();
-      var freeExports = exports3 && !exports3.nodeType && exports3;
+      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;
@@ -10718,11 +10718,25 @@ Author: Draggable https://draggable.io
   const Fields = fields;
   const Controls = Controls$2;
   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();
   };
@@ -10843,6 +10857,8 @@ Author: Draggable https://draggable.io
     },
     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),
@@ -10935,31 +10951,37 @@ Author: Draggable https://draggable.io
   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) => {
@@ -11126,7 +11148,18 @@ Author: Draggable https://draggable.io
       };
     }
   };
+  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
@@ -11141,7 +11174,9 @@ Author: Draggable https://draggable.io
       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 });
@@ -11156,7 +11191,9 @@ Author: Draggable https://draggable.io
       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 = {}) {
@@ -11170,7 +11207,9 @@ Author: Draggable https://draggable.io
      * @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();
     }
@@ -11180,6 +11219,7 @@ Author: Draggable https://draggable.io
      */
     async loadResources() {
       document.removeEventListener("DOMContentLoaded", this.loadResources);
+      this.#initState = INIT_STATES.LOADING_RESOURCES;
       const promises = [
         fetchIcons(this.opts.svgSprite),
         fetchFormeoStyle(this.opts.style),
@@ -11189,38 +11229,142 @@ Author: Draggable https://draggable.io
           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$2.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$2.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/demo/assets/js/index.min.js

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.5
+Version: 5.0.1
 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: 4.2.5
+Version: 5.0.1
 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"><div class="header-inner"><img id="formeo-logo" src="/formeo/assets/img/formeo-logo.svg" alt="Formeo Logo" width="100"><nav aria-label="Framework navigation"><ul><li><label for="framework-select">Framework:</label> <select name="framework-select" id="framework-select" class="form-control"><option value="vanilla">Vanilla JavaScript</option><option value="angular">Angular</option><option value="react">React</option></select></li><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></li><li><label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v4.2.5</li></ul></nav></div></header><section id="main_content" class="inner"><div id="framework-container"></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"><div class="header-inner"><img id="formeo-logo" src="/formeo/assets/img/formeo-logo.svg" alt="Formeo Logo" width="100"><nav aria-label="Framework navigation"><ul><li><label for="framework-select">Framework:</label> <select name="framework-select" id="framework-select" class="form-control"><option value="vanilla">Vanilla JavaScript</option><option value="angular">Angular</option><option value="react">React</option></select></li><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></li><li><label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v5.0.1</li></ul></nav></div></header><section id="main_content" class="inner"><div id="framework-container"></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>