types: add CalendarInstance type (#9165)

* types: add CalendarInstance type

* types: fix

src/calendar/Calendar.tsx

@@ -6,6 +6,7 @@ import {
   PropType,
   TeleportProps,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -40,75 +41,79 @@ import { useExpose } from '../composables/use-expose';
 import { Popup, PopupPosition } from '../popup';
 import { Button } from '../button';
 import { Toast } from '../toast';
-import CalendarMonth, { CalendarType } from './CalendarMonth';
+import CalendarMonth from './CalendarMonth';
 import CalendarHeader from './CalendarHeader';
 
 // Types
-import type { CalendarDayItem } from './CalendarDay';
+import type { CalendarType, CalendarExpose, CalendarDayItem } from './types';
+
+const props = {
+  show: Boolean,
+  title: String,
+  color: String,
+  round: truthProp,
+  readonly: Boolean,
+  poppable: truthProp,
+  teleport: [String, Object] as PropType<TeleportProps['to']>,
+  showMark: truthProp,
+  showTitle: truthProp,
+  formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
+  rowHeight: [Number, String],
+  confirmText: String,
+  rangePrompt: String,
+  lazyRender: truthProp,
+  showConfirm: truthProp,
+  // TODO: remove any
+  // see: https://github.com/vuejs/vue-next/issues/2668
+  defaultDate: [Date, Array] as any,
+  allowSameDay: Boolean,
+  showSubtitle: truthProp,
+  closeOnPopstate: truthProp,
+  confirmDisabledText: String,
+  closeOnClickOverlay: truthProp,
+  safeAreaInsetBottom: truthProp,
+  type: {
+    type: String as PropType<CalendarType>,
+    default: 'single',
+  },
+  position: {
+    type: String as PropType<PopupPosition>,
+    default: 'bottom',
+  },
+  maxRange: {
+    type: [Number, String],
+    default: null,
+  },
+  minDate: {
+    type: Date,
+    validator: isDate,
+    default: getToday,
+  },
+  maxDate: {
+    type: Date,
+    validator: isDate,
+    default: () => {
+      const now = getToday();
+      return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
+    },
+  },
+  firstDayOfWeek: {
+    type: [Number, String],
+    default: 0,
+    validator: (val: number) => val >= 0 && val <= 6,
+  },
+  showRangePrompt: {
+    type: Boolean,
+    default: true,
+  },
+};
+
+export type CalendarProps = ExtractPropTypes<typeof props>;
 
 export default defineComponent({
   name,
 
-  props: {
-    show: Boolean,
-    title: String,
-    color: String,
-    round: truthProp,
-    readonly: Boolean,
-    poppable: truthProp,
-    teleport: [String, Object] as PropType<TeleportProps['to']>,
-    showMark: truthProp,
-    showTitle: truthProp,
-    formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
-    rowHeight: [Number, String],
-    confirmText: String,
-    rangePrompt: String,
-    lazyRender: truthProp,
-    showConfirm: truthProp,
-    // TODO: remove any
-    // see: https://github.com/vuejs/vue-next/issues/2668
-    defaultDate: [Date, Array] as any,
-    allowSameDay: Boolean,
-    showSubtitle: truthProp,
-    closeOnPopstate: truthProp,
-    confirmDisabledText: String,
-    closeOnClickOverlay: truthProp,
-    safeAreaInsetBottom: truthProp,
-    type: {
-      type: String as PropType<CalendarType>,
-      default: 'single',
-    },
-    position: {
-      type: String as PropType<PopupPosition>,
-      default: 'bottom',
-    },
-    maxRange: {
-      type: [Number, String],
-      default: null,
-    },
-    minDate: {
-      type: Date,
-      validator: isDate,
-      default: getToday,
-    },
-    maxDate: {
-      type: Date,
-      validator: isDate,
-      default: () => {
-        const now = getToday();
-        return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
-      },
-    },
-    firstDayOfWeek: {
-      type: [Number, String],
-      default: 0,
-      validator: (val: number) => val >= 0 && val <= 6,
-    },
-    showRangePrompt: {
-      type: Boolean,
-      default: true,
-    },
-  },
+  props,
 
   emits: [
     'select',
@@ -522,7 +527,7 @@ export default defineComponent({
       }
     );
 
-    useExpose({
+    useExpose<CalendarExpose>({
       reset,
       scrollToDate,
     });

src/calendar/CalendarDay.tsx

@@ -1,30 +1,10 @@
 import { computed, CSSProperties, PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { bem } from './utils';
+import type { CalendarDayItem } from './types';
 
 const [name] = createNamespace('calendar-day');
 
-export type CalendarDayType =
-  | ''
-  | 'start'
-  | 'start-end'
-  | 'middle'
-  | 'end'
-  | 'selected'
-  | 'multiple-middle'
-  | 'multiple-selected'
-  | 'disabled'
-  | 'placeholder';
-
-export type CalendarDayItem = {
-  date?: Date;
-  text?: string | number;
-  type?: CalendarDayType;
-  topInfo?: string;
-  className?: unknown;
-  bottomInfo?: string;
-};
-
 export default defineComponent({
   name,
 

src/calendar/CalendarMonth.tsx

@@ -18,12 +18,13 @@ import { useExpose } from '../composables/use-expose';
 import { useHeight } from '../composables/use-height';
 
 // Components
-import CalendarDay, { CalendarDayItem, CalendarDayType } from './CalendarDay';
+import CalendarDay from './CalendarDay';
+
+// Types
+import type { CalendarType, CalendarDayItem, CalendarDayType } from './types';
 
 const [name] = createNamespace('calendar-month');
 
-export type CalendarType = 'single' | 'range' | 'multiple';
-
 export default defineComponent({
   name,
 

src/calendar/README.md

@@ -347,6 +347,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Calend
 | reset | Reset selected date, will reset to default date when no params passed | _date?: Date \| Date[]_ | - |
 | scrollToDate | Scroll to date | _date: Date_ | - |
 
+### Types
+
+Get the type definition of the Calendar instance through `CalendarInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { CalendarInstance } from 'vant';
+
+const calendarRef = ref<CalendarInstance>();
+
+calendarRef.value?.reset();
+```
+
 ### 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/calendar/README.zh-CN.md

@@ -353,6 +353,19 @@ export default {
 | reset | 将选中的日期重置到指定日期，未传参时会重置到默认日期 | _date?: Date \| Date[]_ | - |
 | scrollToDate | 滚动到某个日期 | _date: Date_ | - |
 
+### 类型定义
+
+通过 `CalendarInstance` 获取 Calendar 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { CalendarInstance } from 'vant';
+
+const calendarRef = ref<CalendarInstance>();
+
+calendarRef.value?.reset();
+```
+
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。

src/calendar/demo/index.vue

@@ -120,9 +120,9 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs } from 'vue';
+import { defineComponent, reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import { CalendarDayItem } from '../CalendarDay';
+import type { CalendarDayItem } from '../types';
 
 const i18n = {
   'zh-CN': {
@@ -175,7 +175,7 @@ const i18n = {
   },
 };
 
-export default {
+export default defineComponent({
   setup() {
     const t = useTranslate(i18n);
     const state = reactive<Record<string, any>>({
@@ -331,5 +331,5 @@ export default {
       formatMultiple,
     };
   },
-};
+});
 </script>

src/calendar/index.ts

@@ -5,5 +5,9 @@ const Calendar = withInstall<typeof _Calendar>(_Calendar);
 
 export default Calendar;
 export { Calendar };
-export type { CalendarType } from './CalendarMonth';
-export type { CalendarDayItem, CalendarDayType } from './CalendarDay';
+export type {
+  CalendarType,
+  CalendarDayItem,
+  CalendarDayType,
+  CalendarInstance,
+} from './types';

src/calendar/types.ts

@@ -0,0 +1,35 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { CalendarProps } from './Calendar';
+
+export type CalendarType = 'single' | 'range' | 'multiple';
+
+export type CalendarDayType =
+  | ''
+  | 'start'
+  | 'start-end'
+  | 'middle'
+  | 'end'
+  | 'selected'
+  | 'multiple-middle'
+  | 'multiple-selected'
+  | 'disabled'
+  | 'placeholder';
+
+export type CalendarDayItem = {
+  date?: Date;
+  text?: string | number;
+  type?: CalendarDayType;
+  topInfo?: string;
+  className?: unknown;
+  bottomInfo?: string;
+};
+
+export type CalendarExpose = {
+  reset: (date?: Date | Date[]) => void;
+  scrollToDate: (targetDate: Date) => void;
+};
+
+export type CalendarInstance = ComponentPublicInstance<
+  CalendarProps,
+  CalendarExpose
+>;