Liquor Tree - devdocs.io example

by Mohammad Ghanbari

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Liquor Tree: Custom theme</title>
    <!-- first import Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/liquor-tree.umd.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="navigation">
        <div class="navigation-filter">
          <input type="text" v-model="treeFilter" placeholder="Type to filter...">
        </div>
        <div class="navigation-tree">
          <tree :data="treeData" :options="treeOptions" :filter="treeFilter" v-model="selectedNode">
            <div class="tree-scope" slot-scope="{ node }">
              <template v-if="node.data.isRoot">
                <!-- you can add an icon here, but it is too long for the demo... sorry  -->

                <span class="text">
                  {{ node.text }}
                </span>

                <span class="release" v-if="!node.hasChildren()">
                  {{ node.data.release }}
                </span>
              </template>
              <template v-else>

                <!-- here we can leave a vue-router for example... -->

                <span class="text">
                    {{ node.text }}
                  </span>

                  <span class="release">
                    {{ node.data.release }}
                  </span>
              </template>
            </div>
          </tree>
        </div>
      </div>
      <div class="content">
        <div v-if="!selectedNode || selectedNode.hasChildren()">Welcome!</div>
        <ul v-else>
          <li>Name: <b>{{ selectedNode.data.name }}</b></li>
          <li>Type: <b>{{ selectedNode.data.type }}</b></li>
          <li>Slug: <b>{{ selectedNode.data.slug }}</b></li>
          <li>Release: <b>{{ selectedNode.data.release }}</b></li>
        </ul>
      </div>
   ...

JavaScript

var treeData = [{
  "name": "Angular",
  "slug": "angular",
  "type": "angular",
  "links": {
      "home": "https://angular.io/",
      "code": "https://github.com/angular/angular"
  },
  "version": "",
  "release": "5.2.9",
  "mtime": 1521396825,
  "db_size": 9378792
}, {
  "name": "Angular",
  "slug": "angular~4",
  "type": "angular",
  "links": {
      "home": "https://angular.io/",
      "code": "https://github.com/angular/angular"
  },
  "version": "4",
  "release": "4.4.6",
  "mtime": 1510333140,
  "db_size": 8247972
}, {
  "name": "Angular",
  "slug": "angular~2",
  "type": "angular",
  "links": {
      "home": "https://angular.io/",
      "code": "https://github.com/angular/angular"
  },
  "version": "2",
  "release": "2.4.10",
  "mtime": 1501435056,
  "db_size": 7928892
}, {
  "name": "Angular.js",
  "slug": "angularjs~1.6",
  "type": "angularjs",
  "version": "1.6",
  "release": "1.6.6",
  "mtime": 1509291873,
  "db_size": 2078695
}, {
  "name": "Angular.js",
  "slug": "angularjs~1.5",
  "type": "angularjs",
  "version": "1.5",
  "release": "1.5.11",
  "mtime": 1501418597,
  "db_size": 2034320
}, {
  "name": "Angular.js",
  "slug": "angularjs~1.4",
  "type": "angularjs",
  "version": "1.4",
  "release": "1.4.14",
  "mtime": 1501418614,
  "db_size": 1801860
}, {
  "name": "Angular.js",
  "slug": "angularjs~1.3",
  "type": "angularjs",
  "version": "1.3",
  "release": "1.3.20",
  "mtime": 1501418630,
  "db_size": 1669877
}, {
  "name": "Angular.js",
  "slug": "angularjs~1.2",
  "type": "angularjs",
  "version": "1.2",
  "release": "1.2.32",
  "mtime": 1501418645,
  "db_size": 1362341
}, {
  "name": "Ansible",
  "slug": "ansible~2.4",
  "type": "sphinx",
  "links": {
      "home": "https://www.ansible.com/",
      "code": "https://github.com/ansible/ansible"
  },
  "version": "2.4",
  "release": "2.4.3",
  "mtime": 1521914994,
  "db_size": 12975660
}, {
  "name": "Apache HTTP Server",
  "slug": "apache_http_server",
  "type": "apache",
  "links": {
     ...