You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.7 KiB
136 lines
3.7 KiB
<template>
|
|
<q-field
|
|
:dark="dark"
|
|
:count="maxLength"
|
|
:helper="helperMessage"
|
|
:error-label="errorMessage"
|
|
>
|
|
<q-input
|
|
ref="inputField"
|
|
:dark="dark"
|
|
clearable
|
|
type="text"
|
|
:float-label="$t('call.number')"
|
|
:value="value"
|
|
:disable="!enabled"
|
|
:error="$v.phoneNumber.$error"
|
|
:readonly="readonly"
|
|
@keypress.space.prevent
|
|
@keydown.space.prevent
|
|
@keyup.space.prevent
|
|
@keyup.enter="keyReturn()"
|
|
@input="inputNumber"
|
|
/>
|
|
</q-field>
|
|
</template>
|
|
<script>
|
|
import Vue from 'vue'
|
|
import {
|
|
userInfoAndEmpty
|
|
} from '../../helpers/validation'
|
|
import {
|
|
maxLength
|
|
} from 'vuelidate/lib/validators'
|
|
import {
|
|
QField,
|
|
QInput
|
|
} from 'quasar-framework'
|
|
import platformMixin from '../../mixins/platform'
|
|
export default {
|
|
name: 'csc-phone-number-input',
|
|
components: {
|
|
QField,
|
|
QInput
|
|
},
|
|
data () {
|
|
return {
|
|
phoneNumber: this.value
|
|
}
|
|
},
|
|
validations: {
|
|
phoneNumber: {
|
|
userInfoAndEmpty,
|
|
maxLength: maxLength(64)
|
|
}
|
|
},
|
|
props: {
|
|
maxLength: {
|
|
type: Number,
|
|
default: 64
|
|
},
|
|
enabled: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
dark: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
mixins: [
|
|
platformMixin
|
|
],
|
|
computed: {
|
|
errorMessage() {
|
|
if (!this.$v.phoneNumber.required) {
|
|
return this.$t('validationErrors.fieldRequired', {
|
|
field: this.$t('call.number')
|
|
});
|
|
}
|
|
else if (!this.$v.phoneNumber.maxLength) {
|
|
return this.$t('validationErrors.maxLength', {
|
|
field: this.$t('call.number'),
|
|
maxLength: this.$v.phoneNumber.$params.maxLength.max
|
|
});
|
|
}
|
|
else if (!this.$v.phoneNumber.userInfo) {
|
|
return this.$t('validationErrors.inputValidNumber');
|
|
}
|
|
},
|
|
helperMessage() {
|
|
return this.$t('validationErrors.inputNumber');
|
|
}
|
|
},
|
|
methods: {
|
|
inputNumber(input) {
|
|
this.phoneNumber = input;
|
|
this.$v.phoneNumber.$touch();
|
|
this.$emit('number-changed', this.phoneNumber);
|
|
},
|
|
keyReturn() {
|
|
this.$emit('key-return');
|
|
},
|
|
focus() {
|
|
Vue.nextTick(() => {
|
|
if(this.$refs.inputField) {
|
|
this.$refs.inputField.focus();
|
|
}
|
|
});
|
|
},
|
|
blur() {
|
|
Vue.nextTick(() => {
|
|
if(this.$refs.inputField) {
|
|
this.$refs.inputField.blur();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
watch: {
|
|
value() {
|
|
this.phoneNumber = this.value;
|
|
this.$v.phoneNumber.$touch();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="stylus" rel="stylesheet/stylus">
|
|
</style>
|