feat(ui: tree): add & exposehoveredNodeId

massCodeIO · Apr 6, 2022 · 59d7886 · 59d7886
1 parent cdbec6f
commit 59d7886
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/renderer/components/ui/AppTree/AppTree.vue b/src/renderer/components/ui/AppTree/AppTree.vue
@@ -11,11 +11,13 @@
         :node="node"
         :nodes="store.clonedNodes!"
         :index="index"
+        :hovered-node-id="hoveredNodeId"
       >
         <template #default="{ node: childNode, deep }">
           <slot
             :node="childNode"
             :deep="deep"
+            :hovered-node-id="hoveredNodeId"
           />
         </template>
       </AppTreeNode>
@@ -24,10 +26,9 @@
 </template>
 
 <script setup lang="ts">
-import { provide, watch } from 'vue'
+import { provide, ref, watch } from 'vue'
 import { store } from './composable'
 import type { Node } from './types'
-
 import { clone } from './helpers'
 
 interface Props {
@@ -48,6 +49,8 @@ const props = withDefaults(defineProps<Props>(), {
   contextMenuHandler: () => Promise.resolve(true)
 })
 
+const hoveredNodeId = ref('')
+
 const cloneNodes = () => {
   store.clonedNodes = clone(props.modelValue) as Node[]
 }
@@ -59,6 +62,10 @@ provide('updateValue', updateValue)
 provide('clickNode', clickNode)
 provide('contextMenuHandler', props.contextMenuHandler)
 
+defineExpose({
+  hoveredNodeId
+})
+
 watch(
   () => props.modelValue,
   () => cloneNodes(),

diff --git a/src/renderer/components/ui/AppTree/AppTreeNode.vue b/src/renderer/components/ui/AppTree/AppTreeNode.vue
@@ -18,7 +18,7 @@
       ref="rowRef"
       class="node__row"
       :class="{
-        'is-hovered': isHovered && isAllowed,
+        'is-hovered': (isHovered && isAllowed) || hoveredNodeId === node.id,
         'is-selected': isSelected,
         'is-focused': isFocused,
         'is-highlighted': isHighlighted
@@ -56,12 +56,14 @@
         :deep="deep + 1"
         :node="children"
         :nodes="node.children"
+        :hovered-node-id="hoveredNodeId"
       >
         <!-- eslint-disable-next-line vue/no-template-shadow -->
-        <template #default="{ node, deep }">
+        <template #default="{ node, deep, hoveredNodeId }">
           <slot
             :node="node"
             :deep="deep"
+            :hovered-node-id="hoveredNodeId"
           />
         </template>
       </AppTreeNode>
@@ -110,6 +112,7 @@ interface Props {
   node: Node
   nodes: Node[]
   indent?: number
+  hoveredNodeId?: string
   ghostEl?: Function
 }