Merge branch 'dev' into webpack4-dev

# Conflicts:
#	src/components/app.vue
#	src/components/simple-text.vue

Author: leezng

README.md

@@ -68,6 +68,7 @@ export default {
 | showSelectController | higher | whether to show the select controller at left | boolean | false |
 | selectOnClickNode | higher | whether to change selected value when click node | boolean | true |
 | highlightSelectedNode | higher | highlight current node when selected | boolean | true |
+| customValueFormatter | higher | a function that can return different html or strings to display for values in the data. If it returns null or empty, the default formatter is used  | Function | false |
 
 ## Events
 

example/App.vue

@@ -24,6 +24,14 @@
             <label>highlightMouseoverNode</label>
             <input type="checkbox" v-model="highlightMouseoverNode">
           </div>
+          <div>
+            <label>collapsedOnClickBrackets</label>
+            <input type="checkbox" v-model="collapsedOnClickBrackets">
+          </div>
+            <div>
+            <label>use custom link formatter</label>
+            <input type="checkbox" v-model="useCustomLinkFormatter">
+          </div>
           <div>
             <label>deep</label>
             <select v-model="deep">
@@ -43,6 +51,8 @@
           :show-length="showLength"
           :show-line="showLine"
           :highlight-mouseover-node="highlightMouseoverNode"
+          :collapsed-on-click-brackets="collapsedOnClickBrackets"
+          :custom-value-formatter="useCustomLinkFormatter ? customLinkFormatter : null"
           @click="handleClick">
         </vue-json-pretty>
       </div>
@@ -96,6 +106,10 @@
             <label>highlightSelectedNode</label>
             <input type="checkbox" v-model="highlightSelectedNode">
           </div>
+          <div>
+            <label>collapsedOnClickBrackets</label>
+            <input type="checkbox" v-model="collapsedOnClickBrackets">
+          </div>
           <div>
             <label>deep</label>
             <select v-model="deep">
@@ -124,6 +138,7 @@
           :show-length="showLength"
           :show-line="showLine"
           :select-on-click-node="selectOnClickNode"
+          :collapsed-on-click-brackets="collapsedOnClickBrackets"
           v-model="value"
           :path-selectable="((path, data) => typeof data !== 'number')"
           :selectable-type="selectableType"
@@ -159,7 +174,8 @@ export default {
         }, {
           news_id: 51183,
           title: 'Traffic paradise: How to design streets for people and unmanned vehicles in the future?',
-          source: 'Netease smart'
+          source: 'Netease smart',
+          link: 'http://netease.smart/traffic-paradise/1235'
         }, {
           news_id: 51182,
           title: 'Teslamask\'s American Business Relations: The government does not pay billions to build factories',
@@ -176,6 +192,8 @@ export default {
       highlightMouseoverNode: true,
       highlightSelectedNode: true,
       selectOnClickNode: true,
+      collapsedOnClickBrackets: true,
+      useCustomLinkFormatter: false,
       path: 'res',
       deep: 3,
       itemData: {},
@@ -217,6 +235,13 @@ export default {
     },
     handleChange (newVal, oldVal) {
       console.log('newVal: ', newVal, ' oldVal: ', oldVal)
+    },
+    customLinkFormatter(data) {
+      if (data.startsWith('http://')) {
+        return `<a style="color:red;" href="${data}">"${data}"</a>`;
+      } else {
+        return null;
+      }
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-pretty",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "A JSON tree view component that is easy to use and also supports data selection.",
   "author": "leezng <[email protected]>",
   "main": "vue-json-pretty.js",

src/components/app.vue

@@ -11,20 +11,10 @@
     }"
     @click="handleClick"
     @mouseover.stop="handleMouseover"
-    @mouseout.stop="handleMouseout"
-  >
+    @mouseout.stop="handleMouseout">
     <template v-if="showSelectController && selectable">
-      <vue-checkbox
-        v-if="isMultiple"
-        v-model="currentCheckboxVal"
-        @change="handleValueChange('checkbox')"
-      />
-      <vue-radio
-        v-else-if="isSingle"
-        v-model="model"
-        :path="path"
-        @change="handleValueChange('radio')"
-      />
+      <vue-checkbox v-if="isMultiple" v-model="currentCheckboxVal" @change="handleValueChange('checkbox')"></vue-checkbox>
+      <vue-radio v-else-if="isSingle" v-model="model" @change="handleValueChange('radio')" :path="path"></vue-radio>
     </template>
 
     <template v-if="Array.isArray(data) || isObject(data)">
@@ -33,24 +23,20 @@
         :visible.sync="visible"
         :data="data"
         :show-length="showLength"
-        :show-comma="notLastKey"
-      >
-        <span
-          v-if="currentDeep > 1 && !Array.isArray(parentData)"
-          class="vjs-key"
-        >{{ keyFormatter(currentKey) }}:</span>
+        :collapsed-on-click-brackets="collapsedOnClickBrackets"
+        :show-comma="notLastKey">
+        <span v-if="currentDeep > 1 && !Array.isArray(parentData)" class="vjs-key">{{ keyFormatter(currentKey) }}:</span>
       </brackets-left>
 
       <!-- 数据内容, data 为对象时, key 表示键名, 为数组时表示索引 -->
       <div
         v-for="(item, key) in data"
         v-show="visible"
-        :key="key"
         :class="{
           'vjs-tree__content': true,
           'has-line': showLine
         }"
-      >
+        :key="key">
         <vue-json-pretty
           v-model="model"
           :parent-data="data"
@@ -66,29 +52,32 @@
           :selectable-type="selectableType"
           :show-select-controller="showSelectController"
           :select-on-click-node="selectOnClickNode"
+          :collapsed-on-click-brackets="collapsedOnClickBrackets"
           :current-key="key"
           :current-deep="currentDeep + 1"
+          :custom-value-formatter="customValueFormatter"
           @click="handleItemClick"
-          @change="handleItemChange"
-        />
+          @change="handleItemChange">
+        </vue-json-pretty>
       </div>
 
       <!-- 右闭合 -->
       <brackets-right
         :visible.sync="visible"
         :data="data"
-        :show-comma="notLastKey"
-      />
+        :collapsed-on-click-brackets="collapsedOnClickBrackets"
+        :show-comma="notLastKey">
+      </brackets-right>
     </template>
 
     <simple-text
       v-else
+      :custom-value-formatter="customValueFormatter"
       :show-double-quotes="showDoubleQuotes"
       :show-comma="notLastKey"
       :parent-data="parentData"
       :data="data"
-      :current-key="currentKey"
-    >
+      :current-key="currentKey">
       <span
         v-if="parentData && currentKey && !Array.isArray(parentData)"
         class="vjs-key"
@@ -108,7 +97,7 @@
   import { getDataType } from 'src/utils'
 
   export default {
-    name: 'VueJsonPretty',
+    name: 'vue-json-pretty',
     components: {
       SimpleText,
       VueCheckbox,
@@ -119,10 +108,7 @@
     props: {
       /* outer props */
       // 当前树的数据
-      data: {
-        type: [String, Number, Boolean, Array, Object],
-        default: null
-      },
+      data: {},
       // 定义树的深度, 大于该深度的子树将不被展开
       deep: {
         type: Number,
@@ -183,24 +169,28 @@
         type: Boolean,
         default: true
       },
+      // collapsed control
+      collapsedOnClickBrackets: {
+        type: Boolean,
+        default: true
+      },
+      // custom formatter for values
+      customValueFormatter: {
+        type: Function,
+        default: null
+      },
       /* outer props */
 
       /* inner props */
       // 当前树的父级数据
-      parentData: {
-        type: [String, Number, Boolean, Array, Object],
-        default: null
-      },
+      parentData: {},
       // 当前树的深度, 以根节点作为0开始, 所以第一层树的深度为1, 递归逐次递增
       currentDeep: {
         type: Number,
         default: 1
       },
       // 当前树的数据 data 为数组时 currentKey 表示索引, 为对象时表示键名
-      currentKey: {
-        type: [Number, String],
-        default: ''
-      }
+      currentKey: [Number, String]
       /* outer props */
     },
     data () {
@@ -229,7 +219,6 @@
           let arr = Object.keys(this.parentData)
           return arr[arr.length - 1]
         }
-        return ''
       },
 
       // 是否不是最后一项
@@ -267,19 +256,6 @@
         return error ? 'When selectableType is not null, selectOnClickNode and showSelectController cannot be false at the same time, because this will cause the selection to fail.' : ''
       }
     },
-    watch: {
-      deep (newVal) {
-        this.visible = this.currentDeep <= newVal
-      },
-      propsError: {
-        handler (message) {
-          if (message) {
-            throw new Error(`[vue-json-pretty] ${message}`)
-          }
-        },
-        immediate: true
-      }
-    },
     methods: {
       handleValueChange (emitType) {
         if (this.isMultiple && (emitType === 'checkbox' || emitType === 'tree')) {
@@ -358,6 +334,19 @@
     //    因为是递归组件，因此错误只对外暴露一次，子组件的错误不再对外传递
     errorCaptured () {
       return false
+    },
+    watch: {
+      deep (newVal) {
+        this.visible = this.currentDeep <= newVal
+      },
+      propsError: {
+        handler (message) {
+          if (message) {
+            throw new Error(`[vue-json-pretty] ${message}`)
+          }
+        },
+        immediate: true
+      }
     }
   }
 </script>

src/components/simple-text.vue

@@ -1,9 +1,8 @@
 <template>
   <div>
-    <slot />
-    <span :class="`vjs-value vjs-value__${dataType}`">
-      {{ textFormatter(data) }}
-    </span>
+    <slot></slot>
+    <span v-if="customValueFormatter" :class="valueClass" v-html="customFormatter(data)"/>
+    <span v-else :class="valueClass">{{ defaultFormatter(data) }}</span>
   </div>
 </template>
 
@@ -13,24 +12,39 @@
   export default {
     props: {
       showDoubleQuotes: Boolean,
-      data: {
-        type: [String, Number, Boolean],
-        default: ''
-      },
-      showComma: Boolean
+      parentData: {},
+      data: {},
+      showComma: Boolean,
+      currentKey: [Number, String],
+      customValueFormatter: Function
     },
     computed: {
+      valueClass () {
+        return `vjs-value vjs-value__${this.dataType}`
+      },
+
       // 当前数据类型
       dataType () {
         return getDataType(this.data)
+      },
+
+      // 父级数据类型
+      parentDataType () {
+        return getDataType(this.parentData)
       }
     },
     methods: {
-      textFormatter (data) {
+      defaultFormatter (data) {
         let text = data + ''
         if (this.dataType === 'string') text = `"${text}"`
         if (this.showComma) text += ','
         return text
+      },
+
+      customFormatter (data) {
+        return this.customValueFormatter(
+          data, this.currentKey, this.parentData
+        ) || this.defaultFormatter(data)
       }
     }
   }

src/index.js

@@ -2,5 +2,5 @@ import App from './components/app.vue'
 import './assets/less/index.less'
 
 export default Object.assign({}, App, {
-  version: '1.6.2'
+  version: '1.6.4'
 })

src/mixins/brackets-mixin.js

@@ -7,15 +7,18 @@ export default {
     data: {
       required: true
     },
-    showComma: Boolean
+    showComma: Boolean,
+    collapsedOnClickBrackets: Boolean
   },
   computed: {
     dataVisiable: {
       get () {
         return this.visible
       },
       set (val) {
-        this.$emit('update:visible', val)
+        if (this.collapsedOnClickBrackets) {
+          this.$emit('update:visible', val)
+        }
       }
     }
   },