lexgui 0.5.4 → 0.5.6

package/build/utilities.css

@@ -153,6 +153,30 @@
 .mr-7 { margin-right: 1.75rem }
 .mr-8 { margin-right: 2rem }
 
+.mx-0 { margin-left: 0; margin-right: 0 }
+.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem }
+.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem }
+.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem }
+.mx-4 { margin-left: 1rem; margin-right: 1rem }
+.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem }
+.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem }
+.mx-7 { margin-left: 1.75rem; margin-right: 1.75rem }
+.mx-8 { margin-left: 2rem; margin-right: 2rem }
+.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem }
+.mx-12 { margin-left: 3rem; margin-right: 3rem }
+
+.my-0 { margin-top: 0; margin-bottom: 0 }
+.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem }
+.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem }
+.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem }
+.my-4 { margin-top: 1rem; margin-bottom: 1rem }
+.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem }
+.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem }
+.my-7 { margin-top: 1.75rem; margin-bottom: 1.75rem }
+.my-8 { margin-top: 2rem; margin-bottom: 2rem }
+.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem }
+.my-12 { margin-top: 3rem; margin-bottom: 3rem }
+
 .p-0 { padding: 0 }
 .p-1 { padding: 0.25rem }
 .p-2 { padding: 0.5rem }
@@ -255,6 +279,11 @@
 .h-full { height: 100% }
 .h-screen { height: 100vh }
 
+.resize-none { resize: none }
+
+.size-fixed { field-sizing: fixed }
+.size-content { field-sizing: content }
+
 /* Positioning */
 
 .relative { position: relative }
@@ -276,6 +305,7 @@
 /* Borders / Radius / Shadow */
 
 .border { border: 1px solid var(--global-color-tertiary) }
+.border-colored { border: 1px solid currentColor }
 
 .border-top { border-top: 1px solid var(--global-color-tertiary) }
 .border-bottom { border-bottom: 1px solid var(--global-color-tertiary) }
@@ -294,6 +324,28 @@
 .rounded-lg { border-radius: 0.5rem }
 .rounded-full { border-radius: 9999px }
 
+.rounded-t-none   { border-top-left-radius: 0; border-top-right-radius: 0 }
+.rounded-r-none   { border-top-right-radius: 0; border-bottom-right-radius: 0 }
+.rounded-b-none   { border-bottom-right-radius: 0; border-bottom-left-radius: 0 }
+.rounded-l-none   { border-top-left-radius: 0; border-bottom-left-radius: 0 }
+
+.rounded-t        { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem }
+.rounded-r        { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem }
+.rounded-b        { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem }
+.rounded-l        { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem }
+
+.rounded-t-lg     { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem }
+.rounded-r-lg     { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem }
+.rounded-b-lg     { border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem }
+.rounded-l-lg     { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem }
+
+.rounded-t-full   { border-top-left-radius: 9999px; border-top-right-radius: 9999px }
+.rounded-r-full   { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px }
+.rounded-b-full   { border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px }
+.rounded-l-full   { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px }
+
+.outline-none { outline: none }
+
 .shadow { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) }
 .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) }
 .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) }
@@ -301,6 +353,7 @@
 /* Interaction / Misc */
 
 .cursor-pointer { cursor: pointer }
+.cursor-text { cursor: text }
 .pointer-events-none { pointer-events: none }
 .pointer-events-auto { pointer-events: auto }
 

package/changelog.md

@@ -2,7 +2,39 @@
 
 ## dev
 
