lexgui 0.5.1 → 0.5.3

package/build/utilities.css

@@ -0,0 +1,215 @@
+/* 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-none { background: none !important }
+
+.fg-primary { color: var(--global-text-primary) !important }
+.fg-secondary { color: var(--global-text-secondary) !important }
+.fg-tertiary { color: var(--global-text-tertiary) !important }
+.fg-quaternary { color: var(--global-text-quaternary) !important }
+.fg-accent { color: var(--global-text-accent) !important }
+.fg-contrast { color: var(--global-text-primary) !important }
+.fg-warning { color: var(--global-text-warning) !important }
+.fg-error { color: var(--global-text-error) !important }
+
+/* Layout */
+
+.flex { display: flex }
+.inline-flex { display: inline-flex }
+.grid { display: grid }
+.block { display: block }
+.inline-block { display: inline-block }
+.hidden { display: none !important }
+
+.flex-col { flex-direction: column }
+.flex-row { flex-direction: row }
+.flex-wrap { flex-wrap: wrap }
+
+.items-center { align-items: center }
+.items-start { align-items: flex-start }
+.items-end { align-items: flex-end }
+
+.justify-start { justify-content: start }
+.justify-center { justify-content: center }
+.justify-end { justify-content: end }
+.justify-between { justify-content: space-between }
+.justify-around { justify-content: space-around }
+
+.self-center { align-self: center }
+
+.gap-1 { gap: 0.25rem }
+.gap-2 { gap: 0.5rem }
+.gap-3 { gap: 0.75rem }
+.gap-4 { gap: 1rem }
+.gap-5 { gap: 1.25rem }
+.gap-6 { gap: 1.5rem }
+.gap-7 { gap: 1.75rem }
+.gap-8 { gap: 2rem }
+
+/* Spacing */
+
+.mt-auto { margin-top: auto }
+.mb-auto { margin-bottom: auto }
+.ml-auto { margin-left: auto }
+.mr-auto { margin-right: auto }
+
+.m-0 { margin: 0 }
+.m-1 { margin: 0.25rem }
+.m-2 { margin: 0.5rem }
+.m-3 { margin: 0.75rem }
+.m-4 { margin: 1rem }
+.m-5 { margin: 1.25rem }
+.m-6 { margin: 1.5rem }
+.m-7 { margin: 1.75rem }
+.m-8 { margin: 2rem }
+
+.mt-2 { margin-top: 0.5rem }
+.mb-2 { margin-bottom: 0.5rem }
+.ml-2 { margin-left: 0.5rem }
+.mr-2 { margin-right: 0.5rem }
+
+.p-0 { padding: 0 }
+.p-1 { padding: 0.25rem }
+.p-2 { padding: 0.5rem }
+.p-3 { padding: 0.75rem }
+.p-4 { padding: 1rem }
+.p-5 { padding: 1.25rem }
+.p-6 { padding: 1.5rem }
+.p-7 { padding: 1.75rem }
+.p-8 { padding: 2rem }
+
+.pt-0 { padding-top: 0 }
+.pt-1 { padding-top: 0.25rem }
+.pt-2 { padding-top: 0.5rem }
+.pt-3 { padding-top: 0.75rem }
+.pt-4 { padding-top: 1rem }
+.pt-5 { padding-top: 1.25rem }
+.pt-6 { padding-top: 1.5rem }
+.pt-7 { padding-top: 1.75rem }
+.pt-8 { padding-top: 2rem }
+
+.pb-0 { padding-bottom: 0 }
+.pb-1 { padding-bottom: 0.25rem }
+.pb-2 { padding-bottom: 0.5rem }
+.pb-3 { padding-bottom: 0.75rem }
+.pb-4 { padding-bottom: 1rem }
+.pb-5 { padding-bottom: 1.25rem }
+.pb-6 { padding-bottom: 1.5rem }
+.pb-7 { padding-bottom: 1.75rem }
+.pb-8 { padding-bottom: 2rem }
+
+.pl-0 { padding-left: 0 }
+.pl-1 { padding-left: 0.25rem }
+.pl-2 { padding-left: 0.75rem }
+.pl-3 { padding-left: 0.5rem }
+.pl-4 { padding-left: 1rem }
+.pl-5 { padding-left: 1.25rem }
+.pl-6 { padding-left: 1.5rem }
+.pl-7 { padding-left: 1.75rem }
+.pl-8 { padding-left: 2rem }
+
+.pr-0 { padding-right: 0 }
+.pr-1 { padding-right: 0.25rem }
+.pr-2 { padding-right: 0.5rem }
+.pr-3 { padding-right: 0.75rem }
+.pr-4 { padding-right: 1rem }
+.pr-5 { padding-right: 1.25rem }
+.pr-6 { padding-right: 1.5rem }
+.pr-7 { padding-right: 1.75rem }
+.pr-8 { padding-right: 2rem }
+
+.px-0 { padding-left: 0; padding-right: 0 }
+.px-1 { padding-left: 0.25rem; padding-right: 0.25rem }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem }
+.px-4 { padding-left: 1rem; padding-right: 1rem }
+.px-5 { padding-left: 1.25rem; padding-right: 1.25rem }
+.px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
+.px-7 { padding-left: 1.75rem; padding-right: 1.75rem }
+.px-8 { padding-left: 2rem; padding-right: 2rem }
+
+.py-0 { padding-top: 0; padding-bottom: 0 }
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem }
+.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem }
+.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
+.py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
+.py-8 { padding-top: 2rem; padding-bottom: 2rem }
+
+/* Typography */
+
+.font-light { font-weight: 300 }
+.font-normal { font-weight: 400 }
+.font-medium { font-weight: 500 }
+.font-semibold { font-weight: 600 }
+.font-bold { font-weight: 700 }
+.font-extrabold { font-weight: 800 }
+
+.italic { font-style: italic }
+
+.uppercase { text-transform: uppercase }
+.capitalize { text-transform: capitalize }
+
+/* Width / Height */
+
+.w-full { width: 100% }
+.w-screen { width: 100vw }
+.h-full { height: 100% }
+.h-screen { height: 100vh }
+
+/* Positioning */
+
+.relative { position: relative }
+.absolute { position: absolute }
+.fixed { position: fixed }
+.sticky { position: sticky }
+
+.top-0 { top: 0 }
+.right-0 { right: 0 }
+.bottom-0 { bottom: 0 }
+.left-0 { left: 0 }
+
+.z-0 { z-index: 0 }
+.z-10 { z-index: 10 }
+.z-50 { z-index: 50 }
+.z-100 { z-index: 100 }
+.z-1000 { z-index: 1000 }
+
+/* Borders / Radius / Shadow */
+
+.border { border: 1px solid var(--global-color-tertiary) }
+.border-2 { border-width: 2px }
+
+.rounded-none { border-radius: 0 }
+.rounded { border-radius: 0.25rem }
+.rounded-lg { border-radius: 0.5rem }
+.rounded-full { border-radius: 9999px }
+
+.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) }
+
+/* Interaction / Misc */
+
+.cursor-pointer { cursor: pointer }
+.pointer-events-none { pointer-events: none }
+.pointer-events-auto { pointer-events: auto }
+
+.select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
+
+.opacity-0 { opacity: 0 }
+.opacity-50 { opacity: 0.5 }
+.opacity-100 { opacity: 1 }
+
+.ease-in { transition-timing-function: ease-in }
+.ease-out { transition-timing-function: ease-out }

