Add treeNodeActivate event

Author: grapoza

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grapoza/vue-tree",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Tree components for Vue 3",
   "author": "Gregg Rapoza <grapoza@gmail.com>",
   "license": "MIT",

src/components/TreeView.spec.js

@@ -648,6 +648,19 @@ describe('TreeView.vue', () => {
     });
   });
 
+  describe('when a node fires a treeNodeActivate event', () => {
+
+    beforeEach(async () => {
+      const { nodes, modelDefaults } = generateNodes(['es']);
+      wrapper = await createWrapper({ modelValue: nodes, modelDefaults, selectionMode: SelectionMode.Multiple });
+      wrapper.findComponent(TreeViewNode).vm.$emit("treeNodeActivate", wrapper.vm.metaModel[0]);
+    });
+
+    it('should emit a treeNodeActivate event', () => {
+      expect(wrapper.emitted('treeNodeActivate').length).to.equal(1);
+    });
+  });
+
   describe('when created with nodes that do not contain an explicit id property', () => {
 
     it('should fall back to the id property (note: this test is testing implementation [v-for iteration key for nodes] and not functionality)', async () => {

src/components/TreeView.vue

@@ -25,6 +25,7 @@
         @treeNodeExpandedChange="(t)=>$emit(TreeEvent.ExpandedChange, t)"
         @treeNodeChildrenLoad="(t)=>$emit(TreeEvent.ChildrenLoad, t)"
         @treeNodeSelectedChange="handleNodeSelectedChange"
+        @treeNodeActivate="(t)=>$emit(TreeEvent.Activate, t)"
         @treeNodeAdd="(t, p)=>$emit(TreeEvent.Add, t, p)"
         @treeNodeDelete="handleChildDeletion"
         @treeNodeAriaFocusableChange="handleFocusableChange"
@@ -129,6 +130,7 @@ const model = defineModel({ type: Array, required: true });
 // EMITS
 
 const emit = defineEmits([
+  TreeEvent.Activate,
   TreeEvent.Add,
   TreeEvent.CheckboxChange,
   TreeEvent.ChildrenLoad,

src/components/TreeViewNode.spec.js

@@ -1762,17 +1762,17 @@ describe('TreeViewNode.vue', () => {
         });
       });
 
-      describe('and the node does not have an input', () => {
+      describe('always', () => {
 
         beforeEach(async () => {
           let defaultProps = getDefaultPropsData();
           wrapper = await createWrapper(Object.assign(defaultProps, { modelValue: generateMetaNodes(['es'])[0] }));
           await triggerKeydown(wrapper, wrapper.vm.ariaKeyMap.activateItem[0]);
         });
 
-        it('should not fire any custom events', () => {
-          expect(Object.getOwnPropertyNames(wrapper.emitted()).length).to.equal(1);
-          expect(Object.getOwnPropertyNames(wrapper.emitted())[0]).to.equal('keydown');
+        it('should emit a treeNodeActivate event', () => {
+          expect(wrapper.emitted().treeNodeActivate).to.be.an("array").that.has.length(1);
+          expect(wrapper.emitted().treeNodeActivate[0][0]).to.equal(wrapper.vm.metaModel);
         });
       });
     });

src/components/TreeViewNode.vue

@@ -204,6 +204,7 @@
                       @treeNodeExpandedChange="(t)=>$emit(TreeEvent.ExpandedChange, t)"
                       @treeNodeChildrenLoad="(t)=>$emit(TreeEvent.ChildrenLoad, t)"
                       @treeNodeSelectedChange="(t)=>$emit(TreeEvent.SelectedChange, t)"
+                      @treeNodeActivate="(t)=>$emit(TreeEvent.Activate, t)"
                       @treeNodeAdd="(t, p)=>$emit(TreeEvent.Add, t, p)"
                       @treeNodeDelete="handleChildDeletion"
                       @treeNodeAriaFocusableChange="(t)=>$emit(TreeEvent.FocusableChange, t)"
@@ -290,6 +291,7 @@ const props = defineProps({
 // EMITS
 
 const emit = defineEmits([
+  TreeEvent.Activate,
   TreeEvent.Add,
   TreeEvent.Click,
   TreeEvent.CheckboxChange,
@@ -524,6 +526,9 @@ function onKeyDown(event) {
         target.dispatchEvent(clickEvent);
       }
     }
+
+    // Bubble activation out so users can apply handling for any kind of node
+    emit(TreeEvent.Activate, metaModel.value);
   }
   else if (props.ariaKeyMap.selectItem.includes(event.keyCode)) {
     // Toggles selection for the focused node.

src/enums/event.js

@@ -11,6 +11,7 @@ const events = Object.freeze({
     ExpandedChange: 'treeNodeExpandedChange',
     ChildrenLoad: 'treeNodeChildrenLoad',
     SelectedChange: 'treeNodeSelectedChange',
+    Activate: 'treeNodeActivate',
 
     // Focus
     FocusableChange: 'treeNodeAriaFocusableChange',

src/stories/Home.stories.mdx

@@ -294,19 +294,20 @@ The `modelDefaults` property's return value contains any data about the node's c
 
 ## Events
 
-| Event                       | Description                                                    | Handler Parameters                                                          |
-|:----------------------------|:---------------------------------------------------------------|:----------------------------------------------------------------------------|
-| treeNodeAdd                 | Emitted when a node is added                                   | `target` The meta model of the target (child) node <br/> `parent` The model of the parent node |
-| treeNodeClick               | Emitted when a node is clicked                                 | `target` The meta model of the target node <br/> `event` The original event |
-| treeNodeDblclick            | Emitted when a node is double clicked                          | `target` The meta model of the target node <br/> `event` The original event |
-| treeNodeDelete              | Emitted when a node is deleted                                 | `target` The meta model of the target node                                  |
-| treeNodeCheckboxChange      | Emitted when a node's checkbox emits a change event            | `target` The meta model of the target node <br/> `event` The original event |
-| treeNodeChildCheckboxChange | Emitted when a child node's checkbox emits a change event      | `target` The meta model of the target node (the parent of the changed node) <br/> `child` The model of changed node <br/> `event` The original event |
-| treeNodeRadioChange         | Emitted when a node's radio button emits a change event        | `target` The meta model of the target node <br/> `event` The original event |
-| treeNodeExpandedChange      | Emitted when a node is expanded or collapsed                   | `target` The meta model of the target node                                  |
-| treeNodeSelectedChange      | Emitted when a node is selected or deselected                  | `target` The meta model of the target node                                  |
-| treeNodeChildrenLoad        | Emitted when a node's children are done loading asynchronously | `target` The meta model of the target node                                  |
-| treeRootNodesLoad           | Emitted when the root nodes are done loading asynchronously    |                                                                             |
+| Event                       | Description                                                      | Handler Parameters                                                          |
+|:----------------------------|:-----------------------------------------------------------------|:----------------------------------------------------------------------------|
+| treeNodeAdd                 | Emitted when a node is added                                     | `target` The meta model of the target (child) node <br/> `parent` The model of the parent node |
+| treeNodeClick               | Emitted when a node is clicked                                   | `target` The meta model of the target node <br/> `event` The original event |
+| treeNodeDblclick            | Emitted when a node is double clicked                            | `target` The meta model of the target node <br/> `event` The original event |
+| treeNodeDelete              | Emitted when a node is deleted                                   | `target` The meta model of the target node                                  |
+| treeNodeCheckboxChange      | Emitted when a node's checkbox emits a change event              | `target` The meta model of the target node <br/> `event` The original event |
+| treeNodeChildCheckboxChange | Emitted when a child node's checkbox emits a change event        | `target` The meta model of the target node (the parent of the changed node) <br/> `child` The model of changed node <br/> `event` The original event |
+| treeNodeRadioChange         | Emitted when a node's radio button emits a change event          | `target` The meta model of the target node <br/> `event` The original event |
+| treeNodeExpandedChange      | Emitted when a node is expanded or collapsed                     | `target` The meta model of the target node                                  |
+| treeNodeSelectedChange      | Emitted when a node is selected or deselected                    | `target` The meta model of the target node                                  |
+| treeNodeActivate            | Emitted when a node is focused and the activation key is pressed | `target` The meta model of the target node                                  |
+| treeNodeChildrenLoad        | Emitted when a node's children are done loading asynchronously   | `target` The meta model of the target node                                  |
+| treeRootNodesLoad           | Emitted when the root nodes are done loading asynchronously      |                                                                             |
 
 ## CSS Classes