refactor: pagination by ts

components/calendar/Header.tsx

@@ -5,9 +5,7 @@ import PropTypes from '../_util/vue-types';
 import { defaultConfigProvider } from '../config-provider';
 import { VueNode } from '../_util/type';
 
-const { Option } = Select;
-
-function getMonthsLocale(value: moment.Moment) {
+function getMonthsLocale(value: moment.Moment): string[] {
   const current = value.clone();
   const localeData = value.localeData();
   const months = [];
@@ -66,29 +64,26 @@ export default defineComponent({
         start = validRange[0].get('year');
         end = validRange[1].get('year') + 1;
       }
-      const suffix = locale.year === '年' ? '年' : '';
-
-      const options = [];
+      const suffix = locale && locale.year === '年' ? '年' : '';
+      const options: { label: string; value: number }[] = [];
       for (let index = start; index < end; index++) {
-        options.push(<Option key={`${index}`}>{(() => index + suffix)()}</Option>);
+        options.push({ label: `${index}${suffix}`, value: index });
       }
       return (
         <Select
-          size={fullscreen ? 'default' : 'small'}
+          size={fullscreen ? undefined : 'small'}
           dropdownMatchSelectWidth={false}
           class={`${prefixCls}-year-select`}
           onChange={this.onYearChange}
           value={String(year)}
+          options={options}
           getPopupContainer={() => this.calendarHeaderNode}
-        >
-          {options}
-        </Select>
+        ></Select>
       );
     },
 
-    getMonthSelectElement(prefixCls: string, month: number, months: number[]) {
+    getMonthSelectElement(prefixCls: string, month: number, months: string[]) {
       const { fullscreen, validRange, value } = this;
-      const options = [];
       let start = 0;
       let end = 12;
       if (validRange) {
@@ -101,21 +96,24 @@ export default defineComponent({
           start = rangeStart.get('month');
         }
       }
-      for (let index = start; index < end; index++) {
-        options.push(<Option key={`${index}`}>{(() => months[index])()}</Option>);
+      const options: { label: string; value: number }[] = [];
+      for (let index = start; index <= end; index += 1) {
+        options.push({
+          label: months[index],
+          value: index,
+        });
       }
 
       return (
         <Select
-          size={fullscreen ? 'default' : 'small'}
+          size={fullscreen ? undefined : 'small'}
           dropdownMatchSelectWidth={false}
           class={`${prefixCls}-month-select`}
-          value={String(month)}
+          value={month}
+          options={options}
           onChange={this.onMonthChange}
           getPopupContainer={() => this.calendarHeaderNode}
-        >
-          {options}
-        </Select>
+        ></Select>
       );
     },
 

components/pagination/MiniSelect.tsx

@@ -1,19 +1,18 @@
+import { defineComponent } from 'vue';
 import VcSelect, { SelectProps } from '../select';
 import { getOptionProps, getSlot } from '../_util/props-util';
 
-export default {
+export default defineComponent({
   inheritAttrs: false,
-  props: {
-    ...SelectProps(),
-  },
+  props: SelectProps(),
   Option: VcSelect.Option,
   render() {
     const selectOptionsProps = getOptionProps(this);
-    const selelctProps = {
+    const selelctProps: any = {
       ...selectOptionsProps,
       size: 'small',
       ...this.$attrs,
     };
     return <VcSelect {...selelctProps}>{getSlot(this)}</VcSelect>;
   },
-};
+});

components/pagination/Pagination.tsx

@@ -10,8 +10,9 @@ import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import DoubleLeftOutlined from '@ant-design/icons-vue/DoubleLeftOutlined';
 import DoubleRightOutlined from '@ant-design/icons-vue/DoubleRightOutlined';
 import { defaultConfigProvider } from '../config-provider';
-import { inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import classNames from '../_util/classNames';
+import { tuple } from '../_util/type';
 
 export const PaginationProps = () => ({
   total: PropTypes.number,
@@ -39,10 +40,10 @@ export const PaginationProps = () => ({
 
 export const PaginationConfig = () => ({
   ...PaginationProps(),
-  position: PropTypes.oneOf(['top', 'bottom', 'both']),
+  position: PropTypes.oneOf(tuple('top', 'bottom', 'both')),
 });
 
-export default {
+export default defineComponent({
   name: 'APagination',
   inheritAttrs: false,
   props: {
@@ -56,7 +57,7 @@ export default {
   },
 
   methods: {
-    getIconsProps(prefixCls) {
+    getIconsProps(prefixCls: string) {
       const prevIcon = (
         <a class={`${prefixCls}-item-link`}>
           <LeftOutlined />
@@ -92,7 +93,7 @@ export default {
         jumpNextIcon,
       };
     },
-    renderPagination(contextLocale) {
+    renderPagination(contextLocale: object) {
       const {
         prefixCls: customizePrefixCls,
         selectPrefixCls: customizeSelectPrefixCls,
@@ -131,4 +132,4 @@ export default {
       ></LocaleReceiver>
     );
   },
-};
+});

components/pagination/index.ts

@@ -1,9 +1,10 @@
+import { App } from 'vue';
 import Pagination from './Pagination';
 
 export { PaginationProps, PaginationConfig } from './Pagination';
 
 /* istanbul ignore next */
-Pagination.install = function(app) {
+Pagination.install = function(app: App) {
   app.component(Pagination.name, Pagination);
   return app;
 };

components/vc-select/generate.tsx

@@ -175,7 +175,7 @@ export interface SelectProps<OptionsType extends object[], ValueType> {
 
   // Options
   options?: OptionsType;
-  children?: VNode[] | JSX.Element[];
+  children?: any[];
   mode?: Mode;
 
   // Value

package.json

@@ -95,7 +95,6 @@
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.1.0",
-    "@vue/server-test-utils": "1.0.0-beta.16",
     "@vue/test-utils": "^2.0.0-beta.2",
     "acorn": "^7.0.0",
     "autoprefixer": "^9.6.0",