65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<template>
|
|
<button
|
|
type="button"
|
|
class="flex items-center justify-center cursor-pointer "
|
|
:disabled="disabled" :class="buttonClasses" @click="handleClick">
|
|
<slot></slot>
|
|
<img v-if="hasIcon" src="@/assets/svg/download.svg" alt="" class="h-5 w-5" />
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
color: {
|
|
type: String,
|
|
default: "accent",
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: "md",
|
|
},
|
|
hasIcon: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
buttonClasses() {
|
|
return {
|
|
"px-3.5 py-1 gap-x-2 text-sm": this.size === "xs",
|
|
"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",
|
|
|
|
"bg-accent hover:bg-[#E7E7E7] focus:bg-muted border border-surface focus:border-surface text-surface focus:text-accent rounded-lg":
|
|
this.color === "accent" && !this.disabled,
|
|
"bg-accent/55 border border-accent/10 cursor-not-allowed text-white rounded-lg":
|
|
this.color === "accent" && this.disabled,
|
|
|
|
"bg-surface hover:bg-accent border border-surface text-accent focus:bg-surface focus:text-accent focus:border focus:border-accent/50 hover:text-surface rounded-lg":
|
|
this.color === "surface" && !this.disabled,
|
|
"bg-surface cursor-not-allowed text-accent/50 border border-accent/50 rounded-lg":
|
|
this.color === "surface" && this.disabled,
|
|
|
|
"border border-accent focus:border-surface hover:bg-accent hover:border-surface hover:text-surface text-accent focus:text-accent rounded-lg":
|
|
this.color === "transparent" && !this.disabled,
|
|
"bg-accent/55 border border-accent/10 cursor-not-allowed text-white rounded-lg":
|
|
this.color === "accent" && this.disabled,
|
|
|
|
};
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick($ev) {
|
|
if (this.disabled) {
|
|
$ev.stopPropagation();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script> |