refactor: input-number

components/anchor/index.tsx

@@ -10,4 +10,6 @@ Anchor.install = function(app: App) {
   app.component(Anchor.Link.name, Anchor.Link);
   return app;
 };
-export default Anchor;
+export default Anchor as typeof Anchor & {
+  readonly Link: typeof AnchorLink;
+};

components/auto-complete/index.tsx

@@ -141,4 +141,7 @@ AutoComplete.install = function(app: App) {
   return app;
 };
 
-export default AutoComplete;
+export default AutoComplete as typeof AutoComplete & {
+  readonly Option: typeof AutoComplete.Option;
+  readonly OptGroup: typeof AutoComplete.OptGroup;
+};

components/breadcrumb/index.ts

@@ -14,4 +14,7 @@ Breadcrumb.install = function(app: App) {
   return app;
 };
 
-export default Breadcrumb;
+export default Breadcrumb as typeof Breadcrumb & {
+  readonly Item: typeof BreadcrumbItem;
+  readonly Separator: typeof BreadcrumbSeparator;
+};

components/button/index.ts

@@ -11,4 +11,6 @@ Button.install = function(app: App) {
   return app;
 };
 
-export default Button;
+export default Button as typeof Button & {
+  readonly Group: typeof ButtonGroup;
+};

components/card/index.ts

@@ -14,4 +14,7 @@ Card.install = function(app: App) {
   return app;
 };
 
-export default Card;
+export default Card as typeof Card & {
+  readonly Meta: typeof Meta;
+  readonly Grid: typeof Grid;
+};

components/checkbox/index.ts

@@ -11,4 +11,6 @@ Checkbox.install = function(app: App) {
   return app;
 };
 
-export default Checkbox;
+export default Checkbox as typeof Checkbox & {
+  readonly Group: typeof CheckboxGroup;
+};

components/collapse/index.ts

@@ -1,13 +1,16 @@
+import { App } from 'vue';
 import Collapse from './Collapse';
 import CollapsePanel from './CollapsePanel';
 
 Collapse.Panel = CollapsePanel;
 
 /* istanbul ignore next */
