lexgui 8.1.2 → 8.2.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.
Files changed (65) hide show
  1. package/build/components/AlertDialog.d.ts +7 -7
  2. package/build/components/Avatar.d.ts +15 -0
  3. package/build/components/Counter.d.ts +9 -9
  4. package/build/components/Dialog.d.ts +20 -20
  5. package/build/components/Footer.d.ts +14 -14
  6. package/build/components/Menubar.d.ts +59 -59
  7. package/build/components/NodeTree.d.ts +26 -1
  8. package/build/components/Vector.d.ts +1 -0
  9. package/build/core/Area.d.ts +143 -143
  10. package/build/core/Event.d.ts +0 -20
  11. package/build/core/Namespace.js +1 -1
  12. package/build/core/Namespace.js.map +1 -1
  13. package/build/core/Panel.d.ts +538 -538
  14. package/build/extensions/AssetView.d.ts +137 -136
  15. package/build/extensions/AssetView.js +193 -155
  16. package/build/extensions/AssetView.js.map +1 -1
  17. package/build/extensions/Audio.js +163 -163
  18. package/build/extensions/Audio.js.map +1 -1
  19. package/build/extensions/CodeEditor.d.ts +358 -350
  20. package/build/extensions/CodeEditor.js +302 -270
  21. package/build/extensions/CodeEditor.js.map +1 -1
  22. package/build/extensions/DocMaker.d.ts +27 -27
  23. package/build/extensions/DocMaker.js +15 -11
  24. package/build/extensions/DocMaker.js.map +1 -1
  25. package/build/extensions/GraphEditor.js +2754 -2760
  26. package/build/extensions/GraphEditor.js.map +1 -1
  27. package/build/extensions/ImUi.js +227 -227
  28. package/build/extensions/Timeline.d.ts +668 -670
  29. package/build/extensions/Timeline.js +71 -79
  30. package/build/extensions/Timeline.js.map +1 -1
  31. package/build/extensions/VideoEditor.d.ts +38 -16
  32. package/build/extensions/VideoEditor.js +294 -180
  33. package/build/extensions/VideoEditor.js.map +1 -1
  34. package/build/extensions/index.d.ts +8 -8
  35. package/build/extensions/index.js +10 -10
  36. package/build/index.all.d.ts +2 -2
  37. package/build/index.css.d.ts +3 -4
  38. package/build/index.d.ts +57 -56
  39. package/build/lexgui.all.js +1877 -1520
  40. package/build/lexgui.all.js.map +1 -1
  41. package/build/lexgui.all.min.js +1 -1
  42. package/build/lexgui.all.module.js +1875 -1516
  43. package/build/lexgui.all.module.js.map +1 -1
  44. package/build/lexgui.all.module.min.js +1 -1
  45. package/build/lexgui.css +6123 -5556
  46. package/build/lexgui.js +997 -814
  47. package/build/lexgui.js.map +1 -1
  48. package/build/lexgui.min.css +2 -3
  49. package/build/lexgui.min.js +1 -1
  50. package/build/lexgui.module.js +995 -810
  51. package/build/lexgui.module.js.map +1 -1
  52. package/build/lexgui.module.min.js +1 -1
  53. package/changelog.md +65 -2
  54. package/demo.js +167 -65
  55. package/examples/all-components.html +40 -55
  56. package/examples/asset-view.html +27 -0
  57. package/examples/code-editor.html +12 -1
  58. package/examples/dialogs.html +13 -2
  59. package/examples/editor.html +9 -49
  60. package/examples/index.html +2 -2
  61. package/examples/side-bar.html +1 -1
  62. package/examples/timeline.html +2 -2
  63. package/examples/video-editor.html +1 -1
  64. package/examples/video-editor2.html +2 -2
  65. package/package.json +7 -4
package/examples/all-components.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <head>
6
6
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
7
7
  <title>LexGUI demo</title>
8
- <link rel="stylesheet" href="../build/lexgui.css">
8
+ <link rel="stylesheet" href="../css/output.css">
9
9
  <link rel="icon" href="../images/favicon.png">
10
10
 
11
11
  <script type="importmap">
@@ -32,7 +32,7 @@
32
32
  let area = await LX.init();
33
33
 
34
34
  const mobile = navigator && /Android|iPhone/i.test( navigator.userAgent );
35
- const starterTheme = LX.getTheme();
35
+ const starterTheme = LX.getMode();
36
36
  const menubar = area.addMenubar( [], { sticky: false } );
