muigui 0.0.10 → 0.0.13

package/src/styles/muigui.css.js

@@ -10,16 +10,24 @@ export default {
   --menu-bg-color: #f8f8f8;
   --menu-sep-color: #bbb;
   --hover-bg-color: #999;
-  --focus-color: #68C;
-  --range-color: #888888;
+  --focus-color: #8BF;
+  --range-color: #AAA;
   --invalid-color: #FF0000;
   --selected-color: rgb(255, 255, 255, 0.9);
 
   --button-bg-color: var(--value-bg-color);
 
+  --image-open: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDQ0OyIgeD0iMjAlIiB5PSI0NSUiIHdpZHRoPSI2MCUiIGhlaWdodD0iMTAlIj48L3JlY3Q+Cjwvc3ZnPg==);
+  --image-closed: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDQ0OyIgeD0iNDUlIiB5PSIyMCUiIHdpZHRoPSIxMCUiIGhlaWdodD0iNjAlIj48L3JlY3Q+CiAgPHJlY3Qgc3R5bGU9ImZpbGw6ICM0NDQ7IiB4PSIyMCUiIHk9IjQ1JSIgd2lkdGg9IjYwJSIgaGVpZ2h0PSIxMCUiPjwvcmVjdD4KPC9zdmc+);
+  --image-checkerboard: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDA0MDQwOyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PC9yZWN0PgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjODA4MDgwOyIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwJSIgaGVpZ2h0PSI1MCUiPjwvcmVjdD4KICA8cmVjdCBzdHlsZT0iZmlsbDogIzgwODA4MDsiIHg9IjUwJSIgeT0iNTAlIiB3aWR0aD0iNTAlIiBoZWlnaHQ9IjUwJSI+PC9yZWN0Pgo8L3N2Zz4=);
+
   --range-left-color: var(--value-color);
   --range-right-color: var(--value-bg-color); 
   --range-right-hover-color: var(--hover-bg-color);
+  --button-image: 
+    linear-gradient(
+      rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.2)
+    );
 
   color: var(--color);
   background-color: var(--bg-color);
@@ -36,7 +44,7 @@ export default {
     --menu-bg-color: #080808;
     --menu-sep-color: #444444;
     --hover-bg-color: #666666;
-    --focus-color: #88AAFF;
+    --focus-color: #458; /*#88AAFF*/;
     --range-color: #888888;
     --invalid-color: #FF6666;
     --selected-color: rgba(255, 255, 255, 0.3);
@@ -46,9 +54,15 @@ export default {
     --range-left-color: var(--value-color);
     --range-right-color: var(--value-bg-color); 
     --range-right-hover-color: var(--hover-bg-color);
+    --button-image: linear-gradient(
+        rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)
+      );
 
     color: var(--color);
     background-color: var(--bg-color);
+
+    --image-closed: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjREREOyIgeD0iMjAlIiB5PSI0NSUiIHdpZHRoPSI2MCUiIGhlaWdodD0iMTAlIj48L3JlY3Q+Cjwvc3ZnPg==);
+    --image-open: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjREREOyIgeD0iNDUlIiB5PSIyMCUiIHdpZHRoPSIxMCUiIGhlaWdodD0iNjAlIj48L3JlY3Q+CiAgPHJlY3Qgc3R5bGU9ImZpbGw6ICNEREQ7IiB4PSIyMCUiIHk9IjQ1JSIgd2lkdGg9IjYwJSIgaGVpZ2h0PSIxMCUiPjwvcmVjdD4KPC9zdmc+);
   }
 }
 
