feat: made all components reactive

src/components/Spinner/Spinner.vue

@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import { useSpinnerClasses } from './useSpinnerClasses'
+import { toRefs } from 'vue'
 
 export type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
 export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'
@@ -22,5 +23,5 @@ const props = defineProps({
   },
 })
 
-const { spinnerClasses } = useSpinnerClasses(props)
+const { spinnerClasses } = useSpinnerClasses(toRefs(props))
 </script>

src/components/Spinner/useSpinnerClasses.ts

@@ -35,14 +35,14 @@ const colors: Record<SpinnerColor, string> = {
 }
 
 export type UseSpinnerClassesProps = {
-    size: SpinnerSize
-    color: SpinnerColor
+    size: Ref<SpinnerSize>
+    color: Ref<SpinnerColor>
 }
 
 export function useSpinnerClasses(props: UseSpinnerClassesProps): { spinnerClasses: Ref<string> } {
 
-    const sizeClasses = computed(() => sizes[props.size])
-    const colorClasses = computed(() => colors[props.color])
+    const sizeClasses = computed(() => sizes[props.size.value])
+    const colorClasses = computed(() => colors[props.color.value])
     const bgColorClasses = computed(() => 'text-gray-200 dark:text-gray-600')
     const animateClasses = computed(() => 'animate-spin')