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

src/tools/base64-string-converter/base64-string-converter.vue

@@ -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>

src/ui/c-input-text/c-input-text.vue

@@ -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();