diff options
Diffstat (limited to 'src/tools/sql-prettify/sql-prettify.vue')
-rw-r--r-- | src/tools/sql-prettify/sql-prettify.vue | 80 |
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> |