jtw-chevrons

jtw-chevrons.js

// Modifying the tree-view-item component
// ...
  data: function(){
    return {
      open: true
    }
  },
  methods: {
    isOpen: function(){
      return this.isRootObject(this.data) || this.open;
    },
    toggleOpen:function(){
      this.open = !this.open;
    },    

    // ...
 
    isRootObject: function(value){
      return value.isRoot;
    }
  },

  template:`
    <div class="tree-view-item">
      <div v-if="isObject(data)">
        <div class="tree-view-item-grouping" @click.stop="toggleOpen()">         	
          <span :class="{opened: isOpen()}" v-if="!isRootObject(data)" class="tree-view-item-key tree-view-item-key-with-chevron">{{getKey(data)}}</span>
          <span class="tree-view-item-hint" v-show="!isOpen() && data.children.length === 1">{{data.children.length}} property</span>
          <span class="tree-view-item-hint" v-show="!isOpen() && data.children.length !== 1">{{data.children.length}} properties</span>
        </div>
        <tree-view-item v-show="isOpen()" v-for="child in data.children" :data="child"></tree-view-item>
      </div>
      <div v-if="isArray(data)">
        <div class="tree-view-item-grouping" @click.stop="toggleOpen()">
          <span :class="{opened: isOpen()}" v-if="!isRootObject(data)" class="tree-view-item-key tree-view-item-key-with-chevron">{{getKey(data)}}</span>
          <span class="tree-view-item-hint" v-show="!isOpen() && data.children.length === 1">{{data.children.length}} item</span>
          <span class="tree-view-item-hint" v-show="!isOpen() && data.children.length !== 1">{{data.children.length}} items</span>
        </div>
        <tree-view-item v-show="isOpen()" v-for="child in data.children" :data="child"></tree-view-item>
      </div>
      <div v-if="isValue(data)">
        <span class="tree-view-item-key">{{getKey(data)}}</span>       
        <span class="tree-view-item-value">{{getValue(data)}}          
      </div>
    </div>
  `

jwt-chevrons.css

.tree-view-item {
  font-family: monospace;
  font-size: 14px;
  margin-left: 18px;
}

.tree-view-item-grouping {
  cursor: pointer;
  position: relative;
}

.tree-view-item-key {
  font-weight: bold;
}

.tree-view-item-key-with-chevron {
  padding-left: 14px;
}

.tree-view-item-key-with-chevron.opened::before {
    top:4px;
    transform: rotate(90deg);  
    -webkit-transform: rotate(90deg);
}

.tree-view-item-key-with-chevron::before {
    color: #444;
    content: '\25b6';
    font-size: 10px;
    left: 1px;
    position: absolute;
    top: 3px;
    transition: -webkit-transform .1s ease;
    transition: transform .1s ease;
    transition: transform .1s ease, -webkit-transform .1s ease;
    -webkit-transition: -webkit-transform .1s ease;
}

.tree-view-item-hint {
  color: #ccc
}