Add sql formatter tool

package-lock.json

@@ -270,8 +270,7 @@
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-      "dev": true
     },
     "asynckit": {
       "version": "0.4.0",
@@ -420,6 +419,11 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -492,6 +496,11 @@
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
+    "discontinuous-range": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
+      "integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ=="
+    },
     "dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -971,6 +980,11 @@
       "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
       "dev": true
     },
+    "get-stdin": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
+      "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg=="
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -1211,6 +1225,11 @@
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
       "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
     },
+    "moo": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1228,6 +1247,17 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "nearley": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
+      "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
+      "requires": {
+        "commander": "^2.19.0",
+        "moo": "^0.5.0",
+        "railroad-diagrams": "^1.0.0",
+        "randexp": "0.4.6"
+      }
+    },
     "node-releases": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
@@ -1411,6 +1441,20 @@
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
     },
+    "railroad-diagrams": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
+      "integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A=="
+    },
+    "randexp": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
+      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
+      "requires": {
+        "discontinuous-range": "1.0.0",
+        "ret": "~0.1.10"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1441,6 +1485,11 @@
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true
     },
+    "ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
+    },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -1522,6 +1571,16 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "sql-formatter": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-15.0.2.tgz",
+      "integrity": "sha512-B8FTRc1dhb36lfuwSdiLhwrhkvT3PU/3es7YDPPQBOhbGHdXKlweAXTRS+QfCWk06ufAh118yFja6NcukBS4gg==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "get-stdin": "=8.0.0",
+        "nearley": "^2.20.1"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "mitt": "^3.0.0",
     "pinia": "^2.0.14",
     "postcss": "^8",
+    "sql-formatter": "^15.0.2",
     "tailwindcss": "^3",
     "vue": "^3.2.36",
     "vue-axios": "^3.4.1",

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>