lexgui 0.6.1 → 0.6.3

package/changelog.md

@@ -2,7 +2,32 @@
 
 ## dev
 
-## 0.6.1 (master)
+## 0.6.3 (master)
+
+Widgets:
+- New Map2D Widget (For NNI).
+- Fixed `NodeTree.select` when item is not shown.
+- Fixed issue corrupting table body when manual sorting in Table Widget.
+
+Fixed `autoTheme` on start with `dark` color scheme.
+Improved Context Menu docs section.
+Added a few more icon solid variants.
+Minor fixes.
+
+## 0.6.2
+
+Widgets:
+- Fixed Title Widget class override.
+- Fixed Select list focusout issue.
+- Added `success` theme color to supported widgets.
+- Table active filters are now displayed in each filter button.
+- Added support for Range Filter in Table Widget.
+- Fixed dragging over drag-icon location in Number&Vector Widget inputs.
+
+Added a few more icon solid variants.
+Minor CSS tweaks.
+
+## 0.6.1
 
 Widgets:
 - Support back `options.selected` in ComboButtons Widget as `ValueType|Array<ValueType>`.

package/demo.js

@@ -7,6 +7,16 @@ window.LX = LX;
 
 const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
 
+const map2Dpoints = [
+    { "name": "angry", "pos": [-0.29348334680286725,-0.8813498603327697] },
+    { "name": "happy", "pos": [0.5728906393051147,-0.2508566975593567] },
+    { "name": "sad", "pos": [-0.542498156289837,0.3795300176749039] },
+    { "name": "calm", "pos": [0.46099435955317536,0.6203009288162395] },
+    { "name": "bored", "pos": [-0.349232931016368,0.8103832270857154] },
+    { "name": "frustrated", "pos": [-0.49046521102390306,-0.5708814736724744] },
+    { "name": "smile", "pos": [0.5762101669277435,0.20211987262339348] },
+    { "name": "upset", "pos": [-0.5796645457655041,-0.1907168771335228] }
+];
 
 // Menubar
 {
@@ -173,7 +183,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                                 'actions': [
                                     {
                                         'name': 'Open script',
-                                        'icon': 'Script'
+                                        'icon': 'Scroll'
                                     }
                                 ]
                             }
@@ -235,6 +245,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             panel.addText("Name", "node_1");
             panel.addCheckbox("Visibility", true, null, { className: "accent" });
             panel.addLayers("Layers", 10, null);
+            panel.addMap2D("Map2D", map2Dpoints, null, { size: [ 300, 300 ] });
 
             panel.addTitle( "Transform" );
             panel.addVector3( "Position", [0.0, 0.0, 0.0] );
@@ -361,7 +372,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
         {
             // Buttons
             {
-                const mailPreviewHeader = LX.makeContainer( [ "100%", "59.59px" ], "flex flex-row border-bottom p-1", "", right );
+                const mailPreviewHeader = LX.makeContainer( [ "100%", "43.5px" ], "flex flex-row border-bottom p-1", "", right );
 
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Archive", tooltip: true, buttonClass: "bg-none", icon: "Archive" } ).root );
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Move to junk", tooltip: true, buttonClass: "bg-none", icon: "ArchiveX" } ).root );
@@ -421,7 +432,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                         LX.toast( "Message sent!", "To:" + mail.email, { timeout: 5000, action: { name: "Undo", callback: ( toast, actionName, event ) => {
                             toast.close();
                         } } } );
-                    }, { className: "ml-auto", buttonClass: "contrast" } );
+                    }, { className: "ml-auto", buttonClass: "contrast px-2" } );
                     previewButtons.appendChild( sendButton.root );
                 };
             }
