Sha256: 0f3dca0cfc7221d17e6bf6820f349645b24a1e9593ccfe6e40ead3b07a78d372
Contents?: true
Size: 1.33 KB
Versions: 17
Compression:
Stored size: 1.33 KB
Contents
<template>
<div>
<label
class="block font-semibold text-gray-800 flex justify-between items-center"
>
<span>{{ label }}</span>
<span
v-if="maxLength"
class="text-xs"
:class="{
'text-red-600': isOverMaxLength,
'text-gray-600': !isOverMaxLength,
}"
>{{ numCharacters }} / {{ maxLength }}</span
>
</label>
<textarea
:value="value"
@blur="blur()"
@input="updateInput"
class="block w-full mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring"
autocomplete="off"
ref="input"
:rows="rows"
/>
</div>
</template>
<script>
import FocusedInputMixin from '@/mixins/focused-input'
export default {
name: 'TextInput',
mixins: [FocusedInputMixin],
props: {
label: { type: String, default: 'Label' },
name: { type: String, default: 'text' },
value: { type: String },
maxLength: { type: Number, default: null },
rows: { type: Number, default: 2 },
},
computed: {
numCharacters() {
return (this.value || '').length
},
isOverMaxLength() {
return this.numCharacters > this.maxLength
},
},
methods: {
updateInput(event) {
this.$emit('input', event.target.value)
},
focus() {
this.$refs.input.focus()
},
},
}
</script>
Version data entries
17 entries across 17 versions & 1 rubygems