refactor(ui): switched n-select to c-select

src/tools/eta-calculator/eta-calculator.vue

@@ -39,13 +39,15 @@ const endAt = computed(() =>
       </n-form-item>
     </div>
 
-    <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
+    <p>Amount of unit consumed by time span</p>
+    <div flex flex-col items-baseline gap-y-2 md:flex-row>
       <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
-      <span mx-3>in</span>
+      <div flex items-baseline gap-2>
-      <n-input-group>
+        <span ml-2>in</span>
-        <n-input-number v-model:value="timeSpan" :min="1" />
+        <n-input-number v-model:value="timeSpan" min-w-130px :min="1" />
-        <n-select
+        <c-select
           v-model:value="timeSpanUnitMultiplier"
+          min-w-130px
           :options="[
             { label: 'milliseconds', value: 1 },
             { label: 'seconds', value: 1000 },
@@ -54,8 +56,8 @@ const endAt = computed(() =>
             { label: 'days', value: 1000 * 60 * 60 * 24 },
           ]"
         />
-      </n-input-group>
+      </div>
-    </n-form-item>
+    </div>
 
     <n-divider />
     <c-card mb-2>

src/tools/meta-tag-generator/meta-tag-generator.vue

@@ -53,12 +53,15 @@ const metaTags = computed(() => {
 <template>
   <div>
     <div v-for="{ name, elements } of sections" :key="name" style="margin-bottom: 15px">
-      <n-form-item :label="name" :show-feedback="false" />
+      <div mb-5px>
+        {{ name }}
+      </div>
 
       <n-input-group v-for="{ key, type, label, placeholder, ...element } of elements" :key="key">
         <n-input-group-label style="flex: 0 0 110px">
           {{ label }}
         </n-input-group-label>
+
         <c-input-text v-if="type === 'input'" v-model:value="metadata[key]" :placeholder="placeholder" clearable />
         <n-dynamic-input
           v-else-if="type === 'input-multiple'"
@@ -69,9 +72,10 @@ const metaTags = computed(() => {
           :show-sort-button="true"
         />
 
-        <n-select
+        <c-select
           v-else-if="type === 'select'"
           v-model:value="metadata[key]"
+          w-full
           :placeholder="placeholder"
           :options="(element as OGSchemaTypeElementSelect).options"
         />

src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue

@@ -85,9 +85,7 @@ const countriesOptions = getCountries().map(code => ({
 
 <template>
   <div>
-    <n-form-item label="Default country code:">
+    <c-select v-model:value="defaultCountryCode" label="Default country code:" :options="countriesOptions" searchable mb-5 />
-      <n-select v-model:value="defaultCountryCode" :options="countriesOptions" filterable />
-    </n-form-item>
 
     <c-input-text
       v-model:value="rawPhone"

src/tools/qr-code-generator/qr-code-generator.vue

@@ -35,6 +35,7 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
           label="Text:"
           multiline
           rows="1"
+          autosize
           placeholder="Your link or text..."
           mb-6
         />
@@ -45,12 +46,14 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
           <n-form-item label="Background color:">
             <n-color-picker v-model:value="background" :modes="['hex']" />
           </n-form-item>
-          <n-form-item label="Error resistance:">
+          <c-select
-            <n-select
+            v-model:value="errorCorrectionLevel"
-              v-model:value="errorCorrectionLevel"
+            label="Error resistance:"
-              :options="errorCorrectionLevels.map((value) => ({ label: value, value }))"
+            label-position="left"
-            />
+            label-width="130px"
-          </n-form-item>
+            label-align="right"
+            :options="errorCorrectionLevels.map((value) => ({ label: value, value }))"
+          />
         </n-form>
       </n-gi>
       <n-gi>

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 }">
+    <div style="max-width: 600px" :class="{ 'flex-col': styleStore.isSmallScreen }" mx-auto mb-5 flex gap-2>
-      <n-form-item label="Dialect" label-width="500" flex-1>
+      <c-select
-        <n-select
+        v-model:value="config.language"
-          v-model:value="config.language"
+        flex-1
-          :options="[
+        label="Dialect"
-            { label: 'GCP BigQuery', value: 'bigquery' },
+        :options="[
-            { label: 'IBM DB2', value: 'db2' },
+          { label: 'GCP BigQuery', value: 'bigquery' },
-            { label: 'Apache Hive', value: 'hive' },
+          { label: 'IBM DB2', value: 'db2' },
-            { label: 'MariaDB', value: 'mariadb' },
+          { label: 'Apache Hive', value: 'hive' },
-            { label: 'MySQL', value: 'mysql' },
+          { label: 'MariaDB', value: 'mariadb' },
-            { label: 'Couchbase N1QL', value: 'n1ql' },
+          { label: 'MySQL', value: 'mysql' },
-            { label: 'Oracle PL/SQL', value: 'plsql' },
+          { label: 'Couchbase N1QL', value: 'n1ql' },
-            { label: 'PostgreSQL', value: 'postgresql' },
+          { label: 'Oracle PL/SQL', value: 'plsql' },
-            { label: 'Amazon Redshift', value: 'redshift' },
+          { label: 'PostgreSQL', value: 'postgresql' },
-            { label: 'Spark', value: 'spark' },
+          { label: 'Amazon Redshift', value: 'redshift' },
-            { label: 'Standard SQL', value: 'sql' },
+          { label: 'Spark', value: 'spark' },
-            { label: 'sqlite', value: 'sqlite' },
+          { label: 'Standard SQL', value: 'sql' },
-            { label: 'SQL Server Transact-SQL', value: 'tsql' },
+          { label: 'sqlite', value: 'sqlite' },
-          ]"
+          { label: 'SQL Server Transact-SQL', value: 'tsql' },
-        />
+        ]"
-      </n-form-item>
+      />
-      <n-form-item label="Keyword case" flex-1>
+      <c-select
-        <n-select
+        v-model:value="config.keywordCase" label="Keyword case"
-          v-model:value="config.keywordCase"
+        flex-1
-          :options="[
+        :options="[
-            { label: 'UPPERCASE', value: 'upper' },
+          { label: 'UPPERCASE', value: 'upper' },
-            { label: 'lowercase', value: 'lower' },
+          { label: 'lowercase', value: 'lower' },
-            { label: 'Preserve', value: 'preserve' },
+          { label: 'Preserve', value: 'preserve' },
-          ]"
+        ]"
-        />
+      />
-      </n-form-item>
+      <c-select
-      <n-form-item label="Indent style" flex-1>
+        v-model:value="config.indentStyle" label="Indent style"
-        <n-select
+        flex-1
-          v-model:value="config.indentStyle"
+        :options="[
-          :options="[
+          { label: 'Standard', value: 'standard' },
-            { label: 'Standard', value: 'standard' },
+          { label: 'Tabular left', value: 'tabularLeft' },
-            { label: 'Tabular left', value: 'tabularLeft' },
+          { label: 'Tabular right', value: 'tabularRight' },
-            { label: 'Tabular right', value: 'tabularRight' },
+        ]"
-          ]"
+      />
-        />
-      </n-form-item>
     </div>
   </div>