formeo 4.2.4 → 4.2.5

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.3
+Version: 4.2.4
 Author: Draggable https://draggable.io
 */
 
@@ -433,7 +433,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "4.2.3";
+const version$2 = "4.2.4";
 const pkg = {
   name: name$1,
   version: version$2
@@ -5843,6 +5843,12 @@ const iconFontTemplates = {
   fontello: (icon) => `<i class="${iconPrefix}${icon}">${icon}</i>`
 };
 const inputTags = /* @__PURE__ */ new Set(["input", "textarea", "select"]);
+const stripOn = (str) => str.replace(/^on([A-Z])/, (_, l) => l.toLowerCase());
+const useCaptureEvts = /* @__PURE__ */ new Set(["focus", "blur"]);
+const defaultActionHandler = (event) => {
+  const eventName = stripOn(event);
+  return (node, cb) => node.addEventListener(eventName, cb, useCaptureEvts.has(eventName));
+};
 const getName = (elem = {}) => {
   let name2 = elem?.attrs?.name || elem?.name;
   if (name2) {
@@ -6048,12 +6054,10 @@ class DOM {
       onRender: dom.onRender,
       render: dom.onRender
     };
-    const useCaptureEvts = ["focus", "blur"];
-    const defaultHandler = (event) => (node2, cb) => node2.addEventListener(event, cb, useCaptureEvts.includes(event));
     return Object.entries(actions2).map(([event, cb]) => {
       const cbs = Array.isArray(cb) ? cb : [cb];
       return cbs.map((cb2) => {
-        const action = handlers[event] || defaultHandler(event);
+        const action = handlers[event] || defaultActionHandler(event);
         return action(node, cb2);
       });
     });
@@ -10856,7 +10860,7 @@ const processOptions = ({ editorContainer, renderContainer, formData, ...opts })
 };
 const baseId = (id) => {
   const match2 = id.match(UUID_REGEXP);
-  return match2?.[0] || id``;
+  return match2?.[0] || id;
 };
 const isVisible = (elem) => {
   if (!elem) return false;
@@ -10941,12 +10945,13 @@ const targetPropertyMap = {
 };
 let FormeoRenderer$1 = class FormeoRenderer {
   constructor(opts, formDataArg) {
-    const { renderContainer, elements, formData } = processOptions(opts);
-    this.container = renderContainer;
+    const { renderContainer: container, elements, formData, config } = processOptions(opts);
+    this.container = container;
     this.form = cleanFormData(formDataArg || formData);
-    this.dom = dom;
-    this.components = /* @__PURE__ */ Object.create(null);
     this.elements = elements;
+    this.config = config;
+    this.components = /* @__PURE__ */ Object.create(null);
+    this.dom = dom;
   }
   get formData() {
     return this.form;
@@ -10954,10 +10959,30 @@ let FormeoRenderer$1 = class FormeoRenderer {
   set formData(data) {
     this.form = cleanFormData(data);
   }
+  /**
+   * Gets the user data from the rendered form as a plain object.
+   * Converts FormData to an object, handling multiple values for the same key
+   * by converting them into arrays.
+   *
+   * @returns {Object.<string, string|string[]>} An object containing form field names as keys
+   * and their values. Fields with multiple values are stored as arrays.
+   *
+   * @example
+   * // Form with single values
+   * { username: 'john', email: 'john@example.com' }
+   *
+   * @example
+   * // Form with multiple values for same key
+   * { username: 'john', hobbies: ['reading', 'gaming'] }
+   */
   get userData() {
-    const userData = new FormData(this.renderedForm);
+    const form = this.container.querySelector(".formeo-render") || this.renderedForm;
+    if (!form) {
+      return {};
+    }
+    const formEntries = new FormData(form);
     const formDataObj = {};
-    for (const [key, value] of userData.entries()) {
+    for (const [key, value] of formEntries.entries()) {
       if (formDataObj[key]) {
         if (Array.isArray(formDataObj[key])) {
           formDataObj[key].push(value);
@@ -10970,6 +10995,27 @@ let FormeoRenderer$1 = class FormeoRenderer {
     }
     return formDataObj;
   }
+  /**
+   * Gets the user form data as an array of field objects.
+   * Combines user input values with component metadata to create structured field data.
+   *
+   * @returns {Array<{key: string, value: any, label: string}>} An array of field data objects, where each object contains:
+   *   - key: The field identifier
+   *   - value: The user's input value for the field
+   *   - label: The field's label from component configuration (empty string if not found)
+   */
+  get userFormData() {
+    const userFormData = [];
+    for (const [key, value] of Object.entries(this.userData)) {
+      const fieldData = {
+        key,
+        value,
+        label: this.components[baseId(key)]?.config?.label || ""
+      };
+      userFormData.push(fieldData);
+    }
+    return userFormData;
+  }
   set userData(data = {}) {
     const form = this.container.querySelector("form");
     for (const key of Object.keys(data)) {
@@ -10993,6 +11039,7 @@ let FormeoRenderer$1 = class FormeoRenderer {
    * @param {Object} formData
    */
   render(formData = this.form) {
+    this.form = cleanFormData(formData);
     const renderedForm = this.getRenderedForm(formData);
     const existingRenderedForm = this.container.querySelector(".formeo-render");
     if (existingRenderedForm) {
@@ -11005,6 +11052,7 @@ let FormeoRenderer$1 = class FormeoRenderer {
     this.form = cleanFormData(formData);
     const renderCount = document.getElementsByClassName("formeo-render").length;
     const config = {
+      ...this.config,
       tag: "form",
       id: this.form.id,
       className: `formeo-render formeo formeo-rendered-${renderCount}`,
@@ -11030,11 +11078,9 @@ let FormeoRenderer$1 = class FormeoRenderer {
    */
   processColumn = ({ id, ...columnData }) => ({
     ...columnData,
-    ...{
-      id: this.prefixId(id),
-      children: this.processFields(columnData.children),
-      style: `width: ${columnData.config.width || "100%"}`
-    }
+    id: this.prefixId(id),
+    children: this.processFields(columnData.children),
+    style: `width: ${columnData.config.width || "100%"}`
   });
   processRows = (stageId) => this.orderChildren("rows", this.form.stages[stageId].children).reduce((acc, row) => {
     if (row) {
@@ -11077,11 +11123,16 @@ let FormeoRenderer$1 = class FormeoRenderer {
     };
   };
   cloneComponentData = (componentId) => {
-    const { children = [], id, ...rest } = this.components[componentId];
+    const { children = [], id, attrs = {}, ...rest } = this.components[componentId];
+    const updatedAttrs = { ...attrs, "data-clone-of": id };
+    if (rest.tag === "input") {
+      updatedAttrs.name = getName(this.components[componentId]);
+    }
     return {
       ...rest,
-      id: uuid(id),
-      children: children?.length && children.map(({ id: id2 }) => this.cloneComponentData(baseId(id2)))
+      id: RENDER_PREFIX + uuid(id),
+      children: children?.length && children.map(({ id: id2 }) => this.cloneComponentData(baseId(id2))),
+      attrs: updatedAttrs
     };
   };
   addButton = (id) => ({
@@ -11229,12 +11280,12 @@ let FormeoRenderer$1 = class FormeoRenderer {
     return components2;
   };
 };
+const listenTypeMap = [
+  ["input", (c) => ["textarea", "text"].includes(c.type)],
+  ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]
+];
 const LISTEN_TYPE_MAP = (component) => {
-  const typesMap = [
-    ["input", (c) => ["textarea", "text"].includes(c.type)],
-    ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]
-  ];
-  const [listenerEvent] = typesMap.find((typeMap) => typeMap[1](component)) || [false];
+  const [listenerEvent] = listenTypeMap.find((typeMap) => typeMap[1](component)) || [false];
   return listenerEvent;
 };
 if (window !== void 0) {

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.3
+Version: 4.2.4
 Author: Draggable https://draggable.io
 */
 
@@ -431,7 +431,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "4.2.3";
+const version$2 = "4.2.4";
 const pkg = {
   name: name$1,
   version: version$2
@@ -5841,6 +5841,12 @@ const iconFontTemplates = {
   fontello: (icon) => `<i class="${iconPrefix}${icon}">${icon}</i>`
 };
 const inputTags = /* @__PURE__ */ new Set(["input", "textarea", "select"]);
+const stripOn = (str) => str.replace(/^on([A-Z])/, (_, l) => l.toLowerCase());
+const useCaptureEvts = /* @__PURE__ */ new Set(["focus", "blur"]);
+const defaultActionHandler = (event) => {
+  const eventName = stripOn(event);
+  return (node, cb) => node.addEventListener(eventName, cb, useCaptureEvts.has(eventName));
+};
 const getName = (elem = {}) => {
   let name2 = elem?.attrs?.name || elem?.name;
   if (name2) {
@@ -6046,12 +6052,10 @@ class DOM {
       onRender: dom.onRender,
       render: dom.onRender
     };
-    const useCaptureEvts = ["focus", "blur"];
-    const defaultHandler = (event) => (node2, cb) => node2.addEventListener(event, cb, useCaptureEvts.includes(event));
     return Object.entries(actions2).map(([event, cb]) => {
       const cbs = Array.isArray(cb) ? cb : [cb];
       return cbs.map((cb2) => {
-        const action = handlers[event] || defaultHandler(event);
+        const action = handlers[event] || defaultActionHandler(event);
         return action(node, cb2);
       });
     });
@@ -10854,7 +10858,7 @@ const processOptions = ({ editorContainer, renderContainer, formData, ...opts })
 };
 const baseId = (id) => {
   const match2 = id.match(UUID_REGEXP);
-  return match2?.[0] || id``;
+  return match2?.[0] || id;
 };
 const isVisible = (elem) => {
   if (!elem) return false;
@@ -10939,12 +10943,13 @@ const targetPropertyMap = {
 };
 let FormeoRenderer$1 = class FormeoRenderer {
   constructor(opts, formDataArg) {
-    const { renderContainer, elements, formData } = processOptions(opts);
-    this.container = renderContainer;
+    const { renderContainer: container, elements, formData, config } = processOptions(opts);
+    this.container = container;
     this.form = cleanFormData(formDataArg || formData);
-    this.dom = dom;
-    this.components = /* @__PURE__ */ Object.create(null);
     this.elements = elements;
+    this.config = config;
+    this.components = /* @__PURE__ */ Object.create(null);
+    this.dom = dom;
   }
   get formData() {
     return this.form;
@@ -10952,10 +10957,30 @@ let FormeoRenderer$1 = class FormeoRenderer {
   set formData(data) {
     this.form = cleanFormData(data);
   }
+  /**
+   * Gets the user data from the rendered form as a plain object.
+   * Converts FormData to an object, handling multiple values for the same key
+   * by converting them into arrays.
+   *
+   * @returns {Object.<string, string|string[]>} An object containing form field names as keys
+   * and their values. Fields with multiple values are stored as arrays.
+   *
+   * @example
+   * // Form with single values
+   * { username: 'john', email: 'john@example.com' }
+   *
+   * @example
+   * // Form with multiple values for same key
+   * { username: 'john', hobbies: ['reading', 'gaming'] }
+   */
   get userData() {
-    const userData = new FormData(this.renderedForm);
+    const form = this.container.querySelector(".formeo-render") || this.renderedForm;
+    if (!form) {
+      return {};
+    }
+    const formEntries = new FormData(form);
     const formDataObj = {};
-    for (const [key, value] of userData.entries()) {
+    for (const [key, value] of formEntries.entries()) {
       if (formDataObj[key]) {
         if (Array.isArray(formDataObj[key])) {
           formDataObj[key].push(value);
@@ -10968,6 +10993,27 @@ let FormeoRenderer$1 = class FormeoRenderer {
     }
     return formDataObj;
   }
+  /**
+   * Gets the user form data as an array of field objects.
+   * Combines user input values with component metadata to create structured field data.
+   *
+   * @returns {Array<{key: string, value: any, label: string}>} An array of field data objects, where each object contains:
+   *   - key: The field identifier
+   *   - value: The user's input value for the field
+   *   - label: The field's label from component configuration (empty string if not found)
+   */
+  get userFormData() {
+    const userFormData = [];
+    for (const [key, value] of Object.entries(this.userData)) {
+      const fieldData = {
+        key,
+        value,
+        label: this.components[baseId(key)]?.config?.label || ""
+      };
+      userFormData.push(fieldData);
+    }
+    return userFormData;
+  }
   set userData(data = {}) {
     const form = this.container.querySelector("form");
     for (const key of Object.keys(data)) {
@@ -10991,6 +11037,7 @@ let FormeoRenderer$1 = class FormeoRenderer {
    * @param {Object} formData
    */
   render(formData = this.form) {
+    this.form = cleanFormData(formData);
     const renderedForm = this.getRenderedForm(formData);
     const existingRenderedForm = this.container.querySelector(".formeo-render");
     if (existingRenderedForm) {
@@ -11003,6 +11050,7 @@ let FormeoRenderer$1 = class FormeoRenderer {
     this.form = cleanFormData(formData);
     const renderCount = document.getElementsByClassName("formeo-render").length;
     const config = {
+      ...this.config,
       tag: "form",
       id: this.form.id,
       className: `formeo-render formeo formeo-rendered-${renderCount}`,
@@ -11028,11 +11076,9 @@ let FormeoRenderer$1 = class FormeoRenderer {
    */
   processColumn = ({ id, ...columnData }) => ({
     ...columnData,
-    ...{
-      id: this.prefixId(id),
-      children: this.processFields(columnData.children),
-      style: `width: ${columnData.config.width || "100%"}`
-    }
+    id: this.prefixId(id),
+    children: this.processFields(columnData.children),
+    style: `width: ${columnData.config.width || "100%"}`
   });
   processRows = (stageId) => this.orderChildren("rows", this.form.stages[stageId].children).reduce((acc, row) => {
     if (row) {
@@ -11075,11 +11121,16 @@ let FormeoRenderer$1 = class FormeoRenderer {
     };
   };
   cloneComponentData = (componentId) => {
-    const { children = [], id, ...rest } = this.components[componentId];
+    const { children = [], id, attrs = {}, ...rest } = this.components[componentId];
+    const updatedAttrs = { ...attrs, "data-clone-of": id };
+    if (rest.tag === "input") {
+      updatedAttrs.name = getName(this.components[componentId]);
+    }
     return {
       ...rest,
-      id: uuid(id),
-      children: children?.length && children.map(({ id: id2 }) => this.cloneComponentData(baseId(id2)))
+      id: RENDER_PREFIX + uuid(id),
+      children: children?.length && children.map(({ id: id2 }) => this.cloneComponentData(baseId(id2))),
+      attrs: updatedAttrs
     };
   };
   addButton = (id) => ({
@@ -11227,12 +11278,12 @@ let FormeoRenderer$1 = class FormeoRenderer {
     return components2;
   };
 };
+const listenTypeMap = [
+  ["input", (c) => ["textarea", "text"].includes(c.type)],
+  ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]
+];
 const LISTEN_TYPE_MAP = (component) => {
-  const typesMap = [
-    ["input", (c) => ["textarea", "text"].includes(c.type)],
-    ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]
-  ];
-  const [listenerEvent] = typesMap.find((typeMap) => typeMap[1](component)) || [false];
+  const [listenerEvent] = listenTypeMap.find((typeMap) => typeMap[1](component)) || [false];
   return listenerEvent;
 };
 if (window !== void 0) {