jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Follow upstream recommendation to have html templates below script in .vue files

Browse Source
This commit is contained in:
Johannes Zellner
2025-01-19 12:00:22 +01:00
parent 0280059c13
commit dfb3285e18
21 changed files with 1008 additions and 1021 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/AppstoreView.vue
+52 -52
View File
@@ -1,55 +1,3 @@
<template>
<div>
<AppInstallDialog ref="appInstallDialog" @close="onAppInstallDialogClose"/>
<ApplinkDialog ref="applinkDialog" @success="onApplinkDialogSuccess()"/>
<div class="filter-bar">
<div></div>
<TextInput ref="searchInput" @keydown.esc="search = ''" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="max-width: 100%; width: 500px;"/>
<ButtonGroup>
<Button outline icon="fas fa-exchange-alt" @click="onInstall(proxyApp)">{{ $t('apps.addAppproxyAction') }}</Button>
<Button outline icon="fas fa-link" @click="onApplinkDialogOpen()">{{ $t('apps.addApplinkAction') }}</Button>
</ButtonGroup>
</div>
<div v-if="!search">
<h4 v-show="filteredPopularApps.length">{{ $t('appstore.category.popular') }}</h4>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
<div class="item" v-for="app in filteredPopularApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
<img class="icon" :src="app.iconUrl" />
<div class="description">
<div class="title">{{ app.manifest.title }}</div>
<div class="tagline">{{ app.manifest.tagline }}</div>
</div>
</div>
</TransitionGroup>
<h4 v-show="filteredAllApps.length">{{ $t('appstore.category.all') }}</h4>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
<div class="item" v-for="app in filteredAllApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
<img class="icon" :src="app.iconUrl" />
<div class="description">
<div class="title">{{ app.manifest.title }}</div>
<div class="tagline">{{ app.manifest.tagline }}</div>
</div>
</div>
</TransitionGroup>
</div>
<div v-else>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
<div class="item" v-for="app in filteredApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
<img class="icon" :src="app.iconUrl" />
<div class="description">
<div class="title">{{ app.manifest.title }}</div>
<div class="tagline">{{ app.manifest.tagline }}</div>
</div>
</div>
</TransitionGroup>
</div>
</div>
</template>
<script setup>
import { ref, computed, useTemplateRef, onMounted } from 'vue';
@@ -130,6 +78,58 @@ onMounted(async () => {
</script>
<template>
<div>
<AppInstallDialog ref="appInstallDialog" @close="onAppInstallDialogClose"/>
<ApplinkDialog ref="applinkDialog" @success="onApplinkDialogSuccess()"/>
<div class="filter-bar">
<div></div>
<TextInput ref="searchInput" @keydown.esc="search = ''" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="max-width: 100%; width: 500px;"/>
<ButtonGroup>
<Button outline icon="fas fa-exchange-alt" @click="onInstall(proxyApp)">{{ $t('apps.addAppproxyAction') }}</Button>
<Button outline icon="fas fa-link" @click="onApplinkDialogOpen()">{{ $t('apps.addApplinkAction') }}</Button>
</ButtonGroup>
</div>
<div v-if="!search">
<h4 v-show="filteredPopularApps.length">{{ $t('appstore.category.popular') }}</h4>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
<div class="item" v-for="app in filteredPopularApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
<img class="icon" :src="app.iconUrl" />
<div class="description">
<div class="title">{{ app.manifest.title }}</div>
<div class="tagline">{{ app.manifest.tagline }}</div>
</div>
</div>
</TransitionGroup>
<h4 v-show="filteredAllApps.length">{{ $t('appstore.category.all') }}</h4>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
<div class="item" v-for="app in filteredAllApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
<img class="icon" :src="app.iconUrl" />
<div class="description">
<div class="title">{{ app.manifest.title }}</div>
<div class="tagline">{{ app.manifest.tagline }}</div>
</div>
</div>
</TransitionGroup>
</div>
<div v-else>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
<div class="item" v-for="app in filteredApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
<img class="icon" :src="app.iconUrl" />
<div class="description">
<div class="title">{{ app.manifest.title }}</div>
<div class="tagline">{{ app.manifest.tagline }}</div>
</div>
</div>
</TransitionGroup>
</div>
</div>
</template>
<style scoped>
.grid-animation-move,