fix: component ts type

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',
+      mode: 'inline' as MenuMode,
-      theme: 'light',
+      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) => {
+    const handleClick: MenuProps['onClick'] = menuInfo => {
-      console.log('click ', e);
+      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 }) {

components/vc-slider/src/Handle.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'vue';
+import type { CSSProperties, PropType } from 'vue';
 import { computed, defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import classNames from '../../_util/classNames';
 import PropTypes from '../../_util/vue-types';
@@ -20,6 +20,9 @@ export default defineComponent({
     ariaLabel: String,
     ariaLabelledBy: String,
     ariaValueTextFormatter: Function,
+    onMouseenter: { type: Function as PropType<(payload: MouseEvent) => void> },
+    onMouseleave: { type: Function as PropType<(payload: MouseEvent) => void> },
+    onMousedown: { type: Function as PropType<(payload: MouseEvent) => void> },
   },
   setup(props, { attrs, emit, expose }) {
     const clickFocused = ref(false);
@@ -92,6 +95,8 @@ export default defineComponent({
         ariaLabel,
         ariaLabelledBy,
         ariaValueTextFormatter,
+        onMouseenter,
+        onMouseleave,
       } = props;
       const className = classNames(attrs.class, {
         [`${prefixCls}-handle-click-focused`]: clickFocused.value,
@@ -126,6 +131,8 @@ export default defineComponent({
         onBlur: handleBlur,
         onKeydown: handleKeyDown,
         onMousedown: handleMousedown,
+        onMouseenter,
+        onMouseleave,
         ref: handle,
         style: elStyle,
       };
@@ -139,127 +146,4 @@ export default defineComponent({
       );
     };
   },
-  // data() {
-  //   return {
-  //     clickFocused: false,
-  //   };
-  // },
-  // mounted() {
-  //   // mouseup won't trigger if mouse moved out of handle
-  //   // so we listen on document here.
-  //   this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp);
-  // },
-  // beforeUnmount() {
-  //   if (this.onMouseUpListener) {
-  //     this.onMouseUpListener.remove();
-  //   }
-  // },
-  // methods: {
-  //   setHandleRef(node) {
-  //     this.handle = node;
-  //   },
-  //   setClickFocus(focused) {
-  //     this.setState({ clickFocused: focused });
-  //   },
-  //   handleMouseUp() {
-  //     if (document.activeElement === this.handle) {
-  //       this.setClickFocus(true);
-  //     }
-  //   },
-  //   handleBlur(e) {
-  //     this.setClickFocus(false);
-  //     this.__emit('blur', e);
-  //   },
-  //   handleKeyDown() {
-  //     this.setClickFocus(false);
-  //   },
-  //   clickFocus() {
-  //     this.setClickFocus(true);
-  //     this.focus();
-  //   },
-  //   focus() {
-  //     this.handle.focus();
-  //   },
-  //   blur() {
-  //     this.handle.blur();
-  //   },
-  //   // when click can not focus in vue, use mousedown trigger focus
-  //   handleMousedown(e) {
-  //     e.preventDefault();
-  //     this.focus();
-  //     this.__emit('mousedown', e);
-  //   },
-  // },
-  // render() {
-  //   const {
-  //     prefixCls,
-  //     vertical,
-  //     reverse,
-  //     offset,
-  //     disabled,
-  //     min,
-  //     max,
-  //     value,
-  //     tabindex,
-  //     ariaLabel,
-  //     ariaLabelledBy,
-  //     ariaValueTextFormatter,
-  //   } = getOptionProps(this);
-  //   const className = classNames(this.$attrs.class, {
-  //     [`${prefixCls}-handle-click-focused`]: this.clickFocused,
-  //   });
-
-  //   const positionStyle = vertical
-  //     ? {
-  //         [reverse ? 'top' : 'bottom']: `${offset}%`,
-  //         [reverse ? 'bottom' : 'top']: 'auto',
-  //         transform: reverse ? null : `translateY(+50%)`,
-  //       }
-  //     : {
-  //         [reverse ? 'right' : 'left']: `${offset}%`,
-  //         [reverse ? 'left' : 'right']: 'auto',
-  //         transform: `translateX(${reverse ? '+' : '-'}50%)`,
-  //       };
-
-  //   const ariaProps = {
-  //     'aria-valuemin': min,
-  //     'aria-valuemax': max,
-  //     'aria-valuenow': value,
-  //     'aria-disabled': !!disabled,
-  //   };
-  //   const elStyle = {
-  //     ...this.$attrs.style,
-  //     ...positionStyle,
-  //   };
-  //   let mergedTabIndex = tabindex || 0;
-  //   if (disabled || tabindex === null) {
-  //     mergedTabIndex = null;
-  //   }
-
-  //   let ariaValueText;
-  //   if (ariaValueTextFormatter) {
-  //     ariaValueText = ariaValueTextFormatter(value);
-  //   }
-
-  //   const handleProps = {
-  //     ...this.$attrs,
-  //     role: 'slider',
-  //     tabindex: mergedTabIndex,
-  //     ...ariaProps,
-  //     class: className,
-  //     onBlur: this.handleBlur,
-  //     onKeydown: this.handleKeyDown,
-  //     onMousedown: this.handleMousedown,
-  //     ref: this.setHandleRef,
-  //     style: elStyle,
-  //   };
-  //   return (
-  //     <div
-  //       {...handleProps}
-  //       aria-label={ariaLabel}
-  //       aria-labelledby={ariaLabelledBy}
-  //       aria-valuetext={ariaValueText}
-  //     />
-  //   );
-  // },
 });

components/vc-slider/src/Range.tsx

@@ -6,6 +6,7 @@ import Track from './common/Track';
 import createSlider from './common/createSlider';
 import * as utils from './utils';
 import initDefaultProps from '../../_util/props-util/initDefaultProps';
+import { defineComponent } from 'vue';
 
 const trimAlignValue = ({
   value,
@@ -51,11 +52,10 @@ const rangeProps = {
   ariaValueTextFormatterGroupForHandles: Array,
   draggableTrack: PropTypes.looseBool,
 };
-const Range = {
+const Range = defineComponent({
   name: 'Range',
-  inheritAttrs: false,
-  displayName: 'Range',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: initDefaultProps(rangeProps, {
     count: 1,
     allowCross: true,
@@ -66,6 +66,7 @@ const Range = {
     ariaLabelledByGroupForHandles: [],
     ariaValueTextFormatterGroupForHandles: [],
   }),
+  displayName: 'Range',
   data() {
     const { count, min, max } = this;
     const initialValue = Array(...Array(count + 1)).map(() => min);
@@ -136,7 +137,7 @@ const Range = {
         const newValues = value.map(v => {
           return utils.ensureValueInRange(v, this.$props);
         });
-        this.__emit('change', newValues);
+        this.$emit('change', newValues);
       }
     },
     onChange(state) {
@@ -159,7 +160,7 @@ const Range = {
 
       const data = { ...this.$data, ...state };
       const changedValue = data.bounds;
-      this.__emit('change', changedValue);
+      this.$emit('change', changedValue);
     },
 
     positionGetValue(position) {
@@ -176,7 +177,7 @@ const Range = {
     },
     onStart(position) {
       const { bounds } = this;
-      this.__emit('beforeChange', bounds);
+      this.$emit('beforeChange', bounds);
 
       const value = this.calcValueByPos(position);
       this.startValue = value;
@@ -203,7 +204,7 @@ const Range = {
         this.dragTrack = false;
       }
       if (sHandle !== null || force) {
-        this.__emit('afterChange', this.bounds);
+        this.$emit('afterChange', this.bounds);
       }
       this.setState({ sHandle: null });
     },
@@ -332,7 +333,7 @@ const Range = {
         // so trigger focus will invoke handler's onEnd and another handler's onStart too early,
         // cause onBeforeChange and onAfterChange receive wrong value.
         // here use setState callback to hack，but not elegant
-        this.__emit('afterChange', nextBounds);
+        this.$emit('afterChange', nextBounds);
         this.setState({}, () => {
           this.handlesRefs[nextHandle].focus();
         });
@@ -518,6 +519,6 @@ const Range = {
       };
     },
   },
-};
+});
 
 export default createSlider(Range);

components/vc-slider/src/Slider.tsx

@@ -56,7 +56,7 @@ const Slider = defineComponent({
 
       this.setState({ sValue: nextValue });
       if (utils.isValueOutOfRange(newValue, this.$props)) {
-        this.__emit('change', nextValue);
+        this.$emit('change', nextValue);
       }
     },
     onChange(state) {
@@ -67,12 +67,12 @@ const Slider = defineComponent({
       }
 
       const changedValue = nextState.sValue;
-      this.__emit('change', changedValue);
+      this.$emit('change', changedValue);
     },
     onStart(position) {
       this.setState({ dragging: true });
       const { sValue } = this;
-      this.__emit('beforeChange', sValue);
+      this.$emit('beforeChange', sValue);
 
       const value = this.calcValueByPos(position);
 
@@ -87,7 +87,7 @@ const Slider = defineComponent({
       const { dragging } = this;
       this.removeDocumentEvents();
       if (dragging || force) {
-        this.__emit('afterChange', this.sValue);
+        this.$emit('afterChange', this.sValue);
       }
       this.setState({ dragging: false });
     },
@@ -110,7 +110,7 @@ const Slider = defineComponent({
         if (value === sValue) return;
 
         this.onChange({ sValue: value });
-        this.__emit('afterChange', value);
+        this.$emit('afterChange', value);
         this.onEnd();
       }
     },

components/vc-slider/src/common/createSlider.tsx

@@ -60,6 +60,7 @@ export default function createSlider(Component) {
       dotStyle: {},
       activeDotStyle: {},
     }),
+    emits: ['change', 'blur', 'focus'],
     data() {
       const { step, max, min } = this;
       const isPointDiffEven = isFinite(max - min) ? (max - min) % step === 0 : true; // eslint-disable-line
@@ -161,14 +162,14 @@ export default function createSlider(Component) {
           this.dragOffset = 0;
           this.onStart(handlePosition);
           utils.pauseEvent(e);
-          this.__emit('focus', e);
+          this.$emit('focus', e);
         }
       },
       onBlur(e) {
         if (!this.dragTrack) {
           this.onEnd();
         }
-        this.__emit('blur', e);
+        this.$emit('blur', e);
       },
       onMouseUp() {
         if (this.handlesRefs[this.prevMovedHandleIndex]) {

components/vc-tree/props.ts

@@ -94,6 +94,7 @@ export const nodeListProps = {
   itemHeight: { type: Number as PropType<number> },
   virtual: { type: Boolean as PropType<boolean> },
 
+  onScroll: { type: Function as PropType<EventHandler> },
   onKeydown: { type: Function as PropType<EventHandler> },
   onFocus: { type: Function as PropType<(e: FocusEvent) => void> },
   onBlur: { type: Function as PropType<(e: FocusEvent) => void> },

typings/vue-tsx-shim.d.ts

@@ -9,34 +9,34 @@ declare module 'vue' {
     // should be removed after Vue supported component events typing
     // see: https://github.com/vuejs/vue-next/issues/1553
     //      https://github.com/vuejs/vue-next/issues/3029
-    onBlur?: EventHandler;
+    // onBlur?: EventHandler;
-    onOpen?: EventHandler;
+    // onOpen?: EventHandler;
-    onEdit?: EventHandler;
+    // onEdit?: EventHandler;
-    onLoad?: EventHandler;
+    // onLoad?: EventHandler;
-    onClose?: EventHandler;
+    // onClose?: EventHandler;
-    onFocus?: EventHandler;
+    // onFocus?: EventHandler;
-    onInput?: EventHandler;
+    // onInput?: EventHandler;
-    onClick?: EventHandler;
+    // onClick?: EventHandler;
-    onPress?: EventHandler;
+    // onPress?: EventHandler;
-    onCancel?: EventHandler;
+    // onCancel?: EventHandler;
-    onChange?: EventHandler;
+    // onChange?: EventHandler;
-    onDelete?: EventHandler;
+    // onDelete?: EventHandler;
-    onScroll?: EventHandler;
+    // onScroll?: EventHandler;
-    onSubmit?: EventHandler;
+    // onSubmit?: EventHandler;
-    onSelect?: EventHandler;
+    // onSelect?: EventHandler;
-    onConfirm?: EventHandler;
+    // onConfirm?: EventHandler;
-    onPreview?: EventHandler;
+    // onPreview?: EventHandler;
-    onKeypress?: EventHandler;
+    // onKeypress?: EventHandler;
-    onTouchend?: EventHandler;
+    // onTouchend?: EventHandler;
-    onTouchmove?: EventHandler;
+    // onTouchmove?: EventHandler;
-    onTouchstart?: EventHandler;
+    // onTouchstart?: EventHandler;
-    onTouchcancel?: EventHandler;
+    // onTouchcancel?: EventHandler;
-    onMouseenter?: EventHandler;
+    // onMouseenter?: EventHandler;
-    onMouseleave?: EventHandler;
+    // onMouseleave?: EventHandler;
-    onMousemove?: EventHandler;
+    // onMousemove?: EventHandler;
-    onKeydown?: EventHandler;
+    // onKeydown?: EventHandler;
-    onKeyup?: EventHandler;
+    // onKeyup?: EventHandler;
-    onDeselect?: EventHandler;
+    // onDeselect?: EventHandler;
-    onClear?: EventHandler;
+    // onClear?: EventHandler;
   }
 }