forked from akanyan/STARTLINER
74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import Divider from 'primevue/divider';
|
|
import MultiSelect from 'primevue/multiselect';
|
|
import ToggleSwitch from 'primevue/toggleswitch';
|
|
import ModStoreEntry from './ModStoreEntry.vue';
|
|
import { usePkgStore } from '../stores';
|
|
|
|
const pkgs = usePkgStore();
|
|
const empty = ref(true);
|
|
|
|
const props = defineProps({
|
|
search: String,
|
|
});
|
|
|
|
const list = () => {
|
|
const res = pkgs.allRemote
|
|
.filter(
|
|
(p) =>
|
|
props.search === undefined ||
|
|
p.name.toLowerCase().includes(props.search.toLowerCase()) ||
|
|
p.namespace
|
|
.toLowerCase()
|
|
.includes(props.search.toLowerCase()) ||
|
|
p.description.toLowerCase().includes(props.search.toLowerCase())
|
|
)
|
|
.sort((p1, p2) => p1.name.localeCompare(p2.name));
|
|
empty.value = res.length === 0;
|
|
return res;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex gap-4 items-center">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex gap-2">
|
|
<div class="text-amber-400 grow">Show deprecated</div>
|
|
<ToggleSwitch v-model="pkgs.showDeprecated" />
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<div class="text-red-400 grow">Show NSFW</div>
|
|
<ToggleSwitch v-model="pkgs.showNSFW" />
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2 grow">
|
|
<MultiSelect
|
|
size="small"
|
|
:showToggleAll="false"
|
|
placeholder="Include categories"
|
|
v-model="pkgs.includeCategories"
|
|
:options="[...pkgs.availableCategories]"
|
|
class="w-full"
|
|
/>
|
|
<MultiSelect
|
|
size="small"
|
|
:showToggleAll="false"
|
|
placeholder="Exclude categories"
|
|
v-model="pkgs.excludeCategories"
|
|
:options="[...pkgs.availableCategories]"
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Divider />
|
|
<div v-for="p in list()" class="flex flex-row">
|
|
<ModStoreEntry :pkg="p" />
|
|
</div>
|
|
<div v-if="empty" class="text-3xl">∅</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import 'primeicons/primeicons.css';
|
|
</style>
|