Convert components used on single result pages

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

frontend/src/components/VBackToSearchResultsLink.vue

@@ -1,7 +1,6 @@
-<script lang="ts">
-import { defineComponent } from "vue"
-
+<script setup lang="ts">
 import { useAnalytics } from "~/composables/use-analytics"
+
 import { useSearchStore } from "~/stores/search"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -11,40 +10,23 @@ import VButton from "~/components/VButton.vue"
  * This link takes the user from a single result back to the list of all
  * results. It only appears if the user navigated from the search results.
  */
-export default defineComponent({
-  components: {
-    VIcon,
-    VButton,
-  },
-  props: {
-    /**
-     * The unique ID of the media
-     */
-    id: {
-      type: String,
-      required: true,
-    },
-    href: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { sendCustomEvent } = useAnalytics()
-    const searchStore = useSearchStore()
+const props = defineProps<{
+  /**
+   * The unique ID of the media
+   */
+  id: string
+  href: string
+}>()
 
-    const handleClick = () => {
-      sendCustomEvent("BACK_TO_SEARCH", {
-        id: props.id,
-        searchType: searchStore.searchType,
-      })
-    }
+const { sendCustomEvent } = useAnalytics()
+const searchStore = useSearchStore()
 
-    return {
-      handleClick,
-    }
-  },
-})
+const handleClick = () => {
+  sendCustomEvent("BACK_TO_SEARCH", {
+    id: props.id,
+    searchType: searchStore.searchType,
+  })
+}
 </script>
 
 <template>

frontend/src/components/VContentReport/VDmcaNotice.vue

@@ -1,39 +1,19 @@
-<script lang="ts">
-import { defineComponent } from "vue"
-
+<script setup lang="ts">
 import { DMCA_FORM_URL } from "~/constants/content-report"
-import { defineEvent } from "~/types/emits"
 
 import VLink from "~/components/VLink.vue"
 
-export default defineComponent({
-  name: "VDmcaNotice",
-  components: { VLink },
-  props: {
-    /**
-     * the foreign landing URL for the media item
-     */
-    foreignLandingUrl: {
-      type: String,
-      required: true,
-    },
-    /**
-     * the name of the provider of the media item
-     */
-    provider: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: {
-    click: defineEvent(),
-  },
-  setup() {
-    return {
-      DMCA_FORM_URL,
-    }
-  },
-})
+defineProps<{
+  /**
+   * the foreign landing URL for the media item
+   */
+  foreignLandingUrl: string
+  /**
+   * the name of the provider of the media item
+   */
+  provider: string
+}>()
+defineEmits<{ click: [] }>()
 </script>
 
 <template>

frontend/src/components/VContentReport/VReportDescForm.vue

@@ -1,48 +1,32 @@
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { computed } from "vue"
 
-import { reasons, OTHER, ReportReason } from "~/constants/content-report"
-import { defineEvent } from "~/types/emits"
+import { OTHER, type ReportReason } from "~/constants/content-report"
 
-export default defineComponent({
-  name: "VReportDescForm",
-  model: {
-    prop: "content",
-    event: "update:content",
-  },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * the contents of the textarea
      */
-    content: {
-      type: String,
-      default: "",
-    },
+    content?: string
     /**
      * the reason selected for reporting the content
      */
-    reason: {
-      type: String as PropType<ReportReason>,
-      validator: (val: ReportReason) => reasons.includes(val),
-    },
-  },
-  emits: {
-    "update:content": defineEvent<[string]>(),
-  },
-  setup(props, { emit }) {
-    const text = computed({
-      get: () => props.content,
-      set: (val) => emit("update:content", val),
-    })
+    reason: ReportReason
+  }>(),
+  {
+    content: "",
+  }
+)
 
-    const isRequired = computed(() => props.reason === OTHER)
+const emit = defineEmits<{ "update:content": [string] }>()
 
-    return {
-      isRequired,
-      text,
-    }
-  },
+const text = computed({
+  get: () => props.content,
+  set: (val) => emit("update:content", val),
 })
