refactor: calendar

components/calendar/Header.tsx

@@ -151,16 +151,16 @@ export interface CalendarHeaderProps<DateType> {
 
 export default defineComponent<CalendarHeaderProps<any>>({
   name: 'CalendarHeader',
-  setup(props) {
+  setup(_props, { attrs }) {
     const divRef = ref<HTMLDivElement>(null);
     return () => {
-      const { prefixCls, fullscreen, mode, onChange, onModeChange } = props;
+      const { prefixCls, fullscreen, mode, onChange, onModeChange } = attrs;
       const sharedProps = {
-        ...props,
+        ...attrs,
         onChange,
         fullscreen,
         divRef,
-      };
+      } as any;
 
       return (
         <div class={`${prefixCls}-header`} ref={divRef}>

components/calendar/date-fns.tsx

@@ -0,0 +1,8 @@
+import generateConfig from '../vc-picker/generate/dateFns';
+import { withInstall } from '../_util/type';
+import generateCalendar, { CalendarProps } from './generateCalendar';
+
+const Calendar = generateCalendar<Date>(generateConfig);
+
+export { CalendarProps };
+export default withInstall(Calendar);

components/calendar/dayjs.tsx

@@ -0,0 +1,9 @@
+import { Dayjs } from 'dayjs';
+import generateConfig from '../vc-picker/generate/dayjs';
+import { withInstall } from '../_util/type';
+import generateCalendar, { CalendarProps } from './generateCalendar';
+
+const Calendar = generateCalendar<Dayjs>(generateConfig);
+
+export { CalendarProps };
+export default withInstall(Calendar);

components/calendar/generateCalendar.tsx

@@ -12,7 +12,7 @@ import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
 import enUS from './locale/en_US';
 import CalendarHeader from './Header';
 import { VueNode } from '../_util/type';
-import { computed, defineComponent, toRef } from 'vue';
+import { App, computed, defineComponent, toRef } from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import classNames from '../_util/classNames';
 
@@ -303,7 +303,10 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
       };
     },
   });
-
+  Calendar.install = function (app: App) {
+    app.component(Calendar.name, Calendar);
+    return app;
+  };
   return Calendar;
 }
 

components/calendar/index.tsx

@@ -1,8 +1,4 @@
-import { Moment } from 'moment';
+import Calendar from './dayjs';
-import momentGenerateConfig from '../vc-picker/generate/moment';
+export * from './dayjs';
-import generateCalendar, { CalendarProps } from './generateCalendar';
 
-const Calendar = generateCalendar<Moment>(momentGenerateConfig);
-
-export { CalendarProps };
 export default Calendar;

components/calendar/moment.tsx

@@ -0,0 +1,9 @@
+import { Moment } from 'moment';
+import generateConfig from '../vc-picker/generate/moment';
+import { withInstall } from '../_util/type';
+import generateCalendar, { CalendarProps } from './generateCalendar';
+
+const Calendar = generateCalendar<Moment>(generateConfig);
+
+export { CalendarProps };
+export default withInstall(Calendar);