Convert header-related components to script setup

Signed-off-by: Olga Bulat <[email protected]>

frontend/src/components/VBanner/VAnalyticsNotice.vue

@@ -1,28 +1,17 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useLocalePath } from "#imports"
 
-import { computed, defineComponent } from "vue"
-
-import { defineEvent } from "~/types/emits"
+import { computed } from "vue"
 
 import VLink from "~/components/VLink.vue"
 import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
 
-export default defineComponent({
-  name: "VAnalyticsNotice",
-  components: { VLink, VNotificationBanner },
-  emits: {
-    close: defineEvent(),
-  },
-  setup() {
-    const localePath = useLocalePath()
-    const privacyPath = computed(() => localePath("/privacy"))
+defineEmits<{
+  close: []
+}>()
 
-    return {
-      privacyPath,
-    }
-  },
-})
+const localePath = useLocalePath()
+const privacyPath = computed(() => localePath("/privacy"))
 </script>
 
 <template>

frontend/src/components/VBanner/VBanners.vue

@@ -1,5 +1,5 @@
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, useNuxtApp } from "#imports"
+<script setup lang="ts">
+import { defineAsyncComponent, useNuxtApp } from "#imports"
 
 import { computed } from "vue"
 
@@ -10,58 +10,40 @@ import type { TranslationBannerId, BannerId } from "~/types/banners"
 
 import type { LocaleObject } from "@nuxtjs/i18n"
 
-export default defineComponent({
-  name: "VBanners",
-  components: {
-    VTranslationStatusBanner: defineAsyncComponent(
-      () => import("~/components/VBanner/VTranslationStatusBanner.vue")
-    ),
-    VAnalyticsNotice: defineAsyncComponent(
-      () => import("~/components/VBanner/VAnalyticsNotice.vue")
-    ),
-  },
-  setup() {
-    const uiStore = useUiStore()
-    const localeProperties = useNuxtApp().$i18n.localeProperties
+const VTranslationStatusBanner = defineAsyncComponent(
+  () => import("~/components/VBanner/VTranslationStatusBanner.vue")
+)
+const VAnalyticsNotice = defineAsyncComponent(
+  () => import("~/components/VBanner/VAnalyticsNotice.vue")
+)
+const uiStore = useUiStore()
+const localeProperties = useNuxtApp().$i18n.localeProperties
 
-    const shouldShowTranslationBanner = computed(() =>
-      uiStore.shouldShowTranslationBanner(
-        localeProperties.value as LocaleObject
-      )
-    )
-    const shouldShowAnalyticsBanner = computed(
-      () => uiStore.shouldShowAnalyticsBanner
-    )
+const shouldShowTranslationBanner = computed(() =>
+  uiStore.shouldShowTranslationBanner(localeProperties.value as LocaleObject)
+)
+const shouldShowAnalyticsBanner = computed(
+  () => uiStore.shouldShowAnalyticsBanner
+)
 
-    const translationBannerId = computed<TranslationBannerId>(
-      () => `translation-${localeProperties.value.code}`
-    )
+const translationBannerId = computed<TranslationBannerId>(
+  () => `translation-${localeProperties.value.code}`
+)
 
-    const { current: currentPage } = usePages()
-    const variant = computed(() =>
-      ["", "index"].includes(currentPage.value) ? "dark" : "regular"
-    )
+const { current: currentPage } = usePages()
+const variant = computed(() =>
+  ["", "index"].includes(currentPage.value) ? "dark" : "regular"
+)
 
-    const dismissBanner = (bannerKey: BannerId) => {
-      uiStore.dismissBanner(bannerKey)
-    }
+const dismissBanner = (bannerKey: BannerId) => {
+  uiStore.dismissBanner(bannerKey)
+}
 
-    const showBanners = computed(() =>
-      [shouldShowTranslationBanner, shouldShowAnalyticsBanner].some(
-        (item) => item.value
-      )
-    )
-
-    return {
-      translationBannerId,
-      shouldShowTranslationBanner,
-      shouldShowAnalyticsBanner,
-      showBanners,
-      dismissBanner,
-      variant,
-    }
-  },
-})
+const showBanners = computed(() =>
+  [shouldShowTranslationBanner, shouldShowAnalyticsBanner].some(
+    (item) => item.value
+  )
+)
 </script>
 
 <template>

frontend/src/components/VBanner/VNotificationBanner.vue

@@ -1,99 +1,77 @@
-<script lang="ts">
-import { defineComponent, PropType, computed } from "vue"
-
-import { defineEvent } from "~/types/emits"
+<script setup lang="ts">
+/**
+ * Display a banner that can indicate one of four semantics in one of two color
+ * variants.
+ */
+import { computed } from "vue"
 
 import type { BannerId } from "~/types/banners"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
