lexgui 0.5.6 → 0.5.8

package/build/utilities.css

@@ -1,14 +1,16 @@
 /* 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-white { --background-color: white; background-color: var(--background-color)!important }
+.bg-black { --background-color: black; background-color: var(--background-color)!important }
 .bg-none { background: none !important }
 
 .hover\:bg-primary:hover { background-color: var(--global-color-primary) !important }
@@ -19,6 +21,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 }
@@ -29,6 +33,8 @@
 .fg-contrast { color: var(--global-color-primary) !important }
 .fg-warning { color: var(--global-color-warning) !important }
 .fg-error { color: var(--global-color-error) !important }
+.fg-white { color: white !important }
+.fg-black { color: black !important }
 
 .hover\:fg-primary:hover { color: var(--global-text-primary) !important }
 .hover\:fg-secondary:hover { color: var(--global-text-secondary) !important }
@@ -60,12 +66,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 +114,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 }
@@ -267,6 +300,13 @@
 .font-bold { font-weight: 700 }
 .font-extrabold { font-weight: 800 }
 
+.tracking-tighter { letter-spacing: -0.05em }
+.tracking-tight { letter-spacing: -0.025em }
+.tracking-normal { letter-spacing: 0em }
+.tracking-wide { letter-spacing: 0.025em }
+.tracking-wider { letter-spacing: 0.05em }
+.tracking-widest { letter-spacing: 0.1em }
+
 .italic { font-style: italic }
 
 .uppercase { text-transform: uppercase }
@@ -307,12 +347,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 +368,15 @@
 .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 }

package/changelog.md

@@ -2,7 +2,37 @@
 
 ## dev
 
-## 0.5.6 (master)
+## 0.5.8 (master)
+
+Widgets:
+- Added missing support for `NodeTree.refresh()` on Array data.
+
+Timeline:
+- Fix setSelectedItems.
+- Keyframe colors.
+- Integrate swap buttons.
+- Fixed scroll bar and zoom.
+- Hiding tracks on left panel also hides canvas tracks.
+- Fix track lines match the left panel tree.
+
+VideoEditor:
+- Fix crop and area reload crop.
+- Timebar fixes.
+
+Fixed area resizing issues. Improved performance (less layout trashing).
+Added missing support for swap functionality in OverlayButtons.
+Added tracking (`letter-spacing`) CSS class utilities.
+Fixed minor issues with ColorPicker mouse tracking.
+
+## 0.5.7
+
+`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`.

package/demo.js

@@ -32,7 +32,7 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
                 title: "Change Theme",
                 icon: "fa-solid fa-sun",
                 swap: "fa-solid fa-moon",
-                callback:  (event, swapValue) => { LX.setTheme( swapValue ? "light" : "dark" ) }
+                callback:  (swapValue) => { LX.setTheme( swapValue ? "light" : "dark" ) }
             }
         ], { float: "right" });
     });
@@ -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/package.json

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