lexgui 0.5.9 → 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 {
@@ -2158,10 +2161,6 @@ dialog .lexselect .lexselectoptions {
     --toggle-fg-color: var(--global-color-primary);
 }
 
-.lextoggle.outline.primary, .lextoggle.outline.secondary {
-    /* border: 1px solid var(--global-text-tertiary); */
-}
-
 .lextoggle.outline:checked, .lextoggle.outline[aria-checked=true], .lextoggle.outline:has(>input:checked) {
     border: 1px solid currentColor;
     color: var(--toggle-bg-color);
@@ -2485,7 +2484,6 @@ input[type=number] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    webkit-appearance: none;
     --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
     border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
     width: 100%;
@@ -2555,7 +2553,6 @@ input[type=number] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    webkit-appearance: none;
     color: var(--range-progress);
     box-shadow: 0 -1px oklch(0% 0 0/0.1) inset,0 8px 0 -4px oklch(100% 0 0/0.1) inset,0 1px color-mix(in oklab,currentColor calc(1*10%),#0000),0 0 0 2rem var(--range-thumb-color) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));
     background-color: currentColor;
@@ -4857,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);
@@ -4865,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;
@@ -6058,6 +6055,7 @@ ul.lexassetscontent {
 .bg-warning { --background-color: var(--global-color-warning); background-color: var(--background-color)!important }
 .bg-white { --background-color: white; background-color: var(--background-color)!important }
 .bg-black { --background-color: black; background-color: var(--background-color)!important }
+.bg-blur { --background-color: var(--global-blur-background); background-color: var(--background-color)!important }
 .bg-none { background: none !important }
 
 .hover\:bg-primary:hover { background-color: var(--global-color-primary) !important }
@@ -6140,7 +6138,7 @@ ul.lexassetscontent {
 .text-balance { text-wrap: balance }
 .break-words { overflow-wrap: break-word }
 
-.line-clamp-1, .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical }
+.line-clamp-1, .line-clamp-2, .line-clamp-3, .line-clamp-4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical }
 .line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1 }
 .line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2 }
 .line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3 }

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.9",
+    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
@@ -1245,7 +1268,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;
 
@@ -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;
 }
 
@@ -5003,14 +5043,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 = { };
@@ -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 );
     }
 }
 
@@ -10550,9 +10607,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 );
@@ -11225,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 = {} ) {
@@ -12056,7 +12116,6 @@ class Footer {
         parent.appendChild( root );
 
         // Set always at bottom
-        root.previousElementSibling.style.height = "unset";
         root.previousElementSibling.style.flexGrow = "1";
 
         this.root = root;
@@ -13452,8 +13511,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;
 
@@ -13466,6 +13525,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%"]});
@@ -13503,6 +13565,9 @@ class AssetView {
         {
             this.previewPanel = right.addPanel( {className: 'lexassetcontentpanel', style: { overflow: 'scroll' }} );
         }
+
+        // Clean up
+        document.body.removeChild( this.root );
     }
 
     /**