52 lines
2.8 KiB
Vue
52 lines
2.8 KiB
Vue
<template>
|
|
<!-- See the component-test.vue page for example implementation -->
|
|
<div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
|
|
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
|
|
<label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
|
|
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
|
|
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
|
|
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
|
</label>
|
|
</div>
|
|
<div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
|
|
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
|
|
<label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
|
|
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
|
|
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
|
|
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
|
<loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import loader from "@/ux-components/loader/loader";
|
|
export default {
|
|
name: "listButton",
|
|
props: {
|
|
isMultiSelect: Boolean, /* Defines use as checkbox */
|
|
groupName: String, /* Required, unique for each button GROUP */
|
|
buttonID: [Number,String], /* Required, unique for each button. Used for button id, label and <label for> */
|
|
isRequired: Boolean, /* Optional, default is false */
|
|
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
|
|
buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
|
|
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
|
|
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 {
|
|
isLoaderDisplayed: false,
|
|
};
|
|
},
|
|
methods: {
|
|
displayLoader() {
|
|
this.isLoaderDisplayed = true;
|
|
},
|
|
},
|
|
components: {
|
|
loader,
|
|
}
|
|
};
|
|
</script>
|