drop/app/components/PlatformSelector.vue

<template>
  <Listbox v-model="model" as="div">
    <ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100"
      ><slot
    /></ListboxLabel>
    <div class="relative">
      <ListboxButton
        class="relative w-full cursor-default rounded-md bg-zinc-950 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6"
      >
        <span v-if="currentEntry" class="flex items-center">
          <IconsPlatform
            :platform="currentEntry.platformIcon.key"
            :fallback="currentEntry.platformIcon.fallback"
            class="h-5 w-5 flex-shrink-0 text-blue-600"
          />
          <span class="ml-3 block truncate">{{ currentEntry.name }}</span>
        </span>
        <span v-else>{{ $t("library.admin.import.selectPlatform") }}</span>
        <span
          class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2"
        >
          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
        </span>
      </ListboxButton>

      <transition
        leave-active-class="transition ease-in duration-100"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
      >
        <ListboxOptions
          class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-zinc-950 ring-opacity-5 focus:outline-none sm:text-sm"
        >
          <ListboxOption
            v-for="entry in values"
            :key="entry.param"
            v-slot="{ active, selected }"
            as="template"
            :value="entry.param"
          >
            <li
              :class="[
                active ? 'bg-blue-600 text-white' : 'text-zinc-100',
                'relative cursor-default select-none py-2 pl-3 pr-9',
              ]"
            >
              <div class="flex items-center">
                <IconsPlatform
                  v-if="entry.platformIcon"
                  :platform="entry.platformIcon.key"
                  :fallback="entry.platformIcon.fallback"
                  class="size-5 text-blue-500"
                />
                <span class="ml-3 block truncate">{{ entry.name }}</span>
              </div>

              <span
                v-if="selected"
                :class="[
                  active ? 'text-white' : 'text-blue-600',
                  'absolute inset-y-0 right-0 flex items-center pr-4',
                ]"
              >
                <CheckIcon class="h-5 w-5" aria-hidden="true" />
              </span>
            </li>
          </ListboxOption>
        </ListboxOptions>
      </transition>
    </div>
  </Listbox>
</template>

<script setup lang="ts">
import {
  Listbox,
  ListboxButton,
  ListboxLabel,
  ListboxOption,
  ListboxOptions,
} from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";

const model = defineModel<string | undefined>();

const props = defineProps<{ platforms: PlatformRenderable[] }>();
const currentEntry = computed(() =>
  model.value
    ? props.platforms.find((v) => v.param === model.value)
    : undefined,
);

const values = props.platforms;
</script>