lexgui 8.2.2 → 8.2.4

package/changelog.md

@@ -2,7 +2,39 @@
 
 ## dev
 
-## 8.2.2 (master)
+## 8.2.4 (master)
+
+Fixed Form not automatically syncing inputs when pressing primary action button.
+Added support for Tags `options.tagClass`.
+Added support for TextArea `options.submitOnEnterKey` (def. true).
+Fixed bug TextArea adding line break on submit using Enter key.
+Fixed Checkbox, Toggle disabled CSS.
+LX.prompt now submits on Enter key. Improved Prompt content html.
+Minor CSS tweaks.
+
+CodeEditor:
+- Fixed `onContextMenu` issue on no selected content.
+- Fixed tokenizer edge case with number decimals.
+
+## 8.2.3
+
+Fixed TextInput not updating on browser autofill.
+Allow support to disable: Array, DatePicker, Layers, List, Pad, Rate, and Tags components.
+Add `options.mapIcon` to change Map2D opener button icon.
+Added `destructive` class support for Dropdown items.
+
+Form Component:
+- Enter key now submits the form as native behaviour.
+- Added `options.skipEnterSubmit` to disable the Enter submission.
+- Per entry data `entry.submit` overrides the general form options.
+- Docs updated.
+
+DocMaker:
+- Support collapsable header.
+- Added `className` support for some docs utilities.
+- Changed `#content` docs selector to `.lexdocs-content`.
+
+## 8.2.2
 
 AssetView:
 - Added suppord for custom folder names in `onBeforeCreateFolder` using 1st resolve param.

package/demo.js

@@ -99,7 +99,7 @@ LX._registerIconsAndColors( "./" );
     const header = LX.makeContainer( [ null, "auto" ], "flex flex-col gap-4 p-8 pb-4 items-center", `
         <a href="docs?p=changelog" class="flex flex-row gap-1 items-center text-sm p-1 px-4 rounded-full text-secondary-foreground decoration-none hover:bg-secondary cursor-pointer"><span class="flex bg-info w-2 h-2 rounded-full"></span>
             New Components: Avatar, Spinner, Pagination and more${ LX.makeIcon( "ArrowRight", { svgClass: "sm" } ).innerHTML }</a>
-        <p class="fg text-secondary-foreground font-medium tracking-tight leading-none text-center text-balance sm:text-5xl text-4xl">Build your Application Interface</p>
+        <p class="fg text-foreground font-medium tracking-tight leading-none text-center text-balance sm:text-5xl text-4xl">Build your Application Interface</p>
         <p class="text-secondary-foreground font-light text-xl xs:text-lg text-center text-balance leading-normal max-w-3xl">A modern-style UI kit, inspired by shadcn, built for the web. Pure HTML, JavaScript, and Tailwind CSS. Fully Open Source.</p>
     `, area );
 
@@ -382,7 +382,7 @@ LX._registerIconsAndColors( "./" );
 
             panel.branch("Node", { icon: "Box" });
             panel.addText("Name", "node_1");
-            panel.addCheckbox("Visibility", true, null);
+            panel.addCheckbox("Visibility", true, null, {disabled: true});
             panel.addLayers("Layers", 10, null);
 
             const map2Dpoints = [
@@ -401,6 +401,9 @@ LX._registerIconsAndColors( "./" );
             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.addSeparator();
+            panel.addToggle("JSON", true, null, {className: "primary", disabled: true});
             panel.addButton(null, "Export", () =>  { console.log("Exported!") }, { buttonClass: "primary", xmustConfirm: true,
                 // confirmSide: "left",
                 // confirmAlign: "start",
@@ -710,7 +713,7 @@ LX._registerIconsAndColors( "./" );
                     { name: "Make a copy" },
                     { name: "Favourite" },
                     null,
-                    { name: "Delete", icon: "Trash2", className: "text-destructive" },
+                    { name: "Delete", icon: "Trash2", className: "destructive" },
                 ]
             }
         });

package/examples/all-components.html

@@ -204,6 +204,7 @@
             checkLeftPanel.addCheckbox(null, true, null, { className: "success", label: "Success" });
             checkLeftPanel.addCheckbox(null, true, null, { className: "warning", label: "Warning" });
             checkLeftPanel.addCheckbox(null, true, null, { className: "destructive", label: "Destructive" });
+            checkLeftPanel.addCheckbox(null, true, null, { label: "Disabled", disabled: true });
         }
 
         // Radiogroup
@@ -266,6 +267,7 @@
             panelB.addOTP("Disabled OTP", "965114", null, { disabled: true });
             panelB.branch("Map2D Inputs", { closed: closedDefault });
             panelB.addMap2D("Map2D", map2Dpoints, null, { size: [ 300, 300 ] });
+            panelB.addMap2D("Disabled Map2D", map2Dpoints, null, { size: [ 300, 300 ], disabled: true });
             panelB.branch("Color Inputs", { closed: closedDefault });
             panelB.addColor("From Hex Color", "#b7a9b1");
             panelB.addColor("From RGB Color", { r: 1, g: 0.1, b: 0.6 });
@@ -287,6 +289,7 @@
                 p.addButton("Unity Button", "Click me!", null, { buttonClass: "primary" });
             } });
             panelB.addSelect("With Labels", selectValuesWithLabels, "Unity", null);
+            panelB.addSelect("Disabled", selectValuesWithLabels, "Unity", null, { disabled: true });
             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..." });
             panelB.addSelect("With Images", [{ value: "Godot", src: "https://godotengine.org/assets/press/logo_vertical_color_light.png" }, { value: "Unity", src: "https://logos-world.net/wp-content/uploads/2023/01/Unity-Logo.png" }, { value: "Unreal Engine", src: "https://cdn2.unrealengine.com/ue-logo-stacked-unreal-engine-w-677x545-fac11de0943f.png" }], "Godot", null);
