feat: support renderNodeActions

Author: leezng

example/Basic.vue

@@ -72,6 +72,14 @@
           <label>renderNodeValue</label>
           <input v-model="state.useRenderNodeValueSlot" type="checkbox" />
         </div>
+        <div>
+          <label>renderNodeActions</label>
+          <select v-model="state.useRenderNodeActionsSlot">
+            <option :value="false">default(false)</option>
+            <option :value="true">true</option>
+            <option value="custom">custom</option>
+          </select>
+        </div>
       </div>
     </div>
     <div class="block">
@@ -89,6 +97,7 @@
         :collapsed-on-click-brackets="state.collapsedOnClickBrackets"
         :show-icon="state.showIcon"
         :show-key-value-space="state.showKeyValueSpace"
+        :render-node-actions="typeof state.useRenderNodeActionsSlot === 'boolean' ? state.useRenderNodeActionsSlot : undefined"
         style="position: relative"
       >
         <template v-if="state.useRenderNodeKeySlot" #renderNodeKey="{ node, defaultKey }">
@@ -104,6 +113,11 @@
           </template>
           <template v-else>{{ defaultValue }}</template>
         </template>
+
+        <template v-if="state.useRenderNodeActionsSlot === 'custom'" #renderNodeActions="{ node, defaultActions }">
+          <span><a :href="node.content" target="_blank">link</a></span>
+          <span @click="defaultActions.copy" style="margin-left: 4px;">copy</span>
+        </template>
       </vue-json-pretty>
     </div>
   </div>
@@ -158,6 +172,7 @@ export default defineComponent({
       collapsedOnClickBrackets: true,
       useRenderNodeKeySlot: false,
       useRenderNodeValueSlot: false,
+      useRenderNodeActionsSlot: false,
       indent: 2,
       deep: 4,
       setPathCollapsible: false,

src/components/Tree/index.tsx

@@ -66,7 +66,7 @@ export default defineComponent({
     },
   },
 
-  slots: ['renderNodeKey', 'renderNodeValue'],
+  slots: ['renderNodeKey', 'renderNodeValue', 'renderNodeActions'],
 
   emits: [
     'nodeClick',
@@ -272,7 +272,8 @@ export default defineComponent({
     return () => {
       const renderNodeKey = props.renderNodeKey ?? slots.renderNodeKey;
       const renderNodeValue = props.renderNodeValue ?? slots.renderNodeValue;
-
+      const renderNodeActions = props.renderNodeActions || slots.renderNodeActions || false;
+      
       const nodeContent =
         state.visibleData &&
         state.visibleData.map(item => (
@@ -300,6 +301,7 @@ export default defineComponent({
             showKeyValueSpace={props.showKeyValueSpace}
             renderNodeKey={renderNodeKey}
             renderNodeValue={renderNodeValue}
+            renderNodeActions={renderNodeActions}
             onNodeClick={handleNodeClick}
             onNodeMouseover={handleNodeMouseover}
             onBracketsClick={handleBracketsClick}

src/components/TreeNode/index.tsx

@@ -44,6 +44,13 @@ export const treeNodePropsPass = {
   renderNodeValue: Function as PropType<
     (opt: { node: NodeDataType; defaultValue: string | JSX.Element }) => unknown
   >,
+  // Custom render for node actions.
+  renderNodeActions: {
+    type: [Boolean, Function] as PropType<
+      boolean | ((opt: { node: NodeDataType; defaultActions: { copy: () => void } }) => unknown)
+    >,
+    default: false,
+  },
   // Define the selection method supported by the data level, which is not available by default.
   selectableType: String as PropType<'multiple' | 'single' | ''>,
   // Whether to display the selection control.
@@ -239,6 +246,18 @@ export default defineComponent({
       copy(copiedData);
     }
 
+    const renderNodeActions = () => {
+      const render = props.renderNodeActions;
+      if (render === false) return null;
+      else if (render === true) return <span onClick={handleCopy} class="vjs-tree-node-actions-item">copy</span>;
+      const defaultActions = {
+        copy: handleCopy,
+      };
+      return render
+        ? render({ node: props.node, defaultActions })
+        : null;
+    };
+
     return () => {
       const { node } = props;
 
@@ -333,9 +352,11 @@ export default defineComponent({
             )}
           </span>
 
-          <span class="vjs-tree-node-actions">
-            <span onClick={handleCopy}>copy</span>
-          </span>
+          {props.renderNodeActions !== false && (
+            <span class="vjs-tree-node-actions">
+              { renderNodeActions() }
+            </span>
+          )}
         </div>
       );
     };

src/components/TreeNode/styles.less

@@ -47,6 +47,14 @@
     padding: 0 4px;
     background-color: @highlight-bg-color;
     border-radius: 4px;
+
+    .@{css-prefix}-tree-node-actions-item {
+      cursor: pointer;
+
+      &:hover {
+        color: @color-primary;
+      }
+    }
   }
 
   &.dark {