homebox/frontend/components/Base/Button.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>