@@ -294,6 +297,9 @@
             panelB.branch("File Inputs", { closed: closedDefault });
             panelB.addFile("Classic");
             panelB.addFile("Disabled", null, { disabled: true });
+            panelB.branch("Pad Inputs", { closed: closedDefault });
+            panelB.addPad("2D Pad", [0.5, 0.5], null, { padSize: "100px", min: -1, max: 2 });
+            panelB.addPad("Disabled 2D Pad", [0.5, 0.5], null, { disabled: true, padSize: "100px", min: -1, max: 2 });
         }
 
         // Rate
@@ -301,6 +307,7 @@
             panelC.branch("Rate", { closed: closedDefault });
             panelC.addRate("Basic Rate", 2, null);
             panelC.addRate("Rate With Halfs", 4.5, null, { allowHalf: true });
+            panelC.addRate("Disabled Rate", 2, null, { disabled: true });
         }
 
         // DatePicker
@@ -312,6 +319,7 @@
             panelC.addDate("Using Today's Date", null, null, { today: true });
             panelC.addDate("Allow Until Today", null, null, { untilToday: true });
             panelC.addDate("Allow From Today", null, null, { fromToday: true });
+            panelC.addDate("Disabled Date", "15/04/2025", null, { disabled: true });
         }
 
         // Tree
@@ -384,6 +392,7 @@
             panelC.branch("List", { closed: closedDefault });
             panelC.addList("Number List", [ 1, 2, 3, 4 ] );
             panelC.addList("String List", [ 'GPTeam', 'Blat Bunny', 'Blat Panthers' ], 'Blat Panthers');
+            panelC.addList("Disabled List", [ 'GPTeam', 'Blat Bunny', 'Blat Panthers' ], 'Blat Panthers', null, { disabled: true } );
             panelC.addList("String List with Icons", [['GPTeam', 'Gpu'], ['Blat Bunny', 'Bone'], ['Blat Panthers', 'PawPrint']], 'Blat Panthers');
         }
 
@@ -393,6 +402,9 @@
             panelC.addArray("Array", ['GPTeam', 'Blat Panthers', 'Blat Bunny'], (value, event) => {
                 console.log(value);
             });
+            panelC.addArray("Disabled Array", ['GPTeam', 'Blat Panthers', 'Blat Bunny'], (value, event) => {
+                console.log(value);
+            }, { disabled: true } );
         }
 
         // Table
@@ -438,13 +450,15 @@
         // Tags
         {
             panelC.branch("Tags", { closed: closedDefault });
-            panelC.addTags("Game Tags", "2d, karate, ai, engine, ps5, console");
+            panelC.addTags("Classic Tags", "2d, karate, ai, engine, ps5, console");
+            panelC.addTags("Disabled Tags", "2d, karate, ai, engine, ps5, console", null, { disabled: true } );
         }
 
         // Layers
         {
             panelC.branch("Layers", { closed: closedDefault });
             panelC.addLayers("Layers", 10);
+            panelC.addLayers("Disabled Layers", 10, null, { disabled: true });
         }
 
         // Progress

package/examples/code-editor.html

@@ -94,7 +94,13 @@
         },
         xonCreateFile: ( instance ) => {
             return { name: "new_shader.wgsl", language: "WGSL" }
-        }
+        },
+        onContextMenu: ( editor, content, event ) => {
+            if( !content ) return;
+            return [
+                { path: "Custom Action", callback: () => console.log( content ) }
+            ];
+        },
     });
 
     // editor.loadFile("../data/animation.bml", { language: "JSON" });

package/examples/editor.html

@@ -876,7 +876,7 @@
                     { name: "Make a copy", callback: (a) => console.log(a) },
                     { name: "Favourite", callback: (a) => console.log(a) },
                     null,
-                    { name: "Delete", icon: "Trash2", className: "text-destructive", callback: (a) => console.log(a) },
+                    { name: "Delete", icon: "Trash2", className: "destructive", callback: (a) => console.log(a) },
                 ]
             }
         });
@@ -887,7 +887,7 @@
         }, { pattern: { uppercase: true } });
         panel.addTextArea("Notes", "", (value, event) => {
             console.log(value);
-        }, { placeholder: 'Some notes...' });
+        }, { placeholder: 'Some notes...', submitOnEnterKey: false });
         panel.addKnob("A Small but disabled Knob", 4, 0, 200, value => { console.log(value) }, { size: 'sm', disabled: true });
         panel.addKnob("A Knob", 4, 0, 200, value => { console.log(value) });
         panel.addKnob("A Big Knob with Snap", 4, 0, 200, value => { console.log(value) }, { size: 'bg', snap: 4 });
@@ -965,17 +965,19 @@
         let dialog = new LX.Dialog('Login', panel => {
 
             const formData = {
-                Username: {
+                username: {
                     value: "",
-                    placeholder: "Enter username",
+                    label: "Username",
                     icon: "User",
+                    name: "username",
                     pattern: { minLength: 3 }
                 },
-                Password: {
+                password: {
                     value: "",
+                    label: "Password",
                     type: "password",
-                    placeholder: "Enter password",
                     icon: "KeyRound",
+                    name: "password",
                     pattern: { lowercase: true, uppercase: true, digit: true, minLength: 6 },
                     submit: true
                 }
@@ -985,7 +987,7 @@
                 if( !errors.length )
                 {
                     dialog.close();
-                    LX.toast( "Logged in!", `Welcome ${ value.Username } :)`);
+                    LX.toast( "Logged in!", `Welcome ${ value.username } :)`);
                 }
                 else
                 {

package/package.json

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