public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(base64-string-converter): fix validation, add option to watch additional refs for changes which interfere with validation rules

Browse Source
This commit is contained in:
Carsten Götzinger 2023-05-15 09:33:12 +02:00
parent 12f3697d53
commit d0e02456e1
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/tools/base64-string-converter/base64-string-converter.vue
View File

@ -38,6 +38,7 @@
placeholder="Your base64 string..."
rows="5"
:validation-rules="b64ValidationRules"
:validation-watch="b64ValidationWatch"
label="Base64 string to decode"
mb-5
/>
@ -68,16 +69,19 @@ const encodeUrlSafe = useStorage('base64-string-converter--encode-url-safe', fal
const decodeUrlSafe = useStorage('base64-string-converter--decode-url-safe', false);
const textInput = ref('');
const base64Output = computed(() => textToBase64(textInput.value, encodeUrlSafe.value));
const base64Output = computed(() => textToBase64(textInput.value, { makeUrlSafe: encodeUrlSafe.value }));
const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 string copied to the clipboard' });
const base64Input = ref('');
const textOutput = computed(() =>
withDefaultOnError(() => base64ToText(base64Input.value.trim(), decodeUrlSafe.value), ''),
withDefaultOnError(() => base64ToText(base64Input.value.trim(), { makeUrlSafe: decodeUrlSafe.value }), ''),
);
const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' });
const b64ValidationRules = [
{ message: 'Invalid base64 string', validator: (value: string) => isValidBase64(value.trim(), decodeUrlSafe.value) },
{
message: 'Invalid base64 string',
validator: (value: string) => isValidBase64(value.trim(), { makeUrlSafe: decodeUrlSafe.value }),
},
];
const b64ValidationWatch = [decodeUrlSafe];
</script>

4
src/ui/c-input-text/c-input-text.vue
View File

@ -61,6 +61,7 @@
<script lang="ts" setup>
import { generateRandomId } from '@/utils/random';
import { useValidation, type UseValidationRule } from '@/composable/validation';
import type { Ref } from 'vue';
import { useTheme } from './c-input-text.theme';
import { useAppTheme } from '../theme/themes';
@ -73,6 +74,7 @@ const props = withDefaults(
readonly?: boolean;
disabled?: boolean;
validationRules?: UseValidationRule<string>[];
validationWatch?: Ref<unknown>[];
validation?: ReturnType<typeof useValidation>;
labelPosition?: 'top' | 'left';
labelWidth?: string;
@ -97,6 +99,7 @@ const props = withDefaults(
readonly: false,
disabled: false,
validationRules: () => [],
validationWatch: undefined,
validation: undefined,
labelPosition: 'top',
labelWidth: 'auto',
@ -125,6 +128,7 @@ const validation =
useValidation({
rules: validationRules,
source: value,
watch: props.validationWatch,
});
const theme = useTheme();