@acanto/core-forms - npm Package Compare versions

Comparing version 0.0.40 to 0.0.41

helpers.ts

@@ -186,1 +186,13 @@ import "@acanto/core-polyfills/closest";
 }
+
+/**
+ * Trigger `change` event (and therefore fire its `onchange` listeners) on an
+ * input element whose value was changed programmatically, e.g. the `spinner` or
+ * the `range` form controls.
+ */
+export function triggerEvent(
+  $input: HTMLInputElement,
+  eventName: string = "change"
+) {
+  $input.dispatchEvent(new Event(eventName));
+}

package.json

 {
   "name": "@acanto/core-forms",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "author": "Acanto <[e-mail]> (https://acanto.agency/)",
@@ -31,3 +31,3 @@ "license": "ISC",
   ],
-  "gitHead": "4a535ee9ef1c6303220803d4a9e04c1ef1a18080"
+  "gitHead": "2536ecbe7b605fbc03d756d93d67dbccdcb52902"
 }

range/index.js

@@ -11,2 +11,3 @@ import "@acanto/core-polyfills/closest";
 } from "@acanto/core-dom";
+import { triggerEvent } from "../helpers";
 import "./common.scss";
@@ -415,3 +416,3 @@
   if (this.startValue !== this.stopValue) {
-    this.input.dispatchEvent(new Event("change"));
+    triggerEvent(this.input);
   }
@@ -698,3 +699,3 @@
     if (!this.nativeEvent) {
-      this.input.dispatchEvent(new Event("input"));
+      triggerEvent(this.input, "input");
     }
@@ -701,0 +702,0 @@

spinner/index.js

@@ -1,2 +0,11 @@
-import { $, $$, forEach, on, off } from "@acanto/core-dom";
+import {
+  $,
+  $$,
+  forEach,
+  addClass,
+  removeClass,
+  on,
+  off,
+} from "@acanto/core-dom";
+import { triggerEvent } from "../helpers";
 import "./index.scss";
@@ -35,3 +44,3 @@
  */
-export default function Spinner($root) {
+export function Spinner($root) {
   const $btnIncrement = /** @type {HTMLButtonElement} */ ($(
@@ -75,2 +84,29 @@ ".spinnerInc",
 
+  manageBtnStatus();
+
+  function enableBtn($btn) {
+    $btn.disabled = false;
+    removeClass($btn, "is-disabled");
+  }
+
+  function disableBtn($btn) {
+    $btn.disabled = true;
+    addClass($btn, "is-disabled");
+  }
+
+  function manageBtnStatus(event) {
+    const current = parseFloat($input.value);
+
+    if (current === minValue) {
+      disableBtn($btnDecrement);
+    } else {
+      enableBtn($btnDecrement);
+    }
+    if (current === maxValue) {
+      disableBtn($btnIncrement);
+    } else {
+      enableBtn($btnIncrement);
+    }
+  }
+
   function handleClickIncrease(event) {
@@ -83,10 +119,7 @@ newValue = parseFloat($input.value) + step;
       $input.value = newValue.toString();
+      triggerEvent($input);
       // button is active
-      $btnDecrement.disabled = false;
+      enableBtn($btnIncrement);
     }
-    // if the value is equal to the max value
-    if (parseFloat($input.value) === maxValue || newValue > maxValue) {
-      // disable the button
-      $btnIncrement.disabled = true;
-    }
+    manageBtnStatus();
     event.preventDefault();
@@ -100,8 +133,5 @@ }
       $input.value = newValue.toString();
-      $btnIncrement.disabled = false;
+      enableBtn($btnDecrement);
     }
-    // if the input value is the min value, add disabled property to the button
-    if (parseFloat($input.value) === minValue || newValue < minValue) {
-      $btnDecrement.disabled = true;
-    }
+    manageBtnStatus();
     event.preventDefault();
@@ -108,0 +138,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

111912

increased by0.91%

Lines of code

1703

increased by2.22%

No dependency changes