37
37
  menubar.addButtons([
38
38
  {
@@ -42,9 +42,9 @@
42
42
  },
43
43
  {
44
44
  title: "Change Theme",
45
- icon: "Moon",
46
- swap: "Sun",
47
- callback: (swapValue) => { LX.setTheme(swapValue ? "light" : "dark") }
45
+ icon: starterTheme == "dark" ? "Moon" : "Sun",
46
+ swap: starterTheme == "dark" ? "Sun" : "Moon",
47
+ callback: () => LX.switchMode()
48
48
  },
49
49
  {
50
50
  title: "Switch Spacing",
@@ -129,30 +129,28 @@
129
129
  }
130
130
 
131
131
  buttonsLeftPanel.branch("Classic Buttons", { closed: closedDefault });
132
- buttonsLeftPanel.addButton(null, "Classic", null);
133
132
  buttonsLeftPanel.addButton(null, "Primary", null, { buttonClass: "primary" });
134
133
  buttonsLeftPanel.addButton(null, "Secondary", null, { buttonClass: "secondary" });
135
- buttonsLeftPanel.addButton(null, "Accent", null, { buttonClass: "accent" });
136
- buttonsLeftPanel.addButton(null, "Contrast", null, { buttonClass: "contrast" });
134
+ buttonsLeftPanel.addButton(null, "Ghost", null, { buttonClass: "ghost" });
135
+ buttonsLeftPanel.addButton(null, "Link", null, { buttonClass: "link" });
136
+ buttonsLeftPanel.addButton(null, "Muted", null, { buttonClass: "muted" });
137
137
  buttonsLeftPanel.addButton(null, "Success", null, { buttonClass: "success" });
138
- buttonsLeftPanel.addButton(null, "Error", null, { buttonClass: "error" });
139
138
  buttonsLeftPanel.addButton(null, "Warning", null, { buttonClass: "warning" });
139
+ buttonsLeftPanel.addButton(null, "Destructive", null, { buttonClass: "destructive" });
140
140
  buttonsLeftPanel.branch("Disabled Buttons", { closed: closedDefault });
141
- buttonsLeftPanel.addButton(null, "Classic", null, { disabled: true });
142
141
  buttonsLeftPanel.addButton(null, "Primary", null, { disabled: true, buttonClass: "primary" });
143
142
  buttonsLeftPanel.addButton(null, "Secondary", null, { disabled: true, buttonClass: "secondary" });
144
- buttonsLeftPanel.addButton(null, "Accent", null, { disabled: true, buttonClass: "accent" });
145
- buttonsLeftPanel.addButton(null, "Contrast", null, { disabled: true, buttonClass: "contrast" });
143
+ buttonsLeftPanel.addButton(null, "Muted", null, { disabled: true, buttonClass: "muted" });
146
144
  buttonsLeftPanel.addButton(null, "Success", null, { disabled: true, buttonClass: "success" });
147
- buttonsLeftPanel.addButton(null, "Error", null, { disabled: true, buttonClass: "error" });
148
145
  buttonsLeftPanel.addButton(null, "Warning", null, { disabled: true, buttonClass: "warning" });
146
+ buttonsLeftPanel.addButton(null, "Destructive", null, { disabled: true, buttonClass: "destructive" });
149
147
  buttonsLeftPanel.branch("Advanced Buttons", { closed: closedDefault });
150
148
  buttonsLeftPanel.addButton("Icon Button", "Not used", null, { icon: "Skull" });
151
149
  buttonsLeftPanel.sameLine();
152
150
  buttonsLeftPanel.addLabel("Customized Inline Buttons");
153
- buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Skull", buttonClass: "bg-none" });
154
- buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Box", buttonClass: "bg-primary" });
155
- buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Grid3x3", buttonClass: "bg-tertiary fg-tertiary" });
151
+ buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Skull", buttonClass: "ghost" });
152
+ buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Box", buttonClass: "primary" });
153
+ buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Grid3x3", buttonClass: "muted" });
156
154
  buttonsLeftPanel.endLine("justify-start");
157
155
  buttonsLeftPanel.sameLine();
158
156
  buttonsLeftPanel.addLabel("Swap Buttons");
@@ -160,25 +158,20 @@
160
158
  buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Eye", swap: "EyeOff" });
161
159
  buttonsLeftPanel.endLine("justify-start");
162
160
  buttonsLeftPanel.addButton(null, LX.makeIcon("CirclePlus").innerHTML + "Button with Inlined Icon", null);
163
- buttonsLeftPanel.addButton(null, "With a Badge" + LX.badge("+99", "accent sm"));
161
+ buttonsLeftPanel.addButton(null, "With a Badge" + LX.badge("+99", "primary xs"));
164
162
  buttonsRightPanel.branch("Outline Buttons", { closed: closedDefault });
165
- buttonsRightPanel.addButton(null, "Classic Outline", null, { buttonClass: "outline" });
166
- buttonsRightPanel.addButton(null, "Primary Outline", null, { buttonClass: "primary outline" });
167
163
  buttonsRightPanel.addButton(null, "Secondary Outline", null, { buttonClass: "secondary outline" });
168
- buttonsRightPanel.addButton(null, "Accent Outline", null, { buttonClass: "accent outline" });
169
- buttonsRightPanel.addButton(null, "Contrast Outline", null, { buttonClass: "contrast outline" });
164
+ buttonsRightPanel.addButton(null, "Link Outline", null, { buttonClass: "link outline" });
165
+ buttonsRightPanel.addButton(null, "Muted Outline", null, { buttonClass: "muted outline" });
170
166
  buttonsRightPanel.addButton(null, "Success Outline", null, { buttonClass: "success outline" });
171
- buttonsRightPanel.addButton(null, "Error Outline", null, { buttonClass: "error outline" });
172
167
  buttonsRightPanel.addButton(null, "Warning Outline", null, { buttonClass: "warning outline" });
168
+ buttonsRightPanel.addButton(null, "Destructive Outline", null, { buttonClass: "destructive outline" });
173
169
  buttonsRightPanel.branch("Dashed Buttons", { closed: closedDefault });
174
- buttonsRightPanel.addButton(null, "Classic Dashed", null, { buttonClass: "dashed" });
175
- buttonsRightPanel.addButton(null, "Primary Dashed", null, { buttonClass: "primary dashed" });
176
170
  buttonsRightPanel.addButton(null, "Secondary Dashed", null, { buttonClass: "secondary dashed" });
177
- buttonsRightPanel.addButton(null, "Accent Dashed", null, { buttonClass: "accent dashed" });
178
- buttonsRightPanel.addButton(null, "Contrast Dashed", null, { buttonClass: "contrast dashed" });
171
+ buttonsRightPanel.addButton(null, "Muted Dashed", null, { buttonClass: "muted dashed" });
179
172
  buttonsRightPanel.addButton(null, "Success Dashed", null, { buttonClass: "success dashed" });
180
- buttonsRightPanel.addButton(null, "Error Dashed", null, { buttonClass: "error dashed" });
181
173
  buttonsRightPanel.addButton(null, "Warning Dashed", null, { buttonClass: "warning dashed" });
174
+ buttonsRightPanel.addButton(null, "Destructive Dashed", null, { buttonClass: "destructive dashed" });
182
175
  buttonsRightPanel.branch("Combo Buttons", { closed: closedDefault });
183
176
  buttonsRightPanel.addComboButtons("Classic Combo", comboValues);
184
177
  buttonsRightPanel.addComboButtons("Toggle Combo", comboValues, { toggle: true });
@@ -206,43 +199,39 @@
206
199
  // Test Checkboxes
207
200
  {
208
201
  checkLeftPanel.branch("Checkboxes", { closed: closedDefault });
209
- checkLeftPanel.addCheckbox(null, true, null, { className: "x", label: "Classic" });
210
202
  checkLeftPanel.addCheckbox(null, true, null, { className: "primary", label: "Primary" });
211
203
  checkLeftPanel.addCheckbox(null, true, null, { className: "secondary", label: "Secondary" });
212
- checkLeftPanel.addCheckbox(null, true, null, { className: "accent", label: "Accent" });
213
- checkLeftPanel.addCheckbox(null, true, null, { className: "contrast", label: "Contrast" });
214
204
  checkLeftPanel.addCheckbox(null, true, null, { className: "success", label: "Success" });
215
- checkLeftPanel.addCheckbox(null, true, null, { className: "error", label: "Error" });
216
205
  checkLeftPanel.addCheckbox(null, true, null, { className: "warning", label: "Warning" });
206
+ checkLeftPanel.addCheckbox(null, true, null, { className: "destructive", label: "Destructive" });
217
207
  }
218
208
 
219
209
  // Radiogroup
220
210
  {
221
211
  checkLeftPanel.branch("Radio Group", { closed: closedDefault });
222
- checkLeftPanel.addRadioGroup(null, "Notify me about...", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "accent", xdisabled: true, selected: 1 });
212
+ checkLeftPanel.addRadioGroup(null, "Primary Radio", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "primary", selected: 1 });
213
+ checkLeftPanel.addRadioGroup(null, "Secondary Radio", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "secondary", selected: 1 });
214
+ checkLeftPanel.addRadioGroup(null, "Success Radio", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "success", selected: 1 });
215
+ checkLeftPanel.addRadioGroup(null, "Warning Radio", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "warning", selected: 1 });
216
+ checkLeftPanel.addRadioGroup(null, "Destructive Radio", ["All new messages", "Direct messages and mentions", "Nothing"], null, { className: "destructive", selected: 1 });
223
217
  checkLeftPanel.addRadioGroup(null, "Disabled Options...", ["All new messages", "Direct messages and mentions", "Nothing"], null, { disabled: true, selected: 1 });
