CSR-946 fix button state and disable loader for modal buttons.

This commit is contained in:
Bryan Mauger 2022-11-15 15:50:05 -05:00
parent f80ad8770a
commit 66e4184bca
2 changed files with 16 additions and 3 deletions

View file

@ -25,7 +25,7 @@
<buttonMain
class="w-100"
ref="buttonMain"
isPrimary
suppressLoader
:buttonText="ModalCloseButtonText"
@click-event="buttonClick"
data-bs-dismiss="modal" />
@ -60,6 +60,12 @@ export default {
return this.getCmsContent(this.cmsWidgetName, "FooterText");
},
},
mounted() {
const modal = document.querySelector("#" + this.cmsWidgetName);
modal.addEventListener("hidden.bs.modal", (event) => {
this.$refs.buttonMain.resetButtonStyle();
});
},
components: {
buttonMain,
},

View file

@ -1,7 +1,7 @@
<template>
<button
:aria-disabled="isDisabled"
class="btn d-flex align-items-center py-3 px-4 delay"
class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
:class="[
isPrimary ? 'btn-primary' : 'btn-secondary',
isFloat ? 'float-end' : '',
@ -11,7 +11,7 @@
<span class="m-0">{{ this.buttonText }}</span>
<loader
class="ms-2"
v-if="isLoaderDisplayed"
v-if="isLoaderDisplayed && !suppressLoader"
v-bind:class="[this.loaderColor, this.loaderPosition]" />
</button>
</template>
@ -28,6 +28,7 @@ export default {
loaderColor: String,
loaderPosition: String,
isFloat: Boolean,
suppressLoader: Boolean,
},
data() {
return {
@ -50,6 +51,12 @@ export default {
this.$emit("click-event");
}
},
resetButtonStyle() {
this.isLoaderDisplayed = false;
},
},
mounted() {
this.isLoaderDisplayed = false;
},
components: {
loader,