mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-20 11:41:14 +10:00
251ddb8ff8
* feat: database redist support * feat: rearchitecture of database schemas, migration reset, and #180 * feat: import redists * fix: giantbomb logging bug * feat: partial user platform support + statusMessage -> message * feat: add user platform filters to store view * fix: sanitize svg uploads ... copilot suggested this I feel dirty. * feat: beginnings of platform & redist management * feat: add server side redist patching * fix: update drop-base commit * feat: import of custom platforms & file extensions * fix: redelete platform * fix: remove platform * feat: uninstall commands, new R UI * checkpoint: before migrating to nuxt v4 * update to nuxt 4 * fix: fixes for Nuxt v4 update * fix: remaining type issues * feat: initial feedback to import other kinds of versions * working commit * fix: lint * feat: redist import
95 lines
3.2 KiB
Vue
95 lines
3.2 KiB
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>
|