formeo 4.2.4 → 4.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 4.2.3
4
+ Version: 4.2.4
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -435,7 +435,7 @@ Author: Draggable https://draggable.io
435
435
  window.SmartTooltip = SmartTooltip;
436
436
  }
437
437
  const name$1 = "formeo";
438
- const version$2 = "4.2.3";
438
+ const version$2 = "4.2.4";
439
439
  const pkg = {
440
440
  name: name$1,
441
441
  version: version$2
@@ -5845,6 +5845,12 @@ Author: Draggable https://draggable.io
5845
5845
  fontello: (icon) => `<i class="${iconPrefix}${icon}">${icon}</i>`
5846
5846
  };
5847
5847
  const inputTags = /* @__PURE__ */ new Set(["input", "textarea", "select"]);
5848
+ const stripOn = (str) => str.replace(/^on([A-Z])/, (_, l) => l.toLowerCase());
5849
+ const useCaptureEvts = /* @__PURE__ */ new Set(["focus", "blur"]);
5850
+ const defaultActionHandler = (event) => {
5851
+ const eventName = stripOn(event);
5852
+ return (node, cb) => node.addEventListener(eventName, cb, useCaptureEvts.has(eventName));
5853
+ };
5848
5854
  const getName = (elem = {}) => {
5849
5855
  let name2 = elem?.attrs?.name || elem?.name;
5850
5856
  if (name2) {
@@ -6050,12 +6056,10 @@ Author: Draggable https://draggable.io
6050
6056
  onRender: dom.onRender,
6051
6057
  render: dom.onRender
6052
6058
  };
6053
- const useCaptureEvts = ["focus", "blur"];
6054
- const defaultHandler = (event) => (node2, cb) => node2.addEventListener(event, cb, useCaptureEvts.includes(event));
6055
6059
  return Object.entries(actions2).map(([event, cb]) => {
6056
6060
  const cbs = Array.isArray(cb) ? cb : [cb];
6057
6061
  return cbs.map((cb2) => {
6058
- const action = handlers[event] || defaultHandler(event);
6062
+ const action = handlers[event] || defaultActionHandler(event);
6059
6063
  return action(node, cb2);
6060
6064
  });
6061
6065
  });
@@ -10858,7 +10862,7 @@ Author: Draggable https://draggable.io
10858
10862
  };
10859
10863
  const baseId = (id) => {
10860
10864
  const match2 = id.match(UUID_REGEXP);
10861
- return match2?.[0] || id``;
10865
+ return match2?.[0] || id;
10862
10866
  };
10863
10867
  const isVisible = (elem) => {
10864
10868
  if (!elem) return false;
@@ -10943,12 +10947,13 @@ Author: Draggable https://draggable.io
10943
10947
  };
