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

<template>
  <component
    :is="tag"
    class="node-view-title"
    :class="{ block }"
  >
    <component
      :is="link ? 'a' : 'div'"
      @click="onTitleClick"
      class="node-view-title-container"
    >
      <slot name="default" />
      <span>
        <strong>{{ toCommaList(node.authors) }}</strong>,
        <button-url v-if="url && node.piece && node.piece.url" :link="node.piece" />
        <button-url v-if="url && node.link && node.link.url" :link="node.link" />
      </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 },
    url: { type: Boolean, default: false }
  },

  data () {
    return {
    }
  },

  methods: {
    trim,
    toCommaList,

    onTitleClick (e) {
      if (this.link) {
        e.stopPropagation()
        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>