refactor(validation): simplified validation system

src/composable/validation.ts

@@ -20,15 +20,25 @@ export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean {
   }
 }
 
+type ValidationAttrs = {
+  feedback: string;
+  validationStatus: string | undefined;
+};
+
 export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: UseValidationRule<T>[] }) {
   const state = reactive<{
     message: string;
     status: undefined | 'error';
     isValid: boolean;
+    attrs: ValidationAttrs;
   }>({
     message: '',
     status: undefined,
     isValid: false,
+    attrs: {
+      validationStatus: undefined,
+      feedback: '',
+    },
   });
 
   watch(
@@ -45,6 +55,8 @@ export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: Use
       }
 
       state.isValid = state.status !== 'error';
+      state.attrs.feedback = state.message;
+      state.attrs.validationStatus = state.status;
     },
     { immediate: true },
   );

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

@@ -20,11 +20,7 @@
   </n-card>
 
   <n-card title="Base64 to string">
-    <n-form-item
+    <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
-      label="Base64 string to decode"
-      :validation-status="b64Validation.status"
-      :feedback="b64Validation.message"
-    >
       <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
     </n-form-item>