From e0f116c2bf5e9fdfc5ed420c431725c12d90c893 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 2 Jun 2022 10:38:25 +0300
Subject: [PATCH 1/5] Use `defineComponent`, add prop types and emit types

---
 src/components/VAllResultsGrid/VAudioCell.vue | 12 ++-
 .../VAudioDetails/VAudioDetails.vue           | 20 +++--
 .../VAudioDetails/VRelatedAudio.vue           | 22 +++---
 .../VContentReport/VContentReportPopover.vue  |  8 +-
 src/components/VErrorSection/VErrorImage.vue  |  3 +-
 .../VFilters/VLicenseExplanation.vue          |  8 +-
 .../VImageDetails/VImageDetails.vue           |  7 +-
 src/components/VItemGroup/VItem.vue           |  6 +-
 src/components/VItemGroup/VItemGroup.vue      | 79 ++++++++-----------
 src/components/VLicense/VLicense.vue          |  3 +-
 src/components/VLicense/VLicenseElements.vue  |  4 +-
 src/components/VLogoLoader/VLogoLoader.vue    |  2 +-
 src/components/VMediaTag/VMediaTag.vue        |  8 +-
 .../VSkeleton/VAudioTrackSkeleton.vue         |  8 +-
 src/components/VSkeleton/VBone.vue            |  8 +-
 src/components/VSkeleton/VGridSkeleton.vue    | 13 +--
 src/components/VSketchFabViewer.vue           |  5 +-
 17 files changed, 119 insertions(+), 97 deletions(-)

diff --git a/src/components/VAllResultsGrid/VAudioCell.vue b/src/components/VAllResultsGrid/VAudioCell.vue
index d31e5f6722..e59ab90625 100644
--- a/src/components/VAllResultsGrid/VAudioCell.vue
+++ b/src/components/VAllResultsGrid/VAudioCell.vue
@@ -2,13 +2,19 @@
   <VAudioTrack :audio="audio" layout="box" />
 </template>
 
-<script>
-import { defineComponent } from '@vue/composition-api'
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import { AudioDetail } from '~/models/media'
 
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
 export default defineComponent({
   components: { VAudioTrack },
-  props: ['audio'],
+  props: {
+    audio: {
+      type: Object as PropType<AudioDetail>,
+    },
+  },
 })
 </script>
diff --git a/src/components/VAudioDetails/VAudioDetails.vue b/src/components/VAudioDetails/VAudioDetails.vue
index 2c34dc00df..f5417855f3 100644
--- a/src/components/VAudioDetails/VAudioDetails.vue
+++ b/src/components/VAudioDetails/VAudioDetails.vue
@@ -85,16 +85,26 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import { AudioDetail } from '~/models/media'
+
 import VLink from '~/components/VLink.vue'
 import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 import VMediaTag from '~/components/VMediaTag/VMediaTag.vue'
+import VContentReportPopover from '~/components/VContentReport/VContentReportPopover.vue'
 
-export default {
+export default defineComponent({
   name: 'VAudioDetails',
-  components: { VAudioThumbnail, VLink, VMediaTag },
-  props: ['audio'],
-}
+  components: { VAudioThumbnail, VContentReportPopover, VLink, VMediaTag },
+  props: {
+    audio: {
+      type: Object as PropType<AudioDetail>,
+      required: true,
+    },
+  },
+})
 </script>
 
 <style scoped>
diff --git a/src/components/VAudioDetails/VRelatedAudio.vue b/src/components/VAudioDetails/VRelatedAudio.vue
index 400b756fab..b1bd7718cb 100644
--- a/src/components/VAudioDetails/VRelatedAudio.vue
+++ b/src/components/VAudioDetails/VRelatedAudio.vue
@@ -3,7 +3,10 @@
     <h4 class="text-2xl lg:text-3xl mb-6">
       {{ $t('audio-details.related-audios') }}
     </h4>
-    <div v-if="!fetchState.isError" class="flex flex-col gap-8 lg:gap-12 mb-12">
+    <div
+      v-if="!fetchState.fetchingError"
+      class="flex flex-col gap-8 lg:gap-12 mb-12"
+    >
       <VAudioTrack
         v-for="audio in media"
         :key="audio.id"
@@ -13,36 +16,37 @@
       />
       <LoadingIcon v-show="fetchState.isFetching" />
     </div>
-    <p v-show="!!fetchState.isError">
+    <p v-show="!!fetchState.fetchingError">
       {{ $t('media-details.related-error') }}
     </p>
   </aside>
 </template>
 
-<script>
-import { computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { isMinScreen } from '~/composables/use-media-query'
+import { FetchState } from '~/composables/use-fetch-state'
+import { AudioDetail } from '~/models/media'
 
 import LoadingIcon from '~/components/LoadingIcon.vue'
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
-export default {
+export default defineComponent({
   name: 'VRelatedAudio',
   components: { VAudioTrack, LoadingIcon },
   props: {
     media: {
-      type: Array,
+      type: Array as PropType<AudioDetail[]>,
       required: true,
     },
     fetchState: {
-      type: Object,
+      type: Object as PropType<FetchState>,
       required: true,
     },
   },
   /**
    * Fetches related audios on `audioId` change
-   * @return {{audioTrackSize: import('@nuxtjs/composition-api').ComputedRef<"l" | "s"> }}
    */
   setup() {
     const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
@@ -51,5 +55,5 @@ export default {
     })
     return { audioTrackSize }
   },
-}
+})
 </script>
diff --git a/src/components/VContentReport/VContentReportPopover.vue b/src/components/VContentReport/VContentReportPopover.vue
index 9f61dc3ab7..541e005b71 100644
--- a/src/components/VContentReport/VContentReportPopover.vue
+++ b/src/components/VContentReport/VContentReportPopover.vue
@@ -30,8 +30,10 @@
   </VPopover>
 </template>
 
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import { Media } from '~/models/media'
 
 import VIconButton from '~/components/VIconButton/VIconButton.vue'
 import VPopover from '~/components/VPopover/VPopover.vue'
