chore: migrate to useCustomFieldValue (#9201)

src/button/Button.tsx

@@ -6,8 +6,7 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace, extend } from '../utils';
+import { createNamespace, BORDER_SURROUND, extend } from '../utils';
-import { BORDER_SURROUND } from '../utils/constant';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components

src/cell-group/CellGroup.tsx

@@ -1,6 +1,5 @@
 import { defineComponent } from 'vue';
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from '../utils';
-import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 const [name, bem] = createNamespace('cell-group');
 

src/checkbox-group/CheckboxGroup.tsx

@@ -10,9 +10,8 @@ import {
 import { createNamespace } from '../utils';
 
 // Composables
-import { useChildren } from '@vant/use';
+import { useChildren, useCustomFieldValue } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
-import { useLinkField } from '../composables/use-link-field';
 
 // Types
 import type { CheckerDirection } from '../checkbox/Checker';
@@ -81,7 +80,7 @@ export default defineComponent({
     );
 
     useExpose<CheckboxGroupExpose>({ toggleAll });
-    useLinkField(() => props.modelValue);
+    useCustomFieldValue(() => props.modelValue);
     linkChildren({
       props,
       updateValue,

src/checkbox/Checkbox.tsx

@@ -5,9 +5,8 @@ import { createNamespace, extend, pick, truthProp } from '../utils';
 import { CHECKBOX_GROUP_KEY } from '../checkbox-group/CheckboxGroup';
 
 // Composables
-import { useParent } from '@vant/use';
+import { useParent, useCustomFieldValue } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
-import { useLinkField } from '../composables/use-link-field';
 
 // Components
 import Checker, { checkerProps } from './Checker';
@@ -82,7 +81,7 @@ export default defineComponent({
     );
 
     useExpose<CheckboxExpose>({ toggle, props, checked });
-    useLinkField(() => props.modelValue);
+    useCustomFieldValue(() => props.modelValue);
 
     return () => (
       <Checker

src/collapse/Collapse.tsx

@@ -1,6 +1,5 @@
 import { PropType, defineComponent, InjectionKey } from 'vue';
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from '../utils';
-import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('collapse');

src/composables/use-link-field.ts

@@ -1,19 +0,0 @@
-import { watch, inject, InjectionKey } from 'vue';
-import type { FormProvide } from '../form/types';
-import type { FieldProvide } from '../field/types';
-
-export const FORM_KEY: InjectionKey<FormProvide> = Symbol('van-form');
-export const FIELD_KEY: InjectionKey<FieldProvide> = Symbol('van-field');
-
-export function useLinkField(getValue: () => unknown) {
-  const field = inject(FIELD_KEY, null);
-
-  if (field && !field.childFieldValue.value) {
-    field.childFieldValue.value = getValue;
-
-    watch(getValue, () => {
-      field.resetValidation();
-      field.validateWithTrigger('onChange');
-    });
-  }
-}

src/dialog/Dialog.tsx

@@ -7,11 +7,12 @@ import {
   addUnit,
   truthProp,
   isFunction,
+  BORDER_TOP,
+  BORDER_LEFT,
   unknownProp,
+  callInterceptor,
   createNamespace,
 } from '../utils';
-import { callInterceptor } from '../utils/interceptor';
-import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
 // Components

src/dialog/function-call.tsx

@@ -1,6 +1,11 @@
 import { App, CSSProperties, TeleportProps } from 'vue';
-import { inBrowser, ComponentInstance, withInstall, extend } from '../utils';
+import {
-import { Interceptor } from '../utils/interceptor';
+  extend,
+  inBrowser,
+  withInstall,
+  Interceptor,
+  ComponentInstance,
+} from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanDialog, {
   DialogTheme,

src/field/Field.tsx

@@ -16,6 +16,7 @@ import {
   isDef,
   extend,
   addUnit,
+  FORM_KEY,
   unknownProp,
   resetScroll,
   formatNumber,
@@ -34,9 +35,8 @@ import {
 import { cellProps } from '../cell/Cell';
 
 // Composables
-import { useParent } from '@vant/use';
+import { CUSTOM_FIELD_INJECTION_KEY, useParent } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
-import { FORM_KEY, FIELD_KEY } from '../composables/use-link-field';
 
 // Components
 import { Icon } from '../icon';
@@ -146,7 +146,7 @@ export default defineComponent({
     });
 
     const inputRef = ref<HTMLInputElement>();
-    const childFieldValue = ref<() => unknown>();
+    const customValue = ref<() => unknown>();
 
     const { parent: form } = useParent(FORM_KEY);
 
@@ -176,8 +176,8 @@ export default defineComponent({
     });
 
     const formValue = computed(() => {
-      if (childFieldValue.value && slots.input) {
+      if (customValue.value && slots.input) {
-        return childFieldValue.value();
+        return customValue.value();
       }
       return props.modelValue;
     });
@@ -522,8 +522,8 @@ export default defineComponent({
       resetValidation,
     });
 
-    provide(FIELD_KEY, {
+    provide(CUSTOM_FIELD_INJECTION_KEY, {
-      childFieldValue,
+      customValue,
       resetValidation,
       validateWithTrigger,
     });

src/field/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance, ComputedRef, Ref } from 'vue';
+import type { ComputedRef, ComponentPublicInstance } from 'vue';
 import type { FieldProps } from './Field';
 
 export type FieldType =
@@ -40,12 +40,6 @@ export type FieldRule = {
   formatter?: (value: any, rule: FieldRule) => string;
 };
 
-export type FieldProvide = {
-  childFieldValue: Ref<(() => unknown) | undefined>;
-  resetValidation: () => void;
-  validateWithTrigger: (trigger: FieldValidateTrigger) => void;
-};
-
 // Shared props of Field and Form
 export type FieldFormSharedProps =
   | 'colon'

src/form/Form.tsx

@@ -1,11 +1,10 @@
 import { PropType, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, FORM_KEY, createNamespace } from '../utils';
 
 // Composables
 import { useChildren } from '@vant/use';
-import { FORM_KEY } from '../composables/use-link-field';
 import { useExpose } from '../composables/use-expose';
 
 // Types

src/grid-item/GridItem.tsx

@@ -1,8 +1,7 @@
 import { computed, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, addUnit, extend } from '../utils';
+import { createNamespace, BORDER, addUnit, extend } from '../utils';
-import { BORDER } from '../utils/constant';
 import { GRID_KEY } from '../grid/Grid';
 
 // Composables

src/image-preview/ImagePreview.tsx

@@ -14,10 +14,11 @@ import {
   pick,
   truthProp,
   unknownProp,
+  Interceptor,
+  callInterceptor,
   createNamespace,
   ComponentInstance,
 } from '../utils';
-import { callInterceptor, Interceptor } from '../utils/interceptor';
 
 // Composables
 import { useWindowSize } from '@vant/use';

src/image-preview/function-call.tsx

@@ -1,7 +1,12 @@
 import { App, CSSProperties, TeleportProps } from 'vue';
-import { ComponentInstance, extend, inBrowser, withInstall } from '../utils';
+import {
+  extend,
+  inBrowser,
+  withInstall,
+  Interceptor,
+  ComponentInstance,
+} from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
-import { Interceptor } from '../utils/interceptor';
 import { PopupCloseIconPosition } from '../popup';
 import VanImagePreview from './ImagePreview';
 

src/index-anchor/IndexAnchor.tsx

@@ -1,8 +1,12 @@
 import { ref, reactive, computed, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, extend, getZIndexStyle } from '../utils';
+import {
-import { BORDER_BOTTOM } from '../utils/constant';
+  extend,
+  BORDER_BOTTOM,
+  getZIndexStyle,
+  createNamespace,
+} from '../utils';
 import { INDEX_BAR_KEY } from '../index-bar/IndexBar';
 import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll';
 

src/nav-bar/NavBar.tsx

@@ -1,8 +1,12 @@
 import { ref, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { truthProp, createNamespace, getZIndexStyle } from '../utils';
+import {
-import { BORDER_BOTTOM } from '../utils/constant';
+  truthProp,
+  BORDER_BOTTOM,
+  getZIndexStyle,
+  createNamespace,
+} from '../utils';
 
 // Composables
 import { usePlaceholder } from '../composables/use-placeholder';

src/pagination/Pagination.tsx

@@ -1,6 +1,5 @@
 import { computed, watch, PropType, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { BORDER, createNamespace } from '../utils';
-import { BORDER } from '../utils/constant';
 
 const [name, bem, t] = createNamespace('pagination');
 

src/password-input/PasswordInput.tsx

@@ -1,6 +1,11 @@
 import { defineComponent } from 'vue';
-import { createNamespace, addUnit, truthProp } from '../utils';
+import {
-import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant';
+  addUnit,
+  truthProp,
+  BORDER_LEFT,
+  BORDER_SURROUND,
+  createNamespace,
+} from '../utils';
 
 const [name, bem] = createNamespace('password-input');
 

src/picker/Picker.tsx

@@ -14,8 +14,8 @@ import {
   truthProp,
   preventDefault,
   createNamespace,
+  BORDER_UNSET_TOP_BOTTOM,
 } from '../utils';
-import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
 
 // Composables
 import { useChildren } from '@vant/use';

src/popover/Popover.tsx

@@ -17,10 +17,10 @@ import {
   extend,
   truthProp,
   unknownProp,
+  BORDER_BOTTOM,
   createNamespace,
   ComponentInstance,
 } from '../utils';
-import { BORDER_BOTTOM } from '../utils/constant';
 
 // Composables
 import { useClickAway } from '@vant/use';

src/popup/Popup.tsx

@@ -15,8 +15,7 @@ import {
 
 // Utils
 import { popupSharedProps } from './shared';
-import { createNamespace, extend, isDef } from '../utils';
+import { extend, isDef, callInterceptor, createNamespace } from '../utils';
-import { callInterceptor } from '../utils/interceptor';
 
 // Composables
 import { useEventListener } from '@vant/use';

src/popup/shared.ts

@@ -1,6 +1,5 @@
 import { PropType, CSSProperties, TeleportProps } from 'vue';
-import { truthProp, unknownProp } from '../utils';
+import { truthProp, unknownProp, Interceptor } from '../utils';
-import type { Interceptor } from '../utils/interceptor';
 
 export const popupSharedProps = {
   // whether to show popup

src/radio-group/RadioGroup.tsx

@@ -6,8 +6,7 @@ import {
   ExtractPropTypes,
 } from 'vue';
 import { unknownProp, createNamespace } from '../utils';
-import { useChildren } from '@vant/use';
+import { useChildren, useCustomFieldValue } from '@vant/use';
-import { useLinkField } from '../composables/use-link-field';
 import type { CheckerDirection } from '../checkbox/Checker';
 
 const [name, bem] = createNamespace('radio-group');
@@ -49,7 +48,7 @@ export default defineComponent({
       updateValue,
     });
 
-    useLinkField(() => props.modelValue);
+    useCustomFieldValue(() => props.modelValue);
 
     return () => (
       <div class={bem([props.direction])} role="radiogroup">

src/rate/Rate.tsx

@@ -4,9 +4,9 @@ import { computed, defineComponent } from 'vue';
 import { addUnit, truthProp, createNamespace, preventDefault } from '../utils';
 
 // Composables
+import { useCustomFieldValue } from '@vant/use';
 import { useRefs } from '../composables/use-refs';
 import { useTouch } from '../composables/use-touch';
-import { useLinkField } from '../composables/use-link-field';
 
 // Components
 import { Icon } from '../icon';
@@ -221,7 +221,7 @@ export default defineComponent({
       );
     };
 
-    useLinkField(() => props.modelValue);
+    useCustomFieldValue(() => props.modelValue);
 
     return () => (
       <div

src/slider/Slider.tsx

@@ -12,9 +12,8 @@ import {
 } from '../utils';
 
 // Composables
-import { useRect } from '@vant/use';
+import { useRect, useCustomFieldValue } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
-import { useLinkField } from '../composables/use-link-field';
 
 const [name, bem] = createNamespace('slider');
 
@@ -285,7 +284,7 @@ export default defineComponent({
 
     // format initial value
     updateValue(props.modelValue);
-    useLinkField(() => props.modelValue);
+    useCustomFieldValue(() => props.modelValue);
 
     return () => (
       <div

src/step/Step.tsx

@@ -1,8 +1,7 @@
 import { computed, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { BORDER, createNamespace } from '../utils';
-import { BORDER } from '../utils/constant';
 import { STEPS_KEY } from '../steps/Steps';
 
 // Composables

src/stepper/Stepper.tsx

@@ -7,15 +7,16 @@ import {
   addNumber,
   truthProp,
   resetScroll,
+  Interceptor,
   formatNumber,
   getSizeStyle,
   preventDefault,
   createNamespace,
+  callInterceptor,
 } from '../utils';
 
 // Composables
-import { useLinkField } from '../composables/use-link-field';
+import { useCustomFieldValue } from '@vant/use';
-import { Interceptor, callInterceptor } from '../utils/interceptor';
 
 const [name, bem] = createNamespace('stepper');
 
@@ -291,7 +292,7 @@ export default defineComponent({
       emit('change', value, { name: props.name });
     });
 
-    useLinkField(() => props.modelValue);
+    useCustomFieldValue(() => props.modelValue);
 
     return () => (
       <div class={bem([props.theme])}>

src/swipe-cell/SwipeCell.tsx

@@ -9,8 +9,14 @@ import {
 } from 'vue';
 
 // Utils
-import { clamp, isDef, createNamespace, preventDefault } from '../utils';
+import {
-import { callInterceptor, Interceptor } from '../utils/interceptor';
+  clamp,
+  isDef,
+  Interceptor,
+  preventDefault,
+  callInterceptor,
+  createNamespace,
+} from '../utils';
 
 // Composables
 import { useRect, useClickAway } from '@vant/use';

src/switch/Switch.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { createNamespace, addUnit, unknownProp } from '../utils';
-import { useLinkField } from '../composables/use-link-field';
+import { useCustomFieldValue } from '@vant/use';
 import { Loading } from '../loading';
 
 const [name, bem] = createNamespace('switch');
@@ -45,7 +45,7 @@ export default defineComponent({
       }
     };
 
-    useLinkField(() => props.modelValue);
+    useCustomFieldValue(() => props.modelValue);
 
     return () => {
       const { size, loading, disabled, activeColor, inactiveColor } = props;

src/tabbar/Tabbar.tsx

@@ -7,9 +7,14 @@ import {
 } from 'vue';
 
 // Utils
-import { truthProp, createNamespace, getZIndexStyle } from '../utils';
+import {
-import { BORDER_TOP_BOTTOM } from '../utils/constant';
+  truthProp,
-import { callInterceptor, Interceptor } from '../utils/interceptor';
+  Interceptor,
+  getZIndexStyle,
+  createNamespace,
+  callInterceptor,
+  BORDER_TOP_BOTTOM,
+} from '../utils';
 
 // Composables
 import { useChildren } from '@vant/use';

src/tabs/Tabs.tsx

@@ -21,16 +21,17 @@ import {
   isHidden,
   unitToPx,
   truthProp,
+  Interceptor,
   getVisibleTop,
   getElementTop,
+  callInterceptor,
   createNamespace,
   getVisibleHeight,
   setRootScrollTop,
   ComponentInstance,
+  BORDER_TOP_BOTTOM,
 } from '../utils';
 import { scrollLeftTo, scrollTopTo } from './utils';
-import { BORDER_TOP_BOTTOM } from '../utils/constant';
-import { callInterceptor, Interceptor } from '../utils/interceptor';
 
 // Composables
 import {

src/uploader/Uploader.tsx

@@ -12,6 +12,7 @@ import {
   extend,
   isPromise,
   truthProp,
+  Interceptor,
   getSizeStyle,
   ComponentInstance,
 } from '../utils';
@@ -26,8 +27,8 @@ import {
 } from './utils';
 
 // Composables
+import { useCustomFieldValue } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
-import { useLinkField } from '../composables/use-link-field';
 
 // Components
 import { Icon } from '../icon';
@@ -36,7 +37,6 @@ import UploaderPreviewItem from './UploaderPreviewItem';
 
 // Types
 import type { ImageFit } from '../image';
-import type { Interceptor } from '../utils/interceptor';
 import type {
   UploaderExpose,
   UploaderMaxSize,
@@ -359,8 +359,7 @@ export default defineComponent({
       chooseFile,
       closeImagePreview,
     });
-
+    useCustomFieldValue(() => props.modelValue);
-    useLinkField(() => props.modelValue);
 
     return () => (
       <div class={bem()}>

src/uploader/UploaderPreviewItem.tsx

@@ -2,8 +2,13 @@ import { PropType, defineComponent } from 'vue';
 
 // Utils
 import { bem, isImageFile } from './utils';
-import { isDef, getSizeStyle, extend } from '../utils';
+import {
-import { callInterceptor, Interceptor } from '../utils/interceptor';
+  isDef,
+  extend,
+  Interceptor,
+  getSizeStyle,
+  callInterceptor,
+} from '../utils';
 
 // Components
 import { Icon } from '../icon';

src/uploader/types.ts

@@ -1,6 +1,6 @@
 import type { ComponentPublicInstance } from 'vue';
 import type { ImageFit } from '../image';
-import type { Interceptor } from '../utils/interceptor';
+import type { Interceptor } from '../utils';
 import type { UploaderProps } from './Uploader';
 
 export type UploaderResultType = 'dataUrl' | 'text' | 'file';

src/utils/constant.ts

@@ -1,4 +1,6 @@
-// border
+import type { InjectionKey } from 'vue';
+import type { FormProvide } from '../form/types';
+
 export const BORDER = 'van-hairline';
 export const BORDER_TOP = `${BORDER}--top`;
 export const BORDER_LEFT = `${BORDER}--left`;
@@ -6,3 +8,5 @@ export const BORDER_BOTTOM = `${BORDER}--bottom`;
 export const BORDER_SURROUND = `${BORDER}--surround`;
 export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;
 export const BORDER_UNSET_TOP_BOTTOM = `${BORDER}-unset--top-bottom`;
+
+export const FORM_KEY: InjectionKey<FormProvide> = Symbol('van-form');

src/utils/index.ts

@@ -1,10 +1,12 @@
 export * from './base';
 export * from './create';
+export * from './constant';
 export * from './validate';
+export * from './dom/style';
+export * from './dom/event';
+export * from './dom/scroll';
+export * from './interceptor';
 export * from './with-install';
 export * from './format/unit';
 export * from './format/number';
 export * from './format/string';
-export * from './dom/style';
-export * from './dom/event';
-export * from './dom/scroll';