96 lines
2.4 KiB
Vue
96 lines
2.4 KiB
Vue
<template>
|
|
<div class="phone-number-question d-flex flex-column">
|
|
<textboxQuestion
|
|
ref="phoneNumber"
|
|
type="text"
|
|
:max-length="12"
|
|
v-model="selectedValue"
|
|
:mask="mask"
|
|
placeholderText="###-###-####"
|
|
:isRequired="isRequired"
|
|
:validationRules="validationRulesForTextBoxQuestion"
|
|
:cmsWidgetName="cmsWidgetName" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
|
|
|
// Supporting files
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
import { regex } from "@/helpers/validation-rules";
|
|
import { defineRule } 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: {
|
|
selectedValue: {
|
|
get: function () {
|
|
return this.modelValue;
|
|
},
|
|
set: function (newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
},
|
|
},
|
|
validationRulesForTextBoxQuestion() {
|
|
if (!this.validationRules || this.validationRules.length === 0) {
|
|
return "phone-number-format";
|
|
} else {
|
|
return this.validationRules + "|phone-number-format";
|
|
}
|
|
},
|
|
mask() {
|
|
return {
|
|
mask: "x##-###-####",
|
|
tokens: {
|
|
x: {
|
|
pattern: /[2-9]/,
|
|
},
|
|
},
|
|
};
|
|
},
|
|
},
|
|
components: {
|
|
textboxQuestion,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.phone-number-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>
|