@@ -57,7 +71,6 @@ export default {
   --label-width: 45%;
   --number-width: 40%;
 
-
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
   --font-size: 11px;
   --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;
@@ -150,6 +163,9 @@ export default {
   min-width: 0;
   min-height: var(--line-height);
 }
+.muigui-root {
+  z-index: 1;
+}
 .muigui-root,
 .muigui-menu {
   display: flex;
@@ -174,8 +190,7 @@ export default {
   color: var(--color);
   background-color: var(--menu-bg-color);
   min-height: var(--line-height);
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
+  padding: 0.2em;
   cursor: pointer;
   border-radius: var(--border-radius);
 }
@@ -196,7 +211,7 @@ export default {
 .muigui-controller>*:nth-child(1) {
   flex: 1 0 var(--label-width);
   min-width: 0;
-  white-space: pre;
+  /* white-space: pre; why?? */
 }
 .muigui-controller>label:nth-child(1) {
   place-content: center start;
@@ -238,32 +253,41 @@ export default {
 /* fix! */
 .muigui-open>button>label::before,
 .muigui-closed>button>label::before {
+  content: "X";
+  color: rgba(0, 0, 0, 0);
+  background-color: var(--range-color);
+  border-radius: 0.2em;
   width: 1.25em;
-  height: var(--line-height);
+  margin-right: 0.25em;
+  height: 1.25em; /*var(--line-height);*/
   display: inline-grid;
   place-content: center start;
   pointer-events: none;
 }
 .muigui-open>button>label::before {
-  content: "ⓧ"; /*"▼";*/
+  background-image: var(--image-open);
 }
 .muigui-closed>button>label::before {
-  content: "⨁"; /*"▶";*/
+  background-image: var(--image-closed);
 }
-.muigui-open>*:nth-child(2) {
-  transition: max-height 0.2s ease-out,
-              opacity 0.5s ease-out;
-  max-height: 100vh;
+
+.muigui-open>.muigui-open-container {
+  transition: all 0.1s ease-out;
   overflow: auto;
-  opacity: 1;
+  height: 100%;
 }
-
-.muigui-closed>*:nth-child(2) {
-  transition: max-height 0.2s ease-out,
-              opacity 1s;
-  max-height: 0;
-  opacity: 0;
+.muigui-closed>.muigui-open-container {
+  transition: all 0.1s ease-out;
   overflow: hidden;
+  min-height: 0;
+}
+.muigui-open>.muigui-open-container>* {
+  transition: all 0.1s ease-out;
+  margin-top: 0px;
+}
+.muigui-closed>.muigui-open-container>* {
+  transition: all 0.1s ease-out;
+  margin-top: -100%;
 }
 
 /* ---- popdown ---- */
@@ -275,8 +299,12 @@ export default {
 .muigui-value>*:nth-child(1).muigui-pop-down-top {
   flex: 0;
 }
-.muigui-pop-down-bottom {
+.muigui-closed .muigui-pop-down-bottom {
+  max-height: 0;
+}
 
+.muigui-value .muigui-pop-down-bottom {
+  margin: 0;
 }
 
 .muigui-pop-down-values {
@@ -298,6 +326,10 @@ export default {
   width: auto;
   color: var(--value-color);
   background-color: var(--value-bg-color);
+  background-image: var(--image-checkerboard);
+  background-size: 10px 10px;
+  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+
   cursor: pointer;
 
   display: grid;
@@ -389,14 +421,16 @@ export default {
 
 .muigui-button {
   display: grid;
-
+  padding: 2px 0 2px 0;
 }
 .muigui-button button {
   border: none;
   color: var(--value-color);
   background-color: var(--button-bg-color);
+  background-image: var(--button-image);
   cursor: pointer;
   place-content: center center;
+  height: var(--line-height);
 }
 
 /* ------ [ color ] ------ */
@@ -608,9 +642,9 @@ export default {
   border-bottom: 1px solid rgba(0,0,0,0.2);
   border-right: 1px solid rgba(0,0,0,0.2);
   background-color: var(--range-color);
-  margin-top: calc((var(--line-height) - 2px) / -2);
-  width: calc(var(--line-height) - 2px);
-  height: calc(var(--line-height) - 2px);
+  margin-top: calc((var(--line-height) - 6px) / -2);
+  width: calc(var(--line-height) - 6px);
+  height: calc(var(--line-height) - 6px);
 }
 
 .muigui-range input[type=range]::-webkit-slider-runnable-track {
@@ -670,6 +704,17 @@ export default {
 }
 */
 
+.muigui-checkered-background {
+  background-color: #404040;
+  background-image:
+     linear-gradient(45deg, #808080 25%, transparent 25%),
+     linear-gradient(-45deg, #808080 25%, transparent 25%),
+     linear-gradient(45deg, transparent 75%, #808080 75%),
+     linear-gradient(-45deg, transparent 75%, #808080 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+}
+
 /* ---------------------------------------------------------- */
 
 /* needs to be at bottom to take precedence */
@@ -683,8 +728,14 @@ export default {
 
 `,
 themes: {
-  default: '',
-  float: `
+  default: {
+    include: ['default'],
+    css: `
+    `,
+  },
+  float: {
+    include: ['default'],
+    css: `
   :root {
     color-scheme: light dark,
   }
@@ -741,5 +792,57 @@ themes: {
     --range-color: rgba(0, 0, 0, 0.125);
   }
 `,
+  },
+  form: {
+    include: [],
+    css: `
+    .muigui {
+      --width: 100%;
+      --label-width: 45%;
+      --number-width: 40%;
+    }
+    .muigui-root>button {
+      display: none;
+    }
+    .muigui-controller {
+      margin-top: 1em;
+    }
+    .muigui-label-controller {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      margin-top: 1em;
+    }
+    .muigui-label-controller:has(.muigui-checkbox) {
+      flex-direction: row;
+    }
+    .muigui-value {
+      display: flex;
+      align-items: stretch;
+    }
+    .muigui-value>* {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    .muigui-controller>*:nth-child(1) {
+      flex: 1 0 var(--label-width);
+      min-width: 0;
+      white-space: pre;
+    }
+    .muigui-controller>label:nth-child(1) {
+      place-content: center start;
+      display: inline-grid;
+      overflow: hidden;
+    }
+    .muigui-controller>*:nth-child(2) {
+      flex: 1 1 75%;
+      min-width: 0;
+    }
+  `,
+  },
+  none: {
+    include: [],
+    css: '',
+  },
 },
 };

package/src/views/ColorChooserView.js

@@ -1,32 +1,38 @@
-import { createElem } from '../libs/elem.js';
+import { createElem, getNewId } from '../libs/elem.js';
 import { addTouchEvents } from '../libs/touch.js';
+import { identity } from '../libs/conversions.js';
 import { clamp } from '../libs/utils.js';
 import EditView from './EditView.js';
 import {
   hexToFloatRGB,
+  hexToFloatRGBA,
   hsv01ToRGBFloat,
+  hsva01ToRGBAFloat,
   rgbFloatToHSV01,
+  rgbaFloatToHSVA01,
   floatRGBToHex,
+  floatRGBAToHex,
+  rgbaFloatToHsla01,
 } from '../libs/color-utils.js';
+import { copyExistingProperties } from '../libs/utils.js';
 
 const svg = `
-
-<svg tabindex="0" viewBox="0 0 64 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
-    <linearGradient id="muigui-color-chooser-light-dark" x1="0" x2="0" y1="0" y2="1">
+<svg class="muigui-checkered-background" tabindex="0" viewBox="0 0 64 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <linearGradient data-src="muigui-color-chooser-light-dark" x1="0" x2="0" y1="0" y2="1">
       <stop stop-color="rgba(0,0,0,0)" offset="0%"/>
       <stop stop-color="#000" offset="100%"/>
     </linearGradient>
-    <linearGradient id="muigui-color-chooser-hue">
-      <stop stop-color="hsl(60, 0%, 100%)" offset="0%"/>
-      <stop stop-color="hsl(60, 100%, 50%)" offset="100%"/>
+    <linearGradient data-src="muigui-color-chooser-hue">
+      <stop stop-color="hsl(60 0% 100% / 1)" offset="0%"/>
+      <stop stop-color="hsl(60 100% 50% / 1)" offset="100%"/>
     </linearGradient>
 
-    <rect width="64" height="48" fill="url(#muigui-color-chooser-hue)"/>
-    <rect width="64" height="48" fill="url(#muigui-color-chooser-light-dark)"/>
+    <rect width="64" height="48" data-target="muigui-color-chooser-hue"/>
+    <rect width="64" height="48" data-target="muigui-color-chooser-light-dark"/>
     <circle r="4" class="muigui-color-chooser-circle"/>
 </svg>
 <svg tabindex="0" viewBox="0 0 64 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
-    <linearGradient id="muigui-color-chooser-hues" x1="0" x2="1" y1="0" y2="0">
+    <linearGradient data-src="muigui-color-chooser-hues" x1="0" x2="1" y1="0" y2="0">
       <stop stop-color="hsl(0,100%,50%)" offset="0%"/>
       <stop stop-color="hsl(60,100%,50%)" offset="16.666%"/>
       <stop stop-color="hsl(120,100%,50%)" offset="33.333%"/>
@@ -35,48 +41,108 @@ const svg = `
       <stop stop-color="hsl(300,100%,50%)" offset="83.333%"/>
       <stop stop-color="hsl(360,100%,50%)" offset="100%"/>
     </linearGradient>
-    <rect y="1" width="64" height="4" fill="url('#muigui-color-chooser-hues')"/>
-    <g class="muigui-color-chooser-cursor">
+    <rect y="1" width="64" height="4" data-target="muigui-color-chooser-hues"/>
+    <g class="muigui-color-chooser-hue-cursor">
+      <rect x="-3" width="6" height="6" />
+    </g>
+</svg>
+<svg class="muigui-checkered-background" tabindex="0" viewBox="0 0 64 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <linearGradient data-src="muigui-color-chooser-alpha" x1="0" x2="1" y1="0" y2="0">
+      <stop stop-color="hsla(0,100%,100%,0)" offset="0%"/>
+      <stop stop-color="hsla(0,100%,100%,1)" offset="100%"/>
+    </linearGradient>
+    <rect y="1" width="64" height="4" data-target="muigui-color-chooser-alpha"/>
+    <g class="muigui-color-chooser-alpha-cursor">
       <rect x="-3" width="6" height="6" />
     </g>
 </svg>
 `;
 
+function connectFillTargets(elem) {
+  elem.querySelectorAll('[data-src]').forEach(srcElem => {
+    const id = getNewId();
+    srcElem.id = id;
+    elem.querySelectorAll(`[data-target=${srcElem.dataset.src}]`).forEach(targetElem => {
+      targetElem.setAttribute('fill', `url(#${id})`);
+    });
+  });
+  return elem;
+}
+
+// Was originally going to make alpha an option. Issue is
+// hard coded conversions?
 export default class ColorChooserView extends EditView {
+  #to;
+  #from;
   #satLevelElem;
-  #hueUIElem;
   #circleElem;
+  #hueUIElem;
   #hueElem;
   #hueCursorElem;
-  #hsv;
+  #alphaUIElem;
+  #alphaElem;
+  #alphaCursorElem;
+  #hsva;
   #skipHueUpdate;
   #skipSatLevelUpdate;
+  #skipAlphaUpdate;
+  #options = {
+    converters: identity,
+    alpha: false,
+  };
+  #convertInternalToHex;
+  #convertHexToInternal;
 
-  constructor(setter) {
+  constructor(setter, options) {
     super(createElem('div', {
       innerHTML: svg,
       className: 'muigui-no-scroll',
     }));
     this.#satLevelElem = this.domElement.children[0];
     this.#hueUIElem = this.domElement.children[1];
+    this.#alphaUIElem = this.domElement.children[2];
+    connectFillTargets(this.#satLevelElem);
+    connectFillTargets(this.#hueUIElem);
+    connectFillTargets(this.#alphaUIElem);
     this.#circleElem = this.$('.muigui-color-chooser-circle');
-    this.#hueElem = this.$('#muigui-color-chooser-hue');
-    this.#hueCursorElem = this.$('.muigui-color-chooser-cursor');
+    this.#hueElem = this.$('[data-src=muigui-color-chooser-hue]');
+    this.#hueCursorElem = this.$('.muigui-color-chooser-hue-cursor');
+    this.#alphaElem = this.$('[data-src=muigui-color-chooser-alpha]');
+    this.#alphaCursorElem = this.$('.muigui-color-chooser-alpha-cursor');
 
     const handleSatLevelChange = (e) => {
       const s = clamp(e.nx, 0, 1);
       const v = clamp(e.ny, 0, 1);
-      this.#hsv[1] = s;
-      this.#hsv[2] = (1 - v);
+      this.#hsva[1] = s;
+      this.#hsva[2] = (1 - v);
       this.#skipHueUpdate = true;
-      setter.setValue(floatRGBToHex(hsv01ToRGBFloat(this.#hsv)));
+      this.#skipAlphaUpdate = true;
+      const [valid, newV] = this.#from(this.#convertInternalToHex(this.#hsva));
+      if (valid) {
+        setter.setValue(newV);
+      }
     };
 
     const handleHueChange = (e) => {
       const h = clamp(e.nx, 0, 1);
-      this.#hsv[0] = h;
+      this.#hsva[0] = h;
       this.#skipSatLevelUpdate = true;
-      setter.setValue(floatRGBToHex(hsv01ToRGBFloat(this.#hsv)));
+      this.#skipAlphaUpdate = true;
+      const [valid, newV] = this.#from(this.#convertInternalToHex(this.#hsva));
+      if (valid) {
+        setter.setValue(newV);
+      }
+    };
+
+    const handleAlphaChange = (e) => {
+      const a = clamp(e.nx, 0, 1);
+      this.#hsva[3] = a;
+      this.#skipHueUpdate = true;
+      this.#skipSatLevelUpdate = true;
+      const [valid, newV] = this.#from(this.#convertInternalToHex(this.#hsva));
+      if (valid) {
+        setter.setValue(newV);
+      }
     };
 
     addTouchEvents(this.#satLevelElem, {
@@ -87,29 +153,45 @@ export default class ColorChooserView extends EditView {
       onDown: handleHueChange,
       onMove: handleHueChange,
     });
+    addTouchEvents(this.#alphaUIElem, {
+      onDown: handleAlphaChange,
+      onMove: handleAlphaChange,
+    });
+    this.setOptions(options);
   }
   updateDisplay(newV) {
-    if (!this.#hsv) {
-      this.#hsv = rgbFloatToHSV01(hexToFloatRGB(newV));
+    if (!this.#hsva) {
+      this.#hsva = this.#convertHexToInternal(this.#to(newV));
     }
     {
-      const [h, s, v] = rgbFloatToHSV01(hexToFloatRGB(newV));
+      const [h, s, v, a = 1] = this.#convertHexToInternal(this.#to(newV));
       // Don't copy the hue if it was un-computable.
       if (!this.#skipHueUpdate) {
-        this.#hsv[0] = s > 0.001 && v > 0.001 ? h : this.#hsv[0];
+        this.#hsva[0] = s > 0.001 && v > 0.001 ? h : this.#hsva[0];
       }
       if (!this.#skipSatLevelUpdate) {
-        this.#hsv[1] = s;
-        this.#hsv[2] = v;
+        this.#hsva[1] = s;
+        this.#hsva[2] = v;
+      }
+      if (!this.#skipAlphaUpdate) {
+        this.#hsva[3] = a;
       }
     }
     {
-      const [h, s, v] = this.#hsv;
+      const [h, s, v, a] = this.#hsva;
+      const [hue, sat, lum] = rgbaFloatToHsla01(hsva01ToRGBAFloat(this.#hsva));
+
       if (!this.#skipHueUpdate) {
         this.#hueCursorElem.setAttribute('transform', `translate(${h * 64}, 0)`);
-        this.#hueElem.children[0].setAttribute('stop-color', `hsl(${h * 360}, 0%, 100%)`);
-        this.#hueElem.children[1].setAttribute('stop-color', `hsl(${h * 360}, 100%, 50%)`);
       }
+      this.#hueElem.children[0].setAttribute('stop-color', `hsl(${hue * 360} 0% 100% / ${a})`);
+      this.#hueElem.children[1].setAttribute('stop-color', `hsl(${hue * 360} 100% 50% / ${a})`);
+      if (!this.#skipAlphaUpdate) {
+        this.#alphaCursorElem.setAttribute('transform', `translate(${a * 64}, 0)`);
+      }
+      this.#alphaElem.children[0].setAttribute('stop-color', `hsl(${hue * 360} ${sat * 100}% ${lum * 100}% / 0)`);
+      this.#alphaElem.children[1].setAttribute('stop-color', `hsl(${hue * 360} ${sat * 100}% ${lum * 100}% / 1)`);
+
       if (!this.#skipSatLevelUpdate) {
         this.#circleElem.setAttribute('cx', `${s * 64}`);
         this.#circleElem.setAttribute('cy', `${(1 - v) * 48}`);
@@ -117,5 +199,20 @@ export default class ColorChooserView extends EditView {
     }
     this.#skipHueUpdate = false;
     this.#skipSatLevelUpdate = false;
+    this.#skipAlphaUpdate = false;
+  }
+  setOptions(options) {
+    copyExistingProperties(this.#options, options);
+    const {converters: {to, from}, alpha} = this.#options;
+    this.#alphaUIElem.style.display = alpha ? '' : 'none';
+    this.#convertInternalToHex = alpha
+       ? v => floatRGBAToHex(hsva01ToRGBAFloat(v))
+       : v => floatRGBToHex(hsv01ToRGBFloat(v));
+    this.#convertHexToInternal = alpha
+       ? v => rgbaFloatToHSVA01(hexToFloatRGBA(v))
+       : v => rgbFloatToHSV01(hexToFloatRGB(v));
+    this.#to = to;
+    this.#from = from;
+    return this;
   }
 }

package/src/views/NumberView.js

@@ -22,15 +22,22 @@ export default class NumberView extends EditView {
     const wheelHelper = createWheelHelper();
     super(createElem('input', {
       type: 'number',
-      onInput: () => this.#handleInput(setValue, true),
-      onChange: () => this.#handleInput(setFinalValue, false),
+      onInput: () => {
+        this.#handleInput(setValue, true);
+      },
+      onChange: () => {
+        this.#handleInput(setFinalValue, false);
+      },
       onWheel: e => {
         e.preventDefault();
         const {min, max, step} = this.#options;
         const delta = wheelHelper(e, step);
         const v = parseFloat(this.domElement.value);
         const newV = clamp(stepify(v + delta, v => v, step), min, max);
-        setter.setValue(newV);
+        const [valid, outV] = this.#from(newV);
+        if (valid) {
+          setter.setValue(outV);
+        }
       },
     }));
     this.setOptions(options);

package/src/views/RadioGridView.js

@@ -15,7 +15,7 @@ export default class RadioGridView extends EditView {
           type: 'radio',
           name,
           value: ndx,
-          onChange: function() {
+          onChange: function () {
             if (this.checked) {
               setter.setFinalValue(that.#values[this.value]);
             }
@@ -24,12 +24,13 @@ export default class RadioGridView extends EditView {
         createElem('button', {
           type: 'button',
           textContent: key,
-          onClick: function() {
+          onClick: function () {
             this.previousElementSibling.click();
           },
         }),
       ]);
     })));
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
     this.#values = values;
     this.cols(cols);

package/src/views/TextView.js

@@ -16,8 +16,12 @@ export default class TextView extends EditView {
     const setFinalValue = setter.setFinalValue.bind(setter);
     super(createElem('input', {
       type: 'text',
-      onInput: () => this.#handleInput(setValue, true),
-      onChange: () => this.#handleInput(setFinalValue, false),
+      onInput: () => {
+        this.#handleInput(setValue, true);
+      },
+      onChange: () => {
+        this.#handleInput(setFinalValue, false);
+      },
     }));
     this.setOptions(options);
   }

package/src/views/{View.js → View.ts}

@@ -1,56 +1,58 @@
 import { removeArrayElem } from '../libs/utils.js';
 
 export default class View {
-  #childDestElem;
-  #views = [];
+  domElement: HTMLElement;
 
-  constructor(elem) {
+  #childDestElem: HTMLElement;
+  #views: View[] = [];
+
+  constructor(elem: HTMLElement) {
     this.domElement = elem;
     this.#childDestElem = elem;
   }
-  addElem(elem) {
+  addElem(elem: HTMLElement) {
     this.#childDestElem.appendChild(elem);
     return elem;
   }
-  removeElem(elem) {
+  removeElem(elem: HTMLElement) {
     this.#childDestElem.removeChild(elem);
     return elem;
   }
-  pushSubElem(elem) {
+  pushSubElem(elem: HTMLElement) {
     this.#childDestElem.appendChild(elem);
     this.#childDestElem = elem;
   }
   popSubElem() {
-    this.#childDestElem = this.#childDestElem.parentElement;
+    this.#childDestElem = this.#childDestElem.parentElement!;
   }
-  add(view) {
+  add(view: View) {
     this.#views.push(view);
     this.addElem(view.domElement);
     return view;
   }
-  remove(view) {
+  remove(view: View) {
     this.removeElem(view.domElement);
     removeArrayElem(this.#views, view);
     return view;
   }
-  pushSubView(view) {
+  pushSubView(view: View) {
     this.pushSubElem(view.domElement);
   }
   popSubView() {
     this.popSubElem();
   }
-  setOptions(options) {
+  setOptions(options: any) {
     for (const view of this.#views) {
       view.setOptions(options);
     }
   }
-  updateDisplayIfNeeded(newV, ignoreCache) {
+  updateDisplayIfNeeded(newV: any, ignoreCache?: boolean) {
     for (const view of this.#views) {
       view.updateDisplayIfNeeded(newV, ignoreCache);
     }
     return this;
   }
-  $(selector) {
+  $(selector: string) {
     return this.domElement.querySelector(selector);
   }
 }