github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: component ts type

refactor-modal
tangjinzhou 2022-01-03 22:23:24 +08:00
parent b13756ffbe
commit d71df4b3ba
20 changed files with 111 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/checkbox/Checkbox.tsx
View File

@ -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}

1
components/checkbox/interface.ts
View File

@ -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 },
};
};

2
components/components.ts
View File

@ -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';

2
components/input-number/src/InputNumber.tsx
View File

@ -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({

5
components/menu/demo/switch-mode.vue
View File

@ -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'],
});

3
components/menu/demo/theme.vue
View File

@ -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'],
});

11
components/menu/demo/vertical.vue
View File

@ -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),

2
components/menu/index.en-US.md
View File

@ -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 |

4
components/menu/index.tsx
View File

@ -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,

2
components/menu/index.zh-CN.md
View File

@ -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 |

21
components/menu/src/Menu.tsx
View File

@ -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);

10
components/radio/Radio.tsx
View File

@ -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>

5
components/vc-overflow/RawItem.tsx
View File

@ -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();

6
components/vc-pagination/Pager.tsx
View File

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

132
components/vc-slider/src/Handle.tsx
View File

@ -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}
// />
// );
// },
});

19
components/vc-slider/src/Range.tsx
View File

@ -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);

10
components/vc-slider/src/Slider.tsx
View File

@ -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();
}
},

5
components/vc-slider/src/common/createSlider.tsx
View File

@ -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]) {

1
components/vc-tree/props.ts
View File

@ -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> },

58
typings/vue-tsx-shim.d.ts vendored
View File

@ -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;
onOpen?: EventHandler;
onEdit?: EventHandler;
onLoad?: EventHandler;
onClose?: EventHandler;
onFocus?: EventHandler;
onInput?: EventHandler;
onClick?: EventHandler;
onPress?: EventHandler;
onCancel?: EventHandler;
onChange?: EventHandler;
onDelete?: EventHandler;
onScroll?: EventHandler;
onSubmit?: EventHandler;
onSelect?: EventHandler;
onConfirm?: EventHandler;
onPreview?: EventHandler;
onKeypress?: EventHandler;
onTouchend?: EventHandler;
onTouchmove?: EventHandler;
onTouchstart?: EventHandler;
onTouchcancel?: EventHandler;
onMouseenter?: EventHandler;
onMouseleave?: EventHandler;
onMousemove?: EventHandler;
onKeydown?: EventHandler;
onKeyup?: EventHandler;
onDeselect?: EventHandler;
onClear?: EventHandler;
// onBlur?: EventHandler;
// onOpen?: EventHandler;
// onEdit?: EventHandler;
// onLoad?: EventHandler;
// onClose?: EventHandler;
// onFocus?: EventHandler;
// onInput?: EventHandler;
// onClick?: EventHandler;
// onPress?: EventHandler;
// onCancel?: EventHandler;
// onChange?: EventHandler;
// onDelete?: EventHandler;
// onScroll?: EventHandler;
// onSubmit?: EventHandler;
// onSelect?: EventHandler;
// onConfirm?: EventHandler;
// onPreview?: EventHandler;
// onKeypress?: EventHandler;
// onTouchend?: EventHandler;
// onTouchmove?: EventHandler;
// onTouchstart?: EventHandler;
// onTouchcancel?: EventHandler;
// onMouseenter?: EventHandler;
// onMouseleave?: EventHandler;
// onMousemove?: EventHandler;
// onKeydown?: EventHandler;
// onKeyup?: EventHandler;
// onDeselect?: EventHandler;
// onClear?: EventHandler;
}
}