kit-eco.social/landing
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

ButtonCTA amended and urls updated

Browse Source
This commit is contained in:
María
2025-10-16 13:27:34 +02:00
parent 0b44b2aa3b
commit 74c1234169
15 changed files with 64 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/ButtonCTA.vue
View File

@@ -1,7 +1,11 @@
<template>
<a
class="flex items-center justify-center cursor-pointer text-button-base"
:disabled="disabled" :class="buttonClasses" :href="href" target="_blank" rel="noopener noreferrer" @click="handleClick">
:disabled="disabled"
:class="buttonClasses"
:href="href ? href : to"
:target="isExternal ? '_blank' : null"
rel="noopener noreferrer"
@click="handleClick">
<slot/>
</a>
</template>
@@ -20,26 +24,50 @@ export default {
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": this.size === "sm",
"px-5 py-2.5 gap-x-2 text-sm": this.size === "md",
"px-6 py-4 gap-x-1 text-base": this.size === "lg",
"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) {
@@ -49,4 +77,4 @@ export default {
},
},
};
</script>
</script>