Merge pull request #23 from leezng/dev

release 1.6.0

Author: leezng

.travis.yml

@@ -1,14 +1,13 @@
 language: node_js
 node_js:
-  - "7"
+  - "10"
 
 cache:
   directories:
     - "node_modules"
 
 install:
   - npm i
-  - npm install vue@2
 
 stages:
   - lint
@@ -24,15 +23,15 @@ jobs:
     - stage: gh_pages
       script: npm run build
       after_script:
-        - cd ./example-dist
-        - git init
-        - git remote add origin "https://${GH_TOKEN}@${GH_REF}"
-        - git checkout -b gh-pages
+        - git clone -b gh-pages "https://${GH_TOKEN}@${GH_REF}" gh-pages
+        - rm -r gh-pages/*
+        - cp -r example-dist/. gh-pages
+        - cd ./gh-pages
         - git config user.name "leezng"
         - git config user.email "im.leezng@gmail.com"
         - git add .
-        - git commit -m "update example page"
-        - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" gh-pages:gh-pages
+        - git commit -m "update gh-pages"
+        - git push --quiet "https://${GH_TOKEN}@${GH_REF}" gh-pages:gh-pages
     - stage: github_release
       script: echo "Deploying to GitHub releases ..."
       deploy:

README.md

@@ -13,6 +13,7 @@ A vue 2.x component for rendering JSON data as a tree structure.
 
 - [Demo](https://leezng.github.io/vue-json-pretty)
 - [Github](https://github.com/leezng/vue-json-pretty)
+- [NPM](https://www.npmjs.com/package/vue-json-pretty)
 - [中文文档](./README.zh-CN.md)
 
 ## Install
@@ -49,23 +50,28 @@ export default {
 ## Props
 
 - If you are using only the basic features (JSON pretty), just focus on the `base` properties.
-- If you are using advanced features (get item data), you need to focus on the `base` and `advanced` attributes.
+- If you are using advanced features (selected), you can use `base` and `advanced` attributes.
 
 | Attribute | Level | Description | Type | Default |
 |-------- |-------- |-------- |-------- | -------- |
 | data | basic | json data | JSON object | - |
 | deep | basic | data depth, data larger than this depth will not be expanded | number | Infinity |
 | showLength | basic | whether to show the length when closed | boolean | false |
+| showLine | basic | whether to show the line | boolean | true |
+| showDoubleQuotes | basic | whether to show doublequotes on key | boolean | true |
+| highlightMouseoverNode | basic | highlight current node when mouseover | boolean | false |
+| v-model | advanced | defines value when the tree can be selected | string, array | -, [] |
 | path | advanced | root data path | string | root |
 | pathChecked | advanced | defines the selected data path | array | [] |
 | pathSelectable | advanced | defines whether a data path supports selection | Function(itemPath, itemData) | - |
-| selectableType | advanced | defines the selected type, this feature is not supported by default | enum: both, checkbox, tree | - |
+| selectableType | advanced | defines the selected type, this feature is not supported by default | enum: -, multiple, single  | - |
+| showSelectController | advanced | whether to show the select controller at left | boolean | false |
+| selectOnClickNode | advanced | whether to change selected value when click node | boolean | true |
+| highlightSelectedNode | advanced | highlight current node when selected | boolean | true |
 
 ## Events
 
-- The following events are base on advanced features.
-
 | Event Name | Description | Callback Parameters |
 |---------- |-------- |---------- |
 | click  | triggered when a data item is clicked | (path, data) |
-
+| change  | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |

README.zh-CN.md

@@ -13,6 +13,7 @@
 
 - [Demo](https://leezng.github.io/vue-json-pretty)
 - [Github](https://github.com/leezng/vue-json-pretty)
+- [NPM](https://www.npmjs.com/package/vue-json-pretty)
 - [English Document](./README.md)
 
 ## 安装
@@ -37,6 +38,7 @@ npm install vue-json-pretty -save
 ```
 
 ```js
+// 更多用法请见demo页面
 import VueJsonPretty from 'vue-json-pretty'
 
 export default {
@@ -49,23 +51,28 @@ export default {
 ## Props
 
 - 若仅使用基础功能(JSON美化)，只需关注功能级别为 `基础` 的属性。
-- 若使用高级功能(数据层级的获取)，需关注 `基础` 与 `高级` 的属性。
+- 若使用高级功能(选择数据)，你可以同时使用 `基础` 与 `高级` 的属性。
 
 | 属性 | 级别 | 说明 | 类型 | 默认值 |
 |-------- |-------- |-------- |-------- | -------- |
 | data | 基础 | 待美化的源数据，注意不是 `JSON` 字符串 | `JSON` 对象 | - |
 | deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity |
 | showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false |
+| showLine | 基础 | 是否显示缩紧标识线 | boolean | true |
+| showDoubleQuotes | 基础 | 是否展示key名的双引号 | boolean | true |
+| highlightMouseoverNode | 基础 | 是否在mouseover的时候高亮 | boolean | false |
+| v-model | 高级 | 双向绑定选中的数据层级 | string, array | -, [] |
 | path | 高级 | 定义最顶层数据层级 | string | root |
 | pathChecked | 高级 | 定义哪些数据层级是已被选中的 | array | [] |
 | pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | Function(itemPath, itemData) | - |
-| selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | enum: both, checkbox, tree | - |
+| selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | enum: -, multiple, single | - |
+| showSelectController | 高级 | 是否展示选择控制器 | boolean | false |
+| selectOnClickNode | 高级 | 是否在点击节点的时候触发v-model双向绑定 | boolean | true |
+| highlightSelectedNode | 高级 | 是否高亮已选项 | boolean | true |
 
 ## Events
 
-- 若使用高级功能，下列事件才是有效的。
-
 | 事件名 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
 | click  | 点击某一个数据层级时触发的事件 | (path, data) |
-
+| change  | v-model改变的事件(仅在选择模式下可用) | (newVal, oldVal) |

example/App.vue

@@ -3,36 +3,75 @@
     <div class="example-box">
       <h2 class="title">EXAMPLE 1</h2>
       <div class="block">
-        <h3>JSON Input:</h3>
+        <h3>JSON:</h3>
         <textarea v-model="val"></textarea>
+
+        <h3>Options:</h3>
+        <div class="options">
+          <div>
+            <label>showLength</label>
+            <input type="checkbox" v-model="showLength">
+          </div>
+          <div>
+            <label>showLine</label>
+            <input type="checkbox" v-model="showLine">
+          </div>
+          <div>
+            <label>showDoubleQuotes</label>
+            <input type="checkbox" v-model="showDoubleQuotes">
+          </div>
+          <div>
+            <label>highlightMouseoverNode</label>
+            <input type="checkbox" v-model="highlightMouseoverNode">
+          </div>
+          <div>
+            <label>deep</label>
+            <select v-model="deep">
+              <option :value="2">2</option>
+              <option :value="3">3</option>
+              <option :value="4">4</option>
+            </select>
+          </div>
+        </div>
       </div>
       <div class="block">
-        <h3>JSON Tree:</h3>
+        <h3>vue-json-pretty:</h3>
         <vue-json-pretty
-          :deep="deep"
           :data="json"
-          :path="'res'">
+          :deep="deep"
+          :show-double-quotes="showDoubleQuotes"
+          :show-length="showLength"
+          :show-line="showLine"
+          :highlight-mouseover-node="highlightMouseoverNode"
+          @click="handleClick">
         </vue-json-pretty>
       </div>
     </div>
 
     <div class="example-box">
       <h2 class="title">EXAMPLE 2</h2>
       <div class="block">
-        <h3>JSON Input:</h3>
+        <h3>JSON:</h3>
         <textarea v-model="val"></textarea>
 
-        <h3>Options</h3>
+        <h3>Options:</h3>
         <div class="options">
           <div>
-            <label>selectable-type</label>
+            <label>selectableType</label>
             <select v-model="selectableType">
-              <option>-</option>
-              <option>both</option>
-              <option>checkbox</option>
-              <option>tree</option>
+              <option label="-"></option>
+              <option>single</option>
+              <option>multiple</option>
             </select>
           </div>
+          <div>
+            <label>showSelectController</label>
+            <input type="checkbox" v-model="showSelectController">
+          </div>
+          <div>
+            <label>selectOnClickNode</label>
+            <input type="checkbox" v-model="selectOnClickNode">
+          </div>
           <div>
             <label>path</label>
             <input type="text" v-model="path">
@@ -41,6 +80,22 @@
             <label>showLength</label>
             <input type="checkbox" v-model="showLength">
           </div>
+          <div>
+            <label>showLine</label>
+            <input type="checkbox" v-model="showLine">
+          </div>
+          <div>
+            <label>showDoubleQuotes</label>
+            <input type="checkbox" v-model="showDoubleQuotes">
+          </div>
+          <div>
+            <label>highlightMouseoverNode</label>
+            <input type="checkbox" v-model="highlightMouseoverNode">
+          </div>
+          <div>
+            <label>highlightSelectedNode</label>
+            <input type="checkbox" v-model="highlightSelectedNode">
+          </div>
           <div>
             <label>deep</label>
             <select v-model="deep">
@@ -50,22 +105,31 @@
             </select>
           </div>
         </div>
-
-        <h3>Latest Click Result:</h3>
+        <h3>v-model:</h3>
+        <div>{{value}}</div>
+        <h3>Current Click:</h3>
         <div>path: {{itemPath}}</div>
         <div>data: <pre>{{itemData}}</pre></div>
       </div>
       <div class="block">
-        <h3>JSON Tree:</h3>
+        <h3>vue-json-pretty:</h3>
         <vue-json-pretty
+          v-if="renderOK"
           :data="json"
           :path="path"
           :deep="deep"
+          :show-double-quotes="showDoubleQuotes"
+          :highlight-mouseover-node="highlightMouseoverNode"
+          :highlight-selected-node="highlightSelectedNode"
           :show-length="showLength"
-          :path-checked="['res', 'res.c']"
+          :show-line="showLine"
+          :select-on-click-node="selectOnClickNode"
+          v-model="value"
           :path-selectable="((path, data) => typeof data !== 'number')"
           :selectable-type="selectableType"
-          @click="handleClick">
+          :show-select-controller="showSelectController"
+          @click="handleClick(...arguments, 'complexTree')"
+          @change="handleChange">
         </vue-json-pretty>
       </div>
     </div>
@@ -83,6 +147,7 @@ export default {
   },
   data () {
     return {
+      renderOK: true,
       val: '',
       data: {
         status: 200,
@@ -99,20 +164,41 @@ export default {
           news_id: 51182,
           title: 'Teslamask\'s American Business Relations: The government does not pay billions to build factories',
           source: 'AI Finance',
-          members: ['Daniel, Mike, John']
+          members: ['Daniel', 'Mike', 'John']
         }]
       },
-      selectableType: 'both',
-      showLength: true,
+      value: 'res.error',
+      selectableType: 'single',
+      showSelectController: true,
+      showLength: false,
+      showLine: true,
+      showDoubleQuotes: true,
+      highlightMouseoverNode: true,
+      highlightSelectedNode: true,
+      selectOnClickNode: true,
       path: 'res',
-      deep: 4,
+      deep: 3,
       itemData: {},
       itemPath: ''
     }
   },
   created () {
     this.val = JSON.stringify(this.data)
   },
+  watch: {
+    selectableType (newVal) {
+      this.renderOK = false
+      if (newVal === 'single') {
+        this.value = 'res.error'
+      } else if (newVal === 'multiple') {
+        this.value = ['res.error', 'res.data[0].title']
+      }
+      // 重新渲染, 因为2中情况的v-model格式不同
+      this.$nextTick(() => {
+        this.renderOK = true
+      })
+    }
+  },
   computed: {
     json () {
       try {
@@ -124,10 +210,13 @@ export default {
     }
   },
   methods: {
-    handleClick (path, data, checked) {
-      console.log('click', path, data, checked)
+    handleClick (path, data, treeName = '') {
+      console.log('click: ', path, data, treeName)
       this.itemPath = path
       this.itemData = !data ? data + '' : data // 处理 data = null 的情况
+    },
+    handleChange (newVal, oldVal) {
+      console.log('newVal: ', newVal, ' oldVal: ', oldVal)
     }
   }
 }