fixup! fixup! fix import file

Signed-off-by: GretaD <gretadoci@gmail.com>

src/components/SettingsInputText/SettingsInputText.vue

@@ -21,14 +21,19 @@
   -->
 
 <template>
-	<form>
+	<form ref="form"
+		:disabled="disabled"
+		@submit.prevent="onSubmit">
 		<div class="input-wrapper">
-			<label :for="id">{{ label }}>
-				<input :id="id" type="text" :value="inputVal"
-					:disabled="disabled" @input="$emit('input', $event.target.value)">
-				<input type="submit" class="icon-confirm" value=""
-					@click="$emit('update', inputVal)">
-			</label>
+			<label :for="id" class="action-input__label">{{ label }}</label>
+			<input :id="id"
+				type="text"
+				:value="value"
+				:disabled="disabled"
+				@input="onInput"
+				@change="onChange">
+			<input :id="idSubmit" type="submit" class="action-input__submit">
+			<label v-show="!disabled" :for="idSubmit" class="action-input__label" />
 			<p v-if="hint" class="hint">
 				{{ hint }}
 			</p>
@@ -46,31 +51,31 @@ export default {
 		 */
 		label: {
 			type: String,
-			required: true
+			required: true,
 		},
 
 		/**
 		* hint of the select group input
 		*/
 		hint: {
 			type: String,
-			default: ''
+			default: '',
 		},
 
 		/**
 		* value of the select group input
 		 */
 		value: {
 			type: String,
-			default: ''
+			default: '',
 		},
 
 		/**
 		 * disabled state of the settings select group input
 		 */
 		disabled: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 
 		/**
@@ -79,22 +84,48 @@ export default {
 		id: {
 			type: String,
 			default: () => 'settings-input-text-' + GenRandomId(),
-			validator: id => id.trim() !== ''
-		}
-	},
-	data() {
-		return {
-			inputVal: this.value
-		}
+			validator: id => id.trim() !== '',
+		},
 	},
 	computed: {
 		/**
-		* @returns {string}
-		*/
-		GenRandomId() {
-			return 'settings-input-text-' + this.GenRandomId
-		}
-	}
+		 * @returns {string}
+		 */
+		idSubmit() {
+			return this.id + '-submit'
+		},
+	},
+	methods: {
+		onInput(event) {
+			this.$emit('input', event)
+			/**
+			 * Emitted when the inputs value changes
+			 * @type {string}
+			 */
+			this.$emit('update:value', event.target.value)
+		},
+		onSubmit(event) {
+			event.preventDefault()
+			event.stopPropagation()
+			if (!this.disabled) {
+				/**
+				 * Emitted on submit of the input field
+				 * @type {Event}
+				 */
+				this.$emit('submit', event)
+			} else {
+				// ignore submit
+				return false
+			}
+		},
+		onChange(event) {
+			/**
+			 * Emitted on change of the input field
+			 * @type {Event}
+			 */
+			this.$emit('change', event)
+		},
+	},
 }
 </script>
 
@@ -108,6 +139,23 @@ export default {
 		flex-wrap: wrap;
 		width: 100%;
 		max-width: 400px;
+		&__form {
+			display: flex;
+			align-items: center;
+			flex: 1 1 auto;
+
+			margin: $input-margin 0;
+			padding-right: $icon-margin;
+		}
+
+		&__submit {
+			position: absolute;
+			left: -10000px;
+			top: auto;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+		}
 
 		&__label {
 			display: flex;
@@ -143,10 +191,11 @@ export default {
 		&:disabled {
 			cursor: default;
 		}
-	}
 
-	.hint {
-		color: var(--color-text-lighter);
+			.hint {
+				color: var(--color-text-lighter);
+			}
+		}
 	}
 
 </style>

src/components/SettingsInputText/index.js

@@ -22,4 +22,3 @@
 import SettingsInputText from './SettingsInputText'
 
 export default SettingsInputText
-export { SettingsInputText }