From 863cc49600d0eb6ae62e8e5c466b3a5c966f8d0a Mon Sep 17 00:00:00 2001 From: Mikkel Rasmussen Date: Fri, 15 Mar 2024 20:28:42 +0100 Subject: [PATCH 1/5] Add support for `min`, `max` and `step` --- src/plugins/input-number/index.ts | 51 +++++++++++++++++++++++-------- 1 file changed, 38 insertions(+), 13 deletions(-) diff --git a/src/plugins/input-number/index.ts b/src/plugins/input-number/index.ts index 40ae01e..f034b52 100644 --- a/src/plugins/input-number/index.ts +++ b/src/plugins/input-number/index.ts @@ -20,6 +20,8 @@ class HSInputNumber private readonly increment: HTMLElement | null; private readonly decrement: HTMLElement | null; private inputValue: number | null; + private readonly minInputValue: number | null; + private readonly maxInputValue: number | null; constructor(el: HTMLElement, options?: IInputNumberOptions) { super(el, options); @@ -29,7 +31,15 @@ class HSInputNumber this.el.querySelector('[data-hs-input-number-increment]') || null; this.decrement = this.el.querySelector('[data-hs-input-number-decrement]') || null; - this.inputValue = this.input ? parseInt(this.input.value) : 0; + + this.inputValue = 0; + this.minInputValue = null; + this.maxInputValue = null; + if (this.input) { + this.inputValue = !isNaN(parseInt(this.input.value)) ? parseInt(this.input.value) : 0; + this.minInputValue = ('hsInputNumberMin' in this.input.dataset) ? parseInt(this.input.dataset.hsInputNumberMin) : null; + this.maxInputValue = ('hsInputNumberMax' in this.input.dataset) ? parseInt(this.input.dataset.hsInputNumberMax) : null; + } this.init(); } @@ -45,9 +55,9 @@ class HSInputNumber if (this.increment) this.buildIncrement(); if (this.decrement) this.buildDecrement(); - if (this.inputValue <= 0) { - this.inputValue = 0; - this.input.value = '0'; + if (this.minInputValue && this.inputValue <= this.minInputValue) { + this.inputValue = this.minInputValue; + this.input.value = this.minInputValue.toString(); this.changeValue(); } @@ -61,38 +71,45 @@ class HSInputNumber private buildIncrement() { this.increment.addEventListener('click', () => { - this.changeValue('increment'); + const step = ('hsInputNumberStep' in this.increment.dataset) ? parseInt(this.increment.dataset.hsInputNumberStep) : 1; + this.changeValue('increment', step); }); } private buildDecrement() { this.decrement.addEventListener('click', () => { - this.changeValue('decrement'); + const step = ('hsInputNumberStep' in this.decrement.dataset) ? parseInt(this.decrement.dataset.hsInputNumberStep) : 1; + this.changeValue('decrement', step); }); } - private changeValue(event = 'none') { + private changeValue(event = 'none', step = 1) { const payload = { inputValue: this.inputValue }; + const minInputValue = this.minInputValue || Number.MIN_SAFE_INTEGER; + const maxInputValue = this.maxInputValue || Number.MAX_SAFE_INTEGER; + this.inputValue = isNaN(this.inputValue) ? 0 : this.inputValue; switch (event) { case 'increment': - this.inputValue += 1; + const incrementedResult = this.inputValue + step; + this.inputValue = incrementedResult >= minInputValue && incrementedResult <= maxInputValue ? incrementedResult : maxInputValue; this.input.value = this.inputValue.toString(); break; case 'decrement': - this.inputValue -= this.inputValue <= 0 ? 0 : 1; + const decrementedResult = this.inputValue - step; + this.inputValue = decrementedResult >= minInputValue && decrementedResult <= maxInputValue ? decrementedResult : minInputValue; this.input.value = this.inputValue.toString(); break; default: - this.inputValue = - parseInt(this.input.value) <= 0 ? 0 : parseInt(this.input.value); - if (this.inputValue <= 0) this.input.value = this.inputValue.toString(); + const defaultResult = isNaN(parseInt(this.input.value)) ? 0 : parseInt(this.input.value); + this.inputValue = defaultResult >= maxInputValue ? maxInputValue : defaultResult <= minInputValue ? minInputValue : defaultResult; + if (this.inputValue <= minInputValue) this.input.value = this.inputValue.toString(); break; } payload.inputValue = this.inputValue; - if (this.inputValue === 0) { + if (this.inputValue === minInputValue) { this.el.classList.add('disabled'); if (this.decrement) this.disableButtons('decrement'); } else { @@ -100,6 +117,14 @@ class HSInputNumber if (this.decrement) this.enableButtons('decrement'); } + if (this.inputValue === maxInputValue) { + this.el.classList.add('disabled'); + if (this.increment) this.disableButtons('increment'); + } else { + this.el.classList.remove('disabled'); + if (this.increment) this.enableButtons('increment'); + } + this.fireEvent('change', payload); dispatch('change.hs.inputNumber', this.el, payload); } From c1b2fd02168805e9f49d2a4cd206a2bba7e4c58d Mon Sep 17 00:00:00 2001 From: Mikkel Rasmussen Date: Fri, 15 Mar 2024 21:51:46 +0100 Subject: [PATCH 2/5] Fix logical operator --- src/plugins/input-number/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/input-number/index.ts b/src/plugins/input-number/index.ts index f034b52..43e63b1 100644 --- a/src/plugins/input-number/index.ts +++ b/src/plugins/input-number/index.ts @@ -85,8 +85,8 @@ class HSInputNumber private changeValue(event = 'none', step = 1) { const payload = { inputValue: this.inputValue }; - const minInputValue = this.minInputValue || Number.MIN_SAFE_INTEGER; - const maxInputValue = this.maxInputValue || Number.MAX_SAFE_INTEGER; + const minInputValue = this.minInputValue ?? Number.MIN_SAFE_INTEGER; + const maxInputValue = this.maxInputValue ?? Number.MAX_SAFE_INTEGER; this.inputValue = isNaN(this.inputValue) ? 0 : this.inputValue; switch (event) { From a4892a72297e3902b2cf70889b0f3efbaf63258f Mon Sep 17 00:00:00 2001 From: Mikkel Rasmussen Date: Thu, 28 Mar 2024 15:16:05 +0100 Subject: [PATCH 3/5] Change from attributes to options --- src/plugins/input-number/index.ts | 29 ++++++++++++++++---------- src/plugins/input-number/interfaces.ts | 3 +++ 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/plugins/input-number/index.ts b/src/plugins/input-number/index.ts index 43e63b1..acbca97 100644 --- a/src/plugins/input-number/index.ts +++ b/src/plugins/input-number/index.ts @@ -22,6 +22,7 @@ class HSInputNumber private inputValue: number | null; private readonly minInputValue: number | null; private readonly maxInputValue: number | null; + private readonly step: number; constructor(el: HTMLElement, options?: IInputNumberOptions) { super(el, options); @@ -33,14 +34,21 @@ class HSInputNumber this.el.querySelector('[data-hs-input-number-decrement]') || null; this.inputValue = 0; - this.minInputValue = null; - this.maxInputValue = null; if (this.input) { this.inputValue = !isNaN(parseInt(this.input.value)) ? parseInt(this.input.value) : 0; - this.minInputValue = ('hsInputNumberMin' in this.input.dataset) ? parseInt(this.input.dataset.hsInputNumberMin) : null; - this.maxInputValue = ('hsInputNumberMax' in this.input.dataset) ? parseInt(this.input.dataset.hsInputNumberMax) : null; } + const data = this.el.dataset.hsInputNumber; + const dataOptions: IInputNumberOptions = data ? JSON.parse(data) : { step: 1 }; + const concatOptions = { + ...dataOptions, + ...options + }; + + this.minInputValue = ('min' in concatOptions) ? concatOptions.min : null; + this.maxInputValue = ('max' in concatOptions) ? concatOptions.max : null; + this.step = ('step' in concatOptions && concatOptions.step > 0) ? concatOptions.step : 1; + this.init(); } @@ -71,32 +79,31 @@ class HSInputNumber private buildIncrement() { this.increment.addEventListener('click', () => { - const step = ('hsInputNumberStep' in this.increment.dataset) ? parseInt(this.increment.dataset.hsInputNumberStep) : 1; - this.changeValue('increment', step); + this.changeValue('increment'); }); } private buildDecrement() { this.decrement.addEventListener('click', () => { - const step = ('hsInputNumberStep' in this.decrement.dataset) ? parseInt(this.decrement.dataset.hsInputNumberStep) : 1; - this.changeValue('decrement', step); + this.changeValue('decrement'); }); } - private changeValue(event = 'none', step = 1) { + private changeValue(event = 'none') { const payload = { inputValue: this.inputValue }; const minInputValue = this.minInputValue ?? Number.MIN_SAFE_INTEGER; const maxInputValue = this.maxInputValue ?? Number.MAX_SAFE_INTEGER; + this.inputValue = isNaN(this.inputValue) ? 0 : this.inputValue; switch (event) { case 'increment': - const incrementedResult = this.inputValue + step; + const incrementedResult = this.inputValue + this.step; this.inputValue = incrementedResult >= minInputValue && incrementedResult <= maxInputValue ? incrementedResult : maxInputValue; this.input.value = this.inputValue.toString(); break; case 'decrement': - const decrementedResult = this.inputValue - step; + const decrementedResult = this.inputValue - this.step; this.inputValue = decrementedResult >= minInputValue && decrementedResult <= maxInputValue ? decrementedResult : minInputValue; this.input.value = this.inputValue.toString(); break; diff --git a/src/plugins/input-number/interfaces.ts b/src/plugins/input-number/interfaces.ts index 1a519b5..5bb51e8 100644 --- a/src/plugins/input-number/interfaces.ts +++ b/src/plugins/input-number/interfaces.ts @@ -1,4 +1,7 @@ export interface IInputNumberOptions { + min?: number; + max?: number; + step?: number; } export interface IInputNumber { From 7c0dcdca898eaf6d57a86e44fe9c3851ea7632a0 Mon Sep 17 00:00:00 2001 From: Mikkel Rasmussen Date: Sun, 31 Mar 2024 01:47:33 +0100 Subject: [PATCH 4/5] Default `min` to 0 --- src/plugins/input-number/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/input-number/index.ts b/src/plugins/input-number/index.ts index acbca97..af862f3 100644 --- a/src/plugins/input-number/index.ts +++ b/src/plugins/input-number/index.ts @@ -45,7 +45,7 @@ class HSInputNumber ...options }; - this.minInputValue = ('min' in concatOptions) ? concatOptions.min : null; + this.minInputValue = ('min' in concatOptions) ? concatOptions.min : 0; this.maxInputValue = ('max' in concatOptions) ? concatOptions.max : null; this.step = ('step' in concatOptions && concatOptions.step > 0) ? concatOptions.step : 1; From fefbc42c4ed5ef056f856860929c68ab6ea542c1 Mon Sep 17 00:00:00 2001 From: Mikkel Rasmussen Date: Sun, 31 Mar 2024 18:56:12 +0200 Subject: [PATCH 5/5] Remove `step` from standard data options, use default value instead --- src/plugins/input-number/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/input-number/index.ts b/src/plugins/input-number/index.ts index af862f3..caccf72 100644 --- a/src/plugins/input-number/index.ts +++ b/src/plugins/input-number/index.ts @@ -39,7 +39,7 @@ class HSInputNumber } const data = this.el.dataset.hsInputNumber; - const dataOptions: IInputNumberOptions = data ? JSON.parse(data) : { step: 1 }; + const dataOptions: IInputNumberOptions = data ? JSON.parse(data) : {}; const concatOptions = { ...dataOptions, ...options