RulesMenu.vue 1.28 KB
Newer Older
1
<template>
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
  <div id="RulesMenu">
    <span v-if="this.toggled" @click="toggled = !toggled" style="cursor:pointer" class="rules-menu-title">
      <h5>
        {{ this.title }}
        <i class="fas fa-chevron-up rules-menu-chevron fa-sm"></i>
      </h5>
    </span>
    <span v-if="!this.toggled" @click="toggled = !toggled" style="cursor:pointer" class="rules-menu-title">
      <h5>
        {{ this.title }}
        &nbsp;
        <i class="fas fa-chevron-down rules-menu-chevron fa-sm"></i>
      </h5>
    </span>
      <br>
    <ul v-show="this.toggled">
      <li v-for="(rule, id) in rules" :key="rule.id">
        <a :href="'#'+decodeURI(id)" :title="rule.id" @click="$parent.forceRerender()">{{ rule.name }}</a>
      </li>
    </ul>
David Foucher's avatar
David Foucher committed
22
  </div>
23 24
</template>
<script>
David Foucher's avatar
David Foucher committed
25 26
  export default {
    name: 'RulesMenu',
27 28 29 30 31 32 33 34 35 36 37
    props: ['title', 'namespace'],
    data: function() {
      return {
        toggled: false
      }
    },
    computed: {
      rules: function () {
        var rules = {};
        for (var rule in this.$parent.rules) {
          if(this.$parent.rules[rule].path.startsWith(this.namespace)) rules[rule]= this.$parent.rules[rule];
38
        }
39 40 41
        return rules;
      },
    }
David Foucher's avatar
David Foucher committed
42 43
  }
</script>
44 45 46 47 48 49
<style scoped>
  .rules-menu-chevron {
    vertical-align: -5%;
    margin-left: 10px;
  }
</style>