formeo 5.3.1 → 5.3.3

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

@@ -1,8 +1,8 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.0
+Version: 5.3.2
 Author: Draggable https://draggable.io
 */
 
-import{i as t,n as i,r as l,t as o}from"./demo.min.js";var c=["button","submit","reset"].map(e=>({label:e,value:e}));c[0].selected=!0;var p=class extends o{constructor(e={}){const r=l({tag:"button",attrs:{className:[{label:"grouped",value:"f-btn-group"},{label:"ungrouped",value:"f-field-group"}]},config:{label:t.get("controls.form.button"),hideLabel:!0},meta:{group:"common",icon:"button",id:"button"},options:[{label:t.get("button"),type:c,className:[{label:"default",value:"",selected:!0},{label:"primary",value:"primary"},{label:"danger",value:"error"},{label:"success",value:"success"},{label:"warning",value:"warning"}]}]},e);super(r)}},s=({type:e,isMultiple:r=!1,count:u=3})=>Array.from({length:u},(a,n)=>n+1).map(a=>{const n=e==="checkbox"||r?"checked":"selected";return{label:t.get("labelCount",{label:i(e),count:a}),value:`${e}-${a}`,[n]:!a}}),d=class extends o{constructor(){const e={tag:"input",attrs:{type:"checkbox",required:!1},config:{label:t.get("controls.form.checkbox-group"),disabledAttrs:["type"]},meta:{group:"common",icon:"checkbox",id:"checkbox"},options:s({type:"checkbox",count:1})};super(e)}},m=class extends o{constructor(){const e={tag:"input",attrs:{type:"date",required:!1,className:""},config:{label:t.get("controls.form.input.date")},meta:{group:"common",icon:"calendar",id:"date-input"}};super(e)}},g=class extends o{constructor(){const e={tag:"input",attrs:{type:"file",required:!1},config:{label:t.get("fileUpload")},meta:{group:"common",icon:"upload",id:"upload"}};super(e)}},b=class extends o{constructor(){const e={tag:"input",attrs:{type:"hidden",value:""},config:{label:t.get("hidden"),hideLabel:!0},meta:{group:"common",icon:"hidden",id:"hidden"}};super(e)}},f=class extends o{constructor(){const e={tag:"input",attrs:{type:"number",required:!1,className:""},config:{label:t.get("number")},meta:{group:"common",icon:"hash",id:"number"}};super(e)}},x=class extends o{constructor(){const e={tag:"input",attrs:{required:!1,type:"text",className:""},config:{label:t.get("controls.form.input.text"),hideLabel:!1},meta:{group:"common",icon:"text-input",id:"text-input"}};super(e)}},v=class extends o{constructor(){const e={tag:"input",attrs:{type:"radio",required:!1},config:{label:t.get("controls.form.radio-group"),disabled:["attrs.type"]},meta:{group:"common",icon:"radio-group",id:"radio"},options:s({type:"radio"})};super(e)}},h=class extends o{constructor(e={}){const r=l({tag:"select",config:{label:t.get("controls.form.select")},attrs:{required:!1,className:"",multiple:!1},meta:{group:"common",icon:"select",id:"select"},options:s({type:"option",isMultiple:e.attrs?.multiple})},e);super(r)}},C=class extends o{constructor(){const e={tag:"textarea",config:{label:t.get("controls.form.textarea")},meta:{group:"common",icon:"textarea",id:"textarea"},attrs:{required:!1}};super(e)}},k=[p,m,b,f,C,x,g,h,d,v];export{k as default};
+import{i as t,n as i,r as l,t as o}from"./demo.min.js";var c=["button","submit","reset"].map(e=>({label:e,value:e}));c[0].selected=!0;var p=class extends o{constructor(e={}){const r=l({tag:"button",attrs:{className:[{label:"grouped",value:"f-btn-group"},{label:"ungrouped",value:"f-field-group"}]},config:{label:t.get("controls.form.button"),hideLabel:!0},meta:{group:"common",icon:"button",id:"button"},options:[{label:t.get("button"),type:c,className:[{label:"default",value:"",selected:!0},{label:"primary",value:"primary"},{label:"danger",value:"error"},{label:"success",value:"success"},{label:"warning",value:"warning"}]}]},e);super(r)}},s=({type:e,isMultiple:r=!1,count:u=3})=>Array.from({length:u},(a,n)=>n+1).map(a=>{const n=e==="checkbox"||r?"checked":"selected";return{label:t.get("labelCount",{label:i(e),count:a}),value:`${e}-${a}`,[n]:!a}}),d=class extends o{constructor(){const e={tag:"input",attrs:{type:"checkbox",required:!1},config:{label:t.get("controls.form.checkbox-group"),disabledAttrs:["type"]},meta:{group:"common",icon:"checkbox",id:"checkbox"},options:s({type:"checkbox",count:1})};super(e)}},m=class extends o{constructor(){const e={tag:"input",attrs:{type:"date",required:!1,className:""},config:{label:t.get("controls.form.input.date")},meta:{group:"common",icon:"calendar",id:"date-input"}};super(e)}},g=class extends o{constructor(){const e={tag:"input",attrs:{type:"file",required:!1},config:{label:t.get("fileUpload")},meta:{group:"common",icon:"upload",id:"upload"}};super(e)}},b=class extends o{constructor(){const e={tag:"input",attrs:{type:"hidden",value:""},config:{label:t.get("hidden"),hideLabel:!0},meta:{group:"common",icon:"hidden",id:"hidden"}};super(e)}},f=class extends o{constructor(){const e={tag:"input",attrs:{type:"number",required:!1,className:""},config:{label:t.get("number")},meta:{group:"common",icon:"hash",id:"number"}};super(e)}},x=class extends o{constructor(){const e={tag:"input",attrs:{required:!1,type:"text",className:""},config:{label:t.get("controls.form.input.text"),hideLabel:!1},meta:{group:"common",icon:"text-input",id:"text-input"}};super(e)}},v=class extends o{constructor(){const e={tag:"input",attrs:{type:"radio",required:!1},config:{label:t.get("controls.form.radio-group"),disabledAttrs:["type"]},meta:{group:"common",icon:"radio-group",id:"radio"},options:s({type:"radio"})};super(e)}},h=class extends o{constructor(e={}){const r=l({tag:"select",config:{label:t.get("controls.form.select")},attrs:{required:!1,className:"",multiple:!1},meta:{group:"common",icon:"select",id:"select"},options:s({type:"option",isMultiple:e.attrs?.multiple})},e);super(r)}},C=class extends o{constructor(){const e={tag:"textarea",config:{label:t.get("controls.form.textarea")},meta:{group:"common",icon:"textarea",id:"textarea"},attrs:{required:!1}};super(e)}},k=[p,m,b,f,C,x,g,h,d,v];export{k as default};

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.0
+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.0";
+	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
@@ -14522,6 +14523,23 @@ var init_options = __esmMin((() => {
 	});
 }));
 //#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;
