rs-frontend/src/components/inputtypes/LimitedTextField.vue

<template>
	<div class="width">
		<textarea v-bind:class="{ textarea: true, not_enough: highlight && !isEnough, enough: highlight && isEnough }" type="text" v-model="inputText" />
		<SimpleProgressBar class="progbar" :count="len" max="50" steps="5"/>
	</div>
</template>

<script>
	import SimpleProgressBar from '../SimpleProgressBar.vue'

	export default {
		data() {
			return {
				inputText: '',
			}
		},

		props: [
			'highlight'
		],

		computed: {
			isEnough() {
				return this.inputText.length >= 50
			},
			len() {
				return this.inputText.length
			}
		},

		mounted() {
		},

		components: {
			SimpleProgressBar,
		},
	}
</script>

<style scoped>
	.textarea {
		width: 100%;
		color: #fff;
		resize: vertical;
		min-height: 1.2em;
		height: 1.2em;
		border: 1px solid #aaa;
		margin: auto;
		background-color: #222;
	}

	.not_enough {
		border: 1px solid #f00;
	}

	.enough {
		border: 1px solid #0f0;	
	}

	.width {
		width: 100%;
		max-width: 60em;
	}
</style>