tethys.backend/resources/js/Components/BaseButton.vue

<script setup>
import { computed } from 'vue';
import { Link } from '@inertiajs/vue3';
// import { Link } from '@inertiajs/inertia-vue3';
import { getButtonColor } from '@/colors.js';
import BaseIcon from '@/Components/BaseIcon.vue';

const props = defineProps({
    label: {
        type: [String, Number],
        default: null,
    },
    icon: {
        type: String,
        default: null,
    },
    href: {
        type: String,
        default: null,
    },
    target: {
        type: String,
        default: null,
    },
    routeName: {
        type: String,
        default: null,
    },
    type: {
        type: String,
        default: null,
    },
    color: {
        type: String,
        default: 'white',
    },
    as: {
        type: String,
        default: null,
    },
    small: Boolean,
    outline: Boolean,
    active: Boolean,
    disabled: Boolean,
    roundedFull: Boolean,
});

const is = computed(() => {
    if (props.as) {
        return props.as;
    }

    if (props.routeName) {
        return Link;
    }

    if (props.href) {
        return 'a';
    }

    return 'button';
});

const computedType = computed(() => {
    if (is.value === 'button') {
        return props.type ?? 'button';
    }

    return null;
});

const labelClass = computed(() => (props.small && props.icon ? 'px-1' : 'px-2'));

const componentClass = computed(() => {
    const base = [
        'inline-flex',
        'cursor-pointer',
        'justify-center',
        'items-center',
        'whitespace-nowrap',
        'focus:outline-none',
        'transition-colors',
        'focus:ring-2',
        'duration-150',
        'border',
        props.roundedFull ? 'rounded-full' : 'rounded',
        props.active ? 'ring ring-black dark:ring-white' : 'ring-blue-700',
        getButtonColor(props.color, props.outline, !props.disabled),
    ];

    if (props.small) {
        base.push('text-sm', props.roundedFull ? 'px-3 py-1' : 'p-1');
    } else {
        base.push('py-2', props.roundedFull ? 'px-6' : 'px-3');
    }

    if (props.disabled) {
        base.push('cursor-not-allowed', props.outline ? 'opacity-50' : 'opacity-70');
    }

    return base;
});
</script>

<template>
    <component
        :is="is"
        :class="componentClass"
        :href="routeName ? routeName : href"
        :type="computedType"
        :target="target"
        :disabled="disabled"
    >
        <BaseIcon v-if="icon" :path="icon" />
        <span v-if="label" :class="labelClass">{{ label }}</span>
    </component>
</template>