Adds node deletion

docs/index.md

@@ -18,7 +18,7 @@ Planned:
 
 - Node selection ([#5](https://github.com/grapoza/vue-tree/issues/5))
 - Async loading ([#13](https://github.com/grapoza/vue-tree/issues/13))
-- Adding/deleting nodes ([#24](https://github.com/grapoza/vue-tree/issues/24), [#16](https://github.com/grapoza/vue-tree/issues/16))
+- 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))
@@ -153,6 +153,7 @@ The properties below can be specified for each node.
 | label                | String          | The text to show in the treeview                            | -                                 | Yes      |
 | expandable           | Boolean         | True to show a toggle for expanding nodes' subnode lists    | `true`                            |          |
 | selectable           | Boolean         | True to allow the node to be selected*                      | `false`                           |          |
+| deletable            | Boolean         | True to allow the node to be deleted                        | `false`                           |          |
 | input                | Object          | Contains data specific to the node's `input` element        | `null`                            |          |
 | input.type           | String          | The type of input; valid values are `checkbox` or `radio`   | -                                 | Yes**    |
 | input.name           | String          | The name attribute of the input; used with `radio` type     | `'unspecifiedRadioName'`          |          |
@@ -207,6 +208,7 @@ If specified, the `modelDefaults` property of the treeview will be merged with n
 |:----------------------------|:--------------------------------------------------------|:-----------------------------------------------------------------------|
 | 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 |
 | treeViewNodeCheckboxChange  | Emitted when a node's checkbox emits a change event     | `target` The model of the target node <br/> `event` The original event |
 | treeViewNodeRadioChange     | Emitted when a node's radio button emits a change event | `target` The model of the target node <br/> `event` The original event |
 | treeViewNodeExpandedChange  | Emitted when a node is expanded or collapsed            | `target` The model of the target node <br/> `event` The original event |
@@ -229,6 +231,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-delete-icon`        | The `<i>` element containing the delete icon                                     |
 | `tree-view-node-children`                | The list of child nodes                                                          |
 
 ## Customizing TreeViewNode Markup
@@ -251,4 +255,6 @@ 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.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.5.0",
+  "version": "0.6.0",
   "browser": "index.js",
   "repository": {
     "url": "https://github.com/grapoza/vue-tree",

src/components/TreeView.vue

@@ -12,7 +12,8 @@
                     @treeViewNodeDblclick="(t, e)=>$emit('treeViewNodeDblclick', t, e)"
                     @treeViewNodeCheckboxChange="(t, e)=>$emit('treeViewNodeCheckboxChange', t, e)"
                     @treeViewNodeRadioChange="(t, e)=>$emit('treeViewNodeRadioChange', t, e)"
-                    @treeViewNodeExpandedChange="(t, e)=>$emit('treeViewNodeExpandedChange', t, e)">
+                    @treeViewNodeExpandedChange="(t, e)=>$emit('treeViewNodeExpandedChange', t, e)"
+                    @treeViewNodeDelete="(t, e)=>$_treeViewNode_handleChildDeletion(t, e)">
     </tree-view-node>
   </ul>
 </template>
@@ -84,6 +85,16 @@
         }
 
         return checked;
+      },
+      $_treeViewNode_handleChildDeletion(node, event) {
+        // Remove the node from the array of children if this is an immediate child.
+        // Note that only the node that was deleted fires these, not any subnode.
+        let targetIndex = this.model.indexOf(node);
+        if (targetIndex > -1) {
+          this.model.splice(targetIndex, 1);
+        }
+
+        this.$emit('treeViewNodeDelete', node, event);
       }
     }
   };

src/components/TreeViewNode.vue

@@ -61,6 +61,17 @@
             :class="customClasses.treeViewNodeSelfText">
         {{ model.label }}
       </span>
+
+      <!-- Delete button -->
+      <button :id="nodeId + '-delete'"
+              type="button"
+              v-if="model.deletable"
+              class="tree-view-node-self-delete"
+              :class="customClasses.treeViewNodeSelfDelete"
+              @click="$_treeViewNode_onDelete">
+        <i class="tree-view-node-self-delete-icon"
+            :class="customClasses.treeViewNodeSelfDeleteIcon"></i>
+      </button>
     </div>
 
     <!-- Children -->
@@ -81,7 +92,8 @@
                       @treeViewNodeDblclick="(t, e)=>$emit('treeViewNodeDblclick', t, e)"
                       @treeViewNodeCheckboxChange="(t, e)=>$emit('treeViewNodeCheckboxChange', t, e)"
                       @treeViewNodeRadioChange="(t, e)=>$emit('treeViewNodeRadioChange', t, e)"
-                      @treeViewNodeExpandedChange="(t, e)=>$emit('treeViewNodeExpandedChange', t, e)">
+                      @treeViewNodeExpandedChange="(t, e)=>$emit('treeViewNodeExpandedChange', t, e)"
+                      @treeViewNodeDelete="(t, e)=>$_treeViewNode_handleChildDeletion(t, e)">
       </TreeViewNode>
     </ul>
   </li>
@@ -171,14 +183,15 @@
         if (!Array.isArray(this.model.children)) {
           this.$set(this.model, 'children', []);
         }
-
-        // Set basic node options
         if (typeof this.model.expandable !== 'boolean') {
           this.$set(this.model, 'expandable', true);
         }
         if (typeof this.model.selectable !== 'boolean') {
           this.$set(this.model, 'selectable', false);
         }
+        if (typeof this.model.deletable !== 'boolean') {
+          this.$set(this.model, 'deletable', false);
+        }
 
         this.$_treeViewNode_normalizeNodeInputData();
         this.$_treeViewNode_normalizeNodeStateData();
@@ -258,22 +271,38 @@
         this.$emit('treeViewNodeExpandedChange', this.model, event);
       },
       $_treeViewNode_onClick(event) {
-        // Don't fire this if the target is the input or expander, which have their own events
-        if (!event.target.matches("input, .tree-view-node-self-expander")) {
+        // Don't fire this if the target is an element which has its own events
+        if (!event.target.matches("input, .tree-view-node-self-expander, .tree-view-node-self-delete")) {
           this.$emit('treeViewNodeClick', this.model, event);
         }
       },
       $_treeViewNode_onDblclick(event) {
-        // Don't fire this if the target is the input or expander, which have their own events
-        if (!event.target.matches("input, .tree-view-node-self-expander")) {
+        // Don't fire this if the target is an element which has its own events
+        if (!event.target.matches("input, .tree-view-node-self-expander, .tree-view-node-self-delete")) {
           this.$emit('treeViewNodeDblclick', this.model, event);
         }
+      },
+      $_treeViewNode_onDelete(event) {
+        this.$emit('treeViewNodeDelete', this.model, event);
+      },
+      $_treeViewNode_handleChildDeletion(node, event) {
+        // Remove the node from the array of children if this is an immediate child.
+        // Note that only the node that was deleted fires these, not any subnode.
+        let targetIndex = this.model.children.indexOf(node);
+        if (targetIndex > -1) {
+          this.model.children.splice(targetIndex, 1);
+        }
+
+        this.$emit('treeViewNodeDelete', node, event);
       }
     },
   };
 </script>
 
 <style lang="scss">
+  $baseHeight: 1.2rem;
+  $itemSpacing: 1.2rem;
+
   .tree-view {
 
     .tree-view-node {
@@ -286,7 +315,7 @@
       .tree-view-node-self {
         display: flex;
         align-items: flex-start;
-        line-height: 1.2rem;
+        line-height: $baseHeight;
 
         .tree-view-node-self-expander {
           padding: 0;
@@ -315,7 +344,8 @@
         .tree-view-node-self-expander,
         .tree-view-node-self-checkbox,
         .tree-view-node-self-radio,
-        .tree-view-node-self-spacer {
+        .tree-view-node-self-spacer,
+        .tree-view-node-self-delete {
           min-width: 1rem;
         }
 
@@ -326,17 +356,32 @@
 
         .tree-view-node-self-checkbox,
         .tree-view-node-self-radio {
-          margin: 0 0 0 -1.2rem;
+          margin: 0 0 0 (-$itemSpacing);
         }
 
         .tree-view-node-self-text,
         .tree-view-node-self-label {
-          margin-left: 1.2rem;
+          margin-left: $itemSpacing;
+        }
+
+        .tree-view-node-self-delete {
+          padding: 0;
+          background: none;
+          border: none;
+          height: $baseHeight;
+
+          i.tree-view-node-self-delete-icon {
+            font-style: normal;
+
+            &::before {
+              content: 'x';
+            }
+          }
         }
       }
 
       .tree-view-node-children {
-        margin: 0 0 0 2.2rem;
+        margin: 0 0 0 (1rem + $itemSpacing);
         padding: 0;
         list-style: none;
       }

tests/data/node-generator.js

@@ -5,8 +5,8 @@
  * buttons will be added to the radioState parameter.
  *
  * The node spec's node string should be in the format:
- *  `[eE]?[sS]?[cCrR!?]?`
- * The presence of e, s or c|r indicate the node is expandable, selectable, and a checkbox or radio buttton
+ *  `[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 capitalization means the input will be selected. The `!` indicates the input will be disabled.
  *
@@ -35,6 +35,7 @@ export function generateNodes(nodeSpec, radioState, baseId = "") {
                 label: 'Node ' + index,
                 expandable: lowerItem.includes('e'),
                 selectable: lowerItem.includes('s'),
+                deletable: lowerItem.includes('d'),
                 input: lowerItem.includes('c')
                     ? { type: 'checkbox', name: `${idString}-cbx` }
                     : lowerItem.includes('r')

tests/local/basic.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Basic Usage</title>
+    <script src="https://unpkg.com/vue"></script>
+    <script src="../../dist/vue-tree.umd.js"></script>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="../../dist/vue-tree.css">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Basic Treeview Demo</h1>
+      <div id="app">
+        <tree id="customtree" :model="model" ref="tree"></tree>
+        <section id="checkedStuff">
+          <button type="button" @click="refreshCheckedList">What's been checked?</button>
+          <ul id="checkedList">
+            <li v-for="checkedNode in checkedNodes">{{ checkedNode.id }}</li>
+          </ul>
+      </section>
+      </div>
+    </div>
+
+    <script type='module'>
+    import basicData from './basic.js';
+
+    new Vue({
+      components: {
+        tree: window['vue-tree']
+      },
+      data() {
+        return {
+          model: basicData,
+          checkedNodes: []
+        };
+      },
+      methods: {
+        refreshCheckedList() {
+          this.$set(this, 'checkedNodes', this.$refs.tree.getCheckedCheckboxes());
+        }
+      }
+    }).$mount('#app')
+    </script>
+  </body>
+</html>

tests/local/basic.js

@@ -0,0 +1,85 @@
+export default [
+  {
+    id: 'node1',
+    label: 'My First Node',
+    expandable: true,
+    selectable: true,
+    deletable: true,
+    input: {
+      type: 'checkbox',
+      name: 'checkbox1'
+    },
+    state: {
+      expanded: false,
+      selected: false,
+      input: {
+        value: false,
+        disabled: false
+      }
+    },
+    children: []
+  },
+  {
+    id: 'node2',
+    label: 'My Second Node',
+    expandable: true,
+    selectable: true,
+    input: {
+      type: 'checkbox',
+      name: 'checkbox2'
+    },
+    state: {
+      expanded: true,
+      selected: false,
+      input: {
+        value: false,
+        disabled: false
+      }
+    },
+    children: [
+      {
+        id: 'subnode1',
+        label: 'This is a subnode',
+        expandable: true,
+        selectable: true,
+        deletable: true,
+        state: {
+          expanded: false,
+          selected: false
+        },
+        children: []
+      },
+      {
+        id: 'subnode2',
+        label: 'This is a checkable, checked subnode',
+        expandable: true,
+        selectable: true,
+        input: {
+          type: 'checkbox',
+          name: 'checkbox3'
+        },
+        state: {
+          expanded: false,
+          selected: false,
+          input: {
+            value: true,
+            disabled: true
+          }
+        },
+        children: [
+          {
+            id: 'subsubnode1',
+            label: 'An even deeper node',
+            children: [],
+            expandable: true,
+            selectable: true,
+            state: {
+              expanded: false,
+              selected: false
+            }
+          }
+        ]
+      }
+    ]
+  }
+];

tests/local/demo.css

@@ -0,0 +1,15 @@
+body {
+    background-color: tan;
+}
+
+div.container {
+    background-color: white;
+    height: 100%;
+    padding: 1rem;
+    max-width: 1200px;
+    margin: auto;
+}
+
+section {
+    margin-top: 2rem;
+}