add some files

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt3-reusable-components",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "private": false,
   "type": "module",
   "main": "index.js",

src/components/Ml/Button/MlButton.vue

@@ -2,38 +2,47 @@
   <button :class="rootClasses" @click="useRipple($event, true)">
     <div :class="outerClasses">
       <div :class="innerClasses">
-                <ml-spinner v-if="spinerPlace == 'prefix' && props.showSpiner" :color="props.spinerColor" :size="props.spinerSize" class="mx-2 fill-accent1" />
         <slot></slot>
-                <ml-spinner v-if="spinerPlace == 'suffix' && props.showSpiner" :color="props.spinerColor" :size="props.spinerSize" class="mx-2 fill-accent1" />
       </div>
     </div>
   </button>
 </template>
 
 <script setup lang="ts">
-import type { ButtonProps, PTAttribs } from './types';
-import { twMerge } from 'tailwind-merge';
+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'
+  spinerSize: "6",
+  spinerColor: "accent1",
+  spinerPlace: "prefix",
 });
 
 const classes = ref({
   root: {
-        class: `flex justify-center items-center disabled:opacity-60`
+    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' : ''}`
+    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' : ''}`
-    }
+    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));
+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>

src/components/Ml/Button/types.ts

@@ -2,7 +2,6 @@ export type ButtonProps = {
     rounded?: boolean;
     pt?: PTAttribs;
     spinerPlace?: spinerPlace;
-    showSpiner?: boolean;
 };
 
 export type PTAttribs = {