app/src/ui/components/TextField.vue

40 lines
729 B
Vue
Raw Normal View History

<template>
<form-field>
<label v-if="label">{{label}}</label>
<input :value="modelValue" ref="field" @input="handleInput" :type="inputType" />
</form-field>
</template>
<script>
import FormField from "./FormField.vue";
export default {
props: {
label: String,
modelValue: String,
password: Boolean,
},
computed: {
inputType() {
return this.password ? "password" : "text";
},
},
components: { FormField },
methods: {
handleInput() {
this.$emit("update:modelValue", this.$refs.field.value);
},
},
};
</script>
<style scoped>
input {
color: #fff;
background-color: #121212;
outline: none;
border: 1px solid #000;
flex: 1;
padding: 8px 15px;
}
</style>