89 lines
1.2 KiB
Vue
89 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<button
|
||
|
|
:class="['app-button', variant, size]"
|
||
|
|
:disabled="disabled"
|
||
|
|
@click="$emit('click')"
|
||
|
|
>
|
||
|
|
<slot />
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
interface Props {
|
||
|
|
variant?: "primary" | "secondary" | "danger";
|
||
|
|
size?: "small" | "medium" | "large";
|
||
|
|
disabled?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Emits {
|
||
|
|
click: [];
|
||
|
|
}
|
||
|
|
|
||
|
|
withDefaults(defineProps<Props>(), {
|
||
|
|
variant: "primary",
|
||
|
|
size: "medium",
|
||
|
|
disabled: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
defineEmits<Emits>();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.app-button {
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-button:disabled {
|
||
|
|
opacity: 0.6;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Variants */
|
||
|
|
.primary {
|
||
|
|
background-color: #00dc82;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary:hover:not(:disabled) {
|
||
|
|
background-color: #00b368;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondary {
|
||
|
|
background-color: #6c757d;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondary:hover:not(:disabled) {
|
||
|
|
background-color: #5a6268;
|
||
|
|
}
|
||
|
|
|
||
|
|
.danger {
|
||
|
|
background-color: #dc3545;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.danger:hover:not(:disabled) {
|
||
|
|
background-color: #c82333;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sizes */
|
||
|
|
.small {
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.medium {
|
||
|
|
padding: 0.75rem 1.5rem;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.large {
|
||
|
|
padding: 1rem 2rem;
|
||
|
|
font-size: 1.125rem;
|
||
|
|
}
|
||
|
|
</style>
|