enfrancais-app/src/components/nodes/NodeViewTitle.vue

<template>
  <component
    :is="tag"
    class="node-view-title"
    :class="{ block }"
  >
    <component
      :is="link ? 'a' : 'div'"
      @click="onTitleClick(node)"
      class="node-view-title-container"
    >
      <slot name="default" />
      <span><strong>{{ toCommaList(node.authors) }}</strong>,</span>
      <span>
        <span v-if="node.preTitle" v-html="' ' + trim(node.preTitle) + ','" />
        <em v-html="' ' + trim(node.italTitle || node.title) || 'pas de titre ital'" />
        <span v-if="(edition && node.edition) || (!noDate && node.date)">, </span>
      </span>
      <span v-if="!noDate && node.date" class="edition">
        {{ node.date.start }}
      </span>
      <div v-if="edition && node.edition" class="edition">
        {{ node.edition.map(ed => ed.name).join(' ') }}
      </div>
    </component>
  </component>
</template>

<script>
import { trim, toCommaList } from '@/helpers/common'


export default {
  name: 'NodeViewTitle',

  props: {
    node: { type: Object, required: true },
    tag: { type: String, default: 'h6' },
    link: { type: Boolean, default: false },
    block: { type: Boolean, default: false },
    edition: { type: Boolean, default: false },
    noDate: { type: Boolean, default: false }
  },

  data () {
    return {
    }
  },

  methods: {
    trim,
    toCommaList,

    onTitleClick (node) {
      if (this.link) {
        this.$emit('open-node')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.node-view-title {
  font-weight: $font-weight-normal;

  a {
    text-decoration: none;
    cursor: pointer;
  }

  &.block &-container {
    > * {
      display: block;
    }
  }
}
</style>