Convert Avatar & Badge components to Composition API (#1386)

components/ui/Avatar.vue

@@ -34,9 +34,10 @@
   </svg>
 </template>
 
-<script>
+<script setup>
-export default {
+const pixelated = ref(false)
-  props: {
+
+defineProps({
   src: {
     type: String,
     default: null,
@@ -68,21 +69,14 @@ export default {
     type: Boolean,
     default: false,
   },
-  },
+})
-  data() {
+
-    return {
+function updatePixelated() {
-      pixelated: false,
-    }
-  },
-  methods: {
-    updatePixelated() {
   if (this.$refs.img && this.$refs.img.naturalWidth && this.$refs.img.naturalWidth <= 96) {
     this.pixelated = true
   } else {
     this.pixelated = false
   }
-    },
-  },
 }
 </script>
 

components/ui/Badge.vue

@@ -34,7 +34,7 @@
   </span>
 </template>
 
-<script>
+<script setup>
 import ModrinthIcon from '~/assets/images/logo.svg'
 import ModeratorIcon from '~/assets/images/sidebar/admin.svg'
 import CreatorIcon from '~/assets/images/utils/box.svg'
@@ -49,23 +49,7 @@ import LockIcon from '~/assets/images/utils/lock.svg'
 import CalendarIcon from '~/assets/images/utils/calendar.svg'
 import CloseIcon from '~/assets/images/utils/check-circle.svg'
 
-export default {
+defineProps({
-  components: {
-    ModrinthIcon,
-    ListIcon,
-    DraftIcon,
-    EyeOffIcon,
-    ModeratorIcon,
-    CreatorIcon,
-    CrossIcon,
-    ArchiveIcon,
-    ProcessingIcon,
-    CheckIcon,
-    LockIcon,
-    CalendarIcon,
-    CloseIcon,
-  },
-  props: {
   type: {
     type: String,
     required: true,
@@ -74,8 +58,7 @@ export default {
     type: String,
     default: '',
   },
-  },
+})
-}
 </script>
 
 <style lang="scss" scoped>