224
218
  }
225
219
 
226
220
  // Test Toggles
227
221
  {
228
222
  checkRightPanel.branch("Classic Toggles", { closed: closedDefault });
229
- checkRightPanel.addToggle(null, true, null, { label: "Classic" });
230
223
  checkRightPanel.addToggle(null, true, null, { className: "primary", label: "Primary" });
231
224
  checkRightPanel.addToggle(null, true, null, { className: "secondary", label: "Secondary" });
232
- checkRightPanel.addToggle(null, true, null, { className: "accent", label: "Accent" });
233
- checkRightPanel.addToggle(null, true, null, { className: "contrast", label: "Contrast" });
234
225
  checkRightPanel.addToggle(null, true, null, { className: "success", label: "Success" });
235
- checkRightPanel.addToggle(null, true, null, { className: "error", label: "Error" });
236
226
  checkRightPanel.addToggle(null, true, null, { className: "warning", label: "Warning" });
227
+ checkRightPanel.addToggle(null, true, null, { className: "destructive", label: "Destructive" });
228
+ checkRightPanel.addToggle(null, true, null, { className: "", label: "Disabled", disabled: true });
237
229
  checkRightPanel.branch("Outline Toggles", { closed: closedDefault });
238
- checkRightPanel.addToggle(null, true, null, { label: "Classic" });
239
230
  checkRightPanel.addToggle(null, true, null, { className: "primary outline", label: "Primary" });
240
231
  checkRightPanel.addToggle(null, true, null, { className: "secondary outline", label: "Secondary" });
241
- checkRightPanel.addToggle(null, true, null, { className: "accent outline", label: "Accent" });
242
- checkRightPanel.addToggle(null, true, null, { className: "contrast outline", label: "Contrast" });
243
232
  checkRightPanel.addToggle(null, true, null, { className: "success outline", label: "Success" });
244
- checkRightPanel.addToggle(null, true, null, { className: "error outline", label: "Error" });
245
233
  checkRightPanel.addToggle(null, true, null, { className: "warning outline", label: "Warning" });
234
+ checkRightPanel.addToggle(null, true, null, { className: "destructive outline", label: "Destructive" });
246
235
  }
