aboutsummaryrefslogtreecommitdiff
path: root/src/tools/sql-prettify/sql-prettify.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/tools/sql-prettify/sql-prettify.vue')
-rw-r--r--src/tools/sql-prettify/sql-prettify.vue80
1 files changed, 39 insertions, 41 deletions
diff --git a/src/tools/sql-prettify/sql-prettify.vue b/src/tools/sql-prettify/sql-prettify.vue
index a0da8a7..049d6c8 100644
--- a/src/tools/sql-prettify/sql-prettify.vue
+++ b/src/tools/sql-prettify/sql-prettify.vue
@@ -19,47 +19,45 @@ const prettySQL = computed(() => formatSQL(rawSQL.value, config));
<template>
<div style="flex: 0 0 100%">
- <div mx-auto style="max-width: 600px" flex gap-2 :class="{ 'flex-col': styleStore.isSmallScreen }">
- <n-form-item label="Dialect" label-width="500" flex-1>
- <n-select
- v-model:value="config.language"
- :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' },
- ]"
- />
- </n-form-item>
- <n-form-item label="Keyword case" flex-1>
- <n-select
- v-model:value="config.keywordCase"
- :options="[
- { label: 'UPPERCASE', value: 'upper' },
- { label: 'lowercase', value: 'lower' },
- { label: 'Preserve', value: 'preserve' },
- ]"
- />
- </n-form-item>
- <n-form-item label="Indent style" flex-1>
- <n-select
- v-model:value="config.indentStyle"
- :options="[
- { label: 'Standard', value: 'standard' },
- { label: 'Tabular left', value: 'tabularLeft' },
- { label: 'Tabular right', value: 'tabularRight' },
- ]"
- />
- </n-form-item>
+ <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>