lexgui 8.0.0 → 8.1.1

package/changelog.md

@@ -2,9 +2,30 @@
 
 ## dev
 
-## 8.0.0 (master)
+## 8.1.1 (master)
+
+Fixed Table Component bug when there's a filter but no custom filters.
+Fixed AssetView `onEnterFolder` not allowing async callbacks.
+
+## 8.1.0
+
+AssetView:
+- Added CreateFolder implementation to the MoveItem dialog button.
+- Added more event attributes, added also to docs.
+- `enterFolder` event can now modify data.
+- Passing user parameters through `resolve` call is now allowed.
+
+New Component: Alert Dialog.
+Use `dprint` to auto-format code.
+Style improvements for Sheet, Number slider, Counter, and Range Components.
+Improved Icons page using Pagination Component & moved to main page Menubar.
+Added Counter Component docs.
+Minor mobile version fixes.
+
+## 8.0.0
 
 From 8.0 (changed versioning to set `8` as the major version), the full library is written in TypeScript to facilitate integrations in newer frameworks (Builds are still available as a JS module with its extensions).
+Replaced Skypack for jsDelivr CDN.
 Aded new Spinner and Pagination Components.
 Added support for `options.submit` in Form entries.
 Added new utils: `LX.stripTags`, `LX.escapeRegExp`, and `LX.wildcardToRegExp`.

package/demo.js

@@ -9,9 +9,10 @@ const mobile = navigator && /Android|iPhone/i.test( navigator.userAgent );
 const localHost = window.location.protocol !== "https:";
 const menubarButtons = [
     { name: "Docs", callback: () => { window.open("./docs/") } },
-    { name: "Components", callback: () => { window.open("./docs/?p=components") } },
     { name: "Examples", callback: () => { window.open("./examples/") } },
-    { name: "Colors", callback: () => { window.location.href = window.location.origin + ( localHost ? "/" : window.location.pathname ) + "colors/"; } }
+    { name: "Components", callback: () => { window.open("./docs/?p=components") } },
+    { name: "Colors", callback: () => { window.open("./colors/", "_self") } },
+    { name: "Icons", callback: () => { window.open("./icons/", "_self") } },
 ];
 let menubar = null, sheetArea = null;
 
@@ -32,7 +33,7 @@ if( mobile )
     }, {
         headerTitle: `lexgui.js`,
         headerSubtitle: `v${ LX.version }`,
-        headerImage: "../images/favicon.png",
+        headerImage: "./images/favicon.png",
         footerTitle: "jxarco",
             footerSubtitle: "alexroco.30@gmail.com",
             footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
@@ -92,8 +93,8 @@ if( mobile )
     const header = LX.makeContainer( [ null, "auto" ], "flex flex-col gap-4 pt-8 pb-4 items-center", `
         <a href="docs?p=changelog" class="flex flex-row gap-1 items-center text-sm p-1 px-4 rounded-full fg-primary decoration-none hover:bg-secondary cursor-pointer"><span class="flex bg-accent w-2 h-2 rounded-full"></span>
             New Components: Spinner, Pagination and more${ LX.makeIcon( "ArrowRight", { svgClass: "sm" } ).innerHTML }</a>
-        <p class="fg-primary font-medium tracking-tight leading-none text-center text-balance" style="font-size:2.75rem">Build your Application Interface</p>
-        <p class="fg-primary font-light text-xl text-center text-balance" style="max-width:48rem">A modern UI kit, inspired by shadcn, built for the web. Pure JavaScript, CSS, zero dependencies. Fully Open Source.</p>
+        <p class="fg-primary font-medium tracking-tight leading-none text-center text-balance text-5xl xs:text-4xl">Build your Application Interface</p>
+        <p class="fg-primary font-light text-xl xs:text-lg text-center text-balance leading-normal max-w-3xl">A modern-style UI kit, inspired by shadcn, built for the web. Pure JavaScript, CSS, zero dependencies. Fully Open Source.</p>
     `, area );
 
     const headerButtons = LX.makeContainer( [ "auto", "auto" ], "flex flex-row mt-2", ``, header );

package/examples/all-components.html

@@ -263,6 +263,9 @@
             panelB.addNumber("With Units", 12, null, { units: "px" });
             panelB.addNumber("With Slider", 0, null, { min: 1, max: 48, step: 1 });
             panelB.addNumber("Disabled Slider", 0, null, { min: 1, max: 48, step: 1, disabled: true });
+            panelB.branch("Counter Inputs", { closed: closedDefault });
+            panelB.addCounter("Classic", 0, null, { min: 1, max: 48, step: 1 });
+            panelB.addCounter("Disabled", 0, null, { min: 1, max: 48, step: 1, disabled: true });
             panelB.branch("Vector Inputs", { closed: closedDefault });
             panelB.addVector2("Classic Vec2", [0, 0], null);
             panelB.addVector3("Disabled Vec3", [0, 0, 0], null, { disabled: true });

package/examples/asset-view.html

@@ -201,6 +201,19 @@
         }
     ];
 
