<template>
	<div class="wrapper">
		<span v-if="label">{{label}}: </span>
		<input v-model="editValue" @change="onChange"></input>
	</div>
</template>

<script>
	export default {
		name: "SInput",
		props: {
			label: String,
			value: String | Number,
			type: {
				type: String,
				default: 'string',
			}
		},
		data() {
			return {
				editValue: this.value,
			}
		},
		watch: {
			value(v) {
				this.editValue = v;
			}
		},
		methods: {
			onChange() {
				let v = this.editValue;
				if(this.type === 'number'){
					v = parseInt(v);
				}
				this.$emit('input', v);
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		margin-right: 5px;
		display: flex;
		align-items: center;
	}
</style>