perfect-gui 5.1.0 → 5.1.1

package/README.md

@@ -13,6 +13,7 @@
 - **Modern UI**: Clean, customizable, and polished design right out of the box.
 - **Rich Inputs**: Support for sliders, buttons, color pickers, vectors, images, lists, and toggles.
 - **Folders**: Easily group and organize your controls in collapsible sections.
+- **Tabs**: Create tabbed interfaces to organize content in separate panels.
 - **Draggable & Auto-positioned**: Snap it to screen edges or let the user drag it anywhere.
 - **Data Binding**: Automatically sync your controls with object properties.
 - **Zero Dependencies**: Lightweight and built with vanilla JavaScript.
@@ -110,4 +111,5 @@ See the [Documentation](https://thibka.github.io/perfect-gui/) for a comprehensi
 - [`color()`](https://thibka.github.io/perfect-gui/public/#color)
 - [`vector2()`](https://thibka.github.io/perfect-gui/public/#vector2)
 - [`folder()`](https://thibka.github.io/perfect-gui/public/#folder)
+- [`tabs()`](https://thibka.github.io/perfect-gui/public/#tabs)
 - [`toggleClose()`](https://thibka.github.io/perfect-gui/public)

package/dist/perfect-gui.js

@@ -543,7 +543,7 @@ class C {
     typeof t.onUpdate == "function" && (this.onUpdate = t.onUpdate), this.label = t != null && typeof t.label == "string" ? t.label : "", this.backgroundColor = t.color || null, this.opacity = t.opacity || 1, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(
       this.container.clientHeight,
       window.innerHeight
-    ), t.maxHeight && (this.initMaxHeight = t.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(t.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = t.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${oe(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.domElement.setAttribute("data-corner-x", this.screenCorner.x), this.domElement.setAttribute("data-corner-y", this.screenCorner.y), t.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, t.draggable == !0 && this._makeDraggable(), this.closed = !1, t.closed && this.toggleClose();
+    ), t.maxHeight && (this.initMaxHeight = t.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(t.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = t.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${oe(this.position_type)}`), this._styleInstance(), this.closed = !!t.closed, this._addWrapper(), this.domElement.setAttribute("data-corner-x", this.screenCorner.x), this.domElement.setAttribute("data-corner-y", this.screenCorner.y), t.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, t.draggable == !0 && this._makeDraggable();
   }
   _styleInstance() {
     let t = this._getScrollbarWidth(this.container);
@@ -603,7 +603,7 @@ class C {
     this.stylesheet.innerHTML += t;
   }
   _addWrapper() {
-    this.domElement = document.createElement("div"), this.domElement.id = "p-gui-" + this.instanceId, this.domElement.className = "p-gui", this.domElement.setAttribute("data-lenis-prevent", ""), this.container.append(this.domElement), this.header = document.createElement("div"), this.header.className = "p-gui__header", this.header.textContent = this.label, this.header.style = `${this.backgroundColor ? "border-color: " + this.backgroundColor + ";" : ""}`, this.domElement.append(this.header);
+    this.domElement = document.createElement("div"), this.domElement.id = "p-gui-" + this.instanceId, this.domElement.className = "p-gui" + (this.closed ? " p-gui--collapsed" : ""), this.domElement.setAttribute("data-lenis-prevent", ""), this.container.append(this.domElement), this.header = document.createElement("div"), this.header.className = "p-gui__header", this.header.textContent = this.label, this.header.style = `${this.backgroundColor ? "border-color: " + this.backgroundColor + ";" : ""}`, this.domElement.append(this.header);
     const t = document.createElement("div");
     t.className = "p-gui__header-close", t.addEventListener("click", this.toggleClose.bind(this)), this.header.append(t);
     const e = document.createElement("div");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "perfect-gui",
   "type": "module",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "GUI for JavaScript",
   "main": "dist/perfect-gui.js",
   "module": "dist/perfect-gui.js",

package/src/index.js

@@ -81,6 +81,7 @@ export default class GUI {
         // Instance specific styles
         this._styleInstance();
 
+        this.closed = !!options.closed;
         this._addWrapper();
         this.domElement.setAttribute('data-corner-x', this.screenCorner.x);
         this.domElement.setAttribute('data-corner-y', this.screenCorner.y);
@@ -92,9 +93,6 @@ export default class GUI {
 
         this.hasBeenDragged = false;
         if (options.draggable == true) this._makeDraggable();
-
-        this.closed = false;
-        if (options.closed) this.toggleClose();
     }
 
     _styleInstance() {
@@ -245,7 +243,7 @@ export default class GUI {
     _addWrapper() {
         this.domElement = document.createElement('div');
         this.domElement.id = 'p-gui-' + this.instanceId;
-        this.domElement.className = 'p-gui';
+        this.domElement.className = 'p-gui' + (this.closed ? ' p-gui--collapsed' : '');
         this.domElement.setAttribute('data-lenis-prevent', '');
         this.container.append(this.domElement);