fix: 'fix Cannot resolve TS type' errors

Part-of: <!87>

package.json

@@ -40,10 +40,10 @@
     "@modyfi/vite-plugin-yaml": "1.0.4",
     "@types/dompurify": "3.0.3",
     "@types/showdown": "2.0.1",
-    "@vitejs/plugin-vue": "4.2.3",
+    "@vitejs/plugin-vue": "4.4.1",
     "@vitest/coverage-v8": "0.34.5",
     "@vitest/ui": "0.34.5",
-    "@vue-macros/volar": "0.15.0",
+    "@vue-macros/volar": "0.17.2",
     "@vue/test-utils": "2.4.1",
     "@vue/tsconfig": "0.4.0",
     "@vueuse/core": "10.3.0",
@@ -54,14 +54,14 @@
     "magic-regexp": "0.7.0",
     "sass": "1.68.0",
     "typescript": "5.2.2",
-    "unplugin-vue-macros": "2.6.0",
+    "unplugin-vue-macros": "2.6.2",
     "vite": "4.4.9",
     "vitepress": "1.0.0-rc.4",
     "vitest": "0.34.1",
-    "vue": "3.3.4",
+    "vue": "3.3.8",
     "vue-i18n": "9.3.0-beta.24",
     "vue-router": "4.2.5",
-    "vue-tsc": "1.8.8"
+    "vue-tsc": "1.8.22"
   },
   "peerDependencies": {
     "@vueuse/core": "^9.3.0 || ^10.0.0",

src/components/activity/Activity.vue

@@ -4,6 +4,8 @@ import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
+import type { Track, User } from '~/types/models'
+
 const { t } = useI18n()
 
 const play = defineEmit<[track: Track]>()

src/components/button/Button.vue

@@ -2,6 +2,7 @@
 import { useColor } from '~/composables/colors'
 import { FwLoader } from '~/components'
 import { ref, computed, useSlots } from 'vue'
+import type { ColorProps } from '~/types/common-props'
 
 interface Props {
   outline?: boolean

src/components/card/album/Card.vue

@@ -3,6 +3,8 @@ import { FwCard, FwPlayButton, FwOptionsButton } from '~/components'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
+import type { Album } from '~/types/models'
+
 const { t } = useI18n()
 
 const play = defineEmit<[album: Album]>()

src/components/card/artist/Card.vue

@@ -3,6 +3,8 @@ import { FwCard, FwPlayButton, FwOptionsButton } from '~/components'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
+import type { Artist } from '~/types/models'
+
 const { t } = useI18n()
 
 const play = defineEmit<[artist: Artist]>()

src/components/card/playlist/Card.vue

@@ -4,6 +4,8 @@ import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
+import type { Playlist } from '~/types/models'
+
 const { t } = useI18n()
 
 const play = defineEmit<[playlist: Playlist]>()

src/components/card/podcast/Card.vue

@@ -2,6 +2,7 @@
 import { FwCard, FwOptionsButton } from '~/components'
 import { useTimeAgo } from '@vueuse/core'
 import { useRouter } from 'vue-router'
+import type { Podcast } from '~/types/models'
 
 const podcast = defineProp<Podcast>('podcast', { required: true })
 

src/components/card/radio/Card.vue

@@ -3,6 +3,8 @@ import { usePastel } from '~/composables/colors'
 import { FwCard, FwPlayButton } from '~/components'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import type { PastelProps } from '~/types/common-props'
+import type { Radio } from '~/types/models'
 
 const { t } = useI18n()
 

src/components/pill/Pill.vue

 <script setup lang="ts">
 import { useColorOrPastel } from '~/composables/colors'
+import type { ColorProps, PastelProps } from '~/types/common-props'
 
 const props = defineProps<ColorProps | PastelProps>()
 const color = useColorOrPastel(() => props.color, 'secondary')

src/composables/colors.ts

 import { toValue, type MaybeRefOrGetter } from "@vueuse/core"
 import { computed } from 'vue'
+import type { Color, Pastel } from '~/types/common-props'
 
 export function useColor(color: MaybeRefOrGetter<Color | undefined>, defaultColor: Color = 'primary') {
   return computed(() => `is-${toValue(color) ?? defaultColor}`)

src/types/common-props.d.ts

-declare type Color = 'primary' | 'secondary' | 'destructive'
-declare interface ColorProps {
-  color?: Color
-}
-
-declare type Pastel = 'red' | 'blue' | 'purple' | 'green' | 'yellow'
-declare interface PastelProps {
-  color?: Pastel
-}

src/types/common-props.ts

+export type Color = 'primary' | 'secondary' | 'destructive'
+export interface ColorProps {
+  color?: Color
+}
+
+export type Pastel = 'red' | 'blue' | 'purple' | 'green' | 'yellow'
+export interface PastelProps {
+  color?: Pastel
+}

src/types/models.d.ts → src/types/models.ts

-declare interface Track {
+export interface Track {
   id: number
   name: string
 
@@ -14,18 +14,18 @@ declare interface Track {
   }
 }
 
-declare interface User {
+export interface User {
   username: string
   full_username: string
 }
 
-declare interface Radio {
+export interface Radio {
   id: number
   name: string
   description: string
 }
 
-declare interface Podcast {
+export interface Podcast {
   name: string
   artist: {
     id: number
@@ -39,7 +39,7 @@ declare interface Podcast {
   }
 }
 
-declare interface Playlist {
+export interface Playlist {
   id: number
   name: string
   user: {
@@ -50,7 +50,7 @@ declare interface Playlist {
   album_covers: string[]
 }
 
-declare interface Artist {
+export interface Artist {
   id: number
   name: string
   tags: string[]
@@ -62,7 +62,7 @@ declare interface Artist {
   }
 }
 
-declare interface Album {
+export interface Album {
   id: number
   name: string
   artist: {

vite.config.ts

@@ -14,7 +14,6 @@ export default defineConfig({
         vue: Vue({
           script: {
             defineModel: true,
-            // @ts-expect-error upstream types are outdated
             globalTypeFiles: [
               fileURLToPath(new URL('./src/types/models.d.ts', import.meta.url)),
               fileURLToPath(new URL('./src/types/common-props.d.ts', import.meta.url))