Adding more input types for application form

src/components/ApplicationInputSwitch.vue

@@ -0,0 +1,27 @@
+<template>
+	<div>
+		<LimitedTextField v-if="type === 'text-box-limited'" :highlight="highlight"/>
+		<TextField v-else-if="type === 'text-box'" />
+		<LineInput v-else-if="type === 'line'" />
+
+		<span v-else>= OOPS, this input type '{{ type }}' has to be implemented.</span>
+	</div>
+</template>
+
+<script>
+	import LimitedTextField from './inputtypes/LimitedTextField.vue'
+	import TextField from './inputtypes/TextField.vue'
+	import LineInput from './inputtypes/LineInput.vue'
+
+	export default {
+		props: [
+			'type',
+			'highlight',
+		],
+		components: {
+			LimitedTextField,
+			TextField,
+			LineInput,
+		},
+	}
+</script>

src/components/SimpleProgressBar.vue

@@ -8,10 +8,6 @@
 
 <script>
 	export default {
-		data() {
-			return {
-			}
-		},
 		props: [
 			'count',
 			'max',

src/components/inputtypes/LimitedTextField.vue

@@ -28,9 +28,6 @@
 			}
 		},
 
-		mounted() {
-		},
-
 		components: {
 			SimpleProgressBar,
 		},
@@ -40,12 +37,13 @@
 <style scoped>
 	.textarea {
 		width: 100%;
-		color: #fff;
-		resize: vertical;
-		min-height: 1.2em;
 		height: 1.2em;
-		border: 1px solid #aaa;
+		min-height: 1.2em;
+		resize: vertical;
 		margin: auto;
+		
+		color: #fff;
+		border: 1px solid #aaa;
 		background-color: #222;
 	}
 

src/components/inputtypes/LineInput.vue

@@ -0,0 +1,21 @@
+<template>
+	<div class="width">
+		<input class="textarea" type="text" />
+	</div>
+</template>
+
+<style scoped>
+	.textarea {
+		width: 50%;
+		margin: auto;
+
+		color: #fff;
+		border: 1px solid #aaa;
+		background-color: #222;
+	}
+
+	.width {
+		width: 100%;
+		max-width: 60em;
+	}
+</style>

src/components/inputtypes/TextField.vue

@@ -0,0 +1,24 @@
+<template>
+	<div class="width">
+		<textarea class="textarea" type="text" />
+	</div>
+</template>
+
+<style scoped>
+	.textarea {
+		width: 100%;
+		height: 1.2em;
+		min-height: 1.2em;
+		resize: vertical;
+		margin: auto;
+		
+		color: #fff;
+		border: 1px solid #aaa;
+		background-color: #222;
+	}
+
+	.width {
+		width: 100%;
+		max-width: 60em;
+	}
+</style>

src/views/CreateApplication.vue

@@ -7,7 +7,7 @@
 				<span class="question">{{ element.text }}</span>
 				<span v-if="element.optional"> (Optional)</span>
 				<br>
-				<LimitedTextField class="textfield" :highlight="highlight"></LimitedTextField>
+				<ApplicationInputSwitch class="textfield" :highlight="highlight" :type="element.type"></ApplicationInputSwitch>
 				<span class="hint">{{ element.hint }}</span>
 			</div>
 			<button @click="update">Create/Update</button>
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-	import LimitedTextField from '../components/inputtypes/LimitedTextField.vue'
+	import ApplicationInputSwitch from '../components/ApplicationInputSwitch.vue'
 
 	export default {
 		data () {
@@ -44,7 +44,7 @@
 			},
 		},
 		components: {
-			LimitedTextField,
+			ApplicationInputSwitch,
 		},
 	}
 </script>