101 lines
2.0 KiB
Vue
101 lines
2.0 KiB
Vue
<template>
|
|
<component
|
|
:is="link ? `a` : `button`"
|
|
class="btn"
|
|
:class="classes"
|
|
:href="link"
|
|
>
|
|
<component
|
|
:is="icon"
|
|
v-if="icon"
|
|
class="btn-icon"
|
|
:class="[iconColor]"
|
|
/>
|
|
<div>
|
|
<slot />
|
|
</div>
|
|
<component
|
|
:is="iconRight"
|
|
v-if="iconRight"
|
|
class="btn-icon"
|
|
:class="[iconColor]"
|
|
/>
|
|
</component>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type { Component } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
color?: '' | 'green' | 'blue' | 'red'
|
|
link?: string
|
|
text?: boolean
|
|
// Expecting Vue Components
|
|
icon?: Component
|
|
iconRight?: Component
|
|
iconColor?: string
|
|
}>()
|
|
|
|
const classes = computed(() => {
|
|
let classes = []
|
|
if (props.color) classes.push(props.color)
|
|
if (props.text) classes.push('text')
|
|
return classes
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
@apply px-3 py-1 mx-1 my-2 bg-white rounded-md !no-underline !shadow-md !hover:shadow-sm !focus:shadow-sm !active:shadow-none border !cursor-pointer border-box;
|
|
@apply text-true-gray-500 hover:text-true-gray-600 focus:text-true-gray-600 active:text-true-gray-800;
|
|
@apply !inline-flex justify-center items-center;
|
|
@apply transition-colors;
|
|
}
|
|
|
|
.btn.text {
|
|
@apply !bg-transparent border-none !shadow-none !hover:shadow-none !hover:bg-light-50 !hover:bg-opacity-5 !hover:shadow-md;
|
|
}
|
|
|
|
button.btn {
|
|
@apply align-bottom;
|
|
}
|
|
|
|
.dark .btn {
|
|
@apply bg-true-gray-900;
|
|
}
|
|
.green {
|
|
@apply text-green-500 hover:text-green-600 focus:text-green-600 active:text-green-800;
|
|
}
|
|
.blue {
|
|
@apply text-blue-500 hover:text-blue-600 focus:text-blue-600 active:text-blue-800;
|
|
}
|
|
.red {
|
|
@apply text-red-500 hover:text-red-600 focus:text-red-600 active:text-red-800;
|
|
}
|
|
|
|
.default {
|
|
@apply text-dark-500 hover:text-dark-600 focus:text-dark-600 active:text-dark-800;
|
|
}
|
|
|
|
.dark .default {
|
|
@apply text-light-500 hover:text-light-600 focus:text-light-600 active:text-light-800;
|
|
}
|
|
|
|
.btn-icon {
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
.btn-icon:first-child {
|
|
@apply mr-2;
|
|
}
|
|
|
|
.btn-icon:last-child {
|
|
@apply ml-2;
|
|
}
|
|
</style>
|