65 lines
1.1 KiB
Vue
65 lines
1.1 KiB
Vue
<template>
|
|
<button
|
|
:disabled="disabled"
|
|
:class="variantClass"
|
|
@click="$emit('click')"
|
|
>
|
|
<slot v-if="!loading"></slot>
|
|
<slot name="spinner" v-else>
|
|
<UiSpinnerCpnt />
|
|
</slot>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineEmits(['click'])
|
|
|
|
const props = defineProps<{
|
|
disabled?: boolean
|
|
loading?: boolean
|
|
variant?: 'primary' | 'secondary'
|
|
}>()
|
|
|
|
const variantClass = computed(() => props.variant === 'secondary' ? 'secondary' : 'primary')
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "sass:color";
|
|
|
|
button {
|
|
margin: 5px 0 2.3em 0;
|
|
width: 100%;
|
|
padding: 1em 1.5em;
|
|
border-radius: 0.5em;
|
|
color: white;
|
|
font-weight: bold;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
transition: 0.3s;
|
|
background: blueviolet;
|
|
text-align: center;
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: color.adjust(blueviolet, $lightness: 15%);
|
|
}
|
|
|
|
&:disabled {
|
|
background: #bbb;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
> div {
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
/* Variants */
|
|
button.secondary {
|
|
background: gray;
|
|
|
|
&:hover {
|
|
color: color.adjust(gray, $lightness: 15%);
|
|
}
|
|
}
|
|
</style>
|