refactor: no more vue multiselect

apps/app-frontend/package.json

@@ -39,7 +39,6 @@
 		"three": "^0.172.0",
 		"vite-svg-loader": "^5.1.0",
 		"vue": "^3.5.13",
-		"vue-multiselect": "3.0.0",
 		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8"
 	},

apps/app-frontend/src/App.vue

@@ -1534,4 +1534,3 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	}
 }
 </style>
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>

apps/app-frontend/src/components/ui/InstanceCreationModal.vue

@@ -36,15 +36,13 @@
 			<div class="input-row">
 				<p class="input-label">Game version</p>
 				<div class="flex gap-4 items-center">
-					<multiselect
+					<Combobox
 						v-model="game_version"
 						class="selector"
-						:options="game_versions"
-						:multiple="false"
+						:options="gameVersionOptions"
 						:searchable="true"
 						placeholder="Select game version"
-						open-direction="top"
-						:show-labels="false"
+						force-direction="up"
 					/>
 					<Checkbox v-model="showSnapshots" class="shrink-0" label="Show all versions" />
 				</div>
@@ -56,14 +54,13 @@
 			<div v-if="loader_version === 'other' && loader !== 'vanilla'">
 				<div v-if="game_version" class="input-row">
 					<p class="input-label">Select version</p>
-					<multiselect
+					<Combobox
 						v-model="specified_loader_version"
 						class="selector"
-						:options="selectable_versions"
+						:options="selectableVersionOptions"
 						:searchable="true"
 						placeholder="Select loader version"
-						open-direction="top"
-						:show-labels="false"
+						force-direction="up"
 					/>
 				</div>
 				<div v-else class="input-row">
@@ -199,14 +196,14 @@ import {
 	Button,
 	Checkbox,
 	Chips,
+	Combobox,
 	injectNotificationManager,
 	StyledInput,
 } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { open } from '@tauri-apps/plugin-dialog'
 import { computed, onUnmounted, ref, shallowRef } from 'vue'
-import Multiselect from 'vue-multiselect'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
@@ -331,6 +328,13 @@ const game_versions = computed(() => {
 		.map((item) => item.id)
 })
 