247
236
 
248
237
  // Test Inputs
@@ -283,14 +272,11 @@
283
272
  panelB.addColor("Color With Alpha", "#47c1b7ff");
284
273
  panelB.addColor("Disabled Color", "#b7a9b1", null, { disabled: true });
285
274
  panelB.branch("Range Inputs", { closed: closedDefault });
286
- panelB.addRange("Classic", 1, null, { min: 0, max: 10, step: 1 });
287
275
  panelB.addRange("Primary", 7, null, { min: 0, max: 10, step: 1, className: "primary" });
288
276
  panelB.addRange("Secondary", 4, null, { min: 0, max: 10, step: 1, className: "secondary" });
289
- panelB.addRange("Accent", 3, null, { min: 0, max: 10, step: 1, className: "accent" });
290
- panelB.addRange("Contrast", 5, null, { min: 0, max: 10, step: 1, className: "contrast" });
291
277
  panelB.addRange("Success", 9, null, { min: 0, max: 10, step: 1, className: "success" });
292
- panelB.addRange("Error", 6, null, { min: 0, max: 10, step: 1, className: "error" });
293
278
  panelB.addRange("Warning", 2, null, { min: 0, max: 10, step: 1, className: "warning" });
279
+ panelB.addRange("Destructive", 6, null, { min: 0, max: 10, step: 1, className: "destructive" });
294
280
  panelB.addRange("Inverted", 22, null, { min: 20, max: 48, step: 1, left: true });