+
+const isRequired = computed(() => props.reason === OTHER)
 </script>
 
 <template>

frontend/src/components/VCopyButton.vue

@@ -1,75 +1,56 @@
-<script lang="ts">
+<script setup lang="ts">
 import Clipboard from "clipboard"
 
-import { defineComponent, onBeforeUnmount, onMounted, ref } from "vue"
+import { onBeforeUnmount, onMounted, ref } from "vue"
 
 import { useHydrating } from "~/composables/use-hydrating"
 
 import VButton from "~/components/VButton.vue"
 
-export default defineComponent({
-  name: "VCopyButton",
-  components: { VButton },
-  props: {
-    el: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: ["copied", "copy-failed"],
-  setup(props, { emit }) {
-    const clipboard = ref<Clipboard | null>(null)
-    const success = ref(false)
-
-    function setFocusOnButton(): void {
-      const button = document.getElementById(props.id)
-      if (button) {
-        button.focus()
-      }
-    }
-
-    const onCopySuccess = (e: Clipboard.Event) => {
-      success.value = true
-      emit("copied")
-
-      setTimeout(() => {
-        success.value = false
-      }, 2000)
-
-      e.clearSelection()
-
-      /* Set the focus back on the button */
-      setFocusOnButton()
-    }
-    const onCopyError = (e: Clipboard.Event) => {
-      emit("copy-failed")
-      e.clearSelection()
-
-      /* Restore focus on the button */
-      setFocusOnButton()
-    }
-
-    onMounted(() => {
-      clipboard.value = new Clipboard(`#${props.id}`)
-      clipboard.value.on("success", onCopySuccess)
-      clipboard.value.on("error", onCopyError)
-    })
-
-    onBeforeUnmount(() => clipboard.value?.destroy())
-
-    const { doneHydrating } = useHydrating()
-
-    return {
-      clipboard,
-      success,
-      doneHydrating,
-    }
-  },
+const props = defineProps<{ el: string; id: string }>()
+
+const emit = defineEmits<{ copied: []; "copy-failed": [] }>()
+
+const clipboard = ref<Clipboard | null>(null)
+const success = ref(false)
+
+function setFocusOnButton(): void {
+  const button = document.getElementById(props.id)
+  if (button) {
+    button.focus()
+  }
+}
+
+const onCopySuccess = (e: Clipboard.Event) => {
+  success.value = true
+  emit("copied")
+
+  setTimeout(() => {
+    success.value = false
+  }, 2000)
+
+  e.clearSelection()
+
+  /* Set the focus back on the button */
+  setFocusOnButton()
+}
+const onCopyError = (e: Clipboard.Event) => {
+  emit("copy-failed")
+  e.clearSelection()
+
+  /* Restore focus on the button */
+  setFocusOnButton()
+}
+
+onMounted(() => {
+  clipboard.value = new Clipboard(`#${props.id}`)
+  clipboard.value.on("success", onCopySuccess)
+  clipboard.value.on("error", onCopyError)
 })
+
+onBeforeUnmount(() => clipboard.value?.destroy())
+
+const { doneHydrating } = useHydrating()
 </script>
 
 <template>

frontend/src/components/VHideButton.vue

@@ -1,32 +1,16 @@
-<script lang="ts">
-import { computed, defineComponent } from "vue"
+<script setup lang="ts">
+import { computed } from "vue"
 
 import { useUiStore } from "~/stores/ui"
-import { defineEvent } from "~/types/emits"
 
 import VButton from "~/components/VButton.vue"
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 
-export default defineComponent({
-  name: "VHideButton",
-  components: {
-    VButton,
-    VIconButton,
-    VIcon,
-  },
-  emits: {
-    click: defineEvent(),
-  },
-  setup() {
-    const uiStore = useUiStore()
-    const isMd = computed(() => uiStore.isBreakpoint("md"))
+defineEmits<{ click: [] }>()
 
-    return {
-      isMd,
-    }
-  },
-})
+const uiStore = useUiStore()
+const isMd = computed(() => uiStore.isBreakpoint("md"))
 </script>
 
 <template>