implement allowPageInteraction that was missed

This commit is contained in:
Bill Richardson 2024-05-09 16:38:36 -04:00
parent 6a5bda1829
commit cedfc22d33

View file

@ -4,7 +4,12 @@
class="loader" class="loader"
role="alert" role="alert"
aria-label="Loading new page" aria-label="Loading new page"
:class="[loaderColor, loaderPosition]"></div> :class="[
loaderColor,
loaderPosition,
allowPageInteraction ? 'allow-ui-interaction' : ''
]"
@click="captureClick"></div>
</template> </template>
<script> <script>
@ -12,6 +17,10 @@ export default {
name: 'loader', name: 'loader',
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */ /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
props: { props: {
allowPageInteraction: {
type: Boolean,
default: false
},
/* Color options: red, green, blue, white, black */ /* Color options: red, green, blue, white, black */
loaderColor: { loaderColor: {
type: String type: String
@ -36,6 +45,13 @@ export default {
'--loader-height': `${this.height}rem` '--loader-height': `${this.height}rem`
}; };
} }
},
methods: {
captureClick(event) {
if (!this.allowPageInteraction) {
event.stopPropagation();
}
}
} }
}; };
</script> </script>
@ -63,6 +79,11 @@ export default {
} }
} }
&.allow-ui-interaction::before {
//no-block to enable clicking on certain buttons with loaders while the loader is actives
pointer-events: none;
}
//Spinner basics //Spinner basics
&:after { &:after {
content: ""; content: "";