295
281
  panelB.addRange("NoFill", 10, null, { min: 1, max: 48, step: 1, fill: false });
296
282
  panelB.addRange("With Range", [2, 6], null, { min: 1, max: 10, step: 1 });
@@ -298,7 +284,7 @@
298
284
  panelB.branch("Select Inputs", { closed: closedDefault });
299
285
  panelB.addSelect("Classic", selectValues, "Unity", null);
300
286
  panelB.addSelect("With Suboptions", selectValues, "Unity", null, { on_Unity: (p) => {
301
- p.addButton("Unity Button", "Click me!", null, { buttonClass: "contrast" });
287
+ p.addButton("Unity Button", "Click me!", null, { buttonClass: "primary" });
302
288
  } });
303
289
  panelB.addSelect("With Labels", selectValuesWithLabels, "Unity", null);
304
290
  panelB.addSelect("With Filter", selectValuesWithLabels, "Godot", null, { filter: true, placeholder: "Search tools..." });
@@ -389,16 +375,7 @@
389
375
 
390
376
  panelC.addTree(null, sceneData, {
391
377
  icons: treeIcons,
392
- addDefault: true,
393
- onevent: (event) => {
394
- switch (event.type) {
395
- case LX.TreeEvent.NODE_CONTEXTMENU:
396
- const m = event.panel;
397
- m.add("Components/Transform");
398
- m.add("Components/MeshRenderer");
399
- break;
400
- }
401
- }
378
+ addDefault: true
402
379
  });
403
380
  }
404
381
 
@@ -410,6 +387,14 @@
410
387
  panelC.addList("String List with Icons", [['GPTeam', 'Gpu'], ['Blat Bunny', 'Bone'], ['Blat Panthers', 'PawPrint']], 'Blat Panthers');
411
388
  }
412
389
 
390
+ // List
391
+ {
392
+ panelC.branch("Array", { closed: closedDefault });
393
+ panelC.addArray("Array", ['GPTeam', 'Blat Panthers', 'Blat Bunny'], (value, event) => {
394
+ console.log(value);
395
+ });
396
+ }
397
+
413
398
  // Table
