aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/Service.vue
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-10-23 18:29:14 -0700
committerGitHub <noreply@github.com>2020-10-23 18:29:14 -0700
commit13071ae3d1457bd677665769e83535a3d1f94b14 (patch)
treed4137914a4bf76bd60ff4af940dc0fd33fee04f1 /src/components/Service.vue
parent37dfd2a132d883482b330b22a7c19d86948a391c (diff)
parent5b727eee020b9d734f60fd37f840ea47f83fb23e (diff)
downloadhomer-13071ae3d1457bd677665769e83535a3d1f94b14.tar.gz
homer-13071ae3d1457bd677665769e83535a3d1f94b14.tar.zst
homer-13071ae3d1457bd677665769e83535a3d1f94b14.zip
Merge pull request #140 from Genymobile/dynamic-services
Custom service components
Diffstat (limited to 'src/components/Service.vue')
-rw-r--r--src/components/Service.vue48
1 files changed, 15 insertions, 33 deletions
diff --git a/src/components/Service.vue b/src/components/Service.vue
index 4d3702b..8686759 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -1,44 +1,26 @@
1<template> 1<template>
2 <div> 2 <component v-bind:is="component" :item="item"></component>
3 <div class="card" :class="item.class">
4 <a :href="item.url" :target="item.target" rel="noreferrer">
5 <div class="card-content">
6 <div class="media">
7 <div v-if="item.logo" class="media-left">
8 <figure class="image is-48x48">
9 <img :src="item.logo" :alt="`${item.name} logo`" />
10 </figure>
11 </div>
12 <div v-if="item.icon" class="media-left">
13 <figure class="image is-48x48">
14 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
15 </figure>
16 </div>
17 <div class="media-content">
18 <p class="title is-4">{{ item.name }}</p>
19 <p class="subtitle is-6">{{ item.subtitle }}</p>
20 </div>
21 </div>
22 <div class="tag" :class="item.tagstyle" v-if="item.tag">
23 <strong class="tag-text">#{{ item.tag }}</strong>
24 </div>
25 </div>
26 </a>
27 </div>
28 </div>
29</template> 3</template>
30 4
31<script> 5<script>
6import Generic from "./services/Generic.vue";
7
32export default { 8export default {
33 name: "Service", 9 name: "Service",
10 components: {
11 Generic,
12 },
34 props: { 13 props: {
35 item: Object, 14 item: Object,
36 }, 15 },
16 computed: {
17 component() {
18 const type = this.item.type || "Generic";
19 if (type == "Generic") {
20 return Generic;
21 }
22 return () => import(`./services/${type}.vue`);
23 },
24 },
37}; 25};
38</script> 26</script>
39
40<style scoped lang="scss">
41.media-left img {
42 max-height: 100%;
43}
44</style>