@@ -439,17 +450,17 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
         `, tasksContainer );
 
         const tableWidget = new LX.Table(null, {
-            head: ["Name", "Status", "Priority"],
+            head: [ "Name", "Status", "Priority", "ID" ],
             body: [
-                ["Alice", "In Progress", "High"],
-                ["Bob", "Backlog", "Medium"],
-                ["Prince", "Canceled", "Low"],
-                ["Sean", "Done", "High"],
-                ["Carter", "In Progress", "Medium"],
-                ["James", "Backlog", "Low"],
-                ["Mickey", "Todo", "Low"],
-                ["Charlie", "Canceled", "Low"],
-                ["Potato", "Todo", "High"]
+                [ "Alice", "In Progress", "High", 1 ],
+                [ "Bob", "Backlog", "Medium", 2 ],
+                [ "Prince", "Canceled", "Low", 3 ],
+                [ "Sean", "Done", "High", 4 ],
+                [ "Carter", "In Progress", "Medium", 5 ],
+                [ "James", "Backlog", "Low", 6 ],
+                [ "Mickey", "Todo", "Low", 7 ],
+                [ "Charlie", "Canceled", "Low", 8 ],
+                [ "Potato", "Todo", "High", 9 ]
             ]
         }, {
             selectable: true,
@@ -459,6 +470,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             customFilters: [
                 { name: "Status", options: ["Backlog", "Todo", "In Progress", "Done", "Cancelled"] },
                 { name: "Priority", options: ["Low", "Medium", "High"] },
+                { name: "ID", type: "range", min: 0, max: 9, step: 1, units: "hr" },
             ],
             rowActions: [
                 { icon: "Edit", title: "Edit Row" },
@@ -469,7 +481,9 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                 return [
                     { name: "Export" },
                     { name: "Make a copy" },
-                    { name: "Favourite" }
+                    { name: "Favourite" },
+                    null,
+                    { name: "Delete", icon: "Trash2", className: "fg-error" },
                 ]
             }
         });

package/examples/all_widgets.html

@@ -96,16 +96,18 @@
             buttonsLeftPanel.addButton(null, "Secondary", null, { buttonClass: "secondary" });
             buttonsLeftPanel.addButton(null, "Accent", null, { buttonClass: "accent" });
             buttonsLeftPanel.addButton(null, "Contrast", null, { buttonClass: "contrast" });
-            buttonsLeftPanel.addButton(null, "Warning", null, { buttonClass: "warning" });
+            buttonsLeftPanel.addButton(null, "Success", null, { buttonClass: "success" });
             buttonsLeftPanel.addButton(null, "Error", null, { buttonClass: "error" });
+            buttonsLeftPanel.addButton(null, "Warning", null, { buttonClass: "warning" });
             buttonsLeftPanel.branch("Disabled Buttons", { closed: closedDefault });
             buttonsLeftPanel.addButton(null, "Classic", null, { disabled: true });
             buttonsLeftPanel.addButton(null, "Primary", null, { disabled: true, buttonClass: "primary" });
             buttonsLeftPanel.addButton(null, "Secondary", null, { disabled: true, buttonClass: "secondary" });
             buttonsLeftPanel.addButton(null, "Accent", null, { disabled: true, buttonClass: "accent" });
             buttonsLeftPanel.addButton(null, "Contrast", null, { disabled: true, buttonClass: "contrast" });
-            buttonsLeftPanel.addButton(null, "Warning", null, { disabled: true, buttonClass: "warning" });
+            buttonsLeftPanel.addButton(null, "Success", null, { disabled: true, buttonClass: "success" });
             buttonsLeftPanel.addButton(null, "Error", null, { disabled: true, buttonClass: "error" });
+            buttonsLeftPanel.addButton(null, "Warning", null, { disabled: true, buttonClass: "warning" });
             buttonsLeftPanel.branch("Advanced Buttons", { closed: closedDefault });
             buttonsLeftPanel.addButton("Icon Button", "Not used", null, { icon: "Skull" });
             buttonsLeftPanel.sameLine();
@@ -127,16 +129,18 @@
             buttonsRightPanel.addButton(null, "Secondary Outline", null, { buttonClass: "secondary outline" });
             buttonsRightPanel.addButton(null, "Accent Outline", null, { buttonClass: "accent outline" });
             buttonsRightPanel.addButton(null, "Contrast Outline", null, { buttonClass: "contrast outline" });
-            buttonsRightPanel.addButton(null, "Warning Outline", null, { buttonClass: "warning outline" });
+            buttonsRightPanel.addButton(null, "Success Outline", null, { buttonClass: "success outline" });
             buttonsRightPanel.addButton(null, "Error Outline", null, { buttonClass: "error outline" });
+            buttonsRightPanel.addButton(null, "Warning Outline", null, { buttonClass: "warning outline" });
             buttonsRightPanel.branch("Dashed Buttons", { closed: closedDefault });
             buttonsRightPanel.addButton(null, "Classic Dashed", null, { buttonClass: "dashed" });
             buttonsRightPanel.addButton(null, "Primary Dashed", null, { buttonClass: "primary dashed" });
             buttonsRightPanel.addButton(null, "Secondary Dashed", null, { buttonClass: "secondary dashed" });
             buttonsRightPanel.addButton(null, "Accent Dashed", null, { buttonClass: "accent dashed" });
             buttonsRightPanel.addButton(null, "Contrast Dashed", null, { buttonClass: "contrast dashed" });
-            buttonsRightPanel.addButton(null, "Warning Dashed", null, { buttonClass: "warning dashed" });
+            buttonsRightPanel.addButton(null, "Success Dashed", null, { buttonClass: "success dashed" });
             buttonsRightPanel.addButton(null, "Error Dashed", null, { buttonClass: "error dashed" });
+            buttonsRightPanel.addButton(null, "Warning Dashed", null, { buttonClass: "warning dashed" });
             buttonsRightPanel.branch("Combo Buttons", { closed: closedDefault });
             buttonsRightPanel.addComboButtons("Classic Combo", comboValues);
             buttonsRightPanel.addComboButtons("Toggle Combo", comboValues, { toggle: true });
@@ -158,8 +162,9 @@
             checkLeftPanel.addCheckbox(null, true, null, { className: "secondary", label: "Secondary" });
             checkLeftPanel.addCheckbox(null, true, null, { className: "accent", label: "Accent" });
             checkLeftPanel.addCheckbox(null, true, null, { className: "contrast", label: "Contrast" });
-            checkLeftPanel.addCheckbox(null, true, null, { className: "warning", label: "Warning" });
+            checkLeftPanel.addCheckbox(null, true, null, { className: "success", label: "Success" });
             checkLeftPanel.addCheckbox(null, true, null, { className: "error", label: "Error" });
+            checkLeftPanel.addCheckbox(null, true, null, { className: "warning", label: "Warning" });
         }
 
         // Radiogroup
@@ -177,16 +182,18 @@
             checkRightPanel.addToggle(null, true, null, { className: "secondary", label: "Secondary" });
             checkRightPanel.addToggle(null, true, null, { className: "accent", label: "Accent" });
             checkRightPanel.addToggle(null, true, null, { className: "contrast", label: "Contrast" });
-            checkRightPanel.addToggle(null, true, null, { className: "warning", label: "Warning" });
+            checkRightPanel.addToggle(null, true, null, { className: "success", label: "Success" });
             checkRightPanel.addToggle(null, true, null, { className: "error", label: "Error" });
+            checkRightPanel.addToggle(null, true, null, { className: "warning", label: "Warning" });
             checkRightPanel.branch("Outline Toggles", { closed: closedDefault });
             checkRightPanel.addToggle(null, true, null, { label: "Classic" });
             checkRightPanel.addToggle(null, true, null, { className: "primary outline", label: "Primary" });
             checkRightPanel.addToggle(null, true, null, { className: "secondary outline", label: "Secondary" });
             checkRightPanel.addToggle(null, true, null, { className: "accent outline", label: "Accent" });
             checkRightPanel.addToggle(null, true, null, { className: "contrast outline", label: "Contrast" });
-            checkRightPanel.addToggle(null, true, null, { className: "warning outline", label: "Warning" });
+            checkRightPanel.addToggle(null, true, null, { className: "success outline", label: "Success" });
             checkRightPanel.addToggle(null, true, null, { className: "error outline", label: "Error" });
+            checkRightPanel.addToggle(null, true, null, { className: "warning outline", label: "Warning" });
         }
 
         // Test Inputs
@@ -226,8 +233,9 @@
             panelB.addRange("Secondary", 4, null, { min: 0, max: 10, step: 1, className: "secondary" });
             panelB.addRange("Accent", 3, null, { min: 0, max: 10, step: 1, className: "accent" });
             panelB.addRange("Contrast", 5, null, { min: 0, max: 10, step: 1, className: "contrast" });
-            panelB.addRange("Warning", 2, null, { min: 0, max: 10, step: 1, className: "warning" });
+            panelB.addRange("Success", 9, null, { min: 0, max: 10, step: 1, className: "success" });
             panelB.addRange("Error", 6, null, { min: 0, max: 10, step: 1, className: "error" });
+            panelB.addRange("Warning", 2, null, { min: 0, max: 10, step: 1, className: "warning" });
             panelB.addRange("Inverted", 22, null, { min: 20, max: 48, step: 1, left: true });
             panelB.addRange("NoFill", 10, null, { min: 1, max: 48, step: 1, fill: false });
             panelB.addRange("Disabled", 29, null, { min: 1, max: 48, step: 1, disabled: true });
@@ -269,7 +277,7 @@
                                 'actions': [
                                     {
                                         'name': 'Open script',
-                                        'icon': 'Script',
+                                        'icon': 'Scroll',
                                         'callback': function (node) {
                                             console.log(node.id + ": Script opened!")
                                         }

package/package.json

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