Merge pull request #126 from leezng/dev

release

Author: Daniel

README.md

@@ -52,6 +52,12 @@ $ npm install vue-json-pretty --save
 $ yarn add vue-json-pretty
 ```
 
+## Use Vue3
+
+```bash
+$ npm install vue-json-pretty@next --save
+```
+
 ## Usage
 
 The CSS file is included separately and needs to be imported manually. You can either import CSS globally in your app (if supported by your framework) or directly from the component.

build/webpack.prod.conf.js

@@ -43,7 +43,7 @@ if (!isExampleEnv) {
     libraryTarget: 'umd',
   };
   webpackConfig.externals = {
-    vue: 'vue',
+    vue: 'Vue',
   };
   webpackConfig.plugins.push(
     // extract css into its own file

example/VirtualList.vue

@@ -6,6 +6,10 @@
 
       <h3>Options:</h3>
       <div class="options">
+        <div>
+          <label>virtualLines</label>
+          <input v-model="state.virtualLines" type="number" />
+        </div>
         <div>
           <label>showLine</label>
           <input v-model="state.showLine" type="checkbox" />
@@ -27,8 +31,9 @@
     <div class="block">
       <h3>vue-json-pretty(1000+ items):</h3>
       <vue-json-pretty
-        style="height: 200px"
+        style="height:400px"
         :virtual="true"
+        :virtualLines="+state.virtualLines"
         :data="state.data"
         :deep="state.deep"
         :show-line="state.showLine"
@@ -64,6 +69,7 @@ export default defineComponent({
       showLine: true,
       collapsedOnClickBrackets: true,
       deep: 3,
+      virtualLines: 20,
     });
 
     watch(

package-lock.json

@@ -30,54 +30,54 @@
     "url": "https://github.com/leezng/vue-json-pretty/issues"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-typescript": "^7.12.1",
-    "@typescript-eslint/eslint-plugin": "^4.7.0",
-    "@typescript-eslint/parser": "^4.7.0",
-    "@vue/babel-plugin-jsx": "^1.0.0-rc.4",
-    "@vue/compiler-sfc": "^3.0.4",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-typescript": "^7.14.5",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
+    "@vue/babel-plugin-jsx": "^1.0.6",
+    "@vue/compiler-sfc": "^3.1.2",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "autoprefixer": "^10.0.1",
-    "babel-loader": "^8.1.0",
-    "chalk": "^4.1.0",
+    "autoprefixer": "^10.2.6",
+    "babel-loader": "^8.2.2",
+    "chalk": "^4.1.1",
     "clean-webpack-plugin": "^3.0.0",
     "connect-history-api-fallback": "^1.3.0",
-    "copy-webpack-plugin": "^6.0.2",
-    "cross-env": "^7.0.2",
+    "copy-webpack-plugin": "^6.4.1",
+    "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
-    "css-loader": "^5.0.0",
-    "cssnano": "^4.1.10",
+    "css-loader": "^5.2.6",
+    "cssnano": "^4.1.11",
     "cypress": "^5.5.0",
-    "eslint": "^7.3.1",
-    "eslint-plugin-vue": "^7.1.0",
-    "eslint-webpack-plugin": "^2.3.0",
+    "eslint": "^7.29.0",
+    "eslint-plugin-vue": "^7.11.1",
+    "eslint-webpack-plugin": "^2.5.4",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.17.1",
     "file-loader": "^6.0.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
-    "html-webpack-plugin": "^4.3.0",
-    "http-proxy-middleware": "^1.0.6",
-    "less": "^3.11.3",
-    "less-loader": "^7.0.2",
-    "mini-css-extract-plugin": "^1.2.1",
-    "open": "^7.3.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "prettier": "^2.1.2",
+    "html-webpack-plugin": "^4.5.2",
+    "http-proxy-middleware": "^1.3.1",
+    "less": "^3.13.1",
+    "less-loader": "^7.3.0",
+    "mini-css-extract-plugin": "^1.6.0",
+    "open": "^7.4.2",
+    "optimize-css-assets-webpack-plugin": "^5.0.7",
+    "prettier": "^2.3.1",
     "selenium-server": "^3.0.1",
-    "semver": "^7.3.2",
+    "semver": "^7.3.5",
     "shelljs": "^0.8.4",
-    "typescript": "^4.0.5",
+    "typescript": "^4.3.4",
     "url-loader": "^4.1.0",
-    "vue": "^3.0.4",
-    "vue-loader": "^16.0.0-rc.1",
-    "vue-style-loader": "^4.1.2",
-    "webpack": "^5.3.0",
+    "vue": "^3.1.2",
+    "vue-loader": "^16.2.0",
+    "vue-style-loader": "^4.1.3",
+    "webpack": "^5.40.0",
     "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-dev-middleware": "^3.7.2",
+    "webpack-dev-middleware": "^3.7.3",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.2.0"
+    "webpack-merge": "^5.8.0"
   },
   "engines": {
     "node": ">= 10.0.0",
@@ -92,5 +92,8 @@
     "lib",
     "types"
   ],
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
   "dependencies": {}
 }

package.json

@@ -30,6 +30,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    //When using virtual scroll, set the number of items there can be
+    virtualLines: {
+      type: Number,
+      default: 10,
+    },
     // When using virtual scroll, define the height of each row.
     itemHeight: {
       type: Number,
@@ -111,7 +116,7 @@ export default defineComponent({
     const updateVisibleData = (flatDataValue: FlatDataType) => {
       if (props.virtual) {
         const treeRefValue = tree.value;
-        const visibleCount = 10;
+        const visibleCount = props.virtualLines;
         const scrollTop = (treeRefValue && treeRefValue.scrollTop) || 0;
         const scrollCount = Math.floor(scrollTop / props.itemHeight);
         let start =

src/components/Tree/index.tsx

@@ -35,8 +35,13 @@ export function jsonFlatten(
   level = 0,
   options?: JSONFlattenOptions,
 ): JSONFlattenReturnType[] {
-  const { key, index, type = 'content', showComma = false, length = 1 } =
-    options || ({} as JSONFlattenOptions);
+  const {
+    key,
+    index,
+    type = 'content',
+    showComma = false,
+    length = 1,
+  } = options || ({} as JSONFlattenOptions);
   const dataType = getDataType(data);
 
   if (dataType === 'array') {
@@ -49,7 +54,8 @@ export function jsonFlatten(
           type,
         }),
       )
-      .flat();
+      // No flat, for compatibility.
+      .reduce((acc, val) => acc.concat(val), []);
     return [
       jsonFlatten('[', path, level, {
         showComma: false,
@@ -81,7 +87,8 @@ export function jsonFlatten(
           },
         ),
       )
-      .flat();
+      // No flat, for compatibility.
+      .reduce((acc, val) => acc.concat(val), []);
     return [
       jsonFlatten('{', path, level, {
         showComma: false,