lexgui 0.6.7 → 0.6.9

package/build/lexgui.js

@@ -14,7 +14,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 const LX = {
-    version: "0.6.7",
+    version: "0.6.9",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -5077,7 +5077,7 @@ LX.makeCodeSnippet = makeCodeSnippet;
  * @param {Array} keys
  * @param {String} extraClass
  */
-function makeKbd( keys, extraClass = "" )
+function makeKbd( keys, useSpecialKeys = true, extraClass = "" )
 {
     const specialKeys = {
         "Ctrl": '⌃',
@@ -5099,7 +5099,7 @@ function makeKbd( keys, extraClass = "" )
 
     for( const k of keys )
     {
-        LX.makeContainer( ["auto", "auto"], "self-center text-xs fg-secondary select-none", specialKeys[ k ] ?? k, kbd );
+        LX.makeContainer( ["auto", "auto"], "self-center text-xs fg-secondary select-none " + extraClass, useSpecialKeys ? specialKeys[ k ] ?? k : k, kbd );
     }
 
     return kbd;
@@ -6432,16 +6432,15 @@ class Area {
         if( auto && type == "vertical" )
         {
             // Listen resize event on first area
-            const resizeObserver = new ResizeObserver( entries => {
+            this._autoVerticalResizeObserver = new ResizeObserver( entries => {
                 for ( const entry of entries )
                 {
                     const size = entry.target.getComputedSize();
                     area2.root.style.height = "calc(100% - " + ( size.height ) + "px )";
                 }
-                resizeObserver.disconnect();
             });
 
-            resizeObserver.observe( area1.root );
+            this._autoVerticalResizeObserver.observe( area1.root );
         }
 
         // Being minimizable means it's also resizeable!
@@ -6806,6 +6805,7 @@ class Area {
         this.attach( container );
 
         const float = options.float;
+        let floatClass = "";
 
         if( float )
         {
@@ -6815,15 +6815,17 @@ class Area {
                 switch( t )
                 {
                 case 'h': break;
-                case 'v': container.className += " vertical"; break;
+                case 'v': floatClass += " vertical"; break;
                 case 't': break;
-                case 'm': container.className += " middle"; break;
-                case 'b': container.className += " bottom"; break;
+                case 'm': floatClass += " middle"; break;
+                case 'b': floatClass += " bottom"; break;
                 case 'l': break;
-                case 'c': container.className += " center"; break;
-                case 'r': container.className += " right"; break;
+                case 'c': floatClass += " center"; break;
+                case 'r': floatClass += " right"; break;
                 }
             }
+
+            container.className += ` ${ floatClass }`;
         }
 
         const _addButton = function( b, group, last ) {
@@ -6898,6 +6900,15 @@ class Area {
 
             for( let b of buttons )
             {
+                if( b === null )
+                {
+                    // Add a separator
+                    const separator = document.createElement("div");
+                    separator.className = "lexoverlayseparator" + floatClass;
+                    overlayPanel.root.appendChild( separator );
+                    continue;
+                }
+
                 if( b.constructor === Array )
                 {
                     for( let i = 0; i < b.length; ++i )
@@ -6963,6 +6974,12 @@ class Area {
             return;
         }
 
+        // When manual resizing, we don't need the observer anymore
+        if( this._autoVerticalResizeObserver )
+        {
+            this._autoVerticalResizeObserver.disconnect();
+        }
+
         const a1 = this.sections[ 0 ];
         var a1Root = a1.root;
 
@@ -7383,7 +7400,7 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
 
     LX.Panel.prototype[ 'add' + customWidgetName ] = function( name, instance, callback ) {
 
-        options.nameWidth = "100%";
+        const userParams = Array.from( arguments ).slice( 3 );
 
         let widget = new Widget( Widget.CUSTOM, name, null, options );
         this._attachWidget( widget );
@@ -7405,6 +7422,11 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
             }
         };
 
+        widget.onResize = ( rect ) => {
+            const realNameWidth = ( widget.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
+        };
+
         const element = widget.root;
 
         let container, customWidgetsDom;
@@ -7418,8 +7440,7 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
             if( customWidgetsDom ) customWidgetsDom.remove();
 
             container = document.createElement('div');
-            container.className = "lexcustomcontainer";
-            container.style.width = "100%";
+            container.className = "lexcustomcontainer w-full";
             element.appendChild( container );
             element.dataset["opened"] = false;
 
@@ -7543,6 +7564,11 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
                     }
                 }
 
+                if( options.onCreate )
+                {
+                    options.onCreate.call( this, this, ...userParams );
+                }
+
                 this.clearQueue();
             }
         };
@@ -7608,9 +7634,9 @@ class NodeTree {
 
         if( this.options.onlyFolders )
         {
-            let has_folders = false;
-            node.children.forEach( c => has_folders |= (c.type == 'folder') );
-            isParent = !!has_folders;
+            let hasFolders = false;
+            node.children.forEach( c => hasFolders |= (c.type == 'folder') );
+            isParent = !!hasFolders;
         }
 
         let item = document.createElement('li');
@@ -7775,23 +7801,15 @@ class NodeTree {
                 } );
 
                 event.panel.add( "Delete", { callback: () => {
-                    // It's the root node
-                    if( !node.parent )
-                    {
-                        return;
-                    }
 
-                    if( that.onevent )
+                    const ok = that.deleteNode( node );
+
+                    if( ok && that.onevent )
                     {
                         const event = new LX.TreeEvent( LX.TreeEvent.NODE_DELETED, node, e );
                         that.onevent( event );
                     }
 
-                    // Delete nodes now
-                    let childs = node.parent.children;
-                    const index = childs.indexOf( node );
-                    childs.splice( index, 1 );
-
                     this.refresh();
                 } } );
             }
@@ -7808,23 +7826,26 @@ class NodeTree {
 
             if( e.key == "Delete" )
             {
-                // Send event now so we have the info in selected array..
-                if( that.onevent )
+                const nodesDeleted = [];
+
+                for( let _node of this.selected )
                 {
-                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_DELETED, this.selected.length > 1 ? this.selected : node, e );
-                    event.multiple = this.selected.length > 1;
-                    that.onevent( event );
+                    if( that.deleteNode( _node ) )
+                    {
+                        nodesDeleted.push( _node );
+                    }
                 }
 
-                // Delete nodes now
-                for( let _node of this.selected )
+                // Send event now so we have the info in selected array..
+                if( nodesDeleted.length && that.onevent )
                 {
-                    let childs = _node.parent.children;
-                    const index = childs.indexOf( _node );
-                    childs.splice( index, 1 );
+                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_DELETED, nodesDeleted.length > 1 ? nodesDeleted : node, e );
+                    event.multiple = nodesDeleted.length > 1;
+                    that.onevent( event );
                 }
 
                 this.selected.length = 0;
+
                 this.refresh();
             }
             else if( e.key == "ArrowUp" || e.key == "ArrowDown" ) // Unique or zero selected
@@ -8093,6 +8114,35 @@ class NodeTree {
         this.selected = [ el.treeData ];
         el.focus();
     }
+
+    deleteNode( node ) {
+
+        const dataAsArray = ( this.data.constructor === Array );
+
+        // Can be either Array or Object type data
+        if( node.parent )
+        {
+            let childs = node.parent.children;
+            const index = childs.indexOf( node );
+            childs.splice( index, 1 );
+        }
+        else
+        {
+            if( dataAsArray )
+            {
+                const index = this.data.indexOf( node );
+                console.assert( index > -1, "NodeTree: Can't delete root node " + node.id + " from data array!" );
+                this.data.splice( index, 1 );
+            }
+            else
+            {
+                console.warn( "NodeTree: Can't delete root node from object data!" );
+                return false;
+            }
+        }
+
+        return true;
+    }
 }
 
 LX.NodeTree = NodeTree;
@@ -8460,18 +8510,38 @@ class Button extends Widget {
             wValue.classList.add( "selected" );
         }
 
-        if( options.icon )
-        {
-            const icon = LX.makeIcon( options.icon );
-            wValue.prepend( icon );
-            wValue.classList.add( "justify-center" );
-        }
-        else if( options.img )
+        if( options.img )
         {
             let img = document.createElement( 'img' );
             img.src = options.img;
             wValue.prepend( img );
         }
+        else if( options.icon )
+        {
+            const icon = LX.makeIcon( options.icon );
+            const iconPosition = options.iconPosition ?? "cover";
+
+            // Default
+            if( iconPosition == "cover" || ( options.swap !== undefined ) )
+            {
+                wValue.prepend( icon );
+            }
+            else
+            {
+                wValue.innerHTML = `<span>${ ( value || "" ) }</span>`;
+
+                if( iconPosition == "start" )
+                {
+                    wValue.querySelector( "span" ).prepend( icon );
+                }
+                else // "end"
+                {
+                    wValue.querySelector( "span" ).appendChild( icon );
+                }
+            }
+
+            wValue.classList.add( "justify-center" );
+        }
         else
         {
             wValue.innerHTML = `<span>${ ( value || "" ) }</span>`;
@@ -8927,8 +8997,8 @@ class Select extends Widget {
             value = newValue;
 
             let item = null;
-            const options = listOptions.childNodes;
-            options.forEach( e => {
+            const listOptionsNodes = listOptions.childNodes;
+            listOptionsNodes.forEach( e => {
                 e.classList.remove( "selected" );
                 if( e.getAttribute( "value" ) == newValue )
                 {
@@ -8948,6 +9018,22 @@ class Select extends Widget {
                 list.refresh( filteredOptions );
             }
 
+            // Update suboptions menu
+            const suboptions = this.root.querySelector( ".lexcustomcontainer" );
+            const suboptionsFunc = options[ `on_${ value }` ];
+            suboptions.toggleAttribute( "hidden", !suboptionsFunc );
+
+            if( suboptionsFunc )
+            {
+                suboptions.innerHTML = "";
+                const suboptionsPanel = new LX.Panel();
+                suboptionsPanel.queue( suboptions );
+                suboptionsFunc.call(this, suboptionsPanel);
+                suboptionsPanel.clearQueue();
+            }
+
+            this.root.dataset["opened"] = ( !!suboptionsFunc );
+
             if( !skipCallback )
             {
                 this._trigger( new LX.IEvent( name, value, event ), callback );
@@ -9244,6 +9330,25 @@ class Select extends Widget {
 
         container.appendChild( listDialog );
 
+        // Element suboptions
+        let suboptions = document.createElement( "div" );
+        suboptions.className = "lexcustomcontainer w-full";
+
+        const suboptionsFunc = options[ `on_${ value }` ];
+        suboptions.toggleAttribute( "hidden", !suboptionsFunc );
+
+        if( suboptionsFunc )
+        {
+            suboptions.innerHTML = "";
+            const suboptionsPanel = new LX.Panel();
+            suboptionsPanel.queue( suboptions );
+            suboptionsFunc.call( this, suboptionsPanel );
+            suboptionsPanel.clearQueue();
+        }
+
+        this.root.appendChild( suboptions );
+        this.root.dataset["opened"] = ( !!suboptionsFunc );
+
         LX.doAsync( this.onResize.bind( this ) );
     }
 
@@ -10347,6 +10452,7 @@ class NumberInput extends Widget {
             slider.step = options.step ?? 1;
             slider.type = "range";
             slider.value = value;
+            slider.disabled = this.disabled;
 
             slider.addEventListener( "input", ( e ) => {
                 this.set( slider.valueAsNumber, false, e );
@@ -11434,7 +11540,7 @@ class TabSections extends Widget {
             let tabEl = document.createElement( "div" );
             tabEl.className = "lextab " + (i == tabs.length - 1 ? "last" : "") + ( isSelected ? "selected" : "" );
             tabEl.innerHTML = ( showNames ? tab.name : "" );
-            tabEl.appendChild( LX.makeIcon( tab.icon ?? "Hash", { title: tab.name } ) );
+            tabEl.appendChild( LX.makeIcon( tab.icon ?? "Hash", { title: tab.name, iconClass: tab.iconClass, svgClass: tab.svgClass } ) );
 
             let infoContainer = document.createElement( "div" );
             infoContainer.id = tab.name.replace( /\s/g, '' );
@@ -11470,7 +11576,7 @@ class TabSections extends Widget {
                 // Push to tab space
                 const creationPanel = new LX.Panel();
                 creationPanel.queue( infoContainer );
-                tab.onCreate.call(this, creationPanel);
+                tab.onCreate.call( this, creationPanel, infoContainer );
                 creationPanel.clearQueue();
             }
         }
@@ -11574,16 +11680,16 @@ class Table extends Widget {
         container.className = "lextable";
         this.root.appendChild( container );
 
-        this.centered = options.centered ?? false;
-        if( this.centered === true )
+        this._centered = options.centered ?? false;
+        if( this._centered === true )
         {
             container.classList.add( "centered" );
         }
 
+        this.activeCustomFilters = {};
         this.filter = options.filter ?? false;
-        this.toggleColumns = options.toggleColumns ?? false;
         this.customFilters = options.customFilters ?? false;
-        this.activeCustomFilters = {};
+        this._toggleColumns = options.toggleColumns ?? false;
         this._currentFilter = options.filterValue;
 
         data.head = data.head ?? [];
@@ -11591,6 +11697,7 @@ class Table extends Widget {
         data.checkMap = { };
         data.colVisibilityMap = { };
         data.head.forEach( (col, index) => { data.colVisibilityMap[ index ] = true; });
+        this.data = data;
 
         const compareFn = ( idx, order, a, b) => {
             if (a[idx] < b[idx]) return -order;
@@ -11604,7 +11711,7 @@ class Table extends Widget {
         };
 
         // Append header
-        if( this.filter || this.customFilters || this.toggleColumns )
+        if( this.filter || this.customFilters || this._toggleColumns )
         {
             const headerContainer = LX.makeContainer( [ "100%", "auto" ], "flex flex-row" );
 
@@ -11716,7 +11823,7 @@ class Table extends Widget {
                 this._resetCustomFiltersBtn.root.classList.add( "hidden" );
             }
 
-            if( this.toggleColumns )
+            if( this._toggleColumns )
             {
                 const icon = LX.makeIcon( "Settings2" );
                 const toggleColumnsBtn = new LX.Button( "toggleColumnsBtn", icon.innerHTML + "View", (value, e) => {
@@ -11788,7 +11895,9 @@ class Table extends Widget {
                         const body = table.querySelector( "tbody" );
                         for( const el of body.childNodes )
                         {
-                            data.checkMap[ el.getAttribute( "rowId" ) ] = this.checked;
+                            const rowId = el.getAttribute( "rowId" );
+                            if( !rowId ) continue;
+                            data.checkMap[ rowId ] = this.checked;
                             el.querySelector( "input[type='checkbox']" ).checked = this.checked;
                         }
                     });
@@ -11804,7 +11913,7 @@ class Table extends Widget {
                     th.querySelector( "span" ).appendChild( LX.makeIcon( "MenuArrows", { svgClass: "sm" } ) );
 
                     const idx = data.head.indexOf( headData );
-                    if( this.centered && this.centered.indexOf( idx ) > -1 )
+                    if( this._centered?.indexOf && this._centered.indexOf( idx ) > -1 )
                     {
                         th.classList.add( "centered" );
                     }
@@ -11814,7 +11923,7 @@ class Table extends Widget {
                         { name: "Desc", icon: "ArrowDownAZ", callback: sortFn.bind( this, idx, -1 ) }
                     ];
 
-                    if( this.toggleColumns )
+                    if( this._toggleColumns )
                     {
                         menuOptions.push(
                             null,
@@ -11876,6 +11985,9 @@ class Table extends Widget {
                         // Origin row should go to the target row, and the rest should be moved up/down
                         const fromIdx = rIdx - 1;
                         const targetIdx = movePending[ 1 ] - 1;
+
+                        LX.emit( "@on_table_sort", { instance: this, fromIdx, targetIdx } );
+
                         const b = data.body[ fromIdx ];
                         let targetOffset = 0;
 
@@ -11996,8 +12108,8 @@ class Table extends Widget {
                     }
 
                     const row = document.createElement( 'tr' );
-                    const rowId = LX.getSupportedDOMName( bodyData.join( '-' ) );
-                    row.setAttribute( "rowId", rowId.substr(0, 32) );
+                    const rowId = LX.getSupportedDOMName( bodyData.join( '-' ) ).substr(0, 32);
+                    row.setAttribute( "rowId", rowId );
 
                     if( options.sortable ?? false )
                     {
@@ -12081,7 +12193,7 @@ class Table extends Widget {
                         td.innerHTML = `${ rowData }`;
 
                         const idx = bodyData.indexOf( rowData );
-                        if( this.centered && this.centered.indexOf( idx ) > -1 )
+                        if( this._centered?.indexOf && this._centered.indexOf( idx ) > -1 )
                         {
                             td.classList.add( "centered" );
                         }
@@ -12113,7 +12225,7 @@ class Table extends Widget {
                             }
                             else if( action == "menu" )
                             {
-                                button = LX.makeIcon( "Ellipsis", { title: "Menu" } );
+                                button = LX.makeIcon( "EllipsisVertical", { title: "Menu" } );
                                 button.addEventListener( 'click', function( event ) {
                                     if( !options.onMenuAction )
                                     {
@@ -12152,6 +12264,17 @@ class Table extends Widget {
 
                     body.appendChild( row );
                 }
+
+                if( body.childNodes.length == 0 )
+                {
+                    const row = document.createElement( 'tr' );
+                    const td = document.createElement( 'td' );
+                    td.setAttribute( "colspan", data.head.length + this.rowOffsetCount + 1 ); // +1 for rowActions
+                    td.className = "empty-row";
+                    td.innerHTML = "No results.";
+                    row.appendChild( td );
+                    body.appendChild( row );
+                }
             }
 
             for( const v in data.colVisibilityMap )
@@ -12171,8 +12294,50 @@ class Table extends Widget {
 
         LX.doAsync( this.onResize.bind( this ) );
     }
+
+    getSelectedRows() {
+
+        const selectedRows = [];
+
+        for( const row of this.data.body )
+        {
+            const rowId = LX.getSupportedDOMName( row.join( '-' ) ).substr( 0, 32 );
+            if( this.data.checkMap[ rowId ] === true )
+            {
+                selectedRows.push( row );
+            }
+        }
+
+        return selectedRows;
+    }
+
+    _setCentered( v ) {
+
+        if( v.constructor == Boolean )
+        {
+            const container = this.root.querySelector( ".lextable" );
+            container.classList.toggle( "centered", v );
+        }
+        else
+        {
+            // Make sure this is an array containing which columns have
+            // to be centered
+            v = [].concat( v );
+        }
+
+        this._centered = v;
+
+        this.refresh();
+    }
 }
 
+Object.defineProperty( Table.prototype, "centered", {
+    get: function() { return this._centered; },
+    set: function( v ) { this._setCentered( v ); },
+    enumerable: true,
+    configurable: true
+});
+
 LX.Table = Table;
 
 /**
@@ -12894,6 +13059,7 @@ class Panel {
      * hideName: Don't use name as label [false]
      * disabled: Make the widget disabled [false]
      * icon: Icon class to show as button value
+     * iconPosition: Icon position (cover|start|end)
      * fileInput: Button click requests a file
      * fileInputType: Type of the requested file
      * img: Path to image to show as button value
@@ -13385,6 +13551,8 @@ class Panel {
      * @param {Array} tabs Contains objects with {
      *      name: Name of the tab (if icon, use as title)
      *      icon: Icon to be used as the tab icon (optional)
+     *      iconClass: Class to be added to the icon (optional)
+     *      svgClass: Class to be added to the inner SVG of the icon (optional)
      *      onCreate: Func to be called at tab creation
      *      onSelect: Func to be called on select tab (optional)
      * }
@@ -13984,7 +14152,7 @@ class Menubar {
             this.buttonContainer.className = "lexmenubuttons";
             this.buttonContainer.classList.add( options.float ?? "center" );
 
-            if( options.position == "right" )
+            if( options.float == "right" )
             {
                 this.buttonContainer.right = true;
             }
@@ -14003,7 +14171,7 @@ class Menubar {
         {
             const data = buttons[ i ];
             const title = data.title;
-            const button = new LX.Button( title, "", data.callback, { title, buttonClass: "bg-none", disabled: data.disabled, icon: data.icon, hideName: true, swap: data.swap } );
+            const button = new LX.Button( title, data.label, data.callback, { title, buttonClass: "bg-none", disabled: data.disabled, icon: data.icon, hideName: true, swap: data.swap, iconPosition: "start" } );
             this.buttonContainer.appendChild( button.root );
 
             if( title )