414
399
  {
415
400
  panelC.branch("Tables", { closed: closedDefault });
package/examples/asset-view.html CHANGED
@@ -122,6 +122,9 @@
122
122
  {
123
123
  id: "godot",
124
124
  type: "folder",
125
+ metadata: {
126
+ draggable: false
127
+ },
125
128
  children: [
126
129
  {
127
130
  id: "color.png",
@@ -327,6 +330,30 @@
327
330
  } );
328
331
  }
329
332
 
333
+ // Content events
334
+ {
335
+ assetView.on( "beforeRefreshContent", ( event, resolve ) => {
336
+ resolve();
337
+ } );
338
+
339
+ assetView.on( "refreshContent", ( event ) => {
340
+ console.log(`Content updated (${ event.items.length } items) [${ event.search.join( "," ) }]` );
341
+ } );
342
+ }
343
+
344
+ // Explorer dragging events
345
+ {
346
+ assetView.on( "beforeNodeDragged", ( event, resolve ) => {
347
+ LX.prompt(`"${ event.items[ 0 ].id }" will be dragged to "${ event.to.id }". Continue?`, "Server Message", () => {
348
+ resolve();
349
+ })
350
+ } );
351
+
352
+ assetView.on( "nodeDragged", ( event ) => {
353
+ console.log(`${ event.items[ 0 ].id } dragged to ${ event.to.id }` );
354
+ } );
355
+ }
356
+
330
357
  assetView.load( assetData );
331
358
 
332
359
  function loop( dt )
package/examples/code-editor.html CHANGED
@@ -20,7 +20,7 @@
20
20
  <script type="module">
21
21
 
22
22
  import { LX } from 'lexgui';
23
- import { CodeEditor } from 'lexgui/extensions/codeeditor.js';
23
+ import { CodeEditor } from 'lexgui/extensions/CodeEditor.js';
24
24
 
25
25
  CodeEditor.debugScopes = false;
26
26
  CodeEditor.debugSymbols = false;
@@ -29,6 +29,17 @@
29
29
  // init library and get main area
30
30
  let area = await LX.init();
31
31
 
32
+ const starterTheme = LX.getMode();
33
+ const menubar = area.addMenubar( [], { sticky: false } );
34
+ menubar.addButtons([
35
+ {
36
+ title: "Change Theme",
37
+ icon: starterTheme == "dark" ? "Moon" : "Sun",
38
+ swap: starterTheme == "dark" ? "Sun" : "Moon",
39
+ callback: () => LX.switchMode()
40
+ }
41
+ ]);
42
+
32
43
  const fileExplorer = true;
33
44
 
34
45
  if( !fileExplorer )
package/examples/dialogs.html CHANGED
@@ -22,7 +22,18 @@
22
22
  import { LX } from 'lexgui';
23
23
 
24
24
  // Init library and get main area
25
- let area = await LX.init({ skipDefaultArea: true });
25
+ let area = await LX.init();
26
+
27
+ const starterTheme = LX.getMode();
28
+ const menubar = area.addMenubar( [], { sticky: false } );
29
+ menubar.addButtons([
30
+ {
31
+ title: "Change Theme",
32
+ icon: starterTheme == "dark" ? "Moon" : "Sun",
33
+ swap: starterTheme == "dark" ? "Sun" : "Moon",
34
+ callback: () => LX.switchMode()
35
+ }
36
+ ]);
26
37
 
27
38
  LX.popup("Hello! I'm a popup dialog :)", null, { position: ["45%", "20%"] })
28
39
 
@@ -91,7 +102,7 @@
91
102
  canvas.height = window.innerHeight
92
103
  canvas.style.width = "100%";
93
104
  canvas.style.height = "100%";
94
- document.body.appendChild(canvas);
105
+ area.attach( canvas );
95
106
 
96
107
  function loop(dt) {
97
108
 
package/examples/editor.html CHANGED
@@ -26,9 +26,9 @@
26
26
  <script type="module">
27
27
 
28
28
  import { LX } from 'lexgui';
29
- import 'lexgui/extensions/codeeditor.js';
30
- import 'lexgui/extensions/timeline.js';
31
- import 'lexgui/extensions/audio.js';
29
+ import 'lexgui/extensions/CodeEditor.js';
30
+ import 'lexgui/extensions/Timeline.js';
31
+ import 'lexgui/extensions/Audio.js';
32
32
 
33
33
  window.LX = LX;
34
34
 
@@ -43,11 +43,6 @@
43
43
  // LX.message("Im in another position", null, { position: [10, 10] });
44
44
  // LX.message("Welcome to Lexgui", "Welcome!");
45
45
 
46
- // Change some theme colors...
47
- // LX.setThemeColor('global-color-primary', "#211");
48
- // LX.setThemeColor('global-selected', "#a74");
49
- // LX.setThemeColor('global-text', "#f21");
50
-
51
46
  LX.toast("Scheduled: Catch up", "Friday, February 10, 2023 at 5:57 PM", {
52
47
  action: {
53
48
  name: "Undo", callback: (toast, actionName, event) => {
@@ -205,7 +200,7 @@
205
200
 
206
201
  ], { sticky: false });
207
202
 
208
- const starterTheme = LX.getTheme();
203
+ const starterTheme = LX.getMode();
209
204
 
210
205
  menubar.addButtons([
211
206
  {
@@ -234,7 +229,7 @@
234
229
  title: "Switch Theme",
235
230
  icon: starterTheme == "dark" ? "Moon" : "Sun",
236
231
  swap: starterTheme == "dark" ? "Sun" : "Moon",
237
- callback: (value, event) => { LX.switchTheme() }
232
+ callback: (value, event) => { LX.switchMode() }
238
233
  },
239
234
  {
240
235
  title: "Switch Spacing",
@@ -465,7 +460,7 @@
465
460
  filter: true,
466
461
  footerTitle: "jxarco",
467
462
  footerSubtitle: "alexroco.30@gmail.com",
468
- footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
463
+ footerImage: "https://avatars.githubusercontent.com/u/25059187?v=4",
469
464
  });
470
465
 
471
466
  new LX.Sheet("256px", [area]);
@@ -584,42 +579,7 @@
584
579
  window.tree = panel.addTree("Scene Tree", sceneData, {
585
580
  icons: treeIcons,
586
581
  // filter: false,
587
- addDefault: true,
588
- onevent: (event) => {
589
- console.log(event.string());
590
-
591
- switch (event.type) {
592
- case LX.TreeEvent.NODE_SELECTED:
593
- if (event.multiple)
594
- console.log("Selected: ", event.value);
595
- else
596
- console.log(event.node.id + " selected");
597
- break;
598
- case LX.TreeEvent.NODE_DELETED:
599
- if (event.multiple)
600
- console.log("Deleted: ", event.value);
601
- else
602
- console.log(event.node.id + " deleted");
603
- break;
604
- case LX.TreeEvent.NODE_DBLCLICKED:
605
- console.log(event.node.id + " dbl clicked");
606
- break;
607
- case LX.TreeEvent.NODE_CONTEXTMENU:
608
- const m = event.panel;
609
- m.add("Components/Transform");
610
- m.add("Components/MeshRenderer");
611
- break;
612
- case LX.TreeEvent.NODE_DRAGGED:
613
- console.log(event.node.id + " is now child of " + event.value.id);
614
- break;
615
- case LX.TreeEvent.NODE_RENAMED:
616
- console.log(event.node.id + " is now called " + event.value);
617
- break;
618
- case LX.TreeEvent.NODE_VISIBILITY:
619
- console.log(event.node.id + " visibility: " + event.value);
620
- break;
621
- }
622
- }
582
+ addDefault: true
623
583
  });
624
584
 
625
585
  // add components to panel branch
@@ -916,7 +876,7 @@
916
876
  { name: "Make a copy", callback: (a) => console.log(a) },
917
877
  { name: "Favourite", callback: (a) => console.log(a) },
918
878
  null,
919
- { name: "Delete", icon: "Trash2", className: "fg-error", callback: (a) => console.log(a) },
879
+ { name: "Delete", icon: "Trash2", className: "text-destructive", callback: (a) => console.log(a) },
920
880
  ]
921
881
  }
922
882
  });
@@ -996,7 +956,7 @@
996
956
  LX.toast( "Signed Up!", "Validate your email before login.");
997
957
  }
