Merge pull request #306 from dotmra/add-steps-and-min-max

Add support for `min`, `max` and `step`

src/plugins/input-number/index.ts

@@ -20,6 +20,9 @@ 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;
+	private readonly step: number;
 
 	constructor(el: HTMLElement, options?: IInputNumberOptions) {
 		super(el, options);
@@ -29,7 +32,22 @@ 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;
+		if (this.input) {
+			this.inputValue = !isNaN(parseInt(this.input.value)) ? parseInt(this.input.value) : 0;
+		}
+
+		const data = this.el.dataset.hsInputNumber;
+		const dataOptions: IInputNumberOptions = data ? JSON.parse(data) : {};
+		const concatOptions = {
+			...dataOptions,
+			...options
+		};
+
+		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;
 
 		this.init();
 	}
@@ -45,9 +63,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();
 		}
@@ -73,33 +91,47 @@ class HSInputNumber
 
 	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':
-				this.inputValue += 1;
+				const incrementedResult = this.inputValue + this.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 - this.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 {
 			this.el.classList.remove('disabled');
 			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);
 	}

src/plugins/input-number/interfaces.ts

@@ -1,4 +1,7 @@
 export interface IInputNumberOptions {
+	min?: number;
+	max?: number;
+	step?: number;
 }
 
 export interface IInputNumber {