119 lines
3.7 KiB
Vue
119 lines
3.7 KiB
Vue
<template>
|
|
<div class="phonenumber-question d-flex flex-column">
|
|
<textboxQuestion
|
|
type="text"
|
|
:max-length="12"
|
|
v-model="selectedValue"
|
|
:isRequired="isRequired"
|
|
:validationRules="validationRuleForTextBoxQuestion"
|
|
@input="filterNumber"
|
|
cmsWidgetName="phoneNumberQuestionWidget" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
|
//Supporting files
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
import { required, regex } from "@/helpers/validation-rules";
|
|
import { Form, defineRule } from "vee-validate";
|
|
import { useField, validate } from "vee-validate";
|
|
//Validation
|
|
defineRule(
|
|
"phone-number-format",
|
|
regex(/^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/, errorMessages.PHONE_FORMAT)
|
|
);
|
|
export default {
|
|
name: "phoneNumberQuestion",
|
|
props: {
|
|
cmsWidgetName: String,
|
|
isRequired: Boolean,
|
|
validationRules: String,
|
|
hasError: Boolean,
|
|
centerErrorMessage: Boolean,
|
|
modelValue: String,
|
|
},
|
|
data() {
|
|
return {
|
|
phoneNumber: "",
|
|
};
|
|
},
|
|
computed: {
|
|
phoneNumberQuestionWidget() {
|
|
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
|
},
|
|
selectedValue: {
|
|
get: function () {
|
|
return this.modelValue;
|
|
},
|
|
set: function (newValue) {
|
|
const formattedNumber = this.formatPhoneNumber(newValue);
|
|
this.$emit("update:modelValue", formattedNumber);
|
|
},
|
|
},
|
|
validationRuleForTextBoxQuestion() {
|
|
if (!this.validationRules || this.validationRules.length === 0) {
|
|
return "phone-number-format";
|
|
} else {
|
|
return this.validationRules + "|phone-number-format";
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
formatPhoneNumber(value) {
|
|
// Remove all non-digit characters from the phone number
|
|
let formattedNumber = value.replace(/\D/g, "");
|
|
|
|
// Insert hyphens after the first three and the next three digits
|
|
if (formattedNumber.length > 3) {
|
|
formattedNumber = formattedNumber.slice(0, 3) + "-" + formattedNumber.slice(3);
|
|
}
|
|
if (formattedNumber.length > 7) {
|
|
formattedNumber = formattedNumber.slice(0, 7) + "-" + formattedNumber.slice(7);
|
|
}
|
|
|
|
// Update the phone number with the formatted version
|
|
return formattedNumber;
|
|
},
|
|
filterNumber(event) {
|
|
const regex = /^(?!1)\d+/;
|
|
const inputValue = event.target.value;
|
|
if (!regex.test(inputValue)) {
|
|
// If the input violates the regex pattern, remove the leading 1
|
|
event.target.value = inputValue.replace(/^1/, "");
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
async value(newValue) {
|
|
const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
|
|
if (result.valid) {
|
|
this.handleChange(newValue); // trigger full validation on this field only
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
textboxQuestion,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.phonenumber-question {
|
|
label {
|
|
color: $black;
|
|
}
|
|
input {
|
|
border-radius: 0.5rem;
|
|
border: 1px solid $gray-500;
|
|
height: 48px;
|
|
&:focus {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
outline: none;
|
|
}
|
|
&:hover {
|
|
box-shadow: 0 0 0 4px $blue-300;
|
|
}
|
|
}
|
|
}
|
|
</style>
|