-## 0.5.4 (master)
+## 0.5.6 (master)
+
+Widgets:
+- ColorInput Widget now uses a new custom `ColorPicker`.
+- `selectAll` input is now checked when every row is selected in Table Widget.
+- Added new OTPInput widget.
+- SwapButton functionality `options.swap` supported in default Button Widget.
+
+Added `LX.makeKbd(keys, extraClass)` to create keyboard shortcuts.
+Fixed Badges theming issues.
+Docs updated.
+
+## 0.5.5
+
+Table Widget:
+- Added support `options.filterValue`.
+- Fixed filtering when row data contains HTML tags.
+
+Other Widgets:
+- Support for TextInput `options.fit`.
+- Select Widget box alignment using custom overflow container (default is closer Area).
+  - `options.overflowContainer`, `options.overflowContainerX`, `options.overflowContainerY`
+
+Added Area Tabs option `allowDelete`, `false` by default.
+Fixed some minor CodeEditor issues.
+Added `LX.stripHTML(html)` to get clean text from HTML string.
+Fixed all "popup" menus position in scrolled window.
+Added support for options `side`, `active` and `offset` in `LX.asTooltip(trigger, content, options)`.
+Allowed users to register extra icons in LX.ICONS using `LX.registerIcon`.
+Icons and Customization docs updated.
+Minor CSS improvements. Added more class utilities.
+
+## 0.5.4
 
 Widgets:
 - Added support for disabling resize in TextArea Widget `options.resize: false`.

package/demo.js

@@ -64,7 +64,8 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
             m.add( "Scene/New Scene", () => { console.log("New scene created!") });
             m.add( "Scene/Open Scene", { icon: "fa-solid fa-folder-open", short: "S" } );
             m.add( "Scene/Open Recent/hello.scene" );
-            m.add( "Scene/Open Recent/goodbye.scene" );
+            m.add( "Scene/Open Recent/Old/goodbye.scene" );
+            m.add( "Scene/Open Recent/Old/salute.scene" );
             m.add( "Project/Project Settings", { disabled: true } );
             m.add( "Project/" );
             m.add( "Project/Export", { icon: "fa-solid fa-download" });
@@ -201,7 +202,7 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
             panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
             panel.addColor("Font Color", "#303b8d", null);
             panel.addNumber("Font Size", 36, null, { min: 1, max: 48, step: 1, units: "px"});
-            panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace"], "GeistSans");
+            panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace", "Ubuntu"], "GeistSans");
             panel.addVector2("2D Position", [300, 350], null, { min: 0, max: 1024 });
             const opacityValues = [
                 [0.2, 0.3146875],
@@ -250,7 +251,6 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
             m.add( "Shopping ", { icon: "shopping-cart" } );
             m.add( "Promotions", { icon: "flag", content: LX.badge("21", badgeClass, { asElement: true }) } );
         }, {
-            // collapseToIcons: false,
             className: "border-right",
             headerTitle: "jxarco",
             headerSubtitle: "alexroco.30@gmail.com",
@@ -453,13 +453,20 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
     }
 
     // Code
-    // {
-    //     const codeContainer = LX.makeContainer( [ "auto", "850px" ], "", {
-    //         backgroundColor: "red"
-    //     } );
+    {
+        const codeContainer = LX.makeContainer( [ "auto", "800px" ], "flex flex-col border rounded-lg overflow-hidden" );
+        tabs.add( "Code", codeContainer );
 
-    //     tabs.add( "Code", codeContainer );
-    // }
+        const codeArea = new LX.Area();
+        codeContainer.appendChild( codeArea.root );
+
+        let editor = new LX.CodeEditor(codeArea, {
+            // allowAddScripts: false,
+            // autocomplete: false,
+            // disableEdition: true,
+            // fileExplorer: false
+        });
+    }
 
     // Audio
     // {
