Vue - vue-tree-list

not got the paths to libraries correct

by Ben Clayton

HTML

<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bulma/0.4.2/css/bulma.min.css" rel="stylesheet">

<div id="app" :style="padding-top:3rem;" class="wrapper is-fullwidth">
    <a href="https://github.com/ParadeTo/vue-tree">
        <h1 class="has-text-centered title is-1" style="margin-bottom: 0.5rem;">
            vue-tree
        </h1>
    </a>
    <div class="container">
        <button class="button is-primary is-small" @click="addNode">
            <span class="icon is-small" style="margin-right: 2px;">
                <i class="fa fa-plus-circle"></i>
            </span>
            New Treenode
        </button>
        <vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
    </div>

    <div class="container">
      <div class="has-text-centered" style="margin-bottom: 1rem">
        <button class="button is-primary" type="button" name="button" @click="getNewTree">Get New Tree</button>
      </div>
      <pre>
        {{newTree}}
      </pre>
    </div>
</div>

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/vue/dist/vue-tree-list.min.js"></script>

CSS

html {
          min-height: 100%;
          background: linear-gradient(to bottom right, #00ebcb, #dafffa)
        }
        .container {
          background-color: #fff;
          border-radius: 5px;
          box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
          padding: 1.25rem;
          max-width: 1024px !important;
          background-color: #fff;
          margin: 1rem auto 0 auto;
        }
        .wrapper {
            min-height: 100vh;
            padding: 0 0.5rem;
        }
        @media screen and (min-width: 768px) {
            .control:not(:last-child) {
                margin-bottom: 0.2rem;
            }
            .is-full {
                flex: 1;
            }
            .is-horizontal {
                display: flex;
                align-items: center;
            }
            .label {
                margin-right: 1rem;
            }
        }
        @media all and (max-width: 375px) {
            .calendar-wrapper {
                width: 120%;
                max-width: 120%;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        .vtl .vtl-drag-disabled, .vtl .vtl-drag-disabled:hover {
          background-color: #dbd7d7;
          position: relative;
        }
        .vtl .vtl-drag-disabled::after, .vtl .vtl-disabled::after {
          content: 'drag disabled';
          position: absolute;
          right: 10px;
          font-size: 12px;
          font-style: italic;
        }
        .vtl .vtl-disabled, .vtl .vtl-disabled:hover {
          background-color: red;
          position: relative;
        }
        .vtl .vtl-disabled::after {
          content: 'disabled';
        }

JavaScript

new Vue({
    el: '#app',
    components: {
      'VueTreeList': VueTreeList.VueTreeList
    },
    data () {
      return {
        isMobile: isMobile(),
        record: null,
        newTree: {},
        data: new VueTreeList.Tree([
          {
            name: 'Node 1',
            id: 1,
            pid: 0,
            dragDisabled: true,
            children: [
              {
                name: 'Node 1-2',
                id: 2,
                isLeaf: true,
                pid: 1
              }
            ]
          },
          {
            name: 'Node 2',
            id: 3,
            pid: 0,
            disabled: true
          },
          {
            name: 'Node 3',
            id: 4,
            pid: 0
          }
        ])
      }
    },
    methods: {
      getTreeChange: function () {
        this.record = Object.assign({}, VueTreeList.Record)
      },
      addNode: function () {
        var node = new VueTreeList.TreeNode({ name: 'new node', isLeaf: false })
        if (!this.data.children) this.data.children = []
        this.data.addChildren(node)
      },
      getNewTree: function () {
        var vm = this
        function _dfs (oldNode) {
          var newNode = {}
          for (var k in oldNode) {
            if (k !== 'children' && k !== 'parent') {
              newNode[k] = oldNode[k]
            }
          }
          if (oldNode.children && oldNode.children.length > 0) {
            newNode.children = []
            for (var i = 0, len = oldNode.children.length; i < len; i++) {
              newNode.children.push(_dfs(oldNode.children[i]))
            }
          }
          return newNode
        }
        vm.newTree = _dfs(vm.data)
      },
      onClick(model) {
        console.log(model)
      }
    }
  })