lexgui 0.2.0 → 0.4.0
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/build/components/timeline.js +47 -25
- package/build/lexgui.css +938 -328
- package/build/lexgui.js +1608 -459
- package/build/lexgui.min.css +1 -1
- package/build/lexgui.min.js +1 -1
- package/build/lexgui.module.js +1608 -459
- package/build/lexgui.module.min.js +1 -1
- package/changelog.md +34 -2
- package/demo.js +2 -5
- 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,40 @@
|
|
|
1
1
|
# lexgui.js changelog
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## dev
|
|
4
4
|
|
|
5
|
-
## 0.
|
|
5
|
+
## 0.4.0 (master)
|
|
6
|
+
|
|
7
|
+
Widgets:
|
|
8
|
+
- Support new RadioGroup Widget.
|
|
9
|
+
- Support Checkbox `options.label`.
|
|
10
|
+
- Fixed Uncheck selectAll on uncheck row (TableWidget).
|
|
11
|
+
|
|
12
|
+
Removed hardcoded font-sizes. Added media queries for screeen size and ppi.
|
|
13
|
+
Start support for `LX.makeCollapsible`.
|
|
14
|
+
Started adding LX.ICONS to avoid using external libs for icons.
|
|
15
|
+
Updated Sidebar. Cooler and better customization.
|
|
16
|
+
Fixed AssetView navigation buttons.
|
|
17
|
+
Fixed few dialog dragging issues.
|
|
18
|
+
Removed debug clog.
|
|
19
|
+
Minor CSS tweaks.
|
|
20
|
+
|
|
21
|
+
## 0.3.0
|
|
22
|
+
|
|
23
|
+
Widgets:
|
|
24
|
+
- Support toggle mode and button disabled in ComboButtons Widget.
|
|
25
|
+
- Added new Range Slider Widget.
|
|
26
|
+
|
|
27
|
+
Support for toasts `LX.toast(title, description, options)`;
|
|
28
|
+
Improve Menubar menus look & feel.
|
|
29
|
+
Fixed menubar buttons vertical alignment.
|
|
30
|
+
Fixed menubar entries when adding `OverlayButtons` in the area below.
|
|
31
|
+
Restyled area tabs (row mode).
|
|
32
|
+
Dialog tweaks. Renamed `class` to `className` for Dialog options.
|
|
33
|
+
Timeline theme updated support light scheme color.
|
|
34
|
+
Minor CSS tweaks.
|
|
35
|
+
Minor bug fixes.
|
|
36
|
+
|
|
37
|
+
## 0.2.0
|
|
6
38
|
|
|
7
39
|
Widgets:
|
|
8
40
|
- Support for new Table Widget `Panel.addTable()`.
|
package/demo.js
CHANGED
|
@@ -115,11 +115,8 @@ let area = LX.init( { strictViewport: false } );
|
|
|
115
115
|
],
|
|
116
116
|
credits: `2019-${ new Date().getUTCFullYear() } Alex Rodríguez and contributors. Website source code on GitHub.`,
|
|
117
117
|
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>` }
|
|
118
|
+
{ title: "Github", link: "https://github.com/jxarco/lexgui.js/", icon: `<a class="fa-brands fa-github"></a>` },
|
|
119
|
+
{ title: "Discord", link: "https://discord.gg/vwqVrMZBXv", icon: `<a class="fa-brands fa-discord"></a>` }
|
|
123
120
|
]
|
|
124
121
|
} );
|
|
125
122
|
}
|
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
|
|