lexgui 0.5.5 → 0.5.7

package/build/utilities.css

@@ -1,14 +1,14 @@
 /* Colors */
 /* Using !important to override anything written in main stylesheet */
 
-.bg-primary { background-color: var(--global-color-primary) !important }
-.bg-secondary { background-color: var(--global-color-secondary) !important }
-.bg-tertiary { background-color: var(--global-color-tertiary) !important }
-.bg-quaternary { background-color: var(--global-color-quaternary) !important }
-.bg-accent { background-color: var(--global-color-accent) !important }
-.bg-contrast { background-color: var(--global-text-primary) !important }
-.bg-warning { background-color: var(--global-color-warning) !important }
-.bg-error { background-color: var(--global-color-error) !important }
+.bg-primary { --background-color: var(--global-color-primary); background-color: var(--background-color)!important }
+.bg-secondary { --background-color: var(--global-color-secondary); background-color: var(--background-color)!important }
+.bg-tertiary { --background-color: var(--global-color-tertiary); background-color: var(--background-color)!important }
+.bg-quaternary { --background-color: var(--global-color-quaternary); background-color: var(--background-color)!important }
+.bg-accent { --background-color: var(--global-color-accent); background-color: var(--background-color)!important }
+.bg-contrast { --background-color: var(--global-text-primary); background-color: var(--background-color)!important }
+.bg-warning { --background-color: var(--global-color-warning); background-color: var(--background-color)!important }
+.bg-error { --background-color: var(--global-color-error); background-color: var(--background-color)!important }
 .bg-none { background: none !important }
 
 .hover\:bg-primary:hover { background-color: var(--global-color-primary) !important }
@@ -19,6 +19,8 @@
 .hover\:bg-contrast:hover { background-color: var(--global-text-primary) !important }
 .hover\:bg-warning:hover { background-color: var(--global-color-warning) !important }
 .hover\:bg-error:hover { background-color: var(--global-color-error) !important }
+.hover\:bg-mix:hover { background-color: color-mix(in srgb, var(--background-color), var(--global-text-primary) 5%) !important }
+.hover\:bg-mix-contrast:hover { background-color: color-mix(in srgb, var(--background-color), var(--global-color-primary) 5%) !important }
 .hover\:bg-none:hover { background: none !important }
 
 .fg-primary { color: var(--global-text-primary) !important }
@@ -60,12 +62,35 @@
 .whitespace-pre-wrap { white-space: pre-wrap }
 .whitespace-break-spaces { white-space: break-spaces }
 
+.text-start { text-align: start }
+.text-center { text-align: center }
+.text-end { text-align: end }
+
+.leading-none { line-height: 1 }
+.leading-tight { line-height: 1.25 }
+.leading-snug { line-height: 1.375 }
+.leading-normal { line-height: 1.5 }
+.leading-relaxed { line-height: 1.625 }
+.leading-loose { line-height: 2 }
+.leading-inherit { line-height: inherit }
+
+.leading-3 { line-height: 0.75rem }
+.leading-4 { line-height: 1rem }
+.leading-5 { line-height: 1.25rem }
+.leading-6 { line-height: 1.5rem }
+.leading-7 { line-height: 1.75rem }
+.leading-8 { line-height: 2rem }
+.leading-9 { line-height: 2.25rem }
+.leading-10 { line-height: 2.5rem }
+
 .text-balance { text-wrap: balance }
 .break-words { overflow-wrap: break-word }
 
 .line-clamp-1, .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical }
 .line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1 }
 .line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2 }
+.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3 }
+.line-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4 }
 
 .flex-col { flex-direction: column }
 .flex-row { flex-direction: row }
@@ -85,6 +110,10 @@
 .self-center { place-self: center }
 .self-end { place-self: end }
 
+.content-start { align-content: start }
+.content-center { align-content: center }
+.content-end { align-content: end }
+
 .gap-0 { gap: 0 }
 .gap-0\.5 { gap: 0.125rem }
 .gap-1 { gap: 0.25rem }
@@ -307,12 +336,20 @@
 .border { border: 1px solid var(--global-color-tertiary) }
 .border-colored { border: 1px solid currentColor }
 
+.border-solid { border-style: solid }
+.border-dashed { border-style: dashed }
+.border-dotted { border-style: dotted }
+.border-double { border-style: double }
+
 .border-top { border-top: 1px solid var(--global-color-tertiary) }
 .border-bottom { border-bottom: 1px solid var(--global-color-tertiary) }
 .border-left { border-left: 1px solid var(--global-color-tertiary) }
 .border-right { border-right: 1px solid var(--global-color-tertiary) }
 
 .border-2 { border-width: 2px }
+.border-4 { border-width: 4px }
+.border-6 { border-width: 6px }
+.border-8 { border-width: 8px }
 
 .border-t-0 { border-top-width: 0 }
 .border-b-0 { border-bottom-width: 0 }
@@ -320,9 +357,37 @@
 .border-r-0 { border-right-width: 0 }
 
 .rounded-none { border-radius: 0 }
