formeo 5.3.2 → 5.3.3

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.1
+Version: 5.3.2
 Author: Draggable https://draggable.io
 */
 
@@ -8068,7 +8068,7 @@ Author: Draggable https://draggable.io
 	})), name$1, version$2, type, main, module$1, unpkg, exports$1, files, homepage, repository, author, contributors, bugs, description, keywords, ignore, config, scripts, devDependencies, dependencies, release, commitlint, package_default;
 	var init_package = __esmMin((() => {
 		name$1 = "formeo";
-		version$2 = "5.3.1";
+		version$2 = "5.3.2";
 		type = "module";
 		main = "dist/formeo.cjs.js";
 		module$1 = "dist/formeo.es.js";
@@ -8681,7 +8681,7 @@ Author: Draggable https://draggable.io
 	function trimKeyPrefix(key) {
 		return key.replaceAll(keyPrefixRegex, "");
 	}
-	var toTitleCaseLowers, toTitleCaseRegex, regexSpace, slugify, splitAddress, slugifyAddress, extractTextFromHtml, truncateByWord, keyPrefixRegex;
+	var toTitleCaseLowers, toTitleCaseRegex, regexSpace, slugify, splitAddress, slugifyAddress, extractTextFromHtml, truncateByWord, keyPrefixRegex, groupInputName;
 	var init_string = __esmMin((() => {
 		toTitleCaseLowers = "a an and as at but by for for from in into near nor of on onto or the to with".split(" ").map((lower) => String.raw`\s${lower}\s`);
 		toTitleCaseRegex = new RegExp(String.raw`(?!${toTitleCaseLowers.join("|")})\w\S*`, "g");
@@ -8718,6 +8718,7 @@ Author: Draggable https://draggable.io
 			return truncatedWord;
 		};
 		keyPrefixRegex = /^attrs\.|^meta\.|^options\.|^config\./g;
+		groupInputName = (name, fieldType, optionCount) => fieldType === "checkbox" && optionCount > 1 && name && !name.endsWith("[]") ? `${name}[]` : name;
 	}));
 	//#endregion
 	//#region src/lib/js/common/events.js
@@ -17220,7 +17221,7 @@ Author: Draggable https://draggable.io
 				const { action, attrs = {} } = elem;
 				const fieldType = attrs.type || elem.tag;
 				const id = attrs.id || elem.id;
-				const name = !isPreview && attrs.name || id;
+				const name = isPreview ? id : groupInputName(attrs.name || id, fieldType, options.length);
 				const sharedInputAttrs = Object.fromEntries(OPTION_INPUT_ATTRS.filter((key) => key in attrs).map((key) => [key, attrs[key]]));
 				if (attrs.required) sharedInputAttrs.required = fieldType !== "checkbox" || !options.some(({ selected, checked }) => selected || checked);
 				const optionMap = (option, i) => {
@@ -18486,12 +18487,12 @@ Author: Draggable https://draggable.io
 		* @return {Object|undefined}
 		*/
 		componentByName(name) {
-			return this.components[baseId(name)] || Object.values(this.components).find((component) => component.attrs?.name === name);
+			return this.components[baseId(name)] || Object.values(this.components).find((component) => component.attrs?.name === name || component.attrs?.name === `${name}[]`);
 		}
 		set userData(data = {}) {
 			const form = this.container.querySelector("form");
 			for (const key of Object.keys(data)) {
-				const fields = form.elements[key];
+				const fields = form.elements[key] ?? form.elements[`${key}[]`];
 				const checkables = checkableInputs(fields);
 				if (checkables?.[0].type === "checkbox") {
 					const values = Array.isArray(data[key]) ? data[key] : [data[key]];
@@ -18777,11 +18778,12 @@ Author: Draggable https://draggable.io
 		};
 		getComponents = (address) => {
 			const components = [];
-			const componentId = address.slice(address.indexOf(".") + 1);
-			components.push(...this.renderedForm.querySelectorAll(`[name=f-${componentId}]`));
+			const name = `f-${address.slice(address.indexOf(".") + 1)}`;
+			components.push(...this.renderedForm.querySelectorAll(`[name="${name}"], [name="${name}[]"]`));
 			return components;
 		};
 	};
+	var fieldKey = (key) => key.endsWith("[]") ? key.slice(0, -2) : key;
 	/**
 	* Converts a rendered form's fields to a plain object, the same shape the `userData`
 	* getter exposes. Handles multiple values for the same key by converting them to arrays.
@@ -18792,9 +18794,12 @@ Author: Draggable https://draggable.io
 		if (!form) return {};
 		const formEntries = new FormData(form);
 		const formDataObj = {};
-		for (const [key, value] of formEntries.entries()) if (Object.hasOwn(formDataObj, key)) if (Array.isArray(formDataObj[key])) formDataObj[key].push(value);
-		else formDataObj[key] = [formDataObj[key], value];
-		else formDataObj[key] = value;
+		for (const [rawKey, value] of formEntries.entries()) {
+			const key = fieldKey(rawKey);
+			if (Object.hasOwn(formDataObj, key)) if (Array.isArray(formDataObj[key])) formDataObj[key].push(value);
+			else formDataObj[key] = [formDataObj[key], value];
+			else formDataObj[key] = value;
+		}
 		return formDataObj;
 	};
 	var isCheckable = (elem) => ["checkbox", "radio"].includes(elem?.type);

package/dist/demo/assets/js/html.min.js

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

package/dist/demo/assets/js/layout.min.js

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

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.1
+Version: 5.3.2
 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: 5.3.1
+Version: 5.3.2
 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">v5.3.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>
+<!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.3.2</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>

package/dist/formeo.cjs.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.1
+Version: 5.3.2
 Author: Draggable https://draggable.io
 */
 
@@ -8065,7 +8065,7 @@ var require_mergeWith = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 })), name$1, version$2, type, main, module$1, unpkg, exports$1, files, homepage, repository, author, contributors, bugs, description, keywords, ignore, config, scripts, devDependencies, dependencies, release, commitlint, package_default;
 var init_package = __esmMin((() => {
 	name$1 = "formeo";
-	version$2 = "5.3.1";
+	version$2 = "5.3.2";
 	type = "module";
 	main = "dist/formeo.cjs.js";
 	module$1 = "dist/formeo.es.js";
@@ -8678,7 +8678,7 @@ function toTitleCase(str) {
 function trimKeyPrefix(key) {
 	return key.replaceAll(keyPrefixRegex, "");
 }
-var toTitleCaseLowers, toTitleCaseRegex, regexSpace, slugify, splitAddress, slugifyAddress, extractTextFromHtml, truncateByWord, keyPrefixRegex;
+var toTitleCaseLowers, toTitleCaseRegex, regexSpace, slugify, splitAddress, slugifyAddress, extractTextFromHtml, truncateByWord, keyPrefixRegex, groupInputName;
 var init_string = __esmMin((() => {
 	toTitleCaseLowers = "a an and as at but by for for from in into near nor of on onto or the to with".split(" ").map((lower) => String.raw`\s${lower}\s`);
 	toTitleCaseRegex = new RegExp(String.raw`(?!${toTitleCaseLowers.join("|")})\w\S*`, "g");
@@ -8715,6 +8715,7 @@ var init_string = __esmMin((() => {
 		return truncatedWord;
 	};
 	keyPrefixRegex = /^attrs\.|^meta\.|^options\.|^config\./g;
+	groupInputName = (name, fieldType, optionCount) => fieldType === "checkbox" && optionCount > 1 && name && !name.endsWith("[]") ? `${name}[]` : name;
 }));
 //#endregion
 //#region src/lib/js/common/events.js
@@ -17217,7 +17218,7 @@ var init_dom = __esmMin((() => {
 			const { action, attrs = {} } = elem;
 			const fieldType = attrs.type || elem.tag;
 			const id = attrs.id || elem.id;
-			const name = !isPreview && attrs.name || id;
+			const name = isPreview ? id : groupInputName(attrs.name || id, fieldType, options.length);
 			const sharedInputAttrs = Object.fromEntries(OPTION_INPUT_ATTRS.filter((key) => key in attrs).map((key) => [key, attrs[key]]));
 			if (attrs.required) sharedInputAttrs.required = fieldType !== "checkbox" || !options.some(({ selected, checked }) => selected || checked);
 			const optionMap = (option, i) => {
@@ -18483,12 +18484,12 @@ var FormeoRenderer$1 = class {
 	* @return {Object|undefined}
 	*/
 	componentByName(name) {
-		return this.components[baseId(name)] || Object.values(this.components).find((component) => component.attrs?.name === name);
+		return this.components[baseId(name)] || Object.values(this.components).find((component) => component.attrs?.name === name || component.attrs?.name === `${name}[]`);
 	}
 	set userData(data = {}) {
 		const form = this.container.querySelector("form");
 		for (const key of Object.keys(data)) {
-			const fields = form.elements[key];
+			const fields = form.elements[key] ?? form.elements[`${key}[]`];
 			const checkables = checkableInputs(fields);
 			if (checkables?.[0].type === "checkbox") {
 				const values = Array.isArray(data[key]) ? data[key] : [data[key]];
@@ -18774,11 +18775,12 @@ var FormeoRenderer$1 = class {
 	};
 	getComponents = (address) => {
 		const components = [];
-		const componentId = address.slice(address.indexOf(".") + 1);
-		components.push(...this.renderedForm.querySelectorAll(`[name=f-${componentId}]`));
+		const name = `f-${address.slice(address.indexOf(".") + 1)}`;
+		components.push(...this.renderedForm.querySelectorAll(`[name="${name}"], [name="${name}[]"]`));
 		return components;
 	};
 };
+var fieldKey = (key) => key.endsWith("[]") ? key.slice(0, -2) : key;
 /**
 * Converts a rendered form's fields to a plain object, the same shape the `userData`
 * getter exposes. Handles multiple values for the same key by converting them to arrays.
@@ -18789,9 +18791,12 @@ var userDataOf = (form) => {
 	if (!form) return {};
 	const formEntries = new FormData(form);
 	const formDataObj = {};
-	for (const [key, value] of formEntries.entries()) if (Object.hasOwn(formDataObj, key)) if (Array.isArray(formDataObj[key])) formDataObj[key].push(value);
-	else formDataObj[key] = [formDataObj[key], value];
-	else formDataObj[key] = value;
+	for (const [rawKey, value] of formEntries.entries()) {
+		const key = fieldKey(rawKey);
+		if (Object.hasOwn(formDataObj, key)) if (Array.isArray(formDataObj[key])) formDataObj[key].push(value);
+		else formDataObj[key] = [formDataObj[key], value];
+		else formDataObj[key] = value;
+	}
 	return formDataObj;
 };
 var isCheckable = (elem) => ["checkbox", "radio"].includes(elem?.type);

package/dist/formeo.css

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

package/dist/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.1
+Version: 5.3.2
 Author: Draggable https://draggable.io
 */
 
@@ -8064,7 +8064,7 @@ var require_mergeWith = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 })), name$1, version$2, type, main, module$1, unpkg, exports$1, files, homepage, repository, author, contributors, bugs, description, keywords, ignore, config, scripts, devDependencies, dependencies, release, commitlint, package_default;
 var init_package = __esmMin((() => {
 	name$1 = "formeo";
-	version$2 = "5.3.1";
+	version$2 = "5.3.2";
 	type = "module";
 	main = "dist/formeo.cjs.js";
 	module$1 = "dist/formeo.es.js";
@@ -8677,7 +8677,7 @@ function toTitleCase(str) {
 function trimKeyPrefix(key) {
 	return key.replaceAll(keyPrefixRegex, "");
 }
-var toTitleCaseLowers, toTitleCaseRegex, regexSpace, slugify, splitAddress, slugifyAddress, extractTextFromHtml, truncateByWord, keyPrefixRegex;
+var toTitleCaseLowers, toTitleCaseRegex, regexSpace, slugify, splitAddress, slugifyAddress, extractTextFromHtml, truncateByWord, keyPrefixRegex, groupInputName;
 var init_string = __esmMin((() => {
 	toTitleCaseLowers = "a an and as at but by for for from in into near nor of on onto or the to with".split(" ").map((lower) => String.raw`\s${lower}\s`);
 	toTitleCaseRegex = new RegExp(String.raw`(?!${toTitleCaseLowers.join("|")})\w\S*`, "g");
@@ -8714,6 +8714,7 @@ var init_string = __esmMin((() => {
 		return truncatedWord;
 	};
 	keyPrefixRegex = /^attrs\.|^meta\.|^options\.|^config\./g;
+	groupInputName = (name, fieldType, optionCount) => fieldType === "checkbox" && optionCount > 1 && name && !name.endsWith("[]") ? `${name}[]` : name;
 }));
 //#endregion
 //#region src/lib/js/common/events.js
@@ -17216,7 +17217,7 @@ var init_dom = __esmMin((() => {
 			const { action, attrs = {} } = elem;
 			const fieldType = attrs.type || elem.tag;
 			const id = attrs.id || elem.id;
-			const name = !isPreview && attrs.name || id;
+			const name = isPreview ? id : groupInputName(attrs.name || id, fieldType, options.length);
 			const sharedInputAttrs = Object.fromEntries(OPTION_INPUT_ATTRS.filter((key) => key in attrs).map((key) => [key, attrs[key]]));
 			if (attrs.required) sharedInputAttrs.required = fieldType !== "checkbox" || !options.some(({ selected, checked }) => selected || checked);
 			const optionMap = (option, i) => {
@@ -18482,12 +18483,12 @@ var FormeoRenderer$1 = class {
 	* @return {Object|undefined}
 	*/
 	componentByName(name) {
-		return this.components[baseId(name)] || Object.values(this.components).find((component) => component.attrs?.name === name);
+		return this.components[baseId(name)] || Object.values(this.components).find((component) => component.attrs?.name === name || component.attrs?.name === `${name}[]`);
 	}
 	set userData(data = {}) {
 		const form = this.container.querySelector("form");
 		for (const key of Object.keys(data)) {
-			const fields = form.elements[key];
+			const fields = form.elements[key] ?? form.elements[`${key}[]`];
 			const checkables = checkableInputs(fields);
 			if (checkables?.[0].type === "checkbox") {
 				const values = Array.isArray(data[key]) ? data[key] : [data[key]];
@@ -18773,11 +18774,12 @@ var FormeoRenderer$1 = class {
 	};
 	getComponents = (address) => {
 		const components = [];
-		const componentId = address.slice(address.indexOf(".") + 1);
-		components.push(...this.renderedForm.querySelectorAll(`[name=f-${componentId}]`));
+		const name = `f-${address.slice(address.indexOf(".") + 1)}`;
+		components.push(...this.renderedForm.querySelectorAll(`[name="${name}"], [name="${name}[]"]`));
 		return components;
 	};
 };
+var fieldKey = (key) => key.endsWith("[]") ? key.slice(0, -2) : key;
 /**
 * Converts a rendered form's fields to a plain object, the same shape the `userData`
 * getter exposes. Handles multiple values for the same key by converting them to arrays.
@@ -18788,9 +18790,12 @@ var userDataOf = (form) => {
 	if (!form) return {};
 	const formEntries = new FormData(form);
 	const formDataObj = {};
-	for (const [key, value] of formEntries.entries()) if (Object.hasOwn(formDataObj, key)) if (Array.isArray(formDataObj[key])) formDataObj[key].push(value);
-	else formDataObj[key] = [formDataObj[key], value];
-	else formDataObj[key] = value;
+	for (const [rawKey, value] of formEntries.entries()) {
+		const key = fieldKey(rawKey);
+		if (Object.hasOwn(formDataObj, key)) if (Array.isArray(formDataObj[key])) formDataObj[key].push(value);
+		else formDataObj[key] = [formDataObj[key], value];
+		else formDataObj[key] = value;
+	}
 	return formDataObj;
 };
 var isCheckable = (elem) => ["checkbox", "radio"].includes(elem?.type);