lexgui 0.5.9 → 0.5.10

package/build/lexgui.css

@@ -2158,10 +2158,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 +2481,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 +2550,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;
@@ -6058,6 +6052,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 +6135,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.10",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -1245,7 +1245,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;
 
@@ -5003,14 +5003,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 = { };
@@ -10550,9 +10550,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 );
@@ -12056,7 +12054,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 +13449,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 +13463,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 +13503,9 @@ class AssetView {
         {
             this.previewPanel = right.addPanel( {className: 'lexassetcontentpanel', style: { overflow: 'scroll' }} );
         }
+
+        // Clean up
+        document.body.removeChild( this.root );
     }
 
     /**