types(Picker): add PickerInstance type (#9183)

src/picker/Picker.tsx

@@ -1,4 +1,11 @@
-import { ref, watch, computed, PropType, defineComponent } from 'vue';
+import {
+  ref,
+  watch,
+  computed,
+  PropType,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import {
@@ -16,31 +23,20 @@ import { useExpose } from '../composables/use-expose';
 
 // Components
 import { Loading } from '../loading';
-import Column, {
-  PICKER_KEY,
+import Column, { PICKER_KEY } from './PickerColumn';
+
+// Types
+import type {
   PickerColumn,
   PickerOption,
+  PickerExpose,
+  PickerFieldNames,
   PickerObjectColumn,
-  PickerObjectOption,
-} from './PickerColumn';
+  PickerToolbarPosition,
+} from './types';
 
 const [name, bem, t] = createNamespace('picker');
 
-export type PickerToolbarPosition = 'top' | 'bottom';
-
-export type PickerFieldNames = {
-  text?: string;
-  values?: string;
-  children?: string;
-};
-
-export type {
-  PickerColumn,
-  PickerOption,
-  PickerObjectColumn,
-  PickerObjectOption,
-};
-
 export const pickerProps = {
   title: String,
   loading: Boolean,
@@ -63,6 +59,8 @@ export const pickerProps = {
   },
 };
 
+export type PickerProps = ExtractPropTypes<typeof pickerProps>;
+
 export default defineComponent({
   name,
 
@@ -380,7 +378,7 @@ export default defineComponent({
 
     watch(() => props.columns, format, { immediate: true });
 
-    useExpose({
+    useExpose<PickerExpose>({
       confirm,
       getValues,
       setValues,

src/picker/PickerColumn.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-use-before-define */
 import { ref, watch, reactive, PropType, defineComponent } from 'vue';
 
 // Utils
@@ -16,6 +15,9 @@ import { useParent } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 
+// Types
+import type { PickerOption } from './types';
+
 const DEFAULT_DURATION = 200;
 
 // 惯性滑动思路:
@@ -36,26 +38,6 @@ function getElementTranslateY(element: Element) {
 
 export const PICKER_KEY = Symbol(name);
 
-export type PickerObjectOption = {
-  text?: string | number;
-  disabled?: boolean;
-  // for custom filed names
-  [key: string]: any;
-};
-
-export type PickerOption = string | number | PickerObjectOption;
-
-export type PickerObjectColumn = {
-  values?: PickerOption[];
-  children?: PickerColumn;
-  className?: unknown;
-  defaultIndex?: number;
-  // for custom filed names
-  [key: string]: any;
-};
-
-export type PickerColumn = PickerOption[] | PickerObjectColumn;
-
 function isOptionDisabled(option: PickerOption) {
   return isObject(option) && option.disabled;
 }
@@ -316,7 +298,7 @@ export default defineComponent({
       }
     };
 
-    const getValue = () => state.options[state.index];
+    const getValue = (): PickerOption => state.options[state.index];
 
     setIndex(state.index);
 

src/picker/README.md

@@ -382,6 +382,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Picker
 | setColumnValues | Set columns data of the column | columnIndex, values | - |
 | confirm | Stop scrolling and emit confirm event | - | - |
 
+### Types
+
+Get the type definition of the Picker instance through `PickerInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { PickerInstance } from 'vant';
+
+const pickerRef = ref<PickerInstance>();
+
+pickerRef.value?.confirm();
+```
+
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).

src/picker/README.zh-CN.md

@@ -407,6 +407,19 @@ export default {
 | setColumnValues | 设置对应列中所有选项 | columnIndex, values | - |
 | confirm | 停止惯性滚动并触发 confirm 事件 | - | - |
 
+### 类型定义
+
+通过 `PickerInstance` 获取 Picker 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { PickerInstance } from 'vant';
+
+const pickerRef = ref<PickerInstance>();
+
+pickerRef.value?.confirm();
+```
+
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。

src/picker/index.ts

@@ -8,8 +8,9 @@ export { Picker };
 export type {
   PickerColumn,
   PickerOption,
+  PickerInstance,
   PickerFieldNames,
   PickerObjectColumn,
   PickerObjectOption,
   PickerToolbarPosition,
-} from './Picker';
+} from './types';

src/picker/types.ts

@@ -0,0 +1,47 @@
+/* eslint-disable no-use-before-define */
+import type { ComponentPublicInstance } from 'vue';
+import type { PickerProps } from './Picker';
+
+export type PickerToolbarPosition = 'top' | 'bottom';
+
+export type PickerFieldNames = {
+  text?: string;
+  values?: string;
+  children?: string;
+};
+
+export type PickerObjectOption = {
+  text?: string | number;
+  disabled?: boolean;
+  // for custom filed names
+  [key: string]: any;
+};
+
+export type PickerOption = string | number | PickerObjectOption;
+
+export type PickerObjectColumn = {
+  values?: PickerOption[];
+  children?: PickerColumn;
+  className?: unknown;
+  defaultIndex?: number;
+  // for custom filed names
+  [key: string]: any;
+};
+
+export type PickerColumn = PickerOption[] | PickerObjectColumn;
+
+export type PickerExpose = {
+  confirm: () => void;
+  getValues: () => PickerOption[];
+  setValues: (values: string[]) => void;
+  getIndexes: () => number[];
+  setIndexes: (indexes: number[]) => void;
+  getColumnIndex: (index: number) => number;
+  setColumnIndex: (columnIndex: number, optionIndex: number) => void;
+  getColumnValue: (index: number) => PickerOption;
+  setColumnValue: (index: number, value: string) => void;
+  getColumnValues: (index: number) => PickerOption[];
+  setColumnValues: (index: number, options: PickerOption[]) => void;
+};
+
+export type PickerInstance = ComponentPublicInstance<PickerProps, PickerExpose>;