1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-23 07:16:30 +00:00
homebox/frontend/components/Base/Button.vue

78 lines
1.5 KiB
Vue
Raw Normal View History

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