TreeItem.vue 2.8 KB
Newer Older
1 2
<template>
  <li>
3 4
    <div :class="{bold: isFolder}"  @dblclick="makeFolder">
      <div v-if="isFolder" @click="toggle">
5 6
        <div v-if="!rootElement">
          <span>{{ item.name }}</span>
7
          <span class="main-button btn pull-right" style="width:5%"><strong>{{ isOpen ? '-' : '+' }}</strong></span>
8
        </div>
9
      </div>
10
      <span v-else v-html="transform(item.name)" class="text-muted"></span>
11
    </div>
12 13
    <hr v-show="!rootElement">
    <ul v-show="isOpen || rootElement" v-if="isFolder">
14
      <TreeItem
15 16 17 18
        class="item"
        v-for="(child, index) in item.children"
        :key="index"
        :item="child"
19 20
        :rootElement="false"
        :rulePath="rulePath"
21 22
        @make-folder="$emit('make-folder', $event)"
        @add-item="$emit('add-item', $event)"
23
      ></TreeItem>
24
      <!-- li class="add" @click="$emit('add-item', item)">+</li -->
25 26 27 28 29
    </ul>
  </li>
</template>

<script>
30 31 32 33 34 35
  export default {
    name: 'TreeItem',
    props: ['item','rootElement', 'rulePath'],
    data: function() {
      return {
        isOpen: false
36 37
      }
    },
38 39 40 41
    computed: {
      isFolder: function() {
        return this.item.children &&
          this.item.children.length
42
      }
43
    },
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
    methods: {
      toggle: function () {
        if (this.isFolder) {
          this.isOpen = !this.isOpen
        }
      },
      makeFolder: function () {
        if (!this.isFolder) {
          this.$emit('make-folder', this.item)
          this.isOpen = true
        }
      },
      transform: function(data) {
        return data
          .replace(/Si /g, '<span class="bold text-dark">Si </span>')
          .replace(/Soit /g, '<span class="bold text-dark">Soit </span>')
          .replace(/Quand /g, '<span class="bold text-dark">Quand </span>')
          .replace(/Scénario: /g, '<span class="bold text-dark">Scénario: </span>')
          .replace(/Ou /g, '<span class="bold text-dark">Ou </span>')
          .replace(/, ou /g, '<span class="bold text-dark">, ou </span>')
          .replace(/Et /g, '<span class="bold text-dark">Et </span>')
          .replace(/, et /g, '<span class="bold text-dark">, et </span>')
          .replace(/Alors /g, '<span class="bold text-dark">Alors </span>')
          .replace(/(#.+)/g, "<em class=\"comment\">$1</em>")
          .replace(/appliquer les règles «([^»]+?)(.rules)?»/g, 'appliquer les règles « <a href="'+this.rulePath+'#$1.rules" class="btn main-button" title="Ouvrir les règles" style="display:inline-block">$1</a> »')
          .replace(/(«.+»)/g, "<span class=\"string\">$1</span>")
          .replace(/,([^ ])/g, ", $1");
      },
72
    },
73
  }
74 75 76 77 78 79 80
</script>

<style>
  .item {
    cursor: pointer;
  }
  .bold {
David Foucher's avatar
David Foucher committed
81
    font-weight: bold;
82 83
  }
  ul {
David Foucher's avatar
David Foucher committed
84 85 86
    padding-left: 1em;
    line-height: 1.5em;
    list-style-type: dot;
87
  }
88 89 90
  .rule-separator {
    width: 100vh;
  }
91
</style>