formeo 3.0.0 → 3.0.2

package/dist/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 2.3.1
+Version: 3.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 = "2.3.1";
+const version$2 = "3.0.1";
 const type = "module";
 const main = "dist/formeo.cjs.js";
 const module = "dist/formeo.es.js";
@@ -2662,6 +2662,25 @@ class Data {
     });
     __publicField(this, "setCallbacks", {});
     __publicField(this, "configVal", /* @__PURE__ */ Object.create(null));
+    /**
+     * Parses the provided data argument. If the argument is a string, it attempts to parse it as JSON.
+     * If the parsing fails, it logs an error and returns an empty object.
+     * If the argument is not a string, it returns the argument as is.
+     *
+     * @param {string|Object} dataArg - The data to be parsed. Can be a JSON string or an object.
+     * @returns {Object} - The parsed object or the original object if the input was not a string.
+     */
+    __publicField(this, "parseformData", (dataArg = /* @__PURE__ */ Object.create(null)) => {
+      if (typeof dataArg === "string") {
+        try {
+          return JSON.parse(dataArg);
+        } catch (e) {
+          console.error("Invalid JSON string provided:", e);
+          return /* @__PURE__ */ Object.create(null);
+        }
+      }
+      return dataArg;
+    });
     this.name = name2;
     this.data = data;
     this.dataPath = "";
@@ -5239,17 +5258,15 @@ function toTitleCase(str) {
 const slugify = (str, separator = "-") => str.toString().normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/[^a-z0-9 -]/g, "").replace(/\s+/g, separator);
 const BASE_NAME = "f-autocomplete";
 const HIGHLIGHT_CLASS_NAME = "highlight-component";
