diff options
Diffstat (limited to 'src/tools')
17 files changed, 177 insertions, 228 deletions
diff --git a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue index cdc541b..c5591ee 100644 --- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue +++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue @@ -10,7 +10,7 @@ const dockerRun = ref( ); const conversionResult = computed(() => - withDefaultOnError(() => composerize(dockerRun.value), { yaml: '', messages: [] }), + withDefaultOnError(() => composerize(dockerRun.value.trim()), { yaml: '', messages: [] }), ); const dockerCompose = computed(() => conversionResult.value.yaml); const notImplemented = computed(() => @@ -30,15 +30,16 @@ const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, fi <template> <div> - <n-form-item label="Your docker run command:" :show-feedback="false"> - <n-input - v-model:value="dockerRun" - style="font-family: monospace" - type="textarea" - placeholder="Your docker run command to convert..." - rows="3" - /> - </n-form-item> + <c-input-text + v-model:value="dockerRun" + label="Your docker run command:" + style="font-family: monospace" + multiline + raw-text + monospace + placeholder="Your docker run command to convert..." + rows="3" + /> <n-divider /> diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue index bfd0972..a11a307 100644 --- a/src/tools/encryption/encryption.vue +++ b/src/tools/encryption/encryption.vue @@ -19,18 +19,13 @@ const decryptOutput = computed(() => <template> <c-card title="Encrypt"> <div flex gap-3> - <n-form-item label="Your text:" :show-feedback="false" flex-1> - <n-input - v-model:value="cypherInput" - type="textarea" - placeholder="The string to cypher" - :autosize="{ minRows: 4 }" - autocomplete="off" - autocorrect="off" - autocapitalize="off" - spellcheck="false" - /> - </n-form-item> + <c-input-text + v-model:value="cypherInput" + label="Your text:" + placeholder="The string to cypher" + rows="4" + multiline raw-text monospace autosize flex-1 + /> <div flex flex-1 flex-col gap-2> <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text /> @@ -42,34 +37,23 @@ const decryptOutput = computed(() => </n-form-item> </div> </div> - <n-form-item label="Your text encrypted:" :show-feedback="false" mt-5> - <n-input - :value="cypherOutput" - type="textarea" - placeholder="Your string hash" - :autosize="{ minRows: 2 }" - readonly - autocomplete="off" - autocorrect="off" - autocapitalize="off" - spellcheck="false" - /> - </n-form-item> + <c-input-text + label="Your text encrypted:" + :value="cypherOutput" + rows="3" + placeholder="Your string hash" + multiline monospace readonly autosize mt-5 + /> </c-card> <c-card title="Decrypt"> <div flex gap-3> - <n-form-item label="Your encrypted text:" :show-feedback="false" flex-1> - <n-input - v-model:value="decryptInput" - type="textarea" - placeholder="The string to cypher" - :autosize="{ minRows: 4 }" - autocomplete="off" - autocorrect="off" - autocapitalize="off" - spellcheck="false" - /> - </n-form-item> + <c-input-text + v-model:value="decryptInput" + label="Your encrypted text:" + placeholder="The string to cypher" + rows="4" + multiline raw-text monospace autosize flex-1 + /> <div flex flex-1 flex-col gap-2> <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text /> @@ -81,18 +65,12 @@ const decryptOutput = computed(() => </n-form-item> </div> </div> - <n-form-item label="Your decrypted text:" :show-feedback="false" mt-5> - <n-input - :value="decryptOutput" - type="textarea" - placeholder="Your string hash" - :autosize="{ minRows: 2 }" - readonly - autocomplete="off" - autocorrect="off" - autocapitalize="off" - spellcheck="false" - /> - </n-form-item> + <c-input-text + label="Your decrypted text:" + :value="decryptOutput" + placeholder="Your string hash" + rows="3" + multiline monospace readonly autosize mt-5 + /> </c-card> </template> diff --git a/src/tools/hash-text/hash-text.vue b/src/tools/hash-text/hash-text.vue index 415c352..d367407 100644 --- a/src/tools/hash-text/hash-text.vue +++ b/src/tools/hash-text/hash-text.vue @@ -37,7 +37,7 @@ const hashText = (algo: AlgoNames, value: string) => formatWithEncoding(algos[al <template> <div> <c-card> - <n-input v-model:value="clearText" type="textarea" placeholder="Your string to hash..." rows="3" /> + <c-input-text v-model:value="clearText" multiline raw-text placeholder="Your string to hash..." rows="3" autosize autofocus label="Your text to hash:" /> <n-divider /> diff --git a/src/tools/hmac-generator/hmac-generator.vue b/src/tools/hmac-generator/hmac-generator.vue index dcece9f..463e27b 100644 --- a/src/tools/hmac-generator/hmac-generator.vue +++ b/src/tools/hmac-generator/hmac-generator.vue @@ -46,13 +46,10 @@ const { copy } = useCopy({ source: hmac }); </script> <template> - <div> - <n-form-item label="Plain text to compute the hash"> - <n-input v-model:value="plainText" type="textarea" placeholder="Enter the text to compute the hash..." /> - </n-form-item> - <n-form-item label="Secret key"> - <n-input v-model:value="secret" placeholder="Enter the secret key..." /> - </n-form-item> + <div flex flex-col gap-4> + <c-input-text v-model:value="plainText" multiline raw-text placeholder="Plain text to compute the hash..." rows="3" autosize autofocus label="Plain text to compute the hash" /> + <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 @@ -86,9 +83,7 @@ const { copy } = useCopy({ source: hmac }); /> </n-form-item> </div> - <n-form-item label="HMAC of your text"> - <n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." /> - </n-form-item> + <input-copyable v-model:value="hmac" type="textarea" placeholder="The result of the HMAC..." label="HMAC of your text" /> <div flex justify-center> <c-button @click="copy()"> Copy HMAC diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue index dc44a0d..a0f6102 100644 --- a/src/tools/html-entities/html-entities.vue +++ b/src/tools/html-entities/html-entities.vue @@ -7,7 +7,7 @@ const escapeInput = ref('<title>IT Tool</title>'); const escapeOutput = computed(() => escape(escapeInput.value)); const { copy: copyEscaped } = useCopy({ source: escapeOutput }); -const unescapeInput = ref('<title>IT Tool</title'); +const unescapeInput = ref('<title>IT Tool</title>'); const unescapeOutput = computed(() => unescape(unescapeInput.value)); const { copy: copyUnescaped } = useCopy({ source: unescapeOutput }); </script> @@ -15,21 +15,24 @@ const { copy: copyUnescaped } = useCopy({ source: unescapeOutput }); <template> <c-card title="Escape html entities"> <n-form-item label="Your string :"> - <n-input + <c-input-text v-model:value="escapeInput" - type="textarea" + multiline placeholder="The string to escape" - :autosize="{ minRows: 2 }" + rows="3" + autosize + raw-text /> </n-form-item> <n-form-item label="Your string escaped :"> - <n-input - type="textarea" + <c-input-text + multiline readonly placeholder="Your string escaped" :value="escapeOutput" - :autosize="{ minRows: 2 }" + rows="3" + autosize /> </n-form-item> @@ -41,21 +44,24 @@ const { copy: copyUnescaped } = useCopy({ source: unescapeOutput }); </c-card> <c-card title="Unescape html entities"> <n-form-item label="Your escaped string :"> - <n-input + <c-input-text v-model:value="unescapeInput" - type="textarea" + multiline placeholder="The string to unescape" - :autosize="{ minRows: 2 }" + rows="3" + autosize + raw-text /> </n-form-item> <n-form-item label="Your string unescaped :"> - <n-input + <c-input-text :value="unescapeOutput" - type="textarea" + multiline readonly placeholder="Your string unescaped" - :autosize="{ minRows: 2 }" + rows="3" + autosize /> </n-form-item> diff --git a/src/tools/http-status-codes/http-status-codes.vue b/src/tools/http-status-codes/http-status-codes.vue index 0fb1125..84ab313 100644 --- a/src/tools/http-status-codes/http-status-codes.vue +++ b/src/tools/http-status-codes/http-status-codes.vue @@ -1,5 +1,4 @@ <script setup lang="ts"> -import { SearchRound } from '@vicons/material'; import { codesByCategories } from './http-status-codes.constants'; import { useFuzzySearch } from '@/composable/fuzzySearch'; @@ -24,33 +23,24 @@ const codesByCategoryFiltered = computed(() => { <template> <div> - <n-form-item :show-label="false"> - <n-input - v-model:value="search" - placeholder="Search http status..." - size="large" - autofocus - mb-10 - autocomplete="off" - autocorrect="off" - autocapitalize="off" - > - <template #prefix> - <n-icon :component="SearchRound" /> - </template> - </n-input> - </n-form-item> + <c-input-text + v-model:value="search" + placeholder="Search http status..." + autofocus raw-text mb-10 + /> <div v-for="{ codes, category } of codesByCategoryFiltered" :key="category" mb-8> - <n-h2> {{ category }} </n-h2> + <div mb-2 text-xl> + {{ category }} + </div> <c-card v-for="{ code, description, name, type } of codes" :key="code" mb-2> - <n-text strong block text-lg> + <div text-lg font-bold> {{ code }} {{ name }} - </n-text> - <n-text block depth="3"> + </div> + <div op-70> {{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }} - </n-text> + </div> </c-card> </div> </div> diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue index a4ff3fd..2445baa 100644 --- a/src/tools/integer-base-converter/integer-base-converter.vue +++ b/src/tools/integer-base-converter/integer-base-converter.vue @@ -1,11 +1,8 @@ <script setup lang="ts"> import InputCopyable from '../../components/InputCopyable.vue'; import { convertBase } from './integer-base-converter.model'; -import { useStyleStore } from '@/stores/style.store'; import { getErrorMessageIfThrows } from '@/utils/error'; -const styleStore = useStyleStore(); - const inputProps = { 'labelPosition': 'left', 'labelWidth': '170px', @@ -37,31 +34,11 @@ const error = computed(() => <template> <div> <c-card> - <div v-if="styleStore.isSmallScreen"> - <n-input-group> - <n-input-group-label style="flex: 0 0 120px"> - Input number: - </n-input-group-label> - <n-input v-model:value="input" w-full :status="error ? 'error' : undefined" /> - </n-input-group> - <n-input-group> - <n-input-group-label style="flex: 0 0 120px"> - Input base: - </n-input-group-label> - <n-input-number v-model:value="inputBase" max="64" min="2" w-full /> - </n-input-group> - </div> + <c-input-text v-model:value="input" label="Input number" placeholder="Put your number here (ex: 42)" label-position="left" label-width="110px" mb-2 label-align="right" /> - <n-input-group v-else> - <n-input-group-label style="flex: 0 0 120px"> - Input number: - </n-input-group-label> - <n-input v-model:value="input" :status="error ? 'error' : undefined" /> - <n-input-group-label style="flex: 0 0 120px"> - Input base: - </n-input-group-label> - <n-input-number v-model:value="inputBase" max="64" min="2" /> - </n-input-group> + <n-form-item label="Input base" label-placement="left" label-width="110" :show-feedback="false"> + <n-input-number v-model:value="inputBase" max="64" min="2" placeholder="Put your input base here (ex: 10)" w-full /> + </n-form-item> <n-alert v-if="error" style="margin-top: 25px" type="error"> {{ error }} diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue index ee6e0f3..d5b1168 100644 --- a/src/tools/jwt-parser/jwt-parser.vue +++ b/src/tools/jwt-parser/jwt-parser.vue @@ -30,9 +30,7 @@ const validation = useValidation({ <template> <c-card> - <n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status"> - <n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" /> - </n-form-item> + <c-input-text v-model:value="rawJwt" label="JWT to decode" :validation="validation" placeholder="Put your token here..." rows="5" multiline raw-text autofocus mb-3 /> <n-table v-if="validation.isValid"> <tbody> diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue index 552c597..713874a 100644 --- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue +++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue @@ -39,7 +39,7 @@ const { copy } = useCopy({ source: loremIpsumText, text: 'Lorem ipsum copied to <n-switch v-model:value="asHTML" /> </n-form-item> - <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize mt-5 /> + <c-input-text :value="loremIpsumText" multiline placeholder="Your lorem ipsum..." readonly mt-5 rows="5" /> <div mt-5 flex justify-center> <c-button autofocus @click="copy"> diff --git a/src/tools/math-evaluator/math-evaluator.vue b/src/tools/math-evaluator/math-evaluator.vue index 25e5129..3144a66 100644 --- a/src/tools/math-evaluator/math-evaluator.vue +++ b/src/tools/math-evaluator/math-evaluator.vue @@ -10,16 +10,12 @@ const result = computed(() => withDefaultOnError(() => evaluate(expression.value <template> <div> - <n-input + <c-input-text v-model:value="expression" rows="1" - type="textarea" + multiline placeholder="Your math expression (ex: 2*sqrt(6) )..." - size="large" - autocomplete="off" - autocorrect="off" - autocapitalize="off" - spellcheck="false" + raw-text /> <c-card v-if="result !== ''" title="Result " mt-5> diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue index 52de7d9..f0c6ac2 100644 --- a/src/tools/qr-code-generator/qr-code-generator.vue +++ b/src/tools/qr-code-generator/qr-code-generator.vue @@ -27,15 +27,18 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c <c-card> <n-grid x-gap="12" y-gap="12" cols="1 600:3"> <n-gi span="2"> + <c-input-text + v-model:value="text" + label-position="left" + label-width="130px" + label-align="right" + label="Text:" + multiline + rows="1" + placeholder="Your link or text..." + mb-6 + /> <n-form label-width="130" label-placement="left"> - <n-form-item label="Text:"> - <n-input - v-model:value="text" - type="textarea" - :autosize="{ minRows: 1 }" - placeholder="Your link or text..." - /> - </n-form-item> <n-form-item label="Foreground color:"> <n-color-picker v-model:value="foreground" :modes="['hex']" /> </n-form-item> diff --git a/src/tools/slugify-string/slugify-string.vue b/src/tools/slugify-string/slugify-string.vue index 760302a..9156b79 100644 --- a/src/tools/slugify-string/slugify-string.vue +++ b/src/tools/slugify-string/slugify-string.vue @@ -10,18 +10,9 @@ const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' }); <template> <div> - <n-form-item label="Your string to slugify"> - <n-input v-model:value="input" type="textarea" placeholder="Put your string here (ex: My file path)" /> - </n-form-item> + <c-input-text v-model:value="input" multiline placeholder="Put your string here (ex: My file path)" label="Your string to slugify" autofocus raw-text mb-5 /> - <n-form-item label="Your slug"> - <n-input - :value="slug" - type="textarea" - readonly - placeholder="You slug will be generated here (ex: my-file-path)" - /> - </n-form-item> + <c-input-text :value="slug" multiline readonly placeholder="You slug will be generated here (ex: my-file-path)" label="Your slug" mb-5 /> <div flex justify-center> <c-button :disabled="slug.length === 0" @click="copy"> diff --git a/src/tools/text-statistics/text-statistics.vue b/src/tools/text-statistics/text-statistics.vue index 3f63c72..6aa29d4 100644 --- a/src/tools/text-statistics/text-statistics.vue +++ b/src/tools/text-statistics/text-statistics.vue @@ -7,7 +7,7 @@ const text = ref(''); <template> <c-card> - <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" /> + <c-input-text v-model:value="text" multiline placeholder="Your text..." rows="5" /> <div mt-5 flex> <n-statistic label="Character count" :value="text.length" flex-1 /> diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue index 9c1c818..b69dec7 100644 --- a/src/tools/token-generator/token-generator.tool.vue +++ b/src/tools/token-generator/token-generator.tool.vue @@ -55,17 +55,14 @@ const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' <n-slider v-model:value="length" :step="1" :min="1" :max="512" /> </n-form-item> - <n-input + <c-input-text v-model:value="token" - style="text-align: center" - type="textarea" + multiline placeholder="The token..." - :autosize="{ minRows: 1 }" readonly - autocomplete="off" - autocorrect="off" - autocapitalize="off" - spellcheck="false" + rows="3" + autosize + class="token-display" /> <div mt-5 flex justify-center gap-3> @@ -79,3 +76,11 @@ const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' </c-card> </div> </template> + +<style scoped lang="less"> +::v-deep(.token-display) { + textarea { + text-align: center; + } +} +</style> diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue index 8b681ba..324693b 100644 --- a/src/tools/url-encoder/url-encoder.vue +++ b/src/tools/url-encoder/url-encoder.vue @@ -37,28 +37,27 @@ const { copy: copyDecoded } = useCopy({ source: decodeOutput, text: 'Decoded str <template> <c-card title="Encode"> - <n-form-item + <c-input-text + v-model:value="encodeInput" label="Your string :" - :feedback="encodedValidation.message" - :validation-status="encodedValidation.status" - > - <n-input - v-model:value="encodeInput" - type="textarea" - placeholder="The string to encode" - :autosize="{ minRows: 2 }" - /> - </n-form-item> + :validation="encodedValidation" + multiline + autosize + placeholder="The string to encode" + rows="2" + mb-3 + /> - <n-form-item label="Your string encoded :"> - <n-input - :value="encodeOutput" - type="textarea" - readonly - placeholder="Your string encoded" - :autosize="{ minRows: 2 }" - /> - </n-form-item> + <c-input-text + label="Your string encoded :" + :value="encodeOutput" + multiline + autosize + readonly + placeholder="Your string encoded" + rows="2" + mb-3 + /> <div flex justify-center> <c-button @click="copyEncoded"> @@ -67,28 +66,27 @@ const { copy: copyDecoded } = useCopy({ source: decodeOutput, text: 'Decoded str </div> </c-card> <c-card title="Decode"> - <n-form-item + <c-input-text + v-model:value="decodeInput" label="Your encoded string :" - :feedback="decodeValidation.message" - :validation-status="decodeValidation.status" - > - <n-input - v-model:value="decodeInput" - type="textarea" - placeholder="The string to decode" - :autosize="{ minRows: 2 }" - /> - </n-form-item> + :validation="decodeValidation" + multiline + autosize + placeholder="The string to decode" + rows="2" + mb-3 + /> - <n-form-item label="Your string decoded :"> - <n-input - :value="decodeOutput" - type="textarea" - readonly - placeholder="Your string decoded" - :autosize="{ minRows: 2 }" - /> - </n-form-item> + <c-input-text + label="Your string decoded :" + :value="decodeOutput" + multiline + autosize + readonly + placeholder="Your string decoded" + rows="2" + mb-3 + /> <div flex justify-center> <c-button @click="copyDecoded"> diff --git a/src/tools/user-agent-parser/user-agent-parser.vue b/src/tools/user-agent-parser/user-agent-parser.vue index a80c688..5a4ec27 100644 --- a/src/tools/user-agent-parser/user-agent-parser.vue +++ b/src/tools/user-agent-parser/user-agent-parser.vue @@ -103,15 +103,18 @@ const sections: UserAgentResultSection[] = [ <template> <div> - <n-form-item label="User agent string"> - <n-input - v-model:value="ua" - type="textarea" - placeholder="Put your user-agent here..." - clearable - :autosize="{ minRows: 2 }" - /> - </n-form-item> + <c-input-text + v-model:value="ua" + label="User agent string" + multiline + placeholder="Put your user-agent here..." + clearable + raw-text + rows="2" + autosize + monospace + mb-3 + /> <UserAgentResultCards :user-agent-info="userAgentInfo" :sections="sections" /> </div> diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue index f1265e1..a393781 100644 --- a/src/tools/uuid-generator/uuid-generator.vue +++ b/src/tools/uuid-generator/uuid-generator.vue @@ -19,18 +19,18 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard' <n-input-number v-model:value="count" :min="1" :max="50" placeholder="UUID quantity" /> </div> - <n-input + <c-input-text style="text-align: center; font-family: monospace" :value="uuids" - type="textarea" + multiline placeholder="Your uuids" - :autosize="{ minRows: 1 }" + autosize + rows="1" readonly - autocomplete="off" - autocorrect="off" - autocapitalize="off" - spellcheck="false" + raw-text + monospace my-3 + class="uuid-display" /> <div flex justify-center gap-3> @@ -43,3 +43,11 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard' </div> </div> </template> + +<style scoped lang="less"> +::v-deep(.uuid-display) { + textarea { + text-align: center; + } +} +</style> |