81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<a
|
|
:disabled="disabled"
|
|
:class="buttonClasses"
|
|
:href="href ? href : to"
|
|
:target="isExternal ? '_blank' : null"
|
|
rel="noopener noreferrer"
|
|
@click="handleClick">
|
|
<slot/>
|
|
</a>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
color: {
|
|
type: String,
|
|
default: "button",
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: "md",
|
|
},
|
|
to: {
|
|
type: [String, Object, null],
|
|
default: null,
|
|
},
|
|
href: {
|
|
type: [ String, null],
|
|
default: null,
|
|
},
|
|
},
|
|
computed: {
|
|
isNuxtLink() {
|
|
return !!this.to;
|
|
},
|
|
isExternal() {
|
|
return !!this.href;
|
|
},
|
|
tag() {
|
|
if (this.isNuxtLink) return 'NuxtLink';
|
|
if (this.isExternal) return 'a';
|
|
return 'button';
|
|
},
|
|
buttonClasses() {
|
|
return {
|
|
"px-3.5 py-2 gap-x-2 text-sm cursor-pointer": this.size === "sm",
|
|
"px-5 py-2.5 gap-x-2 text-sm cursor-pointer": this.size === "md",
|
|
"px-6 py-4 gap-x-1 text-base cursor-pointer": this.size === "lg",
|
|
|
|
"bg-button hover:bg-button-hover text-white rounded-xl shadow-button":
|
|
this.color === "button" && !this.disabled,
|
|
"cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
|
|
this.color === "button" && this.disabled,
|
|
|
|
"text-button hover:text-button-hover":
|
|
this.color === "only-link" && !this.disabled,
|
|
"cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
|
|
this.color === "only-link" && this.disabled,
|
|
|
|
"bg-aula-base hover:bg-button hover:text-white rounded-xl shadow-button":
|
|
this.color === "aula-base" && !this.disabled,
|
|
"cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
|
|
this.color === "aula-base" && this.disabled,
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
handleClick($ev) {
|
|
if (this.disabled) {
|
|
$ev.stopPropagation();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|