feat: support nodeValue slot.

Author: leezng

example/Basic.vue

@@ -35,8 +35,8 @@
           <input v-model="collapsedOnClickBrackets" type="checkbox" />
         </div>
         <div>
-          <label>use custom formatter</label>
-          <input v-model="useCustomLinkFormatter" type="checkbox" />
+          <label>useNodeValueSlot</label>
+          <input v-model="useNodeValueSlot" type="checkbox" />
         </div>
         <div>
           <label>deep</label>
@@ -64,10 +64,16 @@
         :show-line-number="showLineNumber"
         :highlight-mouseover-node="highlightMouseoverNode"
         :collapsed-on-click-brackets="collapsedOnClickBrackets"
-        :custom-value-formatter="useCustomLinkFormatter ? customLinkFormatter : null"
         :show-icon="showIcon"
         style="position: relative"
-      />
+      >
+        <template v-if="useNodeValueSlot" #nodeValue="{ node, defaultValue }">
+          <template v-if="typeof node.content === 'string' && node.content.startsWith('http://')">
+            <a href="node.content" target="_blank">{{ node.content }}</a>
+          </template>
+          <template v-else>{{ defaultValue }}</template>
+        </template>
+      </vue-json-pretty>
     </div>
   </div>
 </template>
@@ -116,7 +122,7 @@ export default {
       showDoubleQuotes: true,
       highlightMouseoverNode: true,
       collapsedOnClickBrackets: true,
-      useCustomLinkFormatter: false,
+      useNodeValueSlot: false,
       deep: 3,
       deepCollapseChildren: false,
       showIcon: false,
@@ -131,14 +137,11 @@ export default {
       }
     },
   },
-  methods: {
-    customLinkFormatter(data, key, path, defaultFormatted) {
-      if (typeof data === 'string' && data.startsWith('http://')) {
-        return `<a style="color:red;" href="${data}" target="_blank">"${data}"</a>`;
-      } else {
-        return defaultFormatted;
-      }
-    },
-  },
 };
 </script>
+
+<style scoped>
+a {
+  color: blue;
+}
+</style>

src/components/Tree/index.vue

@@ -24,7 +24,6 @@
             :key="item.id"
             :node="item"
             :collapsed="!!hiddenPaths[item.path]"
-            :custom-value-formatter="customValueFormatter"
             :show-double-quotes="showDoubleQuotes"
             :show-length="showLength"
             :collapsed-on-click-brackets="collapsedOnClickBrackets"
@@ -45,7 +44,11 @@
             @selected-change="handleSelectedChange"
             @value-change="handleValueChange"
             :style="itemHeight && itemHeight !== 20 ? { lineHeight: `${itemHeight}px` } : {}"
-          />
+          >
+            <template #value="slotProps">
+              <slot name="nodeValue" :node="item" :defaultValue="slotProps.defaultValue" />
+            </template>
+          </tree-node>
         </div>
       </div>
     </div>
@@ -147,11 +150,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    // custom formatter for values
-    customValueFormatter: {
-      type: Function,
-      default: null,
-    },
     showIcon: {
       type: Boolean,
       default: false,

src/components/TreeNode/index.vue

@@ -38,11 +38,6 @@
     <span>
       <brackets v-if="node.type !== 'content'" :data="node.content" @click="handleBracketsClick" />
 
-      <span
-        v-else-if="customFormatter"
-        :class="valueClass"
-        v-html="customFormatter(node.content)"
-      />
       <span
         v-else
         :class="valueClass"
@@ -55,7 +50,7 @@
       >
         <input
           v-if="editable && editing"
-          :value="defaultFormatter(node.content)"
+          :value="defaultValue"
           @change="handleInputChange"
           :style="{
             padding: '3px 8px',
@@ -66,9 +61,9 @@
             fontFamily: 'inherit',
           }"
         />
-        <template v-else>{{
-          editable && editing ? undefined : defaultFormatter(node.content)
-        }}</template>
+        <slot v-else name="value" :node="node" :defaultValue="defaultValue">{{
+          defaultValue
+        }}</slot>
       </span>
 
       <span v-if="node.showComma">,</span>
@@ -133,11 +128,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    // custom formatter for values
-    customValueFormatter: {
-      type: Function,
-      default: null,
-    },
     showIcon: {
       type: Boolean,
       default: false,
@@ -161,7 +151,6 @@ export default {
       return `vjs-value vjs-value__${this.dataType}`;
     },
 
-    // 当前数据类型
     dataType() {
       return getDataType(this.node.content);
     },
@@ -170,33 +159,24 @@ export default {
       return this.showDoubleQuotes ? `"${this.node.key}"` : this.node.key;
     },
 
-    // 当前的树是否支持选中功能
     selectable() {
       return (
         this.pathSelectable(this.node.path, this.node.content) && (this.isMultiple || this.isSingle)
       );
     },
 
-    // 多选模式
     isMultiple() {
       return this.selectableType === 'multiple';
     },
 
-    // 单选模式
     isSingle() {
       return this.selectableType === 'single';
     },
 
-    customFormatter() {
-      return this.customValueFormatter
-        ? (data) =>
-            this.customValueFormatter?.(
-              data,
-              this.node.key,
-              this.node.path,
-              this.defaultFormatter(data),
-            )
-        : null;
+    defaultValue() {
+      const str = (this.node?.content ?? '') + '';
+      const text = this.dataType === 'string' ? `"${str}"` : str;
+      return text;
     },
   },
   methods: {
@@ -206,28 +186,6 @@ export default {
       this.$emit('value-change', value, this.node.path);
     },
 
-    defaultFormatter(data) {
-      const str = data + '';
-      const text = this.dataType === 'string' ? `"${str}"` : str;
-      // if (this.editable && this.editing) {
-      //   return (
-      //     <input
-      //       value={text}
-      //       onChange={handleInputChange}
-      //       style={{
-      //         padding: '3px 8px',
-      //         border: '1px solid #eee',
-      //         boxShadow: 'none',
-      //         boxSizing: 'border-box',
-      //         borderRadius: 5,
-      //         fontFamily: 'inherit',
-      //       }}
-      //     />
-      //   );
-      // }
-      return text;
-    },
-
     handleIconClick() {
       this.$emit('icon-click', !this.collapsed, this.node.path);
     },