Improve Codacy score

Lionel Bijaoui · Lionel Bijaoui · commit 10fe409cc11f · 2018-10-01T16:46:36.000+02:00
diff --git a/mixins/utils.js b/mixins/utils.js
@@ -1,36 +1,7 @@
 export default {
 	computed: {
 		prettyModel() {
-			return this.prettyJSON(this.model);
-		}
-	},
-	methods: {
-		prettyJSON(json) {
-			if (json) {
-				json = JSON.stringify(json, null, 4);
-				json = json
-					.replace(/&/g, "&amp;")
-					.replace(/</g, "&lt;")
-					.replace(/>/g, "&gt;");
-				return json.replace(
-					/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
-					function(match) {
-						let cls = "number";
-						if (/^"/.test(match)) {
-							if (/:$/.test(match)) {
-								cls = "key";
-							} else {
-								cls = "string";
-							}
-						} else if (/true|false/.test(match)) {
-							cls = "boolean";
-						} else if (/null/.test(match)) {
-							cls = "null";
-						}
-						return "<span class='" + cls + "'>" + match + "</span>";
-					}
-				);
-			}
+			return JSON.stringify(this.model, null, 4);
 		}
 	}
 };
diff --git a/projects/basic/app.vue b/projects/basic/app.vue
@@ -8,7 +8,7 @@
 		</div>
 		<div class="row">
 			<div class="col-sm-12">
-				<pre v-if="model" v-html="prettyModel"></pre>
+				<pre v-highlightjs="prettyModel"><code class="json"></code></pre>
 			</div>
 		</div>
 	</div>
diff --git a/projects/basic/index.html b/projects/basic/index.html
@@ -7,6 +7,7 @@
 		<%= htmlWebpackPlugin.options.title %>
 	</title>
 	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+	<link rel="stylesheet" type="text/css" href="https://rawgit.com/highlightjs/highlight.js/master/src/styles/github.css">
 
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
diff --git a/projects/basic/main.js b/projects/basic/main.js
@@ -1,7 +1,11 @@
 import Vue from "vue";
-import VueFormGenerator from "../../../src";
+
+import VueFormGenerator from "@";
 Vue.use(VueFormGenerator);
 
