chore: script setup components (#7299)

frontend/components/Domain/User/UserAvatar.vue

@@ -4,10 +4,10 @@
     :disabled="!user || !tooltip"
     location="end"
   >
-    <template #activator="{ props }">
+    <template #activator="{ props: tooltipProps }">
       <v-avatar
         v-if="list"
-        v-bind="props"
+        v-bind="tooltipProps"
       >
         <v-img
           :src="imageURL"
@@ -19,7 +19,7 @@
       <v-avatar
         v-else
         :size="size"
-        v-bind="props"
+        v-bind="tooltipProps"
       >
         <v-img
           :src="imageURL"
@@ -35,51 +35,40 @@
   </v-tooltip>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useUserStore } from "~/composables/store/use-user-store";
 
-export default defineNuxtComponent({
-  props: {
-    userId: {
-      type: String,
-      required: true,
-    },
-    list: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: "42",
-    },
-    tooltip: {
-      type: Boolean,
-      default: true,
-    },
+const props = defineProps({
+  userId: {
+    type: String,
+    required: true,
   },
-  setup(props) {
-    const state = reactive({
-      error: false,
-    });
-
-    const auth = useMealieAuth();
-    const { store: users } = useUserStore();
-    const user = computed(() => {
-      return users.value.find(user => user.id === props.userId);
-    });
-
-    const imageURL = computed(() => {
-      // Note: auth.user is a ref now
-      const authUser = auth.user.value;
-      const key = authUser?.cacheKey ?? "";
-      return `/api/media/users/${props.userId}/profile.webp?cacheKey=${key}`;
-    });
-
-    return {
-      user,
-      imageURL,
-      ...toRefs(state),
-    };
+  list: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: "42",
+  },
+  tooltip: {
+    type: Boolean,
+    default: true,
   },
 });
+
+const error = ref(false);
+
+const auth = useMealieAuth();
+const { store: users } = useUserStore();
+const user = computed(() => {
+  return users.value.find(user => user.id === props.userId);
+});
+
+const imageURL = computed(() => {
+  // Note: auth.user is a ref now
+  const authUser = auth.user.value;
+  const key = authUser?.cacheKey ?? "";
+  return `/api/media/users/${props.userId}/profile.webp?cacheKey=${key}`;
+});
 </script>