Adding Links input to CreateApplication

src/components/ApplicationInputSwitch.vue

@@ -2,6 +2,7 @@
 	<div>
 		<LimitedTextField v-if="type === 'text-box-limited'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 		<TextField v-else-if="type === 'text-box'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
+		<Links v-else-if="type === 'links'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 		<LineInput v-else-if="type === 'line'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 		<Age v-else-if="type === 'age'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 
@@ -12,6 +13,7 @@
 <script>
 	import LimitedTextField from './inputtypes/LimitedTextField.vue'
 	import TextField from './inputtypes/TextField.vue'
+	import Links from './inputtypes/Links.vue'
 	import LineInput from './inputtypes/LineInput.vue'
 	import Age from './inputtypes/Age.vue'
 
@@ -42,6 +44,7 @@
 		components: {
 			LimitedTextField,
 			TextField,
+			Links,
 			LineInput,
 			Age,
 		},

src/components/inputtypes/Links.vue

@@ -0,0 +1,72 @@
+<template>
+	<div class="width">
+		<div class="linkline" v-for="n in links.length">
+			<input class="line" type="text" @input="change(n, $event.target.value)" :ref="n"/>
+		</div>
+	</div>
+</template>
+
+<script>
+	//TODO: Add validation, a link should match a regex.
+	export default {
+		data() {
+			return {
+				links: [''],
+			}
+		},
+		methods: {
+			getContent() {
+				let links = [...this.links]
+				links.splice(links.length -1, 1)
+				return links
+			},
+			change(index, content) {
+				this.links[index-1] = content
+
+				if(content === '') {
+					if(this.links.length > 1) {
+						this.links.splice(index-1, 1)
+						this.updateFields()
+					}
+				} else if(index === this.links.length) {
+					this.links.push('')
+				}
+
+				this.$emit('update')
+			},
+			updateFields() {
+				let counter = 0
+				for(let i = 1; i <= this.links.length; i++) {
+					let el = this.$refs[i][0]
+					el.value = this.links[counter++]
+				}
+			},
+		},
+		computed: {
+			isOkay() {
+				return true
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	.line {
+		width: 100%;
+		min-height: 1.2em;
+		resize: vertical;
+		margin: auto;
+		margin-top: 2px;
+		
+		color: #fff;
+		border: 1px solid #aaa;
+		background-color: #222;
+
+		height: 1.2em;
+	}
+
+	.width {
+		width: 100%;
+		max-width: 60em;
+	}
+</style>