+import VueHighlightJS from "vue-highlightjs";
+Vue.use(VueHighlightJS);
+
 import App from "./app.vue";
 
 new Vue({
diff --git a/projects/checklist/app.vue b/projects/checklist/app.vue
@@ -8,7 +8,7 @@
 		</div>
 		<div class="row">
 			<div class="col-sm-12">
-				<pre v-if="model" v-html="prettyModel"></pre>
+				<pre v-highlightjs="prettyModel"><code class="json"></code></pre>
 			</div>
 		</div>
 	</div>
diff --git a/projects/checklist/index.html b/projects/checklist/index.html
@@ -7,6 +7,7 @@
 		<%= htmlWebpackPlugin.options.title %>
 	</title>
 	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+	<link rel="stylesheet" type="text/css" href="https://rawgit.com/highlightjs/highlight.js/master/src/styles/github.css">
 </head>
 
 <body>
diff --git a/projects/checklist/main.js b/projects/checklist/main.js
@@ -1,7 +1,11 @@
 import Vue from "vue";
-import VueFormGenerator from "./../../../src";
+
+import VueFormGenerator from "@";
 Vue.use(VueFormGenerator);
 
+import VueHighlightJS from "vue-highlightjs";
+Vue.use(VueHighlightJS);
+
 import App from "./app.vue";
 
 new Vue({
diff --git a/projects/custom/app.vue b/projects/custom/app.vue
@@ -49,7 +49,7 @@
 		</div>
 		<div class="row">
 			<div class="col-sm-12">
-				<pre v-if="model" v-html="prettyModel"></pre>
+				<pre v-highlightjs="prettyModel"><code class="json"></code></pre>
 			</div>
 		</div>
 	</div>
diff --git a/projects/custom/index.html b/projects/custom/index.html
@@ -9,6 +9,7 @@
 	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
 	      crossorigin="anonymous">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
+	<link rel="stylesheet" type="text/css" href="https://rawgit.com/highlightjs/highlight.js/master/src/styles/github.css">
 </head>
 
 <body>
diff --git a/projects/custom/main.js b/projects/custom/main.js
@@ -1,7 +1,11 @@
 import Vue from "vue";
-import VueFormGenerator from "../../../src";
+
+import VueFormGenerator from "@";
 Vue.use(VueFormGenerator);
 
+import VueHighlightJS from "vue-highlightjs";
+Vue.use(VueHighlightJS);
+
 import App from "./app.vue";
 
 new Vue({
diff --git a/projects/full/app.vue b/projects/full/app.vue
@@ -27,7 +27,7 @@
 				</vue-form-generator>
 			</div>
 			<div class="col-md-6">
-				<pre v-if="model" v-html="prettyModel"></pre>
+				<pre v-highlightjs="prettyModel"><code class="json"></code></pre>
 			</div>
 		</div>
 	</div>
diff --git a/projects/full/index.html b/projects/full/index.html
@@ -6,6 +6,7 @@
 	<title>
 		<%= htmlWebpackPlugin.options.title %>
 	</title>
+	<link rel="stylesheet" type="text/css" href="https://rawgit.com/highlightjs/highlight.js/master/src/styles/github.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">
diff --git a/projects/full/main.js b/projects/full/main.js
@@ -1,7 +1,11 @@
 import Vue from "vue";
-import VueFormGenerator from "../../../src";
+
+import VueFormGenerator from "@";
 Vue.use(VueFormGenerator);
 
+import VueHighlightJS from "vue-highlightjs";
+Vue.use(VueHighlightJS);
+
 import App from "./app.vue";
 
 new Vue({
diff --git a/projects/grouping/app.vue b/projects/grouping/app.vue
@@ -8,7 +8,7 @@
 		</div>
 		<div class="row">
 			<div class="col-sm-12">
-				<pre v-if="model" v-html="prettyModel"></pre>
+				<pre v-highlightjs="prettyModel"><code class="json"></code></pre>
 			</div>
 		</div>
 	</div>
diff --git a/projects/grouping/index.html b/projects/grouping/index.html
@@ -7,6 +7,7 @@
 		<%= htmlWebpackPlugin.options.title %>
 	</title>
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
+	<link rel="stylesheet" type="text/css" href="https://rawgit.com/highlightjs/highlight.js/master/src/styles/github.css">
 </head>
 
 <body>
diff --git a/projects/grouping/main.js b/projects/grouping/main.js
@@ -1,7 +1,11 @@
 import Vue from "vue";
-import VueFormGenerator from "../../../src";
+
+import VueFormGenerator from "@";
 Vue.use(VueFormGenerator);
 
+import VueHighlightJS from "vue-highlightjs";
+Vue.use(VueHighlightJS);
+
 import App from "./app.vue";
 
 new Vue({
diff --git a/projects/multi/app.vue b/projects/multi/app.vue
@@ -13,7 +13,7 @@
 		</div>
 		<div class="row">
 			<div class="col-sm-12">
-				<pre v-if="model" v-html="prettyModel"></pre>
+				<pre v-highlightjs="prettyModel"><code class="json"></code></pre>
 			</div>
 		</div>
 	</div>
diff --git a/projects/multi/index.html b/projects/multi/index.html
@@ -7,6 +7,7 @@
 		<%= htmlWebpackPlugin.options.title %>
 	</title>
 	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+	<link rel="stylesheet" type="text/css" href="https://rawgit.com/highlightjs/highlight.js/master/src/styles/github.css">
 
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
diff --git a/projects/multi/main.js b/projects/multi/main.js
@@ -1,7 +1,11 @@
 import Vue from "vue";
-import VueFormGenerator from "../../../src";
+
+import VueFormGenerator from "@";
 Vue.use(VueFormGenerator);
 
+import VueHighlightJS from "vue-highlightjs";
+Vue.use(VueHighlightJS);
+
 import App from "./app.vue";
 
 new Vue({
diff --git a/projects/multiselect/app.vue b/projects/multiselect/app.vue
@@ -8,7 +8,7 @@
 		</div>
 		<div class="row">
 			<div class="col-sm-12">
-				<pre v-if="model" v-html="prettyModel"></pre>
+				<pre v-highlightjs="prettyModel"><code class="json"></code></pre>
 			</div>
 		</div>
 	</div>
diff --git a/projects/multiselect/index.html b/projects/multiselect/index.html
@@ -7,6 +7,7 @@
 		<%= htmlWebpackPlugin.options.title %>
 	</title>
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
+	<link rel="stylesheet" type="text/css" href="https://rawgit.com/highlightjs/highlight.js/master/src/styles/github.css">
 	<link rel="stylesheet" type="text/css" href="https://unpkg.com/vue-multiselect@2.0.8/dist/vue-multiselect.min.css">
 	<script type="text/javascript" src="https://unpkg.com/vue-multiselect@2.0.8/dist/vue-multiselect.min.js"></script>
 </head>
diff --git a/projects/multiselect/main.js b/projects/multiselect/main.js
@@ -1,7 +1,11 @@
 import Vue from "vue";
-import VueFormGenerator from "../../../src";
+
+import VueFormGenerator from "@";
 Vue.use(VueFormGenerator);
 
+import VueHighlightJS from "vue-highlightjs";
+Vue.use(VueHighlightJS);
+
 import App from "./app.vue";
 
 new Vue({
diff --git a/projects/picker/app.vue b/projects/picker/app.vue
@@ -8,7 +8,7 @@
 		</div>
 		<div class="row">
 			<div class="col-sm-12">
-				<pre v-if="model" v-html="prettyModel"></pre>
+				<pre v-highlightjs="prettyModel"><code class="json"></code></pre>
 			</div>
 		</div>
 	</div>
diff --git a/projects/picker/index.html b/projects/picker/index.html
@@ -7,6 +7,7 @@
 		<%= htmlWebpackPlugin.options.title %>
 	</title>
 
+	<link rel="stylesheet" type="text/css" href="https://rawgit.com/highlightjs/highlight.js/master/src/styles/github.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.css">
diff --git a/projects/picker/main.js b/projects/picker/main.js
@@ -1,7 +1,11 @@
 import Vue from "vue";
-import VueFormGenerator from "../../../src";
+
+import VueFormGenerator from "@";
 Vue.use(VueFormGenerator);
 
+import VueHighlightJS from "vue-highlightjs";
+Vue.use(VueHighlightJS);
+
 import App from "./app.vue";
 
 new Vue({
diff --git a/style.scss b/style.scss
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Open+Sans:300,600,700&subset=latin-ext");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600,700&subset=latin-ext");
 html {
 	font-family: "Open Sans";
 	font-size: 14px;
@@ -10,26 +10,6 @@ html {
 	box-sizing: border-box;
 }
 
-pre {
-	overflow: auto;
-
-	.string {
-		color: #885800;
-	}
-	.number {
-		color: blue;
-	}
-	.boolean {
-		color: magenta;
-	}
-	.null {
-		color: red;
-	}
-	.key {
-		color: green;
-	}
-}
-
 .control-buttons {
 	button {
 		margin: 0.2em 0.3em;
