72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
<template lang='pug'>
|
|
div#list
|
|
v-list(dense)
|
|
v-list-item
|
|
h3(v-if='title') {{title}}
|
|
v-list-item(
|
|
target='_blank'
|
|
:to='`/event/${event.slug || event.id}`'
|
|
v-for='event in computedEvents'
|
|
:key='`${event.id}_${event.start_datetime}`' small)
|
|
v-list-item-content
|
|
v-list-item-subtitle <v-icon small color='success' v-if='event.parentId' v-text='mdiRepeat'></v-icon> {{event|when}}
|
|
span.primary--text.ml-1 @{{event.place.name}}
|
|
v-list-item-title(v-text='event.title')
|
|
</template>
|
|
<script>
|
|
import { mdiRepeat } from '@mdi/js'
|
|
|
|
export default {
|
|
name: 'List',
|
|
data () {
|
|
return { mdiRepeat }
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
events: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
maxEvents: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
minimal: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showTags: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showImage: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showDescription: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
computed: {
|
|
computedEvents () {
|
|
if (!this.maxEvents) { return this.events }
|
|
return this.events.slice(0, this.maxEvents)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='less'>
|
|
#list {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
.v-list-item__title {
|
|
white-space: normal !important;
|
|
}
|
|
}
|
|
</style>
|