dev: allow UIElement to be used as settings tab

src/gui/src/UI/Settings/UIWindowSettings.js

@@ -18,8 +18,11 @@
  */
 
 import Placeholder from '../../util/Placeholder.js';
+import UIElement from '../UIElement.js';
 import UIWindow from '../UIWindow.js'
 
+def(Symbol('TSettingsTab'), 'ui.traits.TSettingsTab');
+
 async function UIWindowSettings(options){
     return new Promise(async (resolve) => {
         options = options ?? {};
@@ -54,7 +57,7 @@ async function UIWindowSettings(options){
 
             tabs.forEach((tab, i) => {
                 h += `<div class="settings-content ${i === 0 ? 'active' : ''}" data-settings="${tab.id}">`;
-                if ( tab.factory ) {
+                if ( tab.factory || tab.dom ) {
                     tab_placeholders[i] = Placeholder();
                     h += tab_placeholders[i].html;
                 } else {
@@ -108,6 +111,9 @@ async function UIWindowSettings(options){
                 const component = tab.factory();
                 component.attach(tab_placeholders[i]);
             }
+            if ( tab.dom ) {
+                tab_placeholders[i].replaceWith(tab.dom);
+            }
         });
 
         $(el_window).on('click', '.settings-sidebar-item', function(){

src/gui/src/UI/UIElement.js

@@ -7,10 +7,22 @@ export default def(class UIElement extends AdvancedBase {
     static TAG_NAME = 'div';
     
     // === START :: Helpful convenience library ===
-    static el = (parent, descriptor, stuff = {}) => {
+    static el = (...a) => {
+        let parent, descriptor; {
+            let next = a[0];
+            if ( next instanceof HTMLElement ) {
+                parent = next;
+                a.shift(); next = a[0];
+            }
+            if ( typeof next === 'string' ) {
+                descriptor = next;
+                a.shift(); next = a[0];
+            }
+        }
+
         descriptor = descriptor ?? 'div';
 
-        const parts = descriptor.split(/(?=[.#])/);
+        let parts = descriptor.split(/(?=[.#])/);
         if ( descriptor.match(/^[.#]/) ) {
             parts.unshift('div');
         }
@@ -18,17 +30,29 @@ export default def(class UIElement extends AdvancedBase {
 
         const el = document.createElement(parts.shift());
         parent && parent.appendChild(el);
-        if ( className ) {
         for ( const part of parts ) {
-                if ( part.startWith('.') ) {
+            if ( part.startsWith('.') ) {
                 el.classList.add(part.slice(1));
             } else if ( part.startWith('#') ) {
                 el.id = part;
             }
         }
+        
+        const attrs = {};
+        for ( const a_or_c of a ) {
+            if ( Array.isArray(a_or_c) ) {
+                for ( const child of a_or_c ) {
+                    el.appendChild(child);
                 }
-        if ( stuff.text ) {
+            } else {
-            el.innerText = stuff.text;
+                Object.assign(attrs, a_or_c);
+            }
+        }
+        if ( attrs.text ) {
+            el.innerText = attrs.text;
+        }
+        if ( attrs.style ) {
+            el.setAttribute('style', attrs.style);
         }
         return el;
     };

src/gui/src/services/SettingsService.js

@@ -24,6 +24,8 @@ import AccountTab from '../UI/Settings/UITabAccount.js';
 import SecurityTab from '../UI/Settings/UITabSecurity.js';
 import PersonalizationTab from '../UI/Settings/UITabPersonalization.js';
 import LanguageTag from '../UI/Settings/UITabLanguage.js';
+import UIElement from "../UI/UIElement.js";
+const TSettingsTab = use('ui.traits.TSettingsTab');
 
 export class SettingsService extends Service {
     #tabs = [];
@@ -43,6 +45,13 @@ export class SettingsService extends Service {
         return this.#tabs;
     }
     register_tab (tab) {
+        if ( tab instanceof UIElement ) {
+            const ui_element = tab;
+            tab = {
+                ...ui_element.as(TSettingsTab).get_metadata(),
+                dom: ui_element.root,
+            };
+        }
         this.#tabs.push(tab);
     }
 }