From 1358336a762fb1f51bdd562a2622733b138ee7ee Mon Sep 17 00:00:00 2001
From: Erb3 <49862976+Erb3@users.noreply.github.com>
Date: Fri, 21 Feb 2025 19:59:19 +0100
Subject: [PATCH] refactor(ui): move Chips component to composition API + TS
 (#3288)

* refactor(ui): move Chips component to composition API + TS

* refactor(ui): move Chips component to composition API + TS
---
 .../src/components/ui/report/ReportsList.vue  |  2 -
 .../pages/[type]/[id]/version/[version].vue   |  3 +-
 .../src/pages/dashboard/notifications.vue     |  3 +-
 apps/frontend/src/pages/moderation/review.vue |  2 +-
 packages/ui/src/components/base/Chips.vue     | 83 +++++++------------
 5 files changed, 33 insertions(+), 60 deletions(-)

diff --git a/apps/frontend/src/components/ui/report/ReportsList.vue b/apps/frontend/src/components/ui/report/ReportsList.vue
index 06eed819..f2fe1b5d 100644
--- a/apps/frontend/src/components/ui/report/ReportsList.vue
+++ b/apps/frontend/src/components/ui/report/ReportsList.vue
@@ -1,5 +1,4 @@
 <template>
-  <Chips v-if="false" v-model="viewMode" :items="['open', 'archived']" />
   <ReportInfo
     v-for="report in reports.filter(
       (x) =>
@@ -17,7 +16,6 @@
   <p v-if="reports.length === 0">You don't have any active reports.</p>
 </template>
 <script setup>
-import Chips from "~/components/ui/Chips.vue";
 import ReportInfo from "~/components/ui/report/ReportInfo.vue";
 import { addReportMessage } from "~/helpers/threads.js";
 
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 2e3a9d54..8fd5689c 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -640,7 +640,6 @@ import Badge from "~/components/ui/Badge.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import CopyCode from "~/components/ui/CopyCode.vue";
 import Categories from "~/components/ui/search/Categories.vue";
-import Chips from "~/components/ui/Chips.vue";
 import Checkbox from "~/components/ui/Checkbox.vue";
 import FileInput from "~/components/ui/FileInput.vue";
 
@@ -663,6 +662,7 @@ import Modal from "~/components/ui/Modal.vue";
 import ChevronRightIcon from "~/assets/images/utils/chevron-right.svg?component";
 
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
+
 export default defineNuxtComponent({
   components: {
     MarkdownEditor,
@@ -670,7 +670,6 @@ export default defineNuxtComponent({
     FileInput,
     Checkbox,
     ChevronRightIcon,
-    Chips,
     Categories,
     DownloadIcon,
     EditIcon,
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index 2c4f839d..8d6a7597 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -50,7 +50,7 @@
   </div>
 </template>
 <script setup>
-import { Button } from "@modrinth/ui";
+import { Button, Chips } from "@modrinth/ui";
 import { HistoryIcon } from "@modrinth/assets";
 import {
   fetchExtraNotificationData,
@@ -58,7 +58,6 @@ import {
   markAsRead,
 } from "~/helpers/notifications.js";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
-import Chips from "~/components/ui/Chips.vue";
 import CheckCheckIcon from "~/assets/images/utils/check-check.svg?component";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import Pagination from "~/components/ui/Pagination.vue";
diff --git a/apps/frontend/src/pages/moderation/review.vue b/apps/frontend/src/pages/moderation/review.vue
index 0b94fbe6..446f0eb6 100644
--- a/apps/frontend/src/pages/moderation/review.vue
+++ b/apps/frontend/src/pages/moderation/review.vue
@@ -101,7 +101,7 @@
   </section>
 </template>
 <script setup>
-import Chips from "~/components/ui/Chips.vue";
+import { Chips } from "@modrinth/ui";
 import Avatar from "~/components/ui/Avatar.vue";
 import UnknownIcon from "~/assets/images/utils/unknown.svg?component";
 import EyeIcon from "~/assets/images/utils/eye.svg?component";
diff --git a/packages/ui/src/components/base/Chips.vue b/packages/ui/src/components/base/Chips.vue
index 1785d95a..382ce2db 100644
--- a/packages/ui/src/components/base/Chips.vue
+++ b/packages/ui/src/components/base/Chips.vue
@@ -2,7 +2,7 @@
   <div class="chips">
     <Button
       v-for="item in items"
-      :key="item"
+      :key="formatLabel(item)"
       class="btn"
       :class="{ selected: selected === item, capitalize: capitalize }"
       @click="toggleItem(item)"
@@ -12,62 +12,39 @@
     </Button>
   </div>
 </template>
-<script setup>
+
+<script setup lang="ts" generic="T">
 import { CheckIcon } from '@modrinth/assets'
-</script>
-<script>
-import { defineComponent } from 'vue'
 import Button from './Button.vue'
 
-export default defineComponent({
-  props: {
-    modelValue: {
-      required: true,
-      type: String,
-    },
-    items: {
-      required: true,
-      type: Array,
-    },
-    neverEmpty: {
-      default: true,
-      type: Boolean,
-    },
-    formatLabel: {
-      default: (x) => x,
-      type: Function,
-    },
-    capitalize: {
-      type: Boolean,
-      default: true,
-    },
+const props = withDefaults(
+  defineProps<{
+    items: T[]
+    formatLabel?: (item: T) => string
+    neverEmpty?: boolean
+    capitalize?: boolean
+  }>(),
+  {
+    neverEmpty: true,
+    // Intentional any type, as this default should only be used for primitives (string or number)
+    formatLabel: (item) => item.toString(),
+    capitalize: true,
   },
-  emits: ['update:modelValue'],
-  computed: {
-    selected: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.$emit('update:modelValue', value)
-      },
-    },
-  },
-  created() {
-    if (this.items.length > 0 && this.neverEmpty && !this.modelValue) {
-      this.selected = this.items[0]
-    }
-  },
-  methods: {
-    toggleItem(item) {
-      if (this.selected === item && !this.neverEmpty) {
-        this.selected = null
-      } else {
-        this.selected = item
-      }
-    },
-  },
-})
+)
+const selected = defineModel<T | null>()
+
+// If one always has to be selected, default to the first one
+if (props.items.length > 0 && props.neverEmpty && !selected.value) {
+  selected.value = props.items[0]
+}
+
+function toggleItem(item: T) {
+  if (selected.value === item && !props.neverEmpty) {
+    selected.value = null
+  } else {
+    selected.value = item
+  }
+}
 </script>
 
 <style lang="scss" scoped>