package/changelog.md

@@ -2,7 +2,34 @@
 
 ## dev
 
-## 0.5.1 (master)
+## 0.5.3 (master)
+
+Widgets:
+- Fixed Select Widget filter issues.
+- Fixed Color Widget not updating hex code on pasting value.
+
+`Panel.endLine` now accepts `className` as first param to allow more customization.
+Remove `gap` by default in inline widgets container.
+Changed global font family to Geist Sans.
+Started support for tailwind-like utility css classes.
+Fixed Select Widget inside Dialog when opening above selector.
+Improve styling for supported widgets. Better consistency.
+Added new demo example showcasing all widgets.
+
+## 0.5.2
+
+Table Widget:
+- Fixed manual-sort not modifying inner data.
+- Use Dropdown for menu actions `options.onMenuAction`.
+- Added initial support for data filters. `options.filter` and `options.customFilters`.
+
+Fixed some widget resizing issues.
+No `justify` by default in inline widgets. Use `Panel.endLine(justify)` instead.
+Fixed preview image in AssetView.
+General styling fixes.
+Docs updated.
+
+## 0.5.1
 
 Widgets:
 - Added support for `text centering` all/specific columns in Table Widget.

package/demo.js

@@ -15,9 +15,10 @@ let area = LX.init( { strictViewport: false } );
     
         m.add( "Docs", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
     
-        const panel = new LX.Panel();
-        panel.addButton(null, "Search command...", () => { LX.setCommandbarState( true ) }, { width: "256px", className: "right", buttonClass: "outline left" });
-        m.root.appendChild( panel.root.childNodes[ 0 ] );
+        const commandButton = new LX.Button(null, "Search command...", () => { LX.setCommandbarState( true ) }, {
+            width: "256px", className: "right", buttonClass: "outline left fg-tertiary bg-secondary" }
+        );
+        m.root.appendChild( commandButton.root );
     
         m.addButtons( [
             {
@@ -39,17 +40,13 @@ let area = LX.init( { strictViewport: false } );
 
 // Header
 {
-    const header = LX.makeContainer( [ null, "auto" ], "col", {
-        border: "1px solid rgba(255, 255, 255, 0.08)",
-        padding: "36px 24px 36px 24px",
-        gap: "8px"
-    } );
+    const header = LX.makeContainer( [ null, "auto" ], "col border gap-2 p-8" );
     
     header.innerHTML = `
         <a>Get started with LexGUI.js</a>
         <h1>Build your application interface</h1>
-        <p style="max-width:42rem">A set of beautifully-designed, accessible components and a code distribution platform. 
-        Works with your favorite frameworks. Open Source. Open Code.</p>
+        <p style="max-width:32rem">A set of beautifully-designed, accessible widgets and components. 
+        No complex frameworks. Pure JavaScript and CSS. Open Source.</p>
     `;
     
     area.attach( header );
@@ -57,59 +54,117 @@ let area = LX.init( { strictViewport: false } );
 
 // Content
 {
-    area.attach( document.createElement('br') );
+    const tabs = area.addTabs( { sizes: [ "auto", "auto" ], contentClass: "p-6 pt-0" } );
+    tabs.root.parentElement.classList.add( "p-4" );
 
-    const tabs = area.addTabs( { sizes: [ "auto", "auto" ] } );
+    // Mail
+    {
+        const mailContainer = LX.makeContainer( [ null, "auto" ], "col bg-primary border rounded-lg p-6" );
+        tabs.add( "Mail", mailContainer, { selected: true } );
+    }
 
-    const examplesContainer = LX.makeContainer( [ "auto", "850px" ], "", {
-        backgroundColor: "red"
-    } );
+    // Tasks
+    {
+        const tasksContainer = LX.makeContainer( [ null, "auto" ], "col bg-primary border rounded-lg p-6" );
+        tabs.add( "Tasks", tasksContainer, { xselected: true } );
 
-    const tasksContainer = LX.makeContainer( [ "auto", "850px" ], "", {
-        backgroundColor: "red"
-    } );
+        const header = LX.makeContainer( [ null, "auto" ], "col rounded-lg p-6" );
+        header.innerHTML = `
+            <h2>Welcome back!</h2>
+            <p class="fg-tertiary">Here's a list of your tasks for this month!</p>
+        `;
+        tasksContainer.appendChild( header );
 
-    const codeContainer = LX.makeContainer( [ "auto", "850px" ], "", {
-        backgroundColor: "red"
-    } );
+        const tableWidget = new LX.Table(null, {
+            head: ["Name", "Status", "Priority"],
+            body: [
+                ["Alice", "In Progress", "High"],
+                ["Bob", "Backlog", "Medium"],
+                ["Prince", "Canceled", "Low"],
+                ["Sean", "Done", "High"],
+                ["Carter", "In Progress", "Medium"],
+                ["James", "Backlog", "Low"],
+                ["Mickey", "Todo", "Low"],
+                ["Charlie", "Canceled", "Low"],
+                ["Potato", "Todo", "High"]
+            ]
+        }, {
+            selectable: true,
+            sortable: true,
+            toggleColumns: true,
+            filter: "Name",
+            customFilters: [
+                { name: "Status", options: ["Backlog", "Todo", "In Progress", "Done", "Cancelled"] },
+                { name: "Priority", options: ["Low", "Medium", "High"] },
+            ],
+            rowActions: [
+                { icon: "edit", title: "Edit Row" },
+                "delete",
+                "menu"
+            ],
+            onMenuAction: (index, tableData) => {
+                return [
+                    { name: "Export" },
+                    { name: "Make a copy" },
+                    { name: "Favourite" }
+                ]
+            }
+        });
+        tasksContainer.appendChild( tableWidget.root );
+    }
 
-    const audioContainer = LX.makeContainer( [ "auto", "850px" ], "", {
-        backgroundColor: "red"
-    } );
+    // Code
+    {
+        const codeContainer = LX.makeContainer( [ "auto", "850px" ], "", {
+            backgroundColor: "red"
+        } );
+
+        tabs.add( "Code", codeContainer );
+    }
+
+    // Audio
+    {
+        const audioContainer = LX.makeContainer( [ "auto", "850px" ], "", {
+            backgroundColor: "red"
+        } );
+
+        tabs.add( "Audio", audioContainer );
+    }
+
+    // Examples
+    {
+        const examplesContainer = LX.makeContainer( [ "auto", "850px" ], "", {
+            backgroundColor: "red"
+        } );
 
-    tabs.add( "Examples", examplesContainer, { selected: true } );
-    tabs.add( "Tasks", tasksContainer );
-    tabs.add( "Code", codeContainer );
-    tabs.add( "Audio", audioContainer );
+        tabs.add( "Examples", examplesContainer );
+    }
 }
 
 // Footer
 {
     const footer = new LX.Footer( {
-        parent: area.root,
+        parent: LX.root,
         columns: [
             {
                 title: "LexGUI",
                 items: [
-                    { title: "Download", link: "" },
-                    { title: "Documentation", link: "" },
-                    { title: "Web demo", link: "" },
-                    { title: "Source code", link: "" }
+                    { title: "Documentation", link: "https://jxarco.github.io/lexgui.js/docs/" },
+                    { title: "Source code", link: "https://github.com/jxarco/lexgui.js/" }
                 ]
             },
             {
                 title: "Projects",
                 items: [
-                    { title: "Animics", link: "" },
-                    { title: "Performs", link: "" }
+                    { title: "Animics", link: "https://animics.gti.upf.edu/" },
+                    { title: "Performs", link: "https://performs.gti.upf.edu/" }
                 ]
             },
             {
-                title: "Other stuff",
+                title: "References",
                 items: [
-                    { title: "Some section", link: "" },
-                    { title: "Just filling", link: "" },
-                    { title: "No more ideas", link: "" },
+                    { title: "shadcn/ui", link: "https://ui.shadcn.com/" },
+                    { title: "Radix UI", link: "https://www.radix-ui.com/" },
                 ]
             }
         ],