Add sql formatter tool

src/assets/app.scss

@@ -8,6 +8,7 @@
  */
 input[type=text], input[type=number], textarea {
 	@apply appearance-none border leading-tight focus:outline-none;
+	font-family: monospace;
 }
 
 input:disabled, textarea:disabled {
@@ -30,4 +31,11 @@ input:disabled, textarea:disabled {
 
 .input-group > label {
 	font-style: italic;
+}
+
+textarea[id=data] {
+	height: 200px;
+}
+textarea[id=result] {
+	height: 350px;
 }

src/components/Sidebar.vue

@@ -42,6 +42,7 @@ export default {
         'php_array_to_json': 'PHP array to Json',
       },
       'SQL': {
+        'sql_formatter': 'SQL formatter',
         'sql_split_in': 'SQL split IN',
       },
     };

src/router/index.js

@@ -69,6 +69,11 @@ const router = createRouter({
 			name: 'sql_split_in',
 			component: () => import('../views/SQLSplitInView.vue'),
 		},
+		{
+			path: '/sql_formatter',
+			name: 'sql_formatter',
+			component: () => import('../views/SQLFormatter.vue'),
+		},
 	],
 })
 

src/views/ExplainCrontab.vue

@@ -11,7 +11,7 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+    <textarea id="result" v-model="toolResult"></textarea>
   </div>
 </template>
 

src/views/FixRuEnKeyboard.vue

@@ -4,7 +4,7 @@
 
   <div class="input-group">
     <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+    <textarea id="data" v-model="toolData.data"></textarea>
   </div>
 
   <div class="input-group">
@@ -20,7 +20,7 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+    <textarea id="result" v-model="toolResult"></textarea>
   </div>
 </template>
 

src/views/PHPArrayToJson.vue

@@ -4,7 +4,7 @@
 
   <div class="input-group">
     <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" v-on:keyup="result" style="height: 150px"></textarea>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
   </div>
 
   <div class="input-group">
@@ -17,7 +17,7 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+    <textarea id="result" v-model="toolResult"></textarea>
   </div>
 </template>
 

src/views/SQLFormatter.vue

@@ -0,0 +1,61 @@
+<template>
+  <h2 class="tool-title">SQL formatter</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <textarea id="result" v-model="toolResult"></textarea>
+  </div>
+</template>
+
+<script>
+import { format } from 'sql-formatter';
+
+export default {
+  data() {
+    return {
+      toolData: {
+        data: '',
+        minifyJson: '',
+      },
+      toolResult: '',
+    };
+  },
+  methods: {
+    result() {
+      try {
+        this.toolResult = format(this.toolData.data, {
+          language: 'sql',
+          tabWidth: 4,
+          keywordCase: 'upper',
+          functionCase: 'upper',
+          identifierCase: 'lower',
+          linesBetweenQueries: 1,
+          paramTypes: {
+            custom: [
+              { regex: String.raw`\{\$?[\w\d\->\[\]]+\}` },
+              { regex: String.raw`\$[\w\d\->\[\]]+` },
+              { regex: String.raw`['"]\s?\..*\.\s?['"]` },
+            ],
+            positional: true,
+            named: [':', '@'],
+          },
+        });
+      } catch (e) {
+        this.toolResult = 'invalid syntax';
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/views/SQLSplitInView.vue

@@ -9,7 +9,7 @@
 
   <div class="input-group">
     <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+    <textarea id="data" v-model="toolData.data"></textarea>
   </div>
 
   <div class="input-group">
@@ -36,7 +36,7 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+    <textarea id="result" v-model="toolResult"></textarea>
   </div>
 </template>
 

src/views/StrLength.vue

@@ -4,7 +4,7 @@
 
   <div class="input-group">
     <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+    <textarea id="data" v-model="toolData.data"></textarea>
   </div>
 
   <div class="input-group">
@@ -22,7 +22,7 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+    <textarea id="result" v-model="toolResult"></textarea>
   </div>
 </template>
 

src/views/StrRemoveDuplicateLines.vue

@@ -4,14 +4,14 @@
 
   <div class="input-group">
     <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+    <textarea id="data" v-model="toolData.data"></textarea>
   </div>
 
   <hr class="mt-5 mb-5">
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+    <textarea id="result" v-model="toolResult"></textarea>
   </div>
 </template>
 

src/views/StrSortLines.vue

@@ -4,7 +4,7 @@
 
   <div class="input-group">
     <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+    <textarea id="data" v-model="toolData.data"></textarea>
   </div>
 
   <div class="input-group">
@@ -24,7 +24,7 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+    <textarea id="result" v-model="toolResult"></textarea>
   </div>
 </template>
 

src/views/StrToLowerUppper.vue

@@ -4,7 +4,7 @@
 
   <div class="input-group">
     <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+    <textarea id="data" v-model="toolData.data"></textarea>
   </div>
 
   <div class="input-group">
@@ -20,7 +20,7 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+    <textarea id="result" v-model="toolResult"></textarea>
   </div>
 </template>
 

src/views/StrToPHPArray.vue

@@ -4,7 +4,7 @@
 
   <div class="input-group">
     <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" v-on:keyup="result" style="height: 150px"></textarea>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
   </div>
 
   <div class="input-group">
@@ -20,7 +20,7 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+    <textarea id="result" v-model="toolResult"></textarea>
   </div>
 </template>
 

src/views/UrlEncodeDecode.vue

@@ -4,7 +4,7 @@
 
   <div class="input-group">
     <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+    <textarea id="data" v-model="toolData.data"></textarea>
   </div>
 
   <div class="input-group">
@@ -20,7 +20,7 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+    <textarea id="result" v-model="toolResult"></textarea>
   </div>
 </template>