-import type { TranslateResult } from "vue-i18n"
-
-/**
- * Display a banner that can indicate one of four semantics in one of two color
- * variants.
- */
-export default defineComponent({
-  name: "VNotificationBanner",
-  components: {
-    VIconButton,
-    VIcon,
-  },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * the semantic meaning of the banner; This can carry a positive, neutral
      * or negative connotation.
      */
-    nature: {
-      type: String as PropType<"info" | "warning" | "success" | "error">,
-      default: "info",
-    },
+    nature?: "info" | "warning" | "success" | "error"
     /**
      * the color variant of the banner; The dark variant is intended for use on
      * bg-complementary pages.
      */
-    variant: {
-      type: String as PropType<"regular" | "dark">,
-      default: "regular",
-    },
+    variant?: "regular" | "dark"
     /**
      * the unique ID of the banner
      */
-    id: {
-      type: String as PropType<BannerId>,
-      required: true,
-    },
+    id: BannerId
     /**
      * the label to apply to the close button
      */
-    closeButtonLabel: {
-      type: [String, Object] as PropType<string | TranslateResult>,
-    },
-  },
-  emits: {
-    close: defineEvent(),
-  },
-  setup(props) {
-    const classNames = computed(() =>
-      props.variant === "dark"
-        ? "bg-tertiary text-over-dark"
-        : {
-            info: "bg-info",
-            warning: "bg-warning",
-            success: "bg-success",
-            error: "bg-error",
-          }[props.nature]
-    )
-    const iconClassNames = computed(() =>
-      props.variant === "dark"
-        ? ""
-        : {
-            info: "text-info-8",
-            warning: "text-warning-8",
-            success: "text-success-8",
-            error: "text-error-8",
-          }[props.nature]
-    )
+    closeButtonLabel?: string
+  }>(),
+  {
+    nature: "info",
+    variant: "regular",
+  }
+)
+
+defineEmits<{
+  close: []
+}>()
 
-    const closeButtonClassNames = computed(() =>
-      props.variant === "dark"
-        ? "focus-slim-tx-bg-complementary hover:bg-tertiary-hover"
-        : {
-            info: "hover:!bg-info-3",
-            warning: "hover:!bg-warning-3",
-            success: "hover:!bg-success-3",
-            error: "hover:!bg-error-3",
-          }[props.nature]
-    )
+const classNames = computed(() =>
+  props.variant === "dark"
+    ? "bg-tertiary text-over-dark"
+    : {
+        info: "bg-info",
+        warning: "bg-warning",
+        success: "bg-success",
+        error: "bg-error",
+      }[props.nature]
+)
+const iconClassNames = computed(() =>
+  props.variant === "dark"
+    ? ""
+    : {
+        info: "text-info-8",
+        warning: "text-warning-8",
+        success: "text-success-8",
+        error: "text-error-8",
+      }[props.nature]
+)
 
-    return {
-      classNames,
-      iconClassNames,
-      closeButtonClassNames,
-    }
-  },
-})
+const closeButtonClassNames = computed(() =>
+  props.variant === "dark"
+    ? "focus-slim-tx-bg-complementary hover:bg-tertiary-hover"
+    : {
+        info: "hover:!bg-info-3",
+        warning: "hover:!bg-warning-3",
+        success: "hover:!bg-success-3",
+        error: "hover:!bg-error-3",
+      }[props.nature]
+)
 </script>
 
 <template>

frontend/src/components/VBanner/VTranslationStatusBanner.vue

@@ -1,53 +1,37 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import type { BannerId } from "~/types/banners"
 
 import { createTranslationLink } from "~/utils/translation-banner"
 
-import { defineEvent } from "~/types/emits"
-
 import VLink from "~/components/VLink.vue"
 import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
 
 import type { LocaleObject } from "@nuxtjs/i18n"
 
-export default defineComponent({
-  name: "VTranslationStatusBanner",
-  components: {
-    VLink,
-    VNotificationBanner,
-  },
-  props: {
-    bannerKey: {
-      type: String as PropType<BannerId>,
-      required: true,
-    },
-  },
-  emits: {
-    close: defineEvent(),
-  },
-  setup() {
-    const i18n = useI18n({ useScope: "global" })
+defineProps<{
+  bannerKey: BannerId
+}>()
+
+defineEmits<{
+  close: []
+}>()
 
-    /**
-     * Returns the link to the GlotPress project for the current locale and the locale native name.
-     */
-    const currentLocale = computed(() => {
-      const localeObject = i18n.localeProperties.value as LocaleObject
+const i18n = useI18n({ useScope: "global" })
 
-      return {
-        link: createTranslationLink(localeObject),
-        name: localeObject.name,
-      }
-    })
+/**
+ * Returns the link to the GlotPress project for the current locale and the locale native name.
+ */
+const currentLocale = computed(() => {
+  const localeObject = i18n.localeProperties.value as LocaleObject
 
-    return {
-      currentLocale,
-    }
-  },
+  return {
+    link: createTranslationLink(localeObject),
+    name: localeObject.name,
+  }
 })
 </script>