Checkboxes - Liquor Tree

by amsik

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Checkboxes</title>
  <meta charset="UTF-8">
  
  <!-- first import Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/liquor-tree/dist/liquor-tree.umd.js"></script>
</head>
<body>
  <div id="app">
    <tree
      :data="treeData"
      :options="treeOptions"
    />
  </div>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          treeData: getTreeData(),
          treeOptions: {
          	checkbox: true,
            deletion(node) {
            	return node.checked()
            }
          }
        }
      }
    })
    
    
    function getTreeData() {
    	return [
          {
            text: 'JS: The Right Way',

            // it makes node expanded
            state: { expanded: true },
            children: [
              { text: 'Getting Started', state: { checked: true } },
              { text: 'JavaScript Code Style', state: { selected: true } },
              { text: 'The Good Parts', children: [
                { text: 'OBJECT ORIENTED', state: { checked: true }  },
                { text: 'ANONYMOUS FUNCTIONS', state: { checked: true }  },
                { text: 'FUNCTIONS AS FIRST-CLASS OBJECTS', state: { checked: true }  },
                { text: 'LOOSE TYPING', state: { checked: true }  }
              ]},
              { text: 'Patterns', children: [
                { text: 'DESIGN PATTERNS', state: { expanded: true }, children: [
                  { text: 'Creational Design Patterns', children: [
                    { text: 'Factory' },
                    { text: 'Prototype' },
                    { text: 'Mixin' },
                    { text: 'Singleton' }
                  ]},
                  { text: 'Structural Design Patterns'}
                ]},
                { text: 'MV* PATTERNS', cildren: [
                  { text: 'MVC Pattern' },
                  { text:...