fix: component ts type

Author: tangjinzhou

components/checkbox/Checkbox.tsx

@@ -59,7 +59,13 @@ export default defineComponent({
     });
     return () => {
       const children = flattenChildren(slots.default?.());
-      const { indeterminate, skipGroup, id = formItemContext.id.value, ...restProps } = props;
+      const {
+        indeterminate,
+        skipGroup,
+        id = formItemContext.id.value,
+        onClick,
+        ...restProps
+      } = props;
       const { onMouseenter, onMouseleave, onInput, class: className, style, ...restAttrs } = attrs;
       const checkboxProps: CheckboxProps = {
         ...restProps,
@@ -97,6 +103,7 @@ export default defineComponent({
           style={style}
           onMouseenter={onMouseenter as EventHandler}
           onMouseleave={onMouseleave as EventHandler}
+          onClick={onClick}
         >
           <VcCheckbox {...checkboxProps} class={checkboxClass} ref={checkboxRef} />
           {children.length ? <span>{children}</span> : null}

components/checkbox/interface.ts

@@ -53,6 +53,7 @@ export const abstractCheckboxProps = () => {
     autofocus: { type: Boolean, default: undefined },
     onChange: PropTypes.func,
     'onUpdate:checked': PropTypes.func,
+    onClick: PropTypes.func,
     skipGroup: { type: Boolean, default: false },
   };
 };

components/components.ts

@@ -102,7 +102,7 @@ export { default as List, ListItem, ListItemMeta } from './list';
 export type { MessageArgsProps } from './message';
 export { default as message } from './message';
 
-export type { MenuProps, MenuTheme, SubMenuProps, MenuItemProps } from './menu';
+export type { MenuProps, MenuTheme, SubMenuProps, MenuItemProps, MenuMode } from './menu';
 export { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu';
 
 export type { MentionsProps } from './mentions';

components/input-number/src/InputNumber.tsx

@@ -74,6 +74,8 @@ export const inputNumberProps = {
       (value: ValueType, info: { offset: ValueType; type: 'up' | 'down' }) => void
     >,
   },
+  onBlur: { type: Function as PropType<(e: InputEvent) => void> },
+  onFocus: { type: Function as PropType<(e: InputEvent) => void> },
 };
 
 export default defineComponent({

components/menu/demo/switch-mode.vue

@@ -78,6 +78,7 @@ import {
   AppstoreOutlined,
   SettingOutlined,
 } from '@ant-design/icons-vue';
+import type { MenuMode, MenuTheme } from 'ant-design-vue';
 export default defineComponent({
   components: {
     MailOutlined,
@@ -87,8 +88,8 @@ export default defineComponent({
   },
   setup() {
     const state = reactive({
-      mode: 'inline',
-      theme: 'light',
+      mode: 'inline' as MenuMode,
+      theme: 'light' as MenuTheme,
       selectedKeys: ['1'],
       openKeys: ['sub1'],
     });

components/menu/demo/theme.vue

@@ -78,6 +78,7 @@ import {
   AppstoreOutlined,
   SettingOutlined,
 } from '@ant-design/icons-vue';
+import type { MenuTheme } from 'ant-design-vue';
 export default defineComponent({
   components: {
     MailOutlined,
@@ -87,7 +88,7 @@ export default defineComponent({
   },
   setup() {
     const state = reactive({
-      theme: 'dark',
+      theme: 'dark' as MenuTheme,
       selectedKeys: ['1'],
       openKeys: ['sub1'],
     });

components/menu/demo/vertical.vue

@@ -68,13 +68,8 @@ import {
   AppstoreOutlined,
   SettingOutlined,
 } from '@ant-design/icons-vue';
+import type { MenuProps } from 'ant-design-vue';
 
-interface MenuInfo {
-  key: string;
-  keyPath: string[];
-  item: any;
-  domEvent: MouseEvent;
-}
 export default defineComponent({
   components: {
     MailOutlined,
@@ -87,8 +82,8 @@ export default defineComponent({
       selectedKeys: [],
       openKeys: [],
     });
-    const handleClick = (e: MenuInfo) => {
-      console.log('click ', e);
+    const handleClick: MenuProps['onClick'] = menuInfo => {
+      console.log('click ', menuInfo);
     };
     return {
       ...toRefs(state),

components/menu/index.en-US.md

@@ -34,7 +34,7 @@ More layouts with navigation: [Layout](/components/layout).
 | forceSubMenuRender | render submenu into DOM before it shows | boolean | false |
 | inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - |
 | inlineIndent | indent px of inline menu item on each level | number | 24 |
-| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | string: `vertical` \| `vertical-right` \| `horizontal` \| `inline` | `vertical` |
+| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | `vertical` \| `horizontal` \| `inline` | `vertical` |
 | multiple | Allow selection of multiple items | boolean | false |
 | openKeys(v-model) | array with the keys of currently opened sub menus | string\[] |  |
 | selectable | allow selecting menu items | boolean | true |

components/menu/index.tsx

@@ -8,7 +8,7 @@ import type { MenuItemGroupProps } from './src/ItemGroup';
 import ItemGroup from './src/ItemGroup';
 import Divider from './src/Divider';
 import type { App, Plugin } from 'vue';
-import type { MenuTheme } from './src/interface';
+import type { MenuTheme, MenuMode } from './src/interface';
 /* istanbul ignore next */
 Menu.install = function (app: App) {
   app.component(Menu.name, Menu);
@@ -23,7 +23,7 @@ Menu.Item = MenuItem;
 Menu.Divider = Divider;
 Menu.SubMenu = SubMenu;
 Menu.ItemGroup = ItemGroup;
-export type { MenuProps, SubMenuProps, MenuItemProps, MenuItemGroupProps, MenuTheme };
+export type { MenuProps, SubMenuProps, MenuItemProps, MenuItemGroupProps, MenuTheme, MenuMode };
 export {
   SubMenu,
   MenuItem as Item,

components/menu/index.zh-CN.md

@@ -35,7 +35,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
 | forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |
 | inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |
 | inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
-| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | string: `vertical` `vertical-right` `horizontal` `inline` | `vertical` |
+| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` |
 | multiple | 是否允许多选 | boolean | false |
 | openKeys(v-model) | 当前展开的 SubMenu 菜单项 key 数组 | string\[] |  |
 | selectable | 是否允许选中 | boolean | true |

components/menu/src/Menu.tsx

@@ -12,6 +12,8 @@ import type {
   TriggerSubMenuAction,
   MenuInfo,
   SelectInfo,
+  MenuClickEventHandler,
+  SelectEventHandler,
 } from './interface';
 import devWarning from '../../vc-util/devWarning';
 import type { CSSMotionProps } from '../../_util/transition';
@@ -25,6 +27,7 @@ import SubMenu from './SubMenu';
 import EllipsisOutlined from '@ant-design/icons-vue/EllipsisOutlined';
 import { cloneElement } from '../../_util/vnode';
 import { OVERFLOW_KEY, PathContext } from './hooks/useKeyPath';
+import type { FocusEventHandler } from '../../_util/EventInterface';
 
 export const menuProps = {
   id: String,
@@ -55,6 +58,15 @@ export const menuProps = {
   getPopupContainer: Function as PropType<(node: HTMLElement) => HTMLElement>,
 
   expandIcon: Function as PropType<(p?: { isOpen: boolean; [key: string]: any }) => any>,
+  onOpenChange: Function as PropType<(keys: Key[]) => void>,
+  onSelect: Function as PropType<SelectEventHandler>,
+  onDeselect: Function as PropType<SelectEventHandler>,
+  onClick: Function as PropType<MenuClickEventHandler>,
+  onFocus: Function as PropType<FocusEventHandler>,
+  onBlur: Function as PropType<FocusEventHandler>,
+  'onUpdate:openKeys': Function as PropType<(keys: Key[]) => void>,
+  'onUpdate:selectedKeys': Function as PropType<(keys: Key[]) => void>,
+  'onUpdate:activeKey': Function as PropType<(key: Key) => void>,
 };
 
 export type MenuProps = Partial<ExtractPropTypes<typeof menuProps>>;
@@ -64,15 +76,6 @@ export default defineComponent({
   name: 'AMenu',
   inheritAttrs: false,
   props: menuProps,
-  emits: [
-    'update:openKeys',
-    'openChange',
-    'select',
-    'deselect',
-    'update:selectedKeys',
-    'click',
-    'update:activeKey',
-  ],
   slots: ['expandIcon', 'overflowedIndicator'],
   setup(props, { slots, emit, attrs }) {
     const { prefixCls, direction, getPrefixCls } = useConfigInject('menu', props);

components/radio/Radio.tsx

@@ -20,6 +20,7 @@ export const radioProps = {
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
+  onClick: PropTypes.func,
 };
 
 export type RadioProps = Partial<ExtractPropTypes<typeof radioProps>>;
@@ -61,7 +62,12 @@ export default defineComponent({
 
     return () => {
       const radioGroup = radioGroupContext;
-      const { prefixCls: customizePrefixCls, id = formItemContext.id.value, ...restProps } = props;
+      const {
+        prefixCls: customizePrefixCls,
+        id = formItemContext.id.value,
+        onClick,
+        ...restProps
+      } = props;
 
       const rProps: RadioProps = {
         prefixCls: prefixCls.value,
@@ -85,7 +91,7 @@ export default defineComponent({
       });
 
       return (
-        <label class={wrapperClassString}>
+        <label class={wrapperClassString} onClick={onClick}>
           <VcCheckbox {...rProps} ref={vcCheckbox} />
           {slots.default && <span>{slots.default()}</span>}
         </label>

components/vc-overflow/RawItem.tsx

@@ -11,6 +11,11 @@ export default defineComponent({
     component: PropTypes.any,
     title: PropTypes.any,
     id: String,
+    onMouseenter: { type: Function },
+    onMouseleave: { type: Function },
+    onClick: { type: Function },
+    onKeydown: { type: Function },
+    onFocus: { type: Function },
   },
   setup(props, { slots, attrs }) {
     const context = useInjectOverflowContext();

components/vc-pagination/Pager.tsx

@@ -16,6 +16,12 @@ export default defineComponent({
       type: Function,
       default: () => {},
     },
+    onClick: {
+      type: Function,
+    },
+    onKeypress: {
+      type: Function,
+    },
   },
   eimt: ['click', 'keypress'],
   setup(props, { emit, attrs }) {