@@ -474,6 +481,7 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
 // Footer
 {
     const footer = new LX.Footer( {
+        className: "border-top",
         parent: LX.root,
         columns: [
             {

package/examples/all_widgets.html

@@ -115,8 +115,12 @@
             buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-cube", buttonClass: "bg-primary" });
             buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-table-cells", buttonClass: "bg-tertiary fg-tertiary" });
             buttonsLeftPanel.endLine("justify-start");
-            buttonsLeftPanel.addButton(null, LX.makeIcon("circle-plus").innerHTML + "Button with Icon Start", null);
-            buttonsLeftPanel.addButton(null, "Button with Icon End" + LX.makeIcon("circle-plus").innerHTML, null);
+            buttonsLeftPanel.sameLine();
+            buttonsLeftPanel.addLabel("Swap Buttons");
+            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-moon", swap: "fa fa-sun", buttonClass: "bg-none" });
+            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-eye", swap: "fa fa-eye-slash" });
+            buttonsLeftPanel.endLine("justify-start");
+            buttonsLeftPanel.addButton(null, LX.makeIcon("circle-plus").innerHTML + "Button with Inlined Icon", null);
             buttonsLeftPanel.addButton(null, "With a Badge" + LX.badge("+99", "accent sm"));
             buttonsRightPanel.branch("Outline Buttons", { closed: closedDefault });
             buttonsRightPanel.addButton(null, "Classic Outline", null, { buttonClass: "outline" });
@@ -207,9 +211,15 @@
             panelB.addVector2("Classic Vec2", [0, 0], null);
             panelB.addVector3("Disabled Vec3", [0, 0, 0], null, { disabled: true });
             panelB.addVector4("Classic Vec4", [0, 0, 0, 0], null);
+            panelB.branch("OTP Inputs", { closed: closedDefault });
+            panelB.addOTP("Default Pattern", "464346");
+            panelB.addOTP("Custom Pattern", "23423411", null, { pattern: "xxxx-xxxx" });
+            panelB.addOTP("Empty", "");
+            panelB.addOTP("Disabled OTP", "965114", null, { disabled: true });
             panelB.branch("Color Inputs", { closed: closedDefault });
             panelB.addColor("From Hex Color", "#b7a9b1");
-            panelB.addColor("From RGB Color", [1, 0.1, 0.6]);
+            panelB.addColor("From RGB Color", { r: 1, g: 0.1, b: 0.6 });
+            panelB.addColor("Color With Alpha", "#47c1b7ff");
             panelB.addColor("Disabled Color", "#b7a9b1", null, { disabled: true });
             panelB.branch("Range Inputs", { closed: closedDefault });
             panelB.addRange("Classic", 1, null, { min: 0, max: 10, step: 1 });

package/examples/area_tabs.html

@@ -87,7 +87,7 @@
         panel.branch("Canvas", { icon: "fa-solid fa-palette", filter: true });
         panel.addColor("Background", "#b7a9b1");
         panel.addText("Text", "Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
-        panel.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
+        panel.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
             console.log("Font Color: ", value);
         });
         panel.addNumber("Font Size", 36, (value, event) => {

package/examples/dialogs.html

@@ -30,7 +30,7 @@
         p.branch("Canvas");
         p.addColor("Background", "#b7a9b1");
         p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
-        p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
+        p.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
             console.log("Font Color: ", value);
         });
         p.addNumber("Font Size", 36, (value, event) => {
@@ -50,7 +50,7 @@
         p.branch("Canvas");
         p.addColor("Background", "#b7a9b1");
         p.addText("Text", "Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
-        p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
+        p.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
             console.log("Font Color: ", value);
         });
         p.addNumber("Font Size", 36, (value, event) => {
@@ -72,7 +72,7 @@
         p.addSelect("Best Engine", ["Godot", "Unity", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Pepe"], "Godot", (value, event) => {
             console.log(value);
         }, { filter: true });
-        p.addColor("Font Color", [1, 0.1, 0.6], (value, event) => {
+        p.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
             console.log("Font Color: ", value);
         });
         p.addNumber("Font Size", 36, (value, event) => {

package/examples/timeline.html

@@ -116,7 +116,7 @@
             panel.addColor("Background", LX.getThemeColor("global-selected-light"));
             panel.addText("Track", trackName, null)
             panel.addText("Text", "Lexgui.js @evallsg", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
-            panel.addColor("Font Color", [0.1, 0.1, 0.8], (value, event) => {
+            panel.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
                 console.log("Font Color: ", value);
             });
             panel.addNumber("Font Size", 36, (value, event) => {

package/package.json

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