lexgui 0.6.8 → 0.6.9

package/changelog.md

@@ -2,7 +2,29 @@
 
 ## dev
 
-## 0.6.8 (master)
+## 0.6.9 (master)
+
+Timeline:
+- `addKeyframes` now returns new indices.
+- Fixed fadein/fadeout when one of them doesn't exist.
+- Fix fadeout draw
+- `setClip` now returns the Animation Clip.
+
+Widgets:
+- Added support for `options.iconPosition` in Button Widget (`cover` as default).
+- Fixed rowId in Table Widget.
+- Show "No results." row if no data in Table Widget.
+- Fixed disabled NumberInput slider.
+- TabSections icons can be modified using `iconClass` and `svgClass`.
+- TabSection's `onCreate` now receives also the tab content HTML Container (2nd parameter).
+- Fixed some Delete edge cases (key and ContextMenu) of Tree Widget.
+- Select Widget now allows creating new widgets as suboptions for each select value.
+
+Added support for Area Overlaybuttons separators.
+Fixed Menubar buttons using `float: left` alignment.
+Minor fixes CSS.
+
+## 0.6.8
 
 Widgets:
 - Support `options.onCreate` on register Custom Widget.

package/demo.js

@@ -16,8 +16,8 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
 
     menubar.setButtonImage("lexgui.js", "images/icon.png", () => {window.open("https://jxarco.github.io/lexgui.js/")}, {float: "left"})
 
-    const commandButton = new LX.Button(null, "Search command...", () => { LX.setCommandbarState( true ) }, {
-        width: "256px", className: "right", buttonClass: "border left fg-tertiary bg-secondary" }
+    const commandButton = new LX.Button(null, `Search command...<span class="ml-auto">${ LX.makeKbd( ["Ctrl", "Space"], false, "bg-tertiary border px-1 rounded" ).innerHTML }</span>`, () => { LX.setCommandbarState( true ) }, {
+        width: "256px", className: "right", buttonClass: "border fg-tertiary bg-secondary" }
     );
     menubar.root.appendChild( commandButton.root );
 

package/examples/all_widgets.html

@@ -224,6 +224,7 @@
             panelB.addNumber("Disabled", 0, null, { disabled: true });
             panelB.addNumber("With Units", 12, null, { units: "px" });
             panelB.addNumber("With Slider", 0, null, { min: 1, max: 48, step: 1 });
+            panelB.addNumber("Disabled Slider", 0, null, { min: 1, max: 48, step: 1, disabled: true });
             panelB.branch("Vector Inputs", { closed: closedDefault });
             panelB.addVector2("Classic Vec2", [0, 0], null);
             panelB.addVector3("Disabled Vec3", [0, 0, 0], null, { disabled: true });
@@ -254,6 +255,9 @@
             panelB.addRange("Disabled", 29, null, { min: 1, max: 48, step: 1, disabled: true });
             panelB.branch("Select Inputs", { closed: closedDefault });
             panelB.addSelect("Classic", selectValues, "Unity", null);
+            panelB.addSelect("With Suboptions", selectValues, "Unity", null, { on_Unity: (p) => {
+                p.addButton("Unity Button", "Click me!", null, { buttonClass: "contrast" });
+            } });
             panelB.addSelect("With Labels", selectValuesWithLabels, "Unity", null);
             panelB.addSelect("With Filter", selectValuesWithLabels, "Godot", null, { filter: true, placeholder: "Search tools..." });
             panelB.addSelect("Custom Empty Msg", selectValuesWithLabels, "Unreal Engine", null, { filter: true, emptyMsg: "No tools found.", placeholder: "Search tools..." });
@@ -290,10 +294,7 @@
                                 'actions': [
                                     {
                                         'name': 'Open script',
-                                        'icon': 'Scroll',
-                                        'callback': function (node) {
-                                            console.log(node.id + ": Script opened!")
-                                        }
+                                        'icon': 'Scroll'
                                     }
                                 ]
                             }

package/examples/editor.html

@@ -456,7 +456,9 @@
                 options: [10, 100, 1000],
                 callback: value => console.log(value)
             }
-        ], {
+        ],
+        null, // Separator
+        {
             name: "Open Sidebar Sheet",
             icon: "PanelLeftDashed",
             callback: (value, event) => {
@@ -467,27 +469,27 @@
                 const sidebar = area.addSidebar(m => {
                     m.group("Projects", { icon: "Plus", callback: (groupName, event) => { console.log(groupName) } });
                     m.add("Getting Started", { icon: "Box" /*,collapsable: false*/ });
-                    m.add("Getting Started/Installation", { icon: "Box", callback: logParams });
-                    m.add("Getting Started/Project Structure", { icon: "Box", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
-                    m.add("Building Your Application", { icon: "Code", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
-                    m.add("Search Blocks", { icon: "Search", callback: logParams });
-                    m.add("Very loooooooooooooooooooooooong sun", { icon: "Sun", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } });
+                    m.add("Getting Started/Installation", { icon: "Box" });
+                    m.add("Getting Started/Project Structure", { icon: "Box", action: { name: "ShowMenu", icon: null } });
+                    m.add("Building Your Application", { icon: "Code", action: { name: "ShowMenu", icon: null } });
+                    m.add("Search Blocks", { icon: "Search" });
+                    m.add("Very loooooooooooooooooooooooong sun", { icon: "Sun", action: { name: "ShowMenu", icon: null } });
                     m.separator();
                     m.group("API Reference");
-                    m.add("Components", { icon: "Box", callback: logParams });
-                    m.add("File Conventions", { icon: "Code", callback: logParams });
-                    m.add("Functions", { icon: "Search", callback: logParams });
-                    m.add("CLI", { icon: "Sun", callback: logParams });
+                    m.add("Components", { icon: "Box" });
+                    m.add("File Conventions", { icon: "Code" });
+                    m.add("Functions", { icon: "Search" });
+                    m.add("CLI", { icon: "Sun" });
                     m.separator();
                     m.group("Architecture");
-                    m.add("Accessibility ", { icon: "Box", callback: logParams });
-                    m.add("Fast Refresh", { icon: "Code", callback: logParams });
-                    m.add("Supported Browsers", { icon: "Search", callback: logParams });
+                    m.add("Accessibility ", { icon: "Box" });
+                    m.add("Fast Refresh", { icon: "Code" });
+                    m.add("Supported Browsers", { icon: "Search" });
                     m.separator();
                     m.add("Calendar ", { icon: "Calendar", collapsable: 3 });
-                    m.add("Personal ", { callback: logParams, type: "checkbox" });
-                    m.add("Work", { callback: logParams, type: "checkbox", value: true });
-                    m.add("Family", { callback: logParams, type: "checkbox" });
+                    m.add("Personal ", { type: "checkbox" });
+                    m.add("Work", { type: "checkbox", value: true });
+                    m.add("Family", { type: "checkbox" });
                 }, { /* collapseToIcons: false, */
                     skipHeader: true,
                     filter: true,

package/package.json

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