fix: type errors in sponsor components

src/client/theme-default/components/VPDocAsideSponsors.vue

@@ -1,18 +1,8 @@
 <script setup lang="ts">
+import type { Sponsors } from './VPSponsors.vue'
+import type { Sponsor } from './VPSponsorsGrid.vue'
 import VPSponsors from './VPSponsors.vue'
 
-export interface Sponsors {
-  tier?: string
-  size?: 'xmini' | 'mini' | 'small'
-  items: Sponsor[]
-}
-
-export interface Sponsor {
-  name: string
-  img: string
-  url: string
-}
-
 defineProps<{
   tier?: string
   size?: 'xmini' | 'mini' | 'small'
@@ -22,11 +12,6 @@ defineProps<{
 
 <template>
   <div class="VPDocAsideSponsors">
-    <VPSponsors
+    <VPSponsors mode="aside" :tier="tier" :size="size" :data="data" />
-      mode="aside"
-      :tier="tier"
-      :size="size"
-      :data="data"
-    />
   </div>
 </template>

src/client/theme-default/components/VPSponsors.vue

@@ -1,40 +1,34 @@
 <script setup lang="ts">
+import type { GridSize } from '../composables/sponsor-grid'
+import type { Sponsor } from './VPSponsorsGrid.vue'
 import { computed } from 'vue'
 import VPSponsorsGrid from './VPSponsorsGrid.vue'
 
 export interface Sponsors {
   tier?: string
-  size?: 'small' | 'medium' | 'big'
+  size?: GridSize
   items: Sponsor[]
 }
 
-export interface Sponsor {
-  name: string
-  img: string
-  url: string
-}
-
 const props = defineProps<{
   mode?: 'normal' | 'aside'
   tier?: string
-  size?: 'xmini' | 'small' | 'medium' | 'big'
+  size?: GridSize
   data: Sponsors[] | Sponsor[]
 }>()
 
 const sponsors = computed(() => {
   const isSponsors = props.data.some((s) => {
-    return !!(s as Sponsors).items
+    return 'items' in s
   })
 
   if (isSponsors) {
-    return props.data
+    return props.data as Sponsors[]
   }
 
-  return [{
+  return [
-    tier: props.tier,
+    { tier: props.tier, size: props.size, items: props.data as Sponsor[] }
-    size: props.size,
+  ]
-    items: props.data
-  }]
 })
 </script>
 

src/client/theme-default/components/VPSponsorsGrid.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { GridSize } from '../composables/sponsor-grid'
 import { ref } from 'vue'
 import { useSponsorsGrid } from '../composables/sponsor-grid'
 
@@ -9,7 +10,7 @@ export interface Sponsor {
 }
 
 const props = defineProps<{
-  size?: 'xmini' | 'mini' | 'small' | 'medium' | 'big'
+  size?: GridSize
   data: Sponsor[]
 }>()
 
@@ -19,12 +20,29 @@ useSponsorsGrid({ el, size: props.size })
 </script>
 
 <template>
-  <div class="VPSponsorsGrid vp-sponsor-grid" :class="[props.size ?? 'medium']" ref="el">
+  <div
-    <div v-for="sponsor in data" :key="sponsor.tier" class="vp-sponsor-grid-item">
+    class="VPSponsorsGrid vp-sponsor-grid"
-      <a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener">
+    :class="[props.size ?? 'medium']"
+    ref="el"
+  >
+    <div
+      v-for="sponsor in data"
+      :key="sponsor.name"
+      class="vp-sponsor-grid-item"
+    >
+      <a
+        class="vp-sponsor-grid-link"
+        :href="sponsor.url"
+        target="_blank"
+        rel="sponsored noopener"
+      >
         <article class="vp-sponsor-grid-box">
           <h4 class="visually-hidden">{{ sponsor.name }}</h4>
-          <img class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name" />
+          <img
+            class="vp-sponsor-grid-image"
+            :src="sponsor.img"
+            :alt="sponsor.name"
+          />
         </article>
       </a>
     </div>