Skip to content

Commit 5a4ac3d

Browse files
author
leezng
authored
Merge pull request #97 from leezng/dev
merge into msater
2 parents fe61561 + c420625 commit 5a4ac3d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+8769
-20136
lines changed

‎.babelrc‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
{
22
"presets": [
3-
["env", {
3+
["@babel/preset-env", {
44
"modules": false,
55
"targets": {
6-
"browsers": ["> 1%", "last 5 versions", "not ie <= 10"]
6+
"browsers": ["> 1%", "last 10 versions", "not ie <= 11"]
77
}
88
}],
9-
"stage-2"
9+
["@babel/preset-typescript", {
10+
"allExtensions": true,
11+
"isTSX": true
12+
}]
1013
],
11-
"plugins": ["transform-runtime"],
14+
"plugins": ["@babel/plugin-transform-runtime", "@vue/babel-plugin-jsx"],
1215
"env": {
1316
"test": {
14-
"presets": ["env", "stage-2"],
17+
"presets": ["@babel/preset-env"],
1518
"plugins": ["istanbul"]
1619
}
1720
}

‎.eslintrc.js‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
// http://eslint.org/docs/user-guide/configuring
2-
31
module.exports = {
2+
root: true,
3+
env: {
4+
node: true,
5+
},
46
extends: [
5-
'plugin:vue/recommended'
7+
'plugin:vue/vue3-essential',
8+
'eslint:recommended',
9+
'@vue/typescript/recommended',
10+
// '@vue/prettier',
11+
// '@vue/prettier/@typescript-eslint',
612
],
7-
// add your custom rules here
8-
'rules': {
9-
// allow debugger during development
10-
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
11-
}
12-
}
13+
parserOptions: {
14+
ecmaVersion: 2020,
15+
},
16+
rules: {
17+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
18+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
19+
// 'prettier/prettier': [1, { arrowParens: 'avoid' }],
20+
},
21+
};

‎.github/workflows/bump-version.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ name: Create Release
22

33
on:
44
push:
5-
branches:
6-
- "master"
5+
branches:
6+
- 'master'
77

88
jobs:
99
bump-version:
@@ -14,6 +14,8 @@ jobs:
1414

1515
- name: Automated Version Bump
1616
uses: phips28/[email protected]
17+
with:
18+
major-wording: MAJOR
1719
env:
1820
GITHUB_USER: ${{ secrets.CI_NAME }}
1921
GITHUB_EMAIL: ${{ secrets.CI_EMAIL }}

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ node_modules/
33
example-dist/
44
dist/
55
lib/
6-
react/
6+
types/
77
npm-debug.log*
88
yarn-debug.log*
99
yarn-error.log*

‎.postcssrc.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// https://github.com/michael-ciniawsky/postcss-load-config
22

33
module.exports = {
4-
"plugins": {
4+
plugins: {
55
// to edit target browsers: use "browserslist" field in package.json
6-
"autoprefixer": {}
7-
}
8-
}
6+
autoprefixer: {},
7+
},
8+
};

‎.prettierrc‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"indent": 2,
3+
"tabWidth": 2,
4+
"semi": true,
5+
"singleQuote": true,
6+
"trailingComma": "all",
7+
"printWidth": 100,
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"arrowParens": "avoid",
11+
"endOfLine": "lf",
12+
}

‎README.md‎

Lines changed: 70 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,55 @@
1-
# vue-json-pretty
1+
<p align="center">
2+
<a href="https://github.com/leezng/vue-json-pretty">
3+
<img width="200" src="./static/logo.svg">
4+
</a>
5+
</p>
6+
7+
<h1 align="center">
8+
<a href="https://github.com/leezng/vue-json-pretty" target="_blank">Vue Json Pretty</a>
9+
</h1>
10+
11+
<div align="center">
12+
13+
<p>A Vue component for rendering JSON data as a tree structure.</p>
14+
<p>Now it supports Vue3 at least. If you still use Vue2, see <a href="https://github.com/leezng/vue-json-pretty/tree/1.x">1.x</a>.</p>
215