-Collapse.install = function(app) {
+Collapse.install = function(app: App) {
   app.component(Collapse.name, Collapse);
   app.component(CollapsePanel.name, CollapsePanel);
   return app;
 };
 
-export default Collapse;
+export default Collapse as typeof Collapse & {
+  readonly Panel: typeof CollapsePanel;
+};

components/descriptions/index.tsx

@@ -4,12 +4,7 @@ import ResponsiveObserve, { Breakpoint, responsiveArray } from '../_util/respons
 import { defaultConfigProvider } from '../config-provider';
 import Col from './Col';
 import PropTypes from '../_util/vue-types';
-import {
-  getOptionProps,
-  getComponent,
-  isValidElement,
-  getSlot,
-} from '../_util/props-util';
+import { getOptionProps, getComponent, isValidElement, getSlot } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { tuple, VueNode } from '../_util/type';
 
@@ -57,7 +52,7 @@ export const DescriptionsProps = {
   title: PropTypes.VNodeChild,
   column: {
     type: [Number, Object] as PropType<number | Partial<Record<Breakpoint, number>>>,
-    default: () => defaultColumnMap
+    default: () => defaultColumnMap,
   },
   layout: PropTypes.oneOf(tuple('horizontal', 'vertical')),
   colon: PropTypes.looseBool,
@@ -154,13 +149,9 @@ const Descriptions = defineComponent({
       { prefixCls }: { prefixCls: string },
       bordered: boolean,
       layout: 'horizontal' | 'vertical',
-      colon: boolean
+      colon: boolean,
     ) {
-      const renderCol = (
-        colItem: VNode,
-        type: 'label' | 'content',
-        idx: number
-      ) => {
+      const renderCol = (colItem: VNode, type: 'label' | 'content', idx: number) => {
         return (
           <Col
             child={colItem}
@@ -283,4 +274,6 @@ Descriptions.install = function(app: App) {
   return app;
 };
 
-export default Descriptions;
+export default Descriptions as typeof Descriptions & {
+  readonly Item: typeof DescriptionsItem;
+};

components/form/index.tsx

@@ -1,12 +1,15 @@
+import { App } from 'vue';
 import Form from './Form';
 
 export { FormProps } from './Form';
 
 /* istanbul ignore next */
-Form.install = function(app) {
+Form.install = function(app: App) {
   app.component(Form.name, Form);
   app.component(Form.Item.name, Form.Item);
   return app;
 };
 
-export default Form;
+export default Form as typeof Form & {
+  readonly Item: typeof Form.Item;
+};

components/input-number/index.tsx

@@ -1,22 +1,45 @@
-import { inject } from 'vue';
+import { App, defineComponent, inject, nextTick, onMounted, ref } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { initDefaultProps, getOptionProps } from '../_util/props-util';
+import { getOptionProps } from '../_util/props-util';
 import classNames from '../_util/classNames';
 import UpOutlined from '@ant-design/icons-vue/UpOutlined';
 import DownOutlined from '@ant-design/icons-vue/DownOutlined';
 import VcInputNumber from '../vc-input-number/src';
 import { defaultConfigProvider } from '../config-provider';
+import { tuple } from '../_util/type';
 
-export const InputNumberProps = {
+export interface InputNumberPropsTypes {
+  prefixCls?: string;
+  min?: number;
+  max?: number;
+  value?: number;
+  step?: number | string;
+  defaultValue?: number;
+  tabindex?: number;
+  onChange?: (value: number | undefined) => void;
+  disabled?: boolean;
+  size?: 'large' | 'small' | 'default';
+  formatter?: (value: number | string | undefined) => string;
+  parser?: (displayValue: string | undefined) => number | string;
+  decimalSeparator?: string;
+  placeholder?: string;
+  name?: string;
+  id?: string;
+  precision?: number;
+  onPressEnter?: EventHandlerNonNull;
+  autofocus?: boolean;
+}
+
+const InputNumberProps = {
   prefixCls: PropTypes.string,
   min: PropTypes.number,
   max: PropTypes.number,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(1),
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   tabindex: PropTypes.number,
   disabled: PropTypes.looseBool,
-  size: PropTypes.oneOf(['large', 'small', 'default']),
+  size: PropTypes.oneOf(tuple('large', 'small', 'default')),
   formatter: PropTypes.func,
   parser: PropTypes.func,
   decimalSeparator: PropTypes.string,
@@ -27,44 +50,41 @@ export const InputNumberProps = {
   autofocus: PropTypes.looseBool,
 };
 
-const InputNumber = {
+const InputNumber = defineComponent<InputNumberPropsTypes>({
   name: 'AInputNumber',
   inheritAttrs: false,
-  props: initDefaultProps(InputNumberProps, {
-    step: 1,
-  }),
-  setup() {
+  props: InputNumberProps as any,
+  setup(props) {
+    const inputNumberRef = ref(null);
+    const focus = () => {
+      inputNumberRef.value.focus();
+    };
+    const blur = () => {
+      inputNumberRef.value.blur();
+    };
+    onMounted(() => {
+      nextTick(() => {
+        if (process.env.NODE_ENV === 'test') {
+          if (props.autofocus && !props.disabled) {
+            focus();
+          }
+        }
+      });
+    });
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
+      inputNumberRef,
+      focus,
+      blur,
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      if (process.env.NODE_ENV === 'test') {
-        if (this.autofocus && !this.disabled) {
-          this.focus();
-        }
-      }
-    });
-  },
-  methods: {
-    saveInputNumber(inputNumberRef) {
-      this.inputNumberRef = inputNumberRef;
-    },
-    focus() {
-      this.inputNumberRef.focus();
-    },
-    blur() {
-      this.inputNumberRef.blur();
-    },
-  },
 
   render() {
     const { prefixCls: customizePrefixCls, size, class: className, ...others } = {
       ...getOptionProps(this),
       ...this.$attrs,
-    };
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    } as any;
+    const getPrefixCls = (this as any).configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('input-number', customizePrefixCls);
 
     const inputNumberClass = classNames(
@@ -84,12 +104,12 @@ const InputNumber = {
       ...others,
       class: inputNumberClass,
     };
-    return <VcInputNumber {...vcInputNumberprops} ref={this.saveInputNumber} />;
+    return <VcInputNumber {...vcInputNumberprops} ref="saveInputNumber" />;
   },
-};
+});
 
 /* istanbul ignore next */
-InputNumber.install = function(app) {
+InputNumber.install = function(app: App) {
   app.component(InputNumber.name, InputNumber);
   return app;
 };

examples/App.tsx

@@ -1,4 +1,4 @@
-import Empty from '../components/date-picker';
+import Empty from '../components/input-number';
 import '../components/empty/style';
 
 export default {