lexgui 8.2.1 → 8.2.3

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 (38) hide show
  1. package/build/components/BaseComponent.d.ts +75 -73
  2. package/build/components/Form.d.ts +14 -8
  3. package/build/components/TextInput.d.ts +13 -11
  4. package/build/core/Namespace.js +1 -1
  5. package/build/core/Namespace.js.map +1 -1
  6. package/build/extensions/AssetView.d.ts +1 -1
  7. package/build/extensions/AssetView.js +5 -5
  8. package/build/extensions/AssetView.js.map +1 -1
  9. package/build/extensions/Audio.js +163 -163
  10. package/build/extensions/Audio.js.map +1 -1
  11. package/build/extensions/CodeEditor.js +5054 -5054
  12. package/build/extensions/DocMaker.d.ts +28 -27
  13. package/build/extensions/DocMaker.js +49 -26
  14. package/build/extensions/DocMaker.js.map +1 -1
  15. package/build/extensions/Timeline.js +3948 -3948
  16. package/build/extensions/VideoEditor.d.ts +150 -150
  17. package/build/extensions/VideoEditor.js +1014 -1014
  18. package/build/lexgui.all.js +209 -120
  19. package/build/lexgui.all.js.map +1 -1
  20. package/build/lexgui.all.min.js +1 -1
  21. package/build/lexgui.all.module.js +209 -120
  22. package/build/lexgui.all.module.js.map +1 -1
  23. package/build/lexgui.all.module.min.js +1 -1
  24. package/build/lexgui.css +68 -54
  25. package/build/lexgui.js +153 -87
  26. package/build/lexgui.js.map +1 -1
  27. package/build/lexgui.min.css +2 -2
  28. package/build/lexgui.min.js +1 -1
  29. package/build/lexgui.module.js +153 -87
  30. package/build/lexgui.module.js.map +1 -1
  31. package/build/lexgui.module.min.js +1 -1
  32. package/changelog.md +29 -1
  33. package/demo.js +2 -2
  34. package/examples/all-components.html +16 -2
  35. package/examples/asset-view.html +1 -1
  36. package/examples/editor.html +8 -6
  37. package/examples/side-bar.html +3 -1
  38. package/package.json +1 -1
package/changelog.md CHANGED
@@ -2,7 +2,34 @@
2
2
 
3
3
  ## dev
4
4
 
5
- ## 8.2.1 (master)
5
+ ## 8.2.3 (master)
6
+
7
+ Fixed TextInput not updating on browser autofill.
8
+ Allow support to disable: Array, DatePicker, Layers, List, Pad, Rate, and Tags components.
9
+ Add `options.mapIcon` to change Map2D opener button icon.
10
+ Added `destructive` class support for Dropdown items.
11
+
12
+ Form Component:
13
+ - Enter key now submits the form as native behaviour.
14
+ - Added `options.skipEnterSubmit` to disable the Enter submission.
15
+ - Per entry data `entry.submit` overrides the general form options.
16
+ - Docs updated.
17
+
18
+ DocMaker:
19
+ - Support collapsable header.
20
+ - Added `className` support for some docs utilities.
21
+ - Changed `#content` docs selector to `.lexdocs-content`.
22
+
23
+ ## 8.2.2
24
+
25
+ AssetView:
26
+ - Added suppord for custom folder names in `onBeforeCreateFolder` using 1st resolve param.
27
+ - Fixed explorer NodeTree bug selecting items with spaces in the id.
28
+
29
+ Fixed toast css in light mode.
30
+ Minor fixes Sidebar CSS.
31
+
32
+ ## 8.2.1
6
33
 
7
34
  CodeEditor:
8
35
  - Fixed `options.onReady` being called before processing lines.
@@ -21,6 +48,7 @@ VideoEditor TimeBar:
21
48
  - Added `unbind` function to remove document events.
22
49
  - Fixed marker grabbing when both overlapped.
23
50
 
51
+ Added `LX.removeSignal`.
24
52
  Expose DocMaker extension in LX.
25
53
  Minor CSS fixes.
26
54
 
package/demo.js CHANGED
@@ -99,7 +99,7 @@ LX._registerIconsAndColors( "./" );
99
99
  const header = LX.makeContainer( [ null, "auto" ], "flex flex-col gap-4 p-8 pb-4 items-center", `
100
100
  <a href="docs?p=changelog" class="flex flex-row gap-1 items-center text-sm p-1 px-4 rounded-full text-secondary-foreground decoration-none hover:bg-secondary cursor-pointer"><span class="flex bg-info w-2 h-2 rounded-full"></span>
101
101
  New Components: Avatar, Spinner, Pagination and more${ LX.makeIcon( "ArrowRight", { svgClass: "sm" } ).innerHTML }</a>
102
- <p class="fg text-secondary-foreground font-medium tracking-tight leading-none text-center text-balance sm:text-5xl text-4xl">Build your Application Interface</p>
102
+ <p class="fg text-foreground font-medium tracking-tight leading-none text-center text-balance sm:text-5xl text-4xl">Build your Application Interface</p>
103
103
  <p class="text-secondary-foreground 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 HTML, JavaScript, and Tailwind CSS. Fully Open Source.</p>
104
104
  `, area );
