aboutsummaryrefslogtreecommitdiff
path: root/src/tools
diff options
context:
space:
mode:
Diffstat (limited to 'src/tools')
-rw-r--r--src/tools/bip39-generator/bip39-generator.vue12
-rw-r--r--src/tools/camera-recorder/camera-recorder.vue35
-rw-r--r--src/tools/date-time-converter/date-time-converter.vue6
-rw-r--r--src/tools/encryption/encryption.vue22
-rw-r--r--src/tools/eta-calculator/eta-calculator.vue16
-rw-r--r--src/tools/hash-text/hash-text.vue46
-rw-r--r--src/tools/hmac-generator/hmac-generator.vue60
-rw-r--r--src/tools/list-converter/list-converter.vue24
-rw-r--r--src/tools/meta-tag-generator/meta-tag-generator.vue8
-rw-r--r--src/tools/mime-types/mime-types.vue32
-rw-r--r--src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue4
-rw-r--r--src/tools/qr-code-generator/qr-code-generator.vue15
-rw-r--r--src/tools/sql-prettify/sql-prettify.vue80
13 files changed, 180 insertions, 180 deletions
diff --git a/src/tools/bip39-generator/bip39-generator.vue b/src/tools/bip39-generator/bip39-generator.vue
index 6c2af7b..03c1fe3 100644
--- a/src/tools/bip39-generator/bip39-generator.vue
+++ b/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
diff --git a/src/tools/camera-recorder/camera-recorder.vue b/src/tools/camera-recorder/camera-recorder.vue
index 19fe30b..34ce39a 100644
--- a/src/tools/camera-recorder/camera-recorder.vue
+++ b/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>
diff --git a/src/tools/date-time-converter/date-time-converter.vue b/src/tools/date-time-converter/date-time-converter.vue
index fcebce8..79f9218 100644
--- a/src/tools/date-time-converter/date-time-converter.vue
+++ b/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 />
diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
index a11a307..4a348f8 100644
--- a/src/tools/encryption/encryption.vue
+++ b/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
diff --git a/src/tools/eta-calculator/eta-calculator.vue b/src/tools/eta-calculator/eta-calculator.vue
index 8a45fc5..a81a77d 100644
--- a/src/tools/eta-calculator/eta-calculator.vue
+++ b/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>
diff --git a/src/tools/hash-text/hash-text.vue b/src/tools/hash-text/hash-text.vue
index d367407..6eae981 100644
--- a/src/tools/hash-text/hash-text.vue
+++ b/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>
diff --git a/src/tools/hmac-generator/hmac-generator.vue b/src/tools/hmac-generator/hmac-generator.vue
index 463e27b..fda3988 100644
--- a/src/tools/hmac-generator/hmac-generator.vue
+++ b/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>
diff --git a/src/tools/list-converter/list-converter.vue b/src/tools/list-converter/list-converter.vue
index 2e6d2b3..19dd30e 100644
--- a/src/tools/list-converter/list-converter.vue
+++ b/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"
diff --git a/src/tools/meta-tag-generator/meta-tag-generator.vue b/src/tools/meta-tag-generator/meta-tag-generator.vue
index de8a0c6..aafa779 100644
--- a/src/tools/meta-tag-generator/meta-tag-generator.vue
+++ b/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"
/>
diff --git a/src/tools/mime-types/mime-types.vue b/src/tools/mime-types/mime-types.vue
index 80eba60..3bd7611 100644
--- a/src/tools/mime-types/mime-types.vue
+++ b/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">
diff --git a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
index fde65f4..5bc6778 100644
--- a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
+++ b/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"
diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue
index f0c6ac2..8bc9f74 100644
--- a/src/tools/qr-code-generator/qr-code-generator.vue
+++ b/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>
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>
generated by cgit v1.2.3 (git 2.46.0) at 2025-10-01 05:59:09 +0000