feat: make accept the model propName

Author: logaretm

.changeset/loud-frogs-explode.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+feat(dx): make `syncVModel` accept the model propName

packages/vee-validate/src/useField.ts

@@ -55,15 +55,21 @@ export interface FieldOptions<TValue = unknown> {
   validateOnMount?: boolean;
   bails?: boolean;
   type?: InputType;
+  /**
+   * @deprecated Use `checkedValue` instead.
+   */
   valueProp?: MaybeRef<TValue>;
   checkedValue?: MaybeRef<TValue>;
   uncheckedValue?: MaybeRef<TValue>;
   label?: MaybeRef<string | undefined>;
   controlled?: boolean;
   standalone?: boolean;
   keepValueOnUnmount?: MaybeRef<boolean | undefined>;
+  /**
+   * @deprecated Pass the model prop name to `syncVModel` instead.
+   */
   modelPropName?: string;
-  syncVModel?: boolean;
+  syncVModel?: boolean | string;
   form?: FormContext;
 }
 
@@ -107,7 +113,6 @@ function _useField<TValue = unknown>(
     uncheckedValue,
     controlled,
     keepValueOnUnmount,
-    modelPropName,
     syncVModel,
     form: controlForm,
   } = normalizeOptions(opts);
@@ -148,7 +153,7 @@ function _useField<TValue = unknown>(
   const errorMessage = computed(() => errors.value[0]);
 
   if (syncVModel) {
-    useVModel({ value, prop: modelPropName, handleChange });
+    useVModel({ value, prop: syncVModel, handleChange });
   }
 
   /**
@@ -451,15 +456,15 @@ function normalizeOptions<TValue>(opts: Partial<FieldOptions<TValue>> | undefine
     label: undefined,
     validateOnValueUpdate: true,
     keepValueOnUnmount: undefined,
-    modelPropName: 'modelValue',
     syncVModel: false,
     controlled: true,
   });
 
-  const isVModelSynced = opts?.syncVModel ?? true;
+  const isVModelSynced = !!opts?.syncVModel;
+  const modelPropName = typeof opts?.syncVModel === 'string' ? opts.syncVModel : opts?.modelPropName || 'modelValue';
   const initialValue =
     isVModelSynced && !('initialValue' in (opts || {}))
-      ? getCurrentModelValue(getCurrentInstance(), opts?.modelPropName || 'modelValue')
+      ? getCurrentModelValue(getCurrentInstance(), modelPropName)
       : opts?.initialValue;
 
   if (!opts) {
@@ -469,13 +474,15 @@ function normalizeOptions<TValue>(opts: Partial<FieldOptions<TValue>> | undefine
   // TODO: Deprecate this in next major release
   const checkedValue = 'valueProp' in opts ? opts.valueProp : opts.checkedValue;
   const controlled = 'standalone' in opts ? !opts.standalone : opts.controlled;
+  const syncVModel = opts?.modelPropName || opts?.syncVModel || false;
 
   return {
     ...defaults(),
     ...(opts || {}),
     initialValue,
     controlled: controlled ?? true,
     checkedValue,
+    syncVModel,
   } as FieldOptions<TValue>;
 }
 
@@ -537,22 +544,22 @@ function useFieldWithChecked<TValue = unknown>(
 }
 
 interface ModelOpts<TValue> {
-  prop?: string;
+  prop: string | boolean;
   value: Ref<TValue>;
   handleChange: FieldContext['handleChange'];
 }
 
 function useVModel<TValue = unknown>({ prop, value, handleChange }: ModelOpts<TValue>) {
   const vm = getCurrentInstance();
   /* istanbul ignore next */
-  if (!vm) {
+  if (!vm || !prop) {
     if (__DEV__) {
       console.warn('Failed to setup model events because `useField` was not called in setup.');
     }
     return;
   }
 
-  const propName = prop || 'modelValue';
+  const propName = typeof prop === 'string' ? prop : 'modelValue';
   const emitName = `update:${propName}`;
 
   // Component doesn't have a model prop setup (must be defined on the props)

packages/vee-validate/tests/useField.spec.ts

@@ -604,7 +604,7 @@ describe('useField()', () => {
         modelValue: String,
       },
       setup() {
-        const { value, errorMessage } = useField('field');
+        const { value, errorMessage } = useField('field', undefined, { syncVModel: true });
 
         return {
           value,