998
958
  }, { primaryActionName: "SignUp" });
999
- const errorMsg = p.addTextArea( null, "", null, { inputClass: "fg-secondary", disabled: true, fitHeight: true } );
959
+ const errorMsg = p.addTextArea( null, "", null, { disabled: true, fitHeight: true } );
1000
960
  }, { modal: true } );
1001
961
  }
1002
962
 
package/examples/index.html CHANGED
@@ -105,8 +105,8 @@
105
105
  for( let ex of examples )
106
106
  {
107
107
  const id = ex.replace(" ", "-").toLowerCase();
108
- const title = LX.makeContainer( ["auto", "auto"], "p-2 text-md fg-secondary font-semibold", ex, panel );
109
- const container = LX.makeContainer( ["100%", "auto"], "border overflow-hidden rounded-xl cursor-pointer", "", panel );
108
+ const title = LX.makeContainer( ["auto", "auto"], "p-2 text-base font-semibold", ex, panel );
109
+ const container = LX.makeContainer( ["100%", "auto"], "border-color overflow-hidden rounded-xl cursor-pointer", "", panel );
110
110
  const image = document.createElement( "img" );
111
111
  image.src = "previews/" + id + ".png";
112
112
  image.className = "w-full h-32 hover:scale-lg";
package/examples/side-bar.html CHANGED
@@ -68,7 +68,7 @@
68
68
  headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/favicon.png",
69
69
  footerTitle: "jxarco",
70
70
  footerSubtitle: "alexroco.30@gmail.com",
71
- footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
71
+ footerImage: "https://avatars.githubusercontent.com/u/25059187?v=4",
72
72
  onHeaderPressed: (e) => { console.log("onHeaderPressed") },
73
73
  onFooterPressed: (e) => { console.log("onFooterPressed") }
74
74
  });
package/examples/timeline.html CHANGED
@@ -94,7 +94,7 @@
94
94
 
