lexgui 0.1.46 → 0.2.0

package/build/lexgui.module.js

@@ -8,10 +8,11 @@
 */
 
 var LX = {
-    version: "0.1.46",
+    version: "0.2.0",
     ready: false,
     components: [], // specific pre-build components
-    signals: {} // events and triggers
+    signals: {}, // events and triggers
+    extraCommandbarEntries: [] // user specific entries for command bar
 };
 
 LX.MOUSE_LEFT_CLICK     = 0;
@@ -161,12 +162,13 @@ function getThemeColor( colorName )
 {
     const r = getComputedStyle( document.querySelector( ':root' ) );
     const value = r.getPropertyValue( '--' + colorName );
+    const theme = document.documentElement.getAttribute( "data-theme" );
 
-    if( value.includes( "light-dark" ) && window.matchMedia )
+    if( value.includes( "light-dark" ) )
     {
         const currentScheme = r.getPropertyValue( "color-scheme" );
 
-        if( ( window.matchMedia( "(prefers-color-scheme: light)" ).matches ) || ( currentScheme == "light" ) )
+        if( currentScheme == "light" )
         {
             return value.substring( value.indexOf( '(' ) + 1, value.indexOf( ',' ) ).replace( /\s/g, '' );
         }
@@ -404,6 +406,9 @@ LX.makeDraggable = makeDraggable;
  * language (String):
  * windowMode (Boolean):
  * lineNumbers (Boolean):
+ * firstLine (Number): TODO
+ * linesAdded (Array):
+ * linesRemoved (Array):
  * tabName (String):
  */
 function makeCodeSnippet( code, size, options = { } )
@@ -416,16 +421,15 @@ function makeCodeSnippet( code, size, options = { } )
 
     const snippet = document.createElement( "div" );
     snippet.className = "lexcodesnippet";
-    snippet.style.width = size[ 0 ];
-    snippet.style.height = size[ 1 ];
+    snippet.style.width = size ? size[ 0 ] : "auto";
+    snippet.style.height = size ? size[ 1 ] : "auto";
     const area = new Area( { noAppend: true } );
     let editor = new LX.CodeEditor( area, {
         skipInfo: true,
         disableEdition: true,
         allowAddScripts: false,
         name: options.tabName,
-        // showTab: options.showTab ?? true,
-        // lineNumbers: options.lineNumbers ?? true
+        // showTab: options.showTab ?? true
     } );
     editor.setText( code, options.language ?? "Plain Text" );
 
@@ -484,12 +488,30 @@ function makeCodeSnippet( code, size, options = { } )
         tabs.prepend( windowActionButtons );
     }
 
+    if( !( options.lineNumbers ?? true ) )
+    {
+        editor.root.classList.add( "no-gutter" );
+    }
+
     snippet.appendChild( area.root );
     return snippet;
 }
 
 LX.makeCodeSnippet = makeCodeSnippet;
 
