diff options
Diffstat (limited to 'src/tools/base64-string-converter/base64-string-converter.vue')
-rw-r--r-- | src/tools/base64-string-converter/base64-string-converter.vue | 75 |
1 files changed, 46 insertions, 29 deletions
diff --git a/src/tools/base64-string-converter/base64-string-converter.vue b/src/tools/base64-string-converter/base64-string-converter.vue index e97c884..0bcd966 100644 --- a/src/tools/base64-string-converter/base64-string-converter.vue +++ b/src/tools/base64-string-converter/base64-string-converter.vue @@ -1,42 +1,59 @@ <template> <c-card title="String to base64"> - <n-form-item label="String to encode"> - <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" /> - </n-form-item> - - <n-form-item label="Base64 of string"> - <n-input - :value="base64Output" - type="textarea" - readonly - placeholder="The base64 encoding of your string will be here" - rows="5" - /> - </n-form-item> - - <n-space justify="center"> + <c-input-text + v-model:value="textInput" + multiline + placeholder="Put your string here..." + rows="5" + label="String to encode" + raw-text + mb-5 + /> + + <c-input-text + label="Base64 of string" + :value="base64Output" + multiline + readonly + placeholder="The base64 encoding of your string will be here" + rows="5" + mb-5 + /> + + <div flex justify-center> <c-button @click="copyTextBase64()"> Copy base64 </c-button> - </n-space> + </div> </c-card> <c-card title="Base64 to string"> - <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs as any"> - <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" /> - </n-form-item> + <c-input-text + v-model:value="base64Input" + multiline + placeholder="Your base64 string..." + rows="5" + :validation-rules="b64ValidationRules" + label="Base64 string to decode" + mb-5 + /> - <n-form-item label="Decoded string"> - <n-input :value="textOutput" type="textarea" readonly placeholder="The decoded string will be here" rows="5" /> - </n-form-item> + <c-input-text + v-model:value="textOutput" + label="Decoded string" + placeholder="The decoded string will be here" + multiline + rows="5" + readonly + mb-5 + /> - <n-space justify="center"> + <div flex justify-center> <c-button @click="copyText()"> Copy decoded string </c-button> - </n-space> + </div> </c-card> </template> <script setup lang="ts"> import { useCopy } from '@/composable/copy'; -import { useValidation } from '@/composable/validation'; import { base64ToText, isValidBase64, textToBase64 } from '@/utils/base64'; import { withDefaultOnError } from '@/utils/defaults'; import { computed, ref } from 'vue'; @@ -48,8 +65,8 @@ const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 s const base64Input = ref(''); const textOutput = computed(() => withDefaultOnError(() => base64ToText(base64Input.value.trim()), '')); const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' }); -const b64Validation = useValidation({ - source: base64Input, - rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }], -}); + +const b64ValidationRules = [ + { message: 'Invalid base64 string', validator: (value: string) => isValidBase64(value.trim()) }, +]; </script> |