CSR-946 fix button state and disable loader for modal buttons.
This commit is contained in:
parent
f80ad8770a
commit
66e4184bca
2 changed files with 16 additions and 3 deletions
|
|
@ -25,7 +25,7 @@
|
||||||
<buttonMain
|
<buttonMain
|
||||||
class="w-100"
|
class="w-100"
|
||||||
ref="buttonMain"
|
ref="buttonMain"
|
||||||
isPrimary
|
suppressLoader
|
||||||
:buttonText="ModalCloseButtonText"
|
:buttonText="ModalCloseButtonText"
|
||||||
@click-event="buttonClick"
|
@click-event="buttonClick"
|
||||||
data-bs-dismiss="modal" />
|
data-bs-dismiss="modal" />
|
||||||
|
|
@ -60,6 +60,12 @@ export default {
|
||||||
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
const modal = document.querySelector("#" + this.cmsWidgetName);
|
||||||
|
modal.addEventListener("hidden.bs.modal", (event) => {
|
||||||
|
this.$refs.buttonMain.resetButtonStyle();
|
||||||
|
});
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
buttonMain,
|
buttonMain,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
:aria-disabled="isDisabled"
|
: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="[
|
:class="[
|
||||||
isPrimary ? 'btn-primary' : 'btn-secondary',
|
isPrimary ? 'btn-primary' : 'btn-secondary',
|
||||||
isFloat ? 'float-end' : '',
|
isFloat ? 'float-end' : '',
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<span class="m-0">{{ this.buttonText }}</span>
|
<span class="m-0">{{ this.buttonText }}</span>
|
||||||
<loader
|
<loader
|
||||||
class="ms-2"
|
class="ms-2"
|
||||||
v-if="isLoaderDisplayed"
|
v-if="isLoaderDisplayed && !suppressLoader"
|
||||||
v-bind:class="[this.loaderColor, this.loaderPosition]" />
|
v-bind:class="[this.loaderColor, this.loaderPosition]" />
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -28,6 +28,7 @@ export default {
|
||||||
loaderColor: String,
|
loaderColor: String,
|
||||||
loaderPosition: String,
|
loaderPosition: String,
|
||||||
isFloat: Boolean,
|
isFloat: Boolean,
|
||||||
|
suppressLoader: Boolean,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -50,6 +51,12 @@ export default {
|
||||||
this.$emit("click-event");
|
this.$emit("click-event");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
resetButtonStyle() {
|
||||||
|
this.isLoaderDisplayed = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.isLoaderDisplayed = false;
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
loader,
|
loader,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue