Merge pull request #66 from grapoza/add-nodes

 Adds creation of child nodes

Author: grapoza

.gitignore

@@ -20,3 +20,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+scratchpad.md

docs/demo/addRemove.js

@@ -0,0 +1,6 @@
+export default [
+  {
+    id: 'rootNode',
+    label: 'Root Node'
+  }
+];

docs/demo/addRemove.md

@@ -0,0 +1,38 @@
+---
+layout: demo
+---
+
+## Basic Treeview Checkbox Demo
+
+This page demonstrates adding and removing nodes. [See the data used](./addRemove.js). The callback for adding nodes is set in `modelDefaults` so any newly created node will use the same creation method automatically.
+
+{% raw  %}
+<div id="app">
+    <tree id="customtree" :model="model" :model-defaults="modelDefaults" ref="tree"></tree>
+</div>
+{% endraw  %}
+
+<script type='module'>
+    import arModel from './addRemove.js';
+
+    new Vue({
+      components: {
+        tree: window['vue-tree']
+      },
+      data() {
+        return {
+            childCounter = 0;
+            model: arModel,
+            modelDefaults: {
+                addChildCallback: this.addChildCallback
+            }
+        };
+      },
+      methods: {
+        addChildCallback (parentModel) {
+          this.childCounter++;
+          return Promise.resolve({ id: `child-node${this.childCounter}`, label: `Added Child ${this.childCounter}`, deletable: true });
+        }
+      }
+    }).$mount('#app');
+</script>

docs/demo/demos.md

@@ -5,4 +5,5 @@ Two basic demos are currently available. These will be expanded as time allows,
 Note that demos probably (definitely) won't work in IE due to the way the component is loaded.
 
 - [Basic Checkbox Usage](basic.html)
-- [Basic Radio Button Usage](radioBasic.html)
+- [Basic Radio Button Usage](radioBasic.html)
+- [Adding and Removing Nodes](addRemove.html)

docs/index.md

@@ -13,12 +13,12 @@ Features include:
 - Expandable nodes
 - Checkboxes
 - Radio buttons
