64 lines
No EOL
1.9 KiB
Vue
64 lines
No EOL
1.9 KiB
Vue
<template>
|
|
<transition name="fade" mode="out-in">
|
|
<div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
|
|
<buttonQuestion
|
|
:questionText="questionText"
|
|
:answers="answersFromCms"
|
|
:groupName="groupName"
|
|
buttonType="listButtonHorizontal"
|
|
useTextForValue
|
|
v-model="selectedChipCountValues"
|
|
:validationRules="validationRules"
|
|
isRequired
|
|
/>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonQuestion from "@/common-components/button-question/button-question";
|
|
|
|
export default ({
|
|
name: "windshieldOptions",
|
|
props: {
|
|
modelValue: Array,
|
|
groupName: String,
|
|
isAvailable: Boolean,
|
|
validationRules: String,
|
|
cmsWidgetName: String,
|
|
},
|
|
methods: {
|
|
updateSelectedValues() {
|
|
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
|
|
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
|
|
this.selectedValues = [this.answersToDisplay[0].Name];
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
questionText(){
|
|
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
|
},
|
|
answersFromCms(){
|
|
return this.getCmsContent(this.cmsWidgetName, 'Answers');
|
|
},
|
|
selectedChipCountValues: {
|
|
get: function() {
|
|
return this.modelValue;
|
|
},
|
|
set: function(newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
isAvailable(val) {
|
|
// CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
|
|
val && this.updateSelectedValues();
|
|
}
|
|
},
|
|
components: {
|
|
buttonQuestion,
|
|
}
|
|
})
|
|
</script> |