chore(typescript): migrate components (#53)

src/runtime/components/elements/Avatar.vue

@@ -8,7 +8,7 @@
   </span>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
@@ -29,7 +29,7 @@ const props = defineProps({
   size: {
     type: String,
     default: 'md',
-    validator (value) {
+    validator (value: string) {
       return Object.keys($ui.avatar.size).includes(value)
     }
   },
@@ -44,14 +44,14 @@ const props = defineProps({
   chipVariant: {
     type: String,
     default: 'primary',
-    validator (value) {
+    validator (value: string) {
       return Object.keys($ui.avatar.chip.variant).includes(value)
     }
   },
   chipPosition: {
     type: String,
     default: 'top-right',
-    validator (value) {
+    validator (value: string) {
       return Object.keys($ui.avatar.chip.position).includes(value)
     }
   },

src/runtime/components/elements/Badge.vue

@@ -4,53 +4,46 @@
   </span>
 </template>
 
-<script>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
-export default {
-  props: {
-    size: {
-      type: String,
-      default: 'md',
-      validator (value) {
-        return Object.keys($ui.badge.size).includes(value)
-      }
-    },
-    variant: {
-      type: String,
-      default: 'primary',
-      validator (value) {
-        return Object.keys($ui.badge.variant).includes(value)
-      }
-    },
-    baseClass: {
-      type: String,
-      default: () => $ui.badge.base
-    },
-    rounded: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String,
-      default: null
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+    validator (value: string) {
+      return Object.keys($ui.badge.size).includes(value)
     }
   },
-  setup (props) {
-    const badgeClass = computed(() => {
-      return classNames(
-        props.baseClass,
-        $ui.badge.size[props.size],
-        $ui.badge.variant[props.variant],
-        props.rounded ? 'rounded-full' : 'rounded-md'
-      )
-    })
-
-    return {
-      badgeClass
+  variant: {
+    type: String,
+    default: 'primary',
+    validator (value: string) {
+      return Object.keys($ui.badge.variant).includes(value)
     }
+  },
+  baseClass: {
+    type: String,
+    default: () => $ui.badge.base
+  },
+  rounded: {
+    type: Boolean,
+    default: false
+  },
+  label: {
+    type: String,
+    default: null
   }
-}
+})
+
+const badgeClass = computed(() => {
+  return classNames(
+    props.baseClass,
+    $ui.badge.size[props.size],
+    $ui.badge.variant[props.variant],
+    props.rounded ? 'rounded-full' : 'rounded-md'
+  )
+})
 </script>

src/runtime/components/elements/Icon.vue

@@ -2,7 +2,9 @@
   <Icon :icon="icon" />
 </template>
 
-<script setup>
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { IconifyIcon } from '@iconify/vue'
 import { ref, watch } from 'vue'
 import { Icon } from '@iconify/vue/dist/offline'
 import { loadIcon } from '@iconify/vue'
@@ -14,7 +16,7 @@ const props = defineProps({
   }
 })
 
-const icon = ref(null)
+const icon: Ref<IconifyIcon> = ref(null)
 icon.value = await loadIcon(props.name)
 
 watch(() => props.name, async () => {