+.rounded-sm { border-radius: 0.125rem }
 .rounded { border-radius: 0.25rem }
+.rounded-md { border-radius: 0.375rem }
 .rounded-lg { border-radius: 0.5rem }
+.rounded-xl { border-radius: 0.75rem }
+.rounded-2xl { border-radius: 1rem }
+.rounded-3xl { border-radius: 1.5rem }
 .rounded-full { border-radius: 9999px }
+.rounded-inherit { border-radius: inherit }
+
+.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) }
@@ -331,6 +396,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,30 @@
 
 ## dev
 
-## 0.5.5 (master)
+## 0.5.7 (master)
+
+`LX.makeIcon` now accepts `options` as second parameter (`title`, `iconClass`, `svgClass`).
+Exposed `LX.setStrictViewport(value)` to allow switching manually.
+Fixed ColorPicker minor issues.
+Fixed Examples and SourceCode links in docs.
+Added more CSS class utilities.
+
+## 0.5.6
+
+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 +38,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],
@@ -288,10 +288,11 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
                 {
                     const allMailContent = LX.makeContainer( [ "100%", "calc(100% - 50px)" ], "flex flex-col p-4 pt-0 gap-2 overflow-scroll", "", container );
 
-                    window.__addMail = ( mail, mailContainer ) => {
+                    window.__addMail = ( mail, mailContainer, idx ) => {
 
+                        const selected = ( idx == 0 );
                         const msgContent = LX.makeContainer( [ "100%", "auto" ],
-                            "flex flex-col border p-3 rounded-lg gap-2 select-none hover:bg-secondary cursor-pointer", "", mailContainer );
+                            `flex flex-col border p-3 rounded-lg gap-2 select-none hover:bg-mix cursor-pointer ${ selected ? "bg-secondary" : "" }`, "", mailContainer );
 
                         // Name, subject, date
                         {
@@ -316,13 +317,15 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
                             msgTags.appendChild( LX.badge( tag, "sm", { asElement: true } ) );
                         }
 
-                        msgContent.listen( "click", () => {
+                        msgContent.listen( "click", function() {
+                            mailContainer.childNodes.forEach( e => e.classList.remove( "bg-secondary" ) );
+                            this.classList.add( "bg-secondary" );
                             window.__openMail( mail );
                         } );
                     };
 
                     LX.requestJSON( "data/example_mail_data.json", data => {
-                        data.forEach( e => { if( !unreadOnly || ( unreadOnly && !e.read ) ) window.__addMail( e, allMailContent ) } );
+                        data.forEach( ( e, idx ) => { if( !unreadOnly || ( unreadOnly && !e.read ) ) window.__addMail( e, allMailContent, idx ) } );
                         window.__openMail( data[ 0 ] );
                     } )
                 }
@@ -371,20 +374,24 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
 
                     previewDataContent.innerHTML = "";
 
-                    const mailPreviewInfo = LX.makeContainer( [ "100%", "auto" ], "flex flex-row border-bottom p-6", "", previewDataContent );
+                    const mailPreviewInfo = LX.makeContainer( [ "100%", "auto" ], "flex flex-row border-bottom p-4 gap-3", "", previewDataContent );
+                    const avatarContainer = LX.makeContainer( [ "40px", "40px" ], "bg-tertiary rounded-full content-center", "", mailPreviewInfo );
 
-                    const senderData = LX.makeContainer( [ "100%", "auto" ], "flex flex-col gap-0.5", `
+                    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 senderData = LX.makeContainer( [ "auto", "auto" ], "flex flex-col gap-0.5", `
                     <div class="text-md font-semibold">${ mail.name }</div>
                     <div class="text-sm">${ mail.subject }</div>
                     <div class="text-sm">Reply-To: ${ mail.email }</div>
                     `, mailPreviewInfo );
 
-                    const exactDate = LX.makeContainer( [ "100%", "auto" ], "flex flex-row text-sm fg-tertiary justify-end", mail.exactDate, mailPreviewInfo );
-                    const mailPreviewContent = LX.makeContainer( [ "100%", "505px" ], "flex flex-row border-bottom text-md whitespace-pre-wrap p-4", mail.content, previewDataContent );
+                    const exactDate = LX.makeContainer( [ "auto", "auto" ], "flex flex-row text-sm fg-tertiary ml-auto", mail.exactDate, mailPreviewInfo );
+                    const mailPreviewContent = LX.makeContainer( [ "100%", "515px" ], "flex flex-row border-bottom text-md whitespace-pre-wrap p-4", mail.content, previewDataContent );
                     const previewFooter = LX.makeContainer( [ "100%", "auto" ], "flex flex-col p-2", "", previewDataContent );
 
                     const msgReplyTextArea = new LX.TextArea(null, "", null,
-                        { className: "mt-1", inputClass: "outline", width: "100%", resize: false, placeholder: `Reply ${ mail.name }` }
+                        { className: "mt-1", inputClass: "outline", width: "100%", resize: false, placeholder: `Reply ${ mail.name }...` }
                     );
                     previewFooter.appendChild( msgReplyTextArea.root );
 

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