Merge pull request #238 from leezng/dev

release 2.2.4

Author: leezng

example/Basic.vue

@@ -26,6 +26,10 @@
           <label>showDoubleQuotes</label>
           <input v-model="state.showDoubleQuotes" type="checkbox" />
         </div>
+        <div>
+          <label>showKeyValueSpace</label>
+          <input v-model="state.showKeyValueSpace" type="checkbox" />
+        </div>
         <div>
           <label>collapsedOnClickBrackets</label>
           <input v-model="state.collapsedOnClickBrackets" type="checkbox" />
@@ -68,6 +72,7 @@
         :show-line-number="state.showLineNumber"
         :collapsed-on-click-brackets="state.collapsedOnClickBrackets"
         :show-icon="state.showIcon"
+        :show-key-value-space="state.showKeyValueSpace"
         style="position: relative"
       >
         <template v-if="state.useRenderNodeKeySlot" #renderNodeKey="{ node, defaultKey }">
@@ -139,6 +144,7 @@ export default defineComponent({
       deep: 4,
       setPathCollapsible: false,
       showIcon: false,
+      showKeyValueSpace: true,
     });
 
     const pathCollapsible = node => {

package-lock.json

@@ -3,6 +3,7 @@ import {
   reactive,
   computed,
   watchEffect,
+  watch,
   ref,
   PropType,
   CSSProperties,
@@ -18,7 +19,7 @@ export default defineComponent({
     ...treeNodePropsPass,
     // JSONLike data.
     data: {
-      type: Object as PropType<JSONDataType>,
+      type: [String, Number, Boolean, Array, Object] as PropType<JSONDataType>,
       default: null,
     },
     // Define the depth of the tree, nodes greater than this depth will not be expanded.
@@ -83,11 +84,9 @@ export default defineComponent({
 
     const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
 
-    const state = reactive({
-      translateY: 0,
-      visibleData: null as NodeDataType[] | null,
-      hiddenPaths: originFlatData.value.reduce((acc, item) => {
-        const depthComparison = item.level >= props.deep;
+    const initHiddenPaths = (deep: number) => {
+      return originFlatData.value.reduce((acc, item) => {
+        const depthComparison = item.level >= deep;
         const pathComparison = props.pathCollapsible?.(item as NodeDataType);
         if (
           (item.type === 'objectStart' || item.type === 'arrayStart') &&
@@ -99,7 +98,13 @@ export default defineComponent({
           };
         }
         return acc;
-      }, {}) as Record<string, 1>,
+      }, {}) as Record<string, 1>;
+    };
+
+    const state = reactive({
+      translateY: 0,
+      visibleData: null as NodeDataType[] | null,
+      hiddenPaths: initHiddenPaths(props.deep),
     });
 
     const flatData = computed(() => {
@@ -247,6 +252,13 @@ export default defineComponent({
       }
     });
 
+    watch(
+      () => props.deep,
+      val => {
+        if (val) state.hiddenPaths = initHiddenPaths(val);
+      },
+    );
+
     return () => {
       const renderNodeKey = props.renderNodeKey ?? slots.renderNodeKey;
       const renderNodeValue = props.renderNodeValue ?? slots.renderNodeValue;
@@ -271,6 +283,7 @@ export default defineComponent({
             editable={props.editable}
             editableTrigger={props.editableTrigger}
             showIcon={props.showIcon}
+            showKeyValueSpace={props.showKeyValueSpace}
             renderNodeKey={renderNodeKey}
             renderNodeValue={renderNodeValue}
             onNodeClick={handleNodeClick}

src/components/Tree/index.tsx

@@ -64,6 +64,10 @@ export const treeNodePropsPass = {
     type: Boolean,
     default: false,
   },
+  showKeyValueSpace: {
+    type: Boolean,
+    default: true,
+  },
   editable: {
     type: Boolean,
     default: false,
@@ -242,7 +246,7 @@ export default defineComponent({
           {node.key && (
             <span class="vjs-key">
               {renderKey()}
-              <span>:</span>
+              <span class="vjs-colon">{`:${props.showKeyValueSpace ? ' ' : ''}`}</span>
             </span>
           )}
 

src/components/TreeNode/index.tsx

@@ -43,6 +43,10 @@
   margin-right: 4px;
 }
 
+.@{css-prefix}-colon {
+  white-space: pre;
+}
+
 .@{css-prefix}-comment {
   color: @comment-color;
 }