formeo 5.3.1 → 5.3.3

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.0
+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.0";
+		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
@@ -14525,6 +14526,23 @@ Author: Draggable https://draggable.io
 		});
 	}));
 	//#endregion
+	//#region src/lib/js/components/fields/control-attr-config.mjs
+	var getControlConfig, controlAttrPanelConfig;
+	var init_control_attr_config = __esmMin((() => {
+		init_utils();
+		getControlConfig = (control) => control?.controlData?.config ?? control?.config;
+		controlAttrPanelConfig = (...sources) => {
+			const collect = (key) => unique(sources.flatMap((source) => Array.isArray(source?.[key]) ? source[key] : []));
+			const disabled = collect("disabledAttrs");
+			const locked = collect("lockedAttrs");
+			if (!disabled.length && !locked.length) return null;
+			return { panels: { attrs: {
+				disabled,
+				locked
+			} } };
+		};
+	}));
+	//#endregion
 	//#region src/lib/js/components/fields/field.js
 	var field_exports = /* @__PURE__ */ __exportAll({ default: () => Field });
 	var checkableTypes, isSelectableType, Field;
@@ -14535,6 +14553,8 @@ Author: Draggable https://draggable.io
 		init_utils();
 		init_constants();
 		init_component();
+		init_components();
+		init_control_attr_config();
 		checkableTypes = new Set(["checkbox", "radio"]);
 		isSelectableType = new Set([
 			"radio",
@@ -14550,11 +14570,12 @@ Author: Draggable https://draggable.io
 			*/
 			constructor(fieldData = Object.create(null)) {
 				super("field", fieldData);
+				this.controlId = this.get("config.controlId") || this.get("meta.id");
+				this.applyControlAttrConfig();
 				this.debouncedUpdateEditPanels = debounce(this.updateEditPanels);
 				this.debouncedUpdatePreview = debounce(this.updatePreview);
 				this.label = dom.create(this.labelConfig);
 				this.preview = this.fieldPreview();
-				this.controlId = this.get("config.controlId") || this.get("meta.id");
 				const actionButtons = this.getActionButtons();
 				const hasEditButton = this.actionButtons.some((child) => child.meta?.id === "edit");
 				this.updateEditPanels();
@@ -14575,6 +14596,15 @@ Author: Draggable https://draggable.io
 				this.dom = field;
 				this.isEditing = false;
 			}
+			/**
+			* Honour control-level `disabledAttrs` / `lockedAttrs` by merging them into this field's
+			* panels.attrs config. Reads both the registered control definition and the field's own
+			* saved config so forms saved before a control changed still pick up its rules.
+			*/
+			applyControlAttrConfig() {
+				const attrConfig = controlAttrPanelConfig(getControlConfig(components.controls?.get(this.controlId)), this.get("config"));
+				if (attrConfig) this.config = { [this.id]: attrConfig };
+			}
 			get labelConfig() {
 				if (!!this.get("config.hideLabel")) return null;
 				const { label, editorLabel, disableHtmlLabel, helpText, tooltip } = this.get("config");
@@ -15018,7 +15048,7 @@ Author: Draggable https://draggable.io
 					},
 					config: {
 						label: s.get("controls.form.radio-group"),
-						disabled: ["attrs.type"]
+						disabledAttrs: ["type"]
 					},
 					meta: {
 						group: "common",
@@ -17191,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) => {
@@ -18457,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]];
@@ -18748,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.
@@ -18763,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);