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

src/tools/bip39-generator/bip39-generator.vue

@@ -84,12 +84,12 @@ const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase
   <div>
     <n-grid cols="3" x-gap="12">
       <n-gi span="1">
-        <n-form-item label="Language:">
-          <n-select
-            v-model:value="language"
-            :options="Object.keys(languages).map((label) => ({ label, value: label }))"
-          />
-        </n-form-item>
+        <c-select
+          v-model:value="language"
+          searchable
+          label="Language:"
+          :options="Object.keys(languages)"
+        />
       </n-gi>
       <n-gi span="2">
         <n-form-item

src/tools/camera-recorder/camera-recorder.vue

@@ -122,23 +122,24 @@ function downloadMedia({ type, value, createdAt }: Media) {
     </c-card>
 
     <c-card v-else>
-      <div flex gap-2>
-        <div flex-1>
-          <div>Video</div>
-          <n-select
-            v-model:value="currentCamera"
-            :options="cameras.map(({ deviceId, label }) => ({ value: deviceId, label }))"
-            placeholder="Select camera"
-          />
-        </div>
-        <div v-if="currentMicrophone && microphones.length > 0" flex-1>
-          <div>Audio</div>
-          <n-select
-            v-model:value="currentMicrophone"
-            :options="microphones.map(({ deviceId, label }) => ({ value: deviceId, label }))"
-            placeholder="Select microphone"
-          />
-        </div>
+      <div flex flex-col gap-2>
+        <c-select
+          v-model:value="currentCamera"
+          label-position="left"
+          label-width="60px"
+          label="Video:"
+          :options="cameras.map(({ deviceId, label }) => ({ value: deviceId, label }))"
+          placeholder="Select camera"
+        />
+        <c-select
+          v-if="currentMicrophone && microphones.length > 0"
+          v-model:value="currentMicrophone"
+          label="Audio:"
+          label-position="left"
+          label-width="60px"
+          :options="microphones.map(({ deviceId, label }) => ({ value: deviceId, label }))"
+          placeholder="Select microphone"
+        />
       </div>
 
       <div v-if="!isMediaStreamAvailable" mt-3 flex justify-center>

src/tools/date-time-converter/date-time-converter.vue

@@ -142,7 +142,7 @@ function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date
 
 <template>
   <div>
-    <n-input-group>
+    <div flex gap-2>
       <c-input-text
         v-model:value="inputDate"
         autofocus
@@ -153,13 +153,13 @@ function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date
         @update:value="onDateInputChanged"
       />
 
-      <n-select
+      <c-select
         v-model:value="formatIndex"
         style="flex: 0 0 170px"
         :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
         data-test-id="date-time-converter-format-select"
       />
-    </n-input-group>
+    </div>
 
     <n-divider />
 

src/tools/encryption/encryption.vue

@@ -29,12 +29,11 @@ const decryptOutput = computed(() =>
       <div flex flex-1 flex-col gap-2>
         <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text />
 
-        <n-form-item label="Encryption algorithm:" :show-feedback="false">
-          <n-select
-            v-model:value="cypherAlgo"
-            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-          />
-        </n-form-item>
+        <c-select
+          v-model:value="cypherAlgo"
+          label="Encryption algorithm:"
+          :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+        />
       </div>
     </div>
     <c-input-text
@@ -57,12 +56,11 @@ const decryptOutput = computed(() =>
       <div flex flex-1 flex-col gap-2>
         <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text />
 
-        <n-form-item label="Encryption algorithm:" :show-feedback="false">
-          <n-select
-            v-model:value="decryptAlgo"
-            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-          />
-        </n-form-item>
+        <c-select
+          v-model:value="decryptAlgo"
+          label="Encryption algorithm:"
+          :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+        />
       </div>
     </div>
     <c-input-text

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>
-      <n-input-group>
-        <n-input-number v-model:value="timeSpan" :min="1" />
-        <n-select
+      <div flex items-baseline gap-2>
+        <span ml-2>in</span>
+        <n-input-number v-model:value="timeSpan" min-w-130px :min="1" />
+        <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>
-    </n-form-item>
+      </div>
+    </div>
 
     <n-divider />
     <c-card mb-2>

src/tools/hash-text/hash-text.vue

@@ -41,29 +41,29 @@ const hashText = (algo: AlgoNames, value: string) => formatWithEncoding(algos[al
 
       <n-divider />
 
-      <n-form-item label="Digest encoding">
-        <n-select
-          v-model:value="encoding"
-          :options="[
-            {
-              label: 'Binary (base 2)',
-              value: 'Bin',
-            },
-            {
-              label: 'Hexadecimal (base 16)',
-              value: 'Hex',
-            },
-            {
-              label: 'Base64 (base 64)',
-              value: 'Base64',
-            },
-            {
-              label: 'Base64url (base 64 with url safe chars)',
-              value: 'Base64url',
-            },
-          ]"
-        />
-      </n-form-item>
+      <c-select
+        v-model:value="encoding"
+        mb-4
+        label="Digest encoding"
+        :options="[
+          {
+            label: 'Binary (base 2)',
+            value: 'Bin',
+          },
+          {
+            label: 'Hexadecimal (base 16)',
+            value: 'Hex',
+          },
+          {
+            label: 'Base64 (base 64)',
+            value: 'Base64',
+          },
+          {
+            label: 'Base64url (base 64 with url safe chars)',
+            value: 'Base64url',
+          },
+        ]"
+      />
 
       <div v-for="algo in algoNames" :key="algo" style="margin: 5px 0">
         <n-input-group>

src/tools/hmac-generator/hmac-generator.vue

@@ -51,37 +51,35 @@ const { copy } = useCopy({ source: hmac });
     <c-input-text v-model:value="secret" raw-text placeholder="Enter the secret key..." label="Secret key" clearable />
 
     <div flex gap-2>
-      <n-form-item label="Hashing function" flex-1>
-        <n-select
-          v-model:value="hashFunction"
-          placeholder="Select an hashing function..."
-          :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-        />
-      </n-form-item>
-      <n-form-item label="Output encoding" flex-1>
-        <n-select
-          v-model:value="encoding"
-          placeholder="Select the result encoding..."
-          :options="[
-            {
-              label: 'Binary (base 2)',
-              value: 'Bin',
-            },
-            {
-              label: 'Hexadecimal (base 16)',
-              value: 'Hex',
-            },
-            {
-              label: 'Base64 (base 64)',
-              value: 'Base64',
-            },
-            {
-              label: 'Base64-url (base 64 with url safe chars)',
-              value: 'Base64url',
-            },
-          ]"
-        />
-      </n-form-item>
+      <c-select
+        v-model:value="hashFunction" label="Hashing function"
+        flex-1
+        placeholder="Select an hashing function..."
+        :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+      />
+      <c-select
+        v-model:value="encoding" label="Output encoding"
+        flex-1
+        placeholder="Select the result encoding..."
+        :options="[
+          {
+            label: 'Binary (base 2)',
+            value: 'Bin',
+          },
+          {
+            label: 'Hexadecimal (base 16)',
+            value: 'Hex',
+          },
+          {
+            label: 'Base64 (base 64)',
+            value: 'Base64',
+          },
+          {
+            label: 'Base64-url (base 64 with url safe chars)',
+            value: 'Base64url',
+          },
+        ]"
+      />
     </div>
     <input-copyable v-model:value="hmac" type="textarea" placeholder="The result of the HMAC..." label="HMAC of your text" />
     <div flex justify-center>

src/tools/list-converter/list-converter.vue

@@ -61,17 +61,19 @@ function transformer(value: string) {
             </n-form-item>
           </div>
           <div flex-1>
-            <n-form-item label="Sort list" label-placement="left" label-width="120" :show-feedback="false" mb-2>
-              <n-select
-                v-model:value="conversionConfig.sortList"
-                :options="sortOrderOptions"
-                clearable
-                w-full
-                :disabled="conversionConfig.reverseList"
-                data-test-id="sortList"
-                placeholder="Sort alphabetically"
-              />
-            </n-form-item>
+            <c-select
+              v-model:value="conversionConfig.sortList"
+              label="Sort list"
+              label-position="left"
+              label-width="120px"
+              label-align="right"
+              mb-2
+              :options="sortOrderOptions"
+              w-full
+              :disabled="conversionConfig.reverseList"
+              data-test-id="sortList"
+              placeholder="Sort alphabetically"
+            />
 
             <c-input-text
               v-model:value="conversionConfig.separator"

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/mime-types/mime-types.vue

@@ -26,15 +26,13 @@ const mimeTypeFound = computed(() => (selectedExtension.value ? extensionToMimeT
     <div style="opacity: 0.8">
       Know which file extensions are associated to a mime-type
     </div>
-    <n-form-item>
-      <n-select
-        v-model:value="selectedMimeType"
-        filterable
-        :options="mimeToExtensionsOptions"
-        size="large"
-        placeholder="Select your mimetype here... (ex: application/pdf)"
-      />
-    </n-form-item>
+    <c-select
+      v-model:value="selectedMimeType"
+      searchable
+      my-4
+      :options="mimeToExtensionsOptions"
+      placeholder="Select your mimetype here... (ex: application/pdf)"
+    />
 
     <div v-if="extensionsFound.length > 0">
       Extensions of files with the <n-tag round :bordered="false">
@@ -62,15 +60,13 @@ const mimeTypeFound = computed(() => (selectedExtension.value ? extensionToMimeT
     <div style="opacity: 0.8">
       Know which mime type is associated to a file extension
     </div>
-    <n-form-item>
-      <n-select
-        v-model:value="selectedExtension"
-        filterable
-        :options="extensionToMimeTypeOptions"
-        size="large"
-        placeholder="Select your mimetype here... (ex: application/pdf)"
-      />
-    </n-form-item>
+    <c-select
+      v-model:value="selectedExtension"
+      searchable
+      my-4
+      :options="extensionToMimeTypeOptions"
+      placeholder="Select your mimetype here... (ex: application/pdf)"
+    />
 
     <div v-if="selectedExtension">
       Mime type associated to the extension <n-tag round :bordered="false">

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:">
-      <n-select v-model:value="defaultCountryCode" :options="countriesOptions" filterable />
-    </n-form-item>
+    <c-select v-model:value="defaultCountryCode" label="Default country code:" :options="countriesOptions" searchable mb-5 />
 
     <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:">
-            <n-select
-              v-model:value="errorCorrectionLevel"
-              :options="errorCorrectionLevels.map((value) => ({ label: value, value }))"
-            />
-          </n-form-item>
+          <c-select
+            v-model:value="errorCorrectionLevel"
+            label="Error resistance:"
+            label-position="left"
+            label-width="130px"
+            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 }">
-      <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>