105
105
 
@@ -710,7 +710,7 @@ LX._registerIconsAndColors( "./" );
710
710
  { name: "Make a copy" },
711
711
  { name: "Favourite" },
712
712
  null,
713
- { name: "Delete", icon: "Trash2", className: "text-destructive" },
713
+ { name: "Delete", icon: "Trash2", className: "destructive" },
714
714
  ]
715
715
  }
716
716
  });
package/examples/all-components.html CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <head>
6
6
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
7
- <title>LexGUI demo</title>
7
+ <title>LexGUI All Components Demo</title>
8
8
  <link rel="stylesheet" href="../css/output.css">
9
9
  <link rel="icon" href="../images/favicon.png">
10
10
 
@@ -204,6 +204,7 @@
204
204
  checkLeftPanel.addCheckbox(null, true, null, { className: "success", label: "Success" });
205
205
  checkLeftPanel.addCheckbox(null, true, null, { className: "warning", label: "Warning" });
206
206
  checkLeftPanel.addCheckbox(null, true, null, { className: "destructive", label: "Destructive" });
207
+ checkLeftPanel.addCheckbox(null, true, null, { label: "Disabled", disabled: true });
207
208
  }
208
209
 
209
210
  // Radiogroup
@@ -266,6 +267,7 @@
266
267
  panelB.addOTP("Disabled OTP", "965114", null, { disabled: true });
267
268
  panelB.branch("Map2D Inputs", { closed: closedDefault });
268
269
  panelB.addMap2D("Map2D", map2Dpoints, null, { size: [ 300, 300 ] });
270
+ panelB.addMap2D("Disabled Map2D", map2Dpoints, null, { size: [ 300, 300 ], disabled: true });
269
271
  panelB.branch("Color Inputs", { closed: closedDefault });
270
272
  panelB.addColor("From Hex Color", "#b7a9b1");
271
273
  panelB.addColor("From RGB Color", { r: 1, g: 0.1, b: 0.6 });
@@ -287,6 +289,7 @@
287
289
  p.addButton("Unity Button", "Click me!", null, { buttonClass: "primary" });
288
290
  } });
289
291
  panelB.addSelect("With Labels", selectValuesWithLabels, "Unity", null);
292
+ panelB.addSelect("Disabled", selectValuesWithLabels, "Unity", null, { disabled: true });
290
293
  panelB.addSelect("With Filter", selectValuesWithLabels, "Godot", null, { filter: true, placeholder: "Search tools..." });
291
294
  panelB.addSelect("Custom Empty Msg", selectValuesWithLabels, "Unreal Engine", null, { filter: true, emptyMsg: "No tools found.", placeholder: "Search tools..." });
292
295
  panelB.addSelect("With Images", [{ value: "Godot", src: "https://godotengine.org/assets/press/logo_vertical_color_light.png" }, { value: "Unity", src: "https://logos-world.net/wp-content/uploads/2023/01/Unity-Logo.png" }, { value: "Unreal Engine", src: "https://cdn2.unrealengine.com/ue-logo-stacked-unreal-engine-w-677x545-fac11de0943f.png" }], "Godot", null);
@@ -294,6 +297,9 @@
294
297
  panelB.branch("File Inputs", { closed: closedDefault });
295
298
  panelB.addFile("Classic");
296
299
  panelB.addFile("Disabled", null, { disabled: true });
300
+ panelB.branch("Pad Inputs", { closed: closedDefault });
301
+ panelB.addPad("2D Pad", [0.5, 0.5], null, { padSize: "100px", min: -1, max: 2 });
302
+ panelB.addPad("Disabled 2D Pad", [0.5, 0.5], null, { disabled: true, padSize: "100px", min: -1, max: 2 });
297
303
  }
298
304
 
299
305
  // Rate
@@ -301,6 +307,7 @@
301
307
  panelC.branch("Rate", { closed: closedDefault });
302
308
  panelC.addRate("Basic Rate", 2, null);
303
309
  panelC.addRate("Rate With Halfs", 4.5, null, { allowHalf: true });
310
+ panelC.addRate("Disabled Rate", 2, null, { disabled: true });
304
311
  }
305
312
 
306
313
  // DatePicker
@@ -312,6 +319,7 @@
312
319
  panelC.addDate("Using Today's Date", null, null, { today: true });
313
320
  panelC.addDate("Allow Until Today", null, null, { untilToday: true });
314
321
  panelC.addDate("Allow From Today", null, null, { fromToday: true });
322
+ panelC.addDate("Disabled Date", "15/04/2025", null, { disabled: true });
315
323
  }
316
324
 
317
325
  // Tree
@@ -384,6 +392,7 @@
384
392
  panelC.branch("List", { closed: closedDefault });
385
393
  panelC.addList("Number List", [ 1, 2, 3, 4 ] );
