Use single default export

src/components/VButton.vue

@@ -50,18 +50,19 @@ export const buttonVariants = [
   'action-menu',
   'action-menu-secondary',
   'action-menu-muted',
+  'action-menu-muted-pressed',
   'plain',
   'plain-dangerous',
   'full',
 ] as const
 
-type ButtonVariant = typeof buttonVariants[number]
+export type ButtonVariant = typeof buttonVariants[number]
 
 export const buttonSizes = ['large', 'medium', 'small', 'disabled'] as const
 
-type ButtonSize = typeof buttonSizes[number]
+export type ButtonSize = typeof buttonSizes[number]
 
-const buttonTypes = ['button', 'submit', 'reset'] as const
+export const buttonTypes = ['button', 'submit', 'reset'] as const
 
 export type ButtonType = typeof buttonTypes[number]
 

src/components/VFourOhFour.vue

@@ -62,7 +62,7 @@ import Oops from '~/assets/oops.svg?inline'
 import OpenverseLogo from '~/assets/logo.svg?inline'
 import OpenverseBrand from '~/assets/brand.svg?inline'
 
-const VFourOhFour = defineComponent({
+export default defineComponent({
   name: 'VFourOhFour',
   components: {
     OpenverseLogo,
@@ -113,7 +113,6 @@ const VFourOhFour = defineComponent({
     ],
   },
 })
-export default VFourOhFour
 </script>
 
 <style>

src/components/VHeader/VFilterButton.vue

@@ -39,12 +39,12 @@ import { useSearchStore } from '~/stores/search'
 import { defineEvent } from '~/types/emits'
 import { useI18n } from '~/composables/use-i18n'
 
-import VButton from '~/components/VButton.vue'
+import VButton, { ButtonVariant } from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 
 import filterIcon from '~/assets/icons/filter.svg'
 
-const VFilterButton = defineComponent({
+export default defineComponent({
   name: 'VFilterButton',
   components: {
     VIcon,
@@ -75,7 +75,9 @@ const VFilterButton = defineComponent({
      */
     const variant = computed(() => {
       // Show the bordered state by default, unless below md
-      let value = isMinScreenMd.value ? 'tertiary' : 'action-menu'
+      let value: ButtonVariant = isMinScreenMd.value
+        ? 'tertiary'
+        : 'action-menu'
 
       if (isHeaderScrolled.value) {
         value = 'action-menu'
@@ -119,6 +121,4 @@ const VFilterButton = defineComponent({
     }
   },
 })
-
-export default VFilterButton
 </script>

src/components/VHeader/VLogoButton.vue

@@ -29,7 +29,7 @@ import VButton from '~/components/VButton.vue'
 
 import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg?inline'
 
-const VLogoButton = defineComponent({
+export default defineComponent({
   name: 'VLogoButton',
   components: { OpenverseLogoText, VLogoLoader, VButton },
   props: {
@@ -51,5 +51,4 @@ const VLogoButton = defineComponent({
     },
   },
 })
-export default VLogoButton
 </script>

src/components/VHeader/VSearchBar/VSearchBar.vue

@@ -41,7 +41,7 @@ import VSearchButton from '~/components/VHeader/VSearchBar/VSearchButton.vue'
  * that fires a search request. The loading state and number of hits are also
  * displayed in the bar itself.
  */
-const VSearchBar = defineComponent({
+export default defineComponent({
   name: 'VSearchBar',
   components: { VInputField, VSearchButton },
   inheritAttrs: false,
@@ -88,7 +88,6 @@ const VSearchBar = defineComponent({
     }
   },
 })
-export default VSearchBar
 </script>
 
 <style>

src/components/VHeader/VSidebarContent.vue

@@ -13,7 +13,7 @@ import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 /**
  * Renders the inner content of the sidebar and manages focus.
  */
-const VSidebarContent = defineComponent({
+export default defineComponent({
   name: 'VSidebarContent',
   components: { VTeleport, VSearchGridFilter },
   props: {
@@ -27,6 +27,4 @@ const VSidebarContent = defineComponent({
     },
   },
 })
-
-export default VSidebarContent
 </script>

src/components/VImageDetails/VImageDetails.vue

@@ -52,7 +52,7 @@ import VContentReportPopover from '~/components/VContentReport/VContentReportPop
 import VLink from '~/components/VLink.vue'
 import VMediaTag from '~/components/VMediaTag/VMediaTag.vue'
 
-const VImageDetails = defineComponent({
+export default defineComponent({
   name: 'VImageDetails',
   components: { VContentReportPopover, VLink, VMediaTag },
   props: {
@@ -86,7 +86,6 @@ const VImageDetails = defineComponent({
     return { imgType }
   },
 })
-export default VImageDetails
 </script>
 
 <style scoped>

src/components/VMediaInfo/VCopyLicense.vue

@@ -46,7 +46,7 @@ import VLicenseTabPanel from '~/components/VMediaInfo/VLicenseTabPanel.vue'
 
 const tabs = ['rich', 'html', 'plain']
 
-const VCopyLicense = defineComponent({
+export default defineComponent({
   name: 'VCopyLicense',
   components: { VTabs, VTab, VLicenseTabPanel },
   props: {
@@ -66,5 +66,4 @@ const VCopyLicense = defineComponent({
     }
   },
 })
-export default VCopyLicense
 </script>

src/components/VMediaInfo/VMediaReuse.vue

@@ -29,7 +29,7 @@ import { useI18n } from '~/composables/use-i18n'
 import VCopyLicense from '~/components/VMediaInfo/VCopyLicense.vue'
 import VMediaLicense from '~/components/VMediaInfo/VMediaLicense.vue'
 
-const VMediaReuse = defineComponent({
+export default defineComponent({
   name: 'VMediaReuse',
   components: { VCopyLicense, VMediaLicense },
   props: {
@@ -48,5 +48,4 @@ const VMediaReuse = defineComponent({
     return { fullLicenseName }
   },
 })
-export default VMediaReuse
 </script>

src/components/VModal/VModalContent.vue

@@ -72,7 +72,7 @@ import closeIcon from '~/assets/icons/close.svg'
 /**
  * Renders the inner content of a modal and manages focus.
  */
-const VModalContent = defineComponent({
+export default defineComponent({
   name: 'VModalContent',
   components: { VTeleport, VButton, VIcon, FocusTrap, VLogoButton },
   props: {
@@ -147,8 +147,6 @@ const VModalContent = defineComponent({
     }
   },
 })
-
-export default VModalContent
 </script>
 
 <style module></style>

src/components/VSearchResultsTitle.vue

@@ -14,7 +14,7 @@ const sizes = {
   DEFAULT: 'default',
   LARGE: 'large',
 }
-const VSearchResultsTitle = defineComponent({
+export default defineComponent({
   name: 'VSearchResultsTitle',
   props: {
     size: {
@@ -24,7 +24,6 @@ const VSearchResultsTitle = defineComponent({
     },
   },
 })
-export default VSearchResultsTitle
 </script>
 
 <style scoped>

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-05-12T05:53:51+00:00\n"
+"POT-Creation-Date: 2022-05-12T06:11:29+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -1882,7 +1882,7 @@ msgid "Filters"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VHeader/VFilterButton.vue:101
+#: src/components/VHeader/VFilterButton.vue:103
 msgctxt "header.filter-button.with-count"
 msgid "###count### Filter"
 msgid_plural "###count### Filters"

src/pages/about.vue

@@ -78,7 +78,7 @@ import { defineComponent } from '@nuxtjs/composition-api'
 import VLink from '~/components/VLink.vue'
 import VContentPage from '~/components/VContentPage.vue'
 
-const AboutPage = defineComponent({
+export default defineComponent({
   name: 'AboutPage',
   components: { VLink, VContentPage },
   head() {
@@ -89,6 +89,4 @@ const AboutPage = defineComponent({
     }
   },
 })
-
-export default AboutPage
 </script>

src/pages/index.vue

@@ -150,9 +150,8 @@ import imageInfo from '~/assets/homepage_images/image_info.json'
 import OpenverseLogo from '~/assets/logo.svg?inline'
 import OpenverseBrand from '~/assets/brand.svg?inline'
 
-const HomePage = {
-  name: 'home-page',
-  layout: 'blank',
+export default {
+  name: 'HomePage',
   components: {
     OpenverseLogo,
     OpenverseBrand,
@@ -162,15 +161,7 @@ const HomePage = {
     VLink,
     VLogoButton,
   },
-  head: {
-    meta: [
-      {
-        hid: 'theme-color',
-        name: 'theme-color',
-        content: '#ffe033',
-      },
-    ],
-  },
+  layout: 'blank',
   setup() {
     const { app } = useContext()
     const router = useRouter()
@@ -244,9 +235,16 @@ const HomePage = {
       handleSearch,
     }
   },
+  head: {
+    meta: [
+      {
+        hid: 'theme-color',
+        name: 'theme-color',
+        content: '#ffe033',
+      },
+    ],
+  },
 }
-
-export default HomePage
 </script>
 
 <style>

src/pages/search/index.vue

@@ -10,7 +10,7 @@ import { propTypes } from '~/pages/search/search-page.types'
 
 import VAllResultsGrid from '~/components/VAllResultsGrid/VAllResultsGrid.vue'
 
-const SearchIndex = defineComponent({
+export default defineComponent({
   name: 'SearchIndex',
   components: { VAllResultsGrid },
   props: propTypes,
@@ -30,5 +30,4 @@ const SearchIndex = defineComponent({
     ],
   },
 })
-export default SearchIndex
 </script>