muigui 0.0.17 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muigui",
-  "version": "0.0.17",
+  "version": "0.0.21",
   "description": "A Simple GUI",
   "main": "dist/0.x/muigui.js",
   "module": "dist/0.x/muigui.module.js",
@@ -50,9 +50,9 @@
     "eslint-plugin-one-variable-per-var": "^0.0.3",
     "eslint-plugin-optional-comma-spacing": "0.0.4",
     "eslint-plugin-require-trailing-comma": "0.0.1",
-    "puppeteer": "^21.5.2",
+    "puppeteer": "^23.10.4",
     "rollup": "^3.20.2",
-    "servez": "^2.1.2",
+    "servez": "^2.2.4",
     "tslib": "^2.6.2",
     "typescript": "5.2"
   }

package/src/controllers/Button.js

@@ -28,10 +28,12 @@ export default class Button extends Controller {
   }
   name(name) {
     this.#buttonElem.textContent = name;
+    return this;
   }
   setOptions(options) {
     copyExistingProperties(this.#options, options);
     const {name} = this.#options;
     this.#buttonElem.textContent = name;
+    return this;
   }
 }

package/src/controllers/Canvas.js

@@ -14,4 +14,7 @@ export default class Canvas extends LabelController {
   get canvas() {
     return this.#canvasElem;
   }
+  listen() {
+    return this;
+  }
 }

package/src/controllers/Container.js

@@ -61,4 +61,10 @@ export default class Container extends Controller {
     this.#childDestController = this.#childDestController.parent;
     return this;
   }
+  listen() {
+    this.#controllers.forEach(c => {
+      c.listen();
+    });
+    return this;
+  }
 }

package/src/muigui.js

@@ -34,11 +34,22 @@ export {
   Row,
 };
 
+function camelCaseToSnakeCase(id) {
+  return id
+    .replace(/(.)([A-Z][a-z]+)/g, '$1_$2')
+    .replace(/([a-z0-9])([A-Z])/g, '$1_$2')
+    .toLowerCase();
+}
+
+function prepName(name) {
+  return camelCaseToSnakeCase(name.toString()).replaceAll('_', ' ');
+}
+
 export class GUIFolder extends Folder {
   add(object, property, ...args) {
     const controller = object instanceof Controller
         ? object
-        : createController(object, property, ...args);
+        : createController(object, property, ...args).name(prepName(property));
     return this.addController(controller);
   }
   addCanvas(name) {
@@ -47,9 +58,13 @@ export class GUIFolder extends Folder {
   addColor(object, property, options = {}) {
     const value = object[property];
     if (hasAlpha(options.format || guessFormat(value))) {
-      return this.addController(new ColorChooser(object, property, options));
+      return this
+        .addController(new ColorChooser(object, property, options))
+        .name(prepName(property));
     } else {
-      return this.addController(new Color(object, property, options));
+      return this
+        .addController(new Color(object, property, options))
+        .name(prepName(property));
     }
   }
   addDivider() {
@@ -63,7 +78,7 @@ export class GUIFolder extends Folder {
   }
   addButton(name, fn) {
     const o = {fn};
-    return this.add(o, 'fn').name(name);
+    return this.add(o, 'fn').name(prepName(name));
   }
 }
 

package/src/styles/muigui.css.js

@@ -84,6 +84,7 @@ export default {
   font-size: var(--font-size);
   box-sizing: border-box;
   line-height: 100%;
+  white-space: nowrap;
 }
 .muigui * {
   box-sizing: inherit;
@@ -149,6 +150,10 @@ export default {
   --value-color: var(--disabled-color) !important;
   --range-left-color: var(--disabled-color) !important;
 }
+/* this shouldn't be needed! */
+.muigui-disabled label {
+  color: var(--disabled-color) 
+}
 
 .muigui canvas,
 .muigui svg {
@@ -287,7 +292,7 @@ export default {
 }
 .muigui-closed>.muigui-open-container>* {
   transition: all 0.1s ease-out;
-  margin-top: -100%;
+  margin-top: -1000%;
 }
 
 /* ---- popdown ---- */