forked from akanyan/STARTLINER
114 lines
3.3 KiB
Vue
114 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import Chip from 'primevue/chip';
|
|
import { convertFileSrc } from '@tauri-apps/api/core';
|
|
import { Feature, Package } from '../types';
|
|
import { hasFeature, needsUpdate } from '../util';
|
|
|
|
const props = defineProps({
|
|
pkg: Object as () => Package,
|
|
showNamespace: Boolean,
|
|
showVersion: Boolean,
|
|
showCategories: Boolean,
|
|
showDescription: Boolean,
|
|
showIcon: Boolean,
|
|
});
|
|
|
|
const iconSrc = computed(() => {
|
|
const icon = props.pkg?.loc?.icon ?? props.pkg?.rmt?.icon;
|
|
|
|
if (icon === undefined) {
|
|
return '';
|
|
} else if (icon.startsWith('https://')) {
|
|
return icon;
|
|
} else {
|
|
return convertFileSrc(icon);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<img
|
|
v-if="showIcon"
|
|
:src="iconSrc"
|
|
class="self-center rounded-sm"
|
|
width="32px"
|
|
height="32px"
|
|
/>
|
|
<label class="m-3 align-middle text grow z-5 h-50px">
|
|
<div>
|
|
<span class="text-lg">
|
|
{{ pkg?.name ?? 'Untitled' }}
|
|
</span>
|
|
<span
|
|
v-if="pkg?.rmt?.deprecated"
|
|
v-tooltip="'deprecated'"
|
|
class="pi pi-exclamation-circle ml-1 text-amber-400"
|
|
>
|
|
</span>
|
|
<span
|
|
v-if="pkg?.rmt?.nsfw"
|
|
v-tooltip="'NSFW'"
|
|
class="pi pi-exclamation-triangle ml-1 text-red-400"
|
|
>
|
|
</span>
|
|
<span
|
|
v-if="
|
|
hasFeature(pkg, Feature.ChusanHook) ||
|
|
hasFeature(pkg, Feature.Mu3Hook)
|
|
"
|
|
v-tooltip="'Hook'"
|
|
class="pi pi-wrench ml-1 text-blue-400"
|
|
>
|
|
</span>
|
|
<span
|
|
v-if="hasFeature(pkg, Feature.Mu3IO)"
|
|
v-tooltip="'IO'"
|
|
class="pi pi-wrench ml-1 text-green-400"
|
|
>
|
|
</span>
|
|
<span
|
|
v-if="hasFeature(pkg, Feature.Aime)"
|
|
v-tooltip="'Aime'"
|
|
class="pi pi-credit-card ml-1 text-purple-400"
|
|
>
|
|
</span>
|
|
<span
|
|
v-if="showNamespace && pkg?.namespace"
|
|
class="text-sm opacity-75"
|
|
>
|
|
by {{ pkg.namespace }}
|
|
</span>
|
|
<span class="m-2">
|
|
<span
|
|
v-if="showVersion && pkg?.loc?.version"
|
|
class="text-sm opacity-75"
|
|
>
|
|
{{ pkg?.loc?.version ?? '?.?.?' }}
|
|
</span>
|
|
<span
|
|
v-if="showVersion && needsUpdate(pkg)"
|
|
class="text-sm opacity-75"
|
|
>
|
|
-> {{ pkg?.rmt?.version ?? '?.?.?' }}</span
|
|
>
|
|
</span>
|
|
</div>
|
|
<div v-if="showDescription" class="text-sm opacity-75">
|
|
{{ pkg?.description || 'No description' }}
|
|
</div>
|
|
<div v-if="showCategories" class="mt-1 flex gap-1">
|
|
<span class="text-xs" v-for="c in pkg?.rmt?.categories"
|
|
><Chip :label="c"
|
|
/></span>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.p-chip {
|
|
padding: 0.4rem !important;
|
|
font-size: 0.66rem !important;
|
|
}
|
|
</style>
|