v-treeview

    0.2.1 • Public • Published

    v-treeview

    A treeview component for Vue.js2

    Support customizable context menu and tree types, configurable font awesom icon, depth control

    npm npm GitHub stars GitHub forks Build Status license

    How to use

    Step1: install v-treeview

    npm install v-treeview --save
    

    Step2: In your vue component script import v-treeview

    import VTreeview from "v-treeview"
    

    Step3: In your export script

    export default {
      data() { ...     
      },
      computed: { ...
      },
      methods: { ...
      },  
      components: {
        VTreeview
      }
    };
    

    Step4: In your index.html, add fontawesome CDN

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    

    Demo

    https://hyounoo.github.io/v-treeview/

    Html

      <v-treeview v-model="treeData" :treeTypes="treeTypes" @selected="selected" :openAll="openAll" :contextItems="contextItems" @contextSelected="contextSelected"></v-treeview>
    

    JS

    import VTreeview from "../src/index.js";
    
    export default {
      data() {
        return {
          openAll: true,
          treeTypes: [
            {
              type: "#",
              max_children: 6,
              max_depth: 4,
              valid_children: [
                "FMM_EMPLOYEE",
                "FMM_SPOUSE",
                "FMM_CHILD",
                "FMM_SIBLING",
                "FMM_PARENT",
                "FMM_PARENT_IN_LAW"
              ]
            },
            {
              type: "FMM_EMPLOYEE",
              icon: "far fa-user",
              valid_children: ["Basic", "Top-up"]
            },
            {
              type: "FMM_SPOUSE",
              icon: "far fa-user",
              valid_children: ["Basic", "Top-up"]
            },
            {
              type: "FMM_CHILD",
              icon: "far fa-user",
              valid_children: ["Basic", "Top-up"]
            },
            {
              type: "FMM_SIBLING",
              icon: "far fa-user",
              valid_children: ["Basic", "Top-up"]
            },
            {
              type: "FMM_PARENT",
              icon: "far fa-user",
              valid_children: ["Basic", "Top-up"]
            },
            {
              type: "FMM_PARENT_IN_LAW",
              icon: "far fa-user",
              valid_children: ["Basic", "Top-up"]
            },
            {
              type: "Basic",
              icon: "far fa-hospital",
              valid_children: ["Top-up"]
            },
            {
              type: "Top-up",
              icon: "far fa-plus-square",
              valid_children: []
            }
          ],
          treeData: [
            {
              id: 100767.0, text: "Employee", type: "FMM_EMPLOYEE", count: 0,
              children: [
                {
                  id: 100811.0, text: "Basic plan", type: "Basic", count: 0,
                  children: [
                    {
                      id: 101161.0, text: "Top-up", type: "Top-up", count: 152, children: []
                    }
                  ]
                },
                {
                  id: 100812.0, text: "Basic plan", type: "Basic", count: 0, children: []
                },
                {
                  id: 101162.0, text: "This Top-up can be at level 2", type: "Top-up", count: 152, children: []
                }
              ]
            },
            {
              id: 100768.0, text: "Spouse", type: "FMM_SPOUSE", count: 0,
              children: [
                {
                  id: 100813.0, text: "Basic plan", type: "Basic", count: 0, children: [
                    {
                      id: 101163.0, text: "Top-up", type: "Top-up", count: 152, children: []
                    }
                  ]
                },
                {
                  id: 100814.0, text: "Basic plan", type: "Basic", count: 0, children: [
                    {
                      id: 101164.0, text: "Top-up", type: "Top-up", count: 152, children: []
                    }
                  ]
                }
              ]
            },
            {
              id: 100769.0, text: "Child", type: "FMM_CHILD", count: 0, children: [
                {
                  id: 100815.0, text: "Basic plan", type: "Basic", count: 0, children: [
                    {
                      id: 101165.0, text: "Top-up", type: "Top-up", count: 152, children: []
                    }
                  ]
                },
                {
                  id: 100816.0, text: "Basic plan", type: "Basic", count: 0, children: [
                    {
                      id: 101166.0, text: "Top-up", type: "Top-up", count: 0, children: []
                    }
                  ]
                }
              ]
            },
            {
              id: 100770.0, text: "Parents", type: "FMM_PARENT", count: 0, children: [
                {
                  id: 100817.0, text: "Basic plan", type: "Basic", count: 0, children: [
                    {
                      id: 101167.0, text: "Top-up", type: "Top-up", count: 124, children: []
                    }
                  ]
                }
              ]
            }
          ],
          contextItems: [],
          selectedNode: null
        };
      },
      methods: {
        getTypeRule(type) {
          var typeRule = this.treeTypes.filter(t => t.type == type)[0];
          return typeRule;
        },
        contextSelected(command) {
          switch (command) {
            case "Create Basic":
              var node = {
                text: "New Basic Plan",
                type: "Basic",
                children: []
              };
              this.selectedNode.addNode(node);
              break;
            case "Create Top-up":
              var node = {
                text: "New Top-up",
                type: "Top-up",
                children: []
              };
              this.selectedNode.addNode(node);          
              break;
            case "Rename":
              this.selectedNode.editName();
              break;
            case "Remove":
              break;
          }
        },
        selected(node) {
          this.selectedNode = node;
          this.contextItems = [];
          var typeRule = this.getTypeRule(this.selectedNode.model.type);
          typeRule.valid_children.map(function(type, key) {
            var childType = this.getTypeRule(type);
            var item = {
              title: "Create " + type,
              icon: childType.icon,
              type: childType
            };
            this.contextItems.push(item);
          }, this);
    
          this.contextItems.push({ title: "Rename", icon: "far fa-edit" });
          this.contextItems.push({ title: "Remove", icon: "far fa-trash-alt" });
        }
      },
      components: {
        VTreeview
      }
    };
    

    Install

    npm i v-treeview

    DownloadsWeekly Downloads

    156

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    127 kB

    Total Files

    9

    Last publish

    Collaborators

    • drakefang