lexgui 0.5.5 → 0.5.6

package/build/utilities.css

@@ -324,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) }
@@ -331,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,10 +2,22 @@
 
 ## dev
 
-## 0.5.5 (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`..
+- Added support `options.filterValue`.
 - Fixed filtering when row data contains HTML tags.
 
 Other Widgets:
@@ -18,7 +30,7 @@ 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`;
+Allowed users to register extra icons in LX.ICONS using `LX.registerIcon`.
 Icons and Customization docs updated.
 Minor CSS improvements. Added more class utilities.
 

package/demo.js

@@ -202,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],

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.5",
+    "version": "0.5.6",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",