add changes

components/Ml/Button/MlButton.vue

@@ -0,0 +1,45 @@
+<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 { useRipple } from "#imports";
+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: ``,
+  },
+  outer: {
+    class: ``,
+  },
+  inner: {
+    class: ``,
+  },
+} 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>

components/Ml/Button/types.ts

@@ -0,0 +1,19 @@
+export type ButtonProps = {
+    rounded?: boolean;
+    pt?: PTAttribs;
+    spinerPlace?: spinerPlace;
+};
+
+export type PTAttribs = {
+    root?: {
+        class: string;
+    };
+    outer?: {
+        class: string;
+    };
+    inner?: {
+        class: string;
+    };
+};
+
+export type spinerPlace = 'suffix' | 'prefix';