From 8f9ea0ab3f73ce4a19d1dc8e9c3833b6549ff305 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 13 Nov 2023 12:21:36 +0300
Subject: [PATCH] Add some Vue 3 Eslint rules (#3322)

* Enable some Vue 3 Eslint rules

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Update packages/eslint-plugin/src/configs/vue.ts

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

* Update packages/eslint-plugin/src/configs/vue.ts

---------

Signed-off-by: Olga Bulat <obulat@gmail.com>
Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
---
 frontend/src/components/VBanner/VAnalyticsNotice.vue     | 5 +++++
 .../src/components/VBanner/VTranslationStatusBanner.vue  | 5 +++++
 .../src/components/VContentReport/VReportDescForm.vue    | 4 ++++
 .../components/VContentSwitcher/VSearchTypeButton.vue    | 5 +++++
 .../src/components/VContentSwitcher/VSearchTypeItem.vue  | 5 +++++
 .../components/VContentSwitcher/VSearchTypePopover.vue   | 5 +++++
 .../VHeaderMobile/VContentSettingsModalContent.vue       | 7 +++++++
 .../VHeader/VHeaderMobile/VShowResultsButton.vue         | 5 +++++
 frontend/src/components/VHeader/VPageLinks.vue           | 5 +++++
 frontend/src/components/VHideButton.vue                  | 4 ++++
 frontend/src/components/VLink.vue                        | 9 +++++++++
 frontend/src/components/VMediaInfo/VMetadataValue.vue    | 5 +++++
 frontend/src/components/VRadio/VRadio.vue                | 5 +++++
 frontend/src/components/VSafetyWall/VSafetyWall.vue      | 5 +++++
 frontend/test/unit/setup.js                              | 1 +
 packages/eslint-plugin/src/configs/vue.ts                | 6 ++++++
 16 files changed, 81 insertions(+)

diff --git a/frontend/src/components/VBanner/VAnalyticsNotice.vue b/frontend/src/components/VBanner/VAnalyticsNotice.vue
index ed4c4c92487..1538a00aafa 100644
--- a/frontend/src/components/VBanner/VAnalyticsNotice.vue
+++ b/frontend/src/components/VBanner/VAnalyticsNotice.vue
@@ -20,6 +20,8 @@
 import { computed, defineComponent } from "vue"
 import { useContext } from "@nuxtjs/composition-api"
 
+import { defineEvent } from "~/types/emits"
+
 import VLink from "~/components/VLink.vue"
 import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
 
@@ -27,6 +29,9 @@ export default defineComponent({
   name: "VAnalyticsNotice",
   components: { VLink, VNotificationBanner },
   inheritAttrs: false,
+  emits: {
+    close: defineEvent(),
+  },
   setup() {
     const { app } = useContext()
     const privacyPath = computed(() => app.localePath("/privacy"))
diff --git a/frontend/src/components/VBanner/VTranslationStatusBanner.vue b/frontend/src/components/VBanner/VTranslationStatusBanner.vue
index d0d63d0a23f..f089506d966 100644
--- a/frontend/src/components/VBanner/VTranslationStatusBanner.vue
+++ b/frontend/src/components/VBanner/VTranslationStatusBanner.vue
@@ -29,6 +29,8 @@ import { useUiStore } from "~/stores/ui"
 
 import { createTranslationLink } from "~/utils/translation-banner"
 
+import { defineEvent } from "~/types/emits"
+
 import VLink from "~/components/VLink.vue"
 import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
 
@@ -45,6 +47,9 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: {
+    close: defineEvent(),
+  },
   setup() {
     const uiStore = useUiStore()
 
diff --git a/frontend/src/components/VContentReport/VReportDescForm.vue b/frontend/src/components/VContentReport/VReportDescForm.vue
index 6af251c870d..e4eaced03d9 100644
--- a/frontend/src/components/VContentReport/VReportDescForm.vue
+++ b/frontend/src/components/VContentReport/VReportDescForm.vue
@@ -24,6 +24,7 @@
 import { computed, defineComponent, PropType } from "vue"
 
 import { reasons, OTHER, ReportReason } from "~/constants/content-report"
+import { defineEvent } from "~/types/emits"
 
 export default defineComponent({
   name: "VReportDescForm",
@@ -47,6 +48,9 @@ export default defineComponent({
       validator: (val: ReportReason) => reasons.includes(val),
     },
   },
+  emits: {
+    input: defineEvent<[string]>(),
+  },
   setup(props, { emit }) {
     const text = computed({
       get: () => props.content,
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
index 5edb5519eaa..81a49e499f6 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
@@ -22,6 +22,8 @@ import type { SearchType } from "~/constants/media"
 
 import { warn } from "~/utils/console"
 
+import { defineEvent } from "~/types/emits"
+
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VButton from "~/components/VButton.vue"
 
@@ -52,6 +54,9 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: {
+    click: defineEvent(),
+  },
   setup(_, { attrs }) {
     if (!attrs["aria-haspopup"] || attrs["aria-expanded"] === undefined) {
       warn(
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue b/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
index b63a87a8229..0e32b6045ec 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
@@ -23,6 +23,8 @@ import { BETA, contentStatus, SearchType } from "~/constants/media"
 import { isSearchTypeSupported, useSearchStore } from "~/stores/search"
 import useSearchType from "~/composables/use-search-type"
 
+import { defineEvent } from "~/types/emits"
+
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VItem from "~/components/VItemGroup/VItem.vue"
 import VPill from "~/components/VPill.vue"
@@ -75,6 +77,9 @@ export default defineComponent({
       default: "small",
     },
   },
+  emits: {
+    click: defineEvent<[SearchType]>(),
+  },
   setup(props) {
     const searchStore = useSearchStore()
     const { getSearchTypeProps } = useSearchType()
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
index 20df3f86870..691f077b3f7 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
@@ -31,6 +31,8 @@ import useSearchType from "~/composables/use-search-type"
 
 import type { SearchType } from "~/constants/media"
 
+import { defineEvent } from "~/types/emits"
+
 import VPopover from "~/components/VPopover/VPopover.vue"
 import VSearchTypeButton from "~/components/VContentSwitcher/VSearchTypeButton.vue"
 import VSearchTypes from "~/components/VContentSwitcher/VSearchTypes.vue"
@@ -52,6 +54,9 @@ export default defineComponent({
       default: "header",
     },
   },
+  emits: {
+    select: defineEvent<[SearchType]>(),
+  },
   setup(_, { emit }) {
     const contentMenuPopover = ref<InstanceType<typeof VPopover> | null>(null)
 
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
index c836a30f78b..7d91feb1941 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
@@ -85,6 +85,10 @@ import { useSearchStore } from "~/stores/search"
 
 import useSearchType from "~/composables/use-search-type"
 
+import { defineEvent } from "~/types/emits"
+
+import { SearchType } from "~/constants/media"
+
 import VButton from "~/components/VButton.vue"
 import VFilterTab from "~/components/VHeader/VHeaderMobile/VFilterTab.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -138,6 +142,9 @@ export default defineComponent({
       default: true,
     },
   },
+  emits: {
+    select: defineEvent<[SearchType]>(),
+  },
   setup(props) {
     const searchStore = useSearchStore()
     const content = useSearchType()
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
index 308a68f7b1b..0e21a5bc3d2 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
@@ -45,6 +45,8 @@
 <script lang="ts">
 import { computed, defineComponent } from "vue"
 
+import { defineEvent } from "~/types/emits"
+
 import VButton from "~/components/VButton.vue"
 
 /**
@@ -63,6 +65,9 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: {
+    click: defineEvent(),
+  },
   setup() {
     const diameter = 8 // px
     const spacing = 8 // px
diff --git a/frontend/src/components/VHeader/VPageLinks.vue b/frontend/src/components/VHeader/VPageLinks.vue
index 1a4ba5f25c6..bea4e6e6955 100644
--- a/frontend/src/components/VHeader/VPageLinks.vue
+++ b/frontend/src/components/VHeader/VPageLinks.vue
@@ -55,6 +55,8 @@ import { type PropType, defineComponent, computed } from "vue"
 
 import usePages from "~/composables/use-pages"
 
+import { defineEvent } from "~/types/emits"
+
 import VItemGroup from "~/components/VItemGroup/VItemGroup.vue"
 import VItem from "~/components/VItemGroup/VItem.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -97,6 +99,9 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: {
+    close: defineEvent(),
+  },
   setup(props, { emit }) {
     const { all: allPages, current: currentPage } = usePages()
 
diff --git a/frontend/src/components/VHideButton.vue b/frontend/src/components/VHideButton.vue
index 0c12f291488..eb797daada0 100644
--- a/frontend/src/components/VHideButton.vue
+++ b/frontend/src/components/VHideButton.vue
@@ -28,8 +28,12 @@
 import { computed, defineComponent } from "@nuxtjs/composition-api"
 
 import { useUiStore } from "~/stores/ui"
+import { defineEvent } from "~/types/emits"
 
 export default defineComponent({
+  emits: {
+    click: defineEvent(),
+  },
   setup() {
     const uiStore = useUiStore()
     const isMd = computed(() => uiStore.isBreakpoint("md"))
diff --git a/frontend/src/components/VLink.vue b/frontend/src/components/VLink.vue
index d86ba39d185..2fbd6e55955 100644
--- a/frontend/src/components/VLink.vue
+++ b/frontend/src/components/VLink.vue
@@ -48,6 +48,8 @@ import { useContext } from "@nuxtjs/composition-api"
 
 import { useAnalytics } from "~/composables/use-analytics"
 
+import { defineEvent } from "~/types/emits"
+
 import VIcon from "~/components/VIcon/VIcon.vue"
 
 type InternalLinkProps = { to: string }
@@ -93,6 +95,13 @@ export default defineComponent({
       default: true,
     },
   },
+  emits: {
+    mousedown: defineEvent<[MouseEvent]>(),
+    click: defineEvent<[MouseEvent]>(),
+    blur: defineEvent<[FocusEvent]>(),
+    focus: defineEvent<[FocusEvent]>(),
+    keydown: defineEvent<[KeyboardEvent]>(),
+  },
   setup(props) {
     const { app } = useContext()
     function checkHref(p: typeof props): p is {
diff --git a/frontend/src/components/VMediaInfo/VMetadataValue.vue b/frontend/src/components/VMediaInfo/VMetadataValue.vue
index 84f39aeadb5..5387d5eaaca 100644
--- a/frontend/src/components/VMediaInfo/VMetadataValue.vue
+++ b/frontend/src/components/VMediaInfo/VMetadataValue.vue
@@ -20,6 +20,8 @@
 <script lang="ts">
 import type { Metadata } from "~/types/media"
 
+import { defineEvent } from "~/types/emits"
+
 import VLink from "~/components/VLink.vue"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -35,5 +37,8 @@ export default {
       required: true,
     },
   },
+  emits: {
+    click: defineEvent<[string | undefined]>(),
+  },
 }
 </script>
diff --git a/frontend/src/components/VRadio/VRadio.vue b/frontend/src/components/VRadio/VRadio.vue
index fea706a7a72..3a51ac09ba0 100644
--- a/frontend/src/components/VRadio/VRadio.vue
+++ b/frontend/src/components/VRadio/VRadio.vue
@@ -23,6 +23,8 @@
 <script lang="ts">
 import { computed, defineComponent } from "vue"
 
+import { defineEvent } from "~/types/emits"
+
 import VSvg from "~/components/VSvg/VSvg.vue"
 /**
  * Renders a radio input field, useful for choosing one of a few options that
@@ -64,6 +66,9 @@ export default defineComponent({
       default: "",
     },
   },
+  emits: {
+    change: defineEvent<[string]>(),
+  },
   setup(props, { emit }) {
     const isChecked = computed(() => props.value_ === props.modelValue)
     const handleInput = () => {
diff --git a/frontend/src/components/VSafetyWall/VSafetyWall.vue b/frontend/src/components/VSafetyWall/VSafetyWall.vue
index df2419c592e..73b621cb415 100644
--- a/frontend/src/components/VSafetyWall/VSafetyWall.vue
+++ b/frontend/src/components/VSafetyWall/VSafetyWall.vue
@@ -63,6 +63,8 @@ import { useAnalytics } from "~/composables/use-analytics"
 import { camelCase } from "~/utils/case"
 import type { AudioDetail, ImageDetail } from "~/types/media"
 
+import { defineEvent } from "~/types/emits"
+
 import VLink from "~/components/VLink.vue"
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -80,6 +82,9 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: {
+    reveal: defineEvent(),
+  },
   setup(props, { emit }) {
     const searchStore = useSearchStore()
     const backToSearchPath = computed(() => searchStore.backToSearchPath)
diff --git a/frontend/test/unit/setup.js b/frontend/test/unit/setup.js
index 6a8b1a358cf..6a7d52c2cef 100644
--- a/frontend/test/unit/setup.js
+++ b/frontend/test/unit/setup.js
@@ -20,6 +20,7 @@ Vue.use(VueI18n)
  */
 config.stubs["nuxt-link"] = Vue.component("NuxtLink", {
   props: ["to"],
+  emits: ["click", "mousedown"],
   methods: {
     handleClick() {
       // This is an adaptation to mimic NuxtLink's behavior,
diff --git a/packages/eslint-plugin/src/configs/vue.ts b/packages/eslint-plugin/src/configs/vue.ts
index d1bc6110c6c..c7df7cbfff5 100644
--- a/packages/eslint-plugin/src/configs/vue.ts
+++ b/packages/eslint-plugin/src/configs/vue.ts
@@ -10,11 +10,17 @@ const i18nDestructureRules = ["t", "tc", "te", "td", "d", "n"].map(
 export = {
   extends: [
     "plugin:vue/recommended",
+    "plugin:vue/vue3-recommended",
     "plugin:vuejs-accessibility/recommended",
     "plugin:@intlify/vue-i18n/recommended",
   ],
   plugins: ["vue", "vuejs-accessibility", "@intlify/vue-i18n"],
   rules: {
+    // Enable these rules after the Nuxt 3 migration
+    "vue/no-deprecated-dollar-listeners-api": "off",
+    "vue/no-v-for-template-key-on-child": "off",
+    "vue/no-deprecated-v-on-native-modifier": "off",
+
     "vue/max-attributes-per-line": "off",
     "vue/require-prop-types": "off",
     "vue/require-default-prop": "off",