library_components/src/components/Ml/Button/MlButton.vue

<template>
  <button :class="rootClasses" @click="useRipple($event, true)">
    <div :class="outerClasses">
      <div :class="innerClasses">
        <slot></slot>
      </div>
    </div>
  </button>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import type { ButtonProps, PTAttribs } from "./types";
import { twMerge } from "tailwind-merge";

const props = withDefaults(defineProps<ButtonProps>(), {
  rounded: true,
  spinerSize: "6",
  spinerColor: "accent1",
  spinerPlace: "prefix",
});

const classes = ref({
  root: {
    class: `flex justify-center items-center disabled:opacity-60`,
  },
  outer: {
    class: `bg-gradient-to-r from-accent1 to-accent2 p-[2px] w-full focus:outline-none ${
      props.rounded ? "rounded-3xl" : ""
    }`,
  },
  inner: {
    class: `justify-center flex items-center bg-white dark:bg-gradient-to-r px-5 py-2 w-full h-full font-semibold leading-[1.5] back ${
      props.rounded ? "rounded-3xl" : ""
    }`,
  },
} as PTAttribs);

const rootClasses = computed(() =>
  twMerge(classes.value.root?.class, props.pt?.root?.class)
);
const innerClasses = computed(() =>
  twMerge(classes.value.inner?.class, props.pt?.inner?.class)
);
const outerClasses = computed(() =>
  twMerge(classes.value.outer?.class, props.pt?.outer?.class)
);
</script>