-let lastCache = Date.now();
-let optionsCache;
 const labelCount = (arr, label) => {
   const count = arr.reduce((n, x) => n + (x === label), 0);
   return count > 1 ? `(${count})` : "";
 };
 const getComponentLabel = ({ name: name2, id, ...component }) => {
-  const labelPaths = ["config.label", "attrs.id", "meta.id"];
+  const labelPaths = ["config.label", "config.controlId", "meta.id", "attrs.id"];
   const label = labelPaths.reduce((acc, cur) => {
     if (!acc) {
-      acc = component.get(cur);
+      return component.get(cur);
     }
     return acc;
   }, null);
@@ -5294,7 +5311,15 @@ const componentOptions = (selectedId) => {
   return options.filter(Boolean);
 };
 class Autocomplete {
+  /**
+   * Create an Autocomplete instance
+   * @param {String} key - The key for the autocomplete instance
+   * @param {String} value - The initial value for the autocomplete input
+   * @param {String} i18nKey - The internationalization key for the autocomplete
+   */
   constructor(key, value, i18nKey) {
+    __publicField(this, "lastCache", Date.now());
+    __publicField(this, "optionsCache", null);
     this.key = key;
     this.className = key.replace(/\./g, "-");
     this.value = value;
@@ -5389,6 +5414,7 @@ class Autocomplete {
         const value = evt.target.value.trim();
         this.hiddenField.value = value;
         this.value = value;
+        this.setValue({ dataset: { label: value, value } });
       }
     };
     this.displayField = dom.create({
@@ -5411,31 +5437,31 @@ class Autocomplete {
       attrs: { className: `${BASE_NAME}-list` }
     });
     this.dom = dom.create({
-      children: [this.displayField, this.hiddenField, this.list],
+      children: [this.displayField, this.hiddenField],
       className: this.className,
       action: {
-        onRender: () => {
+        onRender: (element) => {
+          this.stage = element.closest(".formeo-stage");
           const component = this.value && components.getAddress(this.value);
           this.label = component && getComponentLabel(component);
           if (this.label) {
             this.displayField.value = this.label;
           }
-          this.updateOptions();
         }
       }
     });
     return this.dom;
   }
   updateOptions() {
+    let options = this.optionsCache;
     const now = Date.now();
-    if (now - lastCache > ANIMATION_SPEED_SLOW) {
+    if (!options || now - this.lastCache > ANIMATION_SPEED_SLOW * 10) {
       dom.empty(this.list);
-      this.generateOptions();
-      lastCache = now;
+      options = this.generateOptions();
+      this.lastCache = now;
     }
-    const options = optionsCache || this.generateOptions();
-    for (const option2 of options) {
-      this.list.appendChild(option2);
+    if (!this.list.children.length) {
+      this.list.append(...options);
     }
   }
   generateOptions() {
@@ -5447,7 +5473,7 @@ class Autocomplete {
       }
       return target;
     };
-    optionsCache = options.map((optionData) => {
+    this.optionsCache = options.map((optionData) => {
       const { value, textLabel, htmlLabel } = optionData;
       const optionConfig = {
         tag: "li",
@@ -5473,15 +5499,19 @@ class Autocomplete {
       };
       return dom.create(optionConfig);
     });
-    return optionsCache;
-  }
-  /**
-   * Hides autocomplete list and deselects all the options
-   * @param {Object} list - list of autocomplete options
-   */
-  hideList(list = this.list) {
-    animate.slideUp(list, ANIMATION_SPEED_FAST);
-    this.removeHighlight();
+    return this.optionsCache;
+  }
+  setListPosition() {
+    const { offsetHeight, offsetWidth } = this.displayField;
+    const containerRect = this.displayField.closest(".formeo-stage").getBoundingClientRect();
+    const triggerRect = this.displayField.getBoundingClientRect();
+    const listStyle = {
+      position: "absolute",
+      top: `${triggerRect.y + offsetHeight + window.scrollY - containerRect.y}px`,
+      left: `${triggerRect.x + window.scrollX - containerRect.x}px`,
+      width: `${offsetWidth + 1}px`
+    };
+    Object.assign(this.list.style, listStyle);
   }
   /**
    * Shows autocomplete list. Automatically selects 'selectedOption'
@@ -5489,17 +5519,32 @@ class Autocomplete {
    * @param {Object} selectedOption - option to be selected
    */
   showList(selectedOption, list = this.list) {
+    if (!this.stage.contains(this.list)) {
+      this.stage.appendChild(this.list);
+    }
+    this.setListPosition();
     this.selectOption(selectedOption);
     animate.slideDown(list, ANIMATION_SPEED_FAST);
   }
+  /**
+   * Hides autocomplete list and deselects all the options
+   * @param {Object} list - list of autocomplete options
+   */
+  hideList(list = this.list) {
+    animate.slideUp(list, ANIMATION_SPEED_FAST);
+    this.removeHighlight();
+    if (this.stage.contains(this.list)) {
+      this.stage.removeChild(this.list);
+    }
+  }
   /**
    * Returns first option from autocomplete list with 'active-option' class
    * @param {Object} list - list of autocomplete options
    * @return {Object} first list option with 'active-option' class
    */
   getActiveOption(list = this.list) {
-    const activeOption = list.getElementsByClassName("active-option")[0];
-    if (activeOption && activeOption.style.display !== "none") {
+    const activeOption = list.querySelector(".active-option");
+    if ((activeOption == null ? void 0 : activeOption.style.display) !== "none") {
       return activeOption;
     }
     return null;
@@ -5853,10 +5898,9 @@ class EditPanelItem {
         return field2;
       };
       const conditionChangeAction = ({ target }) => {
-        const row = target.closest(".f-condition-row");
+        const conditionRow = target.closest(".f-condition-row");
         const regex = new RegExp(`${target.className}(?:\\S?)+`, "gm");
-        row.className = row.className.replace(regex, "");
-        row.classList.add([target.className, target.value].filter(Boolean).join("-"));
+        conditionRow.className = conditionRow.className.replace(regex, "");
         const evtData = {
           dataPath,
           value: target.value,
@@ -5864,7 +5908,6 @@ class EditPanelItem {
         };
         events.formeoUpdated(evtData);
         components.setAddress(dataPath, target.value);
-        const conditionRow = target.closest(".f-condition-row");
         const rowIndex = indexOfNode(conditionRow);
         this.processConditionUIState(this.itemFieldGroups[rowIndex]);
       };
@@ -6006,7 +6049,8 @@ class EditPanel {
      * @param {String} attr
      * @param {String|Array} val
      */
-    __publicField(this, "addAttribute", (attr, val) => {
+    __publicField(this, "addAttribute", (attr, valArg) => {
+      let val = valArg;
       const safeAttr = slugify(attr);
       const itemKey = `attrs.${safeAttr}`;
       if (!mi18n.current[itemKey]) {
@@ -6029,15 +6073,15 @@ class EditPanel {
      * Add option to options panel
      */
     __publicField(this, "addOption", () => {
-      const metaId = this.field.data.meta.id;
+      const controlId = this.field.data.config.controlId;
       const fieldOptionData = this.field.get("options");
-      const type2 = metaId === "select" ? "option" : metaId;
+      const type2 = controlId === "select" ? "option" : controlId;
       const newOptionLabel = mi18n.get("newOptionLabel", { type: type2 }) || "New Option";
       const itemKey = `options.${this.data.length}`;
       const lastOptionData = fieldOptionData[fieldOptionData.length - 1];
       const optionTemplate = fieldOptionData.length ? lastOptionData : {};
       const itemData = { ...optionTemplate, label: newOptionLabel };
-      if (metaId !== "button") {
+      if (controlId !== "button") {
         itemData.value = slugify(newOptionLabel);
       }
       const newOption = new EditPanelItem({
@@ -6551,6 +6595,7 @@ class Component extends Data {
   }
   /**
    * Method for handling onAdd for all components
+   * @todo improve readability of this method
    * @param  {Object} evt
    * @return {Object} Component
    */
@@ -6592,10 +6637,13 @@ class Component extends Data {
     ]);
     const onAddConditions = {
       controls: () => {
-        const { controlData } = Controls$2.get(item.id);
         const {
-          meta: { id: metaId }
-        } = controlData;
+          controlData: {
+            meta: { id: metaId },
+            ...elementData
+          }
+        } = Controls$2.get(item.id);
+        set(elementData, "config.controlId", metaId);
         const controlType = metaId.startsWith("layout-") ? metaId.replace(/^layout-/, "") : "field";
         const targets = {
           stage: {
@@ -6618,7 +6666,7 @@ class Component extends Data {
         const depth = get(targets, `${this.name}.${controlType}`);
         const action = depthMap.get(depth)();
         dom.remove(item);
-        const component2 = action(controlData, newIndex2);
+        const component2 = action(elementData, newIndex2);
         return component2;
       },
       row: () => {
@@ -6668,10 +6716,23 @@ class Component extends Data {
     }
     events2.onRender && dom.onRender(this.dom, events2.onRender);
   }
+  /**
+   * Sets the configuration for the component. See src/demo/js/options/config.js for example
+   * @param {Object} config - Configuration object with possible structures:
+   * @param {Object} [config.all] - Global configuration applied to all components
+   * @param {Object} [config[controlId]] - Configuration specific to a control type
+   * @param {Object} [config[id]] - Configuration specific to a component instance
+   * @description Merges configurations in order of precedence:
+   * 1. Existing config (this.configVal)
+   * 2. Global config (all)
+   * 3. Control type specific config
+   * 4. Instance specific config
+   * The merged result is stored in this.configVal
+   */
   set config(config2) {
-    const metaId = get(this.data, "meta.id");
     const allConfig = get(config2, "all");
-    const typeConfig = metaId && get(config2, metaId);
+    const controlId = get(this.data, "config.controlId");
+    const typeConfig = controlId && get(config2, controlId);
     const idConfig = get(config2, this.id);
     const mergedConfig = [allConfig, typeConfig, idConfig].reduce(
       (acc, cur) => cur ? merge(acc, cur) : acc,
@@ -6838,7 +6899,7 @@ class Field extends Component {
   get labelConfig() {
     const hideLabel = !!this.get("config.hideLabel");
     if (hideLabel) {
-      return;
+      return null;
     }
     const labelVal = this.get("config.editorLabel") || this.get("config.label");
     const required = this.get("attrs.required");
@@ -6990,7 +7051,7 @@ class Field extends Component {
   fieldPreview() {
     var _a;
     const prevData = clone$1(this.data);
-    const { action = {} } = Controls$2.get(prevData.meta.id);
+    const { action = {} } = Controls$2.get(prevData.config.controlId);
     prevData.id = `prev-${this.id}`;
     prevData.action = action;
     if ((_a = this.data) == null ? void 0 : _a.config.editableContent) {
@@ -7673,21 +7734,25 @@ const defaultElements = [...formControls, ...htmlControls, ...layoutControls];
 let Controls$1 = class Controls {
   constructor() {
     __publicField(this, "groupLabel", (key) => mi18n.get(key) || key || "");
+    __publicField(this, "layoutTypes", {
+      row: () => Stages2.active.addChild(),
+      column: () => this.layoutTypes.row().addChild(),
+      field: (controlData) => this.layoutTypes.column().addChild(controlData)
+    });
     /**
      * Append an element to the stage
      * @param {String} id of elements
      */
     __publicField(this, "addElement", (id) => {
-      const controlData = get(this.get(id), "controlData");
       const {
-        meta: { group, id: metaId }
-      } = controlData;
-      const layoutTypes = {
-        row: () => Stages2.active.addChild(),
-        column: () => layoutTypes.row().addChild(),
-        field: (controlData2) => layoutTypes.column().addChild(controlData2)
-      };
-      return group !== "layout" ? layoutTypes.field(controlData) : layoutTypes[metaId.replace("layout-", "")]();
+        meta: { group, id: metaId },
+        ...elementData
+      } = get(this.get(id), "controlData");
+      set(elementData, "config.controlId", metaId);
+      if (group === "layout") {
+        return this.layoutTypes[metaId.replace("layout-", "")]();
+      }
+      return this.layoutTypes.field(elementData);
     });
     __publicField(this, "applyOptions", async (controlOptions = {}) => {
       const { container, elements, groupOrder, ...options } = merge(defaultOptions, controlOptions);
@@ -7767,16 +7832,16 @@ let Controls$1 = class Controls {
       elements = orderObjectsBy(elements, group.elementOrder, "meta.id");
       groupConfig.content = elements.filter((control) => {
         const { controlData: field } = this.get(control.id);
-        const fieldId = field.meta.id || "";
+        const controlId = field.meta.id || "";
         const filters = [
-          match(fieldId, this.options.disable.elements),
+          match(controlId, this.options.disable.elements),
           field.meta.group === group.id,
-          !usedElementIds.includes(field.meta.id)
+          !usedElementIds.includes(controlId)
         ];
         let shouldFilter = true;
         shouldFilter = filters.every((val) => val === true);
         if (shouldFilter) {
-          usedElementIds.push(fieldId);
+          usedElementIds.push(controlId);
         }
         return shouldFilter;
       });
@@ -7970,15 +8035,28 @@ const Controls$2 = new Controls$1();
 class ComponentData extends Data {
   constructor() {
     super(...arguments);
-    __publicField(this, "load", (data = /* @__PURE__ */ Object.create(null)) => {
+    __publicField(this, "load", (dataArg) => {
+      const data = this.parseformData(dataArg);
       this.empty();
-      if (typeof data === "string") {
-        data = JSON.parse(data);
+      for (const [key, val] of Object.entries(data)) {
+        this.add(key, val);
       }
-      Object.entries(data).forEach(([key, val]) => this.add(key, val));
       return this.data;
     });
+    /**
+     * Retrieves data from the specified path or adds new data if no path is provided.
+     *
+     * @param {string} [path] - The path to retrieve data from. If not provided, new data will be added.
+     * @returns {*} The data retrieved from the specified path or the result of adding new data.
+     */
     __publicField(this, "get", (path) => path ? get(this.data, path) : this.add());
+    /**
+     * Adds a new component with the given id and data.
+     *
+     * @param {string} id - The unique identifier for the component. If not provided, a new UUID will be generated.
+     * @param {Object} [data=Object.create(null)] - The data to initialize the component with.
+     * @returns {Object} The newly created component.
+     */
     __publicField(this, "add", (id, data = /* @__PURE__ */ Object.create(null)) => {
       const elemId = id || uuid();
       const component = this.Component({ ...data, id: elemId });
@@ -7992,14 +8070,20 @@ class ComponentData extends Data {
      */
     __publicField(this, "remove", (componentId) => {
       if (Array.isArray(componentId)) {
-        componentId.forEach((id) => {
+        for (const id of componentId) {
           this.get(id).remove();
-        });
+        }
       } else {
         this.get(componentId).remove();
       }
       return this.data;
     });
+    /**
+     * Deletes a component from the data object.
+     *
+     * @param {string} componentId - The ID of the component to delete.
+     * @returns {string} The ID of the deleted component.
+     */
     __publicField(this, "delete", (componentId) => {
       delete this.data[componentId];
       return componentId;
@@ -8719,6 +8803,18 @@ let Fields$1 = class Fields extends ComponentData {
         return acc;
       }, {});
     });
+    __publicField(this, "load", (dataArg = /* @__PURE__ */ Object.create(null)) => {
+      const allFieldData = this.parseformData(dataArg);
+      this.empty();
+      for (const [key, val] of Object.entries(allFieldData)) {
+        const { meta, ...data } = val;
+        if (meta == null ? void 0 : meta.id) {
+          set(data, "config.controlId", meta == null ? void 0 : meta.id);
+        }
+        this.add(key, data);
+      }
+      return this.data;
+    });
     this.config = { all: DEFAULT_CONFIG };
   }
   Component(data) {
@@ -9600,6 +9696,8 @@ const defaults = {
       // loads csspreloadrel
       i18n: {
         location: "https://draggable.github.io/formeo/assets/lang/"
+      },
+      onLoad: () => {
       }
     };
   }
@@ -9641,7 +9739,7 @@ let FormeoEditor$1 = class FormeoEditor {
    * @return {Promise} asynchronously loaded remote resources
    */
   async loadResources() {
-    var _a;
+    var _a, _b, _c;
     document.removeEventListener("DOMContentLoaded", this.loadResources);
     const promises = [];
     if (this.opts.polyfills) {
@@ -9650,10 +9748,11 @@ let FormeoEditor$1 = class FormeoEditor {
     await fetchIcons(this.opts.svgSprite);
     promises.push(fetchFormeoStyle(this.opts.style));
     promises.push(mi18n.init({ ...this.opts.i18n, locale: (_a = window.sessionStorage) == null ? void 0 : _a.getItem(SESSION_LOCALE_KEY) }));
-    const resolvedPromises = await Promise.all(promises);
     if (this.opts.allowEdit) {
-      this.init();
+      promises.push(this.init());
     }
+    const resolvedPromises = await Promise.all(promises);
+    (_c = (_b = this.opts).onLoad) == null ? void 0 : _c.call(_b, this);
     return resolvedPromises;
   }
   /**
@@ -9662,7 +9761,7 @@ let FormeoEditor$1 = class FormeoEditor {
    * dom elements, actions events and more.
    */
   init() {
-    Controls$2.init(this.opts.controls, this.opts.stickyControls).then((controls) => {
+    return Controls$2.init(this.opts.controls, this.opts.stickyControls).then((controls) => {
       this.controls = controls;
       this.load(this.userFormData, this.opts);
       this.formId = components.get("id");
@@ -9857,51 +9956,59 @@ let FormeoRenderer$1 = class FormeoRenderer {
         (column) => this.cacheComponent(this.processColumn(column))
       );
     });
-    __publicField(this, "processFieldsOrig", (fieldIds) => {
-      return this.orderChildren("fields", fieldIds).map(
-        ({ id, ...field }) => this.cacheComponent(Object.assign({}, field, { id: this.prefixId(id) }))
-      );
-    });
-    __publicField(this, "processFields", (fieldIds) => {
-      return this.orderChildren("fields", fieldIds).map(({ id, ...field }) => {
-        const { action = {}, dependencies: dependencies2 = {} } = this.elements[field.meta.id] || {};
-        if (dependencies2) {
-          fetchDependencies(dependencies2);
-        }
-        const mergedFieldData = merge({ action }, field);
-        return this.cacheComponent({ ...mergedFieldData, id: this.prefixId(id) });
-      });
-    });
+    __publicField(this, "processFields", (fieldIds) => this.orderChildren("fields", fieldIds).map(({ id, ...field }) => {
+      var _a, _b;
+      const controlId = ((_a = field.config) == null ? void 0 : _a.controlId) || ((_b = field.meta) == null ? void 0 : _b.id);
+      const { action = {}, dependencies: dependencies2 = {} } = this.elements[controlId] || {};
+      if (dependencies2) {
+        fetchDependencies(dependencies2);
+      }
+      const mergedFieldData = merge({ action }, field);
+      return this.cacheComponent({ ...mergedFieldData, id: this.prefixId(id) });
+    }));
     /**
      * Evaulate and execute conditions for fields by creating listeners for input and changes
      * @return {Array} flattened array of conditions
      */
+    __publicField(this, "handleComponentCondition", (component, ifRest, thenConditions) => {
+      const listenerEvent = LISTEN_TYPE_MAP(component);
+      if (listenerEvent) {
+        component.addEventListener(
+          listenerEvent,
+          (evt) => {
+            if (this.evaluateCondition(ifRest, evt)) {
+              for (const thenCondition of thenConditions) {
+                this.execResult(thenCondition, evt);
+              }
+            }
+          },
+          false
+        );
+      }
+      const fakeEvt = { target: component };
+      if (this.evaluateCondition(ifRest, fakeEvt)) {
+        for (const thenCondition of thenConditions) {
+          this.execResult(thenCondition, fakeEvt);
+        }
+      }
+    });
     __publicField(this, "applyConditions", () => {
-      Object.values(this.components).forEach(({ conditions }) => {
+      for (const { conditions } of Object.values(this.components)) {
         if (conditions) {
-          conditions.forEach((condition, i) => {
+          for (const condition of conditions) {
             const { if: ifConditions, then: thenConditions } = condition;
-            ifConditions.forEach((ifCondition) => {
+            for (const ifCondition of ifConditions) {
               const { source, ...ifRest } = ifCondition;
               if (isAddress(source)) {
                 const components2 = this.getComponents(source);
-                components2.forEach((component) => {
-                  const listenerEvent = LISTEN_TYPE_MAP(component);
-                  if (listenerEvent) {
-                    component.addEventListener(
-                      listenerEvent,
-                      (evt) => this.evaluateCondition(ifRest, evt) && thenConditions.forEach((thenCondition) => this.execResult(thenCondition, evt)),
-                      false
-                    );
-                  }
-                  const fakeEvt = { target: component };
-                  this.evaluateCondition(ifRest, fakeEvt) && thenConditions.forEach((thenCondition) => this.execResult(thenCondition, fakeEvt));
-                });
+                for (const component of components2) {
+                  this.handleComponentCondition(component, ifRest, thenConditions);
+                }
               }
-            });
-          });
+            }
+          }
         }
-      });
+      }
     });
     /**
      * Evaulate conditions