+    const fakeServerRequest = function( payload, delay = 800 ) {
+        return new Promise(resolve => {
+            setTimeout(() => {
+                // 70% chance to allow the action
+                const ok = Math.random() > 0.3;
+                resolve({
+                    ok,
+                    reason: ok ? undefined : "Server rejected the operation"
+                });
+            }, delay);
+        });
+    }
+
     // Click events
     {
         assetView.on( "select", ( event, resolve ) => {
@@ -214,9 +227,42 @@
 
     // Folder events
     {
-        assetView.on( "enterFolder", ( event ) => {
+        assetView.on( "enterFolder", async ( event ) => {
             console.log(`Entered ${ event.to.id } folder` );
-        } );
+
+            // const r = await (() => { return new Promise(resolve => {
+            //     setTimeout(() => {
+            //         resolve({
+            //             ok: true
+            //         });
+            //     }, 2000);
+            // }) })();
+
+            // if( r?.ok )
+            // {
+            //     event.to.children = [
+            //         {
+            //             id: "brow_lowerer.png",
+            //             type: "clip",
+            //             src: "../data/brow_lowerer.png",
+            //             metadata: {
+            //                 lastModified: 1740181312813
+            //             }
+            //         },
+            //         {
+            //             id: "brow_lowerer.png",
+            //             type: "clip",
+            //             src: "../data/brow_lowerer.png",
+            //             metadata: {
+            //                 lastModified: 1740181312813
+            //             }
+            //         }
+            //     ]
+            // }
+
+            // return true;
+
+        });
 
         assetView.on( "beforeCreateFolder", ( event, resolve ) => {
             LX.prompt("Perform CreateFolder Action?", "Server Message", () => {
@@ -258,13 +304,13 @@
     // Clone events
     {
         assetView.on( "beforeClone", ( event, resolve ) => {
-            LX.prompt("Perform Clone Action?", "Server Message", () => {
-                resolve();
+            LX.prompt("Perform Clone Action?", "Server Message", (value) => {
+                resolve( value );
             })
         } );
 
-        assetView.on( "clone", ( event ) => {
-            console.log(event.items[ 0 ].id + " cloned");
+        assetView.on( "clone", ( event, arg1, arg2 ) => {
+            console.log(event.items[ 0 ].id + " cloned",  arg1, arg2);
         } );
     }
 

package/examples/dialogs.html

@@ -47,7 +47,6 @@
     }, { float: 'lt' });
 
     const dialogClosable = new LX.Dialog("Closable Dialog", p => {
-        p.branch("Canvas");
         p.addColor("Background", "#b7a9b1");
         p.addText("Text", "Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "Type" });
         p.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
@@ -62,8 +61,7 @@
         p.addSelect("Best Tool", ["@Engines", "Godot", "Unity", "Unreal Engine", "@Apps", "Visual Studio", "Visual Studio Code"], "Unity", (value, event) => {
             console.log(value);
         }, {filter: true, emptyMsg: "No engines found.", placeholder: "Search engines..."});
-        p.merge();
-    }, { size: ["350px", null], closable: true });
+    }, { size: ["350px", null], position: ["100px", "500px"], closable: true });
 
     const draggablePocketDialog = new LX.PocketDialog("Draggable PocketDialog", p => {
         p.branch("Canvas");
@@ -84,6 +82,8 @@
         p.merge();
     }, { size: ["350px", null], draggable: true });
 
+    const alertDialog = new LX.AlertDialog( "Are you absolutely sure?", "This action cannot be undone. This will permanently delete your account and remove your data from our servers." );
+
     // add canvas to left upper part
     let canvas = document.createElement('canvas');
     canvas.id = "mycanvas";

package/examples/editor.html

@@ -707,7 +707,7 @@
 
         panel.branch("Preferences", { icon: "Settings" });
         panel.addButton(null, "Show Notifications" + LX.badge("+99", "accent sm"));
-        panel.addCounter("Calories Counter ", 350, (v) => { console.log(v + " calories!") }, { label: "CALORIES/DAY", max: 500 });
+        panel.addCounter("Calories Counter / day ", 350, (v) => { console.log(v + " calories!") }, { max: 500 });
         panel.addButton("Colored Tiny Button", "Click here!", () => { }, { buttonClass: "primary xs" });
         panel.addButton("Small Outlined Button", "Click here!", () => { }, { buttonClass: "accent sm outline" });
         panel.addButton("A Classic Button", "Click here!", () => { }, { buttonClass: "md" });

package/examples/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Examples - LexGUI.js </title>
+    <title>Examples - LexGUI</title>
     <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/favicon.png">
     <style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "8.0.0",
+    "version": "8.1.1",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",
@@ -39,6 +39,8 @@
         "url": "https://github.com/jxarco/lexgui.js/issues"
     },
     "scripts": {
+        "format": "dprint fmt",
+        "format:check": "dprint check",
         "colors": "node generate-colors.js",
         "clean:css": "rimraf build/lexgui.css && rimraf build/lexgui.min.css",
         "clean": "rimraf build",
@@ -51,6 +53,7 @@
         "@rollup/plugin-alias": "^6.0.0",
         "@rollup/plugin-terser": "^0.4.4",
         "cssnano": "^7.1.2",
+        "dprint": "^0.50.2",
         "postcss": "^8.5.6",
         "rimraf": "^5.0.10",
         "rollup": "^4.53.2",