94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import SelectButton from 'primevue/selectbutton';
|
|
import ToggleSwitch from 'primevue/toggleswitch';
|
|
import OptionCategory from '../OptionCategory.vue';
|
|
import OptionRow from '../OptionRow.vue';
|
|
import { useClientStore } from '../../stores';
|
|
|
|
const client = useClientStore();
|
|
|
|
const offlineModel = computed({
|
|
get() {
|
|
return client.offlineMode;
|
|
},
|
|
async set(value: boolean) {
|
|
await client.setOfflineMode(value);
|
|
},
|
|
});
|
|
|
|
const updatesModel = computed({
|
|
get() {
|
|
return client.enableAutoupdates;
|
|
},
|
|
async set(value: boolean) {
|
|
await client.setAutoupdates(value);
|
|
},
|
|
});
|
|
|
|
const verboseModel = computed({
|
|
get() {
|
|
return client.verbose;
|
|
},
|
|
async set(value: boolean) {
|
|
await client.setVerbose(value);
|
|
},
|
|
});
|
|
|
|
const themeModel = computed({
|
|
get() {
|
|
return client.theme;
|
|
},
|
|
async set(value: 'light' | 'dark' | 'system') {
|
|
await client.setTheme(value);
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<OptionCategory title="STARTLINER">
|
|
<OptionRow title="UI scaling">
|
|
<SelectButton
|
|
v-model="client.scaleModel"
|
|
:options="[
|
|
{ title: 'S', value: 's' },
|
|
{ title: 'M', value: 'm' },
|
|
{ title: 'L', value: 'l' },
|
|
{ title: 'XL', value: 'xl' },
|
|
]"
|
|
:allow-empty="false"
|
|
option-label="title"
|
|
option-value="value"
|
|
/>
|
|
</OptionRow>
|
|
<OptionRow
|
|
title="Offline mode"
|
|
tooltip="Disables the package store. Applies after a restart."
|
|
>
|
|
<ToggleSwitch v-model="offlineModel" />
|
|
</OptionRow>
|
|
<OptionRow title="Enable automatic updates">
|
|
<ToggleSwitch v-model="updatesModel" />
|
|
</OptionRow>
|
|
<OptionRow
|
|
title="Enable detailed logs"
|
|
tooltip="Applies after a restart."
|
|
>
|
|
<ToggleSwitch v-model="verboseModel" />
|
|
</OptionRow>
|
|
<OptionRow title="Theme">
|
|
<SelectButton
|
|
v-model="themeModel"
|
|
:options="[
|
|
{ title: 'System', value: 'system' },
|
|
{ title: 'Light', value: 'light' },
|
|
{ title: 'Dark', value: 'dark' },
|
|
]"
|
|
:allow-empty="false"
|
|
option-label="title"
|
|
option-value="value"
|
|
/>
|
|
</OptionRow>
|
|
</OptionCategory>
|
|
</template>
|