125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
Vue
<template>
|
|
<div class="input_holder">
|
|
<div class="input_header" v-if="label || description">
|
|
<label :for="name" v-if="label">{{ label }}</label>
|
|
<div class="input_description" v-if="description">{{ description }}</div>
|
|
</div>
|
|
|
|
<!-- -->
|
|
<input type="number" v-if="props && props.type == 'number'"
|
|
v-model="currentValue"
|
|
:class="{invalid}"
|
|
:id="name"
|
|
:name="name"
|
|
:placeholder="props.placeholder"
|
|
@blur="validateValue"
|
|
@change="handleChange"
|
|
>
|
|
<input type="text" v-if="props && props.type == 'text'"
|
|
v-model="currentValue"
|
|
:class="{invalid}"
|
|
:id="name"
|
|
:name="name"
|
|
:placeholder="props.placeholder"
|
|
@blur="validateValue"
|
|
@change="handleChange"
|
|
>
|
|
<input type="password" v-else-if="props && props.type == 'password'"
|
|
v-model="currentValue"
|
|
:class="{invalid}"
|
|
:id="name"
|
|
:name="name"
|
|
:placeholder="props.placeholder"
|
|
@blur="validateValue"
|
|
@change="handleChange"
|
|
>
|
|
<div class="checkbox_holder" v-else-if="props && props.type == 'checkbox'">
|
|
<label :for="name"></label>
|
|
<input type="checkbox"
|
|
v-model="currentValue"
|
|
:id="name"
|
|
:name="name"
|
|
@blur="validateValue"
|
|
@change="handleChange"
|
|
>
|
|
<div class="check_checkbox"></div>
|
|
</div>
|
|
|
|
<div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.invalid {
|
|
background-color: #fcc;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
name: "BasicInput",
|
|
props: [
|
|
'description',
|
|
'label',
|
|
'name',
|
|
'props',
|
|
'value',
|
|
// 'invalid',
|
|
// 'validatorMessage',
|
|
'validate'
|
|
],
|
|
data() {
|
|
return {
|
|
currentValue: this.value,
|
|
invalid: false,
|
|
validatorMessage: ""
|
|
}
|
|
},
|
|
methods: {
|
|
validateValue() {
|
|
var valid = true;
|
|
let v = this.validate;
|
|
if (v) {
|
|
if (v.required && !this.currentValue) {
|
|
valid = false;
|
|
this.validatorMessage = (typeof v.requiredMessage == "string") ? v.requiredMessage : "input required";
|
|
}
|
|
}
|
|
this.invalid = !valid;
|
|
this.$emit('validate', valid);
|
|
},
|
|
handleChange() {
|
|
this.$emit('change', this.currentValue);
|
|
}
|
|
},
|
|
watch: {
|
|
currentValue(val) {
|
|
if (this.props && this.props.datatype) {
|
|
// convert
|
|
let t = this.props.datatype;
|
|
let newVal;
|
|
switch (t) {
|
|
case "int":
|
|
newVal = parseInt(this.currentValue);
|
|
if (isNaN(newVal)) {
|
|
newVal = 0;
|
|
}
|
|
break;
|
|
case "float":
|
|
newVal = parseFloat(this.currentValue);
|
|
if (isNaN(newVal)) {
|
|
newVal = 0;
|
|
}
|
|
break;
|
|
}
|
|
|
|
if (newVal !== this.currentValue) {
|
|
this.currentValue = newVal;
|
|
return; // prevent double input events
|
|
}
|
|
}
|
|
this.$emit('input', val);
|
|
}
|
|
}
|
|
}
|
|
</script> |