Extendable base service for easier development.

This commit is contained in:
Bastien Wirtz
2021-10-06 22:55:09 +02:00
parent c7dc6bfd0d
commit 2ca4faad9c
6 changed files with 104 additions and 99 deletions

View File

@@ -1,49 +1,35 @@
<template>
<div>
<div class="card" :class="item.class">
<a :href="item.url" :target="item.target" rel="noreferrer">
<div class="card-content">
<div class="media">
<div v-if="item.logo" class="media-left">
<figure class="image is-48x48">
<img :src="item.logo" :alt="`${item.name} logo`" />
</figure>
</div>
<div v-if="item.icon" class="media-left">
<figure class="image is-48x48">
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
</figure>
</div>
<div class="media-content">
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-if="item.subtitle">
{{ item.subtitle }}
</template>
<template v-else-if="stats">
{{ percentage }}&percnt; blocked
</template>
</p>
</div>
<div class="status" :class="protection">
{{ protection }}
</div>
</div>
<div class="tag" :class="item.tagstyle" v-if="item.tag">
<strong class="tag-text">#{{ item.tag }}</strong>
</div>
</div>
</a>
</div>
</div>
<Generic :item="item">
<template #content>
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-if="item.subtitle">
{{ item.subtitle }}
</template>
<template v-else-if="stats">
{{ percentage }}&percnt; blocked
</template>
</p>
</template>
<template #indicator>
<div class="status" :class="protection">
{{ protection }}
</div>
</template>
</Generic>
</template>
<script>
import Generic from "./Generic.vue";
export default {
name: "AdGuardHome",
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
status: null,