[Feature Request] Allow to make an display order of module position in config (#3762)

My proposal for #3761 

* I use `flex` box for create region container
* I have moved `container` definition to `main.css` (for css tunning,
maybe it can be useful)
* I create `order` in module config for define module order display from
position

# Advantage:

We don't have to move module config in another place in array of modules

# Another advantage that i did'nt think:

We can change dynamicaly module order of a container:

- So, in this case, for a module config builder, (I won't mention the
name because otherwise I'll get angry...)
It can be usefull for a config preview (before saving config)
--> just change style css `order` module value for see preview

- Or, change `order` value in dev console for testing

# Disadvantages

I don't see any ;)

Author: bugsounet

CHANGELOG.md

@@ -13,6 +13,7 @@ planned for 2025-07-01
 
 ### Added
 
+- [config] Allow to change module order for final renderer (or dynamicaly with CSS): Feature `order` in config. (#3762)
 - [clock] Added option 'disableNextEvent' to hide next sun event (#3769)
 
 ### Changed

css/main.css

@@ -239,3 +239,16 @@ sup {
   border-spacing: 0;
   border-collapse: separate;
 }
+
+/**
+ * Container Definitions.
+ */
+
+.region .container {
+  display: flex;
+  flex-direction: column;
+}
+
+.region .container.hidden {
+  display: none;
+}

js/loader.js

@@ -108,7 +108,8 @@ const Loader = (function () {
 				header: moduleData.header,
 				configDeepMerge: typeof moduleData.configDeepMerge === "boolean" ? moduleData.configDeepMerge : false,
 				config: moduleData.config,
-				classes: typeof moduleData.classes !== "undefined" ? `${moduleData.classes} ${module}` : module
+				classes: typeof moduleData.classes !== "undefined" ? `${moduleData.classes} ${module}` : module,
+				order: (typeof moduleData.order === "number" && Number.isInteger(moduleData.order)) ? moduleData.order : 0
 			});
 		});
 

js/main.js

@@ -30,6 +30,8 @@ const MM = (function () {
 				dom.className = `module ${dom.className} ${module.data.classes}`;
 			}
 
+			dom.style.order = (typeof module.data.order === "number" && Number.isInteger(module.data.order)) ? module.data.order : 0;
+
 			dom.opacity = 0;
 			wrapper.appendChild(dom);
 
@@ -463,7 +465,8 @@ const MM = (function () {
 				}
 			});
 
-			wrapper.style.display = showWrapper ? "block" : "none";
+			// move container definitions to main CSS
+			wrapper.className = showWrapper ? "container" : "container hidden";
 		});
 	};