140 lines
4.2 KiB
Vue
140 lines
4.2 KiB
Vue
<template>
|
|
<div :class="isOverflowScrollable ? 'button_question' : ''">
|
|
<div v-if="questionText" class="mt-6 mb-4 d-flex">
|
|
<span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
|
|
</div>
|
|
<div class="w-100 d-flex justify-content-center">
|
|
<fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
|
|
<legend class="sr-only">{{groupName}}</legend>
|
|
<div :class="getComponentWrapperClasses">
|
|
<component
|
|
:is="buttonType"
|
|
v-for="answer in answers"
|
|
:key="answer.Name ? answer.Name : answer"
|
|
@isCheckedChanged="handleCheckedChanged"
|
|
:buttonID="answer.Name ? answer.Name : answer"
|
|
:value="answer.Name ? answer.Name : answer"
|
|
:buttonLabel="answer.Text ? answer.Text : answer"
|
|
:buttonLabelSubCopy="answer.SubText"
|
|
:textPosition="textPosition"
|
|
:isMultiSelect="isMultiSelect"
|
|
:groupName="groupName"
|
|
:loaderEnabled="loaderEnabled"
|
|
:loaderColor="loaderColor"
|
|
:loaderPosition="loaderPosition"
|
|
:sizeInRem="sizeInRem"
|
|
:isWide="isWide"
|
|
:isRequired="isRequired"
|
|
:buttonImage="answer.AnswerImageUrl"
|
|
:buttonImageId="answer.ImageId"
|
|
:altText="answer.Name ? answer.Name : answer"
|
|
screenReaderOnlyText="(opens new window)"
|
|
:colLength="this.answers.length < 3 ? '' : '-4'"
|
|
v-model="modelValue"
|
|
data-test="button"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import listButton from "@/ux-components/list-button/list-button";
|
|
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
|
import listCard from "@/ux-components/list-card/list-card";
|
|
|
|
export default {
|
|
name: "buttonQuestion",
|
|
props: {
|
|
buttonType: {
|
|
type: String,
|
|
default: "listButton",
|
|
},
|
|
isMultiSelect: Boolean,
|
|
groupName: String,
|
|
questionText: String,
|
|
answers: Array,
|
|
textPosition: {
|
|
type: String,
|
|
default: "text-center",
|
|
},
|
|
loaderEnabled: Boolean,
|
|
loaderColor: {
|
|
type: String,
|
|
default: "blue",
|
|
},
|
|
loaderPosition: {
|
|
type: String,
|
|
default: "right",
|
|
},
|
|
sizeInRem: {
|
|
type: [String, Number],
|
|
default: 1.5,
|
|
},
|
|
isRequired: Boolean,
|
|
isOverflowScrollable: Boolean,
|
|
isWide: Boolean,
|
|
modelValue: Array,
|
|
},
|
|
computed: {
|
|
getFieldSetClasses() {
|
|
return this.isOverflowScrollable
|
|
? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
|
|
: "";
|
|
},
|
|
getComponentWrapperClasses() {
|
|
let classes;
|
|
switch (this.buttonType) {
|
|
case "listButton":
|
|
classes = "w-100";
|
|
break;
|
|
case "listButtonHorizontal":
|
|
classes = "d-flex flex-row p-0";
|
|
break;
|
|
case 'listCard':
|
|
classes = 'row justify-content-center g-2'
|
|
break;
|
|
}
|
|
return classes;
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
modelValueAnswers: [],
|
|
}
|
|
},
|
|
mounted(){
|
|
if(Array.isArray(this.answers) && this.answers.length === 1) {
|
|
this.modelValueAnswers.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
|
|
this.$emit("update:modelValue", this.modelValueAnswers);
|
|
}
|
|
},
|
|
methods: {
|
|
handleCheckedChanged(val) {
|
|
// Add or remove item to array of data to emit
|
|
val.isChecked ? this.modelValueAnswers.push(val.buttonId) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(val.buttonId), 1);
|
|
const answersToEmit = this.modelValueAnswers.length ? this.modelValueAnswers : undefined;
|
|
this.$emit("update:modelValue", answersToEmit);
|
|
},
|
|
},
|
|
components: {
|
|
listButton,
|
|
listButtonHorizontal,
|
|
listCard,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.button_question {
|
|
color: $black;
|
|
height: calc(100vh - 280px);
|
|
|
|
.overflow-scroll {
|
|
// Height will be determined by overall height of content above list
|
|
height: calc(100% - 320px);
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
</style>
|