lexgui 0.4.1 → 0.5.0

package/changelog.md

@@ -1,8 +1,38 @@
 # lexgui.js changelog
 
-## dev
+## 0.5.0 (master)
 
-## 0.4.1 (master)
+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).
+- 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.
+Added `extraClass` parameter for `LX.makeIcon`.
+Fixed Menubar.getButton.
+Fixed some CSS icon alignment issues.
+
+## 0.4.1
 
 Widgets:
 - Text: Skip callback if no changes.

package/demo.js

@@ -13,10 +13,7 @@ let area = LX.init( { strictViewport: false } );
         
         m.setButtonImage("lexgui.js", "images/icon.png", () => {window.open("https://jxarco.github.io/lexgui.js/")}, {float: "left"})
     
-        // m.add( "Docs", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
-        m.add( "Docs/Pepe", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
-        m.add( "Docs/Luis/ac", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
-        m.add( "Docs/Luis/vrr", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
+        m.add( "Docs", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
     
         const panel = new LX.Panel();
         panel.addButton(null, "Search command...", () => { LX.setCommandbarState( true ) }, { width: "256px", className: "right", buttonClass: "outline left" });

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,38 +1,44 @@
 {
     "name": "lexgui",
-    "version": "0.4.1",
+    "version": "0.5.0",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",
     "module": "./build/lexgui.module.js",
     "repository": {
-      "type": "git",
-      "url": "https://github.com/jxarco/lexgui.js"
+        "type": "git",
+        "url": "https://github.com/jxarco/lexgui.js"
     },
     "files": [
-      "build",
-      "build/components",
-      "examples",
-      "LICENSE",
-      "package.json",
-      "changelog.md",
-      "README.md",
-      "demo.js"
+        "build",
+        "build/components",
+        "examples",
+        "LICENSE",
+        "package.json",
+        "changelog.md",
+        "README.md",
+        "demo.js"
     ],
     "keywords": [
-      "lexgui",
-      "lexgui.js",
-      "javascript",
-      "editor",
-      "gui",
-      "interface",
-      "canvas",
-      "svg",
-      "html5"
+        "lexgui",
+        "lexgui.js",
+        "javascript",
+        "editor",
+        "gui",
+        "interface",
+        "canvas",
+        "svg",
+        "html5"
     ],
     "author": "jxarco",
     "license": "MIT",
     "bugs": {
-      "url": "https://github.com/jxarco/lexgui.js/issues"
+        "url": "https://github.com/jxarco/lexgui.js/issues"
+    },
+    "scripts": {
+        "minify-css": "cleancss -o build/lexgui.min.css build/lexgui.css",
+        "minify-js": "uglifyjs build/lexgui.module.js -o build/lexgui.module.min.js --compress --mangle --module && uglifyjs build/lexgui.js -o build/lexgui.min.js --compress --mangle --no-module",
+        "minify": "npm run minify-js && npm run minify-css",
+        "build": "python build-legacy.py && npm run minify"
     }
-  }
+}