lexgui 0.6.11 → 0.7.0

package/changelog.md

@@ -2,7 +2,75 @@
 
 ## dev
 
-## 0.6.11 (master)
+## 0.7.0 (master)
+
+General/Utils:
+- "Components" have been renamed to "Extensions".
+- Every elements, widget, etc. is now a "Component".
+- Added support for `LX.toCamelCase` and `LX.toTitleCase`.
+- Polished CSS.
+- Changed LexGUI brand icons.
+- Unified code fonts. Using now CascadiaCode (https://github.com/microsoft/cascadia-code).
+
+New Components:
+- Skeleton Component (Feedback)
+- Breadcrumb Component (Navigation)
+- Rate Component (Data Input)
+
+New "default" | "compact" layout spacing:
+- `options.spacingMode` in LX.init
+- `LX.setSpacingMode` and `LX.switchSpacing`
+
+Component Updates:
+- Badges:
+  - Added `options.parent` to use them as notification indicators inside an element
+  - Added `options.chip` to use as notification indicators alone
+  - Added `options.callback` option on click.
+- Toast:
+  - Allow creation at left, center and right + top/bottom using `options.position`.
+- Sidebar:
+  - Added subitem option `options.content` to match main items.
+  - Added entry option `options.skipSelection` to avoid selections even with `displaySelected`.
+  - Support swap icons in entries.
+  - Fixed subentry selection.
+- Dropdowns:
+  - Support radio button groups.
+- AssetView:
+  - Improved toolbar with Dropdowns. Now refreshes icons on change sort and layout modes.
+- Table:
+  - Added support for Calendar Date filter in Table Component.
+- Other Bugfixes:
+  - Fixed Select Component above placement on filter.
+  - FIxed CodeEditor 'End' horizontal scrolling.
+  - Fixed CodeEditor CSS harcoded Tab height.
+  - Fixed dropdown, popovers, etc within modal backdrop.
+  - Fixed minor issue with CalendarRange when selecting >1 months apart.
+
+Improved Documentation:
+- Added AssetView, CodeSnippet and other small components (badge, sheet, toast, etc.).
+- Added Docmaker and Video Editor extension docs.
+- Added addition version to elements in sidebar.
+- Added Changelog section.
+
+## 0.6.12
+
+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.
@@ -104,10 +172,10 @@ Added `hover:scale` CSS selectors.
 ## 0.6.5
 
 Timeline:
-  - Refactored undo-redo.
-  - ClipsTimeline: added an argument on `addClip` to start search at a particular track.
-  - Documentation updated.
-  - Minor fixes.
+- Refactored undo-redo.
+- ClipsTimeline: added an argument on `addClip` to start search at a particular track.
+- Documentation updated.
+- Minor fixes.
 
 Use sidebar inside Sheet element on mobile.
 Removed LX.UTILS. Moved methods to global namespace `LX`.
@@ -116,11 +184,11 @@ Minor fixes in example demos.
 ## 0.6.4
 
 Timeline:
-  - Paste refactor.
-  - `onUpdateTrack` now expects an array of track indices as argument.
-  - Added root.
-  - Added documentation.
-  - Fixed example.
+- Paste refactor.
+- `onUpdateTrack` now expects an array of track indices as argument.
+- Added root.
+- Added documentation.
+- Fixed example.
 
 Widgets:
 - Centered Map2D initial position.
@@ -172,9 +240,6 @@ Improved robustness of `LX.getSupportedDOMName`.
 
 `LX.init` now has to called using `await`.
 Use Dropdowns elements in menubar.
-Remove legacy:
-  - Removed `options.selected` in ComboButtons Widget.
-  - Removed FA icons.
 Added LucideIcons as main icon provider.
 `LX.makeIcon`: Support for solid variants in supported icons (also using `iconName@variant`).
 `LX.registerIcon`: Support for classes and attributes for svg and path elements.
@@ -187,14 +252,18 @@ Added support for right sidebar.
 Restyled Number Widget units to avoid layout trashing when recomputing units span location.
 
 CodeEditor:
-  - Remove language images and use SVG instead.
-  - Scrolling fixes.
-  - Fixed minor css issues.
+- Remove language images and use SVG instead.
+- Scrolling fixes.
+- Fixed minor css issues.
+
+Remove legacy:
+- Removed `options.selected` in ComboButtons Widget.
+- Removed FA icons.
 
 Docs updated:
-  - Added interactive code examples for widgets.
-  - Improved widget list parameters and options.
-  - Added live examples for sidebar and menubar.
+- Added interactive code examples for widgets.
+- Improved widget list parameters and options.
+- Added live examples for sidebar and menubar.
 
 ## 0.5.11
 
@@ -542,8 +611,8 @@ Minor bug fixes.
 Timeline: Fixed timeline signals and added callbacks
 
 Number/Vector widgets:
-    - Support for onPress&onRelease for catching mouse events.
-    - Added `setLimits` for min, max, step parameters.
+- Support for onPress&onRelease for catching mouse events.
+- Added `setLimits` for min, max, step parameters.
 
 Added Size Widget (N dimension number widget).
 Minor bug fixes.

package/demo.js

@@ -1,53 +1,66 @@
 import { LX } from 'lexgui';
-import 'lexgui/components/codeeditor.js';
-import 'lexgui/components/timeline.js';
-import 'lexgui/components/audio.js';
+import 'lexgui/extensions/codeeditor.js';
+import 'lexgui/extensions/timeline.js';
+import 'lexgui/extensions/audio.js';
 
 window.LX = LX;
 
 const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
+const starterTheme = LX.getTheme();
 
 // Menubar
 {
     const menubar = area.addMenubar( [
         { name: "Docs", callback: () => { window.open("./docs/") } },
+        { name: "Components", callback: () => { window.open("./docs/?p=components") } },
         { name: "Examples", callback: () => { window.open("./examples/") } },
     ] );
 
-    menubar.setButtonImage("lexgui.js", "images/icon.png", () => {window.open("https://jxarco.github.io/lexgui.js/")}, {float: "left"})
+    menubar.setButtonImage("lexgui.js", `images/icon_${ starterTheme }.png`, () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left"} );
+
+    LX.addSignal( "@on_new_color_scheme", ( el, value ) => {
+        menubar.setButtonImage("lexgui.js", `images/icon_${ value }.png` );
+    } );
 
     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 );
 
-    const starterTheme = LX.getTheme();
-
     menubar.addButtons( [
         {
             title: "Github",
             icon: "Github@solid",
-            callback:  (event) => {
-                window.open( "https://github.com/jxarco/lexgui.js/", "_blank" );
-            }
+            callback:  (event) => window.open( "https://github.com/jxarco/lexgui.js/", "_blank" )
         },
         {
             title: "Switch Theme",
             icon: starterTheme == "dark" ? "Moon" : "Sun",
             swap: starterTheme == "dark" ? "Sun" : "Moon",
             callback:  (value, event) => { LX.switchTheme() }
+        },
+        {
+            title: "Switch Spacing",
+            icon: "AlignVerticalSpaceAround",
+            callback:  (value, event) => { LX.switchSpacing() }
         }
     ], { float: "right" });
 }
 
 // Header
 {
-    const header = LX.makeContainer( [ null, "auto" ], "flex flex-col border-top border-bottom gap-2 px-6 py-12", `
+    const header = LX.makeContainer( [ null, "auto" ], "flex flex-col border-top border-bottom gap-2 px-10 py-8", `
         <a>Get started with LexGUI.js <span class="text-sm fg-secondary">${ LX.version }</span></a>
         <h1>Build your application interface</h1>
-        <p class="font-light" style="max-width:32rem">A set of beautifully-designed, accessible widgets and components.
+        <p class="font-light" style="max-width:32rem">A set of beautifully-designed, accessible components.
         No complex frameworks. Pure JavaScript and CSS. Open Source.</p>
     `, area );
+
+    const headerButtons = LX.makeContainer( [ "auto", "auto" ], "flex flex-row", ``, header );
+    const getStartedButton = new LX.Button( null, "Get Started", () => window.open( "./docs/", "_blank" ), { buttonClass: "contrast p-1 px-3" } );
+    const componentsButton = new LX.Button( null, "View Components", () => window.open( "./docs/?p=components", "_blank" ), { buttonClass: "tertiary p-1 px-3" } );
+    headerButtons.appendChild( getStartedButton.root );
+    headerButtons.appendChild( componentsButton.root );
 }
 
 // Content
@@ -107,12 +120,12 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                         },
                         {
                             title: "Side Panel",
-                            content: "This panel contains various widgets and settings for your application.",
+                            content: "This panel contains various components and settings for your application.",
                             reference: sidePanel.root,
                             side: "left",
                             align: "start"
                         }
-                    ], { xoffset: 8, xradius: 12, xhorizontalOffset: 46, xverticalOffset: 46 });
+                    ], { xoffset: 8, xradius: 12, xhorizontalOffset: 46, xverticalOffset: 46, xuseModal: false });
 
                     exampleTour.begin();
                 } },
@@ -240,7 +253,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                 }
             });
 
-            // add widgets to panel branch
+            // add components to panel branch
             panel.branch("Canvas", { icon: "Palette", filter: true });
             panel.addColor("Background", "#b7a9b1", null);
             panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "Type"});
@@ -279,7 +292,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();
         }
     }
@@ -287,7 +307,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
     // Mail
     {
         const mailContainer = LX.makeContainer( [ null, "800px" ], "flex flex-col bg-primary border rounded-lg overflow-hidden" );
-        tabs.add( "Mail", mailContainer, { xselected: true } );
+        tabs.add( "Mail", mailContainer, { xselected: true, badge: { content: "5", className: "xs fg-white bg-error", asChild: true } } );
 
         const mailArea = new LX.Area();
         mailContainer.appendChild( mailArea.root );
@@ -310,7 +330,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             className: "border-right",
             headerTitle: "jxarco",
             headerSubtitle: "alexroco.30@gmail.com",
-            headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/icon.png",
+            headerImage: "images/favicon.png",
             skipFooter: true,
             displaySelected: true,
             onHeaderPressed: (e, element) => { }
@@ -434,7 +454,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                     const avatarContainer = LX.makeContainer( [ "40px", "40px" ], "bg-tertiary rounded-full content-center", "", mailPreviewInfo );
 
                     const mailNames = mail.name.split( ' ' );
-                    const avatarIcon = LX.makeContainer( [ "auto", "auto" ], "font-medium text-lg self-center", mailNames[ 0 ][ 0 ] + mailNames[ 1 ][ 0 ], avatarContainer );
+                    const avatarIcon = LX.makeContainer( [ "auto", "auto" ], "font-medium self-center", mailNames[ 0 ][ 0 ] + mailNames[ 1 ][ 0 ], avatarContainer );
 
                     const senderData = LX.makeContainer( [ "auto", "auto" ], "flex flex-col gap-0.5", `
                     <div class="text-md font-semibold">${ mail.name }</div>
@@ -477,18 +497,18 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             <p class="fg-tertiary">Here's a list of your tasks for this month!</p>
         `, tasksContainer );
 
-        const tableWidget = new LX.Table(null, {
-            head: [ "Name", "Status", "Priority", "ID" ],
+        const tableComponent = new LX.Table(null, {
+            head: [ "Name", "Status", "Priority", "Date", "ID" ],
             body: [
-                [ "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 ]
+                [ "Alice", "In Progress", "High", "20/06/2025", 1 ],
+                [ "Bob", "Backlog", "Medium", "11/04/2025", 2 ],
+                [ "Prince", "Canceled", "Low", "13/05/2025", 3 ],
+                [ "Sean", "Done", "High", "28/07/2025", 4 ],
+                [ "Carter", "In Progress", "Medium", "20/03/2025", 5 ],
+                [ "James", "Backlog", "Low", "10/02/2025", 6 ],
+                [ "Mickey", "Todo", "Low", "08/01/2025", 7 ],
+                [ "Charlie", "Canceled", "Low", "23/05/2025", 8 ],
+                [ "Potato", "Todo", "High", "15/07/2025", 9 ]
             ]
         }, {
             selectable: true,
@@ -499,6 +519,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                 { name: "Status", options: ["Backlog", "Todo", "In Progress", "Done", "Canceled"] },
                 { name: "Priority", options: ["Low", "Medium", "High"] },
                 { name: "ID", type: "range", min: 0, max: 9, step: 1, units: "hr" },
+                { name: "Date", type: "date", xdefault: ["23/07/2025", "29/07/2025"] },
             ],
             rowActions: [
                 { icon: "Edit", title: "Edit Row" },
@@ -515,7 +536,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                 ]
             }
         });
-        tasksContainer.appendChild( tableWidget.root );
+        tasksContainer.appendChild( tableComponent.root );
     }
 
     // Code
@@ -553,8 +574,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             {
                 title: "LexGUI",
                 items: [
-                    { title: "Documentation", link: "https://jxarco.github.io/lexgui.js/docs/" },
-                    { title: "Source code", link: "https://github.com/jxarco/lexgui.js/" }
+                    { title: "Source code on Github", link: "https://github.com/jxarco/lexgui.js/" }
                 ]
             },
             {

package/examples/{all_widgets.html → all-components.html}

@@ -6,13 +6,13 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
 
     <script type="importmap">
       {
         "imports": {
           "lexgui": "../build/lexgui.module.js",
-          "lexgui/components/": "../build/components/"
+          "lexgui/extensions/": "../build/extensions/"
         }
       }
   </script>
@@ -25,13 +25,14 @@
 
 <script type="module">
     import { LX } from 'lexgui';
-    import 'lexgui/components/codeeditor.js';
+    import 'lexgui/extensions/codeeditor.js';
 
     window.LX = LX;
 
     // Init library and get main area
     let area = await LX.init();
 
+    const starterTheme = LX.getTheme();
     const menubar = area.addMenubar( [], { sticky: false } );
     menubar.addButtons([
         {
@@ -44,11 +45,20 @@
             icon: "Moon",
             swap: "Sun",
             callback: (swapValue) => { LX.setTheme(swapValue ? "light" : "dark") }
+        },
+        {
+            title: "Switch Spacing",
+            icon: "AlignVerticalSpaceAround",
+            callback:  (value, event) => { LX.switchSpacing() }
         }
     ]);
 
     menubar.setButtonIcon("Github", "Github", () => { window.open("https://github.com/jxarco/lexgui.js/") })
-    menubar.setButtonImage("lexgui.js", "../images/icon.png", () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" })
+    menubar.setButtonImage("lexgui.js", `../images/icon_small_${ starterTheme }.png`, () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" } );
+
+    LX.addSignal( "@on_new_color_scheme", ( el, value ) => {
+        menubar.setButtonImage( "lexgui.js", `../images/icon_small_${ value }.png` );
+    } );
 
     var [middle, right] = area.split({ sizes: ["70%", "30%"], minimizable: true });
     var [left, center] = middle.split({ sizes: ["50%", null], minimizable: true });
@@ -268,10 +278,18 @@
             panelB.addFile("Disabled", null, { disabled: true });
         }
 
+        // Rate
+        {
+            panelC.branch("Rate", { closed: closedDefault });
+            panelC.addRate("Basic Rate", 2, null);
+            panelC.addRate("Rate With Halfs", 4.5, null, { allowHalf: true });
+        }
+
         // DatePicker
         {
             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/{area_tabs.html → area-tabs.html}

@@ -6,12 +6,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Area Tabs Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -64,7 +64,7 @@
 
         var ctx = canvas.getContext("2d");
 
-        // Get values from panel widgets (e.g. color value)
+        // Get values from panel components (e.g. color value)
         ctx.fillStyle = panelA.getValue('Background');
 
         ctx.fillRect(0, 0, canvas.width, canvas.height);

package/examples/{asset_view.html → asset-view.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI AssetView Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/components/codeeditor.js';
+    import 'lexgui/extensions/codeeditor.js';
 
     // Init library and get main area
     let area = await LX.init();

package/examples/{code_editor.html → code-editor.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Code Editor Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/components/codeeditor.js';
+    import 'lexgui/extensions/codeeditor.js';
 
     // init library and get main area
     let area = await LX.init();
@@ -64,7 +64,7 @@
     editor.loadFile("../data/rust_sample.rs");
     editor.loadFile("../data/animation.bml", { language: "JSON" });
     editor.loadFile("../data/CMakeLists.txt", { language: "CMake" });
-    editor.loadFile("../localhost.bat");
+    editor.loadFile("../data/localhost.bat");
     editor.loadFile("../index.html");
 
     if (!fileExplorer) {

package/examples/dialogs.html

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Dialogs Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -97,7 +97,7 @@
 
         var ctx = canvas.getContext("2d");
 
-        // Get values from panel widgets (e.g. color value)
+        // Get values from panel component (e.g. color value)
         ctx.fillStyle = pocketDialog.panel.getValue('Background');
         ctx.fillRect(0, 0, canvas.width, canvas.height);