diff options
| author |  Corentin THOMASSET <corentin.thomasset74@gmail.com>
| 2023-08-07 17:30:00 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-08-07 15:30:00 +0000 |
| commit | dfa1ba85548508e680f68200ea521be95c3eafe0 (patch) | |
| tree | c166b635e5eb006806bd40a88252d90735be9ca4 /src/tools/sql-prettify/sql-prettify.vue | |
| parent | 6498c9b0fa0427d567506dbd4a6e87d227b138d4 (diff) | |
| download | it-tools-dfa1ba85548508e680f68200ea521be95c3eafe0.tar.gz it-tools-dfa1ba85548508e680f68200ea521be95c3eafe0.tar.zst it-tools-dfa1ba85548508e680f68200ea521be95c3eafe0.zip | |
feat(ui): added c-select in the ui lib (#550)
* feat(ui): added c-select in the ui lib
* refactor(ui): switched n-select to c-select
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> |