Merge pull request #207 from cstuncsik/1.x

fix: show null and explicit undefined values

Author: leezng

example/Basic.vue

@@ -93,7 +93,9 @@ import VueJsonPretty from 'src';
 
 const defaultData = {
   status: 200,
-  error: '',
+  text: '',
+  error: null,
+  config: undefined,
   data: [
     {
       news_id: 51184,

example/Editable.vue

@@ -55,7 +55,9 @@ import VueJsonPretty from 'src';
 
 const defaultData = {
   status: 200,
-  error: '',
+  text: '',
+  error: null,
+  config: undefined,
   data: [
     {
       news_id: 51184,

example/SelectControl.vue

@@ -105,7 +105,9 @@ import VueJsonPretty from 'src';
 
 const defaultData = {
   status: 200,
-  error: '',
+  text: '',
+  error: null,
+  config: undefined,
   data: [
     {
       news_id: 51184,

example/VirtualList.vue

@@ -47,7 +47,9 @@ import VueJsonPretty from 'src';
 
 const defaultData = {
   status: 200,
-  error: '',
+  text: '',
+  error: null,
+  config: undefined,
   data: Array.from(Array(1000)).map((item, index) => ({
     news_id: index,
     title: 'iPhone X Review: Innovative future with real black technology',

src/components/TreeNode/index.vue

@@ -175,9 +175,11 @@ export default {
     },
 
     defaultValue() {
-      const str = (this.node?.content ?? '') + '';
-      const text = this.dataType === 'string' ? `"${str}"` : str;
-      return text;
+      let value = this.node?.content;
+      if(value === null || value === undefined) {
+        value += '';
+      }
+      return this.dataType === 'string' ? `"${value}"` : value
     },
   },
   methods: {

src/components/TreeNode/styles.less

@@ -55,6 +55,10 @@
   .gen-value-style(@color-null);
 }
 
+.@{css-prefix}-value-undefined {
+  .gen-value-style(@color-undefined);
+}
+
 .@{css-prefix}-value-number {
   .gen-value-style(@color-number);
 }

src/themes.less

@@ -6,12 +6,14 @@
 @color-info: #1d8ce0;
 @color-error: #ff4949;
 @color-success: #13ce66;
+@color-nil: #D55FDE;
 
 /* field values color */
 @color-string: @color-success;
 @color-number: @color-info;
 @color-boolean: @color-info;
-@color-null: @color-error;
+@color-null: @color-nil;
+@color-undefined: @color-nil;
 
 /* highlight */
 @highlight-bg-color: #e6f7ff;

src/utils/index.js

@@ -84,7 +84,7 @@ export function arrFlat(arr) {
 }
 
 export function cloneDeep(source, hash = new WeakMap()) {
-  if (source === null) return source;
+  if (source === null || source === undefined) return source;
   if (source instanceof Date) return new Date(source);
   if (source instanceof RegExp) return new RegExp(source);
   if (typeof source !== 'object') return source;