1 files changed, 21 insertions, 21 deletions
diff --git a/src/tools/sql-prettify/sql-prettify.vue b/src/tools/sql-prettify/sql-prettify.vue
index b8d4aa4..2ee93da 100644
--- a/src/tools/sql-prettify/sql-prettify.vue
+++ b/src/tools/sql-prettify/sql-prettify.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+import { type FormatFnOptions, format as formatSQL } from 'sql-formatter';
+import { computed, reactive, ref } from 'vue';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { useStyleStore } from '@/stores/style.store';
+
+const inputElement = ref<HTMLElement>();
+const styleStore = useStyleStore();
+const config = reactive<Partial<FormatFnOptions>>({
+  keywordCase: 'upper',
+  useTabs: false,
+  language: 'sql',
+  indentStyle: 'standard',
+  tabulateAlias: true,
+});
+
+const rawSQL = ref('select field1,field2,field3 from my_table where my_condition;');
+const prettySQL = computed(() => formatSQL(rawSQL.value, config));
+</script>
+
 <template>
   <div style="flex: 0 0 100%">
     <div mx-auto style="max-width: 600px" flex gap-2 :class="{ 'flex-col': styleStore.isSmallScreen }">
@@ -58,30 +78,10 @@
     />
   </n-form-item>
   <n-form-item label="Prettify version of your query">
-    <textarea-copyable :value="prettySQL" language="sql" :follow-height-of="inputElement" />
+    <TextareaCopyable :value="prettySQL" language="sql" :follow-height-of="inputElement" />
   </n-form-item>
 </template>
 
-<script setup lang="ts">
-import TextareaCopyable from '@/components/TextareaCopyable.vue';
-import { useStyleStore } from '@/stores/style.store';
-import { format as formatSQL, type FormatFnOptions } from 'sql-formatter';
-import { computed, reactive, ref } from 'vue';
-
-const inputElement = ref<HTMLElement>();
-const styleStore = useStyleStore();
-const config = reactive<Partial<FormatFnOptions>>({
-  keywordCase: 'upper',
-  useTabs: false,
-  language: 'sql',
-  indentStyle: 'standard',
-  tabulateAlias: true,
-});
-
-const rawSQL = ref('select field1,field2,field3 from my_table where my_condition;');
-const prettySQL = computed(() => formatSQL(rawSQL.value, config));
-</script>
-
 <style lang="less" scoped>
 .result-card {
   position: relative;