Use TS and defineComponent in the ContentSwitcher and Header (#1472)

src/components/VContentSwitcher/VMobileMenuModal.vue

@@ -33,8 +33,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
+  ComponentInstance,
   computed,
   defineComponent,
   onMounted,
@@ -70,10 +71,9 @@ export default defineComponent({
     const content = useSearchType()
     const pages = usePages()
 
-    /** @type {import('@nuxtjs/composition-api').Ref<import('vue/types/vue').Vue | null>} */
-    const searchTypesNode = ref(null)
-    const modalRef = ref(null)
-    const triggerContainerRef = ref(null)
+    const searchTypesNode = ref<ComponentInstance | null>(null)
+    const modalRef = ref<HTMLElement | null>(null)
+    const triggerContainerRef = ref<HTMLElement | null>(null)
 
     const closeMenu = () => close()
 
@@ -85,8 +85,13 @@ export default defineComponent({
       'aria-haspopup': 'dialog',
     })
 
-    const triggerRef = ref()
-    onMounted(() => (triggerRef.value = triggerContainerRef.value?.firstChild))
+    const triggerRef = ref<HTMLElement | null>()
+    onMounted(
+      () =>
+        (triggerRef.value = triggerContainerRef.value?.firstChild
+          ? (triggerContainerRef.value.firstChild as HTMLElement)
+          : null)
+    )
 
     const initialFocusElement = computed(() =>
       searchTypesNode.value?.$el?.querySelector('[aria-checked="true"]')

src/components/VContentSwitcher/VSearchTypeItem.vue

@@ -17,8 +17,7 @@
 </template>
 
 <script>
-import { computed, useContext } from '@nuxtjs/composition-api'
-import { defineComponent } from '@vue/composition-api'
+import { computed, useContext, defineComponent } from '@nuxtjs/composition-api'
 
 import { ALL_MEDIA, contentStatus } from '~/constants/media'
 import { useSearchStore } from '~/stores/search'

src/components/VContentSwitcher/VSearchTypeRadio.vue

@@ -15,11 +15,11 @@
   </button>
 </template>
 
-<script>
-import { computed, defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
-import { ALL_MEDIA, AUDIO, IMAGE } from '~/constants/media'
-import { isValidSearchType } from '~/utils/prop-validators'
+import { ALL_MEDIA, AUDIO, IMAGE, SupportedSearchType } from '~/constants/media'
+import { defineEvent } from '~/types/emits'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 
@@ -41,15 +41,17 @@ export default defineComponent({
      * One of the media types supported.
      */
     searchType: {
-      type: String,
+      type: String as PropType<SupportedSearchType>,
       required: true,
-      validator: isValidSearchType,
     },
     selected: {
       type: Boolean,
       default: false,
     },
   },
+  emits: {
+    select: defineEvent<[SupportedSearchType]>(),
+  },
   setup(props, { emit }) {
     const iconPath = computed(() => iconMapping[props.searchType])
     const handleClick = () => emit('select', props.searchType)

src/components/VContentSwitcher/VSearchTypes.vue

@@ -40,6 +40,7 @@ import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import type { SearchType } from '~/constants/media'
 import useSearchType from '~/composables/use-search-type'
+import { defineEvent } from '~/types/emits'
 
 import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
 import VSearchTypeItem from '~/components/VContentSwitcher/VSearchTypeItem.vue'
@@ -65,6 +66,9 @@ export default defineComponent({
       default: true,
     },
   },
+  emits: {
+    select: defineEvent<[SearchType]>(),
+  },
   setup(props, { emit }) {
     const content = useSearchType()
 

src/components/VHeader/VHeaderMenu.vue

@@ -1,7 +1,10 @@
-<script>
+<script lang="ts">
 import {
+  ComponentInstance,
+  defineComponent,
   inject,
   onMounted,
+  Ref,
   ref,
   useContext,
   useRouter,
@@ -17,7 +20,7 @@ import VSearchTypePopover from '~/components/VContentSwitcher/VSearchTypePopover
 import VDesktopPageMenu from '~/components/VHeader/VPageMenu/VDesktopPageMenu.vue'
 import VMobilePageMenu from '~/components/VHeader/VPageMenu/VMobilePageMenu.vue'
 
-export default {
+export default defineComponent({
   name: 'VHeaderMenu',
   components: {
     VMobileMenuModal,
@@ -32,10 +35,8 @@ export default {
     },
   },
   setup() {
-    /** @type {import('@nuxtjs/composition-api').Ref<boolean>} */
-    const isMinScreenMd = inject('isMinScreenMd')
-    /** @type {import('@nuxtjs/composition-api').Ref<null|HTMLElement>} */
-    const menuModalRef = ref(null)
+    const isMinScreenMd: Ref<boolean> = inject('isMinScreenMd')
+    const menuModalRef = ref<ComponentInstance | null>(null)
     const content = useSearchType()
     const { app } = useContext()
     const mediaStore = useMediaStore()
@@ -103,5 +104,5 @@ export default {
       })
     }
   },
-}
+})
 </script>

src/components/VHeader/VPageMenu/VDesktopPageMenu.vue

@@ -14,16 +14,18 @@
 </template>
 
 <script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
 import VPopover from '~/components/VPopover/VPopover.vue'
 import VPageMenuButton from '~/components/VHeader/VPageMenu/VPageMenuButton.vue'
 import VPageList from '~/components/VHeader/VPageMenu/VPageList.vue'
 
-export default {
+export default defineComponent({
   name: 'VDesktopPageMenu',
   components: {
     VPageMenuButton,
     VPageList,
     VPopover,
   },
-}
+})
 </script>

src/components/VHeader/VPageMenu/VMobilePageMenu.vue

@@ -23,15 +23,21 @@
 </template>
 
 <script>
-import { computed, reactive, ref, watch } from '@nuxtjs/composition-api'
+import {
+  computed,
+  defineComponent,
+  reactive,
+  ref,
+  watch,
+} from '@nuxtjs/composition-api'
 
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 
 import VModalContent from '~/components/VModal/VModalContent.vue'
 import VPageMenuButton from '~/components/VHeader/VPageMenu/VPageMenuButton.vue'
 import VPageList from '~/components/VHeader/VPageMenu/VPageList.vue'
 
-export default {
+export default defineComponent({
   name: 'VMobilePageMenu',
   components: { VModalContent, VPageMenuButton, VPageList },
   setup(_, { emit }) {
@@ -88,5 +94,5 @@ export default {
       visibleRef,
     }
   },
-}
+})
 </script>

src/components/VHeader/VPageMenu/VPageList.vue

@@ -8,7 +8,7 @@
       v-for="(page, idx) in pages.all"
       :key="page.id"
       class="md:w-full w-1/2"
-      :selected="page.id === pages.current"
+      :selected="page.id === pages.current.value"
       :is-first="idx === 0"
       v-bind="getLinkProps(page)"
       @click="$emit('click')"
@@ -25,7 +25,9 @@
     </VItem>
   </VItemGroup>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
 import usePages from '~/composables/use-pages'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
@@ -34,14 +36,13 @@ import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
 
 import externalLinkIcon from '~/assets/icons/external-link.svg'
 
-export default {
+export default defineComponent({
   name: 'VPageMenuPopover',
   components: { VIcon, VItem, VItemGroup },
   props: {
     layout: {
-      type: String,
+      type: String as PropType<'vertical' | 'columns'>,
       default: 'vertical',
-      validator: (val) => ['vertical', 'columns'].includes(val),
     },
   },
   setup() {
@@ -57,5 +58,5 @@ export default {
       pages,
     }
   },
-}
+})
 </script>

src/components/VHeader/VPageMenu/VPageMenuButton.vue

@@ -10,9 +10,11 @@
     <VIcon :icon-path="ellipsisIcon" />
   </VButton>
 </template>
-<script>
+<script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api'
 
+import { defineEvent } from '~/types/emits'
+
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VButton from '~/components/VButton.vue'
 
@@ -24,6 +26,9 @@ export default defineComponent({
   props: {
     a11yProps: {},
   },
+  emits: {
+    click: defineEvent(),
+  },
   setup() {
     return {
       ellipsisIcon,

src/components/VHeader/VSearchBar/VSearchButton.vue

@@ -51,9 +51,6 @@ export default defineComponent({
       default: false,
     },
   },
-  /**
-   * @param {Props} props
-   */
   setup(props) {
     const isMobile = useBrowserIsMobile()
     const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: !isMobile })