chore: release 2.2.3 (#218)

* chore: remove commented test code.

* fix: show null and explicit undefined values

(cherry picked from commit 800c416)

* chore: run prettier

* fix: dynamic left padding on collapse elements. #200 (#216)

Co-authored-by: Csaba Tuncsik <csaba.tuncsik@gmail.com>

Author: leezng

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/Tree/index.tsx

@@ -297,7 +297,7 @@ export default defineComponent({
           style={
             props.showLineNumber
               ? {
-                  paddingLeft: `${Number(flatData.value.length.toString().length) * 12}px`,
+                  paddingLeft: `${Number(originFlatData.value.length.toString().length) * 12}px`,
                   ...props.style,
                 }
               : props.style

src/components/TreeNode/index.tsx

@@ -145,9 +145,13 @@ 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';
+      } else 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;
@@ -171,79 +171,3 @@ export function stringToAutoType(source: string): unknown {
   }
   return value;
 }
-
-// function jsonFlattenNext(data: JSONDataType, path = 'root'): JSONFlattenReturnType[] {
-//   function test(content: unknown, path: string, level: number, options: JSONFlattenOptions) {
-//     const { type = 'content', key, index, showComma, length } = options || {};
-//     return {
-//       content,
-//       level,
-//       key,
-//       index,
-//       path,
-//       showComma,
-//       length,
-//       type,
-//     };
-//   }
-
-//   let endObj = {} as Record<string, unknown>;
-//   let i = 0;
-//   let output: any = [data];
-//   let startArr = [];
-//   while (output.length || endObj[i]) {
-//     if (i && endObj[i]) {
-//       const k = endObj[i];
-//       delete endObj[i];
-//       startArr.push(k);
-//       i++;
-//     } else {
-//       const now = output.shift();
-//       if (Array.isArray(now)) {
-//         startArr.push(
-//           test('[', path, 0, {
-//             type: 'arrayStart',
-//             showComma: false,
-//             length: now.length,
-//           }),
-//         );
-//         output = now.concat(output);
-//         Object.keys(endObj)
-//           .sort((a, b) => Number(b) - Number(a))
-//           .forEach(id => {
-//             endObj[Number(id) + now.length + 1] = endObj[id];
-//             delete endObj[id];
-//           });
-//         endObj[i + now.length] = ']';
-//       } else if (typeof now === 'object') {
-//         startArr.push(
-//           test('{', path, 0, {
-//             type: 'objectStart',
-//             showComma: false,
-//             length: Object.keys(now).length,
-//           }),
-//         );
-//         output = Object.keys(now)
-//           .map(key => now[key])
-//           .concat(output);
-//         Object.keys(endObj)
-//           .sort((a, b) => Number(b) - Number(a))
-//           .forEach(id => {
-//             endObj[Number(id) + Object.keys(now).length + 1] = endObj[id];
-//             delete endObj[id];
-//           });
-//         endObj[i + Object.keys(now).length] = '}';
-//       } else {
-//         startArr.push(
-//           test(now, path, 0, {
-//             type: 'content',
-//             showComma: false,
-//             length: 0,
-//           }),
-//         );
-//       }
-//     }
-//   }
-
-//   return startArr as any;
-// }