chore(typescript): migrate components (#53)

docs/pages/migration.vue

@@ -70,7 +70,8 @@ const components = [
     to: '/components/Avatar',
     nuxt3: true,
     preset: true,
-    capi: true
+    capi: true,
+    typescript: true
   },
   {
     label: 'AvatarGroup',
@@ -82,7 +83,8 @@ const components = [
     to: '/components/Badge',
     nuxt3: true,
     capi: true,
-    preset: true
+    preset: true,
+    typescript: true
   },
   {
     label: 'Button',
@@ -102,7 +104,8 @@ const components = [
     label: 'Icon',
     to: '/components/Icon',
     nuxt3: true,
-    capi: true
+    capi: true,
+    typescript: true
   },
   {
     label: 'Link',
@@ -115,7 +118,8 @@ const components = [
     to: '/components/Toggle',
     nuxt3: true,
     preset: true,
-    capi: true
+    capi: true,
+    typescript: true
   },
   {
     label: 'Alert',
@@ -127,7 +131,8 @@ const components = [
     to: '/components/AlertDialog',
     nuxt3: true,
     capi: true,
-    preset: true
+    preset: true,
+    typescript: true
   },
   {
     label: 'Input',
@@ -165,7 +170,8 @@ const components = [
   },
   {
     label: 'SelectCustom',
-    to: '/components/SelectCustom'
+    to: '/components/SelectCustom',
+    typescript: true
   },
   {
     label: 'Textarea',
@@ -186,21 +192,24 @@ const components = [
     to: '/components/Container',
     nuxt3: true,
     preset: true,
-    capi: true
+    capi: true,
+    typescript: true
   },
   {
     label: 'Tabs',
     to: '/components/Tabs',
     nuxt3: true,
     capi: true,
-    preset: true
+    preset: true,
+    typescript: true
   },
   {
     label: 'Pills',
     to: '/components/Pills',
     nuxt3: true,
     capi: true,
-    preset: true
+    preset: true,
+    typescript: true
   },
   {
     label: 'VerticalNavigation',
@@ -226,7 +235,8 @@ const components = [
     label: 'Notifications',
     to: '/components/Notifications',
     nuxt3: true,
-    capi: true
+    capi: true,
+    typescript: true
   },
   {
     label: 'Popover',
@@ -238,7 +248,8 @@ const components = [
     label: 'Slideover',
     to: '/components/Slideover',
     nuxt3: true,
-    capi: true
+    capi: true,
+    typescript: true
   },
   {
     label: 'Tooltip',

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 {
+const props = defineProps({
-  props: {
+  size: {
-    size: {
+    type: String,
-      type: String,
+    default: 'md',
-      default: 'md',
+    validator (value: string) {
-      validator (value) {
+      return Object.keys($ui.badge.size).includes(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
     }
   },
-  setup (props) {
+  variant: {
-    const badgeClass = computed(() => {
+    type: String,
-      return classNames(
+    default: 'primary',
-        props.baseClass,
+    validator (value: string) {
-        $ui.badge.size[props.size],
+      return Object.keys($ui.badge.variant).includes(value)
-        $ui.badge.variant[props.variant],
-        props.rounded ? 'rounded-full' : 'rounded-md'
-      )
-    })
-
-    return {
-      badgeClass
     }
+  },
+  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 () => {

src/runtime/components/feedback/AlertDialog.vue

@@ -20,7 +20,7 @@
   </Modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { DialogTitle, DialogDescription } from '@headlessui/vue'
 import Modal from '../overlays/Modal'

src/runtime/components/forms/SelectCustom.vue

@@ -44,7 +44,7 @@
   </Listbox>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import {
   Listbox,
@@ -76,7 +76,7 @@ const props = defineProps({
   size: {
     type: String,
     default: 'md',
-    validator (value) {
+    validator (value: string) {
       return Object.keys($ui.selectCustom.size).includes(value)
     }
   },
@@ -161,7 +161,7 @@ const iconClass = computed(() => {
 
 const iconWrapperClass = $ui.selectCustom.icon.trailing.wrapper
 
-function resolveOptionClass ({ active, disabled }) {
+function resolveOptionClass ({ active, disabled }: { active: boolean, disabled: boolean }) {
   return classNames(
     props.listOptionBaseClass,
     active ? props.listOptionActiveClass : props.listOptionInactiveClass,
@@ -169,7 +169,7 @@ function resolveOptionClass ({ active, disabled }) {
   )
 }
 
-function resolveOptionIconClass ({ active }) {
+function resolveOptionIconClass ({ active }: { active: boolean }) {
   return classNames(
     props.listOptionIconBaseClass,
     active ? props.listOptionIconActiveClass : props.listOptionIconInactiveClass

src/runtime/components/forms/Toggle.vue

@@ -14,7 +14,7 @@
   </Switch>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { Switch } from '@headlessui/vue'
 import Icon from '../elements/Icon'

src/runtime/components/layout/Container.vue

@@ -4,38 +4,31 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { classNames } from '../../utils/'
 import $ui from '#build/ui'
 
-export default {
+const props = defineProps({
-  props: {
+  padded: {
-    padded: {
+    type: Boolean,
-      type: Boolean,
+    default: false
-      default: false
-    },
-    constrained: {
-      type: Boolean,
-      default: true
-    },
-    constrainedClass: {
-      type: String,
-      default: () => $ui.container.constrained
-    }
   },
-  setup (props) {
+  constrained: {
-    const containerClass = computed(() => {
+    type: Boolean,
-      return classNames(
+    default: true
-        'mx-auto sm:px-6 lg:px-8',
+  },
-        props.padded && 'px-4',
+  constrainedClass: {
-        props.constrained && props.constrainedClass
+    type: String,
-      )
+    default: () => $ui.container.constrained
-    })
-
-    return {
-      containerClass
-    }
   }
-}
+})
+
+const containerClass = computed(() => {
+  return classNames(
+    'mx-auto sm:px-6 lg:px-8',
+    props.padded && 'px-4',
+    props.constrained && props.constrainedClass
+  )
+})
 </script>

src/runtime/components/navigation/Pills.vue

@@ -14,7 +14,7 @@
   </nav>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import Link from '../elements/Link'
 import $ui from '#build/ui'
 

src/runtime/components/navigation/Tabs.vue

@@ -14,7 +14,7 @@
   </nav>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import Link from '../elements/Link'
 import $ui from '#build/ui'
 

src/runtime/components/overlays/Notifications.vue

@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useNuxtApp, useState } from '#app'
 import Notification from './Notification'