lexgui 0.5.10 → 0.5.11

package/build/lexgui.css

@@ -1434,7 +1434,10 @@ a svg, svg path {
 
 .lexwidget .lextext.formlabel {
     margin-left: 8px;
-    margin-bottom: -12px;
+    margin-bottom: -6px;
+    font-weight: 500;
+    padding: 0;
+    font-size: var(--global-font-size-sm);
 }
 
 .lexwidget .lextext.outline {
@@ -4851,6 +4854,7 @@ ul.lexassetscontent {
 .lexassetscontent li .lexassettitle {
     position: absolute;
     width: 100%;
+    height: 24px;
     bottom: 0px;
     -webkit-text-size-adjust: 100%;
     font-size: var(--global-font-size);
@@ -4859,12 +4863,11 @@ ul.lexassetscontent {
     text-align: center;
     box-sizing: border-box;
     display: block;
-    height: 20px;
     padding: 0.1em;
-    padding-top: 0.15em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    align-content: center;
     background-color: var(--global-intense-background);
     transition: all 0.1s;
     z-index: 1;

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 var LX = {
-    version: "0.5.10",
+    version: "0.5.11",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -210,6 +210,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
@@ -1708,35 +1731,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;
 }
 
@@ -7258,12 +7298,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;
@@ -7273,9 +7318,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 )
             {
@@ -7291,9 +7348,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 );
     }
 }
 
@@ -11223,7 +11280,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 = {} ) {