57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<template>
|
|
<button
|
|
:aria-disabled="isDisabled"
|
|
class="btn d-flex align-items-center justify-content-center delay"
|
|
:class="[getVariant, `btn-${size}`, canOverride ? 'btn-override' : '']"
|
|
@click="clicked">
|
|
<span class="m-0">{{ buttonText }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonVariants from '@/constants/button-variants';
|
|
import buttonSizes from '@/constants/button-sizes';
|
|
|
|
export default {
|
|
name: 'button-main',
|
|
props: {
|
|
variant: { type: String, default: 'primary', validator: (val) => Object.keys(buttonVariants).includes(val) },
|
|
size: { type: String, default: 'md', validator: (val) => Object.keys(buttonSizes).includes(val) },
|
|
buttonText: String,
|
|
isDisabled: Boolean,
|
|
isOutline: Boolean,
|
|
pushToGA: Boolean,
|
|
canOverride: { type: Boolean, required: false, default: true }
|
|
},
|
|
emits: ['click-event'],
|
|
computed: {
|
|
getVariant() {
|
|
if (this.isOutline) {
|
|
return `btn-outline-${this.variant}`;
|
|
}
|
|
|
|
return `btn-${this.variant}`;
|
|
}
|
|
},
|
|
methods: {
|
|
clicked() {
|
|
if (!this.isDisabled) {
|
|
if (this.pushToGA) {
|
|
this.pushEventToGA(
|
|
this.$route.query[this.queryStrings.ISS_PAGE],
|
|
this.GaActions.CLICKED,
|
|
this.buttonText,
|
|
true
|
|
);
|
|
}
|
|
|
|
this.$emit('click-event');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|