You've already forked random-web-tools
Add sql formatter tool
This commit is contained in:
@ -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>
|
||||
|
||||
|
Reference in New Issue
Block a user