Upgraded all components to vue 3 & typescript

src/components/ResultsList.vue

@@ -6,9 +6,9 @@
       :class="{ shortList: shortList }"
     >
       <results-list-item
-        v-for="(movie, index) in results"
-        :key="`${movie.type}-${movie.id}-${index}`"
-        :movie="movie"
+        v-for="(result, index) in results"
+        :key="`${result.type}-${result.id}-${index}`"
+        :listItem="result"
       />
     </ul>
 
@@ -16,68 +16,58 @@
   </div>
 </template>
 
-<script>
-import ResultsListItem from "@/components/ResultsListItem";
+<script setup lang="ts">
+  import { defineProps } from "vue";
+  import ResultsListItem from "@/components/ResultsListItem.vue";
+  import type { ListResults } from "../interfaces/IList";
 
-export default {
-  components: { ResultsListItem },
-  props: {
-    results: {
-      type: Array,
-      required: true
-    },
-    shortList: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
+  interface Props {
+    results: Array<ListResults>;
+    shortList?: Boolean;
+    loading?: Boolean;
   }
-};
+
+  const props = defineProps<Props>();
 </script>
 
-<style lang="scss">
-@import "src/scss/media-queries";
-@import "src/scss/main";
+<style lang="scss" scoped>
+  @import "src/scss/media-queries";
+  @import "src/scss/main";
 
-.no-results {
-  width: 100%;
-  display: block;
-  text-align: center;
-  margin: 1.5rem;
-  font-size: 1.2rem;
-}
-
-.results {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
-  grid-auto-rows: auto;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  @include mobile {
-    grid-template-columns: repeat(2, 1fr);
+  .no-results {
+    width: 100%;
+    display: block;
+    text-align: center;
+    margin: 1.5rem;
+    font-size: 1.2rem;
   }
 
-  &.shortList {
-    overflow: auto;
-    grid-auto-flow: column;
-    max-width: 100vw;
+  .results {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
+    grid-auto-rows: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 
-    @include noscrollbar;
-
-    > li {
-      min-width: 225px;
+    @include mobile {
+      grid-template-columns: repeat(2, 1fr);
     }
 
-    @include tablet-min {
-      max-width: calc(100vw - var(--header-size));
+    &.shortList {
+      overflow: auto;
+      grid-auto-flow: column;
+      max-width: 100vw;
+
+      @include noscrollbar;
+
+      > li {
+        min-width: 225px;
+      }
+
+      @include tablet-min {
+        max-width: calc(100vw - var(--header-size));
+      }
     }
   }
-}
 </style>