feat: expose form and field injection keys

packages/vee-validate/src/ErrorMessage.ts

@@ -1,5 +1,5 @@
 import { inject, h, defineComponent, computed, resolveDynamicComponent } from 'vue';
-import { FormErrorsSymbol } from './symbols';
+import { FormErrorsKey } from './symbols';
 import { normalizeChildren } from './utils';
 
 export const ErrorMessage = defineComponent({
@@ -15,7 +15,7 @@ export const ErrorMessage = defineComponent({
     },
   },
   setup(props, ctx) {
-    const errors = inject(FormErrorsSymbol, undefined);
+    const errors = inject(FormErrorsKey, undefined);
     const message = computed<string | undefined>(() => {
       return errors?.value[props.name];
     });

packages/vee-validate/src/index.ts

@@ -32,3 +32,4 @@ export { useFormValues } from './useFormValues';
 export { useFormErrors } from './useFormErrors';
 export { useFieldError } from './useFieldError';
 export { useSubmitForm } from './useSubmitForm';
+export { FormContextKey, FieldContextKey } from './symbols';

packages/vee-validate/src/symbols.ts

@@ -1,15 +1,15 @@
 import { ComputedRef, InjectionKey } from 'vue';
 import { FormContext, PrivateFieldComposite } from './types';
 
-export const FormContextSymbol: InjectionKey<FormContext> = Symbol('vee-validate-form');
+export const FormContextKey: InjectionKey<FormContext> = Symbol('vee-validate-form');
 
-export const FormErrorsSymbol: InjectionKey<ComputedRef<Record<string, string | undefined>>> =
+export const FormErrorsKey: InjectionKey<ComputedRef<Record<string, string | undefined>>> =
   Symbol('vee-validate-form-errors');
 
-export const FormInitialValuesSymbol: InjectionKey<ComputedRef<Record<string, unknown>>> = Symbol(
+export const FormInitialValuesKey: InjectionKey<ComputedRef<Record<string, unknown>>> = Symbol(
   'vee-validate-form-initial-values'
 );
 
-export const FieldContextSymbol: InjectionKey<PrivateFieldComposite<unknown>> = Symbol('vee-validate-field-instance');
+export const FieldContextKey: InjectionKey<PrivateFieldComposite<unknown>> = Symbol('vee-validate-field-instance');
 
 export const EMPTY_VALUE = Symbol('Default empty value');

packages/vee-validate/src/useField.ts

@@ -39,7 +39,7 @@ import {
   isYupValidator,
 } from './utils';
 import { isCallable } from '../../shared';
-import { FieldContextSymbol, FormInitialValuesSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormInitialValuesKey, FormContextKey } from './symbols';
 
 interface FieldOptions<TValue = unknown> {
   initialValue?: MaybeRef<TValue>;
@@ -85,7 +85,7 @@ export function useField<TValue = unknown>(
     standalone,
   } = normalizeOptions(unref(name), opts);
 
-  const form = !standalone ? injectWithSelf(FormContextSymbol) : undefined;
+  const form = !standalone ? injectWithSelf(FormContextKey) : undefined;
 
   const {
     meta,
@@ -225,7 +225,7 @@ export function useField<TValue = unknown>(
     setErrors,
   };
 
-  provide(FieldContextSymbol, field);
+  provide(FieldContextKey, field);
 
   if (isRef(rules) && typeof unref(rules) !== 'function') {
     watch(
@@ -345,7 +345,7 @@ function useValidationState<TValue>({
   standalone?: boolean;
 }) {
   const { errors, errorMessage, setErrors } = useFieldErrors(name, form);
-  const formInitialValues = standalone ? undefined : injectWithSelf(FormInitialValuesSymbol, undefined);
+  const formInitialValues = standalone ? undefined : injectWithSelf(FormInitialValuesKey, undefined);
   // clones the ref value to a mutable version
   const initialValueRef = ref(unref(initValue)) as Ref<TValue>;
 

packages/vee-validate/src/useFieldError.ts

@@ -1,15 +1,15 @@
 import { computed, inject, unref } from 'vue';
-import { FieldContextSymbol, FormErrorsSymbol } from './symbols';
+import { FieldContextKey, FormErrorsKey } from './symbols';
 import { MaybeRef } from './types';
 import { injectWithSelf } from './utils';
 
 /**
  * Gives access to a single field error
  */
 export function useFieldError(path?: MaybeRef<string>) {
-  const errors = injectWithSelf(FormErrorsSymbol);
+  const errors = injectWithSelf(FormErrorsKey);
   // We don't want to use self injected context as it doesn't make sense
-  const field = path ? undefined : inject(FieldContextSymbol);
+  const field = path ? undefined : inject(FieldContextKey);
 
   return computed(() => {
     if (path) {

packages/vee-validate/src/useFieldValue.ts

@@ -1,15 +1,15 @@
 import { computed, inject, unref } from 'vue';
-import { FieldContextSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormContextKey } from './symbols';
 import { MaybeRef } from './types';
 import { getFromPath, injectWithSelf } from './utils';
 
 /**
  * Gives access to a field's current value
  */
 export function useFieldValue<TValue = unknown>(path?: MaybeRef<string>) {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   // We don't want to use self injected context as it doesn't make sense
-  const field = path ? undefined : inject(FieldContextSymbol);
+  const field = path ? undefined : inject(FieldContextKey);
 
   return computed(() => {
     if (path) {

packages/vee-validate/src/useForm.ts

@@ -29,7 +29,7 @@ import {
   isFormSubmitEvent,
   normalizeField,
 } from './utils';
-import { FormErrorsSymbol, FormContextSymbol, FormInitialValuesSymbol } from './symbols';
+import { FormErrorsKey, FormContextKey, FormInitialValuesKey } from './symbols';
 import { validateYupSchema, validateObjectSchema } from './validate';
 
 interface FormOptions<TValues extends Record<string, any>> {
@@ -602,8 +602,8 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
   }
 
   // Provide injections
-  provide(FormContextSymbol, formCtx as FormContext);
-  provide(FormErrorsSymbol, errors);
+  provide(FormContextKey, formCtx as FormContext);
+  provide(FormErrorsKey, errors);
 
   return {
     errors,
@@ -716,7 +716,7 @@ function useFormInitialValues<TValues extends Record<string, any>>(
     );
   }
 
-  provide(FormInitialValuesSymbol, computedInitials);
+  provide(FormInitialValuesKey, computedInitials);
 
   return {
     readonlyInitialValues: computedInitials,

packages/vee-validate/src/useFormErrors.ts

@@ -1,12 +1,12 @@
 import { computed, ComputedRef } from 'vue';
-import { FormErrorsSymbol } from './symbols';
+import { FormErrorsKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * Gives access to all form errors
  */
 export function useFormErrors<TValues extends Record<string, unknown> = Record<string, unknown>>() {
-  const errors = injectWithSelf(FormErrorsSymbol);
+  const errors = injectWithSelf(FormErrorsKey);
   if (!errors) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }

packages/vee-validate/src/useFormValues.ts

@@ -1,13 +1,13 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { FormContext } from './types';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * Gives access to a form's values
  */
 export function useFormValues<TValues extends Record<string, unknown> = Record<string, unknown>>() {
-  const form = injectWithSelf(FormContextSymbol) as FormContext<TValues> | undefined;
+  const form = injectWithSelf(FormContextKey) as FormContext<TValues> | undefined;
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }

packages/vee-validate/src/useIsFieldDirty.ts

@@ -1,14 +1,14 @@
 import { computed, inject, unref } from 'vue';
-import { FieldContextSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormContextKey } from './symbols';
 import { MaybeRef, PrivateFieldComposite } from './types';
 import { injectWithSelf, normalizeField, warn } from './utils';
 
 /**
  * If a field is dirty or not
  */
 export function useIsFieldDirty(path?: MaybeRef<string>) {
-  const form = injectWithSelf(FormContextSymbol);
-  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextSymbol);
+  const form = injectWithSelf(FormContextKey);
+  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextKey);
 
   return computed(() => {
     if (path) {

packages/vee-validate/src/useIsFieldTouched.ts

@@ -1,14 +1,14 @@
 import { computed, inject, unref } from 'vue';
-import { FieldContextSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormContextKey } from './symbols';
 import { MaybeRef, PrivateFieldComposite } from './types';
 import { injectWithSelf, normalizeField, warn } from './utils';
 
 /**
  * If a field is touched or not
  */
 export function useIsFieldTouched(path?: MaybeRef<string>) {
-  const form = injectWithSelf(FormContextSymbol);
-  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextSymbol);
+  const form = injectWithSelf(FormContextKey);
+  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextKey);
 
   return computed(() => {
     if (path) {

packages/vee-validate/src/useIsFieldValid.ts

@@ -1,14 +1,14 @@
 import { computed, inject, unref } from 'vue';
-import { FieldContextSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormContextKey } from './symbols';
 import { MaybeRef, PrivateFieldComposite } from './types';
 import { injectWithSelf, normalizeField, warn } from './utils';
 
 /**
  * If a field is validated and is valid
  */
 export function useIsFieldValid(path?: MaybeRef<string>) {
-  const form = injectWithSelf(FormContextSymbol);
-  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextSymbol);
+  const form = injectWithSelf(FormContextKey);
+  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextKey);
 
   return computed(() => {
     if (path) {

packages/vee-validate/src/useIsFormDirty.ts

@@ -1,12 +1,12 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * If the form is dirty or not
  */
 export function useIsFormDirty() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }

packages/vee-validate/src/useIsFormTouched.ts

@@ -1,12 +1,12 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * If the form is touched or not
  */
 export function useIsFormTouched() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }

packages/vee-validate/src/useIsFormValid.ts

@@ -1,12 +1,12 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * If the form has been validated and is valid
  */
 export function useIsFormValid() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }

packages/vee-validate/src/useIsSubmitting.ts

@@ -1,12 +1,12 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * If the form is submitting or not
  */
 export function useIsSubmitting() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }

packages/vee-validate/src/useResetForm.ts

@@ -1,9 +1,9 @@
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { FormState } from './types';
 import { injectWithSelf, warn } from './utils';
 
 export function useResetForm<TValues extends Record<string, unknown> = Record<string, unknown>>() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }

packages/vee-validate/src/useSubmitCount.ts

@@ -1,12 +1,12 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * The number of form's submission count
  */
 export function useSubmitCount() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }

packages/vee-validate/src/useSubmitForm.ts

@@ -1,11 +1,11 @@
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { FormContext, SubmissionHandler } from './types';
 import { injectWithSelf, warn } from './utils';
 
 export function useSubmitForm<TValues extends Record<string, unknown> = Record<string, unknown>>(
   cb: SubmissionHandler<TValues>
 ) {
-  const form = injectWithSelf(FormContextSymbol) as FormContext<TValues> | undefined;
+  const form = injectWithSelf(FormContextKey) as FormContext<TValues> | undefined;
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }

packages/vee-validate/src/useValidateField.ts

@@ -1,14 +1,14 @@
 import { inject, unref } from 'vue';
-import { FieldContextSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormContextKey } from './symbols';
 import { MaybeRef, PrivateFieldComposite, ValidationResult } from './types';
 import { injectWithSelf, normalizeField, warn } from './utils';
 
 /**
  * Validates a single field
  */
 export function useValidateField(path?: MaybeRef<string>) {
-  const form = injectWithSelf(FormContextSymbol);
-  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextSymbol);
+  const form = injectWithSelf(FormContextKey);
+  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextKey);
 
   return function validateField(): Promise<ValidationResult> {
     if (path) {

packages/vee-validate/src/useValidateForm.ts

@@ -1,12 +1,12 @@
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { FormContext, FormValidationResult } from './types';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * Validate multiple fields
  */
 export function useValidateForm<TValues extends Record<string, unknown> = Record<string, unknown>>() {
-  const form = injectWithSelf(FormContextSymbol) as FormContext<TValues> | undefined;
+  const form = injectWithSelf(FormContextKey) as FormContext<TValues> | undefined;
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }