From 848c777361cb8fd03797d008009473a5212932f9 Mon Sep 17 00:00:00 2001
From: tommytrg <tomastrg22@gmail.com>
Date: Thu, 23 Jul 2020 16:41:25 +0200
Subject: [PATCH] feat: allow add specific style for float and integer numbers

---
 README.md                 | 2 ++
 README_CN.md              | 2 ++
 lib/types/json-number.vue | 4 ++++
 3 files changed, 8 insertions(+)

diff --git a/README.md b/README.md
index b6c02c5..13e1c24 100644
--- a/README.md
+++ b/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 {
diff --git a/README_CN.md b/README_CN.md
index 803b309..aa02650 100644
--- a/README_CN.md
+++ b/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 {
diff --git a/lib/types/json-number.vue b/lib/types/json-number.vue
index 782067f..c614d42 100644
--- a/lib/types/json-number.vue
+++ b/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()