lexgui 0.4.2 → 0.5.1

package/changelog.md

@@ -2,11 +2,44 @@
 
 ## dev
 
-## 0.4.2 (master)
+## 0.5.1 (master)
+
+Widgets:
+- Added support for `text centering` all/specific columns in Table Widget.
+- Fixed widget content size when using `options.nameWidth`. First fix for sizes in inline widgets.
+- Fixed issue in Tree Widget when selecting from code using `NodeTree.select`.
+- Support for closing all Node items recursively by using `Alt+Close` on a specific node.
+
+Fixed Area tabs drag&drop when `fit` mode.
+Fixed issue on open/destroy dropdown.
+Fixed label text wrap on Checkbox&Toggle widgets.
+Added `contrast` theme for supported Widgets.
+
+## 0.5.0
+
+Widgets:
+- Created classes for each widget to create them at any place.
+- `Panel.addTabs`: Renamed to `addTabSections`. Added name parameter (1st). Returns `TabSections` widget instance.
+- `Panel.addDropdown`: Renamed to `addSelect`. Returns `Select` widget instance.
+- Added support for labels in Select Widget.
+- `Panel.addContent` and `Panel.addImage` now accepts name as first parameter.
+- Title: `Panel.addTitle` now returns `Title` widget instance, not its inner title HTMLElement.
+- Tree: `Panel.addTree` now returns `Tree` widget instance, not its inner `NodeTree`.
+- Table: Added support for `options.sortable` rows and `title` for row action icons.
+
+Fixed Select Widget overflow inside dialog.
+New `DropdownMenu` class.
+Added `displaySelected` option to Sidebar to display selected entry.
+Started Notifications docs.
+Added Icons/ page in docs.
+Fixed Menubar entries auto-open when menubar is focused.
+Minor CSS tweaks.
+
+## 0.4.2
 
 Widgets:
 - RadioGroup: Add name parameter (1st).
-- Add `options.hideName` for supported widgets: Don't use label but add `name` to allow registering.
+- Added `options.hideName` for supported widgets: Don't use label but add `name` to allow registering.
 
 Sidebar subentries are now collapsable (`true` by default).
 Support `options.header` and `options.footer` for custom sidebar elements.

package/examples/area_tabs.html

@@ -53,6 +53,10 @@
         fillPanelB( panelB );
         rightTabs.add( "PanelB", panelB );
 
+        var panelC = new LX.Panel();
+        fillPanelC( panelC );
+        rightTabs.add( "panelC", panelC );
+
         function loop(dt) {
             
             var ctx = canvas.getContext("2d");
@@ -77,7 +81,6 @@
         // **** **** **** **** **** **** **** **** **** **** **** **** 
 
         function fillPanelA( panel ) {
-            
             panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
             panel.addColor("Background", "#b7a9b1");
             panel.addText("Text", "Lexgui.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
@@ -94,7 +97,6 @@
         }
 
         function fillPanelB( panel ) {
-            
             panel.branch("Settings", {icon: "fa-solid fa-palette", filter: true});
             panel.addTitle("Configuration (Im a title)");
             panel.addCheckbox("Toggle me", true, (value, event) => {
@@ -107,5 +109,18 @@
             panel.merge();
         }
 
+        function fillPanelC( panel ) {
+            panel.branch("Some Branch", {icon: "fa-solid fa-palette", filter: true});
+            panel.addTitle("C title");
+            panel.addToggle("A cool Toggle", true, (value, event) => {
+                console.log(value);
+            }, { suboptions: (p) => {
+                p.addText(null, "Suboption 1");
+                p.addNumber("Suboption 2", 12);
+            } });
+            panel.addRange("Yup", 15, data => { console.log(data) }, {} );
+            panel.merge();
+        }
+
     </script>
 </html>

package/examples/dialogs.html

@@ -67,6 +67,9 @@
             p.branch("Canvas");
             p.addColor("Background", "#b7a9b1");
             p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
+            p.addSelect("Best Engine", ["Godot", "Unity", "Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Pepe"], "Godot", (value, event) => {
+                console.log(value);
+            }, {filter: true});
             p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
                 console.log("Font Color: ", value);
             });
@@ -76,9 +79,6 @@
             p.addVector2("2D Position", [250, 350], (value, event) => {
                 console.log(value);
             }, { min: 0, max: 1024 });
-            p.addDropdown("Best Engine", ["Godot", "Unity", "Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Unreal Engine","Pepe"], "Godot", (value, event) => {
-                console.log(value);
-            }, {filter: true});
             p.merge();
         }, { size: ["350px", null], draggable: true });
 

package/examples/timeline.html

@@ -188,7 +188,7 @@
             let kfTimeline = new LX.KeyFramesTimeline('keyframesTimeline', {
                 disableNewTracks: true,
                 onBeforeCreateTopBar: (panel) => {
-                    panel.addDropdown("Animation", ["Anim 1", "Anim 2", "Anim 3"], "Anim 1", ()=> {})
+                    panel.addSelect("Animation", ["Anim 1", "Anim 2", "Anim 3"], "Anim 1", ()=> {})
                 },
                 onAfterCreateTopBar: (panel) => {
                     panel.addButton("", "autoKeyEnable", null, { icon: 'fa fa-wand-magic-sparkles', name: 'autoKeyEnabled', width: "40px" });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.4.2",
+    "version": "0.5.1",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",