+const gameVersionOptions = computed(() =>
+	game_versions.value.map((version) => ({
+		value: version,
+		label: version,
+	})),
+)
+
 const modal = ref(null)
 
 const check_valid = computed(() => {
@@ -409,6 +413,13 @@ const selectable_versions = computed(() => {
 	return []
 })
 
+const selectableVersionOptions = computed(() =>
+	selectable_versions.value.map((version) => ({
+		value: version,
+		label: version,
+	})),
+)
+
 const openFile = async () => {
 	const newProject = await open({ multiple: false })
 	if (!newProject) return

apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue

@@ -17,31 +17,17 @@
 					<tr class="content">
 						<td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
 						<td>
-							<multiselect
+							<Combobox
 								v-if="versions?.length > 1"
-								v-model="selectedVersion"
-								:options="versions"
+								v-model="selectedVersionId"
+								:options="versionOptions"
 								:searchable="true"
 								placeholder="Select version"
-								open-direction="top"
-								:show-labels="false"
-								:custom-label="
-									(version) =>
-										`${version?.name} (${version?.loaders
-											.map((name) => formatLoader(formatMessage, name))
-											.join(', ')} - ${version?.game_versions.join(', ')})`
-								"
+								force-direction="up"
 								:max-height="150"
 							/>
 							<span v-else>
-								<span>
-									{{ selectedVersion?.name }} ({{
-										selectedVersion?.loaders
-											.map((name) => formatLoader(formatMessage, name))
-											.join(', ')
-									}}
-									- {{ selectedVersion?.game_versions.join(', ') }})
-								</span>
+								<span>{{ selectedVersionLabel }}</span>
 							</span>
 						</td>
 					</tr>
@@ -59,9 +45,8 @@
 
 <script setup>
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
-import { ref } from 'vue'
-import Multiselect from 'vue-multiselect'
+import { Button, Combobox, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
@@ -79,11 +64,35 @@ const installing = ref(false)
 
 const onInstall = ref(() => {})
 
+const selectedVersionLabel = computed(() => {
+	if (!selectedVersion.value) return ''
+	return `${selectedVersion.value.name} (${selectedVersion.value.loaders
+		.map((name) => formatLoader(formatMessage, name))
+		.join(', ')} - ${selectedVersion.value.game_versions.join(', ')})`
+})
+
+const versionOptions = computed(() =>
+	(versions.value ?? []).map((version) => ({
+		value: version.id,
+		label: `${version.name} (${version.loaders
+			.map((name) => formatLoader(formatMessage, name))
+			.join(', ')} - ${version.game_versions.join(', ')})`,
+	})),
+)
+
+const selectedVersionId = computed({
+	get: () => selectedVersion.value?.id ?? null,
+	set: (value) => {
+		if (!value) return
+		selectedVersion.value = (versions.value ?? []).find((version) => version.id === value) ?? null
+	},
+})
+
 defineExpose({
 	show: (instanceVal, projectVal, projectVersions, selected, callback) => {
 		instance.value = instanceVal
-		versions.value = projectVersions
-		selectedVersion.value = selected ?? projectVersions[0]
+		versions.value = projectVersions ?? []
+		selectedVersion.value = selected ?? projectVersions?.[0] ?? null
 
 		project.value = projectVal
 
@@ -162,9 +171,5 @@ td:first-child {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-
-	:deep(.animated-dropdown .options) {
-		max-height: 13.375rem;
-	}
 }
 </style>

apps/frontend/package.json

@@ -75,7 +75,6 @@
 		"semver": "^7.5.4",
 		"three": "^0.172.0",
 		"vue-confetti-explosion": "^1.0.2",
-		"vue-multiselect": "3.0.0-alpha.2",
 		"vue-typed-virtual-list": "^1.0.10",
 		"vue3-ace-editor": "^2.2.4",
 		"vue3-apexcharts": "^1.5.2",

apps/frontend/src/layouts/default.vue

@@ -1592,4 +1592,3 @@ const { cycle: changeTheme } = useTheme()
 	}
 }
 </style>
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>

apps/frontend/src/pages/[type]/[id]/settings/members.vue

@@ -285,20 +285,16 @@
 				you can transfer management to one of them.
 			</p>
 			<div v-if="!organization" class="input-group">
-				<Multiselect
+				<Combobox
 					id="organization-picker"
-					v-model="selectedOrganization"
+					v-model="selectedOrganizationId"
 					class="large-multiselect"
-					track-by="id"
-					label="name"
-					open-direction="top"
-					:close-on-select="true"
-					:show-labels="false"
-					:allow-empty="false"
-					:options="organizations || []"
-					:disabled="!currentMember?.is_owner || organizations?.length === 0"
+					:options="organizationOptions"
+					:searchable="true"
+					force-direction="up"
+					:disabled="!currentMember?.is_owner || organizationOptions.length === 0"
 				/>
-				<button class="btn btn-primary" :disabled="!selectedOrganization" @click="onAddToOrg">
+				<button class="btn btn-primary" :disabled="!selectedOrganizationId" @click="onAddToOrg">
 					<CheckIcon />
 					Transfer management
 				</button>
@@ -544,13 +540,13 @@ import {
 	Badge,
 	Card,
 	Checkbox,
+	Combobox,
 	ConfirmModal,
 	injectNotificationManager,
 	injectProjectPageContext,
 	StyledInput,
 	Toggle,
 } from '@modrinth/ui'
-import { Multiselect } from 'vue-multiselect'
 
 import { removeSelfFromTeam } from '~/helpers/teams.js'
 
@@ -600,14 +596,21 @@ initMembers()
 
 const currentUsername = ref('')
 const openTeamMembers = ref([])
-const selectedOrganization = ref(null)
+const selectedOrganizationId = ref('')
 
 const { data: organizations } = useAsyncData('organizations', () => {
 	return useBaseFetch('user/' + auth.value?.user.id + '/organizations', {
 		apiVersion: 3,
 	})
 })
 
+const organizationOptions = computed(() =>
+	(organizations.value ?? []).map((organization) => ({
+		value: organization.id,
+		label: organization.name,
+	})),
+)
+
 const UPLOAD_VERSION = 1 << 0
 const DELETE_VERSION = 1 << 1
 const EDIT_DETAILS = 1 << 2
@@ -620,9 +623,9 @@ const VIEW_ANALYTICS = 1 << 8
 const VIEW_PAYOUTS = 1 << 9
 
 const onAddToOrg = useClientTry(async () => {
-	if (!selectedOrganization.value) return
+	if (!selectedOrganizationId.value) return
 
-	await useBaseFetch(`organization/${selectedOrganization.value.id}/projects`, {
+	await useBaseFetch(`organization/${selectedOrganizationId.value}/projects`, {
 		method: 'POST',
 		body: JSON.stringify({
 			project_id: project.value.id,

apps/frontend/src/pages/[type]/[id]/version/[version].vue

@@ -25,17 +25,14 @@
 						The mod loaders you would like to package your data pack for.
 					</span>
 				</label>
-				<multiselect
+				<MultiSelect
 					id="package-mod-loaders"
 					v-model="packageLoaders"
-					:options="['fabric', 'forge', 'quilt', 'neoforge']"
-					:custom-label="(value: string) => value.charAt(0).toUpperCase() + value.slice(1)"
-					:multiple="true"
+					class="package-loader-select"
+					:options="packageLoaderOptions"
 					:searchable="false"
-					:show-no-results="false"
-					:show-labels="false"
 					placeholder="Choose loaders..."
-					open-direction="top"
+					force-direction="up"
 				/>
 				<div class="button-group">
 					<ButtonStyled>
@@ -436,10 +433,10 @@ import {
 	ENVIRONMENTS_COPY,
 	injectNotificationManager,
 	injectProjectPageContext,
+	MultiSelect,
 	StyledInput,
 } from '@modrinth/ui'
 import { formatBytes, renderHighlightedString } from '@modrinth/utils'
-import { Multiselect } from 'vue-multiselect'
 
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
@@ -498,6 +495,12 @@ const newFiles = ref<File[]>([])
 const deleteFiles = ref<string[]>([])
 const newFileTypes = ref<Array<{ display: string; value: string } | null>>([])
 const packageLoaders = ref(['forge', 'fabric', 'quilt', 'neoforge'])
+const packageLoaderOptions = [
+	{ value: 'fabric', label: 'Fabric' },
+	{ value: 'forge', label: 'Forge' },
+	{ value: 'quilt', label: 'Quilt' },
+	{ value: 'neoforge', label: 'Neoforge' },
+]
 const showKnownErrors = ref(false)
 const shouldPreventActions = ref(false)
 const uploadedImageIds = ref<string[]>([])
@@ -1209,11 +1212,6 @@ async function resetProjectVersions() {
 					margin-bottom: var(--spacing-card-sm);
 				}
 
-				.multiselect {
-					width: 8rem;
-					flex-grow: 1;
-				}
-
 				input {
 					flex-grow: 2;
 				}
@@ -1264,14 +1262,6 @@ async function resetProjectVersions() {
 				font-weight: 300;
 			}
 
-			.raised-multiselect {
-				display: none;
-				margin: 0 0.5rem;
-				height: 40px;
-				max-height: 40px;
-				min-width: 235px;
-			}
-
 			.raised-button {
 				margin-left: auto;
 				background-color: var(--color-raised-bg);
@@ -1280,13 +1270,6 @@ async function resetProjectVersions() {
 			&:not(:nth-child(2)) {
 				margin-top: 0.5rem;
 			}
-
-			// TODO: Make file type editing  work on mobile
-			@media (min-width: 600px) {
-				.raised-multiselect {
-					display: block;
-				}
-			}
 		}
 
 		.additional-files {
@@ -1351,7 +1334,7 @@ async function resetProjectVersions() {
 		margin-bottom: 1rem;
 	}
 
-	.multiselect {
+	.package-loader-select {
 		max-width: 20rem;
 	}
 }