Sha256: fa4c215b97d548a2ead6e90ea90a0a3bcf4496574b7b038689142ea54c7f26a1
Contents?: true
Size: 1.66 KB
Versions: 17
Compression:
Stored size: 1.66 KB
Contents
<template>
<div
class="bg-gray-100 rounded-md px-4 py-3 flex items-center justify-between text-gray-800"
:class="{ 'cursor-move': isList }"
>
<router-link
:to="{
name: 'editSectionBlock',
params: { sectionBlockId: sectionBlock.id },
}"
class="flex items-center"
>
<div class="h-8 w-8 bg-gray-400 mr-3" v-if="image">
<img
:src="image"
class="object-cover w-full h-full"
:class="{ hidden: !imageLoaded }"
@load="() => (imageLoaded = true)"
/>
</div>
<span>{{ label | truncate(40) }}</span>
</router-link>
<div class="flex items-center">
<slot name="actions"></slot>
<confirmation-button
@confirm="removeSectionBlock(sectionBlock.id)"
v-on="$listeners"
>
<list-item-button iconName="ri-close-line" />
</confirmation-button>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'SectionBlockListItem',
props: {
sectionBlock: { type: Object, required: true },
index: { type: Number, required: true },
},
data() {
return {
imageLoaded: false,
}
},
computed: {
isList() {
return this.currentSectionDefinition.blocksPresentation !== 'tree'
},
presentation() {
const label = this.$store.getters.sectionBlockLabel(
this.sectionBlock,
this.index + 1,
)
return { label: label[0], image: label[1] }
},
label() {
return this.presentation.label
},
image() {
return this.presentation.image
},
},
methods: {
...mapActions(['removeSectionBlock']),
},
}
</script>
Version data entries
17 entries across 17 versions & 1 rubygems