From d7dc6931d6ae2882636d8f52527aafc2b7a0df4a Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Wed, 17 Jul 2024 06:49:19 +0700
Subject: [PATCH] Only disable buttons in number-stepper when they're at
 min/max

---
 src/assets/css/button.styl         |  6 ++++++
 src/assets/css/number-stepper.styl |  3 ++-
 src/assets/css/web-components.styl |  6 ------
 src/utils/settings.ts              | 16 +++++++++++-----
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/assets/css/button.styl b/src/assets/css/button.styl
index d154571..e203f10 100644
--- a/src/assets/css/button.styl
+++ b/src/assets/css/button.styl
@@ -111,3 +111,9 @@ a.bx-button {
         text-align: center;
     }
 }
+
+button.bx-inactive {
+    pointer-events: none;
+    opacity: 0.2;
+    background: transparent !important;
+}
diff --git a/src/assets/css/number-stepper.styl b/src/assets/css/number-stepper.styl
index 9a1c6ec..6963747 100644
--- a/src/assets/css/number-stepper.styl
+++ b/src/assets/css/number-stepper.styl
@@ -6,13 +6,14 @@
         min-width: 40px;
         font-family: var(--bx-monospaced-font);
         font-size: 12px;
+        margin: 0 4px;
     }
 
     button {
         border: none;
         width: 24px;
         height: 24px;
-        margin: 0 4px;
+        margin: 0;
         line-height: 24px;
         background-color: var(--bx-default-button-color);
         color: #fff;
diff --git a/src/assets/css/web-components.styl b/src/assets/css/web-components.styl
index 020ceed..1dc7e24 100644
--- a/src/assets/css/web-components.styl
+++ b/src/assets/css/web-components.styl
@@ -84,12 +84,6 @@
         font-size: 12px;
         font-family: var(--bx-monospaced-font);
 
-        &.bx-inactive {
-            pointer-events: none;
-            opacity: 0.2;
-            background: transparent !important;
-        }
-
         span {
             line-height: unset;
         }
diff --git a/src/utils/settings.ts b/src/utils/settings.ts
index c078154..6403f52 100644
--- a/src/utils/settings.ts
+++ b/src/utils/settings.ts
@@ -167,8 +167,8 @@ export class SettingElement {
         };
 
         const updateButtonsVisibility = () => {
-            $btnDec.classList.toggle('bx-hidden', controlValue === MIN);
-            $btnInc.classList.toggle('bx-hidden', controlValue === MAX);
+            $btnDec.classList.toggle('bx-inactive', controlValue === MIN);
+            $btnInc.classList.toggle('bx-inactive', controlValue === MAX);
         }
 
         const $wrapper = CE('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`},
@@ -200,10 +200,16 @@ export class SettingElement {
 
             $range.addEventListener('input', e => {
                 value = parseInt((e.target as HTMLInputElement).value);
+                const valueChanged = controlValue !== value;
+
+                if (!valueChanged) {
+                    return;
+                }
+
                 controlValue = value;
                 updateButtonsVisibility();
-
                 $text.textContent = renderTextValue(value);
+
                 !(e as any).ignoreOnChange && onChange && onChange(e, value);
             });
             $wrapper.appendChild($range);
@@ -234,10 +240,10 @@ export class SettingElement {
 
         if (options.disabled) {
             $btnInc.disabled = true;
-            $btnInc.classList.add('bx-hidden');
+            $btnInc.classList.add('bx-inactive');
 
             $btnDec.disabled = true;
-            $btnDec.classList.add('bx-hidden');
+            $btnDec.classList.add('bx-inactive');
             return $wrapper;
         }