types: add SwipeInstance type (#9158)

src/address-edit/README.md

@@ -122,9 +122,9 @@ export default {
 
 Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get AddressEdit instance and call instance methods.
 
-| Name             | Description        | Attribute             | Return value |
-| ---------------- | ------------------ | --------------------- | ------------ |
-| setAddressDetail | Set address detail | addressDetail: string | -            |
+| Name | Description | Attribute | Return value |
+| --- | --- | --- | --- |
+| setAddressDetail | Set address detail | _addressDetail: string_ | - |
 
 ### AddressInfo Data Structure
 

src/address-edit/README.zh-CN.md

@@ -122,9 +122,9 @@ export default {
 
 通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
 
-| 方法名           | 说明         | 参数                  | 返回值 |
-| ---------------- | ------------ | --------------------- | ------ |
-| setAddressDetail | 设置详细地址 | addressDetail: string | -      |
+| 方法名           | 说明         | 参数                    | 返回值 |
+| ---------------- | ------------ | ----------------------- | ------ |
+| setAddressDetail | 设置详细地址 | _addressDetail: string_ | -      |
 
 ### AddressInfo 数据格式
 

src/checkbox-group/CheckboxGroup.tsx

@@ -4,7 +4,6 @@ import {
   InjectionKey,
   defineComponent,
   ExtractPropTypes,
-  ComponentPublicInstance,
 } from 'vue';
 
 // Utils
@@ -16,7 +15,12 @@ import { useExpose } from '../composables/use-expose';
 import { useLinkField } from '../composables/use-link-field';
 
 // Types
-import { CheckerParent, CheckerDirection } from '../checkbox/Checker';
+import type { CheckerDirection } from '../checkbox/Checker';
+import type {
+  CheckboxGroupExpose,
+  CheckboxGroupProvide,
+  CheckboxGroupToggleAllOptions,
+} from './types';
 
 const [name, bem] = createNamespace('checkbox-group');
 
@@ -32,28 +36,7 @@ const props = {
   },
 };
 
-export type CheckboxGroupToggleAllOptions =
-  | boolean
-  | {
-      checked?: boolean;
-      skipDisabled?: boolean;
-    };
-
-type CheckboxGroupProps = ExtractPropTypes<typeof props>;
-
-type CheckboxGroupExpose = {
-  toggleAll: (options?: CheckboxGroupToggleAllOptions) => void;
-};
-
-export type CheckboxGroupInstance = ComponentPublicInstance<
-  CheckboxGroupProps,
-  CheckboxGroupExpose
->;
-
-export type CheckboxGroupProvide = CheckerParent & {
-  props: CheckboxGroupProps;
-  updateValue: (value: unknown[]) => void;
-};
+export type CheckboxGroupProps = ExtractPropTypes<typeof props>;
 
 export const CHECKBOX_GROUP_KEY: InjectionKey<CheckboxGroupProvide> = Symbol(
   name

src/checkbox-group/index.ts

@@ -8,4 +8,4 @@ export { CheckboxGroup };
 export type {
   CheckboxGroupInstance,
   CheckboxGroupToggleAllOptions,
-} from './CheckboxGroup';
+} from './types';

src/checkbox-group/types.ts

@@ -0,0 +1,24 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { CheckboxGroupProps } from './CheckboxGroup';
+import type { CheckerParent } from '../checkbox/Checker';
+
+export type CheckboxGroupToggleAllOptions =
+  | boolean
+  | {
+      checked?: boolean;
+      skipDisabled?: boolean;
+    };
+
+export type CheckboxGroupExpose = {
+  toggleAll: (options?: CheckboxGroupToggleAllOptions) => void;
+};
+
+export type CheckboxGroupInstance = ComponentPublicInstance<
+  CheckboxGroupProps,
+  CheckboxGroupExpose
+>;
+
+export type CheckboxGroupProvide = CheckerParent & {
+  props: CheckboxGroupProps;
+  updateValue: (value: unknown[]) => void;
+};

src/checkbox/Checkbox.tsx

@@ -1,11 +1,4 @@
-import {
-  watch,
-  computed,
-  ComputedRef,
-  defineComponent,
-  ExtractPropTypes,
-  ComponentPublicInstance,
-} from 'vue';
+import { watch, computed, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import { createNamespace, extend, pick, truthProp } from '../utils';
@@ -19,30 +12,16 @@ import { useLinkField } from '../composables/use-link-field';
 // Components
 import Checker, { checkerProps } from './Checker';
 
+// Types
+import type { CheckboxExpose } from './types';
+
 const [name, bem] = createNamespace('checkbox');
 
 const props = extend({}, checkerProps, {
   bindGroup: truthProp,
 });
 
-type CheckboxProps = ExtractPropTypes<typeof props>;
-
-type CheckboxExpose = {
-  toggle: (newValue?: boolean) => void;
-  /**
-   * @private
-   */
-  props: CheckboxProps;
-  /**
-   * @private
-   */
-  checked: ComputedRef<boolean>;
-};
-
-export type CheckboxInstance = ComponentPublicInstance<
-  CheckboxProps,
-  CheckboxExpose
->;
+export type CheckboxProps = ExtractPropTypes<typeof props>;
 
 export default defineComponent({
   name,

src/checkbox/index.ts

@@ -5,4 +5,4 @@ const Checkbox = withInstall<typeof _Checkbox>(_Checkbox);
 
 export default Checkbox;
 export { Checkbox };
-export type { CheckboxInstance } from './Checkbox';
+export type { CheckboxInstance } from './types';

src/checkbox/types.ts

@@ -0,0 +1,19 @@
+import type { ComponentPublicInstance, ComputedRef } from 'vue';
+import type { CheckboxProps } from './Checkbox';
+
+export type CheckboxExpose = {
+  toggle: (newValue?: boolean) => void;
+  /**
+   * @private
+   */
+  props: CheckboxProps;
+  /**
+   * @private
+   */
+  checked: ComputedRef<boolean>;
+};
+
+export type CheckboxInstance = ComponentPublicInstance<
+  CheckboxProps,
+  CheckboxExpose
+>;

src/composables/use-link-field.ts

@@ -1,5 +1,5 @@
 import { watch, inject, InjectionKey } from 'vue';
-import type { FormProvide } from '../form/Form';
+import type { FormProvide } from '../form/types';
 import type { FieldProvide } from '../field/types';
 
 export const FORM_KEY: InjectionKey<FormProvide> = Symbol('van-form');

src/form/Form.tsx

@@ -1,9 +1,4 @@
-import {
-  PropType,
-  defineComponent,
-  ExtractPropTypes,
-  ComponentPublicInstance,
-} from 'vue';
+import { PropType, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import { truthProp, createNamespace } from '../utils';
@@ -19,6 +14,7 @@ import type {
   FieldValidateError,
   FieldValidateTrigger,
 } from '../field/types';
+import type { FormExpose } from './types';
 
 const [name, bem] = createNamespace('form');
 
@@ -41,23 +37,7 @@ const props = {
   },
 };
 
-type FormProps = ExtractPropTypes<typeof props>;
-
-type FormExpose = {
-  submit: () => void;
-  validate: (name?: string | string[] | undefined) => Promise<void>;
-  scrollToField: (
-    name: string,
-    options?: boolean | ScrollIntoViewOptions | undefined
-  ) => void;
-  resetValidation: (name?: string | string[] | undefined) => void;
-};
-
-export type FormInstance = ComponentPublicInstance<FormProps, FormExpose>;
-
-export type FormProvide = {
-  props: FormProps;
-};
+export type FormProps = ExtractPropTypes<typeof props>;
 
 export default defineComponent({
   name,

src/form/index.ts

@@ -5,4 +5,4 @@ const Form = withInstall<typeof _Form>(_Form);
 
 export default Form;
 export { Form };
-export type { FormInstance } from './Form';
+export type { FormInstance } from './types';

src/form/types.ts

@@ -0,0 +1,18 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { FormProps } from './Form';
+
+export type FormExpose = {
+  submit: () => void;
+  validate: (name?: string | string[] | undefined) => Promise<void>;
+  scrollToField: (
+    name: string,
+    options?: boolean | ScrollIntoViewOptions | undefined
+  ) => void;
+  resetValidation: (name?: string | string[] | undefined) => void;
+};
+
+export type FormProvide = {
+  props: FormProps;
+};
+
+export type FormInstance = ComponentPublicInstance<FormProps, FormExpose>;

src/swipe/README.md

@@ -179,6 +179,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Swipe
 | swipeTo | Swipe to target index | _index: number, options: SwipeToOptions_ | - |
 | resize | Resize Swipe when container element resized or visibility changed | - | - |
 
+### Types
+
+Get the type definition of the Swipe instance through `SwipeInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { SwipeInstance } from 'vant';
+
+const swipeRef = ref<SwipeInstance>();
+
+swipeRef.value?.next();
+```
+
 ### SwipeToOptions
 
 | Name      | Description               | Type      |

src/swipe/README.zh-CN.md

@@ -187,6 +187,19 @@ export default {
 | swipeTo | 切换到指定位置 | _index: number, options: SwipeToOptions_ | - |
 | resize | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - | - |
 
+### 类型定义
+
+通过 `SwipeInstance` 获取 Swipe 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { SwipeInstance } from 'vant';
+
+const swipeRef = ref<SwipeInstance>();
+
+swipeRef.value?.next();
+```
+
 ### SwipeToOptions 格式
 
 | 名称      | 说明         | 类型      |

src/swipe/Swipe.tsx

@@ -4,7 +4,6 @@ import {
   reactive,
   computed,
   onMounted,
-  ComputedRef,
   onActivated,
   InjectionKey,
   CSSProperties,
@@ -34,6 +33,9 @@ import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 import { onPopupReopen } from '../composables/on-popup-reopen';
 
+// Types
+import { SwipeState, SwipeExpose, SwipeProvide, SwipeToOptions } from './types';
+
 const [name, bem] = createNamespace('swipe');
 
 const props = {
@@ -60,16 +62,7 @@ const props = {
   },
 };
 
-export type SwipeToOptions = {
-  immediate?: boolean;
-};
-
-export type SwipeProvide = {
-  props: ExtractPropTypes<typeof props>;
-  size: ComputedRef<number>;
-  count: ComputedRef<number>;
-  activeIndicator: ComputedRef<number>;
-};
+export type SwipeProps = ExtractPropTypes<typeof props>;
 
 export const SWIPE_KEY: InjectionKey<SwipeProvide> = Symbol(name);
 
@@ -82,8 +75,8 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const root = ref<HTMLElement>();
-    const state = reactive({
-      rect: null as { width: number; height: number } | null,
+    const state = reactive<SwipeState>({
+      rect: null,
       width: 0,
       height: 0,
       offset: 0,
@@ -403,7 +396,7 @@ export default defineComponent({
       }
     };
 
-    useExpose({
+    useExpose<SwipeExpose>({
       prev,
       next,
       state,

src/swipe/index.ts

@@ -5,4 +5,4 @@ const Swipe = withInstall<typeof _Swipe>(_Swipe);
 
 export default Swipe;
 export { Swipe };
-export type { SwipeToOptions } from './Swipe';
+export type { SwipeInstance, SwipeToOptions } from './types';

src/swipe/types.ts

@@ -0,0 +1,35 @@
+import type { ComponentPublicInstance, ComputedRef } from 'vue';
+import type { SwipeProps } from './Swipe';
+
+export type SwipeState = {
+  rect: { width: number; height: number } | null;
+  width: number;
+  height: number;
+  offset: number;
+  active: number;
+  swiping: boolean;
+};
+
+export type SwipeToOptions = {
+  immediate?: boolean;
+};
+
+export type SwipeExpose = {
+  prev: () => void;
+  next: () => void;
+  resize: () => void;
+  swipeTo: (index: number, options?: SwipeToOptions) => void;
+  /**
+   * @private
+   */
+  state: SwipeState;
+};
+
+export type SwipeProvide = {
+  props: SwipeProps;
+  size: ComputedRef<number>;
+  count: ComputedRef<number>;
+  activeIndicator: ComputedRef<number>;
+};
+
+export type SwipeInstance = ComponentPublicInstance<SwipeProps, SwipeExpose>;