111 lines
2.5 KiB
Vue
111 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
|
|
export type ButtonTheme = "primary" | "secondary"
|
|
export type ButtonType = "button" | "submit" | "reset"
|
|
export type ButtonSize = "sm" | "md" | "lg"
|
|
|
|
interface Props {
|
|
theme?: ButtonTheme,
|
|
size?: ButtonSize,
|
|
icon?: string,
|
|
type?: ButtonType,
|
|
disabled?: boolean
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
buttonStyle: "primary",
|
|
buttonType: "button",
|
|
size: "md",
|
|
disabled: false
|
|
})
|
|
defineEmits(['click'])
|
|
|
|
const buttonStyle = computed(() => ({
|
|
'app-button-theme-secondary': props.theme === "secondary",
|
|
'app-button-disabled': props.disabled,
|
|
'app-button-size-sm': props.size === "sm",
|
|
'app-button-size-lg': props.size === "lg"
|
|
}))
|
|
</script>
|
|
<template>
|
|
<button class="app-button" :class="buttonStyle" :type="type" :disabled="disabled" @click="$emit('click')">
|
|
<span v-if="icon">
|
|
<font-awesome-icon :icon="'fa-' + icon"
|
|
:class="{ 'app-button-icon-with-text': $slots.default !== undefined, 'app-button-icon-without-text': $slots.default === undefined }"></font-awesome-icon>
|
|
</span>
|
|
<slot></slot>
|
|
</button>
|
|
</template>
|
|
<style lang="css">
|
|
.app-button {
|
|
background-color: #111827;
|
|
border: 1px solid transparent;
|
|
border-radius: .75rem;
|
|
box-sizing: border-box;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
flex: 0 0 auto;
|
|
font-family: "OpenSans", sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
line-height: 1rem;
|
|
padding: .75rem 1.5rem;
|
|
text-align: center;
|
|
text-decoration: none #6B7280 solid;
|
|
text-decoration-thickness: auto;
|
|
transition-duration: .2s;
|
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
width: auto;
|
|
margin: 0.25rem;
|
|
}
|
|
|
|
.app-button-disabled {
|
|
color: #686868;
|
|
cursor: inherit;
|
|
}
|
|
|
|
.app-button-size-sm {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.app-button-size-lg {
|
|
padding: 1rem 2rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.app-button:hover:not(.app-button-disabled) {
|
|
background-color: #374151;
|
|
}
|
|
|
|
.app-button:focus {
|
|
box-shadow: none;
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.app-button:active:not(.app-button-disabled) {
|
|
background-color: #3b4968;
|
|
}
|
|
|
|
.app-button-theme-secondary {
|
|
background-color: #1d2330;
|
|
}
|
|
|
|
.app-button-icon-with-text {
|
|
margin-right: 0.5rem;
|
|
margin-left: -0.5rem;
|
|
}
|
|
|
|
.app-button-icon-without-text {
|
|
margin-left: -0.5rem;
|
|
margin-right: -0.5rem;
|
|
}
|
|
</style>
|