feat: Add blurred state to devtools (#229)

* chore: include blurred state in the devtools

* chore: add changeset

Author: genu

.changeset/fast-nights-peel.md

@@ -0,0 +1,5 @@
+---
+'@formwerk/devtools': minor
+---
+
+Enhance the devtools to include blurred state at the form and field level

packages/devtools/src/helpers.ts

@@ -29,6 +29,10 @@ export function buildFieldState(state: FieldState | PathState): CustomInspectorS
         key: 'touched',
         value: state.touched,
       },
+      {
+        key: 'blurred',
+        value: state.blurred,
+      },
       {
         key: 'dirty',
         value: state.dirty,
@@ -56,6 +60,10 @@ export function buildFormState(form: FormState): CustomInspectorState {
         key: 'touched',
         value: form.touched,
       },
+      {
+        key: 'blurred',
+        value: form.blurred,
+      },
       {
         key: 'dirty',
         value: form.dirty,
@@ -152,6 +160,7 @@ export function decodeNode(nodeId: string): NodeState | null {
         path: idObject.fp,
         formId: idObject.f,
         touched: form.isTouched(idObject.fp),
+        blurred: form.isBlurred(idObject.fp),
         dirty: form.isDirty(idObject.fp),
         valid: form.isValid(idObject.fp),
         errors: form.getErrors(idObject.fp),
@@ -278,6 +287,7 @@ export function buildFormTree(
   const nodeState: PathState = {
     formId: form.context.id,
     dirty: form.isDirty(fullPath),
+    blurred: form.isBlurred(fullPath),
     valid: form.isValid(fullPath),
     errors: form.getErrors(fullPath),
     value: form.getValue(fullPath),

packages/devtools/src/types.ts

@@ -3,6 +3,7 @@ import { ComponentInternalInstance, MaybeRefOrGetter } from 'vue';
 
 interface BaseState<TValue = unknown> {
   touched: boolean;
+  blurred: boolean;
   dirty: boolean;
   valid: boolean;
   errors: string[];
@@ -66,6 +67,7 @@ export function formToState(form: FormReturns): FormState {
   return {
     id: form.context.id,
     touched: form.isTouched(),
+    blurred: form.isBlurred(),
     dirty: form.isDirty(),
     isSubmitting: form.isSubmitting.value,
     submitCount: form.submitAttemptsCount.value,
@@ -82,6 +84,7 @@ export function fieldToState(field: CoreFieldState<unknown>, formId?: string): F
     path: field.getPath() ?? '',
     name: field.getName() ?? '',
     touched: field.isTouched.value,
+    blurred: field.isBlurred.value,
     dirty: field.isDirty.value,
     valid: !!field.isValid.value,
     value: field.fieldValue,