formeo 5.3.1 → 5.3.2

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.0
+Version: 5.3.1
 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.1";
 		type = "module";
 		main = "dist/formeo.cjs.js";
 		module$1 = "dist/formeo.es.js";
@@ -14525,6 +14525,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 +14552,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 +14569,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 +14595,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 +15047,7 @@ Author: Draggable https://draggable.io
 					},
 					config: {
 						label: s.get("controls.form.radio-group"),
-						disabled: ["attrs.type"]
+						disabledAttrs: ["type"]
 					},
 					meta: {
 						group: "common",

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

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

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.0
+Version: 5.3.1
 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.0
+Version: 5.3.1
 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.0
+Version: 5.3.1
 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.0</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.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>

package/dist/formeo.cjs.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.0
+Version: 5.3.1
 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.1";
 	type = "module";
 	main = "dist/formeo.cjs.js";
 	module$1 = "dist/formeo.es.js";
@@ -14522,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;
@@ -14532,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",
@@ -14547,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();
@@ -14572,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");
@@ -15015,7 +15044,7 @@ var init_radio_group = __esmMin((() => {
 				},
 				config: {
 					label: s.get("controls.form.radio-group"),
-					disabled: ["attrs.type"]
+					disabledAttrs: ["type"]
 				},
 				meta: {
 					group: "common",

package/dist/formeo.css

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

package/dist/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.3.0
+Version: 5.3.1
 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.1";
 	type = "module";
 	main = "dist/formeo.cjs.js";
 	module$1 = "dist/formeo.es.js";
@@ -14521,6 +14521,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 +14548,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 +14565,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 +14591,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 +15043,7 @@ var init_radio_group = __esmMin((() => {
 				},
 				config: {
 					label: s.get("controls.form.radio-group"),
-					disabled: ["attrs.type"]
+					disabledAttrs: ["type"]
 				},
 				meta: {
 					group: "common",