Convert single result page components (#4781)

Signed-off-by: Olga Bulat <[email protected]>
WordPress · Aug 21, 2024 · 1c7c2ff · 1c7c2ff
1 parent 683cb82
commit 1c7c2ff
Show file tree

Hide file tree

Showing 18 changed files with 579 additions and 906 deletions.
diff --git a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
@@ -1,5 +1,5 @@
-<script lang="ts">
-import { computed, defineComponent, type PropType } from "vue"
+<script setup lang="ts">
+import { computed } from "vue"
 
 import { useSearchStore } from "~/stores/search"
 import type { AudioDetail, ImageDetail } from "~/types/media"
@@ -10,51 +10,34 @@ import VScrollableLine from "~/components/VScrollableLine.vue"
 /**
  * A link to a collection page, either a source or a creator.
  */
-export default defineComponent({
-  name: "VByLine",
-  components: {
-    VScrollableLine,
-    VSourceCreatorButton,
-  },
-  props: {
-    media: {
-      type: Object as PropType<AudioDetail | ImageDetail>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const searchStore = useSearchStore()
-
-    const creator = computed(() => {
-      if (props.media.creator && props.media.creator !== "unidentified") {
-        const href = searchStore.getCollectionPath({
-          type: props.media.frontendMediaType,
-          collectionParams: {
-            collection: "creator",
-            source: props.media.source,
-            creator: props.media.creator,
-          },
-        })
-        return { name: props.media.creator, href }
-      }
-      return null
-    })
+const props = defineProps<{
+  media: AudioDetail | ImageDetail
+}>()
+const searchStore = useSearchStore()
 
-    const sourceHref = computed(() => {
-      return searchStore.getCollectionPath({
-        type: props.media.frontendMediaType,
-        collectionParams: {
-          collection: "source",
-          source: props.media.source,
-        },
-      })
+const creator = computed(() => {
+  if (props.media.creator && props.media.creator !== "unidentified") {
+    const href = searchStore.getCollectionPath({
+      type: props.media.frontendMediaType,
+      collectionParams: {
+        collection: "creator",
+        source: props.media.source,
+        creator: props.media.creator,
+      },
     })
+    return { name: props.media.creator, href }
+  }
+  return null
+})
 
-    return {
-      creator,
-      sourceHref,
-    }
-  },
+const sourceHref = computed(() => {
+  return searchStore.getCollectionPath({
+    type: props.media.frontendMediaType,
+    collectionParams: {
+      collection: "source",
+      source: props.media.source,
+    },
+  })
 })
 </script>
 

diff --git a/frontend/src/components/VMediaInfo/VByLine/VScroller.vue b/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
@@ -1,43 +1,27 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
-
-import { defineEvent } from "~/types/emits"
+import { computed } from "vue"
 
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
-export default defineComponent({
-  name: "VScroller",
-  components: { VIconButton },
-  props: {
-    direction: {
-      type: String as PropType<"forward" | "back">,
-      required: true,
-    },
-  },
-  emits: {
-    click: defineEvent(),
-  },
-  setup(props) {
-    const { t } = useI18n({ useScope: "global" })
-    const iconName = computed(() =>
-      props.direction === "forward" ? "chevron-forward" : "chevron-back"
-    )
-    const label = computed(() =>
-      t(
-        props.direction === "forward"
-          ? "mediaDetails.scroll.forward"
-          : "mediaDetails.scroll.back"
-      )
-    )
-
-    return {
-      iconName,
-      label,
-    }
-  },
-})
+const props = defineProps<{ direction: "forward" | "back" }>()
+
+defineEmits<{ click: [] }>()
+
+const { t } = useI18n({ useScope: "global" })
+
+const iconName = computed(() =>
+  props.direction === "forward" ? "chevron-forward" : "chevron-back"
+)
+
+const label = computed(() =>
+  t(
+    props.direction === "forward"
+      ? "mediaDetails.scroll.forward"
+      : "mediaDetails.scroll.back"
+  )
+)
 </script>
 
 <template>

diff --git a/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
@@ -1,27 +1,12 @@
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
+<script setup lang="ts">
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 
-export default defineComponent({
-  name: "VSourceCreatorButton",
-  components: { VButton, VIcon },
-  props: {
-    href: {
-      type: String,
-      required: true,
-    },
-    iconName: {
-      type: String as PropType<"person" | "institution">,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-  },
-})
+defineProps<{
+  href: string
+  iconName: "person" | "institution"
+  title: string
+}>()
 </script>
 
 <template>