fix: show null and explicit undefined values

(cherry picked from commit 800c416)

Author: cstuncsik

example/Basic.vue

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

example/Editable.vue

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

example/SelectControl.vue

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

example/VirtualList.vue

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

src/components/TreeNode/index.tsx

@@ -145,9 +145,14 @@ export default defineComponent({
     };
 
     const defaultValue = computed(() => {
-      const str = (props.node?.content ?? '') + '';
-      const text = dataType.value === 'string' ? `"${str}"` : str;
-      return text;
+      let value = props.node?.content;
+      if(value === null) {
+        value = 'null'
+      }
+      if(value === undefined) {
+        value = 'undefined'
+      }
+      return dataType.value === 'string' ? `"${value}"` : value + ''
     });
 
     const renderValue = () => {

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.ts

@@ -133,7 +133,7 @@ export function arrFlat<T extends unknown[]>(arr: T): unknown[] {
 }
 
 export function cloneDeep<T extends unknown>(source: T, hash = new WeakMap()): T {
-  if (source === null) return source;
+  if (source === null || source === undefined) return source;
   if (source instanceof Date) return new Date(source) as T;
   if (source instanceof RegExp) return new RegExp(source) as T;
   if (typeof source !== 'object') return source;