95
95
  if(mode == types.KEYFRAMES) {
96
96
  let ctx = canvas.getContext("2d");
97
- ctx.fillStyle = LX.getThemeColor("global-color-accent");
97
+ ctx.fillStyle = LX.getCSSVariable("color-blue-500");
98
98
  ctx.fillRect(0, 0, canvas.width, canvas.height);
99
99
  ctx.font = panel.getValue('Font Size') + "px Monospace";
100
100
  ctx.fillStyle = panel.getValue('Font Color');
@@ -115,7 +115,7 @@
115
115
  function fillPanel( panel ) {
116
116
  panel.clear();
117
117
  panel.branch("Canvas", {icon: "Palette", filter: true});
118
- panel.addColor("Background", LX.getThemeColor("global-color-accent"));
118
+ panel.addColor("Background", LX.getCSSVariable("color-blue-500"));
119
119
  panel.addText("Track", trackName, (value, event) =>{
120
120
  const visibleItems = activeTimeline.getVisibleItems();
121
121
  for ( let i = 0; i < visibleItems.length; ++i ) {
package/examples/video-editor.html CHANGED
@@ -189,7 +189,7 @@
189
189
  canvas.width = video.clientWidth;
190
190
  canvas.height = video.clientHeight;
191
191
  const ctx = canvas.getContext("2d");
192
- ctx.fillStyle = LX.getThemeColor("global-selected-light");
192
+ ctx.fillStyle = LX.getCSSVariable("color-blue-400");
193
193
  ctx.font = "40px Arial";
194
194
  ctx.fillText("I'm a canvas above the video!", canvas.width / 2, 100);
195
195
 
package/examples/video-editor2.html CHANGED
@@ -48,7 +48,7 @@
48
48
  canvas.width = video.clientWidth;
49
49
  canvas.height = video.clientHeight;
50
50
  const ctx = canvas.getContext("2d");
51
- ctx.fillStyle = LX.getThemeColor("global-selected-light");
51
+ ctx.fillStyle = LX.getCSSVariable("color-blue-400");
52
52
  ctx.font = "40px Arial";
53
53
  ctx.fillText("I'm a canvas above the video!", canvas.width / 2, 100);
54
54
 
@@ -60,7 +60,7 @@
60
60
  canvas.width = video.clientWidth;
61
61
  canvas.height = video.clientHeight;
62
62
  const ctx = canvas.getContext("2d");
63
- ctx.fillStyle = LX.getThemeColor("global-selected-light");
63
+ ctx.fillStyle = LX.getCSSVariable("color-blue-400");
64
64
  ctx.font = "40px Arial";
65
65
  ctx.fillText("I'm a canvas above the video!", canvas.width / 2, 100);
66
66
  //videoEditor.timebar.resize(size)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lexgui",
3
- "version": "8.1.2",
3
+ "version": "8.2.1",
4
4
  "description": "JS library to create web graphical user interfaces",
5
5
  "type": "module",
6
6
  "main": "./build/lexgui.js",
@@ -41,17 +41,19 @@
41
41
  "scripts": {
42
42
  "format": "dprint fmt",
43
43
  "format:check": "dprint check",
44
- "colors": "node generate-colors.js",
45
44
  "clean:css": "rimraf build/lexgui.css && rimraf build/lexgui.min.css",
46
45
  "clean": "rimraf build",
47
- "bundle": "rollup -c",
48
- "bundle:ts": "rollup -c rollup.ts.build.config.js",
46
+ "build:css": "npx @tailwindcss/cli -i ./css/lexgui.css -o ./css/output.css",
47
+ "build:cssw": "npx @tailwindcss/cli -i ./css/lexgui.css -o ./css/output.css --watch",
48
+ "bundle": "npm run build:css && rollup -c",
49
+ "bundle:ts": "npm run build:css && rollup -c rollup.ts.build.config.js",
49
50
  "build:ts": "tsc --project tsconfig.all.json",
50
51
  "build": "npm run bundle:ts"
51
52
  },
52
53
  "devDependencies": {
53
54
  "@rollup/plugin-alias": "^6.0.0",
54
55
  "@rollup/plugin-terser": "^0.4.4",
56
+ "@tailwindcss/cli": "^4.1.18",
55
57
  "cssnano": "^7.1.2",
56
58
  "dprint": "^0.50.2",
57
59
  "postcss": "^8.5.6",
@@ -59,6 +61,7 @@
59
61
  "rollup": "^4.53.2",
60
62
  "rollup-plugin-postcss": "^4.0.2",
61
63
  "rollup-plugin-typescript2": "^0.36.0",
64
+ "tailwindcss": "^4.1.18",
62
65
  "typescript": "^5.9.3"
63
66
  }
64
67
  }