feat: add required support for field-level schemas

logaretm · logaretm · commit 58b470f6aead · 2023-11-25T17:19:34.000+02:00
diff --git a/packages/valibot/src/index.ts b/packages/valibot/src/index.ts
@@ -56,18 +56,23 @@ export function toTypedSchema<
       return values;
     },
     describe(path) {
-      const description = getSchemaForPath(path, valibotSchema);
-      if (!description) {
+      if (!path) {
+        return {
+          required: !queryOptional(valibotSchema),
+          exists: true,
+        };
+      }
+
+      const pathSchema = getSchemaForPath(path, valibotSchema);
+      if (!pathSchema) {
         return {
           required: false,
           exists: false,
         };
       }
 
-      const isOptional = (description as any).type === 'optional';
-
       return {
-        required: !isOptional,
+        required: !queryOptional(pathSchema),
         exists: true,
       };
     },
@@ -129,6 +134,10 @@ function getSchemaForPath(path: string, schema: any): BaseSchema | null {
   return null;
 }
 
+function queryOptional(schema: BaseSchema | BaseSchemaAsync): boolean {
+  return (schema as any).type === 'optional';
+}
+
 function isArraySchema(schema: unknown): schema is ArraySchema<any> {
   return isObject(schema) && schema.type === 'array';
 }
diff --git a/packages/valibot/tests/valibot.spec.ts b/packages/valibot/tests/valibot.spec.ts
@@ -472,3 +472,56 @@ test('reports required false for non-existent fields', async () => {
     }),
   );
 });
+
+test('reports required state single field schemas', async () => {
+  const metaSpy = vi.fn();
+  mountWithHoc({
+    setup() {
+      useForm();
+      const { meta: req } = useField('req', toTypedSchema(string()));
+      const { meta: nreq } = useField('nreq', toTypedSchema(optional(string())));
+
+      metaSpy({
+        req: req.required,
+        nreq: nreq.required,
+      });
+
+      return {};
+    },
+    template: `<div></div>`,
+  });
+
+  await flushPromises();
+  await expect(metaSpy).toHaveBeenLastCalledWith(
+    expect.objectContaining({
+      req: true,
+      nreq: false,
+    }),
+  );
+});
+
+test('reports required state single field schemas without a form context', async () => {
+  const metaSpy = vi.fn();
+  mountWithHoc({
+    setup() {
+      const { meta: req } = useField('req', toTypedSchema(string()));
+      const { meta: nreq } = useField('nreq', toTypedSchema(optional(string())));
+
+      metaSpy({
+        req: req.required,
+        nreq: nreq.required,
+      });
+
+      return {};
+    },
+    template: `<div></div>`,
+  });
+
+  await flushPromises();
+  await expect(metaSpy).toHaveBeenLastCalledWith(
+    expect.objectContaining({
+      req: true,
+      nreq: false,
+    }),
+  );
+});
diff --git a/packages/vee-validate/src/types/forms.ts b/packages/vee-validate/src/types/forms.ts
@@ -15,13 +15,14 @@ export interface TypedSchemaError {
 }
 export interface TypedSchemaPathDescription {
   required: boolean;
+  exists: boolean;
 }
 
 export interface TypedSchema<TInput = any, TOutput = TInput> {
   __type: 'VVTypedSchema';
   parse(values: TInput): Promise<{ value?: TOutput; errors: TypedSchemaError[] }>;
   cast?(values: Partial<TInput>): TInput;
-  describe?(path: Path<TInput>): Partial<TypedSchemaPathDescription>;
+  describe?(path?: Path<TInput>): Partial<TypedSchemaPathDescription>;
 }
 
 export type InferOutput<TSchema extends TypedSchema> = TSchema extends TypedSchema<any, infer TOutput>
@@ -84,6 +85,7 @@ export interface PathStateConfig {
   label: MaybeRefOrGetter<string | undefined>;
   type: InputType;
   validate: FieldValidator;
+  schema?: TypedSchema;
 }
 
 export interface PathState<TValue = unknown> {
diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts
@@ -150,6 +150,7 @@ function _useField<TValue = unknown>(
     label,
     type,
     validate: validator.value ? validate : undefined,
+    schema: isTypedSchema(rules) ? (rules as any) : undefined,
   });
 
   const errorMessage = computed(() => errors.value[0]);