+/**
+ * @method registerCommandbarEntry
+ * @description Adds an extra command bar entry
+ * @param {String} name
+ * @param {Function} callback
+ */
+function registerCommandbarEntry( name, callback )
+{
+    LX.extraCommandbarEntries.push( { name, callback } );
+}
+
+LX.registerCommandbarEntry = registerCommandbarEntry;
+
 // Math classes
 
 class vec2 {
@@ -518,24 +540,23 @@ class vec2 {
 
 LX.vec2 = vec2;
 
-function create_global_searchbar( root )
+function _createCommandbar( root )
 {
-    let globalSearch = document.createElement("div");
-    globalSearch.id = "global-search";
-    globalSearch.className = "hidden";
-    globalSearch.tabIndex = -1;
-    root.appendChild( globalSearch );
+    let commandbar = document.createElement( "dialog" );
+    commandbar.className = "commandbar";
+    commandbar.tabIndex = -1;
+    root.appendChild( commandbar );
 
     let allItems = [];
     let hoverElId = null;
 
-    globalSearch.addEventListener('keydown', function( e ) {
+    commandbar.addEventListener('keydown', function( e ) {
         e.stopPropagation();
         e.stopImmediatePropagation();
         hoverElId = hoverElId ?? -1;
         if( e.key == 'Escape' )
         {
-            this.classList.add("hidden");
+            this.close();
             _resetBar( true );
         }
         else if( e.key == 'Enter' )
@@ -544,7 +565,7 @@ function create_global_searchbar( root )
             if( el )
             {
                 const isCheckbox = (el.item.type && el.item.type === 'checkbox');
-                this.classList.toggle('hidden');
+                this.close();
                 if( isCheckbox )
                 {
                     el.item.checked = !el.item.checked;
@@ -559,7 +580,7 @@ function create_global_searchbar( root )
         else if ( e.key == 'ArrowDown' && hoverElId < (allItems.length - 1) )
         {
             hoverElId++;
-            globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+            commandbar.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
             allItems[ hoverElId ].classList.add('hovered');
 
             let dt = allItems[ hoverElId ].offsetHeight * (hoverElId + 1) - itemContainer.offsetHeight;
@@ -574,19 +595,19 @@ function create_global_searchbar( root )
         } else if ( e.key == 'ArrowUp' && hoverElId > 0 )
         {
             hoverElId--;
-            globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+            commandbar.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
             allItems[ hoverElId ].classList.add('hovered');
         }
     });
 
-    globalSearch.addEventListener('focusout', function( e ) {
+    commandbar.addEventListener('focusout', function( e ) {
         if( e.relatedTarget == e.currentTarget )
         {
             return;
         }
         e.stopPropagation();
         e.stopImmediatePropagation();
-        this.classList.add( "hidden" );
+        this.close();
         _resetBar( true );
     });
 
@@ -595,9 +616,7 @@ function create_global_searchbar( root )
         {
             e.stopImmediatePropagation();
             e.stopPropagation();
-            globalSearch.classList.toggle('hidden');
-            globalSearch.querySelector('input').focus();
-            _addElements( undefined );
+            LX.setCommandbarState( true );
         }
         else
         {
@@ -675,22 +694,22 @@ function create_global_searchbar( root )
         const isCheckbox = (i && i.type && i.type === 'checkbox');
         if( isCheckbox )
         {
-            searchItem.innerHTML = "<a class='fa fa-check'></a><span>" + p + t + "</span>"
+            searchItem.innerHTML = "<a class='fa fa-check'></a><span>" + ( p + t ) + "</span>"
         }
         else
         {
-            searchItem.innerHTML = p + t;
+            searchItem.innerHTML = ( p + t );
         }
         searchItem.entry_name = t;
         searchItem.callback = c;
         searchItem.item = i;
         searchItem.addEventListener('click', function(e) {
-            this.callback.call(window, this.entry_name);
-            globalSearch.classList.toggle('hidden');
+            this.callback.call( window, this.entry_name );
+            LX.setCommandbarState( false );
             _resetBar( true );
         });
         searchItem.addEventListener('mouseenter', function(e) {
-            globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+            commandbar.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
             this.classList.add('hovered');
             hoverElId = allItems.indexOf( this );
         });
@@ -724,7 +743,7 @@ function create_global_searchbar( root )
             _propagateAdd( c, filter, path );
     };
 
-    const _addElements = filter => {
+    commandbar._addElements = filter => {
 
         _resetBar();
 
@@ -736,6 +755,16 @@ function create_global_searchbar( root )
             }
         }
 
+        for( let entry of LX.extraCommandbarEntries )
+        {
+            const name = entry.name;
+            if( !name.toLowerCase().includes( filter ) )
+            {
+                continue;
+            }
+            _addElement( name, entry.callback, "", {} );
+        }
+
         if( LX.has('CodeEditor') )
         {
             const instances = LX.CodeEditor.getInstances();
@@ -753,7 +782,7 @@ function create_global_searchbar( root )
 
                 value += key + " <span class='lang-ext'>(" + languages[ l ].ext + ")</span>";
                 if( key.toLowerCase().includes( filter ) ) {
-                    add_element( value, () => {
+                    _addElement( value, () => {
                         for( let i of instances ) {
                             i._changeLanguage( l );
                         }
@@ -764,14 +793,14 @@ function create_global_searchbar( root )
     }
 
     input.addEventListener('input', function(e) {
-        _addElements( this.value.toLowerCase() );
+        commandbar._addElements( this.value.toLowerCase() );
     });
 
-    globalSearch.appendChild( header );
-    globalSearch.appendChild( tabArea.root );
-    globalSearch.appendChild( itemContainer );
+    commandbar.appendChild( header );
+    commandbar.appendChild( tabArea.root );
+    commandbar.appendChild( itemContainer );
 
-    return globalSearch;
+    return commandbar;
 }
 
 /**
@@ -781,6 +810,7 @@ function create_global_searchbar( root )
  * id: Id of the main area
  * skipRoot: Skip adding LX root container
  * skipDefaultArea: Skip creation of main area
+ * strictViewport: Use only window area
  */
 
 function init( options = { } )
@@ -803,16 +833,17 @@ function init( options = { } )
     this.root = root;
     this.container = document.body;
 
-    // this.modal.toggleAttribute( 'hidden', true );
-    // this.modal.toggle = function( force ) { this.toggleAttribute( 'hidden', force ); };
-
     this.modal.classList.add( 'hiddenOpacity' );
     this.modal.toggle = function( force ) { this.classList.toggle( 'hiddenOpacity', force ); };
 
     if( options.container )
+    {
         this.container = document.getElementById( options.container );
+    }
 
-    this.globalSearch = create_global_searchbar( this.container );
+    document.documentElement.setAttribute( "data-strictVP", ( options.strictViewport ?? true ) ? "true" : "false" );
+
+    this.commandbar = _createCommandbar( this.container );
 
     this.container.appendChild( modal );
 
@@ -856,16 +887,48 @@ function init( options = { } )
         this.main_area = new Area( { id: options.id ?? 'mainarea' } );
     }
 
-    window.matchMedia( "(prefers-color-scheme: dark)" ).addEventListener( "change", event => {
-        const newColorScheme = event.matches ? "dark" : "light";
-        LX.emit( "@on_new_color_scheme", newColorScheme );
-    });
+    if( ( options.autoTheme ?? true ) && window.matchMedia && window.matchMedia( "(prefers-color-scheme: light)" ).matches )
+    {
+        LX.setTheme( "light" );
+
+        window.matchMedia( "(prefers-color-scheme: dark)" ).addEventListener( "change", event => {
+            LX.setTheme( event.matches ? "dark" : "light" );
+        });
+    }
 
     return this.main_area;
 }
 
 LX.init = init;
 
+/**
+ * @method setCommandbarState
+ * @param {Boolean} value
+ * @param {Boolean} resetEntries
+ */
+
+function setCommandbarState( value, resetEntries = true )
+{
+    const cb = this.commandbar;
+
+    if( value )
+    {
+        cb.show();
+        cb.querySelector('input').focus();
+
+        if( resetEntries )
+        {
+            cb._addElements( undefined );
+        }
+    }
+    else
+    {
+        cb.close();
+    }
+}
+
+LX.setCommandbarState = setCommandbarState;
+
 /**
  * @method message
  * @param {String} text
@@ -898,9 +961,9 @@ LX.message = message;
  * @param {String} title (Optional)
  * @param {*} options
  * id: Id of the message dialog
- * time: (Number) Delay time before close automatically (ms). Defalut: [3000]
- * position: (Array) [x,y] Dialog position in screen. Default: [screen centered]
- * size: (Array) [width, height]
+ * timeout (Number): Delay time before it closes automatically (ms). Default: [3000]
+ * position (Array): [x,y] Dialog position in screen. Default: [screen centered]
+ * size (Array): [width, height]
  */
 
 function popup( text, title, options = {} )
@@ -910,7 +973,7 @@ function popup( text, title, options = {} )
         throw("No message to show");
     }
 
-    options.size = options.size ?? [ "auto", "auto" ];
+    options.size = options.size ?? [ "max-content", "auto" ];
     options.class = "lexpopup";
 
     const time = options.timeout || 3000;
@@ -918,13 +981,9 @@ function popup( text, title, options = {} )
         p.addTextArea( null, text, null, { disabled: true, fitHeight: true } );
     }, options );
 
-    dialog.root.classList.add( 'fadein' );
-    setTimeout(() => {
-        dialog.root.classList.remove( 'fadein' );
-        dialog.root.classList.add( 'fadeout' );
-    }, time - 1000 );
-
-    setTimeout( dialog.close, time );
+    setTimeout( () => {
+        dialog.close();
+    }, Math.max( time, 150 ) );
 
     return dialog;
 }
@@ -1009,6 +1068,25 @@ function badge( text, className, options = {} )
 
 LX.badge = badge;
 
+/**
+ * @method makeContainer
+ * @param {Array} size
+ * @param {String} className
+ * @param {Object} overrideStyle
+ */
+
+function makeContainer( size, className, overrideStyle = {} )
+{
+    const container = document.createElement( "div" );
+    container.className = "lexcontainer " + ( className ?? "" );
+    container.style.width = size && size[ 0 ] ? size[ 0 ] : "100%";
+    container.style.height = size && size[ 1 ] ? size[ 1 ] : "100%";
+    Object.assign( container.style, overrideStyle );
+    return container;
+}
+
+LX.makeContainer = makeContainer;
+
 /*
 *   Events and Signals
 */
@@ -1491,8 +1569,8 @@ class Area {
                 }
 
                 area1.root.style.width = "100%";
-                area1.root.style.height = "calc( " + height1 + " - " + data + " )";
-                area2.root.style.height = "calc( " + height2 + " - " + data + " )";
+                area1.root.style.height = ( height1 == "auto" ? height1 : "calc( " + height1 + " - " + data + " )");
+                area2.root.style.height = ( height2 == "auto" ? height2 : "calc( " + height2 + " - " + data + " )");
             }
         }
 
@@ -2092,7 +2170,7 @@ class Tabs {
 
         area.root.classList.add( "lexareatabscontainer" );
 
-        area.split({type: 'vertical', sizes: "auto", resize: false, top: 6});
+        area.split({type: 'vertical', sizes: options.sizes ?? "auto", resize: false, top: 6});
         area.sections[0].attach( container );
 
         this.area = area.sections[1];
@@ -2958,6 +3036,7 @@ class Widget {
     static FORM         = 27;
     static DIAL         = 28;
     static COUNTER      = 29;
+    static TABLE        = 30;
 
     static NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -3048,6 +3127,7 @@ class Widget {
             case Widget.FORM: return "Form";
             case Widget.DIAL: return "Dial";
             case Widget.COUNTER: return "Counter";
+            case Widget.TABLE: return "Table";
             case Widget.CUSTOM: return this.customName;
         }
 
@@ -4070,8 +4150,8 @@ class Panel {
 
         let searchIcon = document.createElement('a');
         searchIcon.className = "fa-solid fa-magnifying-glass";
-        element.appendChild(input);
         element.appendChild(searchIcon);
+        element.appendChild(input);
 
         input.addEventListener("input", (e) => {
             if(options.callback)
@@ -4123,26 +4203,28 @@ class Panel {
         }
     }
 
-    _search_options(options, value) {
-        // push to right container
+    _filterOptions( options, value ) {
+
+        // Push to right container
         const emptyFilter = !value.length;
         let filteredOptions = [];
-        // add widgets
-        for( let i = 0; i < options.length; i++) {
-            let o = options[i];
-            if(!emptyFilter)
+
+        // Add widgets
+        for( let i = 0; i < options.length; i++ )
+        {
+            let o = options[ i ];
+            if( !emptyFilter )
             {
-                let toCompare = (typeof o == 'string') ? o : o.value;
-                ;
+                let toCompare = ( typeof o == 'string' ) ? o : o.value;
                 const filterWord = value.toLowerCase();
                 const name = toCompare.toLowerCase();
-                if(!name.includes(filterWord)) continue;
+                if( !name.includes( filterWord ) ) continue;
             }
-            // insert filtered widget
-            filteredOptions.push(o);
+
+            filteredOptions.push( o );
         }
 
-        this.refresh(filteredOptions);
+        this.refresh( filteredOptions );
     }
 
     _trigger( event, callback ) {
@@ -4629,66 +4711,82 @@ class Panel {
      * @param {Array} values Each of the {value, callback} items
      * @param {*} options:
      * float: Justify content (left, center, right) [center]
+     * selected: Selected item by default by value
      * noSelection: Buttons can be clicked, but they are not selectable
      */
 
     addComboButtons( name, values, options = {} ) {
 
-        let widget = this.create_widget(name, Widget.BUTTON, options);
+        let widget = this.create_widget( name, Widget.BUTTON, options );
         let element = widget.domEl;
 
         let that = this;
         let container = document.createElement('div');
         container.className = "lexcombobuttons ";
-        if( options.float ) container.className += options.float;
+
+        if( options.float )
+        {
+            container.className += options.float;
+        }
+
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
-        let should_select = !(options.noSelection ?? false);
+        let buttonsBox = document.createElement('div');
+        buttonsBox.className = "lexcombobuttonsbox ";
+
+        let shouldSelect = !( options.noSelection ?? false );
+
         for( let b of values )
         {
-            if( !b.value ) throw("Set 'value' for each button!");
+            if( !b.value )
+            {
+                throw( "Set 'value' for each button!" );
+            }
 
             let buttonEl = document.createElement('button');
             buttonEl.className = "lexbutton combo";
             buttonEl.title = b.icon ? b.value : "";
-            if(options.buttonClass)
-                buttonEl.classList.add(options.buttonClass);
+            buttonEl.id = b.id ?? "";
 
-            if(options.selected == b.value)
-                buttonEl.classList.add("selected");
+            if( options.buttonClass )
+            {
+                buttonEl.classList.add( options.buttonClass );
+            }
 
-            if(b.id)
-                buttonEl.id = b.id;
+            if( shouldSelect && options.selected == b.value )
+            {
+                buttonEl.classList.add("selected");
+            }
 
-            buttonEl.innerHTML = (b.icon ? "<a class='" + b.icon +"'></a>" : "") + "<span>" + (b.icon ? "" : b.value) + "</span>";
+            buttonEl.innerHTML = ( b.icon ? "<a class='" + b.icon +"'></a>" : "" ) + "<span>" + ( b.icon ? "" : b.value ) + "</span>";
 
-            if(options.disabled)
-                buttonEl.setAttribute("disabled", true);
+            if( options.disabled )
+            {
+                buttonEl.setAttribute( "disabled", true );
+            }
 
-            buttonEl.addEventListener("click", function(e) {
-                if(should_select) {
+            buttonEl.addEventListener("click", function( e ) {
+                if( shouldSelect )
+                {
                     container.querySelectorAll('button').forEach( s => s.classList.remove('selected'));
                     this.classList.add('selected');
                 }
-                that._trigger( new IEvent(name, b.value, e), b.callback );
-            });
 
-            container.appendChild(buttonEl);
+                that._trigger( new IEvent( name, b.value, e ), b.callback );
+            });
 
-            // Remove branch padding and margins
-            if(widget.name === undefined) {
-                buttonEl.className += " noname";
-                buttonEl.style.width =  "100%";
-            }
+            buttonsBox.appendChild( buttonEl );
         }
 
         // Remove branch padding and margins
-        if(widget.name !== undefined) {
+        if( !widget.name)
+        {
             element.className += " noname";
             container.style.width = "100%";
         }
 
-        element.appendChild(container);
+        container.appendChild( buttonsBox );
+        element.appendChild( container );
 
         return widget;
     }
@@ -4940,6 +5038,8 @@ class Panel {
      * filter: Add a search bar to the widget [false]
      * disabled: Make the widget disabled [false]
      * skipReset: Don't add the reset value button when value changes
+     * placeholder: Placeholder for the filter input
+     * emptyMsg: Custom message to show when no filtered results
      */
 
     addDropdown( name, values, value, callback, options = {} ) {
@@ -4985,17 +5085,74 @@ class Panel {
         let buttonName = value;
         buttonName += "<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>";
 
-        this.queue(container);
+        this.queue( container );
+
+        const _placeOptions = ( parent ) => {
+
+            console.log("Replacing container");
+
+            const overflowContainer = parent.getParentArea();
+            const rect = selectedOption.getBoundingClientRect();
+            const nestedDialog = parent.parentElement.closest( "dialog" );
+
+            // Manage vertical aspect
+            {
+                const listHeight = parent.offsetHeight;
+                let topPosition = rect.y;
+
+                let maxY = window.innerHeight;
 
-        const _getMaxListWidth = () => {
+                if( overflowContainer )
+                {
+                    const parentRect = overflowContainer.getBoundingClientRect();
+                    maxY = parentRect.y + parentRect.height;
+                }
+
+                if( nestedDialog )
+                {
+                    const rect = nestedDialog.getBoundingClientRect();
+                    topPosition -= rect.y;
+                }
+
+                parent.style.top = ( topPosition + selectedOption.offsetHeight ) + 'px';
+
+                const showAbove = ( topPosition + listHeight ) > maxY;
+                if( showAbove )
+                {
+                    parent.style.top = ( topPosition - listHeight ) + 'px';
+                    parent.classList.add( "place-above" );
+                }
+            }
 
-            let maxWidth = 0;
-            for( let i of values )
+            // Manage horizontal aspect
             {
-                const iString = String( i );
-                maxWidth = Math.max( iString.length, maxWidth );
+                const listWidth = parent.offsetWidth;
+                let leftPosition = rect.x;
+
+                parent.style.minWidth = ( rect.width ) + 'px';
+
+                if( nestedDialog )
+                {
+                    const rect = nestedDialog.getBoundingClientRect();
+                    leftPosition -= rect.x;
+                }
+
+                parent.style.left = ( leftPosition ) + 'px';
+
+                let maxX = window.innerWidth;
+
+                if( overflowContainer )
+                {
+                    const parentRect = overflowContainer.getBoundingClientRect();
+                    maxX = parentRect.x + parentRect.width;
+                }
+
+                const showLeft = ( leftPosition + listWidth ) > maxX;
+                if( showLeft )
+                {
+                    parent.style.left = ( leftPosition - ( listWidth - rect.width ) ) + 'px';
+                }
             }
-            return Math.max( maxWidth * 10, 80 );
         };
 
         let selectedOption = this.addButton( null, buttonName, ( value, event ) => {
@@ -5005,52 +5162,50 @@ class Panel {
                 return;
             }
 
-            list.toggleAttribute( "hidden" );
-            list.classList.remove( "place-above" );
+            listDialog.classList.remove( "place-above" );
+            const opened = listDialog.hasAttribute( "open" );
 
-            const listHeight = 26 * values.length;
-            const rect = selectedOption.getBoundingClientRect();
-            const topPosition = rect.y;
-
-            let maxY = window.innerHeight;
-            let overflowContainer = list.getParentArea();
-
-            if( overflowContainer )
+            if( !opened )
             {
-                const parentRect = overflowContainer.getBoundingClientRect();
-                maxY = parentRect.y + parentRect.height;
+                listDialog.show();
+                _placeOptions( listDialog );
+            }
+            else
+            {
+                listDialog.close();
             }
 
-            list.style.top = ( topPosition + selectedOption.offsetHeight ) + 'px';
-
-            const showAbove = ( topPosition + listHeight ) > maxY;
-            if( showAbove )
+            if( filter )
             {
-                list.style.top = ( topPosition - listHeight ) + 'px';
-                list.classList.add( "place-above" );
+                filter.querySelector( "input" ).focus();
             }
 
-            list.style.width = (event.currentTarget.clientWidth) + 'px';
-            list.style.minWidth = (_getMaxListWidth()) + 'px';
-            list.focus();
-        }, { buttonClass: "array", skipInlineCount: true });
+        }, { buttonClass: "array", skipInlineCount: true, disabled: options.disabled });
 
         this.clearQueue();
 
         selectedOption.style.width = "100%";
 
         selectedOption.refresh = (v) => {
-            if(selectedOption.querySelector("span").innerText == "")
+            if( selectedOption.querySelector("span").innerText == "" )
+            {
                 selectedOption.querySelector("span").innerText = v;
+            }
             else
+            {
                 selectedOption.querySelector("span").innerHTML = selectedOption.querySelector("span").innerHTML.replaceAll(selectedOption.querySelector("span").innerText, v);
+            }
         }
 
         // Add dropdown options container
+
+        const listDialog = document.createElement( 'dialog' );
+        listDialog.className = "lexdropdownoptions";
+
         let list = document.createElement( 'ul' );
         list.tabIndex = -1;
         list.className = "lexoptions";
-        list.hidden = true;
+        listDialog.appendChild( list )
 
         list.addEventListener( 'focusout', function( e ) {
             e.stopPropagation();
@@ -5068,97 +5223,118 @@ class Panel {
             {
                 return;
             }
-            this.toggleAttribute( 'hidden', true );
+            listDialog.close();
         });
 
         // Add filter options
         let filter = null;
-        if(options.filter ?? false)
+        if( options.filter ?? false )
         {
-            filter = this._addFilter("Search option", {container: list, callback: this._search_options.bind(list, values)});
-        }
+            filter = this._addFilter( options.placeholder ?? "Search...", { container: list, callback: this._filterOptions.bind( list, values )} );
 
-        // Create option list to empty it easily..
-        const listOptions = document.createElement('span');
-        list.appendChild( listOptions );
-
-        if( filter )
-        {
-            list.prepend( filter );
-            listOptions.style.height = "calc(100% - 25px)";
+            list.appendChild( filter );
 
             filter.addEventListener('focusout', function( e ) {
                 if (e.relatedTarget && e.relatedTarget.tagName == "UL" && e.relatedTarget.classList.contains("lexoptions"))
                 {
                     return;
                 }
-                list.toggleAttribute( 'hidden', true );
+                listDialog.close();
             });
         }
 
+        // Create option list to empty it easily..
+        const listOptions = document.createElement('span');
+        listOptions.style.height = "calc(100% - 25px)";
+        list.appendChild( listOptions );
+
         // Add dropdown options list
-        list.refresh = options => {
+        list.refresh = ( options ) => {
 
             // Empty list
             listOptions.innerHTML = "";
 
-            for(let i = 0; i < options.length; i++)
+            if( !options.length )
+            {
+                let iValue = options.emptyMsg ?? "No options found.";
+
+                let option = document.createElement( "div" );
+                option.className = "option";
+                option.style.flexDirection = "unset";
+                option.innerHTML = iValue;
+
+                let li = document.createElement( "li" );
+                li.className = "lexdropdownitem empty";
+                li.appendChild( option );
+
+                listOptions.appendChild( li );
+                return;
+            }
+
+            for( let i = 0; i < options.length; i++ )
             {
-                let iValue = options[i];
-                let li = document.createElement('li');
-                let option = document.createElement('div');
+                let iValue = options[ i ];
+                let li = document.createElement( "li" );
+                let option = document.createElement( "div" );
                 option.className = "option";
-                li.appendChild(option);
-                li.addEventListener("click", (e) => {
-                    element.querySelector(".lexoptions").toggleAttribute('hidden', true);
-                    const currentSelected = element.querySelector(".lexoptions .selected");
-                    if(currentSelected) currentSelected.classList.remove("selected");
-                    value = e.currentTarget.getAttribute("value");
-                    e.currentTarget.toggleAttribute('hidden', false);
-                    e.currentTarget.classList.add("selected");
+                li.appendChild( option );
+
+                li.addEventListener( "click", e => {
+                    listDialog.close();
+                    const currentSelected = element.querySelector( ".lexoptions .selected" );
+                    if(currentSelected) currentSelected.classList.remove( "selected" );
+                    value = e.currentTarget.getAttribute( "value" );
+                    e.currentTarget.toggleAttribute( "hidden", false );
+                    e.currentTarget.classList.add( "selected" );
                     selectedOption.refresh(value);
 
-                    let btn = element.querySelector(".lexwidgetname .lexicon");
-                    if(btn) btn.style.display = (value != wValue.iValue ? "block" : "none");
-                    that._trigger( new IEvent(name, value, null), callback );
+                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
+                    if( btn ) btn.style.display = (value != wValue.iValue ? "block" : "none");
+                    that._trigger( new IEvent( name, value, null ), callback );
 
                     // Reset filter
-                    if(filter)
+                    if( filter )
                     {
-                        filter.querySelector('input').value = "";
-                        this._search_options.bind(list, values, "")();
+                        filter.querySelector( "input" ).value = "";
+                        this._filterOptions.bind( list, values, "" )();
                     }
                 });
 
                 // Add string option
-                if( iValue.constructor != Object ) {
-                    option.style.flexDirection = 'unset';
+                if( iValue.constructor != Object )
+                {
+                    option.style.flexDirection = "unset";
                     option.innerHTML = "</a><span>" + iValue + "</span><a class='fa-solid fa-check'>";
                     option.value = iValue;
-                    li.setAttribute("value", iValue);
+                    li.setAttribute( "value", iValue );
                     li.className = "lexdropdownitem";
-                    if( i == (options.length - 1) ) li.className += " last";
-                    if(iValue == value) {
-                        li.classList.add("selected");
+
+                    if( iValue == value )
+                    {
+                        li.classList.add( "selected" );
                         wValue.innerHTML = iValue;
                     }
                 }
-                else {
+                else
+                {
                     // Add image option
-                    let img = document.createElement("img");
+                    let img = document.createElement( "img" );
                     img.src = iValue.src;
-                    li.setAttribute("value", iValue.value);
+                    li.setAttribute( "value", iValue.value );
                     li.className = "lexlistitem";
                     option.innerText = iValue.value;
                     option.className += " media";
-                    option.prepend(img);
+                    option.prepend( img );
+
+                    option.setAttribute( "value", iValue.value );
+                    option.setAttribute( "data-index", i );
+                    option.setAttribute( "data-src", iValue.src );
+                    option.setAttribute( "title", iValue.value );
 
-                    option.setAttribute("value", iValue.value);
-                    option.setAttribute("data-index", i);
-                    option.setAttribute("data-src", iValue.src);
-                    option.setAttribute("title", iValue.value);
-                    if(value == iValue.value)
-                        li.classList.add("selected");
+                    if( value == iValue.value )
+                    {
+                        li.classList.add( "selected" );
+                    }
                 }
 
                 listOptions.appendChild( li );
@@ -5167,7 +5343,7 @@ class Panel {
 
         list.refresh( values );
 
-        container.appendChild( list );
+        container.appendChild( listDialog );
         element.appendChild( container );
 
         // Remove branch padding and margins
@@ -7346,6 +7522,228 @@ class Panel {
 
         return widget;
     }
+
+    /**
+     * @method addTable
+     * @param {String} name Widget name
+     * @param {Number} data Table data
+     * @param {*} options:
+     * head: Table headers (each of the headers per column)
+     * body: Table body (data per row for each column)
+     * rowActions: Allow to add actions per row
+     * onMenuAction: Function callback to fill the "menu" context
+     * selectable: Each row can be selected
+     */
+
+    addTable( name, data, options = { } ) {
+
+        if( !data )
+        {
+            throw( "Data is needed to create a table!" );
+        }
+
+        let widget = this.create_widget( name, Widget.TABLE, options );
+
+        widget.onGetValue = () => {
+
+        };
+
+        widget.onSetValue = ( newValue, skipCallback ) => {
+
+        };
+
+        let element = widget.domEl;
+
+        const container = document.createElement('div');
+        container.className = "lextable";
+        container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+
+        const table = document.createElement( 'table' );
+        container.appendChild( table );
+
+        data.head = data.head ?? [];
+        data.body = data.body ?? [];
+        data.orderMap = { };
+        data.checkMap = { };
+
+        function compareFn( idx, order, a, b) {
+            if (a[idx] < b[idx]) return -order;
+            else if (a[idx] > b[idx]) return order;
+            return 0;
+        }
+
+        widget.refreshTable = () => {
+
+            table.innerHTML = "";
+
+            // Head
+            {
+                const head = document.createElement( 'thead' );
+                head.className = "lextablehead";
+                table.appendChild( head );
+
+                const hrow = document.createElement( 'tr' );
+
+                if( options.selectable )
+                {
+                    const th = document.createElement( 'th' );
+                    const input = document.createElement( 'input' );
+                    input.type = "checkbox";
+                    input.className = "lexcheckbox";
+                    input.checked = data.checkMap[ ":root" ] ?? false;
+                    th.appendChild( input );
+
+                    input.addEventListener( 'change', function() {
+
+                        data.checkMap[ ":root" ] = this.checked;
+
+                        const body = table.querySelector( "tbody" );
+                        for( const el of body.childNodes )
+                        {
+                            data.checkMap[ el.getAttribute( "rowId" ) ] = this.checked;
+                            el.querySelector( "input" ).checked = this.checked;
+                        }
+                    });
+
+                    hrow.appendChild( th );
+                }
+
+                for( const headData of data.head )
+                {
+                    const th = document.createElement( 'th' );
+                    th.innerHTML = `${ headData } <a class="fa-solid fa-sort"></a>`;
+
+                    th.querySelector( 'a' ).addEventListener( 'click', () => {
+
+                        if( !data.orderMap[ headData ] )
+                        {
+                            data.orderMap[ headData ] = 1;
+                        }
+
+                        const idx = data.head.indexOf(headData);
+                        data.body = data.body.sort( compareFn.bind( this, idx,data.orderMap[ headData ] ) );
+                        data.orderMap[ headData ] = -data.orderMap[ headData ];
+
+                        widget.refreshTable();
+
+                    });
+
+                    hrow.appendChild( th );
+                }
+
+                // Add empty header column
+                if( options.rowActions )
+                {
+                    const th = document.createElement( 'th' );
+                    th.className = "sm";
+                    hrow.appendChild( th );
+                }
+
+                head.appendChild( hrow );
+            }
+
+            // Body
+            {
+                const body = document.createElement( 'tbody' );
+                body.className = "lextablebody";
+                table.appendChild( body );
+
+                for( let r = 0; r < data.body.length; ++r )
+                {
+                    const bodyData = data.body[ r ];
+                    const row = document.createElement( 'tr' );
+                    const rowId = LX.getSupportedDOMName( bodyData.join( '-' ) );
+                    row.setAttribute( "rowId", rowId );
+
+                    if( options.selectable )
+                    {
+                        const td = document.createElement( 'td' );
+                        const input = document.createElement( 'input' );
+                        input.type = "checkbox";
+                        input.className = "lexcheckbox";
+                        input.checked = data.checkMap[ rowId ];
+                        td.appendChild( input );
+
+                        input.addEventListener( 'change', function() {
+                            data.checkMap[ rowId ] = this.checked;
+                        });
+
+                        row.appendChild( td );
+                    }
+
+                    for( const rowData of bodyData )
+                    {
+                        const td = document.createElement( 'td' );
+                        td.innerHTML = `${ rowData }`;
+                        row.appendChild( td );
+                    }
+
+                    if( options.rowActions )
+                    {
+                        const td = document.createElement( 'td' );
+                        td.className = "sm";
+
+                        const buttons = document.createElement( 'div' );
+                        buttons.className = "lextablebuttons";
+                        td.appendChild( buttons );
+
+                        for( const action of options.rowActions )
+                        {
+                            const button = document.createElement( 'a' );
+                            button.className = "lexicon";
+
+                            if( action == "delete" )
+                            {
+                                button.className += " fa-solid fa-trash-can";
+                                button.addEventListener( 'click', function() {
+                                    // Don't need to refresh table..
+                                    data.body.splice( r, 1 );
+                                    row.remove();
+                                });
+                            }
+                            else if( action == "menu" )
+                            {
+                                button.className += " fa-solid fa-ellipsis";
+                                button.addEventListener( 'click', function( event ) {
+                                    addContextMenu( null, event, c => {
+                                        if( options.onMenuAction )
+                                        {
+                                            options.onMenuAction( c );
+                                            return;
+                                        }
+                                        console.warn( "Using <Menu action> without action callbacks." );
+                                    } );
+                                });
+                            }
+                            else // custom actions
+                            {
+                                console.assert( action.constructor == Object );
+                                button.className += ` ${ action.icon }`;
+                            }
+
+                            buttons.appendChild( button );
+                        }
+
+                        row.appendChild( td );
+                    }
+
+                    body.appendChild( row );
+                }
+            }
+        }
+
+        widget.refreshTable();
+
+        if( !widget.name )
+        {
+            element.className += " noname";
+            container.style.width = "100%";
+        }
+
+        element.appendChild( container );
+
+        return widget;
+    }
 }
 
 LX.Panel = Panel;
@@ -7702,16 +8100,15 @@ class Dialog {
             draggable = options.draggable ?? true,
             modal = options.modal ?? false;
 
-        if( modal )
-        {
-            LX.modal.toggle( false );
-        }
-
-        var root = document.createElement('div');
+        var root = document.createElement('dialog');
         root.className = "lexdialog " + (options.class ?? "");
         root.id = options.id ?? "dialog" + Dialog._last_id++;
         LX.root.appendChild( root );
 
+        doAsync( () => {
+            modal ? root.showModal() : root.show();
+        }, 10 );
+
         let that = this;
 
         var titleDiv = document.createElement('div');
@@ -7793,18 +8190,17 @@ class Dialog {
 
                 if( !options.onclose )
                 {
-                    that.panel.clear();
-                    root.remove();
+                    root.close();
+
+                    doAsync( () => {
+                        that.panel.clear();
+                        root.remove();
+                    }, 150 );
                 }
                 else
                 {
                     options.onclose( this.root );
                 }
-
-                if( modal )
-                {
-                    LX.modal.toggle( true );
-                }
             };
 
             var closeButton = document.createElement( 'a' );
@@ -7919,21 +8315,29 @@ class PocketDialog extends Dialog {
         options.draggable = options.draggable ?? false;
         options.closable = options.closable ?? false;
 
+        const dragMargin = 3;
+
         super( title, callback, options );
 
         let that = this;
         // Update margins on branch title closes/opens
         LX.addSignal("@on_branch_closed", this.panel, closed => {
             if( this.dock_pos == PocketDialog.BOTTOM )
-                this.root.style.top = "calc(100% - " + (this.root.offsetHeight + 6) + "px)";
+            {
+                this.root.style.top = "calc(100% - " + (this.root.offsetHeight + dragMargin) + "px)";
+            }
         });
 
         // Custom
         this.root.classList.add( "pocket" );
-        if( !options.position ) {
-            this.root.style.left = "calc(100% - " + (this.root.offsetWidth + 6) + "px)";
-            this.root.style.top = "0px";
+        this.root.style.left = "unset";
+
+        if( !options.position )
+        {
+            this.root.style.right = dragMargin + "px";
+            this.root.style.top = dragMargin + "px";
         }
+
         this.panel.root.style.width = "calc( 100% - 12px )";
         this.panel.root.style.height = "calc( 100% - 40px )";
         this.dock_pos = PocketDialog.TOP;
@@ -7954,7 +8358,7 @@ class PocketDialog extends Dialog {
 
             if( this.dock_pos == PocketDialog.BOTTOM )
                 that.root.style.top = this.root.classList.contains("minimized") ?
-                "calc(100% - " + (that.title.offsetHeight + 6) + "px)" : "calc(100% - " + (that.root.offsetHeight + 6) + "px)";
+                "calc(100% - " + (that.title.offsetHeight + 6) + "px)" : "calc(100% - " + (that.root.offsetHeight + dragMargin) + "px)";
         });
 
         if( !options.draggable )
@@ -7969,26 +8373,42 @@ class PocketDialog extends Dialog {
                     switch( t )
                     {
                     case 'b':
-                        this.root.style.top = "calc(100% - " + (this.root.offsetHeight + 6) + "px)";
+                        this.root.style.top = "calc(100% - " + (this.root.offsetHeight + dragMargin) + "px)";
                         break;
                     case 'l':
-                        this.root.style.left = options.position ? options.position[ 1 ] : "0px";
+                        this.root.style.right = "unset";
+                        this.root.style.left = options.position ? options.position[ 1 ] : ( dragMargin + "px" );
                         break;
                     }
                 }
             }
 
             this.root.classList.add('dockable');
-            this.title.addEventListener("keydown", function(e) {
-                if( e.ctrlKey && e.key == 'ArrowLeft' ) {
+
+            this.title.addEventListener("keydown", function( e ) {
+                if( !e.ctrlKey )
+                {
+                    return;
+                }
+
+                that.root.style.right = "unset";
+
+                if( e.key == 'ArrowLeft' )
+                {
                     that.root.style.left = '0px';
-                } else if( e.ctrlKey && e.key == 'ArrowRight' ) {
-                    that.root.style.left = "calc(100% - " + (that.root.offsetWidth + 6) + "px)";
-                }else if( e.ctrlKey && e.key == 'ArrowUp' ) {
+                }
+                else if( e.key == 'ArrowRight' )
+                {
+                    that.root.style.left = "calc(100% - " + (that.root.offsetWidth + dragMargin) + "px)";
+                }
+                else if( e.key == 'ArrowUp' )
+                {
                     that.root.style.top = "0px";
                     that.dock_pos = PocketDialog.TOP;
-                }else if( e.ctrlKey && e.key == 'ArrowDown' ) {
-                    that.root.style.top = "calc(100% - " + (that.root.offsetHeight + 6) + "px)";
+                }
+                else if( e.key == 'ArrowDown' )
+                {
+                    that.root.style.top = "calc(100% - " + (that.root.offsetHeight + dragMargin) + "px)";
                     that.dock_pos = PocketDialog.BOTTOM;
                 }
             });
@@ -9287,7 +9707,7 @@ class AssetView {
         }
 
         this.rightPanel.sameLine();
-        this.rightPanel.addDropdown( "Filter", this.allowedTypes, this.allowedTypes[ 0 ], v => this._refreshContent.call(this, null, v), { width: "20%", minWidth: "128px" } );
+        this.rightPanel.addDropdown( "Filter", this.allowedTypes, this.allowedTypes[ 0 ], v => this._refreshContent.call(this, null, v), { width: "30%", minWidth: "128px" } );
         this.rightPanel.addText( null, this.searchValue ?? "", v => this._refreshContent.call(this, v, null), { placeholder: "Search assets.." } );
         this.rightPanel.addButton( null, "<a class='fa fa-arrow-up-short-wide'></a>", on_sort.bind(this), { className: "micro", title: "Sort" } );
         this.rightPanel.addButton( null, "<a class='fa-solid fa-grip'></a>", on_change_view.bind(this), { className: "micro", title: "View" } );