enh(NcInputField): Support numeric values - if numeric also emit numeric

If the type is set to number and a number is passed as value also emit a number instead of a string.

Signed-off-by: Ferdinand Thiessen <[email protected]>

src/components/NcInputField/NcInputField.vue

@@ -53,7 +53,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 						'input-field__input--error': error,
 						'input-field__input--pill': pill,
 					}]"
-				:value="value"
+				:value="`${value}`"
 				v-on="$listeners"
 				@input="handleInput">
 			<!-- Label -->
@@ -132,9 +132,10 @@ export default {
 	props: {
 		/**
 		 * The value of the input field
+		 * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'
 		 */
 		value: {
-			type: String,
+			type: [String, Number],
 			required: true,
 		},
 
@@ -331,7 +332,7 @@ export default {
 		},
 
 		handleInput(event) {
-			this.$emit('update:value', event.target.value)
+			this.$emit('update:value', this.type === 'number' && typeof this.value === 'number' ? Number(event.target.value) : event.target.value)
 		},
 
 		handleTrailingButtonClick(event) {

tests/unit/components/NcInputField/NcInputField.spec.ts

@@ -0,0 +1,50 @@
+import { shallowMount } from '@vue/test-utils'
+import NcInputField from '../../../../src/components/NcInputField/index.js'
+
+
+describe('NcInputField', () => {
+	it('should emit text when type is text', () => {
+		const wrapper = shallowMount(NcInputField, {
+			propsData: {
+				value: '',
+				type: 'text',
+			},
+		})
+
+		const input = wrapper.find('input').element as HTMLInputElement
+		input.value = 'text'
+		input.dispatchEvent(new InputEvent('input'))
+
+		expect(wrapper.emitted('update:value')).toEqual([['text']])
+	})
+
+	it('should emit text when type is number but value is text', () => {
+		const wrapper = shallowMount(NcInputField, {
+			propsData: {
+				value: '1',
+				type: 'number',
+			},
+		})
+
+		const input = wrapper.find('input').element as HTMLInputElement
+		input.value = '2'
+		input.dispatchEvent(new InputEvent('input'))
+
+		expect(wrapper.emitted('update:value')).toEqual([['2']])
+	})
+
+	it('should emit a number when type is number and value is number', () => {
+		const wrapper = shallowMount(NcInputField, {
+			propsData: {
+				value: 1,
+				type: 'number',
+			},
+		})
+
+		const input = wrapper.find('input').element as HTMLInputElement
+		input.value = '2'
+		input.dispatchEvent(new InputEvent('input'))
+
+		expect(wrapper.emitted('update:value')).toEqual([[2]])
+	})
+})