chore: improve types and imports

src/runtime/components/elements/AvatarGroup.vue

@@ -18,8 +18,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { classNames } from '../../utils/'
-import Avatar from './Avatar'
+import { classNames } from '../../utils'
+import Avatar from './Avatar.vue'
 import $ui from '#build/ui'
 
 const props = defineProps({

src/runtime/components/elements/Button.vue

@@ -14,8 +14,10 @@
 
 <script setup lang="ts">
 import { ref, computed, useSlots } from 'vue'
+import type { PropType } from 'vue'
+import type { RouteLocationNormalized } from 'vue-router'
 import NuxtLink from '#app/components/nuxt-link'
-import Icon from '../elements/Icon'
+import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
@@ -79,7 +81,7 @@ const props = defineProps({
     default: false
   },
   to: {
-    type: [String, Object],
+    type: [String, Object] as PropType<RouteLocationNormalized>,
     default: null
   },
   target: {

src/runtime/components/elements/Dropdown.vue

@@ -42,18 +42,28 @@ import {
   MenuItems,
   MenuItem
 } from '@headlessui/vue'
-
-import type { Ref } from 'vue'
+import type { Ref, PropType } from 'vue'
+import type { RouteLocationNormalized } from 'vue-router'
 import { ref, onMounted } from 'vue'
 import NuxtLink from '#app/components/nuxt-link'
-import Icon from '../elements/Icon'
-import Avatar from '../elements/Avatar'
+import Icon from '../elements/Icon.vue'
+import Avatar from '../elements/Avatar.vue'
 import { classNames, usePopper } from '../../utils'
+import type { Avatar as AvatarType } from '../../types/avatar'
 import $ui from '#build/ui'
 
 const props = defineProps({
   items: {
-    type: Array,
+    type: Array as PropType<{
+      to: RouteLocationNormalized
+      exact: boolean
+      label: string
+      disabled?: boolean
+      slot?: string
+      icon?: string
+      avatar?: Partial<AvatarType>
+      click?: Function
+    }[][]>,
     default: () => []
   },
   placement: {

src/runtime/components/elements/Link.vue

@@ -24,12 +24,14 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { PropType } from 'vue'
+import type { RouteLocationNormalized } from 'vue-router'
 import { RouterLink } from 'vue-router'
 
 const props = defineProps({
   ...RouterLink.props,
   to: {
-    type: [String, Object],
+    type: [String, Object] as PropType<RouteLocationNormalized>,
     default: null
   },
   inactiveClass: {

src/runtime/components/feedback/Alert.vue

@@ -25,7 +25,9 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import Icon from '../elements/Icon'
+import type { PropType } from 'vue'
+import type { RouteLocationNormalized } from 'vue-router'
+import Icon from '../elements/Icon.vue'
 
 const props = defineProps({
   variant: {
@@ -36,7 +38,7 @@ const props = defineProps({
     }
   },
   to: {
-    type: [String, Object],
+    type: [String, Object] as PropType<RouteLocationNormalized>,
     default: null
   },
   click: {

src/runtime/components/feedback/AlertDialog.vue

@@ -23,9 +23,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { DialogTitle, DialogDescription } from '@headlessui/vue'
-import Modal from '../overlays/Modal'
-import Button from '../elements/Button'
-import Icon from '../elements/Icon'
+import Modal from '../overlays/Modal.vue'
+import Button from '../elements/Button.vue'
+import Icon from '../elements/Icon.vue'
 import $ui from '#build/ui'
 
 const props = defineProps({

src/runtime/components/forms/Input.vue

@@ -30,7 +30,7 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { ref, computed, onMounted } from 'vue'
-import Icon from '../elements/Icon'
+import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
@@ -72,7 +72,7 @@ const props = defineProps({
     default: null
   },
   spellcheck: {
-    type: String,
+    type: Boolean,
     default: null
   },
   icon: {

src/runtime/components/forms/Select.vue

@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { get } from 'lodash-es'
-import Icon from '../elements/Icon'
+import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 

src/runtime/components/forms/SelectCustom.vue

@@ -83,6 +83,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import type { PropType } from 'vue'
 import {
   Combobox,
   ComboboxButton,
@@ -90,7 +91,7 @@ import {
   ComboboxOption,
   ComboboxInput
 } from '@headlessui/vue'
-import Icon from '../elements/Icon'
+import Icon from '../elements/Icon.vue'
 import { classNames, usePopper } from '../../utils'
 import $ui from '#build/ui'
 
@@ -100,7 +101,7 @@ const props = defineProps({
     default: ''
   },
   options: {
-    type: Array,
+    type: Array as PropType<{ disabled?: boolean }[]>,
     default: () => []
   },
   placement: {

src/runtime/components/forms/Toggle.vue

@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Switch } from '@headlessui/vue'
-import Icon from '../elements/Icon'
+import Icon from '../elements/Icon.vue'
 import $ui from '#build/ui'
 
 const props = defineProps({

src/runtime/components/layout/Card.vue

@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { classNames } from '../../utils/'
+import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
 const props = defineProps({

src/runtime/components/layout/Container.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { classNames } from '../../utils/'
+import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
 const props = defineProps({

src/runtime/components/navigation/CommandPalette.vue

@@ -7,7 +7,7 @@
   >
     <div class="flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800">
       <div class="relative flex items-center">
-        <UIcon :name="inputIcon" class="pointer-events-none absolute top-3.5 left-5 h-5 w-5 u-text-gray-400" aria-hidden="true" />
+        <Icon :name="inputIcon" class="pointer-events-none absolute top-3.5 left-5 h-5 w-5 u-text-gray-400" aria-hidden="true" />
         <ComboboxInput
           ref="comboboxInput"
           :value="query"
@@ -17,7 +17,7 @@
           @change="query = $event.target.value"
         />
 
-        <UButton v-if="closeIcon" :icon="closeIcon" variant="transparent" class="absolute right-3" @click="onClear" />
+        <Button v-if="closeIcon" :icon="closeIcon" variant="transparent" class="absolute right-3" @click="onClear" />
       </div>
 
       <ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2">
@@ -29,7 +29,7 @@
       </ComboboxOptions>
 
       <div v-else class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
-        <UIcon :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400" aria-hidden="true" />
+        <Icon :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400" aria-hidden="true" />
         <p class="mt-4 text-sm u-text-gray-900">
           {{ query ? "We couldn't find any items with that term. Please try again." : "We couldn't find any items." }}
         </p>
@@ -46,6 +46,8 @@ import { useFuse } from '@vueuse/integrations/useFuse'
 import { defu } from 'defu'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '../../types/command-palette'
+import Icon from '../elements/Icon.vue'
+import Button from '../elements/Button.vue'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 
 const props = defineProps({

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -15,8 +15,8 @@
       >
         <li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
           <div class="flex items-center flex-1 gap-3 min-w-0">
-            <UIcon v-if="command.icon" :name="command.icon" :class="['h-5 w-5 flex-shrink-0 text-opacity-40', active && 'text-opacity-100', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
-            <UAvatar
+            <Icon v-if="command.icon" :name="command.icon" :class="['h-5 w-5 flex-shrink-0 text-opacity-40', active && 'text-opacity-100', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
+            <Avatar
               v-else-if="command.avatar"
               v-bind="{ size: 'xxs', ...command.avatar }"
               class="flex-shrink-0"
@@ -32,7 +32,7 @@
             </div>
           </div>
 
-          <UIcon v-if="selected" name="heroicons-outline:check" class="h-5 w-5 absolute right-2 u-text-gray-900" aria-hidden="true" />
+          <Icon v-if="selected" name="heroicons-outline:check" class="h-5 w-5 absolute right-2 u-text-gray-900" aria-hidden="true" />
           <span v-else-if="active" class="flex-none u-text-gray-500">
             <slot :name="`${group.key}-active`" :group="group" :command="command">{{ group.active }}</slot>
           </span>
@@ -51,6 +51,8 @@
 <script setup lang="ts">
 import { ComboboxOption } from '@headlessui/vue'
 import type { PropType } from 'vue'
+import Icon from '../elements/Icon.vue'
+import Avatar from '../elements/Avatar.vue'
 import type { Group } from '../../types/command-palette'
 
 defineProps({

src/runtime/components/navigation/Pills.vue

@@ -15,12 +15,14 @@
 </template>
 
 <script setup lang="ts">
-import Link from '../elements/Link'
+import type { PropType } from 'vue'
+import type { RouteLocationNormalized } from 'vue-router'
+import Link from '../elements/Link.vue'
 import $ui from '#build/ui'
 
 defineProps({
   links: {
-    type: Array,
+    type: Array as PropType<{ to: RouteLocationNormalized, exact: boolean, label: string }[]>,
     required: true
   },
   wrapperClass: {

src/runtime/components/navigation/Tabs.vue

@@ -15,12 +15,14 @@
 </template>
 
 <script setup lang="ts">
-import Link from '../elements/Link'
+import type { PropType } from 'vue'
+import type { RouteLocationNormalized } from 'vue-router'
+import Link from '../elements/Link.vue'
 import $ui from '#build/ui'
 
 defineProps({
   links: {
-    type: Array,
+    type: Array as PropType<{ to: RouteLocationNormalized, exact: boolean, label: string }[]>,
     required: true
   },
   wrapperClass: {

src/runtime/components/navigation/VerticalNavigation.vue

@@ -38,14 +38,23 @@
 </template>
 
 <script setup lang="ts">
-import Icon from '../elements/Icon'
-import Link from '../elements/Link'
-import Avatar from '../elements/Avatar'
+import type { PropType } from 'vue'
+import Icon from '../elements/Icon.vue'
+import Link from '../elements/Link.vue'
+import Avatar from '../elements/Avatar.vue'
+import type { Avatar as AvatarType } from '../../types/avatar'
 import $ui from '#build/ui'
 
 defineProps({
   links: {
-    type: Array,
+    type: Array as PropType<{
+      label: string
+      icon?: string
+      iconClass?: string
+      avatar?: Partial<AvatarType>
+      click?: Function
+      badge?: string
+    }[]>,
     required: true
   },
   wrapperClass: {

src/runtime/components/overlays/Modal.vue

@@ -29,11 +29,11 @@
             >
               <DialogPanel :class="modalClass">
                 <Card
-                  base-class
-                  background-class
-                  shadow-class
-                  ring-class
-                  rounded-class
+                  base-class=""
+                  background-class=""
+                  shadow-class=""
+                  ring-class=""
+                  rounded-class=""
                   v-bind="$attrs"
                 >
                   <template v-if="$slots.header" #header>
@@ -56,8 +56,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
-import { classNames } from '../../utils/'
-import Card from '../layout/Card'
+import { classNames } from '../../utils'
+import Card from '../layout/Card.vue'
 import $ui from '#build/ui'
 
 const props = defineProps({

src/runtime/components/overlays/Notification.vue

@@ -66,8 +66,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
-
-import Icon from '../elements/Icon'
+import Icon from '../elements/Icon.vue'
 import { useTimer } from '../../composables/useTimer'
 import { classNames } from '../../utils'
 

src/runtime/components/overlays/Notifications.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import Notification from './Notification'
+import Notification from './Notification.vue'
 import { useNuxtApp, useState } from '#imports'
 
 const { $toast } = useNuxtApp()

src/runtime/components/overlays/Popover.vue

@@ -28,7 +28,6 @@
 import type { Ref } from 'vue'
 import { ref, onMounted } from 'vue'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-
 import { usePopper } from '../../utils'
 
 const props = defineProps({

src/runtime/components/overlays/Slideover.vue

@@ -43,7 +43,7 @@
 import { computed } from 'vue'
 import type { WritableComputedRef, PropType } from 'vue'
 import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
-import { classNames } from '../../utils/'
+import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
 const props = defineProps({

src/runtime/plugins/clipboard.client.ts

@@ -32,9 +32,3 @@ export default defineNuxtPlugin((nuxtApp) => {
     }
   }
 })
-
-declare module '#app' {
-  interface NuxtApp {
-    $clipboard: ClipboardPlugin
-  }
-}

src/runtime/plugins/toast.client.ts

@@ -44,9 +44,3 @@ export default defineNuxtPlugin(() => {
     }
   }
 })
-
-declare module '#app' {
-  interface NuxtApp {
-    $toast: ToastPlugin
-  }
-}

src/runtime/types/avatar.d.ts

@@ -0,0 +1,10 @@
+export interface Avatar {
+  src: string
+  alt: string
+  text: string
+  size: string
+  rounded: boolean
+  chip: boolean
+  chipVariant: string
+  chipPosition: string
+}

src/runtime/types/command-palette.d.ts

@@ -1,5 +1,6 @@
 import type { Ref, ComputedRef } from 'vue'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import type { Avatar } from './avatar'
 
 export interface Command {
   prefix?: string
@@ -7,7 +8,7 @@ export interface Command {
   label: string
   icon?: string
   iconClass?: string
-  avatar?: string
+  avatar?: Partial<Avatar>
   chip?: string
   disabled?: boolean
   shortcuts?: string[]