refactor: reorganize all components (#8303)

src/calendar/Calendar.tsx

@@ -1,4 +1,12 @@
-import { ref, watch, reactive, computed, PropType, TeleportProps } from 'vue';
+import {
+  ref,
+  watch,
+  reactive,
+  computed,
+  PropType,
+  TeleportProps,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import { pick, getScrollTop, ComponentInstance } from '../utils';
@@ -6,6 +14,7 @@ import { isDate } from '../utils/validate/date';
 import {
   t,
   bem,
+  name,
   copyDate,
   copyDates,
   getPrevDay,
@@ -13,7 +22,6 @@ import {
   compareDay,
   calcDateNum,
   compareMonth,
-  createComponent,
   getDayByOffset,
 } from './utils';
 
@@ -26,20 +34,22 @@ import { useExpose } from '../composables/use-expose';
 import Popup, { PopupPosition } from '../popup';
 import Button from '../button';
 import Toast from '../toast';
-import Month, { CalendarType } from './components/Month';
-import Header from './components/Header';
+import CalendarMonth, { CalendarType } from './CalendarMonth';
+import CalendarHeader from './CalendarHeader';
 
 // Types
-import type { DayItem } from './components/Day';
+import type { CalendarDayItem } from './CalendarDay';
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     show: Boolean,
     title: String,
     color: String,
     readonly: Boolean,
     teleport: [String, Object] as PropType<TeleportProps['to']>,
-    formatter: Function as PropType<(item: DayItem) => DayItem>,
+    formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
     rowHeight: [Number, String],
     confirmText: String,
     rangePrompt: String,
@@ -364,7 +374,7 @@ export default createComponent({
       }
     };
 
-    const onClickDay = (item: DayItem) => {
+    const onClickDay = (item: CalendarDayItem) => {
       if (props.readonly || !item.date) {
         return;
       }
@@ -429,7 +439,7 @@ export default createComponent({
     const renderMonth = (date: Date, index: number) => {
       const showMonthTitle = index !== 0 || !props.showSubtitle;
       return (
-        <Month
+        <CalendarMonth
           ref={setMonthRefs(index)}
           date={date}
           currentDate={state.currentDate}
@@ -487,7 +497,7 @@ export default createComponent({
 
     const renderCalendar = () => (
       <div class={bem()}>
-        <Header
+        <CalendarHeader
           v-slots={{ title: slots.title }}
           title={props.title}
           showTitle={props.showTitle}

src/calendar/CalendarDay.tsx

@@ -1,10 +1,10 @@
-import { computed, CSSProperties, PropType } from 'vue';
-import { createNamespace } from '../../utils';
-import { bem } from '../utils';
+import { computed, CSSProperties, PropType, defineComponent } from 'vue';
+import { createNamespace } from '../utils';
+import { bem } from './utils';
 
-const [createComponent] = createNamespace('calendar-day');
+const [name] = createNamespace('calendar-day');
 
-export type DayType =
+export type CalendarDayType =
   | ''
   | 'start'
   | 'start-end'
@@ -16,16 +16,18 @@ export type DayType =
   | 'disabled'
   | 'placeholder';
 
-export type DayItem = {
+export type CalendarDayItem = {
   date?: Date;
   text?: string | number;
-  type?: DayType;
+  type?: CalendarDayType;
   topInfo?: string;
   className?: unknown;
   bottomInfo?: string;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     color: String,
     index: Number,
@@ -35,7 +37,7 @@ export default createComponent({
       default: 0,
     },
     item: {
-      type: Object as PropType<DayItem>,
+      type: Object as PropType<CalendarDayItem>,
       required: true,
     },
   },

src/calendar/CalendarHeader.tsx

@@ -1,9 +1,12 @@
-import { createNamespace } from '../../utils';
-import { t, bem } from '../utils';
+import { defineComponent } from 'vue';
+import { createNamespace } from '../utils';
+import { t, bem } from './utils';
 
-const [createComponent] = createNamespace('calendar-header');
+const [name] = createNamespace('calendar-header');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     title: String,
     subtitle: String,

src/calendar/CalendarMonth.tsx

@@ -1,8 +1,8 @@
-import { ref, computed, PropType } from 'vue';
+import { ref, computed, PropType, defineComponent } from 'vue';
 
 // Utils
-import { addUnit, setScrollTop, createNamespace } from '../../utils';
-import { getMonthEndDay } from '../../datetime-picker/utils';
+import { addUnit, setScrollTop, createNamespace } from '../utils';
+import { getMonthEndDay } from '../datetime-picker/utils';
 import {
   t,
   bem,
@@ -10,27 +10,29 @@ import {
   getPrevDay,
   getNextDay,
   formatMonthTitle,
-} from '../utils';
+} from './utils';
 
 // Composables
 import { useToggle } from '@vant/use';
-import { useExpose } from '../../composables/use-expose';
-import { useHeight } from '../../composables/use-height';
+import { useExpose } from '../composables/use-expose';
+import { useHeight } from '../composables/use-height';
 
 // Components
-import Day, { DayItem, DayType } from './Day';
+import CalendarDay, { CalendarDayItem, CalendarDayType } from './CalendarDay';
 
-const [createComponent] = createNamespace('calendar-month');
+const [name] = createNamespace('calendar-month');
 
 export type CalendarType = 'single' | 'range' | 'multiple';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     type: String as PropType<CalendarType>,
     color: String,
     showMark: Boolean,
     rowHeight: [Number, String],
-    formatter: Function as PropType<(item: DayItem) => DayItem>,
+    formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
     lazyRender: Boolean,
     currentDate: [Date, Array] as PropType<Date | Date[]>,
     allowSameDay: Boolean,
@@ -147,7 +149,7 @@ export default createComponent({
       return '';
     };
 
-    const getDayType = (day: Date): DayType => {
+    const getDayType = (day: Date): CalendarDayType => {
       const { type, minDate, maxDate, currentDate } = props;
 
       if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
@@ -172,7 +174,7 @@ export default createComponent({
       return '';
     };
 
-    const getBottomInfo = (dayType: DayType) => {
+    const getBottomInfo = (dayType: CalendarDayType) => {
       if (props.type === 'range') {
         if (dayType === 'start' || dayType === 'end') {
           return t(dayType);
@@ -195,13 +197,13 @@ export default createComponent({
       }
     };
 
-    const placeholders = computed<DayItem[]>(() => {
+    const placeholders = computed<CalendarDayItem[]>(() => {
       const count = Math.ceil((totalDay.value + offset.value) / 7);
       return Array(count).fill({ type: 'placeholder' });
     });
 
     const days = computed(() => {
-      const days: DayItem[] = [];
+      const days: CalendarDayItem[] = [];
       const year = props.date.getFullYear();
       const month = props.date.getMonth();
 
@@ -209,7 +211,7 @@ export default createComponent({
         const date = new Date(year, month, day);
         const type = getDayType(date);
 
-        let config: DayItem = {
+        let config: CalendarDayItem = {
           date,
           type,
           text: day,
@@ -226,8 +228,8 @@ export default createComponent({
       return days;
     });
 
-    const renderDay = (item: DayItem, index: number) => (
-      <Day
+    const renderDay = (item: CalendarDayItem, index: number) => (
+      <CalendarDay
         item={item}
         index={index}
         color={props.color}

src/calendar/demo/index.vue

@@ -122,7 +122,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import { DayItem } from '../components/Day';
+import { CalendarDayItem } from '../CalendarDay';
 
 const i18n = {
   'zh-CN': {
@@ -223,7 +223,7 @@ export default {
       state.firstDayOfWeek = 0;
     };
 
-    const dayFormatter = (day: DayItem) => {
+    const dayFormatter = (day: CalendarDayItem) => {
       if (!day.date) {
         return day;
       }

src/calendar/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Calendar from './Calendar';
+
+const Calendar = installable(_Calendar);
+
+export default Calendar;
+export { Calendar };

src/calendar/utils.ts

@@ -1,8 +1,8 @@
 import { createNamespace } from '../utils';
 
-const [createComponent, bem, t] = createNamespace('calendar');
+const [name, bem, t] = createNamespace('calendar');
 
-export { createComponent, bem, t };
+export { name, bem, t };
 
 export function formatMonthTitle(date: Date) {
   return t('monthTitle', date.getFullYear(), date.getMonth() + 1);