audiobookshelf/client/components/ui/Btn.vue

92 lines
2.5 KiB
Vue
Raw Normal View History

2021-08-18 00:01:11 +02:00
<template>
<nuxt-link v-if="to" :to="to" class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :class="classList">
<slot />
<div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
<!-- <span class="material-icons animate-spin">refresh</span> -->
<svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
</div>
</nuxt-link>
<button v-else class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @click="click">
2021-08-18 00:01:11 +02:00
<slot />
<div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
<!-- <span class="material-icons animate-spin">refresh</span> -->
<svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
</div>
2021-08-18 00:01:11 +02:00
</button>
</template>
<script>
export default {
props: {
to: String,
2021-08-18 00:01:11 +02:00
color: {
type: String,
default: 'primary'
},
type: {
type: String,
default: ''
},
paddingX: Number,
small: Boolean,
loading: Boolean,
disabled: Boolean
2021-08-18 00:01:11 +02:00
},
data() {
return {}
},
computed: {
classList() {
var list = []
if (this.loading) list.push('text-opacity-0')
2021-08-18 00:01:11 +02:00
list.push('text-white')
list.push(`bg-${this.color}`)
if (this.small) {
list.push('text-sm')
if (this.paddingX === undefined) list.push('px-4')
list.push('py-1')
} else {
if (this.paddingX === undefined) list.push('px-8')
list.push('py-2')
}
if (this.paddingX !== undefined) {
list.push(`px-${this.paddingX}`)
}
if (this.disabled) {
list.push('cursor-not-allowed')
}
2021-08-18 00:01:11 +02:00
return list
}
},
methods: {
click(e) {
this.$emit('click', e)
}
},
mounted() {}
}
</script>
<style>
.btn::before {
2021-08-18 00:01:11 +02:00
content: '';
position: absolute;
border-radius: 6px;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0);
transition: all 0.1s ease-in-out;
}
.btn:hover:not(:disabled)::before {
2021-08-18 00:01:11 +02:00
background-color: rgba(255, 255, 255, 0.1);
}
button:disabled::before {
background-color: rgba(0, 0, 0, 0.2);
}
2021-08-18 00:01:11 +02:00
</style>