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>

Author: obulat

frontend/src/components/VBanner/VAnalyticsNotice.vue

@@ -20,13 +20,18 @@
 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"
 
 export default defineComponent({
   name: "VAnalyticsNotice",
   components: { VLink, VNotificationBanner },
   inheritAttrs: false,
+  emits: {
+    close: defineEvent(),
+  },
   setup() {
     const { app } = useContext()
     const privacyPath = computed(() => app.localePath("/privacy"))

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()
 

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,

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(

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()

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)
 

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()

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

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()
 

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"))

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 {

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>

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 = () => {

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)

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,

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",