lexgui 0.5.9 → 0.5.11

package/build/lexgui.module.js

@@ -6,7 +6,7 @@
 */
 
 var LX = {
-    version: "0.5.9",
+    version: "0.5.11",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -204,6 +204,29 @@ function setTheme( colorScheme )
 
 LX.setTheme = setTheme;
 
+/**
+ * @method getTheme
+ * @description Gets either "dark" or "light" theme value
+ */
+function getTheme()
+{
+    return document.documentElement.getAttribute( "data-theme" ) ?? "dark";
+}
+
+LX.getTheme = getTheme;
+
+/**
+ * @method switchTheme
+ * @description Toggles between "dark" and "light" themes
+ */
+function switchTheme()
+{
+    const currentTheme = getTheme();
+    setTheme( currentTheme == "dark" ? "light" : "dark" );
+}
+
+LX.switchTheme = switchTheme;
+
 /**
  * @method setThemeColor
  * @description Sets a new value for one of the main theme variables
@@ -1239,7 +1262,7 @@ function _createCommandbar( root )
         if( LX.has('CodeEditor') )
         {
             const instances = LX.CodeEditor.getInstances();
-            if( !instances.length ) return;
+            if( !instances.length || !instances[ 0 ].area.root.offsetHeight ) return;
 
             const languages = instances[ 0 ].languages;
 
@@ -1702,35 +1725,52 @@ function badge( text, className, options = {} )
 LX.badge = badge;
 
 /**
- * @method makeContainer
- * @param {Array} size
+ * @method makeElement
+ * @param {String} htmlType
  * @param {String} className
  * @param {String} innerHTML
  * @param {HTMLElement} parent
  * @param {Object} overrideStyle
  */
 
-function makeContainer( size, className, innerHTML, parent, overrideStyle = {} )
+function makeElement( htmlType, className, innerHTML, parent, overrideStyle = {} )
 {
-    const container = document.createElement( "div" );
-    container.className = "lexcontainer " + ( className ?? "" );
-    container.innerHTML = innerHTML ?? "";
-    container.style.width = size && size[ 0 ] ? size[ 0 ] : "100%";
-    container.style.height = size && size[ 1 ] ? size[ 1 ] : "100%";
-    Object.assign( container.style, overrideStyle );
+    const element = document.createElement( htmlType );
+    element.className = className ?? ""
+    element.innerHTML = innerHTML ?? "";
+    Object.assign( element.style, overrideStyle );
 
     if( parent )
     {
         if( parent.attach ) // Use attach method if possible
         {
-            parent.attach( container );
+            parent.attach( element );
         }
         else // its a native HTMLElement
         {
-            parent.appendChild( container );
+            parent.appendChild( element );
         }
     }
 
+    return element;
+}
+
+LX.makeElement = makeElement;
+
+/**
+ * @method makeContainer
+ * @param {Array} size
+ * @param {String} className
+ * @param {String} innerHTML
+ * @param {HTMLElement} parent
+ * @param {Object} overrideStyle
+ */
+
+function makeContainer( size, className, innerHTML, parent, overrideStyle = {} )
+{
+    const container = LX.makeElement( "div", "lexcontainer " + ( className ?? "" ), innerHTML, parent, overrideStyle );
+    container.style.width = size && size[ 0 ] ? size[ 0 ] : "100%";
+    container.style.height = size && size[ 1 ] ? size[ 1 ] : "100%";
     return container;
 }
 
@@ -4997,14 +5037,14 @@ class SideBar {
             this.root.appendChild( this.footer );
         }
 
-        // Set width depending on header/footer
-        doAsync( () => {
-            // This account for header, footer and all inner margins
-            const contentOffset = ( parseInt( this.header?.getComputedSize().height ) ?? 0 ) +
-            ( parseInt( this.filter?.getComputedSize().height ) ?? 0 ) +
-            ( parseInt( this.footer?.getComputedSize().height ) ?? 0 );
+        const resizeObserver = new ResizeObserver( entries => {
+            const contentOffset = ( this.header?.offsetHeight ?? 0 ) +
+            ( this.filter?.offsetHeight ?? 0 ) +
+            ( this.footer?.offsetHeight ?? 0 );
             this.content.style.height = `calc(100% - ${ contentOffset }px)`;
-        }, 10 );
+        } );
+
+        resizeObserver.observe( this.root );
 
         this.items = [ ];
         this.icons = { };
@@ -7252,12 +7292,17 @@ class Form extends Widget {
             if( entryData.constructor != Object )
             {
                 entryData = { };
+                data[ entry ] = entryData;
             }
 
             entryData.placeholder = entryData.placeholder ?? entry;
             entryData.width = "100%";
 
-            // this.addLabel( entry, { textClass: "formlabel" } );
+            if( !( options.skipLabels ?? false ) )
+            {
+                const label = new TextInput( null, entry, null, { disabled: true, inputClass: "formlabel nobg" } );
+                container.appendChild( label.root );
+            }
 
             entryData.textWidget = new TextInput( null, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
                 container.formData[ entry ] = value;
@@ -7267,9 +7312,21 @@ class Form extends Widget {
             container.formData[ entry ] = entryData.constructor == Object ? entryData.value : entryData;
         }
 
-        container.appendChild( new Blank().root );
+        const buttonContainer = LX.makeContainer( ["100%", "auto"], "flex flex-row", "", container );
+
+        if( options.secondaryActionName || options.secondaryActionCallback )
+        {
+            const secondaryButton = new Button( null, options.secondaryActionName ?? "Cancel", ( value, event ) => {
+                if( callback )
+                {
+                    callback( container.formData, event );
+                }
+            }, { width: "100%", minWidth: "0", buttonClass: options.secondaryButtonClass ?? "primary" } );
+
+            buttonContainer.appendChild( secondaryButton.root );
+        }
 
-        const submitButton = new Button( null, options.actionName ?? "Submit", ( value, event ) => {
+        const primaryButton = new Button( null, options.primaryActionName ?? "Submit", ( value, event ) => {
 
             for( let entry in data )
             {
@@ -7285,9 +7342,9 @@ class Form extends Widget {
             {
                 callback( container.formData, event );
             }
-        }, { buttonClass: "primary" } );
+        }, { width: "100%", minWidth: "0", buttonClass: options.primaryButtonClass ?? "contrast" } );
 
-        container.appendChild( submitButton.root );
+        buttonContainer.appendChild( primaryButton.root );
     }
 }
 
@@ -10544,9 +10601,7 @@ class DatePicker extends Widget {
             container.innerHTML = "";
             const calendarIcon = LX.makeIcon( "calendar" );
             const calendarButton = new Button( null, currentDate ?? "Pick a date", () => {
-                this._popover = new Popover( calendarButton.root, ( popoverRoot ) => {
-                    popoverRoot.appendChild( this.calendar.root );
-                } );
+                this._popover = new Popover( calendarButton.root, [ this.calendar ] );
             }, { buttonClass: `flex flex-row px-3 ${ currentDate ? "" : "fg-tertiary" } justify-between` } );
 
             calendarButton.root.querySelector( "button" ).appendChild( calendarIcon );
@@ -11219,7 +11274,12 @@ class Panel {
      * @param {Object} data Form data
      * @param {Function} callback Callback function on submit form
      * @param {Object} options:
-     * actionName: Text to be shown in the button
+     * primaryActionName: Text to be shown in the primary action button ['Submit']
+     * primaryButtonClass: Button class for primary action button ['contrast']
+     * secondaryActionName: Text to be shown in the secondary action button ['Cancel']
+     * secondaryActionCallback: Callback function on press secondary button
+     * secondaryButtonClass: Button class for secondary action button ['primary']
+     * skipLabels: Do not show input field labels [false]
      */
 
     addForm( name, data, callback, options = {} ) {
@@ -12050,7 +12110,6 @@ class Footer {
         parent.appendChild( root );
 
         // Set always at bottom
-        root.previousElementSibling.style.height = "unset";
         root.previousElementSibling.style.flexGrow = "1";
 
         this.root = root;
@@ -13446,8 +13505,8 @@ class AssetView {
         div.className = 'lexassetbrowser';
         this.root = div;
 
-        let area = new LX.Area({height: "100%"});
-        div.appendChild(area.root);
+        let area = new LX.Area( { width: "100%", height: "100%" } );
+        div.appendChild( area.root );
 
         let left, right, contentArea = area;
 
@@ -13460,6 +13519,9 @@ class AssetView {
         this.contextMenu = options.contextMenu ?? [];
         this.onRefreshContent = options.onRefreshContent;
 
+        // Append temporarily to the dom
+        document.body.appendChild( this.root );
+
         if( !this.skipBrowser )
         {
             [left, right] = area.split({ type: "horizontal", sizes: ["15%", "85%"]});
@@ -13497,6 +13559,9 @@ class AssetView {
         {
             this.previewPanel = right.addPanel( {className: 'lexassetcontentpanel', style: { overflow: 'scroll' }} );
         }
+
+        // Clean up
+        document.body.removeChild( this.root );
     }
 
     /**