Only disable buttons in number-stepper when they're at min/max

This commit is contained in:
redphx
2024-07-17 06:49:19 +07:00
parent 44083f2469
commit d7dc6931d6
4 changed files with 19 additions and 12 deletions

View File

@@ -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;
}