lexgui 0.6.10 → 0.6.12

package/changelog.md

@@ -2,7 +2,38 @@
 
 ## dev
 
-## 0.6.10 (master)
+## 0.6.12 (master)
+
+Widgets:
+- Button Widget now supports `options.mustConfirm` to confirm the trigger with custom options.
+- Added support for LX.CalendarRange in DatePicker widget.
+
+Timeline:
+- Clips now have the active property to enable/disable the clip (only visuals).
+- Clips now have the read-only attribute trackIdx.
+- All "unselect" attribute have been renamed to "deselect".
+- Keyframes/Clips Timelines moved to Timeline subitems in docs.
+
+Previous Tour masks are now removed. Fixed Tour on resize window.
+Added new `LX.PopConfirm`.
+Fixed PlainText <> symbols in CodeEditor.
+Fixed Calendar `options.fromToday` not including today's date.
+Docs updated.
+
+## 0.6.11
+
+Widgets:
+- Fixed Progress Widget value clamp and callback.
+- Fixed Form data entries initial value if not an Object. Added support for Form `entryData.label`.
+- Fixed Vector reset issue getting old values after reset.
+
+Popover are now allowed to be created without a trigger element using `options.reference`.
+Added support for DropdownMenu and Popover `options.sideOffset` and `options.alignOffset`.
+Added support for new `LX.Tour` Component to guide users through an app.
+Fixed light-dark themes in docs css.
+Docs updated.
+
+## 0.6.10
 
 Timeline:
 - Added support for cloning clips and tracks.

package/demo.js

@@ -89,6 +89,33 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             ] },
             { name: "Help", submenu: [
                 { name: "Search Help", icon: "Search", kbd:  "F1" },
+                { name: "Start Tour", icon: "CircleHelp", callback: () => {
+                    const exampleTour = new LX.Tour([
+                        {
+                            title: "Welcome to LexGUI.js",
+                            content: "This is the main canvas where you can draw your application.",
+                            reference: canvas,
+                            side: "top",
+                            align: "center"
+                        },
+                        {
+                            title: "Menubar",
+                            content: "This menubar contains all the main actions and settings for your application.",
+                            reference: menubar.root,
+                            side: "bottom",
+                            align: "center"
+                        },
+                        {
+                            title: "Side Panel",
+                            content: "This panel contains various widgets and settings for your application.",
+                            reference: sidePanel.root,
+                            side: "left",
+                            align: "start"
+                        }
+                    ], { xoffset: 8, xradius: 12, xhorizontalOffset: 46, xverticalOffset: 46, xuseModal: false });
+
+                    exampleTour.begin();
+                } },
                 { name: "Support LexGUI", icon: "Heart" },
             ] },
         ], { sticky: false });
@@ -252,7 +279,14 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             panel.addVector3( "Position", [0.0, 0.0, 0.0] );
             panel.addVector4( "Rotation", [0.0, 0.0, 0.0, 1.0] );
             panel.addVector3( "Scale", [1.0, 1.0, 1.0] );
-            panel.addButton(null, "Export", null, { buttonClass: "contrast" });
+            panel.addButton(null, "Export", () =>  { console.log("Exported!") }, { buttonClass: "contrast", xmustConfirm: true,
+                // confirmSide: "left",
+                // confirmAlign: "start",
+                // confirmText: "Yeah",
+                // confirmCancelText: "Nope",
+                // confirmTitle: "Confirm action",
+                // confirmContent: "Are your sure??"
+             });
             panel.merge();
         }
     }

package/examples/all_widgets.html

@@ -272,6 +272,7 @@
         {
             panelC.branch("Date Picker", { closed: closedDefault });
             panelC.addDate("Using Default Date", "15/04/2025");
+            panelC.addDate("Range Date", ["15/04/2025", "19/04/2025"]);
             panelC.addDate("No Default Date", null);
             panelC.addDate("Using Today's Date", null, null, { today: true });
             panelC.addDate("Allow Until Today", null, null, { untilToday: true });

package/examples/editor.html

@@ -1073,7 +1073,7 @@
 
             p.attach(assetView);
             let assetData = [];
-            const values = ['brow_lowerer.png', 'godot_pixelart.png', 'godot_canvas.png'];
+            const values = ['brow_lowerer.png', 'godot_pixelart.png', 'realizer_signon.png'];
 
             for (let i = 0; i < values.length; i++) {
                 let data = {

package/examples/timeline.html

@@ -213,7 +213,7 @@
                 },
                 onCreateAfterTopBar: (panel) => {
                     panel.addButton("autoKeyEnabled", "autoKeyEnable", null, { icon: 'WandSparkles', hideName: true });
-                    panel.addButton("unselectAll", "unselectAll", (value, event) => { kfTimeline.unSelectAllKeyFrames();}, { icon: 'X', hideName: true, callback: (value, event) => { kfTimeline.unSelectAllKeyFrames();} });
+                    panel.addButton("deselectAll", "deselectAll", (value, event) => { kfTimeline.deselectAllKeyFrames();}, { icon: 'X', hideName: true, callback: (value, event) => { kfTimeline.deselectAllKeyFrames();} });
                 }
             });
 

package/package.json

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