@@ -14532,6 +14550,8 @@ var init_field = __esmMin((() => {
 	init_utils();
 	init_constants();
 	init_component();
+	init_components();
+	init_control_attr_config();
 	checkableTypes = new Set(["checkbox", "radio"]);
 	isSelectableType = new Set([
 		"radio",
@@ -14547,11 +14567,12 @@ var init_field = __esmMin((() => {
 		*/
 		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();
@@ -14572,6 +14593,15 @@ var init_field = __esmMin((() => {
 			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");
@@ -15015,7 +15045,7 @@ var init_radio_group = __esmMin((() => {
 				},
 				config: {
 					label: s.get("controls.form.radio-group"),
-					disabled: ["attrs.type"]
+					disabledAttrs: ["type"]
 				},
 				meta: {
 					group: "common",
@@ -17188,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) => {
@@ -18454,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]];
@@ -18745,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.
@@ -18760,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/demo/assets/js/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.0
+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.0";
+	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
@@ -14521,6 +14522,23 @@ var init_options = __esmMin((() => {
 	});
 }));
 //#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;
@@ -14531,6 +14549,8 @@ var init_field = __esmMin((() => {
 	init_utils();
 	init_constants();
 	init_component();
+	init_components();
+	init_control_attr_config();
 	checkableTypes = new Set(["checkbox", "radio"]);
 	isSelectableType = new Set([
 		"radio",
@@ -14546,11 +14566,12 @@ var init_field = __esmMin((() => {
 		*/
 		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();
@@ -14571,6 +14592,15 @@ var init_field = __esmMin((() => {
 			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");
@@ -15014,7 +15044,7 @@ var init_radio_group = __esmMin((() => {
 				},
 				config: {
 					label: s.get("controls.form.radio-group"),
-					disabled: ["attrs.type"]
+					disabledAttrs: ["type"]
 				},
 				meta: {
 					group: "common",
@@ -17187,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) => {
@@ -18453,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]];
@@ -18744,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.
@@ -18759,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);