diff options
20 files changed, 189 insertions, 235 deletions
diff --git a/components.d.ts b/components.d.ts index 6dbe552..d4a7a52 100644 --- a/components.d.ts +++ b/components.d.ts @@ -68,11 +68,13 @@ declare module '@vue/runtime-core' { IconMdiDownload: typeof import('~icons/mdi/download')['default'] IconMdiEye: typeof import('~icons/mdi/eye')['default'] IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default'] + IconMdiMagnify: typeof import('~icons/mdi/magnify')['default'] IconMdiPause: typeof import('~icons/mdi/pause')['default'] IconMdiPlay: typeof import('~icons/mdi/play')['default'] IconMdiRecord: typeof import('~icons/mdi/record')['default'] IconMdiRefresh: typeof import('~icons/mdi/refresh')['default'] IconMdiSearch: typeof import('~icons/mdi/search')['default'] + IconMdiSearchRound: typeof import('~icons/mdi/search-round')['default'] IconMdiVideo: typeof import('~icons/mdi/video')['default'] InputCopyable: typeof import('./src/components/InputCopyable.vue')['default'] IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default'] 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> diff --git a/src/ui/c-input-text/c-input-text.demo.vue b/src/ui/c-input-text/c-input-text.demo.vue index b027787..0181e7c 100644 --- a/src/ui/c-input-text/c-input-text.demo.vue +++ b/src/ui/c-input-text/c-input-text.demo.vue @@ -66,11 +66,14 @@ const validation = useValidation({ mb-2 /> - <c-input-text v-model:value="valueLong" multiline autosize mb-2 rows="5" /> - <c-input-text value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, est modi iusto repellendus fuga accusantium atque at magnam aliquam eum explicabo vero quia, nobis quasi quis! Earum amet quam a?" multiline clearable /> + + <h2>Autosize</h2> + + <c-input-text v-model:value="value" label="Autosize" rows="1" multiline autosize mb-2 /> + <c-input-text v-model:value="valueLong" label="Autosize monospace" rows="1" multiline autosize monospace mb-2 /> </template> diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue index 0f96b2a..b5f423d 100644 --- a/src/ui/c-input-text/c-input-text.vue +++ b/src/ui/c-input-text/c-input-text.vue @@ -82,12 +82,12 @@ const inputRef = ref<HTMLInputElement>(); const inputWrapperRef = ref<HTMLElement>(); watch( - value, - () => { + [value, autosize, multiline, inputWrapperRef, textareaRef], + () => nextTick(() => { if (props.multiline && autosize.value) { resizeTextarea(); } - }, + }), { immediate: true }, ); @@ -96,9 +96,9 @@ function resizeTextarea() { return; } - const { scrollHeight } = textareaRef.value; + const scrollHeight = textareaRef.value.scrollHeight + 2; - inputWrapperRef.value.style.height = `${scrollHeight + 2}px`; + inputWrapperRef.value.style.height = `${scrollHeight}px`; } const htmlInputType = computed(() => { |