10944
10948
  let FormeoRenderer$1 = class FormeoRenderer {
10945
10949
  constructor(opts, formDataArg) {
10946
- const { renderContainer, elements, formData } = processOptions(opts);
10947
- this.container = renderContainer;
10950
+ const { renderContainer: container, elements, formData, config } = processOptions(opts);
10951
+ this.container = container;
10948
10952
  this.form = cleanFormData(formDataArg || formData);
10949
- this.dom = dom;
10950
- this.components = /* @__PURE__ */ Object.create(null);
10951
10953
  this.elements = elements;
10954
+ this.config = config;
10955
+ this.components = /* @__PURE__ */ Object.create(null);
10956
+ this.dom = dom;
10952
10957
  }
10953
10958
  get formData() {
10954
10959
  return this.form;
@@ -10956,10 +10961,30 @@ Author: Draggable https://draggable.io
10956
10961
  set formData(data) {
10957
10962
  this.form = cleanFormData(data);
10958
10963
  }
10964
+ /**
10965
+ * Gets the user data from the rendered form as a plain object.
10966
+ * Converts FormData to an object, handling multiple values for the same key
10967
+ * by converting them into arrays.
10968
+ *
10969
+ * @returns {Object.<string, string|string[]>} An object containing form field names as keys
10970
+ * and their values. Fields with multiple values are stored as arrays.
10971
+ *
10972
+ * @example
10973
+ * // Form with single values
10974
+ * { username: 'john', email: 'john@example.com' }
10975
+ *
10976
+ * @example
10977
+ * // Form with multiple values for same key
10978
+ * { username: 'john', hobbies: ['reading', 'gaming'] }
10979
+ */
10959
10980
  get userData() {
10960
- const userData = new FormData(this.renderedForm);
10981
+ const form = this.container.querySelector(".formeo-render") || this.renderedForm;
10982
+ if (!form) {
10983
+ return {};
10984
+ }
10985
+ const formEntries = new FormData(form);
10961
10986
  const formDataObj = {};
10962
- for (const [key, value] of userData.entries()) {
10987
+ for (const [key, value] of formEntries.entries()) {
10963
10988
  if (formDataObj[key]) {
10964
10989
  if (Array.isArray(formDataObj[key])) {
10965
10990
  formDataObj[key].push(value);
@@ -10972,6 +10997,27 @@ Author: Draggable https://draggable.io
10972
10997
  }
10973
10998
  return formDataObj;
10974
10999
  }
11000
+ /**
11001
+ * Gets the user form data as an array of field objects.
11002
+ * Combines user input values with component metadata to create structured field data.
11003
+ *
11004
+ * @returns {Array<{key: string, value: any, label: string}>} An array of field data objects, where each object contains:
11005
+ * - key: The field identifier
11006
+ * - value: The user's input value for the field
11007
+ * - label: The field's label from component configuration (empty string if not found)
11008
+ */
11009
+ get userFormData() {
11010
+ const userFormData = [];
11011
+ for (const [key, value] of Object.entries(this.userData)) {
11012
+ const fieldData = {
11013
+ key,
11014
+ value,
11015
+ label: this.components[baseId(key)]?.config?.label || ""
11016
+ };
11017
+ userFormData.push(fieldData);
11018
+ }
11019
+ return userFormData;
11020
+ }
10975
11021
  set userData(data = {}) {
10976
11022
  const form = this.container.querySelector("form");
10977
11023
  for (const key of Object.keys(data)) {
@@ -10995,6 +11041,7 @@ Author: Draggable https://draggable.io
10995
11041
  * @param {Object} formData
10996
11042
  */
10997
11043
  render(formData = this.form) {
11044
+ this.form = cleanFormData(formData);
10998
11045
  const renderedForm = this.getRenderedForm(formData);
10999
11046
  const existingRenderedForm = this.container.querySelector(".formeo-render");
11000
11047
  if (existingRenderedForm) {
@@ -11007,6 +11054,7 @@ Author: Draggable https://draggable.io
11007
11054
  this.form = cleanFormData(formData);
11008
11055
  const renderCount = document.getElementsByClassName("formeo-render").length;
11009
11056
  const config = {
11057
+ ...this.config,
11010
11058
  tag: "form",
11011
11059
  id: this.form.id,
11012
11060
  className: `formeo-render formeo formeo-rendered-${renderCount}`,
@@ -11032,11 +11080,9 @@ Author: Draggable https://draggable.io
11032
11080
  */
11033
11081
  processColumn = ({ id, ...columnData }) => ({
11034
11082
  ...columnData,
11035
- ...{
11036
- id: this.prefixId(id),
11037
- children: this.processFields(columnData.children),
11038
- style: `width: ${columnData.config.width || "100%"}`
11039
- }
11083
+ id: this.prefixId(id),
11084
+ children: this.processFields(columnData.children),
11085
+ style: `width: ${columnData.config.width || "100%"}`
11040
11086
  });
11041
11087
  processRows = (stageId) => this.orderChildren("rows", this.form.stages[stageId].children).reduce((acc, row) => {
11042
11088
  if (row) {
@@ -11079,11 +11125,16 @@ Author: Draggable https://draggable.io
11079
11125
  };
11080
11126
  };
11081
11127
  cloneComponentData = (componentId) => {
11082
- const { children = [], id, ...rest } = this.components[componentId];
11128
+ const { children = [], id, attrs = {}, ...rest } = this.components[componentId];
11129
+ const updatedAttrs = { ...attrs, "data-clone-of": id };
11130
+ if (rest.tag === "input") {
11131
+ updatedAttrs.name = getName(this.components[componentId]);
11132
+ }
11083
11133
  return {
11084
11134
  ...rest,
11085
- id: uuid(id),
11086
- children: children?.length && children.map(({ id: id2 }) => this.cloneComponentData(baseId(id2)))
11135
+ id: RENDER_PREFIX + uuid(id),
11136
+ children: children?.length && children.map(({ id: id2 }) => this.cloneComponentData(baseId(id2))),
11137
+ attrs: updatedAttrs
11087
11138
  };
11088
11139
  };
11089
11140
  addButton = (id) => ({
@@ -11231,12 +11282,12 @@ Author: Draggable https://draggable.io
11231
11282
  return components2;
11232
11283
  };
11233
11284
  };
11285
+ const listenTypeMap = [
11286
+ ["input", (c) => ["textarea", "text"].includes(c.type)],
11287
+ ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]
11288
+ ];
11234
11289
  const LISTEN_TYPE_MAP = (component) => {
11235
- const typesMap = [
11236
- ["input", (c) => ["textarea", "text"].includes(c.type)],
11237
- ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]
11238
- ];
11239
- const [listenerEvent] = typesMap.find((typeMap) => typeMap[1](component)) || [false];
11290
+ const [listenerEvent] = listenTypeMap.find((typeMap) => typeMap[1](component)) || [false];
11240
11291
  return listenerEvent;
11241
11292
  };
11242
11293
  if (window !== void 0) {
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 4.2.3
4
+ Version: 4.2.4
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 4.2.3
4
+ Version: 4.2.4
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 4.2.3
4
+ Version: 4.2.4
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 4.2.3
4
+ Version: 4.2.4
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 4.2.3
4
+ Version: 4.2.4
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -1 +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.3</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>
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.4</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>
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 4.2.3
4
+ Version: 4.2.4
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -433,7 +433,7 @@ if (window !== void 0) {
433
433
  window.SmartTooltip = SmartTooltip;
434
434
  }
435
435
  const name$1 = "formeo";
436
- const version$2 = "4.2.3";
436
+ const version$2 = "4.2.4";
437
437
  const pkg = {
438
438
  name: name$1,
439
439
  version: version$2
@@ -5843,6 +5843,12 @@ const iconFontTemplates = {
5843
5843
  fontello: (icon) => `<i class="${iconPrefix}${icon}">${icon}</i>`
5844
5844
  };
5845
5845
  const inputTags = /* @__PURE__ */ new Set(["input", "textarea", "select"]);
5846
+ const stripOn = (str) => str.replace(/^on([A-Z])/, (_, l) => l.toLowerCase());
5847
+ const useCaptureEvts = /* @__PURE__ */ new Set(["focus", "blur"]);
5848
+ const defaultActionHandler = (event) => {
5849
+ const eventName = stripOn(event);
5850
+ return (node, cb) => node.addEventListener(eventName, cb, useCaptureEvts.has(eventName));
5851
+ };
5846
5852
  const getName = (elem = {}) => {
5847
5853
  let name2 = elem?.attrs?.name || elem?.name;
5848
5854
  if (name2) {
@@ -6048,12 +6054,10 @@ class DOM {
6048
6054
  onRender: dom.onRender,
6049
6055
  render: dom.onRender
6050
6056
  };
6051
- const useCaptureEvts = ["focus", "blur"];
6052
- const defaultHandler = (event) => (node2, cb) => node2.addEventListener(event, cb, useCaptureEvts.includes(event));
6053
6057
  return Object.entries(actions2).map(([event, cb]) => {
6054
6058
  const cbs = Array.isArray(cb) ? cb : [cb];
6055
6059
  return cbs.map((cb2) => {
6056
- const action = handlers[event] || defaultHandler(event);
6060
+ const action = handlers[event] || defaultActionHandler(event);
6057
6061
  return action(node, cb2);
6058
6062
  });
6059
6063
  });
@@ -10856,7 +10860,7 @@ const processOptions = ({ editorContainer, renderContainer, formData, ...opts })
10856
10860
  };
10857
10861
  const baseId = (id) => {
10858
10862
  const match2 = id.match(UUID_REGEXP);
10859
- return match2?.[0] || id``;
10863
+ return match2?.[0] || id;
10860
10864
  };
10861
10865
  const isVisible = (elem) => {
10862
10866
  if (!elem) return false;
@@ -10941,12 +10945,13 @@ const targetPropertyMap = {
10941
10945
  };
10942
10946
  let FormeoRenderer$1 = class FormeoRenderer {
10943
10947
  constructor(opts, formDataArg) {
10944
- const { renderContainer, elements, formData } = processOptions(opts);
10945
- this.container = renderContainer;
10948
+ const { renderContainer: container, elements, formData, config } = processOptions(opts);
10949
+ this.container = container;
10946
10950
  this.form = cleanFormData(formDataArg || formData);
10947
- this.dom = dom;
10948
- this.components = /* @__PURE__ */ Object.create(null);
10949
10951
  this.elements = elements;
10952
+ this.config = config;
10953
+ this.components = /* @__PURE__ */ Object.create(null);
10954
+ this.dom = dom;
10950
10955
  }
10951
10956
  get formData() {
10952
10957
  return this.form;
@@ -10954,10 +10959,30 @@ let FormeoRenderer$1 = class FormeoRenderer {
10954
10959
  set formData(data) {
10955
10960
  this.form = cleanFormData(data);
10956
10961
  }
10962
+ /**
10963
+ * Gets the user data from the rendered form as a plain object.
10964
+ * Converts FormData to an object, handling multiple values for the same key
10965
+ * by converting them into arrays.
10966
+ *
10967
+ * @returns {Object.<string, string|string[]>} An object containing form field names as keys
10968
+ * and their values. Fields with multiple values are stored as arrays.
10969
+ *
10970
+ * @example
10971
+ * // Form with single values
10972
+ * { username: 'john', email: 'john@example.com' }
10973
+ *
10974
+ * @example
10975
+ * // Form with multiple values for same key
10976
+ * { username: 'john', hobbies: ['reading', 'gaming'] }
10977
+ */
10957
10978
  get userData() {
10958
- const userData = new FormData(this.renderedForm);
10979
+ const form = this.container.querySelector(".formeo-render") || this.renderedForm;
10980
+ if (!form) {
10981
+ return {};
10982
+ }
10983
+ const formEntries = new FormData(form);
10959
10984
  const formDataObj = {};
10960
- for (const [key, value] of userData.entries()) {
10985
+ for (const [key, value] of formEntries.entries()) {
10961
10986
  if (formDataObj[key]) {
10962
10987
  if (Array.isArray(formDataObj[key])) {
10963
10988
  formDataObj[key].push(value);
@@ -10970,6 +10995,27 @@ let FormeoRenderer$1 = class FormeoRenderer {
10970
10995
  }
10971
10996
  return formDataObj;
10972
10997
  }
10998
+ /**
10999
+ * Gets the user form data as an array of field objects.
11000
+ * Combines user input values with component metadata to create structured field data.
11001
+ *
11002
+ * @returns {Array<{key: string, value: any, label: string}>} An array of field data objects, where each object contains:
11003
+ * - key: The field identifier
11004
+ * - value: The user's input value for the field
11005
+ * - label: The field's label from component configuration (empty string if not found)
11006
+ */
11007
+ get userFormData() {
11008
+ const userFormData = [];
11009
+ for (const [key, value] of Object.entries(this.userData)) {
11010
+ const fieldData = {
11011
+ key,
11012
+ value,
11013
+ label: this.components[baseId(key)]?.config?.label || ""
11014
+ };
11015
+ userFormData.push(fieldData);
11016
+ }
11017
+ return userFormData;
11018
+ }
10973
11019
  set userData(data = {}) {
10974
11020
  const form = this.container.querySelector("form");
10975
11021
  for (const key of Object.keys(data)) {
@@ -10993,6 +11039,7 @@ let FormeoRenderer$1 = class FormeoRenderer {
10993
11039
  * @param {Object} formData
10994
11040
  */
10995
11041
  render(formData = this.form) {
11042
+ this.form = cleanFormData(formData);
10996
11043
  const renderedForm = this.getRenderedForm(formData);
10997
11044
  const existingRenderedForm = this.container.querySelector(".formeo-render");
10998
11045
  if (existingRenderedForm) {
@@ -11005,6 +11052,7 @@ let FormeoRenderer$1 = class FormeoRenderer {
11005
11052
  this.form = cleanFormData(formData);
11006
11053
  const renderCount = document.getElementsByClassName("formeo-render").length;
11007
11054
  const config = {
11055
+ ...this.config,
11008
11056
  tag: "form",
11009
11057
  id: this.form.id,
11010
11058
  className: `formeo-render formeo formeo-rendered-${renderCount}`,
@@ -11030,11 +11078,9 @@ let FormeoRenderer$1 = class FormeoRenderer {
11030
11078
  */
11031
11079
  processColumn = ({ id, ...columnData }) => ({
11032
11080
  ...columnData,
11033
- ...{
11034
- id: this.prefixId(id),
11035
- children: this.processFields(columnData.children),
11036
- style: `width: ${columnData.config.width || "100%"}`
11037
- }
11081
+ id: this.prefixId(id),
11082
+ children: this.processFields(columnData.children),
11083
+ style: `width: ${columnData.config.width || "100%"}`
11038
11084
  });
11039
11085
  processRows = (stageId) => this.orderChildren("rows", this.form.stages[stageId].children).reduce((acc, row) => {
11040
11086
  if (row) {
@@ -11077,11 +11123,16 @@ let FormeoRenderer$1 = class FormeoRenderer {
11077
11123
  };
11078
11124
  };
11079
11125
  cloneComponentData = (componentId) => {
11080
- const { children = [], id, ...rest } = this.components[componentId];
11126
+ const { children = [], id, attrs = {}, ...rest } = this.components[componentId];
11127
+ const updatedAttrs = { ...attrs, "data-clone-of": id };
11128
+ if (rest.tag === "input") {
11129
+ updatedAttrs.name = getName(this.components[componentId]);
11130
+ }
11081
11131
  return {
11082
11132
  ...rest,
11083
- id: uuid(id),
11084
- children: children?.length && children.map(({ id: id2 }) => this.cloneComponentData(baseId(id2)))
11133
+ id: RENDER_PREFIX + uuid(id),
11134
+ children: children?.length && children.map(({ id: id2 }) => this.cloneComponentData(baseId(id2))),
11135
+ attrs: updatedAttrs
11085
11136
  };
11086
11137
  };
11087
11138
  addButton = (id) => ({
@@ -11229,12 +11280,12 @@ let FormeoRenderer$1 = class FormeoRenderer {
11229
11280
  return components2;
11230
11281
  };
11231
11282
  };
11283
+ const listenTypeMap = [
11284
+ ["input", (c) => ["textarea", "text"].includes(c.type)],
11285
+ ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]
11286
+ ];
11232
11287
  const LISTEN_TYPE_MAP = (component) => {
11233
- const typesMap = [
11234
- ["input", (c) => ["textarea", "text"].includes(c.type)],
11235
- ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]
11236
- ];
11237
- const [listenerEvent] = typesMap.find((typeMap) => typeMap[1](component)) || [false];
11288
+ const [listenerEvent] = listenTypeMap.find((typeMap) => typeMap[1](component)) || [false];
11238
11289
  return listenerEvent;
11239
11290
  };
11240
11291
  if (window !== void 0) {
package/dist/formeo.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 4.2.3
4
+ Version: 4.2.4
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7