diff --git a/packages/vee-validate/src/useFieldState.ts b/packages/vee-validate/src/useFieldState.ts
@@ -1,6 +1,7 @@
 import { computed, isRef, reactive, ref, Ref, unref, watch, MaybeRef, MaybeRefOrGetter } from 'vue';
 import { FieldMeta, FieldState, FieldValidator, InputType, PrivateFormContext, PathState } from './types';
 import { getFromPath, isEqual, normalizeErrorItem } from './utils';
+import { TypedSchema } from '../dist/vee-validate';
 
 export interface StateSetterInit<TValue = unknown> extends FieldState<TValue> {
   initialValue: TValue;
@@ -24,6 +25,7 @@ export interface StateInit<TValue = unknown> {
   label?: MaybeRefOrGetter<string | undefined>;
   type?: InputType;
   validate?: FieldValidator;
+  schema?: TypedSchema<TValue>;
 }
 
 let ID_COUNTER = 0;
@@ -37,7 +39,7 @@ export function useFieldState<TValue = unknown>(
   if (!init.form) {
     const { errors, setErrors } = createFieldErrors();
     const id = ID_COUNTER >= Number.MAX_SAFE_INTEGER ? 0 : ++ID_COUNTER;
-    const meta = createFieldMeta(value, initialValue, errors);
+    const meta = createFieldMeta(value, initialValue, errors, init.schema);
 
     function setState(state: Partial<StateSetterInit<TValue>>) {
       if ('value' in state) {
@@ -74,6 +76,7 @@ export function useFieldState<TValue = unknown>(
     label: init.label,
     type: init.type,
     validate: init.validate,
+    schema: init.schema,
   });
 
   const errors = computed(() => state.errors);
@@ -207,11 +210,15 @@ function createFieldMeta<TValue>(
   currentValue: Ref<TValue>,
   initialValue: MaybeRef<TValue> | undefined,
   errors: Ref<string[]>,
+  schema?: TypedSchema<TValue>,
 ) {
+  const isRequired = schema?.describe?.().required ?? false;
+
   const meta = reactive({
     touched: false,
     pending: false,
     valid: true,
+    required: isRequired,
     validated: !!unref(errors).length,
     initialValue: computed(() => unref(initialValue) as TValue | undefined),
     dirty: computed(() => {
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
@@ -290,6 +290,19 @@ export function useForm<
 
     const currentValue = computed(() => getFromPath(formValues, toValue(path)));
     const pathValue = toValue(path);
+    const isRequired = computed(() => {
+      if (isTypedSchema(schema)) {
+        return (schema as TypedSchema).describe?.(toValue(path)).required ?? false;
+      }
+
+      // Path own schema
+      if (isTypedSchema(config?.schema)) {
+        return (config?.schema as TypedSchema).describe?.().required ?? false;
+      }
+
+      return false;
+    });
+
     const id = FIELD_ID_COUNTER++;
     const state = reactive({
       id,
@@ -298,9 +311,7 @@ export function useForm<
       pending: false,
       valid: true,
       validated: !!initialErrors[pathValue]?.length,
-      required: computed(() =>
-        isTypedSchema(schema) ? (schema as TypedSchema).describe?.(toValue(path)).required ?? false : false,
-      ),
+      required: isRequired,
       initialValue,
       errors: shallowRef([]),
       bails: config?.bails ?? false,
diff --git a/packages/yup/src/index.ts b/packages/yup/src/index.ts
@@ -7,7 +7,13 @@ import {
   ValidateOptions,
   ValidationError,
 } from 'yup';
-import { TypedSchema, TypedSchemaError, isNotNestedPath, cleanupNonNestedPath } from 'vee-validate';
+import {
+  TypedSchema,
+  TypedSchemaError,
+  isNotNestedPath,
+  cleanupNonNestedPath,
+  TypedSchemaPathDescription,
+} from 'vee-validate';
 import { PartialDeep } from 'type-fest';
 import { isIndex, isObject, merge } from '../../shared';
 
@@ -69,26 +75,41 @@ export function toTypedSchema<TSchema extends Schema, TOutput = InferType<TSchem
       }
     },
     describe(path) {
+      if (!path) {
+        return getDescriptionFromYupDescription(yupSchema.describe());
+      }
+
       const description = getDescriptionForPath(path, yupSchema);
-      if (!description || !('tests' in description)) {
+      if (!description) {
         return {
           required: false,
           exists: false,
         };
       }
 
-      const required = description?.tests?.some(t => t.name === 'required') || false;
-
-      return {
-        required,
-        exists: true,
-      };
+      return getDescriptionFromYupDescription(description);
     },
   };
 
   return schema;
 }
 
+function getDescriptionFromYupDescription(desc: SchemaFieldDescription): TypedSchemaPathDescription {
+  if ('tests' in desc) {
+    const required = desc?.tests?.some(t => t.name === 'required') || false;
+
+    return {
+      required,
+      exists: true,
+    };
+  }
+
+  return {
+    required: false,
+    exists: false,
+  };
+}
+
 function getDescriptionForPath(path: string, schema: Schema): SchemaFieldDescription | null {
   if (!isObjectSchema(schema)) {
     return null;
diff --git a/packages/yup/tests/yup.spec.ts b/packages/yup/tests/yup.spec.ts
@@ -429,3 +429,56 @@ test('reports required false for non-existent fields', async () => {
     }),
   );
 });
+
+test('reports required state single field schemas', async () => {
+  const metaSpy = vi.fn();
+  mountWithHoc({
+    setup() {
+      useForm();
+      const { meta: req } = useField('req', toTypedSchema(yup.string().required()));
+      const { meta: nreq } = useField('nreq', toTypedSchema(yup.string()));
+
+      metaSpy({
+        req: req.required,
+        nreq: nreq.required,
+      });
+
+      return {};
+    },
+    template: `<div></div>`,
+  });
+
+  await flushPromises();
+  await expect(metaSpy).toHaveBeenLastCalledWith(
+    expect.objectContaining({
+      req: true,
+      nreq: false,
+    }),
+  );
+});
+
+test('reports required state single field schemas without a form context', async () => {
+  const metaSpy = vi.fn();
+  mountWithHoc({
+    setup() {
+      const { meta: req } = useField('req', toTypedSchema(yup.string().required()));
+      const { meta: nreq } = useField('nreq', toTypedSchema(yup.string()));
+
+      metaSpy({
+        req: req.required,
+        nreq: nreq.required,
+      });
+
+      return {};
+    },
+    template: `<div></div>`,
+  });
+
+  await flushPromises();
+  await expect(metaSpy).toHaveBeenLastCalledWith(
+    expect.objectContaining({
+      req: true,
+      nreq: false,
+    }),
+  );
+});
diff --git a/packages/zod/src/index.ts b/packages/zod/src/index.ts
@@ -55,6 +55,13 @@ export function toTypedSchema<
       }
     },
     describe(path) {
+      if (!path) {
+        return {
+          required: !zodSchema.isOptional(),
+          exists: true,
+        };
+      }
+
       const description = getSchemaForPath(path, zodSchema);
       if (!description) {
         return {
diff --git a/packages/zod/tests/zod.spec.ts b/packages/zod/tests/zod.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -15,13 +15,14 @@ export interface TypedSchemaError {`
`15`	`15`	`}`
`16`	`16`	`export interface TypedSchemaPathDescription {`
`17`	`17`	`required: boolean;`
	`18`	`+ exists: boolean;`
`18`	`19`	`}`
`19`	`20`
`20`	`21`	`export interface TypedSchema<TInput = any, TOutput = TInput> {`
`21`	`22`	`__type: 'VVTypedSchema';`
`22`	`23`	`parse(values: TInput): Promise<{ value?: TOutput; errors: TypedSchemaError[] }>;`
`23`	`24`	`cast?(values: Partial<TInput>): TInput;`
`24`		`- describe?(path: Path<TInput>): Partial<TypedSchemaPathDescription>;`
	`25`	`+ describe?(path?: Path<TInput>): Partial<TypedSchemaPathDescription>;`
`25`	`26`	`}`
`26`	`27`
`27`	`28`	`export type InferOutput<TSchema extends TypedSchema> = TSchema extends TypedSchema<any, infer TOutput>`
`@@ -84,6 +85,7 @@ export interface PathStateConfig {`
`84`	`85`	`label: MaybeRefOrGetter<string \| undefined>;`
`85`	`86`	`type: InputType;`
`86`	`87`	`validate: FieldValidator;`
	`88`	`+ schema?: TypedSchema;`
`87`	`89`	`}`
`88`	`90`
`89`	`91`	`export interface PathState<TValue = unknown> {`