Sha256: 261e8cfb7ab8540c8d726317ad9b55f334278e0616c7e00ae234cdf3af04c656
Contents?: true
Size: 1.42 KB
Versions: 12
Compression:
Stored size: 1.42 KB
Contents
<template>
<div>
<label
class="block font-semibold text-gray-800"
:for="name"
v-if="showLabel"
>
<span>{{ label }}</span>
<transition name="fade">
<span
class="text-red-700 bg-red-100 text-xs ml-4 py-1 px-3 rounded"
v-if="showError"
>{{ error[0] }}
</span>
</transition>
</label>
<input
type="text"
:value="value"
:placeholder="placeholder"
@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 placeholder-gray-500"
autocomplete="off"
ref="input"
/>
</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 },
placeholder: { type: String, default: null },
showLabel: { type: Boolean, default: true },
error: { type: Array, default: null },
},
data() {
return { showError: false }
},
methods: {
updateInput(event) {
this.showError = false
this.$emit('input', event.target.value)
},
focus() {
this.$refs.input.focus()
},
},
watch: {
error() {
if (!this.isBlank(this.error)) this.showError = true
},
},
}
</script>
Version data entries
12 entries across 12 versions & 1 rubygems