158 lines
3.7 KiB
Vue
158 lines
3.7 KiB
Vue
<template>
|
|
<Dialog ref="dialogHandle" :show-x="true" @close="step = 0">
|
|
<div class="content">
|
|
<div class="header">
|
|
<div class="summary">
|
|
<div class="title">{{ manifest.title }}</div>
|
|
<div class="lastUpdated">{{ $t('appstore.installDialog.lastUpdated', { date: prettyDate(app.creationDate) }) }}</div>
|
|
<div class="memoryRequirement">{{ $t('appstore.installDialog.memoryRequirement', { size: prettyFileSize(manifest.memoryLimit) }) }}</div>
|
|
<div class="author"><a :href="manifest.website" target="_blank">Website</a></div>
|
|
</div>
|
|
<img class="icon" :src="app.iconUrl" />
|
|
</div>
|
|
<Transition name="slide-left" mode="out-in">
|
|
<div v-if="step === STEP.DETAILS">
|
|
<Button @click="step = STEP.INSTALL" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
|
|
<div class="screenshots">
|
|
<img class="screenshot" v-for="image in manifest.mediaLinks" :key="image" :src="image"/>
|
|
</div>
|
|
<div class="description" v-html="description"></div>
|
|
</div>
|
|
<div v-else-if="step === STEP.INSTALL">
|
|
<form @submit="submit()" autocomplete="off">
|
|
<fieldset :disabled="busy">
|
|
<input style="display: none;" type="submit" :disabled="!formValid" />
|
|
|
|
<FormGroup>
|
|
<label for="location">{{ $t('appstore.installDialog.location') }}</label>
|
|
<TextInput id="location" v-model="location" />
|
|
</FormGroup>
|
|
|
|
<AccessControl v-model="accessRestriction"/>
|
|
</fieldset>
|
|
</form>
|
|
<Button @click="submit" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import { ref, computed, useTemplateRef } from 'vue';
|
|
import { marked } from 'marked';
|
|
import { Button, Dialog, FormGroup, TextInput } from 'pankow';
|
|
import { prettyDate, prettyFileSize } from 'pankow/utils';
|
|
import AccessControl from './AccessControl.vue';
|
|
|
|
const STEP = Object.freeze({
|
|
DETAILS: Symbol('details'),
|
|
INSTALL: Symbol('install'),
|
|
});
|
|
|
|
// reactive
|
|
const app = ref({});
|
|
const manifest = ref({});
|
|
const step = ref(STEP.DETAILS);
|
|
const dialog = useTemplateRef('dialogHandle');
|
|
const description = computed(() => marked.parse(manifest.value.description || ''));
|
|
const formValid = computed(() => {
|
|
return true;
|
|
});
|
|
|
|
// form data
|
|
const location = ref('');
|
|
const accessRestriction = ref(null);
|
|
|
|
function submit() {
|
|
|
|
}
|
|
|
|
defineExpose({
|
|
open(a) {
|
|
step.value = STEP.INSTALL;
|
|
app.value = a;
|
|
manifest.value = a.manifest;
|
|
|
|
dialog.value.open();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.slide-left-enter-active,
|
|
.slide-left-leave-active {
|
|
transition: all 0.25s ease-out;
|
|
}
|
|
|
|
.slide-left-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
.slide-left-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
.content {
|
|
width: 1024px;
|
|
max-width: 100%;
|
|
height: 1024px;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 4px;
|
|
}
|
|
|
|
.summary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 32px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.icon {
|
|
width: 128px;
|
|
height: 128px;
|
|
object-fit: contain;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.description {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.screenshots {
|
|
margin: 10px 4px;
|
|
display: flex;
|
|
gap: 20px;
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
|
|
scroll-snap-type: x mandatory;
|
|
overflow: auto;
|
|
}
|
|
|
|
.screenshot {
|
|
display: inline-block;
|
|
border-radius: var(--pankow-border-radius);
|
|
height: 300px;
|
|
object-size: contain;
|
|
scroll-snap-align: center;
|
|
scroll-snap-stop: always;
|
|
}
|
|
|
|
</style>
|