Add component imports, remove extra blank lines between imports (#1099)

src/components/CopyButton.vue

@@ -17,8 +17,11 @@
 <script>
 import Clipboard from 'clipboard'
 
+import VButton from '~/components/VButton.vue'
+
 export default {
   name: 'CopyButton',
+  components: { VButton },
   props: {
     el: {
       required: true,

src/components/ExtensionBrowsers.vue

@@ -13,13 +13,16 @@
 </template>
 
 <script>
+import VLink from '~/components/VLink.vue'
+
 import chromeLogo from '~/assets/browsers/chrome.svg'
 import edgeLogo from '~/assets/browsers/edge.svg'
 import firefoxLogo from '~/assets/browsers/firefox.svg'
 import operaLogo from '~/assets/browsers/opera.svg'
 
 export default {
   name: 'ExtensionBrowsers',
+  components: { VLink },
   data() {
     return {
       browsers: {

src/components/VAllResultsGrid/VImageCellSquare.vue

@@ -33,6 +33,7 @@
 </template>
 
 <script>
+import VLink from '~/components/VLink.vue'
 import VLicense from '~/components/License/VLicense.vue'
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -47,7 +48,7 @@ const toAbsolutePath = (url, prefix = 'https://') => {
 
 export default {
   name: 'VImageCell',
-  components: { VLicense },
+  components: { VLink, VLicense },
   props: ['image'],
   methods: {
     getImageUrl(image) {

src/components/VAudioDetails/VRelatedAudio.vue

@@ -28,7 +28,6 @@ import useRelated from '~/composables/use-related'
 import { isMinScreen } from '~/composables/use-media-query'
 
 import LoadingIcon from '~/components/LoadingIcon.vue'
-
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
 export default {

src/components/VAudioTrack/VAudioTrack.vue

@@ -51,12 +51,10 @@ import {
 import { useActiveAudio } from '~/composables/use-active-audio'
 
 import { MEDIA } from '~/constants/store-modules'
-
 import { useActiveMediaStore } from '~/stores/active-media'
 
 import VPlayPause from '~/components/VAudioTrack/VPlayPause.vue'
 import VWaveform from '~/components/VAudioTrack/VWaveform.vue'
-
 import VFullLayout from '~/components/VAudioTrack/layouts/VFullLayout.vue'
 import VRowLayout from '~/components/VAudioTrack/layouts/VRowLayout.vue'
 import VBoxLayout from '~/components/VAudioTrack/layouts/VBoxLayout.vue'

src/components/VAudioTrack/VGlobalAudioTrack.vue

@@ -37,7 +37,6 @@ import { useActiveMediaStore } from '~/stores/active-media'
 
 import VPlayPause from '~/components/VAudioTrack/VPlayPause.vue'
 import VWaveform from '~/components/VAudioTrack/VWaveform.vue'
-
 import VFullLayout from '~/components/VAudioTrack/layouts/VFullLayout.vue'
 import VRowLayout from '~/components/VAudioTrack/layouts/VRowLayout.vue'
 import VBoxLayout from '~/components/VAudioTrack/layouts/VBoxLayout.vue'

src/components/VBackToSearchResultsLink.vue

@@ -13,11 +13,14 @@
 <script>
 import { defineComponent } from '@vue/composition-api'
 
+import VLink from '~/components/VLink.vue'
+
 import Chevron from '~/assets/icons/chevron-left.svg?inline'
 
 export default defineComponent({
   components: {
     Chevron,
+    VLink,
   },
   data() {
     return {

src/components/VContentLink/VContentLink.vue

@@ -23,6 +23,7 @@ import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
 import { AUDIO, IMAGE, supportedMediaTypes } from '~/constants/media'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
+import VLink from '~/components/VLink.vue'
 
 import audioIcon from '~/assets/icons/audio-wave.svg'
 import imageIcon from '~/assets/icons/image.svg'
@@ -34,7 +35,7 @@ const iconMapping = {
 
 export default defineComponent({
   name: 'VContentLink',
-  components: { VIcon },
+  components: { VIcon, VLink },
   props: {
     /**
      * One of the media types supported.

src/components/VContentReport/VContentReportPopover.vue

@@ -29,15 +29,22 @@
 <script>
 import { computed, useStore, defineComponent } from '@nuxtjs/composition-api'
 
+import VIconButton from '~/components/VIconButton/VIconButton.vue'
 import VPopover from '~/components/VPopover/VPopover.vue'
 import VContentReportButton from '~/components/VContentReport/VContentReportButton.vue'
+import VContentReportForm from '~/components/VContentReport/VContentReportForm.vue'
 
 import flagIcon from '~/assets/icons/flag.svg'
 import closeSmallIcon from '~/assets/icons/close-small.svg'
 
 export default defineComponent({
   name: 'VContentReportPopover',
-  components: { VPopover, VContentReportButton },
+  components: {
+    VIconButton,
+    VPopover,
+    VContentReportButton,
+    VContentReportForm,
+  },
   props: {
     /**
      * the media item to report; This can either be an audio track or an image.

src/components/VContentSwitcher/VSearchTypeButton.vue

@@ -37,7 +37,6 @@ import useSearchType from '~/composables/use-search-type'
 import { isMinScreen } from '~/composables/use-media-query'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
-
 import VButton from '~/components/VButton.vue'
 
 import caretDownIcon from '~/assets/icons/caret-down.svg'

src/components/VContentSwitcher/VSearchTypeItem.vue

@@ -20,6 +20,10 @@ import { defineComponent } from '@vue/composition-api'
 
 import { contentStatus } from '~/constants/media'
 
+import VIcon from '~/components/VIcon/VIcon.vue'
+import VItem from '~/components/VItemGroup/VItem.vue'
+import VPill from '~/components/VPill.vue'
+
 /** @typedef {import('@nuxtjs/composition-api').ExtractPropTypes<typeof propTypes>} Props */
 const propTypes = {
   item: { type: String, required: true },
@@ -29,6 +33,7 @@ const propTypes = {
 }
 export default defineComponent({
   name: 'VSearchTypeItem',
+  components: { VIcon, VItem, VPill },
   props: propTypes,
   setup(props) {
     const status = computed(() => {

src/components/VContentSwitcher/VSearchTypes.vue

@@ -23,11 +23,9 @@
 import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import { supportedSearchTypes } from '~/constants/media'
-
 import useSearchType from '~/composables/use-search-type'
 
 import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
-
 import VSearchTypeItem from '~/components/VContentSwitcher/VSearchTypeItem.vue'
 
 export default defineComponent({

src/components/VErrorSection/VErrorSection.vue

@@ -19,5 +19,3 @@ export default {
   name: 'VErrorSection',
 }
 </script>
-
-<style scoped></style>

src/components/VFourOhFour.vue

@@ -59,6 +59,7 @@ import { MEDIA, SEARCH } from '~/constants/store-modules'
 import { FETCH_MEDIA, UPDATE_QUERY } from '~/constants/action-types'
 
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar'
+import VLink from '~/components/VLink.vue'
 
 import Oops from '~/assets/oops.svg?inline'
 import OpenverseLogo from '~/assets/logo.svg?inline'
@@ -70,6 +71,7 @@ const VFourOhFour = defineComponent({
     OpenverseLogo,
     OpenverseBrand,
     Oops,
+    VLink,
     VSearchBar,
   },
   props: ['error'],

src/components/VHeader/VHeaderFilter.vue

@@ -29,7 +29,6 @@ import {
 } from '@nuxtjs/composition-api'
 
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
-
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 
 import VTeleport from '~/components/VTeleport/VTeleport.vue'

src/components/VImageGrid/VImageGrid.vue

@@ -29,8 +29,8 @@
  * or display 'No More Media'.
  * Used to display both image search results, and related images.
  */
-import VLoadMore from '~/components/VLoadMore'
-import VImageCell from '~/components/VImageGrid/VImageCell'
+import VLoadMore from '~/components/VLoadMore.vue'
+import VImageCell from '~/components/VImageGrid/VImageCell.vue'
 
 export default {
   name: 'ImageGrid',

src/components/VMediaInfo/VCopyLicense.vue

@@ -140,7 +140,6 @@ import getAttributionHtml from '~/utils/attribution-html'
 import { isPublicDomain } from '~/utils/license'
 
 import VLink from '~/components/VLink.vue'
-
 import CopyButton from '~/components/CopyButton.vue'
 
 const VCopyLicense = defineComponent({

src/layouts/blank.vue

@@ -12,7 +12,6 @@ import { computed, defineComponent } from '@nuxtjs/composition-api'
 import { useNavStore } from '~/stores/nav'
 
 import VTranslationStatusBanner from '~/components/VTranslationStatusBanner.vue'
-
 import VMigrationNotice from '~/components/VMigrationNotice.vue'
 
 export default defineComponent({

src/layouts/default.vue

@@ -21,11 +21,8 @@
 import { computed, provide, ref, watch } from '@nuxtjs/composition-api'
 
 import { useScroll } from '~/composables/use-scroll'
-
 import { useMatchSearchRoutes } from '~/composables/use-match-routes'
-
 import { isMinScreen } from '~/composables/use-media-query'
-
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 
 import { useNavStore } from '~/stores/nav'

src/pages/search/audio.vue

@@ -30,15 +30,11 @@ import {
 } from '@nuxtjs/composition-api'
 
 import { useLoadMore } from '~/composables/use-load-more'
-
 import { isMinScreen } from '~/composables/use-media-query'
-
 import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
-
 import VLoadMore from '~/components/VLoadMore.vue'
-
 import VGridSkeleton from '~/components/VSkeleton/VGridSkeleton.vue'
 
 import { propTypes } from './search-page.types'

src/pages/search/image.vue

@@ -13,8 +13,11 @@ import { computed, defineComponent, useMeta } from '@nuxtjs/composition-api'
 import { propTypes } from '~/pages/search/search-page.types'
 import { useLoadMore } from '~/composables/use-load-more'
 
+import VImageGrid from '~/components/VImageGrid/VImageGrid.vue'
+
 const ImageSearch = defineComponent({
   name: 'ImageSearch',
+  components: { VImageGrid },
   props: propTypes,
   setup(props) {
     useMeta({ title: `${props.searchTerm} | Openverse` })