2bcb77a9f9
* fix(deps): update dependency sql-formatter to v12 * fix(sql-prettify): corrected types --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { type FormatOptionsWithLanguage, format as formatSQL } from 'sql-formatter';
|
|
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
|
import { useStyleStore } from '@/stores/style.store';
|
|
|
|
const inputElement = ref<HTMLElement>();
|
|
const styleStore = useStyleStore();
|
|
const config = reactive<FormatOptionsWithLanguage>({
|
|
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 style="max-width: 600px" :class="{ 'flex-col': styleStore.isSmallScreen }" mx-auto mb-5 flex gap-2>
|
|
<c-select
|
|
v-model:value="config.language"
|
|
flex-1
|
|
label="Dialect"
|
|
:options="[
|
|
{ label: 'GCP BigQuery', value: 'bigquery' },
|
|
{ label: 'IBM DB2', value: 'db2' },
|
|
{ label: 'Apache Hive', value: 'hive' },
|
|
{ label: 'MariaDB', value: 'mariadb' },
|
|
{ label: 'MySQL', value: 'mysql' },
|
|
{ label: 'Couchbase N1QL', value: 'n1ql' },
|
|
{ label: 'Oracle PL/SQL', value: 'plsql' },
|
|
{ label: 'PostgreSQL', value: 'postgresql' },
|
|
{ label: 'Amazon Redshift', value: 'redshift' },
|
|
{ label: 'Spark', value: 'spark' },
|
|
{ label: 'Standard SQL', value: 'sql' },
|
|
{ label: 'sqlite', value: 'sqlite' },
|
|
{ label: 'SQL Server Transact-SQL', value: 'tsql' },
|
|
]"
|
|
/>
|
|
<c-select
|
|
v-model:value="config.keywordCase" label="Keyword case"
|
|
flex-1
|
|
:options="[
|
|
{ label: 'UPPERCASE', value: 'upper' },
|
|
{ label: 'lowercase', value: 'lower' },
|
|
{ label: 'Preserve', value: 'preserve' },
|
|
]"
|
|
/>
|
|
<c-select
|
|
v-model:value="config.indentStyle" label="Indent style"
|
|
flex-1
|
|
:options="[
|
|
{ label: 'Standard', value: 'standard' },
|
|
{ label: 'Tabular left', value: 'tabularLeft' },
|
|
{ label: 'Tabular right', value: 'tabularRight' },
|
|
]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<n-form-item label="Your SQL query">
|
|
<c-input-text
|
|
ref="inputElement"
|
|
v-model:value="rawSQL"
|
|
placeholder="Put your SQL query here..."
|
|
rows="20"
|
|
multiline
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
spellcheck="false"
|
|
monospace
|
|
/>
|
|
</n-form-item>
|
|
<n-form-item label="Prettify version of your query">
|
|
<TextareaCopyable :value="prettySQL" language="sql" :follow-height-of="inputElement" />
|
|
</n-form-item>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.result-card {
|
|
position: relative;
|
|
.copy-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
</style>
|