feat: support node mouseover

Author: leezng

example/SelectControl.vue

@@ -91,6 +91,7 @@
         :show-select-controller="state.showSelectController"
         :show-icon="state.showIcon"
         @node-click="handleNodeClick"
+        @node-mouseover="handleAll"
         @brackets-click="handleAll"
         @icon-click="handleAll"
         @selected-change="handleAll"

src/components/Tree/index.tsx

@@ -80,6 +80,7 @@ export default defineComponent({
 
   emits: [
     'nodeClick',
+    'nodeMouseover',
     'bracketsClick',
     'iconClick',
     'selectedChange',
@@ -216,6 +217,10 @@ export default defineComponent({
       emit('nodeClick', node);
     };
 
+    const handleNodeMouseover = (node: NodeDataType) => {
+      emit('nodeMouseover', node);
+    };
+
     const updateCollapsedPaths = (collapsed: boolean, path: string) => {
       if (collapsed) {
         state.hiddenPaths = {
@@ -303,6 +308,7 @@ export default defineComponent({
             renderNodeKey={renderNodeKey}
             renderNodeValue={renderNodeValue}
             onNodeClick={handleNodeClick}
+            onNodeMouseover={handleNodeMouseover}
             onBracketsClick={handleBracketsClick}
             onIconClick={handleIconClick}
             onSelectedChange={handleSelectedChange}

src/components/TreeNode/index.tsx

@@ -83,6 +83,9 @@ export const treeNodePropsPass = {
   onNodeClick: {
     type: Function as PropType<(node: NodeDataType) => void>,
   },
+  onNodeMouseover: {
+    type: Function as PropType<(node: NodeDataType) => void>,
+  },
   onBracketsClick: {
     type: Function as PropType<(collapsed: boolean, node: NodeDataType) => void>,
   },
@@ -114,7 +117,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['nodeClick', 'bracketsClick', 'iconClick', 'selectedChange', 'valueChange'],
+  emits: ['nodeClick', 'nodeMouseover', 'bracketsClick', 'iconClick', 'selectedChange', 'valueChange'],
 
   setup(props, { emit }) {
     const dataType = computed<string>(() => getDataType(props.node.content));
@@ -189,6 +192,10 @@ export default defineComponent({
       }
     };
 
+    const handleNodeMouseover = () => {
+      emit('nodeMouseover', props.node);
+    };
+
     const handleValueEdit = (e: MouseEvent) => {
       if (!props.editable) return;
       if (!state.editing) {
@@ -220,6 +227,7 @@ export default defineComponent({
             dark: props.theme === 'dark',
           }}
           onClick={handleNodeClick}
+          onMouseover={handleNodeMouseover}
           style={props.style}
         >
           {props.showLineNumber && <span class="vjs-node-index">{node.id + 1}</span>}