lexgui 0.2.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/build/components/nodegraph.js +84 -78
- package/build/components/timeline.js +47 -25
- package/build/lexgui.css +960 -324
- package/build/lexgui.js +1794 -562
- package/build/lexgui.min.css +1 -1
- package/build/lexgui.min.js +1 -1
- package/build/lexgui.module.js +1794 -562
- package/build/lexgui.module.min.js +1 -1
- package/changelog.md +48 -2
- package/demo.js +6 -6
- package/examples/index.html +0 -3
- package/examples/previews/side_bar.png +0 -0
- package/examples/side_bar.html +43 -11
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -1,8 +1,54 @@
|
|
|
1
1
|
# lexgui.js changelog
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## dev
|
|
4
4
|
|
|
5
|
-
## 0.
|
|
5
|
+
## 0.4.1 (master)
|
|
6
|
+
|
|
7
|
+
Widgets:
|
|
8
|
+
- Text: Skip callback if no changes.
|
|
9
|
+
|
|
10
|
+
Updated NodeGraph Editor sidebar.
|
|
11
|
+
Expose `Sidebar.update` to rebuild from current items.
|
|
12
|
+
Added `force` option to force sidebar collapse status in `Sidebar.toggleCollapsed(force)`.
|
|
13
|
+
Added Sidebar search bar to filter entries.
|
|
14
|
+
Set overflow ellipsis on large toast texts.
|
|
15
|
+
Fixed Menubar menus with scroll > 0.
|
|
16
|
+
Removed padding when no PocketDialog content.
|
|
17
|
+
Sidebar docs updated.
|
|
18
|
+
|
|
19
|
+
## 0.4.0
|
|
20
|
+
|
|
21
|
+
Widgets:
|
|
22
|
+
- Support new RadioGroup Widget.
|
|
23
|
+
- Support Checkbox `options.label`.
|
|
24
|
+
- Fixed Uncheck selectAll on uncheck row (TableWidget).
|
|
25
|
+
|
|
26
|
+
Removed hardcoded font-sizes. Added media queries for screeen size and ppi.
|
|
27
|
+
Start support for `LX.makeCollapsible`.
|
|
28
|
+
Started adding LX.ICONS to avoid using external libs for icons.
|
|
29
|
+
Updated Sidebar. Cooler and better customization.
|
|
30
|
+
Fixed AssetView navigation buttons.
|
|
31
|
+
Fixed few dialog dragging issues.
|
|
32
|
+
Removed debug clog.
|
|
33
|
+
Minor CSS tweaks.
|
|
34
|
+
|
|
35
|
+
## 0.3.0
|
|
36
|
+
|
|
37
|
+
Widgets:
|
|
38
|
+
- Support toggle mode and button disabled in ComboButtons Widget.
|
|
39
|
+
- Added new Range Slider Widget.
|
|
40
|
+
|
|
41
|
+
Support for toasts `LX.toast(title, description, options)`;
|
|
42
|
+
Improve Menubar menus look & feel.
|
|
43
|
+
Fixed menubar buttons vertical alignment.
|
|
44
|
+
Fixed menubar entries when adding `OverlayButtons` in the area below.
|
|
45
|
+
Restyled area tabs (row mode).
|
|
46
|
+
Dialog tweaks. Renamed `class` to `className` for Dialog options.
|
|
47
|
+
Timeline theme updated support light scheme color.
|
|
48
|
+
Minor CSS tweaks.
|
|
49
|
+
Minor bug fixes.
|
|
50
|
+
|
|
51
|
+
## 0.2.0
|
|
6
52
|
|
|
7
53
|
Widgets:
|
|
8
54
|
- Support for new Table Widget `Panel.addTable()`.
|
package/demo.js
CHANGED
|
@@ -13,7 +13,10 @@ let area = LX.init( { strictViewport: false } );
|
|
|
13
13
|
|
|
14
14
|
m.setButtonImage("lexgui.js", "images/icon.png", () => {window.open("https://jxarco.github.io/lexgui.js/")}, {float: "left"})
|
|
15
15
|
|
|
16
|
-
m.add( "Docs", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
|
|
16
|
+
// m.add( "Docs", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
|
|
17
|
+
m.add( "Docs/Pepe", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
|
|
18
|
+
m.add( "Docs/Luis/ac", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
|
|
19
|
+
m.add( "Docs/Luis/vrr", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
|
|
17
20
|
|
|
18
21
|
const panel = new LX.Panel();
|
|
19
22
|
panel.addButton(null, "Search command...", () => { LX.setCommandbarState( true ) }, { width: "256px", className: "right", buttonClass: "outline left" });
|
|
@@ -115,11 +118,8 @@ let area = LX.init( { strictViewport: false } );
|
|
|
115
118
|
],
|
|
116
119
|
credits: `2019-${ new Date().getUTCFullYear() } Alex Rodríguez and contributors. Website source code on GitHub.`,
|
|
117
120
|
socials: [
|
|
118
|
-
{ title: "Github", link: "", icon: `<
|
|
119
|
-
{ title: "
|
|
120
|
-
{ title: "Mastodon", link: "", icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5.0.0.0-63.7 28.5-63.7 125.7.0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5.0 01-.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6V190.1c0-49.7-64-51.6-64 6.9v62.5H201V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"></path></svg>` },
|
|
121
|
-
{ title: "Discord", link: "", icon: `<a class="fa-brands fa-discord"></a>` },
|
|
122
|
-
{ title: "Reddit", link: "", icon: `<a class="fa-brands fa-reddit"></a>` }
|
|
121
|
+
{ title: "Github", link: "https://github.com/jxarco/lexgui.js/", icon: `<a class="fa-brands fa-github"></a>` },
|
|
122
|
+
{ title: "Discord", link: "https://discord.gg/vwqVrMZBXv", icon: `<a class="fa-brands fa-discord"></a>` }
|
|
123
123
|
]
|
|
124
124
|
} );
|
|
125
125
|
}
|
package/examples/index.html
CHANGED
|
Binary file
|
package/examples/side_bar.html
CHANGED
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
<script type="module">
|
|
19
19
|
|
|
20
20
|
import { LX } from 'lexgui';
|
|
21
|
-
import 'lexgui/components/codeeditor.js';
|
|
22
21
|
|
|
23
22
|
// init library and get main area
|
|
24
23
|
let area = LX.init();
|
|
@@ -34,17 +33,44 @@
|
|
|
34
33
|
el.style.display = 'block';
|
|
35
34
|
}
|
|
36
35
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
m.
|
|
36
|
+
const logParams = (entryName, value, event) => { console.log(entryName, value, event) };
|
|
37
|
+
const actionLogParams = (entryName, event) => { console.log("Action called!", entryName, event) };
|
|
38
|
+
|
|
39
|
+
window.sidebar = area.addSidebar( m => {
|
|
40
|
+
m.group( "Projects", { icon: "fa fa-plus", callback: (groupName, event) => { console.log(groupName) }} );
|
|
41
|
+
m.add( "Getting Started", { icon: "fa fa-cube", callback: logParams } );
|
|
42
|
+
m.add( "Getting Started/Installation", { icon: "fa fa-cube", callback: logParams } );
|
|
43
|
+
m.add( "Getting Started/Project Structure", { icon: "fa fa-cube", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } } );
|
|
44
|
+
m.add( "Building Your Application", { icon: "fa fa-code", callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } } );
|
|
45
|
+
m.add( "Search Blocks", { icon: "fa fa-search", callback: logParams } );
|
|
46
|
+
m.add( "Very loooooooooooooooooooooooong sun", { icon: "fa fa-sun",callback: logParams, action: { name: "ShowMenu", callback: actionLogParams, icon: null } } );
|
|
47
|
+
m.separator();
|
|
48
|
+
m.group( "API Reference" );
|
|
49
|
+
m.add( "Components", { icon: "fa fa-cube", callback: logParams } );
|
|
50
|
+
m.add( "File Conventions", { icon: "fa fa-code", callback: logParams } );
|
|
51
|
+
m.add( "Functions", { icon: "fa fa-search",callback: logParams } );
|
|
52
|
+
m.add( "CLI", { icon: "fa fa-sun",callback: logParams } );
|
|
53
|
+
m.separator();
|
|
54
|
+
m.group( "Architecture" );
|
|
55
|
+
m.add( "Accessibility ", { icon: "fa fa-cube", callback: logParams } );
|
|
56
|
+
m.add( "Fast Refresh", { icon: "fa fa-code", callback: logParams } );
|
|
57
|
+
m.add( "Supported Browsers", { icon: "fa fa-search",callback: logParams } );
|
|
58
|
+
m.separator();
|
|
59
|
+
m.add( "Calendar ", { collapsable: 3 } );
|
|
60
|
+
m.add( "Personal ", { callback: logParams, type: "checkbox" } );
|
|
61
|
+
m.add( "Work", { callback: logParams, type: "checkbox", value: true } );
|
|
62
|
+
m.add( "Family", { callback: logParams, type: "checkbox" } );
|
|
63
|
+
}, {
|
|
64
|
+
headerTitle: "jxarco",
|
|
65
|
+
headerSubtitle: "alexroco.30@gmail.com",
|
|
66
|
+
headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/icon.png",
|
|
67
|
+
footerTitle: "jxarco",
|
|
68
|
+
footerSubtitle: "alexroco.30@gmail.com",
|
|
69
|
+
footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
|
|
70
|
+
onHeaderPressed: (e) => { console.log( "onHeaderPressed" ) },
|
|
71
|
+
onFooterPressed: (e) => { console.log( "onFooterPressed" ) }
|
|
42
72
|
});
|
|
43
73
|
|
|
44
|
-
let codeArea = new LX.Area( { width: "100%", height: "100%" } );
|
|
45
|
-
let editor = new LX.CodeEditor( codeArea );
|
|
46
|
-
editor.loadFile( "../data/js_sample.js" );
|
|
47
|
-
|
|
48
74
|
// add canvas to left upper part
|
|
49
75
|
var canvas = document.createElement('canvas');
|
|
50
76
|
canvas.id = "mycanvas";
|
|
@@ -53,8 +79,14 @@
|
|
|
53
79
|
canvas.style.width = "100%";
|
|
54
80
|
canvas.style.height = "100%";
|
|
55
81
|
|
|
82
|
+
area = sidebar.siblingArea;
|
|
83
|
+
|
|
84
|
+
area.onresize = ( bounding ) => {
|
|
85
|
+
canvas.width = bounding.width;
|
|
86
|
+
canvas.height = bounding.height;
|
|
87
|
+
};;
|
|
88
|
+
|
|
56
89
|
area.attach( canvas );
|
|
57
|
-
area.attach( codeArea );
|
|
58
90
|
|
|
59
91
|
function loop(dt) {
|
|
60
92
|
|