lexgui 0.5.4 → 0.5.5

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) }

package/changelog.md

@@ -2,7 +2,27 @@
 
 ## dev
 
-## 0.5.4 (master)
+## 0.5.5 (master)
+
+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" });
@@ -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/package.json

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