61 lines
No EOL
1.6 KiB
Vue
61 lines
No EOL
1.6 KiB
Vue
<template>
|
|
<div class="button_question">
|
|
<div class="needed_car_info mt-6 mb-4 d-flex">
|
|
<span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
|
|
questionText
|
|
}}</span>
|
|
</div>
|
|
<div class="w-100 d-flex justify-content-center">
|
|
<fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
|
|
<legend class="sr-only">{{groupName}}</legend>
|
|
<listButton v-for="answer in answers" :key="answer"
|
|
:buttonID="answer"
|
|
@mouseup="chooseAnswer(answer)"
|
|
@keyup.space="chooseAnswer(answer)"
|
|
loaderColor="blue"
|
|
loaderPosition="right"
|
|
sizeInRem="1.5"
|
|
data-test="button"
|
|
:groupName="groupName"
|
|
textPosition="text-start"
|
|
:isRequired="true"
|
|
:value="modelValue"
|
|
screenReaderOnlyText=" opens new window"
|
|
/>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import listButton from "@/ux-components/list-button/list-button";
|
|
export default {
|
|
name: "buttonQuestion",
|
|
props: {
|
|
questionText: String,
|
|
answers: Array,
|
|
modelValue: String,
|
|
groupName: String
|
|
},
|
|
methods: {
|
|
chooseAnswer(answer) {
|
|
this.$emit("update:modelValue", answer);
|
|
},
|
|
},
|
|
components: {
|
|
listButton,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.button_question {
|
|
height: calc(100vh - 280px);
|
|
|
|
.car_list {
|
|
// Height will be determined by overall height of content above list
|
|
height: calc(100% - 320px);
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
</style> |