316
[![Build Status](https://travis-ci.org/leezng/vue-json-pretty.svg?branch=master)](https://travis-ci.org/leezng/vue-json-pretty)
417
[![npm package](https://img.shields.io/npm/v/vue-json-pretty.svg)](https://www.npmjs.org/package/vue-json-pretty)
518
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/leezng/vue-json-pretty/blob/master/LICENSE)
19+
[![Sizes](https://img.shields.io/bundlephobia/min/vue-json-pretty)](https://bundlephobia.com/result?p=vue-json-pretty)
20+
[![NPM downloads](http://img.shields.io/npm/dm/vue-json-pretty.svg?style=flat-square)](https://www.npmtrends.com/vue-json-pretty)
21+
[![Issues](https://img.shields.io/github/issues-raw/leezng/vue-json-pretty)](https://github.com/leezng/vue-json-pretty/issues)
22+
23+
</div>
24+
25+
[![](./static/screenshot.png)](https://github.com/leezng/vue-json-pretty)
26+
27+
English | [简体中文](./README.zh_CN.md)
628

7-
A vue 2.x component for rendering JSON data as a tree structure.
29+
## Features
830

9-
- As a JSON Formatter
10-
- Get item data from JSON
31+
- As a JSON Formatter.
32+
- Get item data from JSON.
33+
- Written in TypeScript with predictable static types.
34+
- Support big data.
1135

12-
## Links
36+
## Environment Support
1337

14-
- [Demo](https://leezng.github.io/vue-json-pretty)
15-
- [Github](https://github.com/leezng/vue-json-pretty)
16-
- [NPM](https://www.npmjs.com/package/vue-json-pretty)
17-
- [中文文档](./README.zh-CN.md)
38+
- Modern browsers, Electron and Internet Explorer 11 (with polyfills)
39+
- Server-side Rendering
1840

19-
## Install
41+
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
42+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
43+
| IE11, Edge | last 10 versions | last 10 versions | last 10 versions | last 2 versions |
44+
45+
## Using NPM or Yarn
2046

2147
```bash
22-
npm install vue-json-pretty --save
48+
$ npm install vue-json-pretty --save
49+
```
50+
51+
```bash
52+
$ yarn add vue-json-pretty
2353
```
2454

2555
## Usage
@@ -29,28 +59,23 @@ The CSS file is included separately and needs to be imported manually. You can e
2959
```vue
3060
<template>
3161
<div>
32-
...
33-
<vue-json-pretty
34-
:path="'res'"
35-
:data="{ key: 'value' }"
36-
@click="handleClick">
37-
</vue-json-pretty>
62+
<vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick"> </vue-json-pretty>
3863
</div>
3964
</template>
4065
4166
<script>
42-
import VueJsonPretty from 'vue-json-pretty'
43-
import 'vue-json-pretty/lib/styles.css'
67+
import VueJsonPretty from 'vue-json-pretty';
68+
import 'vue-json-pretty/lib/styles.css';
4469
4570
export default {
4671
components: {
47-
VueJsonPretty
48-
}
49-
}
72+
VueJsonPretty,
73+
},
74+
};
5075
</script>
5176
```
5277

53-
## Nuxt.js
78+
## Use Nuxt.js
5479

5580
1. In `plugins/vue-json-pretty.js`
5681

@@ -77,31 +102,31 @@ plugins: [
77102
- If you are using only the normal features (JSON pretty), just focus on the `base` properties.
78103
- If you are using higher features (Get data), you can use `base` and `higher` attributes.
79104

80-
| Attribute | Level | Description | Type | Default |
81-
|-------- |-------- |-------- |-------- | -------- |
82-
| data | normal | json data | JSON object | - |
83-
| deep | normal | data depth, data larger than this depth will not be expanded | number | Infinity |
84-
| showLength | normal | whether to show the length when closed | boolean | false |
85-
| showLine | normal | whether to show the line | boolean | true |
86-
| showDoubleQuotes | normal | whether to show doublequotes on key | boolean | true |
87-
| highlightMouseoverNode | normal | highlight current node when mouseover | boolean | false |
88-
| v-model | higher | defines value when the tree can be selected | string, array | -, [] |
89-
| path | higher | root data path | string | root |
90-
| pathChecked | higher | defines the selected data path | array | [] |
91-
| pathSelectable | higher | defines whether a data path supports selection | Function(itemPath, itemData) | - |
92-
| selectableType | higher | defines the selected type, this feature is not supported by default | enum: -, multiple, single | - |
93-
| showSelectController | higher | whether to show the select controller at left | boolean | false |
94-
| selectOnClickNode | higher | whether to change selected value when click node | boolean | true |
95-
| highlightSelectedNode | higher | highlight current node when selected | boolean | true |
96-
| collapsedOnClickBrackets | higher | collapsed control | boolean | true |
97-
| customValueFormatter | higher | a function that can return different html or strings to display for values in the data. | Function(data, key, parent, defaultFormatted) | - |
105+
| Attribute | Level | Description | Type | Default |
106+
| ------------------------ | ------ | --------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- |
107+
| data | normal | JSON data | JSON object | - |
108+
| deep | normal | Data depth, data larger than this depth will not be expanded | number | Infinity |
109+
| showLength | normal | Whether to show the length when closed | boolean | false |
110+
| showLine | normal | Whether to show the line | boolean | true |
111+
| showDoubleQuotes | normal | Whether to show doublequotes on key | boolean | true |
112+
| virtual | normal | Whether to use virtual scrolling, usually used for big data | boolean | false |
113+
| itemHeight | normal | The height of each item when using virtual scrolling | number | auto |
114+
| v-model | higher | Defines value when the tree can be selected | string, array | - |
115+
| path | higher | Root data path | string | root |
116+
| pathSelectable | higher | Defines whether a data path supports selection | function(path, content) | - |
117+
| selectableType | higher | Defines the selected type, this feature is not supported by default | multiple, single | - |
118+
| showSelectController | higher | Whether to show the select controller at left | boolean | false |
119+
| selectOnClickNode | higher | Whether to change selected value when click node | boolean | true |
120+
| highlightSelectedNode | higher | Highlight current node when selected | boolean | true |
121+
| collapsedOnClickBrackets | higher | Collapsed control | boolean | true |
122+
| customValueFormatter | higher | A function that can return different html or strings to display for values in the data. | function(data, key, path, defaultFormatResult) | - |
98123

99124
## Events
100125

101-
| Event Name | Description | Callback Parameters |
102-
|---------- |-------- |---------- |
103-
| click | triggered when a data item is clicked | (path, data) |
104-
| change | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |
126+
| Event Name | Description | Callback Parameters |
127+
| ---------- | ---------------------------------------------------------------------------- | ------------------- |
128+
| click | triggered when a data item is clicked | (path, data) |
129+
| change | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |
105130

106131
## Major Contributors
107132

‎README.zh-CN.md‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

0 commit comments

Comments
 (0)