feat(base64-string-converter): switch to encode and decode url safe base64 strings (#392)

* feat(base64-string-converter): switch to encode and decode url safe

* feat(base64-string-converter): changes based on review comments, use config object instead of boolean argument.

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

1 files changed, 4 insertions, 0 deletions

diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue
index d1dd3c6..cd5f067 100644
--- a/src/ui/c-input-text/c-input-text.vue
+++ b/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();