77 lines
2.6 KiB
Vue
77 lines
2.6 KiB
Vue
<template>
|
|
<!-- See the component-test.vue page for example implementation -->
|
|
<!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
|
|
<!-- Example: -->
|
|
<!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
|
|
<!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
|
|
<!-- Example -->
|
|
<!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
|
|
<div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
|
|
<input
|
|
type="radio"
|
|
:id="radioID"
|
|
:name="groupName"
|
|
:value="radioID"
|
|
aria-required="true"
|
|
@keyup.space="displayComponent"
|
|
/>
|
|
<label
|
|
role="radio"
|
|
tabindex="-1"
|
|
aria-checked="false"
|
|
:for="radioID"
|
|
class="d-flex flex-column justify-content-center py-3 px-4"
|
|
@click="displayComponent"
|
|
>
|
|
<span class="m-0" :class="[this.textPosition]">{{ radioID }}</span>
|
|
<span class="m-0 small" :class="[this.textPosition]">{{
|
|
radioLabelSubCopy
|
|
}}</span>
|
|
<loader
|
|
v-if="display"
|
|
:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
|
|
:class="[this.loaderColor, this.loaderPosition]"
|
|
/>
|
|
</label>
|
|
<p class="small">{{ errorMessage }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import loader from "@/ux-components/loader/loader";
|
|
export default {
|
|
name: "radioList",
|
|
props: {
|
|
groupName: String /* Required, unique for each radio button GROUP */,
|
|
radioID:
|
|
String /* Required, unique for each radio button. Used for button id, label and <label for> */,
|
|
radioLabelSubCopy: String /* Optional, used for multi-line radio buttons */,
|
|
textPosition:
|
|
String /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */,
|
|
errorMessage:
|
|
String /* Optional, if there is an error message to be displayed */,
|
|
loaderColor:
|
|
String /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */,
|
|
loaderPosition:
|
|
String /* Specify horizontal position of loader/spinner. Options are center, right, left */,
|
|
sizeInRem: [
|
|
Number,
|
|
String,
|
|
] /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */,
|
|
},
|
|
data() {
|
|
return {
|
|
isError: false,
|
|
display: false,
|
|
};
|
|
},
|
|
methods: {
|
|
displayComponent() {
|
|
this.display = true;
|
|
},
|
|
},
|
|
components: {
|
|
loader,
|
|
},
|
|
};
|
|
</script>
|