Radio buttons, refactoring for future inputs

Also includes documentation and demo updates.

Fixes #14

Author: grapoza

README.md

@@ -1,6 +1,6 @@
 # vue-tree
 
-vue-tree is a Vue component that implements a TreeView control. Its aim is to provide common tree options in a way that is easy to use and easy to customize. 
+vue-tree is a Vue component that implements a TreeView control. Its aim is to provide common tree options in a way that is easy to use and easy to customize.
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Build status](https://ci.appveyor.com/api/projects/status/j8d19gt0vh16amhh/branch/master?svg=true)](https://ci.appveyor.com/project/Gregg/vue-tree/branch/master)
@@ -12,11 +12,11 @@ Features include:
 - A pleasing (or at least generally acceptable) default format in a wide field of browsers
 - Expandable nodes
 - Checkboxes
+- Radio buttons
 
 Planned:
 
 - Node selection ([#5](https://github.com/grapoza/vue-tree/issues/5))
-- Radio buttons; possibly other standard input types as well ([#17](https://github.com/grapoza/vue-tree/issues/17))
 - 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))
 - Setting node enabled state ([#15](https://github.com/grapoza/vue-tree/issues/15))
@@ -58,8 +58,8 @@ export default {
     return {
       dataModel: [
         {id: "numberOrString", label: "Root Node", children: [
-          {id: 1, label: "Child Node"}, 
-          {id: "node2", label: "Second Child"}] 
+          {id: 1, label: "Child Node"},
+          {id: "node2", label: "Second Child"}]
         }]
     }
   }
@@ -83,8 +83,8 @@ export default {
     return {
       dataModel: [
         {id: "numberOrString", label: "Root Node", children: [
-          {id: 1, label: "Child Node"}, 
-          {id: "node2", label: "Second Child"}] 
+          {id: 1, label: "Child Node"},
+          {id: "node2", label: "Second Child"}]
         }]
     }
   }
@@ -93,13 +93,14 @@ export default {
 
 ## Demos
 
-To see it in action, try out the [Demos](demo/basic.html).
+To see it in action, try out the Demos (coming soon; [#32](https://github.com/grapoza/vue-tree/issues/32)).
 
 ## Props
 
-| Prop             | Type          | Description                                            | Default value  | Required |
-| :--------------- |:--------------|:-------------------------------------------------------|:---------------|:---------|
-| model            | Array         | The data model containing [tree data](#tree-data)      | -              | Yes      |
+| Prop             | Type     | Description                                                                    | Default value  | Required |
+|:-----------------|:---------|:-------------------------------------------------------------------------------|:---------------|:---------|
+| model            | Array    | The data model containing [tree data](#tree-data)                              | -              | Yes      |
+| radioGroupValues | Object   | An object, the properties of which correspond to radio button group selections | `{}`           |          |
 
 ## Tree Data
 
@@ -108,48 +109,79 @@ The data passed to the treeview should be an array of nodes, where each node has
 ```javascript
 {
   id: "node0",
-  label: "My Node!",
-  checkable: true,
+  label: "A checkbox node",
   expandable: true,
   selectable: false,
+  input: {
+    type: 'checkbox'
+  },
+  state: {
+    expanded: true,
+    selected: false,
+    input: {
+      value: false
+    }
+  },
+  children: []
+},
+{
+  id: "node1",
+  label: "A radio button node",
+  expandable: true,
+  selectable: false,
+  input: {
+    type: 'radio',
+    name: 'rbGroup1',  // Used as the name attribute for the radio button
+    value: 'thisValue' // Used as the value attribute for the radio button
+  },
   state: {
-    checked: false,
     expanded: true,
     selected: false
+    // No input state here; to let complex radio button groupings work, state is bound to a tree-level property
   },
   children: []
 }
 ```
 
-| Prop             | Type            | Description                                              | Default value  | Required |
-| :--------------- |:----------------|:---------------------------------------------------------|:---------------|:---------|
-| id               | Number/String   | An ID that uniquely identifies this node within the tree | -              | Yes      |
-| label            | String          | The text to show in the treeview                         | -              | Yes      |
-| checkable        | Boolean         | True to show a checkbox for the node                     | `false`        |          |
-| expandable       | Boolean         | True to show a toggle for expanding nodes' subnode lists | `true`         |          |
-| selectable       | Boolean         | True to allow the node to be selected*                   | `false`        |          |
-| state            | Object          | Contains the current state of the node                   | -              |          |
-| state.checked    | Boolean         | True if this node's checkbox is checked                  | `false`        |          |
-| state.expanded   | Boolean         | True if this node's subnode list is expanded             | `false`        |          |
-| state.selected   | Boolean         | True if the node is selected*                            | `false`        |          |
-| children         | Array\<Object\> | The child nodes of this node                             | `[]`           |          |
+| Prop              | Type            | Description                                              | Default value                     | Required |
+|:------------------|:----------------|:---------------------------------------------------------|:----------------------------------|:---------|
+| id                | Number/String   | An ID that uniquely identifies this node within the tree | -                                 | Yes      |
+| 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`                           |          |
+| 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'`          |          |
+| input.value       | String          | The value attribute of the input; used with `radio` type | `label`'s value***                |          |
+| state             | Object          | Contains the current state of the node                   | -                                 |          |
+| state.expanded    | Boolean         | True if this node's subnode list is expanded             | `false`                           |          |
+| state.selected    | Boolean         | True if the node is selected*                            | `false`                           |          |
+| state.input       | Object          | Contains any state related to the input field            | `{}` for checkbox, otherwise -    |          |
+| state.input.value | Boolean         | Contains the value of the input                          | `false` for checkbox, otherwise - |          |
+| children          | Array\<Object\> | The child nodes of this node                             | `[]`                              |          |
 
 \* Selection props are unused; see [#5](https://github.com/grapoza/vue-tree/issues/5).
 
+\*\* If `input.type` is not supplied, `input` is forced to `null`.
+
+\*\*\* For `input.value`, `label`'s value is replaced with `label.replace(/[\s&<>"'\/]/g, '')`
+
 ## Methods
 
-| Method      | Description                   | Parameters | Returns                                                                |
-|-------------|-------------------------------|------------|------------------------------------------------------------------------|
-| getChecked  | Gets models for checked nodes |            | An `Array<Object>` of models for checked nodes (order not guaranteed). |
+| Method                 | Description                            | Parameters | Returns                                                     |
+|:-----------------------|:---------------------------------------|:-----------|:------------------------------------------------------------|
+| getCheckedCheckboxes   | Gets models for checked checkbox nodes |            | An `Array<Object>` of models for checked checkbox nodes     |
+| getCheckedRadioButtons | Gets models for checked radio nodes    |            | An `Array<Object>` of models for checked radio button nodes |
 
 ## Events
 
-| Event                       | Description                                  | Handler Parameters                                                     |
-|-----------------------------|----------------------------------------------|------------------------------------------------------------------------|
-| 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 |
-| treeViewNodeCheckedChange   | Emitted when a node is checked or unchecked  | `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 |
+| Event                       | Description                                             | Handler Parameters                                                     |
+|:----------------------------|:--------------------------------------------------------|:-----------------------------------------------------------------------|
+| 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 |
+| 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 |
 
 ## CSS Classes
 
@@ -165,6 +197,8 @@ The display of the treeview can be customized via CSS using the following classe
 | `tree-view-node-self-expanded-indicator` | The `<i>` element containing the expansion indicator                             |
 | `tree-view-node-self-spacer`             | An empty spacer to replace fixed-width elements, _e.g._ the expander or checkbox |
 | `tree-view-node-self-label`              | The label for the checkbox of checkable nodes                                    |
+| `tree-view-node-self-input`              | Any type of input node within the tree node                                      |
 | `tree-view-node-self-checkbox`           | The checkbox                                                                     |
-| `tree-view-node-self-text`               | The text for an uncheckable node                                                 |
+| `tree-view-node-self-radio`              | The radio button                                                                 |
+| `tree-view-node-self-text`               | The text for a non-input node                                                    |
 | `tree-view-node-children`                | The list of child nodes                                                          |

demo/basic.html

@@ -37,7 +37,7 @@ <h1>Basic Treeview Demo</h1>
       },
       methods: {
         refreshCheckedList() {
-          this.$set(this, 'checkedNodes', this.$refs.tree.getChecked());
+          this.$set(this, 'checkedNodes', this.$refs.tree.getCheckedCheckboxes());
         }
       }
     }).$mount('#app')

demo/basic.js

@@ -3,35 +3,43 @@ export default [
     id: 'node1',
     label: 'My First Node',
     expandable: true,
-    checkable: true,
     selectable: true,
+    input: {
+      type: 'checkbox',
+      name: 'checkbox1'
+    },
     state: {
-      checked: false,
       expanded: false,
-      selected: false
+      selected: false,
+      input: {
+        value: false
+      }
     },
     children: []
   },
   {
     id: 'node2',
     label: 'My Second Node',
     expandable: true,
-    checkable: true,
     selectable: true,
+    input: {
+      type: 'checkbox',
+      name: 'checkbox2'
+    },
     state: {
-      checked: false,
       expanded: true,
-      selected: false
+      selected: false,
+      input: {
+        value: false
+      }
     },
     children: [
       {
         id: 'subnode1',
         label: 'This is a subnode',
         expandable: true,
-        checkable: false,
         selectable: true,
         state: {
-          checked: false,
           expanded: false,
           selected: false
         },
@@ -41,23 +49,26 @@ export default [
         id: 'subnode2',
         label: 'This is a checkable, checked subnode',
         expandable: true,
-        checkable: true,
         selectable: true,
+        input: {
+          type: 'checkbox',
+          name: 'checkbox3'
+        },
         state: {
-          checked: true,
           expanded: false,
-          selected: false
+          selected: false,
+          input: {
+            value: true
+          }
         },
         children: [
           {
             id: 'subsubnode1',
             label: 'An even deeper node',
             children: [],
             expandable: true,
-            checkable: false,
             selectable: true,
             state: {
-              checked: false,
               expanded: false,
               selected: false
             }

demo/radioBasic.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Basic Radio Button 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 Radiobutton Demo</h1>
+      <div id="app">
+        <tree id="customtree" :model="model" :radio-group-values="radioGroupValues" 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 basicRadioData from './radioBasic.js';
+
+    new Vue({
+      components: {
+        tree: window['vue-tree']
+      },
+      data() {
+        return {
+          model: basicRadioData,
+          checkedNodes: [],
+          radioGroupValues: { 'radio1': 'aValueToSubmit' }
+        };
+      },
+      methods: {
+        refreshCheckedList() {
+          let nodes = this.$refs.tree.getCheckedRadioButtons();
+          this.$set(this, 'checkedNodes', nodes);
+        }
+      }
+    }).$mount('#app')
+    </script>
+  </body>
+</html>

demo/radioBasic.js

@@ -0,0 +1,64 @@
+export default [
+  {
+    id: 'node1',
+    label: 'My First Node',
+    expandable: true,
+    selectable: true,
+    input: {
+      type: 'radio',
+      name: 'radio1',
+      value: 'aValueToSubmit'
+    },
+    state: {
+      expanded: false,
+      selected: false
+    },
+    children: []
+  },
+  {
+    id: 'node2',
+    label: 'My Second Node',
+    expandable: true,
+    selectable: true,
+    input: {
+      type: 'radio',
+      name: 'radio1'
+    },
+    state: {
+      expanded: true,
+      selected: false
+    },
+    children: [
+      {
+        id: 'subnode1',
+        label: 'This is a subnode',
+        expandable: true,
+        selectable: true,
+        input: {
+          type: 'radio',
+          name: 'radio2'
+        },
+        state: {
+          expanded: false,
+          selected: false
+        },
+        children: []
+      },
+      {
+        id: 'subnode2',
+        label: 'This is a checkable, checked subnode',
+        expandable: true,
+        selectable: true,
+        input: {
+          type: 'radio',
+          name: 'radio2'
+        },
+        state: {
+          expanded: false,
+          selected: false
+        },
+        children: []
+      }
+    ]
+  }
+];