Rule.vue 2.13 KB
Newer Older
1
<template>
David Foucher's avatar
David Foucher committed
2
  <div id="Rule">
3 4 5 6
    <h2> {{ this.name.toUpperCase() }}</h2>
    <br>
    <pre v-html="transform(this.data)"/>
  </div>
7 8
</template>
<script>
David Foucher's avatar
David Foucher committed
9
  export default {
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
    name: 'Rule',
    props: ['name', 'data'],
    methods: {
      transform: function(data) {
        return data.replace(/Si /g, '<strong>Si </strong>')
          .replace(/Soit /g, '<strong>Soit </strong>')
          .replace(/Quand /g, '<strong>Quand </strong>')
          .replace(/Scénario: /g, '<strong>Scénario: </strong>')
          .replace(/Ou /g, '<strong>Ou </strong>')
          .replace(/, ou /g, '<strong>, ou </strong>')
          .replace(/Et /g, '<strong>Et </strong>')
          .replace(/, et /g, '<strong>, et </strong>')
          .replace(/Alors /g, '<strong>Alors </strong>')
          .replace(/(#.+)/g, "<em class=\"comment\">$1</em>")
          .replace(/appliquer les règles «([^»]+?)(.rules)?»/g, 'appliquer les règles «<a href="#$1.rules" title="Ouvrir les règles"><i class="icon">arrow_forward</i> $1</a>»')
          .replace(/(«.+»)/g, "<span class=\"string\">$1</span>")
          .replace(/,([^ ])/g, ", $1");
      }
    }
David Foucher's avatar
David Foucher committed
29 30
  }
</script>
31 32 33 34 35 36 37 38 39 40 41 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85
<style scoped>

  pre strong {
    font-family: 'mono';
    font-weight: bold;
  }
  pre .comment {
    font-family: 'mono';
    font-style: italic;
    color: #666;
  }
  pre .keyword {
    font-family: 'mono';
    font-weight: 600;
  }
  pre .constant {
    font-family: 'mono';
    font-weight: 600;
    text-decoration: underline dotted;
    cursor: help;
  }
  pre a,
  pre .string,
  pre .number {
    font-family: 'mono';
    font-weight: 600;
  }
  pre code {
    display: block;
    padding-left: 1em;
    font-family: mono;
  }
  a.line {
    display: none;
  }
  :scope.with-lines a.line {
    display: inline-block;
    background-color: #ddd;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
  }
  :scope.with-lines a:target, :scope.with-lines a:target + code {
    font-weight: bold;
    background-color: #ccc;
  }
  :scope.with-lines pre {
    display: grid;
    grid-template-columns: 2em auto;
  }
  .tooltip .tooltip-content:after {
    /* Why? */
    bottom: -27px;
  }
</style>