386
394
  panelC.addList("String List", [ 'GPTeam', 'Blat Bunny', 'Blat Panthers' ], 'Blat Panthers');
395
+ panelC.addList("Disabled List", [ 'GPTeam', 'Blat Bunny', 'Blat Panthers' ], 'Blat Panthers', null, { disabled: true } );
387
396
  panelC.addList("String List with Icons", [['GPTeam', 'Gpu'], ['Blat Bunny', 'Bone'], ['Blat Panthers', 'PawPrint']], 'Blat Panthers');
388
397
  }
389
398
 
@@ -393,6 +402,9 @@
393
402
  panelC.addArray("Array", ['GPTeam', 'Blat Panthers', 'Blat Bunny'], (value, event) => {
394
403
  console.log(value);
395
404
  });
405
+ panelC.addArray("Disabled Array", ['GPTeam', 'Blat Panthers', 'Blat Bunny'], (value, event) => {
406
+ console.log(value);
407
+ }, { disabled: true } );
396
408
  }
397
409
 
398
410
  // Table
@@ -438,13 +450,15 @@
438
450
  // Tags
439
451
  {
440
452
  panelC.branch("Tags", { closed: closedDefault });
441
- panelC.addTags("Game Tags", "2d, karate, ai, engine, ps5, console");
453
+ panelC.addTags("Classic Tags", "2d, karate, ai, engine, ps5, console");
454
+ panelC.addTags("Disabled Tags", "2d, karate, ai, engine, ps5, console", null, { disabled: true } );
442
455
  }
443
456
 
444
457
  // Layers
445
458
  {
446
459
  panelC.branch("Layers", { closed: closedDefault });
447
460
  panelC.addLayers("Layers", 10);
461
+ panelC.addLayers("Disabled Layers", 10, null, { disabled: true });
448
462
  }
449
463
 
450
464
  // Progress
package/examples/asset-view.html CHANGED
@@ -269,7 +269,7 @@
269
269
 
270
270
  assetView.on( "beforeCreateFolder", ( event, resolve ) => {
271
271
  LX.prompt("Perform CreateFolder Action?", "Server Message", () => {
272
- resolve();
272
+ resolve("My New Folder With Custom Name");
273
273
  })
274
274
  } );
275
275
 
package/examples/editor.html CHANGED
@@ -876,7 +876,7 @@
876
876
  { name: "Make a copy", callback: (a) => console.log(a) },
877
877
  { name: "Favourite", callback: (a) => console.log(a) },
878
878
  null,
879
- { name: "Delete", icon: "Trash2", className: "text-destructive", callback: (a) => console.log(a) },
879
+ { name: "Delete", icon: "Trash2", className: "destructive", callback: (a) => console.log(a) },
880
880
  ]
881
881
  }
882
882
  });
@@ -965,17 +965,19 @@
965
965
  let dialog = new LX.Dialog('Login', panel => {
966
966
 
967
967
  const formData = {
968
- Username: {
968
+ username: {
969
969
  value: "",
970
- placeholder: "Enter username",
970
+ label: "Username",
971
971
  icon: "User",
972
+ name: "username",
972
973
  pattern: { minLength: 3 }
973
974
  },
974
- Password: {
975
+ password: {
975
976
  value: "",
977
+ label: "Password",
976
978
  type: "password",
977
- placeholder: "Enter password",
978
979
  icon: "KeyRound",
980
+ name: "password",
979
981
  pattern: { lowercase: true, uppercase: true, digit: true, minLength: 6 },
980
982
  submit: true
981
983
  }
@@ -985,7 +987,7 @@
985
987
  if( !errors.length )
986
988
  {
987
989
  dialog.close();
988
- LX.toast( "Logged in!", `Welcome ${ value.Username } :)`);
990
+ LX.toast( "Logged in!", `Welcome ${ value.username } :)`);
989
991
  }
990
992
  else
991
993
  {
package/examples/side-bar.html CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6
- <title>LexGUI Area Tabs Demo</title>
6
+ <title>LexGUI Sidebar Demo</title>
7
7
  <link rel="stylesheet" href="../build/lexgui.css">
8
8
  <link rel="icon" href="../images/favicon.png">
9
9
  <script type="importmap">
@@ -57,6 +57,8 @@
57
57
  m.add("Accessibility ", { icon: "Box", callback: logParams });
58
58
  m.add("Fast Refresh", { icon: "Code", callback: logParams });
59
59
  m.add("Supported Browsers", { icon: "Search", callback: logParams });
60
+ m.group("Settings");
61
+ m.add("Mode ", { icon: "Sun", swap: "Moon", callback: logParams });
60
62
  m.separator();
61
63
  m.add("Calendar ", { collapsable: 3 });
62
64
  m.add("Personal ", { callback: logParams, type: "checkbox" });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lexgui",
3
- "version": "8.2.1",
3
+ "version": "8.2.3",
4
4
  "description": "JS library to create web graphical user interfaces",
5
5
  "type": "module",
6
6
  "main": "./build/lexgui.js",