52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<template>
|
|
<textboxQuestion
|
|
id="vin-question-wrapper"
|
|
v-model="vin"
|
|
cmsWidgetName="VinNumberQuestionWidget"
|
|
disableAutoFill
|
|
inputId="vin-question"
|
|
isRequired
|
|
maxLength="17"
|
|
validationRules="vin-required|vin-format" />
|
|
</template>
|
|
<script>
|
|
// Import Other Supporting File(s)
|
|
import { defineRule } from 'vee-validate';
|
|
import { regex, required } from '@/helpers/validation-rules';
|
|
import errorMessages from '@/constants/error-messages';
|
|
|
|
// Import Component(s)
|
|
import textboxQuestion from '@/digital-components/textbox-question/textbox-question';
|
|
|
|
defineRule('vin-required', required(errorMessages.VIN_REQUIRED));
|
|
defineRule('vin-format', regex(/^[a-hA-Hj-nJ-NpPr-zR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
|
|
|
|
export default {
|
|
name: 'vin-question',
|
|
components: {
|
|
textboxQuestion
|
|
},
|
|
props: {
|
|
modelValue: String
|
|
},
|
|
emits: ['update:modelValue'],
|
|
computed: {
|
|
vin: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(newValue) {
|
|
this.$emit('update:modelValue', newValue);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
#vin-question-wrapper .form-test-error {
|
|
/**
|
|
Override extra margin-bottom in the error message in TextboxQuestion
|
|
*/
|
|
margin-bottom: 0 !important;
|
|
}
|
|
</style>
|