71 lines
2.0 KiB
Vue
71 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import Button from 'primevue/button';
|
|
import ToggleSwitch from 'primevue/toggleswitch';
|
|
import InstallButton from './InstallButton.vue';
|
|
import LinkButton from './LinkButton.vue';
|
|
import ModTitlecard from './ModTitlecard.vue';
|
|
import UpdateButton from './UpdateButton.vue';
|
|
import { invoke } from '../invoke';
|
|
import { usePkgStore, usePrfStore } from '../stores';
|
|
import { Feature, Package } from '../types';
|
|
import { hasFeature } from '../util';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const prf = usePrfStore();
|
|
const pkgs = usePkgStore();
|
|
|
|
const props = defineProps({
|
|
pkg: Object as () => Package,
|
|
});
|
|
|
|
const model = computed({
|
|
get() {
|
|
return prf.isPkgEnabled(props.pkg).value;
|
|
},
|
|
async set(value: boolean) {
|
|
await prf.togglePkg(props.pkg, value);
|
|
},
|
|
});
|
|
|
|
const unsupported = computed(() => props.pkg!.loc!.status === 'Unsupported');
|
|
|
|
if (unsupported.value === true && model.value === true) {
|
|
prf.togglePkg(props.pkg, false);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center">
|
|
<ModTitlecard show-version show-icon show-description :pkg="pkg" />
|
|
<UpdateButton :pkg="pkg" />
|
|
<span v-tooltip="unsupported && t('store.incompatible')">
|
|
<ToggleSwitch
|
|
v-if="hasFeature(pkg, Feature.Mod) || unsupported === true"
|
|
class="scale-[1.33] shrink-0"
|
|
inputId="switch"
|
|
:disabled="unsupported === true"
|
|
v-model="model"
|
|
/>
|
|
</span>
|
|
<InstallButton :pkg="pkg" />
|
|
<Button
|
|
rounded
|
|
icon="pi pi-folder"
|
|
severity="help"
|
|
aria-label="delete"
|
|
size="small"
|
|
class="ml-2 shrink-0"
|
|
style="width: 2rem; height: 2rem"
|
|
v-on:click="
|
|
pkg?.loc?.path && invoke('open_file', { path: pkg.loc.path })
|
|
"
|
|
/>
|
|
<LinkButton v-if="pkgs.networkStatus === 'online'" :pkg="pkg" />
|
|
</div>
|
|
</template>
|
|
|
|
<style></style>
|