sba-button.vue

<template>
  <component
    :is="as"
    class="btn items-center"
    v-bind="componentAttrs"
    @click="handleClick"
  >
    <slot />
  </component>
</template>

<script setup>
import classNames from 'classnames';
import { computed, useAttrs } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  as: {
    type: String,
    default: 'button',
    validator(value) {
      return ['a', 'button'].includes(value);
    },
  },
  href: {
    type: String,
    default: null,
  },
  size: {
    type: String,
    default: 'sm',
    validator(value) {
      return ['2xs', 'xs', 'sm', 'base'].includes(value);
    },
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  primary: {
    type: Boolean,
    default: false,
  },
});
const attrs = useAttrs();

const cssClasses = computed(() => {
  return {
    'px-1 py-0 text-xs': props.size === '2xs',
    'px-2 py-2 text-xs': props.size === 'xs',
    'px-3 py-2': props.size === 'sm',
    'px-4 py-3': props.size === 'base',
    'px-5 py-2.5': props.size === '',
    // Types
    'is-primary': props.primary === true,
  };
});

const componentAttrs = computed(() => {
  const common = {
    ...attrs,
    title: props.title,
    class: classNames(attrs.class, cssClasses.value),
  };

  if (props.as === 'a') {
    return {
      ...common,
      href: props.href,
    };
  }
  if (props.as === 'button') {
    return {
      ...common,
      disabled: props.disabled === true,
      type: props.type,
    };
  }
  return {};
});

const emit = defineEmits(['click']);
const handleClick = (event) => {
  if (props.as === 'button') {
    emit('click', event);
  }
  if (props.as === 'a') {
    event.stopPropagation();
  }
};
</script>

<style scoped>
.btn {
  @apply rounded-l rounded-r font-medium text-sm text-center text-black border-gray-300 border bg-white;
  @apply focus:ring-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500;
  @apply hover:bg-gray-100;
}

.btn:disabled {
  @apply text-gray-500 cursor-not-allowed bg-gray-100 hover:bg-gray-100;
}

.btn.is-danger {
  @apply text-white bg-red-600 hover:bg-red-700 focus:ring-red-300;
}

.btn.is-warning {
  @apply focus:outline-none text-gray-700 bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 font-medium text-sm;
}

.btn.is-info {
  @apply text-white bg-blue-700 hover:bg-blue-800  focus:ring-blue-300 font-medium text-sm focus:outline-none;
}

.btn.is-success {
  @apply text-white bg-green-700 hover:bg-green-800  focus:ring-green-300 font-medium text-sm focus:outline-none;
}

.btn.is-light {
  @apply text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100  focus:ring-gray-200 font-medium  text-sm;

  &.is-active {
    @apply bg-gray-300;
  }
}

.btn.is-extra-light {
  @apply text-white bg-gray-500 hover:bg-gray-400 focus:outline-none focus:ring-gray-300 font-medium  text-sm;

  &.is-active {
    @apply bg-gray-400;
  }
}

.btn.is-black {
  @apply text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-gray-300 font-medium  text-sm;
}

.btn.is-primary {
  @apply text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-300;
}

@supports (-moz-appearance: none) {
  .backdrop-filter.bg-opacity-40 {
    --tw-bg-opacity: 1 !important;
  }
}
</style>