homebox/frontend/components/Base/Button.vue
Hayden 5bbb969763
feat: maintenance log (#170)
* remove repo for document tokens

* remove schema for doc tokens

* fix id template and generate cmd

* schema updates

* code gen

* bump dependencies

* fix broken migrations + add maintenance entry type

* spelling

* remove debug logger

* implement repository layer

* routes

* API client

* wip: maintenance log

* remove depreciated call
2022-12-09 20:57:57 -09:00

77 lines
1.5 KiB
Vue

<template>
<NuxtLink
v-if="to"
v-bind="attributes"
ref="submitBtn"
class="btn"
:class="{
loading: loading,
'btn-sm': size === 'sm',
'btn-lg': size === 'lg',
}"
:style="upper ? '' : 'text-transform: none'"
>
<label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
<slot name="icon" />
</label>
<slot />
</NuxtLink>
<button
v-else
v-bind="attributes"
ref="submitBtn"
class="btn"
:class="{
loading: loading,
'btn-sm': size === 'sm',
'btn-lg': size === 'lg',
}"
:style="upper ? '' : 'text-transform: none'"
>
<label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
<slot name="icon" />
</label>
<slot />
</button>
</template>
<script setup lang="ts">
type Sizes = "sm" | "md" | "lg";
const props = defineProps({
upper: {
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
size: {
type: String as () => Sizes,
default: "md",
},
to: {
type: String as () => string | null,
default: null,
},
});
const attributes = computed(() => {
if (props.to) {
return {
to: props.to,
};
}
return {
disabled: props.disabled || props.loading,
};
});
const submitBtn = ref(null);
const isHover = useElementHover(submitBtn);
</script>