Add sql formatter tool
This commit is contained in:
parent
a9e52bfea8
commit
2d4ec8c498
63
package-lock.json
generated
63
package-lock.json
generated
@ -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==",
|
||||
"dev": true
|
||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
|
||||
},
|
||||
"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",
|
||||
|
@ -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",
|
||||
|
@ -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;
|
||||
}
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
@ -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'),
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
61
src/views/SQLFormatter.vue
Normal file
61
src/views/SQLFormatter.vue
Normal file
@ -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>
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user