+- Addition and removal of nodes
 
 Planned:
 
 - Node selection ([#5](https://github.com/grapoza/vue-tree/issues/5))
 - Async loading ([#13](https://github.com/grapoza/vue-tree/issues/13))
-- Adding nodes ([#24](https://github.com/grapoza/vue-tree/issues/24))
 - Icons ([#22](https://github.com/grapoza/vue-tree/issues/22))
 - Searching ([#4](https://github.com/grapoza/vue-tree/issues/4))
 - Drag n' Drop ([#6](https://github.com/grapoza/vue-tree/issues/6))
@@ -104,7 +104,7 @@ To see it in action, try out the [demos](demo/demos.html).
 
 ## Model Data
 
-The data passed to the treeview's `model` prop should be an array of nodes, where each node has the following structure. The data model passed to the treeview may be updated to include missing properties.
+The data passed to the treeview's `model` prop should be an array of nodes, where each node has the following structure. The data model passed to the treeview may be updated by the treeview nodes themselves on creation to include missing properties.
 
 ```javascript
 {
@@ -139,10 +139,11 @@ The data passed to the treeview's `model` prop should be an array of nodes, wher
   state: {
     expanded: true,
     selected: false
-    // No input state here; to let complex radio button groupings work, state value is
-    // bound to a tree-level property. disabled, however, is valid here for radio buttons.
+    // No input.value here; to let complex radio button groupings work, state value is
+    // bound to a tree-level property. input.disabled, however, is valid here for radio buttons.
   },
-  children: []
+  children: [],
+  addChildCallback: () => Promise.resolve({ id: '1', label: 'label' })
 }
 ```
 
@@ -168,6 +169,7 @@ The properties below can be specified for each node.
 | state.input.disabled | Boolean         | True if the node's input field is disabled                  | `false`                           |          |
 | children             | Array\<Object\> | The child nodes of this node                                | `[]`                              |          |
 | customizations       | Object          | A [customizations](#customizing-treeviewnode-markup) object | `{}`                              |          |
+| addChildCallback     | Function        | An async function that resolves to a new node model         | `null`                            |          |
 
 \* Selection props are unused; see [#5](https://github.com/grapoza/vue-tree/issues/5).
 
@@ -208,6 +210,7 @@ If specified, the `modelDefaults` property of the treeview will be merged with n
 
 | Event                       | Description                                             | Handler Parameters                                                     |
 |:----------------------------|:--------------------------------------------------------|:-----------------------------------------------------------------------|
+| treeViewNodeAdd             | Emitted when a node is added                            | `target` The model of the target (child) node <br/> `parent` The model of the parent node <br/> `event` The original event |
 | treeViewNodeClick           | Emitted when a node is clicked                          | `target` The model of the target node <br/> `event` The original event |
 | treeViewNodeDblclick        | Emitted when a node is double clicked                   | `target` The model of the target node <br/> `event` The original event |
 | treeViewNodeDelete          | Emitted when a node is deleted                          | `target` The model of the target node <br/> `event` The original event |
@@ -233,7 +236,8 @@ The display of the treeview can be customized via CSS using the following classe
 | `tree-view-node-self-checkbox`           | The checkbox                                                                     |
 | `tree-view-node-self-radio`              | The radio button                                                                 |
 | `tree-view-node-self-text`               | The text for a non-input node                                                    |
-| `tree-view-node-self-delete`             | The delete button                                                                |
+| `tree-view-node-self-action`             | The action buttons (e.g., add child or delete)                                   |
+| `tree-view-node-self-add-child-icon`     | The `<i>` element containing the add child icon                                  |
 | `tree-view-node-self-delete-icon`        | The `<i>` element containing the delete icon                                     |
 | `tree-view-node-children`                | The list of child nodes                                                          |
 
@@ -257,6 +261,9 @@ A customizations object may have the following properties:
 | classes.treeViewNodeSelfCheckbox          | String | Classes to add to the checkbox                                         | Add               |
 | classes.treeViewNodeSelfRadio             | String | Classes to add to the radio button                                     | Add               |
 | classes.treeViewNodeSelfText              | String | Classes to add to the text for a non-input node                        | Add               |
+| classes.treeViewNodeSelfAction            | String | Classes to add to the action buttons                                   | Add               |
+| classes.treeViewNodeSelfAddChild          | String | Classes to add to the add child buttons                                | Add               |
+| classes.treeViewNodeSelfAddChildIcon      | String | Classes to add to the `<i>` element containing the add child icon      | Add               |
 | classes.treeViewNodeSelfDelete            | String | Classes to add to the delete button                                    | Add               |
 | classes.treeViewNodeSelfDeleteIcon        | String | Classes to add to the `<i>` element containing the delete icon         | Add               |
 | classes.treeViewNodeChildren              | String | Classes to add to the list of child nodes                              | Add               |

package.json

@@ -3,7 +3,7 @@
   "description": "Yet another Vue treeview component.",
   "author": "Gregg Rapoza <[email protected]>",
   "license": "MIT",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "browser": "index.js",
   "repository": {
     "url": "https://github.com/grapoza/vue-tree",

src/components/TreeView.vue

@@ -13,6 +13,7 @@
                     @treeViewNodeCheckboxChange="(t, e)=>$emit('treeViewNodeCheckboxChange', t, e)"
                     @treeViewNodeRadioChange="(t, e)=>$emit('treeViewNodeRadioChange', t, e)"
                     @treeViewNodeExpandedChange="(t, e)=>$emit('treeViewNodeExpandedChange', t, e)"
+                    @treeViewNodeAdd="(t, p, e)=>$emit('treeViewNodeAdd', t, p, e)"
                     @treeViewNodeDelete="(t, e)=>$_treeViewNode_handleChildDeletion(t, e)">
     </tree-view-node>
   </ul>

src/components/TreeViewNode.vue

@@ -64,12 +64,23 @@
         {{ model.label }}
       </span>
 
+      <!-- Add Child button -->
+      <button :id="addChildId"
+              type="button"
+              v-if="model.addChildCallback"
+              class="tree-view-node-self-action"
+              :class="[customClasses.treeViewNodeSelfAction, customClasses.treeViewNodeSelfAddChild]"
+              @click="$_treeViewNode_onAddChild">
+        <i class="tree-view-node-self-add-child-icon"
+            :class="customClasses.treeViewNodeSelfAddChildIcon"></i>
+      </button>
+
       <!-- Delete button -->
-      <button :id="nodeId + '-delete'"
+      <button :id="deleteId"
               type="button"
               v-if="model.deletable"
-              class="tree-view-node-self-delete"
-              :class="customClasses.treeViewNodeSelfDelete"
+              class="tree-view-node-self-action"
+              :class="[customClasses.treeViewNodeSelfAction, customClasses.treeViewNodeSelfDelete]"
               @click="$_treeViewNode_onDelete">
         <i class="tree-view-node-self-delete-icon"
             :class="customClasses.treeViewNodeSelfDeleteIcon"></i>
@@ -95,6 +106,7 @@
                       @treeViewNodeCheckboxChange="(t, e)=>$emit('treeViewNodeCheckboxChange', t, e)"
                       @treeViewNodeRadioChange="(t, e)=>$emit('treeViewNodeRadioChange', t, e)"
                       @treeViewNodeExpandedChange="(t, e)=>$emit('treeViewNodeExpandedChange', t, e)"
+                      @treeViewNodeAdd="(t, p, e)=>$emit('treeViewNodeAdd', t, p, e)"
                       @treeViewNodeDelete="(t, e)=>$_treeViewNode_handleChildDeletion(t, e)">
       </TreeViewNode>
     </ul>
@@ -154,9 +166,15 @@
       this.$_treeViewNode_normalizeNodeData();
     },
     computed: {
+      addChildId() {
+        return this.nodeId ? `${this.nodeId}-add-child` : null;
+      },
       customClasses() {
         return Object.assign({}, this.customizations.classes, (this.model.customizations || {}).classes);
       },
+      deleteId() {
+        return this.nodeId ? `${this.nodeId}-delete` : null;
+      },
       expanderId() {
         return this.nodeId ? `${this.nodeId}-exp` : null;
       },
@@ -194,6 +212,9 @@
         if (typeof this.model.deletable !== 'boolean') {
           this.$set(this.model, 'deletable', false);
         }
+        if (typeof this.model.addChildCallback !== 'function') {
+          this.$set(this.model, 'addChildCallback', null);
+        }
 
         if (typeof this.model.title !== 'string' || this.model.title.trim().length === 0) {
           this.$set(this.model, 'title', null);
@@ -288,6 +309,20 @@
           this.$emit('treeViewNodeDblclick', this.model, event);
         }
       },
+      /*
+       * Add a child node to the end of the child nodes list. The child node data is
+       * supplied by an async callback which is the addChildCallback parameter of this node's model.
+       */
+      async $_treeViewNode_onAddChild(event) {
+        if (this.model.addChildCallback) {
+          var childModel = await this.model.addChildCallback(this.model);
+
+          if (childModel) {
+            this.model.children.push(childModel);
+            this.$emit('treeViewNodeAdd', this.childModel, this.model, event);
+          }
+        }
+      },
       $_treeViewNode_onDelete(event) {
         this.$emit('treeViewNodeDelete', this.model, event);
       },
@@ -370,12 +405,20 @@
           margin-left: $itemSpacing;
         }
 
-        .tree-view-node-self-delete {
+        .tree-view-node-self-action {
           padding: 0;
           background: none;
           border: none;
           height: $baseHeight;
 
+          i.tree-view-node-self-add-child-icon {
+            font-style: normal;
+
+            &::before {
+              content: '+';
+            }
+          }
+
           i.tree-view-node-self-delete-icon {
             font-style: normal;
 

tests/data/node-generator.js

@@ -1,20 +1,23 @@
 /**
- * Generates nodes, one per array element that is not an array.
+ * Generates nodes, one per array element that is not itself an array.
  * Array elements that are arrays recursively generate child nodes
  * of the last created node. Additionally, the initial state for radio
  * buttons will be added to the radioState parameter.
  *
- * The node spec's node string should be in the format:
- *  `[eE]?[sS]?[d]?[[cCrR]!?]?`
- * The presence of e, s, d, or c|r indicate the node is expandable, selectable, deletable and a checkbox or radio buttton
- * respectively. If it is capitalized, then the related state should be True. In the case of inputs,
+ * The node spec's node string should be matched by the regex:
+ *  `[eE]?[sS]?[d]?[a]?[[cCrR]!?]?`
+ * The presence of e, s, d, a, or c|r indicate the node is expandable, selectable, deletable,
+ * addable (subnodes can be added), and a checkbox or radio buttton respectively.
+ * If it is capitalized, then the related state should be True. In the case of inputs,
  * the capitalization means the input will be selected. The `!` indicates the input will be disabled.
+ * A node that allows adds will use the callback function passed to generateNodes.
  *
  * @param {Array<String, Array>} nodeSpec The node specification array.
  * @param {Object} radioState An object in which the state of radio button groups is generated. Essentially an "out".
  * @param {String} baseId The base string used in the node IDs.
+ * @param {Function} addChildCallback A method that returns a Promise that resolves to the node data to add as a subnode.
  */
-export function generateNodes(nodeSpec, radioState, baseId = "") {
+export function generateNodes(nodeSpec, radioState, baseId = "", addChildCallback = null) {
     let nodes = [];
     let prevNode = null;
 
@@ -24,7 +27,7 @@ export function generateNodes(nodeSpec, radioState, baseId = "") {
             if (prevNode === null) {
                 return;
             }
-            prevNode.children = generateNodes(item, radioState, prevNode.id);
+            prevNode.children = generateNodes(item, radioState, prevNode.id, addChildCallback);
         }
         else {
             let lowerItem = item.toLowerCase();
@@ -45,6 +48,7 @@ export function generateNodes(nodeSpec, radioState, baseId = "") {
                     expanded: item.includes('E'),
                     selected: item.includes('S')
                 },
+                addChildCallback: item.includes('a') ? addChildCallback : null,
                 children: []
             };
 

tests/local/basic.js

@@ -78,6 +78,16 @@ export default [
             state: {
               expanded: false,
               selected: false
+            },
+            addChildCallback: function () {
+              var entry = prompt("Give it a string.", "");
+
+              if (entry) {
+                return Promise.resolve({ id: entry, label: entry, deletable: true });
+              }
+              else {
+                return Promise.resolve(null);
+              }
             }
           }
         ]