Merge pull request #51 from Tommytrg/feat-add-number-classes

feat: allow add specific style for float and integer numbers

README.md

@@ -200,6 +200,8 @@ To create custom theme, (e.g. `my-awesome-json-theme`), in two easy steps:
     &.jv-boolean { color: #fc1e70 }
     &.jv-function { color: #067bca }
     &.jv-number { color: #fc1e70 }
+    &.jv-number-float { color: #fc1e70 }
+    &.jv-number-integer { color: #fc1e70 }
     &.jv-object { color: #111111 }
     &.jv-undefined { color: #e08331 }
     &.jv-string {

README_CN.md

@@ -182,6 +182,8 @@ import 'vue-json-viewer/style.css'
     &.jv-boolean { color: #fc1e70 }
     &.jv-function { color: #067bca }
     &.jv-number { color: #fc1e70 }
+    &.jv-number-float { color: #fc1e70 }
+    &.jv-number-integer { color: #fc1e70 }
     &.jv-object { color: #111111 }
     &.jv-undefined { color: #e08331 }
     &.jv-string {

lib/types/json-number.vue

@@ -9,10 +9,14 @@ export default {
     }
   },
   render (h, { props }) {
+    const isInteger = Number.isInteger(props.jsonValue)
+
     return h('span', {
       class: {
         'jv-item': true,
         'jv-number': true,
+        'jv-number-integer': isInteger,
+        'jv-number-float': !isInteger,
       },
       domProps: {
         innerText: props.jsonValue.toString()