@@ -54,7 +56,7 @@ export default defineComponent({
      * the media item to report; This can either be an audio track or an image.
      */
     media: {
-      type: Object,
+      type: Object as PropType<Media>,
       required: true,
     },
   },
diff --git a/src/components/VErrorSection/VErrorImage.vue b/src/components/VErrorSection/VErrorImage.vue
index a477a5d2ee..7cde19e325 100644
--- a/src/components/VErrorSection/VErrorImage.vue
+++ b/src/components/VErrorSection/VErrorImage.vue
@@ -15,7 +15,7 @@
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import type { License, LicenseVersion } from '~/constants/license'
-import { ErrorCode, errorCodes } from '~/constants/errors'
+import type { ErrorCode } from '~/constants/errors'
 import { AttributableMedia, getAttribution } from '~/utils/attribution-html'
 import { useI18n } from '~/composables/use-i18n'
 
@@ -40,7 +40,6 @@ export default defineComponent({
     errorCode: {
       type: String as PropType<ErrorCode>,
       required: true,
-      validator: (val: ErrorCode) => errorCodes.includes(val),
     },
   },
   setup(props) {
diff --git a/src/components/VFilters/VLicenseExplanation.vue b/src/components/VFilters/VLicenseExplanation.vue
index ba877cd0b9..16ede5239d 100644
--- a/src/components/VFilters/VLicenseExplanation.vue
+++ b/src/components/VFilters/VLicenseExplanation.vue
@@ -36,7 +36,9 @@
 </template>
 
 <script>
-import { isLicense, getLicenseUrl } from '~/utils/license'
+import { defineComponent } from '@nuxtjs/composition-api'
+
+import { getLicenseUrl, isLicense } from '~/utils/license'
 
 import VLicenseElements from '~/components/VLicense/VLicenseElements.vue'
 import VLink from '~/components/VLink.vue'
@@ -45,7 +47,7 @@ import VLink from '~/components/VLink.vue'
  * Renders the explanation of the license passed to it by breaking it down to
  * its constituent clauses.
  */
-export default {
+export default defineComponent({
   name: 'VLicenseExplanation',
   components: {
     VLicenseElements,
@@ -66,5 +68,5 @@ export default {
       getLicenseUrl,
     }
   },
-}
+})
 </script>
diff --git a/src/components/VImageDetails/VImageDetails.vue b/src/components/VImageDetails/VImageDetails.vue
index a77af8cd78..963dbca264 100644
--- a/src/components/VImageDetails/VImageDetails.vue
+++ b/src/components/VImageDetails/VImageDetails.vue
@@ -43,10 +43,11 @@
   </section>
 </template>
 
-<script>
-import { computed, defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { useI18n } from '~/composables/use-i18n'
+import { ImageDetail } from '~/models/media'
 
 import VContentReportPopover from '~/components/VContentReport/VContentReportPopover.vue'
 import VLink from '~/components/VLink.vue'
@@ -57,7 +58,7 @@ export default defineComponent({
   components: { VContentReportPopover, VLink, VMediaTag },
   props: {
     image: {
-      type: Object,
+      type: Object as PropType<ImageDetail>,
       required: true,
     },
     imageWidth: {
diff --git a/src/components/VItemGroup/VItem.vue b/src/components/VItemGroup/VItem.vue
index ad6ed52c1b..a4b8351408 100644
--- a/src/components/VItemGroup/VItem.vue
+++ b/src/components/VItemGroup/VItem.vue
@@ -49,13 +49,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   defineComponent,
   inject,
   ref,
   computed,
   watch,
+  PropType,
 } from '@nuxtjs/composition-api'
 
 import { warn } from '~/utils/console'
@@ -96,9 +97,8 @@ export default defineComponent({
      * @variants 'button', 'VLink'
      */
     as: {
-      type: String,
+      type: String as PropType<'button' | 'VLink'>,
       default: 'button',
-      validator: (val) => ['button', 'VLink'].includes(val),
     },
   },
   /**
diff --git a/src/components/VItemGroup/VItemGroup.vue b/src/components/VItemGroup/VItemGroup.vue
index 00e5a3e41d..c0fa5e3bd4 100644
--- a/src/components/VItemGroup/VItemGroup.vue
+++ b/src/components/VItemGroup/VItemGroup.vue
@@ -19,12 +19,15 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   defineComponent,
   provide,
   ref,
   readonly,
+  InjectionKey,
+  PropType,
+  Ref,
 } from '@nuxtjs/composition-api'
 import { ensureFocus } from 'reakit-utils/ensureFocus'
 
@@ -32,31 +35,27 @@ import { useI18n } from '~/composables/use-i18n'
 
 import { keycodes } from '~/constants/key-codes'
 
-/**
- * @typedef VItemGroupContext
- * @property {'vertical' | 'horizontal'} direction
- * @property {boolean} bordered
- * @property {'menu' | 'radiogroup'} type
- * @property {'small' | 'medium'} size
- */
-
-/**
- * @type {import('@nuxtjs/composition-api').InjectionKey<VItemGroupContext>}
- */
-export const VItemGroupContextKey = Symbol('VItemGroupContext')
-
-/**
- * @typedef VItemGroupFocusContext
- * @property {import('@nuxtjs/composition-api').Readonly<import('@nuxtjs/composition-api').Ref<boolean>>} isGroupFocused
- * @property {(event: KeyboardEvent) => void} onItemKeyPress
- * @property {import('@nuxtjs/composition-api').Readonly<import('@nuxtjs/composition-api').Ref<number>>} selectedCount
- * @property {(selected: boolean, previousSelected: boolean) => void} setSelected
- */
-
-/**
- * @type {import('@nuxtjs/composition-api').InjectionKey<VItemGroupFocusContext>}
- */
-export const VItemGroupFocusContextKey = Symbol('VItemGroupFocusContext')
+type VItemGroupContext = {
+  direction: 'vertical' | 'horizontal' | 'columns'
+  bordered: boolean
+  type: 'menu' | 'radiogroup'
+  size: 'small' | 'medium'
+}
+
+export const VItemGroupContextKey = Symbol(
+  'VItemGroupContext'
+) as InjectionKey<VItemGroupContext>
+
+type VItemGroupFocusContext = {
+  isGroupFocused: Readonly<Ref<boolean>>
+  onItemKeyPress: (event: KeyboardEvent) => void
+  selectedCount: Readonly<Ref<number>>
+  setSelected: (selected: boolean, previousSelected: boolean) => void
+}
+
+export const VItemGroupFocusContextKey = Symbol(
+  'VItemGroupFocusContext'
+) as InjectionKey<VItemGroupFocusContext>
 
 const arrows = [
   keycodes.ArrowUp,
@@ -74,11 +73,8 @@ export default defineComponent({
      * @default 'vertical'
      */
     direction: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'vertical' | 'horizontal' | 'columns' >} */ (
-        String
-      ),
+      type: String as PropType<VItemGroupContext['direction']>,
       default: 'vertical',
-      validate: (v) => ['vertical', 'horizontal', 'columns'].includes(v),
     },
     /**
      * Whether to render a bordered, separated list of items. When false each
@@ -105,11 +101,8 @@ export default defineComponent({
      * @default 'menu'
      */
     type: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'menu' | 'radiogroup'>} */ (
-        String
-      ),
+      type: String as PropType<VItemGroupContext['type']>,
       default: 'menu',
-      validate: (v) => ['menu', 'radiogroup'].includes(v),
     },
     /**
      * Size of the item group corresponds to the size of the component.
@@ -117,9 +110,8 @@ export default defineComponent({
      * @default 'small'
      */
     size: {
-      type: String,
+      type: String as PropType<VItemGroupContext['size']>,
       default: 'small',
-      validate: (val) => ['small', 'medium'].includes(val),
     },
   },
   setup(props) {
@@ -135,21 +127,18 @@ export default defineComponent({
      * because the DOM order gets reversed to be opposite the visual order relative to left/right movement.
      *
      * For vertical locales it should remain the same.
-     * @param {string} ltr
-     * @param {string} rtl
+     * @param ltr
+     * @param rtl
      */
-    const resolveArrow = (ltr, rtl) => {
+    const resolveArrow = (ltr: string, rtl: string) => {
       return i18n.localeProperties.dir === 'rtl' &&
         props.direction === 'horizontal'
         ? rtl
         : ltr
     }
 
-    /**
-     * @param {KeyboardEvent} event
-     */
-    const onItemKeyPress = (event) => {
-      if (!arrows.includes(event.key) || !nodeRef.value) return
+    const onItemKeyPress = (event: KeyboardEvent) => {
+      if (!Array.from(arrows).includes(event.key) || !nodeRef.value) return
 
       event.preventDefault()
 
@@ -158,7 +147,7 @@ export default defineComponent({
       // While VItem ultimately renders a button at the moment, that could change in the future, so using a data attribute selector makes it more flexible for the future
       const items = Array.from(
         nodeRef.value.querySelectorAll('[data-item-group-item]')
-      )
+      ) as HTMLElement[]
 
       const targetIndex = items.findIndex((item) => item === target)
 
diff --git a/src/components/VLicense/VLicense.vue b/src/components/VLicense/VLicense.vue
index ab44ec0265..474450ad70 100644
--- a/src/components/VLicense/VLicense.vue
+++ b/src/components/VLicense/VLicense.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
-import { ALL_LICENSES, License, LICENSE_ICONS } from '~/constants/license'
+import { License, LICENSE_ICONS } from '~/constants/license'
 import { getFullLicenseName, getElements } from '~/utils/license'
 import { useI18n } from '~/composables/use-i18n'
 
@@ -40,7 +40,6 @@ export default defineComponent({
     license: {
       type: String as PropType<License>,
       required: true,
-      validator: (val: License) => ALL_LICENSES.includes(val as License),
     },
     /**
      * Whether to display icons filled with a white background or leave them transparent.
diff --git a/src/components/VLicense/VLicenseElements.vue b/src/components/VLicense/VLicenseElements.vue
index 7773701f7d..54ea7622ca 100644
--- a/src/components/VLicense/VLicenseElements.vue
+++ b/src/components/VLicense/VLicenseElements.vue
@@ -24,7 +24,7 @@
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import type { License } from '~/constants/license'
-import { ALL_LICENSES, LICENSE_ICONS } from '~/constants/license'
+import { LICENSE_ICONS } from '~/constants/license'
 
 import { getElements } from '~/utils/license'
 
@@ -41,7 +41,6 @@ export default defineComponent({
     license: {
       type: String as PropType<License>,
       required: true,
-      validator: (val: License) => ALL_LICENSES.includes(val),
     },
     /**
      * the size of the icons and text
@@ -49,7 +48,6 @@ export default defineComponent({
     size: {
       type: String as PropType<'big' | 'small'>,
       default: 'big',
-      validator: (val: 'big' | 'small') => ['big', 'small'].includes(val),
     },
   },
   setup(props) {
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 55551f550b..40e4e440a2 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -39,7 +39,7 @@
   </svg>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api'
 
 import { useReducedMotion } from '~/composables/use-media-query'
diff --git a/src/components/VMediaTag/VMediaTag.vue b/src/components/VMediaTag/VMediaTag.vue
index c103ac25dd..1bb066982b 100644
--- a/src/components/VMediaTag/VMediaTag.vue
+++ b/src/components/VMediaTag/VMediaTag.vue
@@ -9,12 +9,14 @@
   </Component>
 </template>
 
-<script>
+<script lang="ts">
 /**
  * Displays a tag associated with a media item. If set up as a link, it can be
  * used as a link to find other items that are similarly tagged.
  */
-export default {
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
   name: 'MediaTag',
   props: {
     /**
@@ -26,5 +28,5 @@ export default {
       default: 'span',
     },
   },
-}
+})
 </script>
diff --git a/src/components/VSkeleton/VAudioTrackSkeleton.vue b/src/components/VSkeleton/VAudioTrackSkeleton.vue
index 751f3b9f4b..2513015dc1 100644
--- a/src/components/VSkeleton/VAudioTrackSkeleton.vue
+++ b/src/components/VSkeleton/VAudioTrackSkeleton.vue
@@ -30,15 +30,17 @@
   </article>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
   name: 'VAudioTrackSkeleton',
   methods: {
     getRandomSize(max = 250, min = 70) {
       return Math.floor(Math.random() * (max - min) + min)
     },
   },
-}
+})
 </script>
 
 <style scoped>
diff --git a/src/components/VSkeleton/VBone.vue b/src/components/VSkeleton/VBone.vue
index 9802aec417..b947517fae 100644
--- a/src/components/VSkeleton/VBone.vue
+++ b/src/components/VSkeleton/VBone.vue
@@ -2,11 +2,13 @@
   <div :class="['bg-dark-charcoal-10', shimmer ? 'shimmering' : '']" />
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
   name: 'VBone',
   props: { shimmer: { type: Boolean, default: true } },
-}
+})
 </script>
 
 <style scoped>
diff --git a/src/components/VSkeleton/VGridSkeleton.vue b/src/components/VSkeleton/VGridSkeleton.vue
index 2249c7b2c3..9db98d942c 100644
--- a/src/components/VSkeleton/VGridSkeleton.vue
+++ b/src/components/VSkeleton/VGridSkeleton.vue
@@ -22,22 +22,25 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
 /**
  * Display placeholder elements while waiting for the actual elements to be
  * loaded in the results views.
  */
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import { SupportedSearchType } from '~/constants/media'
+
 import VAudioTrackSkeleton from '~/components/VSkeleton/VAudioTrackSkeleton.vue'
 import VBone from '~/components/VSkeleton/VBone.vue'
 
-export default {
+export default defineComponent({
   name: 'VGridSkeleton',
   components: { VAudioTrackSkeleton, VBone },
   props: {
     isForTab: {
-      type: String,
+      type: String as PropType<SupportedSearchType>,
       default: 'image',
-      validator: (val) => ['all', 'image', 'audio'].includes(val),
     },
     numElems: {
       type: Number,
@@ -55,7 +58,7 @@ export default {
 
     return { getRandomSize }
   },
-}
+})
 </script>
 
 <style scoped>
diff --git a/src/components/VSketchFabViewer.vue b/src/components/VSketchFabViewer.vue
index 2aa37dcb5e..c5729323e5 100644
--- a/src/components/VSketchFabViewer.vue
+++ b/src/components/VSketchFabViewer.vue
@@ -24,6 +24,7 @@ import {
 
 import { useI18n } from '~/composables/use-i18n'
 import { loadScript } from '~/utils/load-script'
+import { defineEvent } from '~/types/emits'
 
 const sketchfabUrl =
   'https://static.sketchfab.com/api/sketchfab-viewer-1.10.1.js'
@@ -47,7 +48,9 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['failure'],
+  emits: {
+    failure: defineEvent(),
+  },
   setup(props, { emit }) {
     const i18n = useI18n()
     const label = i18n

From 7b50f235fa16ed1583ec3150769cf3a1749d5aa8 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 21 Jun 2022 20:31:31 +0300
Subject: [PATCH 2/5] Update the pot file

---
 src/locales/po-files/openverse.pot | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 82134d9681..b6cfae75a9 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-06-18T04:57:35+00:00\n"
+"POT-Creation-Date: 2022-06-21T17:31:14+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -24,7 +24,7 @@ msgid "Skip to content"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VSketchFabViewer.vue:54
+#: src/components/VSketchFabViewer.vue:57
 msgctxt "sketchfab-iframe-title"
 msgid "###sketchfab### viewer"
 msgstr ""
@@ -517,7 +517,7 @@ msgctxt "image-details.information.pixels"
 msgid "pixels"
 msgstr ""
 
-#: src/components/VImageDetails/VImageDetails.vue:83
+#: src/components/VImageDetails/VImageDetails.vue:84
 msgctxt "image-details.information.unknown"
 msgid "Unknown"
 msgstr ""
@@ -539,7 +539,7 @@ msgctxt "media-details.loading"
 msgid "Loading..."
 msgstr ""
 
-#: src/components/VAudioDetails/VRelatedAudio.vue:17
+#: src/components/VAudioDetails/VRelatedAudio.vue:20
 msgctxt "media-details.related-error"
 msgid "Error fetching related media"
 msgstr ""

From b655f560802873b1f369f1c959c3e60b1a3272ce Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 21 Jun 2022 20:52:08 +0300
Subject: [PATCH 3/5] Add more files to tsconfig

---
 src/components/VAllResultsGrid/VAudioCell.vue |  3 ++-
 .../VAudioDetails/VRelatedAudio.vue           | 20 +++++++++++-------
 .../VContentReport/VContentReportForm.vue     | 21 +++++++++++++++----
 .../VFilters/VLicenseExplanation.vue          |  8 ++++---
 src/components/VItemGroup/VItemGroup.vue      |  2 +-
 .../VLogoLoader/VLogoLoader.types.js          | 13 ------------
 src/components/VLogoLoader/VLogoLoader.vue    | 16 ++++++++++----
 src/components/VSkeleton/VGridSkeleton.vue    |  2 +-
 tsconfig.json                                 | 10 +++++++++
 9 files changed, 61 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/VLogoLoader/VLogoLoader.types.js

diff --git a/src/components/VAllResultsGrid/VAudioCell.vue b/src/components/VAllResultsGrid/VAudioCell.vue
index e59ab90625..1e863c4d19 100644
--- a/src/components/VAllResultsGrid/VAudioCell.vue
+++ b/src/components/VAllResultsGrid/VAudioCell.vue
@@ -5,7 +5,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from '@nuxtjs/composition-api'
 
-import { AudioDetail } from '~/models/media'
+import type { AudioDetail } from '~/models/media'
 
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
@@ -14,6 +14,7 @@ export default defineComponent({
   props: {
     audio: {
       type: Object as PropType<AudioDetail>,
+      required: true,
     },
   },
 })
diff --git a/src/components/VAudioDetails/VRelatedAudio.vue b/src/components/VAudioDetails/VRelatedAudio.vue
index b1bd7718cb..903f75d2df 100644
--- a/src/components/VAudioDetails/VRelatedAudio.vue
+++ b/src/components/VAudioDetails/VRelatedAudio.vue
@@ -1,5 +1,5 @@
 <template>
-  <aside :aria-label="$t('audio-details.related-audios')">
+  <aside :aria-label="$t('audio-details.related-audios').toString()">
     <h4 class="text-2xl lg:text-3xl mb-6">
       {{ $t('audio-details.related-audios') }}
     </h4>
@@ -23,11 +23,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  PropType,
+} from '@nuxtjs/composition-api'
 
 import { isMinScreen } from '~/composables/use-media-query'
-import { FetchState } from '~/composables/use-fetch-state'
-import { AudioDetail } from '~/models/media'
+import type { FetchState } from '~/composables/use-fetch-state'
+import type { AudioDetail } from '~/models/media'
 
 import LoadingIcon from '~/components/LoadingIcon.vue'
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
@@ -50,9 +55,10 @@ export default defineComponent({
    */
   setup() {
     const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
-    const audioTrackSize = computed(() => {
-      return isMinScreenMd.value ? 'l' : 's'
-    })
+
+    const audioTrackSize: ComputedRef<'l' | 's'> = computed(() =>
+      isMinScreenMd.value ? 'l' : 's'
+    )
     return { audioTrackSize }
   },
 })
diff --git a/src/components/VContentReport/VContentReportForm.vue b/src/components/VContentReport/VContentReportForm.vue
index 8d4ffd6159..0b4c02ee1b 100644
--- a/src/components/VContentReport/VContentReportForm.vue
+++ b/src/components/VContentReport/VContentReportForm.vue
@@ -107,8 +107,13 @@
   </div>
 </template>
 
-<script>
-import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+} from '@nuxtjs/composition-api'
 
 import ReportService from '~/data/report-service'
 
@@ -122,6 +127,8 @@ import {
   DMCA_FORM_URL,
 } from '~/constants/content-report'
 
+import type { Media } from '~/models/media'
+
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VRadio from '~/components/VRadio/VRadio.vue'
@@ -142,8 +149,14 @@ export default defineComponent({
     VReportDescForm,
   },
   props: {
-    media: { required: true },
-    providerName: { required: true },
+    media: {
+      type: Object as PropType<Media>,
+      required: true,
+    },
+    providerName: {
+      type: String,
+      required: true,
+    },
     reportService: { required: false },
     closeFn: { required: true },
   },
diff --git a/src/components/VFilters/VLicenseExplanation.vue b/src/components/VFilters/VLicenseExplanation.vue
index 16ede5239d..a1651fac27 100644
--- a/src/components/VFilters/VLicenseExplanation.vue
+++ b/src/components/VFilters/VLicenseExplanation.vue
@@ -35,11 +35,13 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { getLicenseUrl, isLicense } from '~/utils/license'
 
+import type { License } from '~/constants/license'
+
 import VLicenseElements from '~/components/VLicense/VLicenseElements.vue'
 import VLink from '~/components/VLink.vue'
 
@@ -58,7 +60,7 @@ export default defineComponent({
      * the code of the license whose elements need to be explained
      */
     license: {
-      type: String,
+      type: String as PropType<License>,
       required: true,
     },
   },
diff --git a/src/components/VItemGroup/VItemGroup.vue b/src/components/VItemGroup/VItemGroup.vue
index c0fa5e3bd4..7197af8e51 100644
--- a/src/components/VItemGroup/VItemGroup.vue
+++ b/src/components/VItemGroup/VItemGroup.vue
@@ -173,7 +173,7 @@ export default defineComponent({
      * @param {boolean} selected
      * @param {boolean} previousSelected
      */
-    const setSelected = (selected, previousSelected) => {
+    const setSelected = (selected: boolean, previousSelected: boolean) => {
       if (previousSelected && !selected) selectedCount.value -= 1
       if (!previousSelected && selected) selectedCount.value += 1
     }
diff --git a/src/components/VLogoLoader/VLogoLoader.types.js b/src/components/VLogoLoader/VLogoLoader.types.js
deleted file mode 100644
index 17570da627..0000000000
--- a/src/components/VLogoLoader/VLogoLoader.types.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export const propTypes = {
-  status: {
-    type: /** @type {'loading'|'idle'} */ (String),
-    default: 'idle',
-    required: false,
-  },
-  autoResize: {
-    type: Boolean,
-    default: true,
-  },
-}
-
-/** @typedef {import('@nuxtjs/composition-api').ExtractPropTypes<typeof propTypes>} Props */
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 40e4e440a2..d3200deda3 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -40,15 +40,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { useReducedMotion } from '~/composables/use-media-query'
 
-import { propTypes } from './VLogoLoader.types'
-
 export default defineComponent({
   name: 'VLogoLoader',
-  props: propTypes,
+  props: {
+    status: {
+      type: String as PropType<'loading' | 'idle'>,
+      default: 'idle',
+      required: false,
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+  },
   setup() {
     const prefersReducedMotion = useReducedMotion()
 
diff --git a/src/components/VSkeleton/VGridSkeleton.vue b/src/components/VSkeleton/VGridSkeleton.vue
index 9db98d942c..103de65c37 100644
--- a/src/components/VSkeleton/VGridSkeleton.vue
+++ b/src/components/VSkeleton/VGridSkeleton.vue
@@ -29,7 +29,7 @@
  */
 import { defineComponent, PropType } from '@nuxtjs/composition-api'
 
-import { SupportedSearchType } from '~/constants/media'
+import type { SupportedSearchType } from '~/constants/media'
 
 import VAudioTrackSkeleton from '~/components/VSkeleton/VAudioTrackSkeleton.vue'
 import VBone from '~/components/VSkeleton/VBone.vue'
diff --git a/tsconfig.json b/tsconfig.json
index 2da2e5edd5..0be851ebe3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -67,6 +67,16 @@
     "src/components/VCopyButton.vue",
     "src/components/VMediaInfo/**.vue",
     "src/components/VSketchFabViewer.vue",
+    "src/components/VAllResultsGrid/VAudioCell.vue",
+    "src/components/VErrorSection/VErrorImage.vue",
+    "src/components/VFilters/VLicenseExplanation.vue",
+    "src/components/VLicense/VLicense.vue",
+    "src/components/VLicense/VLicenseElements.vue",
+    "src/components/VLogoLoader/VLogoLoader.vue",
+    "src/components/VMediaTag/VMediaTag.vue",
+    "src/components/VSkeleton/VBone.vue",
+    "src/components/VSkeleton/VAudioTrackSkeleton.vue",
+    "src/components/VSkeleton/VGridSkeleton.vue",
     "src/pages/feedback.vue",
     "src/pages/search-help.vue",
     "src/pages/extension.vue",

From d77cdc0ced7da9f9b87db6aeed16a475e8ae942a Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 27 Jun 2022 17:22:46 +0300
Subject: [PATCH 4/5] Remove changes that cannot be added to tsconfig

---
 .../VAudioDetails/VAudioDetails.vue           | 20 ++---
 .../VAudioDetails/VRelatedAudio.vue           | 36 +++------
 .../VContentReport/VContentReportForm.vue     | 21 +----
 .../VContentReport/VContentReportPopover.vue  |  8 +-
 .../VImageDetails/VImageDetails.vue           |  7 +-
 src/components/VItemGroup/VItem.vue           |  6 +-
 src/components/VItemGroup/VItemGroup.vue      | 81 +++++++++++--------
 src/components/VSketchFabViewer.vue           |  5 +-
 tsconfig.json                                 | 40 +++++----
 9 files changed, 96 insertions(+), 128 deletions(-)

diff --git a/src/components/VAudioDetails/VAudioDetails.vue b/src/components/VAudioDetails/VAudioDetails.vue
index f5417855f3..2c34dc00df 100644
--- a/src/components/VAudioDetails/VAudioDetails.vue
+++ b/src/components/VAudioDetails/VAudioDetails.vue
@@ -85,26 +85,16 @@
   </section>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from '@nuxtjs/composition-api'
-
-import { AudioDetail } from '~/models/media'
-
+<script>
 import VLink from '~/components/VLink.vue'
 import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 import VMediaTag from '~/components/VMediaTag/VMediaTag.vue'
-import VContentReportPopover from '~/components/VContentReport/VContentReportPopover.vue'
 
-export default defineComponent({
+export default {
   name: 'VAudioDetails',
-  components: { VAudioThumbnail, VContentReportPopover, VLink, VMediaTag },
-  props: {
-    audio: {
-      type: Object as PropType<AudioDetail>,
-      required: true,
-    },
-  },
-})
+  components: { VAudioThumbnail, VLink, VMediaTag },
+  props: ['audio'],
+}
 </script>
 
 <style scoped>
diff --git a/src/components/VAudioDetails/VRelatedAudio.vue b/src/components/VAudioDetails/VRelatedAudio.vue
index 903f75d2df..400b756fab 100644
--- a/src/components/VAudioDetails/VRelatedAudio.vue
+++ b/src/components/VAudioDetails/VRelatedAudio.vue
@@ -1,12 +1,9 @@
 <template>
-  <aside :aria-label="$t('audio-details.related-audios').toString()">
+  <aside :aria-label="$t('audio-details.related-audios')">
     <h4 class="text-2xl lg:text-3xl mb-6">
       {{ $t('audio-details.related-audios') }}
     </h4>
-    <div
-      v-if="!fetchState.fetchingError"
-      class="flex flex-col gap-8 lg:gap-12 mb-12"
-    >
+    <div v-if="!fetchState.isError" class="flex flex-col gap-8 lg:gap-12 mb-12">
       <VAudioTrack
         v-for="audio in media"
         :key="audio.id"
@@ -16,50 +13,43 @@
       />
       <LoadingIcon v-show="fetchState.isFetching" />
     </div>
-    <p v-show="!!fetchState.fetchingError">
+    <p v-show="!!fetchState.isError">
       {{ $t('media-details.related-error') }}
     </p>
   </aside>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  ComputedRef,
-  defineComponent,
-  PropType,
-} from '@nuxtjs/composition-api'
+<script>
+import { computed } from '@nuxtjs/composition-api'
 
 import { isMinScreen } from '~/composables/use-media-query'
-import type { FetchState } from '~/composables/use-fetch-state'
-import type { AudioDetail } from '~/models/media'
 
 import LoadingIcon from '~/components/LoadingIcon.vue'
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
-export default defineComponent({
+export default {
   name: 'VRelatedAudio',
   components: { VAudioTrack, LoadingIcon },
   props: {
     media: {
-      type: Array as PropType<AudioDetail[]>,
+      type: Array,
       required: true,
     },
     fetchState: {
-      type: Object as PropType<FetchState>,
+      type: Object,
       required: true,
     },
   },
   /**
    * Fetches related audios on `audioId` change
+   * @return {{audioTrackSize: import('@nuxtjs/composition-api').ComputedRef<"l" | "s"> }}
    */
   setup() {
     const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
-
-    const audioTrackSize: ComputedRef<'l' | 's'> = computed(() =>
-      isMinScreenMd.value ? 'l' : 's'
-    )
+    const audioTrackSize = computed(() => {
+      return isMinScreenMd.value ? 'l' : 's'
+    })
     return { audioTrackSize }
   },
-})
+}
 </script>
diff --git a/src/components/VContentReport/VContentReportForm.vue b/src/components/VContentReport/VContentReportForm.vue
index 0b4c02ee1b..8d4ffd6159 100644
--- a/src/components/VContentReport/VContentReportForm.vue
+++ b/src/components/VContentReport/VContentReportForm.vue
@@ -107,13 +107,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  ref,
-} from '@nuxtjs/composition-api'
+<script>
+import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
 
 import ReportService from '~/data/report-service'
 
@@ -127,8 +122,6 @@ import {
   DMCA_FORM_URL,
 } from '~/constants/content-report'
 
-import type { Media } from '~/models/media'
-
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VRadio from '~/components/VRadio/VRadio.vue'
@@ -149,14 +142,8 @@ export default defineComponent({
     VReportDescForm,
   },
   props: {
-    media: {
-      type: Object as PropType<Media>,
-      required: true,
-    },
-    providerName: {
-      type: String,
-      required: true,
-    },
+    media: { required: true },
+    providerName: { required: true },
     reportService: { required: false },
     closeFn: { required: true },
   },
diff --git a/src/components/VContentReport/VContentReportPopover.vue b/src/components/VContentReport/VContentReportPopover.vue
index 541e005b71..9f61dc3ab7 100644
--- a/src/components/VContentReport/VContentReportPopover.vue
+++ b/src/components/VContentReport/VContentReportPopover.vue
@@ -30,10 +30,8 @@
   </VPopover>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from '@nuxtjs/composition-api'
-
-import { Media } from '~/models/media'
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
 
 import VIconButton from '~/components/VIconButton/VIconButton.vue'
 import VPopover from '~/components/VPopover/VPopover.vue'
@@ -56,7 +54,7 @@ export default defineComponent({
      * the media item to report; This can either be an audio track or an image.
      */
     media: {
-      type: Object as PropType<Media>,
+      type: Object,
       required: true,
     },
   },
diff --git a/src/components/VImageDetails/VImageDetails.vue b/src/components/VImageDetails/VImageDetails.vue
index 963dbca264..a77af8cd78 100644
--- a/src/components/VImageDetails/VImageDetails.vue
+++ b/src/components/VImageDetails/VImageDetails.vue
@@ -43,11 +43,10 @@
   </section>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
+<script>
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import { useI18n } from '~/composables/use-i18n'
-import { ImageDetail } from '~/models/media'
 
 import VContentReportPopover from '~/components/VContentReport/VContentReportPopover.vue'
 import VLink from '~/components/VLink.vue'
@@ -58,7 +57,7 @@ export default defineComponent({
   components: { VContentReportPopover, VLink, VMediaTag },
   props: {
     image: {
-      type: Object as PropType<ImageDetail>,
+      type: Object,
       required: true,
     },
     imageWidth: {
diff --git a/src/components/VItemGroup/VItem.vue b/src/components/VItemGroup/VItem.vue
index a4b8351408..ad6ed52c1b 100644
--- a/src/components/VItemGroup/VItem.vue
+++ b/src/components/VItemGroup/VItem.vue
@@ -49,14 +49,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script>
 import {
   defineComponent,
   inject,
   ref,
   computed,
   watch,
-  PropType,
 } from '@nuxtjs/composition-api'
 
 import { warn } from '~/utils/console'
@@ -97,8 +96,9 @@ export default defineComponent({
      * @variants 'button', 'VLink'
      */
     as: {
-      type: String as PropType<'button' | 'VLink'>,
+      type: String,
       default: 'button',
+      validator: (val) => ['button', 'VLink'].includes(val),
     },
   },
   /**
diff --git a/src/components/VItemGroup/VItemGroup.vue b/src/components/VItemGroup/VItemGroup.vue
index 7197af8e51..00e5a3e41d 100644
--- a/src/components/VItemGroup/VItemGroup.vue
+++ b/src/components/VItemGroup/VItemGroup.vue
@@ -19,15 +19,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script>
 import {
   defineComponent,
   provide,
   ref,
   readonly,
-  InjectionKey,
-  PropType,
-  Ref,
 } from '@nuxtjs/composition-api'
 import { ensureFocus } from 'reakit-utils/ensureFocus'
 
@@ -35,27 +32,31 @@ import { useI18n } from '~/composables/use-i18n'
 
 import { keycodes } from '~/constants/key-codes'
 
-type VItemGroupContext = {
-  direction: 'vertical' | 'horizontal' | 'columns'
-  bordered: boolean
-  type: 'menu' | 'radiogroup'
-  size: 'small' | 'medium'
-}
-
-export const VItemGroupContextKey = Symbol(
-  'VItemGroupContext'
-) as InjectionKey<VItemGroupContext>
-
-type VItemGroupFocusContext = {
-  isGroupFocused: Readonly<Ref<boolean>>
-  onItemKeyPress: (event: KeyboardEvent) => void
-  selectedCount: Readonly<Ref<number>>
-  setSelected: (selected: boolean, previousSelected: boolean) => void
-}
-
-export const VItemGroupFocusContextKey = Symbol(
-  'VItemGroupFocusContext'
-) as InjectionKey<VItemGroupFocusContext>
+/**
+ * @typedef VItemGroupContext
+ * @property {'vertical' | 'horizontal'} direction
+ * @property {boolean} bordered
+ * @property {'menu' | 'radiogroup'} type
+ * @property {'small' | 'medium'} size
+ */
+
+/**
+ * @type {import('@nuxtjs/composition-api').InjectionKey<VItemGroupContext>}
+ */
+export const VItemGroupContextKey = Symbol('VItemGroupContext')
+
+/**
+ * @typedef VItemGroupFocusContext
+ * @property {import('@nuxtjs/composition-api').Readonly<import('@nuxtjs/composition-api').Ref<boolean>>} isGroupFocused
+ * @property {(event: KeyboardEvent) => void} onItemKeyPress
+ * @property {import('@nuxtjs/composition-api').Readonly<import('@nuxtjs/composition-api').Ref<number>>} selectedCount
+ * @property {(selected: boolean, previousSelected: boolean) => void} setSelected
+ */
+
+/**
+ * @type {import('@nuxtjs/composition-api').InjectionKey<VItemGroupFocusContext>}
+ */
+export const VItemGroupFocusContextKey = Symbol('VItemGroupFocusContext')
 
 const arrows = [
   keycodes.ArrowUp,
@@ -73,8 +74,11 @@ export default defineComponent({
      * @default 'vertical'
      */
     direction: {
-      type: String as PropType<VItemGroupContext['direction']>,
+      type: /** @type {import('@nuxtjs/composition-api').PropType<'vertical' | 'horizontal' | 'columns' >} */ (
+        String
+      ),
       default: 'vertical',
+      validate: (v) => ['vertical', 'horizontal', 'columns'].includes(v),
     },
     /**
      * Whether to render a bordered, separated list of items. When false each
@@ -101,8 +105,11 @@ export default defineComponent({
      * @default 'menu'
      */
     type: {
-      type: String as PropType<VItemGroupContext['type']>,
+      type: /** @type {import('@nuxtjs/composition-api').PropType<'menu' | 'radiogroup'>} */ (
+        String
+      ),
       default: 'menu',
+      validate: (v) => ['menu', 'radiogroup'].includes(v),
     },
     /**
      * Size of the item group corresponds to the size of the component.
@@ -110,8 +117,9 @@ export default defineComponent({
      * @default 'small'
      */
     size: {
-      type: String as PropType<VItemGroupContext['size']>,
+      type: String,
       default: 'small',
+      validate: (val) => ['small', 'medium'].includes(val),
     },
   },
   setup(props) {
@@ -127,18 +135,21 @@ export default defineComponent({
      * because the DOM order gets reversed to be opposite the visual order relative to left/right movement.
      *
      * For vertical locales it should remain the same.
-     * @param ltr
-     * @param rtl
+     * @param {string} ltr
+     * @param {string} rtl
      */
-    const resolveArrow = (ltr: string, rtl: string) => {
+    const resolveArrow = (ltr, rtl) => {
       return i18n.localeProperties.dir === 'rtl' &&
         props.direction === 'horizontal'
         ? rtl
         : ltr
     }
 
-    const onItemKeyPress = (event: KeyboardEvent) => {
-      if (!Array.from(arrows).includes(event.key) || !nodeRef.value) return
+    /**
+     * @param {KeyboardEvent} event
+     */
+    const onItemKeyPress = (event) => {
+      if (!arrows.includes(event.key) || !nodeRef.value) return
 
       event.preventDefault()
 
@@ -147,7 +158,7 @@ export default defineComponent({
       // While VItem ultimately renders a button at the moment, that could change in the future, so using a data attribute selector makes it more flexible for the future
       const items = Array.from(
         nodeRef.value.querySelectorAll('[data-item-group-item]')
-      ) as HTMLElement[]
+      )
 
       const targetIndex = items.findIndex((item) => item === target)
 
@@ -173,7 +184,7 @@ export default defineComponent({
      * @param {boolean} selected
      * @param {boolean} previousSelected
      */
-    const setSelected = (selected: boolean, previousSelected: boolean) => {
+    const setSelected = (selected, previousSelected) => {
       if (previousSelected && !selected) selectedCount.value -= 1
       if (!previousSelected && selected) selectedCount.value += 1
     }
diff --git a/src/components/VSketchFabViewer.vue b/src/components/VSketchFabViewer.vue
index c5729323e5..2aa37dcb5e 100644
--- a/src/components/VSketchFabViewer.vue
+++ b/src/components/VSketchFabViewer.vue
@@ -24,7 +24,6 @@ import {
 
 import { useI18n } from '~/composables/use-i18n'
 import { loadScript } from '~/utils/load-script'
-import { defineEvent } from '~/types/emits'
 
 const sketchfabUrl =
   'https://static.sketchfab.com/api/sketchfab-viewer-1.10.1.js'
@@ -48,9 +47,7 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: {
-    failure: defineEvent(),
-  },
+  emits: ['failure'],
   setup(props, { emit }) {
     const i18n = useI18n()
     const label = i18n
diff --git a/tsconfig.json b/tsconfig.json
index 0be851ebe3..dd7b0f7cab 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -38,7 +38,6 @@
     "test/proxy.js",
     "src/components/VButton.vue",
     "src/components/VContentPage.vue",
-    "src/components/VMetaSearch/*.vue",
     "src/components/VLicenseElements.vue",
     "src/components/VWarningSuppressor.vue",
     "src/components/VLink.vue",
@@ -50,33 +49,30 @@
     "src/components/VBackToSearchResultsLink.vue",
     "src/components/VSourcesTable.vue",
     "src/components/TableSortIcon.vue",
-    "src/components/VIcon/VIcon.vue",
-    "src/components/VCheckbox/VCheckbox.vue",
-    "src/components/VIconButton/VIconButton.vue",
-    "src/components/VLicense/VLicense.vue",
-    "src/components/VContentLink/VContentLink.vue",
+    "src/components/VCopyButton.vue",
+    "src/components/VSketchFabViewer.vue",
+    "src/components/VAudioThumbnail/**.vue",
+    "src/components/VAudioTrack/**/*.vue",
+    "src/components/VCheckbox/**.vue",
+    "src/components/VGlobalAudioSection/**.vue",
+    "src/components/VIcon/**.vue",
+    "src/components/VIconButton/**.vue",
+    "src/components/VLicense/**.vue",
+    "src/components/VLogoLoader/**.vue",
+    "src/components/VMediaInfo/**.vue",
+    "src/components/VMediaTag/**.vue",
+    "src/components/VMetaSearch/*.vue",
+    "src/components/VSkeleton/**.vue",
+    "src/components/VTabs/**.vue",
+    "src/components/VAllResultsGrid/VAudioCell.vue",
+    "src/components/VContentLink/**.vue",
     "src/components/VContentReport/VReportDescForm.vue",
     "src/components/VErrorSection/VErrorImage.vue",
-    "src/components/VAudioTrack/**/*.vue",
-    "src/components/VAudioThumbnail/VAudioThumbnail.vue",
-    "src/components/VGlobalAudioSection/VGlobalAudioSection.vue",
-    "src/components/VInputField/VInputField.vue",
     "src/components/VHeader/VFilterButton.vue",
     "src/components/VHeader/VSearchBar/VSearchBar.vue",
-    "src/components/VTabs/**.vue",
-    "src/components/VCopyButton.vue",
-    "src/components/VMediaInfo/**.vue",
-    "src/components/VSketchFabViewer.vue",
-    "src/components/VAllResultsGrid/VAudioCell.vue",
+    "src/components/VInputField/VInputField.vue",
     "src/components/VErrorSection/VErrorImage.vue",
     "src/components/VFilters/VLicenseExplanation.vue",
-    "src/components/VLicense/VLicense.vue",
-    "src/components/VLicense/VLicenseElements.vue",
-    "src/components/VLogoLoader/VLogoLoader.vue",
-    "src/components/VMediaTag/VMediaTag.vue",
-    "src/components/VSkeleton/VBone.vue",
-    "src/components/VSkeleton/VAudioTrackSkeleton.vue",
-    "src/components/VSkeleton/VGridSkeleton.vue",
     "src/pages/feedback.vue",
     "src/pages/search-help.vue",
     "src/pages/extension.vue",

From a1d5ec6a13b2f6e9c53bf137ecb58e5d515dfe85 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 28 Jun 2022 11:37:02 +0300
Subject: [PATCH 5/5] Update src/components/VLogoLoader/VLogoLoader.vue

---
 src/components/VLogoLoader/VLogoLoader.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index d3200deda3..e9571ab54e 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -50,7 +50,6 @@ export default defineComponent({
     status: {
       type: String as PropType<'loading' | 'idle'>,
       default: 'idle',
-      required: false,
     },
     autoResize: {
       type: Boolean,