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

chore: update ts type (#5408) 

* feat: update prop type

* feat: update ts type

* feat: update ts type

* feat: update ts type

* feat: update ts type

* test: update snap

* feat: update ts type
pull/5419/head
tangjinzhou 2022-03-26 22:52:54 +08:00 committed by GitHub
parent 790f83f4a6
commit 00dc2add94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
165 changed files with 1550 additions and 1353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/_util/EventInterface.ts
View File

@ -4,7 +4,6 @@ export type KeyboardEventHandler = (e: KeyboardEvent) => void;
export type CompositionEventHandler = (e: CompositionEvent) => void;
export type ClipboardEventHandler = (e: ClipboardEvent) => void;
export type ChangeEventHandler = (e: ChangeEvent) => void;
export type ChangeEvent = Event & {
target: {
value?: string | undefined;

2
components/_util/Portal.tsx
View File

@ -15,7 +15,7 @@ export default defineComponent({
inheritAttrs: false,
props: {
getContainer: PropTypes.func.isRequired,
didUpdate: PropTypes.func,
didUpdate: Function,
},
setup(props, { slots }) {
let isSSR = true;

6
components/_util/PortalWrapper.tsx
View File

@ -52,10 +52,10 @@ export default defineComponent({
name: 'PortalWrapper',
inheritAttrs: false,
props: {
wrapperClassName: PropTypes.string,
forceRender: PropTypes.looseBool,
wrapperClassName: String,
forceRender: { type: Boolean, default: undefined },
getContainer: PropTypes.any,
visible: PropTypes.looseBool,
visible: { type: Boolean, default: undefined },
},
setup(props, { slots }) {

9
components/_util/transButton.tsx
View File

@ -5,7 +5,6 @@ import { defineComponent, ref, onMounted } from 'vue';
* This helps accessibility reader to tread as a interactive button to operation.
*/
import KeyCode from './KeyCode';
import PropTypes from './vue-types';
const inlineStyle = {
border: 0,
@ -19,10 +18,10 @@ const TransButton = defineComponent({
name: 'TransButton',
inheritAttrs: false,
props: {
noStyle: PropTypes.looseBool,
onClick: PropTypes.func,
disabled: PropTypes.looseBool,
autofocus: PropTypes.looseBool,
noStyle: { type: Boolean, default: undefined },
onClick: Function,
disabled: { type: Boolean, default: undefined },
autofocus: { type: Boolean, default: undefined },
},
setup(props, { slots, emit, attrs, expose }) {
const domRef = ref();

7
components/affix/index.tsx
View File

@ -47,14 +47,13 @@ export const affixProps = () => ({
offsetTop: Number,
/** 距离窗口底部达到指定偏移量后触发 */
offsetBottom: Number,
/** 固定状态改变时触发的回调函数 */
// onChange?: (affixed?: boolean) => void;
/** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
target: {
type: Function as PropType<() => Window | HTMLElement | null>,
default: getDefaultTarget,
},
prefixCls: String,
/** 固定状态改变时触发的回调函数 */
onChange: Function as PropType<AffixEmits['change']>,
onTestUpdatePosition: Function as PropType<AffixEmits['testUpdatePosition']>,
});
@ -62,8 +61,8 @@ export const affixProps = () => ({
export type AffixProps = Partial<ExtractPropTypes<ReturnType<typeof affixProps>>>;
export type AffixEmits = {
change: (lastAffix: boolean) => boolean;
testUpdatePosition: () => boolean;
change: (lastAffix: boolean) => void;
testUpdatePosition: () => void;
};
export type AffixExpose = {

12
components/alert/index.tsx
View File

@ -18,8 +18,6 @@ import { cloneElement } from '../_util/vnode';
import type { NodeMouseEventHandler } from '../vc-tree/contextTypes';
import useConfigInject from '../_util/hooks/useConfigInject';
function noop() {}
const iconMapFilled = {
success: CheckCircleFilled,
info: InfoCircleFilled,
@ -44,7 +42,7 @@ export const alertProps = () => ({
*/
type: PropTypes.oneOf(AlertTypes),
/** Whether Alert can be closed */
closable: PropTypes.looseBool,
closable: { type: Boolean, default: undefined },
/** Close text to show */
closeText: PropTypes.any,
/** Content of Alert */
@ -52,11 +50,11 @@ export const alertProps = () => ({
/** Additional content of Alert */
description: PropTypes.any,
/** Trigger when animation ending of Alert */
afterClose: PropTypes.func.def(noop),
afterClose: Function as PropType<() => void>,
/** Whether to show icon */
showIcon: PropTypes.looseBool,
prefixCls: PropTypes.string,
banner: PropTypes.looseBool,
showIcon: { type: Boolean, default: undefined },
prefixCls: String,
banner: { type: Boolean, default: undefined },
icon: PropTypes.any,
closeIcon: PropTypes.any,
onClose: Function as PropType<NodeMouseEventHandler>,

16
components/anchor/AnchorLink.tsx
View File

@ -1,23 +1,23 @@
import type { ExtractPropTypes } from 'vue';
import { defineComponent, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
import PropTypes from '../_util/vue-types';
import { getPropsSlot } from '../_util/props-util';
import { getPropsSlot, initDefaultProps } from '../_util/props-util';
import classNames from '../_util/classNames';
import useConfigInject from '../_util/hooks/useConfigInject';
import { useInjectAnchor } from './context';
export const anchorLinkProps = {
prefixCls: PropTypes.string,
href: PropTypes.string.def('#'),
export const anchorLinkProps = () => ({
prefixCls: String,
href: String,
title: PropTypes.any,
target: PropTypes.string,
};
target: String,
});
export type AnchorLinkProps = Partial<ExtractPropTypes<typeof anchorLinkProps>>;
export type AnchorLinkProps = Partial<ExtractPropTypes<ReturnType<typeof anchorLinkProps>>>;
export default defineComponent({
name: 'AAnchorLink',
props: anchorLinkProps,
props: initDefaultProps(anchorLinkProps(), { href: '#' }),
slots: ['title'],
setup(props, { slots }) {
let mergedTitle = null;

3
components/anchor/demo/onClick.vue
View File

@ -28,10 +28,11 @@ Clicking on an anchor does not record history.
<script lang="ts">
import { defineComponent } from 'vue';
import type { AnchorProps } from 'ant-design-vue';
export default defineComponent({
setup() {
const handleClick = (e: Event, link: string) => {
const handleClick: AnchorProps['onClick'] = (e, link) => {
e.preventDefault();
console.log(link);
};

42
components/auto-complete/index.tsx
View File

@ -1,7 +1,6 @@
import type { App, VNode, ExtractPropTypes } from 'vue';
import type { App, VNode, ExtractPropTypes, CSSProperties, PropType } from 'vue';
import { defineComponent, ref } from 'vue';
import Select, { selectProps } from '../select';
import PropTypes from '../_util/vue-types';
import { isValidElement, flattenChildren } from '../_util/props-util';
import warning from '../_util/warning';
import Option from './Option';
@ -13,15 +12,27 @@ function isSelectOptionOrSelectOptGroup(child: any): boolean {
return child?.type?.isSelectOption || child?.type?.isSelectOptGroup;
}
export const autoCompleteProps = {
export const autoCompleteProps = () => ({
...omit(selectProps(), ['loading', 'mode', 'optionLabelProp', 'labelInValue']),
dataSource: PropTypes.array,
dropdownMenuStyle: PropTypes.style,
// optionLabelProp: PropTypes.string,
dataSource: Array as PropType<{ value: any; text: any }[] | string[]>,
dropdownMenuStyle: {
type: Object as PropType<CSSProperties>,
default: undefined as CSSProperties,
},
// optionLabelProp: String,
dropdownMatchSelectWidth: { type: [Number, Boolean], default: true },
};
prefixCls: String,
showSearch: { type: Boolean, default: undefined },
transitionName: String,
choiceTransitionName: { type: String, default: 'zoom' },
autofocus: { type: Boolean, default: undefined },
backfill: { type: Boolean, default: undefined },
// optionLabelProp: PropTypes.string.def('children'),
filterOption: { type: [Boolean, Function], default: false },
defaultActiveFirstOption: { type: Boolean, default: true },
});
export type AutoCompleteProps = Partial<ExtractPropTypes<typeof autoCompleteProps>>;
export type AutoCompleteProps = Partial<ExtractPropTypes<ReturnType<typeof autoCompleteProps>>>;
export const AutoCompleteOption = Option;
@ -30,19 +41,8 @@ export const AutoCompleteOptGroup = OptGroup;
const AutoComplete = defineComponent({
name: 'AAutoComplete',
inheritAttrs: false,
props: {
...autoCompleteProps,
prefixCls: PropTypes.string,
showSearch: PropTypes.looseBool,
transitionName: PropTypes.string,
choiceTransitionName: PropTypes.string.def('zoom'),
autofocus: PropTypes.looseBool,
backfill: PropTypes.looseBool,
// optionLabelProp: PropTypes.string.def('children'),
filterOption: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(false),
defaultActiveFirstOption: PropTypes.looseBool.def(true),
},
emits: ['change', 'select', 'focus', 'blur'],
props: autoCompleteProps(),
// emits: ['change', 'select', 'focus', 'blur'],
slots: ['option'],
setup(props, { slots, attrs, expose }) {
warning(

16
components/avatar/Avatar.tsx
View File

@ -1,5 +1,5 @@
import type { VueNode } from '../_util/type';
import { tuple } from '../_util/type';
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
import { getPropsSlot } from '../_util/props-util';
@ -15,19 +15,19 @@ import eagerComputed from '../_util/eagerComputed';
export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
export const avatarProps = () => ({
prefixCls: PropTypes.string,
shape: PropTypes.oneOf(tuple('circle', 'square')).def('circle'),
prefixCls: String,
shape: { type: String as PropType<'circle' | 'square'>, default: 'circle' },
size: {
type: [Number, String, Object] as PropType<AvatarSize>,
default: (): AvatarSize => 'default',
},
src: PropTypes.string,
src: String,
/** Srcset of image avatar */
srcset: PropTypes.string,
srcset: String,
icon: PropTypes.any,
alt: PropTypes.string,
gap: PropTypes.number,
draggable: PropTypes.bool,
alt: String,
gap: Number,
draggable: { type: Boolean, default: undefined },
crossOrigin: String as PropType<'' | 'anonymous' | 'use-credentials'>,
loadError: {
type: Function as PropType<() => boolean>,

15
components/avatar/Group.tsx
View File

@ -4,20 +4,15 @@ import Avatar from './Avatar';
import Popover from '../popover';
import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
import { defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import { flattenChildren, getPropsSlot } from '../_util/props-util';
import { tuple } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject';
import useProvideSize from '../_util/hooks/useSize';
export const groupProps = () => ({
prefixCls: PropTypes.string,
maxCount: PropTypes.number,
maxStyle: {
type: Object as PropType<CSSProperties>,
default: () => ({} as CSSProperties),
},
maxPopoverPlacement: PropTypes.oneOf(tuple('top', 'bottom')).def('top'),
prefixCls: String,
maxCount: Number,
maxStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
maxPopoverPlacement: { type: String as PropType<'top' | 'bottom'>, default: 'top' },
maxPopoverTrigger: String as PropType<'hover' | 'focus' | 'click'>,
/*
* Size of avatar, options: `large`, `small`, `default`
@ -25,7 +20,7 @@ export const groupProps = () => ({
* */
size: {
type: [Number, String, Object] as PropType<AvatarSize>,
default: (): AvatarSize => 'default',
default: 'default' as AvatarSize,
},
});

2
components/avatar/__tests__/__snapshots__/Avatar.test.js.snap
View File

@ -12,7 +12,7 @@ exports[`Avatar Render adjusts component size to 80 when window size is xl 1`] =
exports[`Avatar Render adjusts component size to 100 when window size is xxl 1`] = `<span class="ant-avatar ant-avatar-circle" style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
exports[`Avatar Render fallback 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="http://error.url"></span>`;
exports[`Avatar Render fallback 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="http://error.url"></span>`;
exports[`Avatar Render should calculate scale of avatar children correctly 1`] = `<span class="ant-avatar-string" style="transform: scale(0.72) translateX(-50%);">Avatar</span>`;

8
components/avatar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -15,23 +15,23 @@ exports[`renders ./components/avatar/demo/dynamic.vue correctly 1`] = `
`;
exports[`renders ./components/avatar/demo/group.vue correctly 1`] = `
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(245, 106, 0);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(245, 106, 0);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<!----><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>
</div>
<div class="ant-divider ant-divider-horizontal" role="separator">
<!---->
</div>
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">+2</span></span>
</div>
<div class="ant-divider ant-divider-horizontal" role="separator">
<!---->
</div>
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">+2</span></span>
</div>
`;
exports[`renders ./components/avatar/demo/responsive.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"><span role="img" aria-label="ant-design" class="anticon anticon-ant-design"><svg focusable="false" class="" data-icon="ant-design" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"></path></svg></span></span>`;
exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">USER</span></span><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>`;
exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">USER</span></span><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>`;

20
components/back-top/index.tsx
View File

@ -11,7 +11,6 @@ import {
onDeactivated,
} from 'vue';
import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined';
import PropTypes from '../_util/vue-types';
import addEventListener from '../vc-util/Dom/addEventListener';
import getScroll from '../_util/getScroll';
import { getTransitionProps, Transition } from '../_util/transition';
@ -19,23 +18,24 @@ import scrollTo from '../_util/scrollTo';
import { withInstall } from '../_util/type';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
import useConfigInject from '../_util/hooks/useConfigInject';
import type { MouseEventHandler } from '../_util/EventInterface';
export const backTopProps = {
visibilityHeight: PropTypes.number.def(400),
duration: PropTypes.number.def(450),
export const backTopProps = () => ({
visibilityHeight: { type: Number, default: 400 },
duration: { type: Number, default: 450 },
target: Function as PropType<() => HTMLElement | Window | Document>,
prefixCls: PropTypes.string,
onClick: PropTypes.func,
// visible: PropTypes.looseBool, // Only for test. Don't use it.
};
prefixCls: String,
onClick: Function as PropType<MouseEventHandler>,
// visible: { type: Boolean, default: undefined }, // Only for test. Don't use it.
});
export type BackTopProps = Partial<ExtractPropTypes<typeof backTopProps>>;
const BackTop = defineComponent({
name: 'ABackTop',
inheritAttrs: false,
props: backTopProps,
emits: ['click'],
props: backTopProps(),
// emits: ['click'],
setup(props, { slots, attrs, emit }) {
const { prefixCls, direction } = useConfigInject('back-top', props);
const domRef = ref();

37
components/badge/Badge.tsx
View File

@ -4,41 +4,40 @@ import classNames from '../_util/classNames';
import { getPropsSlot, flattenChildren } from '../_util/props-util';
import { cloneElement } from '../_util/vnode';
import { getTransitionProps, Transition } from '../_util/transition';
import type { ExtractPropTypes, CSSProperties } from 'vue';
import type { ExtractPropTypes, CSSProperties, PropType } from 'vue';
import { defineComponent, computed, ref, watch } from 'vue';
import { tuple } from '../_util/type';
import Ribbon from './Ribbon';
import { isPresetColor } from './utils';
import useConfigInject from '../_util/hooks/useConfigInject';
import isNumeric from '../_util/isNumeric';
import type { PresetStatusColorType } from '../_util/colors';
export const badgeProps = {
export const badgeProps = () => ({
/** Number to show in badge */
count: PropTypes.any,
showZero: PropTypes.looseBool,
showZero: { type: Boolean, default: undefined },
/** Max count to show */
overflowCount: PropTypes.number.def(99),
overflowCount: { type: Number, default: 99 },
/** whether to show red dot without number */
dot: PropTypes.looseBool,
prefixCls: PropTypes.string,
scrollNumberPrefixCls: PropTypes.string,
status: PropTypes.oneOf(tuple('success', 'processing', 'default', 'error', 'warning')),
// sync antd@4.6.0
size: PropTypes.oneOf(tuple('default', 'small')).def('default'),
color: PropTypes.string,
dot: { type: Boolean, default: undefined },
prefixCls: String,
scrollNumberPrefixCls: String,
status: { type: String as PropType<PresetStatusColorType> },
size: { type: String as PropType<'default' | 'small'>, default: 'default' },
color: String,
text: PropTypes.any,
offset: PropTypes.arrayOf(PropTypes.oneOfType([String, Number])),
numberStyle: PropTypes.style,
title: PropTypes.string,
};
offset: Array as unknown as PropType<[number | string, number | string]>,
numberStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
title: String,
});
export type BadgeProps = Partial<ExtractPropTypes<typeof badgeProps>>;
export type BadgeProps = Partial<ExtractPropTypes<ReturnType<typeof badgeProps>>>;
export default defineComponent({
name: 'ABadge',
Ribbon,
inheritAttrs: false,
props: badgeProps,
props: badgeProps(),
slots: ['text', 'count'],
setup(props, { slots, attrs }) {
const { prefixCls, direction } = useConfigInject('badge', props);
@ -197,7 +196,7 @@ export default defineComponent({
const transitionProps = getTransitionProps(children ? `${pre}-zoom` : '', {
appear: false,
});
let scrollNumberStyle: CSSProperties = { ...mergedStyle, ...props.numberStyle };
let scrollNumberStyle: CSSProperties = { ...mergedStyle, ...(props.numberStyle as object) };
if (color && !isPresetColor(color)) {
scrollNumberStyle = scrollNumberStyle || {};
scrollNumberStyle.background = color;

13
components/badge/Ribbon.tsx
View File

@ -1,5 +1,4 @@
import type { LiteralUnion } from '../_util/type';
import { tuple } from '../_util/type';
import type { PresetColorType } from '../_util/colors';
import { isPresetColor } from './utils';
import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
@ -7,19 +6,19 @@ import { defineComponent, computed } from 'vue';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject';
export const ribbonProps = {
prefix: PropTypes.string,
export const ribbonProps = () => ({
prefix: String,
color: { type: String as PropType<LiteralUnion<PresetColorType, string>> },
text: PropTypes.any,
placement: PropTypes.oneOf(tuple('start', 'end')).def('end'),
};
placement: { type: String as PropType<'start' | 'end'>, default: 'end' },
});
export type RibbonProps = Partial<ExtractPropTypes<typeof ribbonProps>>;
export type RibbonProps = Partial<ExtractPropTypes<ReturnType<typeof ribbonProps>>>;
export default defineComponent({
name: 'ABadgeRibbon',
inheritAttrs: false,
props: ribbonProps,
props: ribbonProps(),
slots: ['text'],
setup(props, { attrs, slots }) {
const { prefixCls, direction } = useConfigInject('ribbon', props);

8
components/badge/ScrollNumber.tsx
View File

@ -7,11 +7,11 @@ import useConfigInject from '../_util/hooks/useConfigInject';
import SingleNumber from './SingleNumber';
import { filterEmpty } from '../_util/props-util';
export const scrollNumberProps = {
prefixCls: PropTypes.string,
const scrollNumberProps = {
prefixCls: String,
count: PropTypes.any,
component: PropTypes.string,
title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
component: String,
title: PropTypes.any,
show: Boolean,
};

10
components/breadcrumb/Breadcrumb.tsx
View File

@ -14,8 +14,8 @@ export interface Route {
children?: Omit<Route, 'children'>[];
}
export const breadcrumbProps = {
prefixCls: PropTypes.string,
export const breadcrumbProps = () => ({
prefixCls: String,
routes: { type: Array as PropType<Route[]> },
params: PropTypes.any,
separator: PropTypes.any,
@ -24,9 +24,9 @@ export const breadcrumbProps = {
(opt: { route: Route; params: unknown; routes: Route[]; paths: string[] }) => VueNode
>,
},
};
});
export type BreadcrumbProps = Partial<ExtractPropTypes<typeof breadcrumbProps>>;
export type BreadcrumbProps = Partial<ExtractPropTypes<ReturnType<typeof breadcrumbProps>>>;
function getBreadcrumbName(route: Route, params: unknown) {
if (!route.breadcrumbName) {
@ -53,7 +53,7 @@ function defaultItemRender(opt: {
export default defineComponent({
name: 'ABreadcrumb',
props: breadcrumbProps,
props: breadcrumbProps(),
slots: ['separator', 'itemRender'],
setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('breadcrumb', props);

40
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -1,26 +1,29 @@
import type { ExtractPropTypes } from 'vue';
import type { ExtractPropTypes, PropType } from 'vue';
import { defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import { getPropsSlot } from '../_util/props-util';
import DropDown from '../dropdown/dropdown';
import DownOutlined from '@ant-design/icons-vue/DownOutlined';
import useConfigInject from '../_util/hooks/useConfigInject';
import type { MouseEventHandler } from '../_util/EventInterface';
export const breadcrumbItemProps = {
prefixCls: PropTypes.string,
href: PropTypes.string,
export const breadcrumbItemProps = () => ({
prefixCls: String,
href: String,
separator: PropTypes.any,
overlay: PropTypes.any,
};
onClick: Function as PropType<MouseEventHandler>,
});
export type BreadcrumbItemProps = Partial<ExtractPropTypes<typeof breadcrumbItemProps>>;
export type BreadcrumbItemProps = Partial<ExtractPropTypes<ReturnType<typeof breadcrumbItemProps>>>;
export default defineComponent({
name: 'ABreadcrumbItem',
inheritAttrs: false,
__ANT_BREADCRUMB_ITEM: true,
props: breadcrumbItemProps,
emits: ['click'],
props: breadcrumbItemProps(),
// emits: ['click'],
slots: ['separator', 'overlay'],
setup(props, { slots, emit }) {
setup(props, { slots, attrs }) {
const { prefixCls } = useConfigInject('breadcrumb', props);
/**
* if overlay is have
@ -41,24 +44,29 @@ export default defineComponent({
return breadcrumbItem;
};
const handleClick = (e: MouseEvent) => {
emit('click', e);
};
return () => {
const separator = getPropsSlot(slots, props, 'separator') ?? '/';
const children = getPropsSlot(slots, props);
const { class: cls, style, ...restAttrs } = attrs;
let link: JSX.Element;
if (props.href !== undefined) {
link = <a class={`${prefixCls.value}-link`}>{children}</a>;
link = (
<a class={`${prefixCls.value}-link`} onClick={props.onClick} {...restAttrs}>
{children}
</a>
);
} else {
link = <span class={`${prefixCls.value}-link`}>{children}</span>;
link = (
<span class={`${prefixCls.value}-link`} onClick={props.onClick} {...restAttrs}>
{children}
</span>
);
}
// wrap to dropDown
link = renderBreadcrumbNode(link, prefixCls.value);
if (children) {
return (
<span onClick={handleClick}>
<span class={cls} style={style}>
{link}
{separator && <span class={`${prefixCls.value}-separator`}>{separator}</span>}
</span>

13
components/breadcrumb/BreadcrumbSeparator.tsx
View File

@ -1,19 +1,20 @@
import type { ExtractPropTypes } from 'vue';
import { defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import { flattenChildren } from '../_util/props-util';
import useConfigInject from '../_util/hooks/useConfigInject';
export const breadcrumbSeparatorProps = {
prefixCls: PropTypes.string,
};
export type BreadcrumbSeparatorProps = Partial<ExtractPropTypes<typeof breadcrumbSeparatorProps>>;
export const breadcrumbSeparatorProps = () => ({
prefixCls: String,
});
export type BreadcrumbSeparatorProps = Partial<
ExtractPropTypes<ReturnType<typeof breadcrumbSeparatorProps>>
>;
export default defineComponent({
name: 'ABreadcrumbSeparator',
__ANT_BREADCRUMB_SEPARATOR: true,
inheritAttrs: false,
props: breadcrumbSeparatorProps,
props: breadcrumbSeparatorProps(),
setup(props, { slots, attrs }) {
const { prefixCls } = useConfigInject('breadcrumb', props);

2
components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
View File

@ -12,4 +12,4 @@ exports[`Breadcrumb should render a menu 1`] = `<div class="ant-breadcrumb"><spa
exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `<div class="ant-breadcrumb"><span><span class="ant-breadcrumb-link">Location</span><span class="ant-breadcrumb-separator">/</span></span><span><span><span class="ant-breadcrumb-link">Mock Node</span><span class="ant-breadcrumb-separator">/</span></span></span><span><span class="ant-breadcrumb-link">Application Center</span><span class="ant-breadcrumb-separator">/</span></span></div>`;
exports[`Breadcrumb should support custom attribute 1`] = `<div class="ant-breadcrumb" data-custom="custom"><span data-custom="custom-item"><span class="ant-breadcrumb-link">xxx</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">yyy</span><span class="ant-breadcrumb-separator">/</span></span></div>`;
exports[`Breadcrumb should support custom attribute 1`] = `<div class="ant-breadcrumb" data-custom="custom"><span><span class="ant-breadcrumb-link" data-custom="custom-item">xxx</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">yyy</span><span class="ant-breadcrumb-separator">/</span></span></div>`;

12
components/button/button-group.tsx
View File

@ -1,25 +1,23 @@
import { computed, defineComponent } from 'vue';
import { flattenChildren } from '../_util/props-util';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject';
import type { ExtractPropTypes, PropType } from 'vue';
import type { SizeType } from '../config-provider';
import UnreachableException from '../_util/unreachableException';
const buttonGroupProps = {
prefixCls: PropTypes.string,
export const buttonGroupProps = () => ({
prefixCls: String,
size: {
type: String as PropType<SizeType>,
},
};
export { buttonGroupProps };
});
export type ButtonGroupProps = Partial<ExtractPropTypes<typeof buttonGroupProps>>;
export type ButtonGroupProps = Partial<ExtractPropTypes<ReturnType<typeof buttonGroupProps>>>;
export default defineComponent({
name: 'AButtonGroup',
props: buttonGroupProps,
props: buttonGroupProps(),
setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('btn-group', props);
const classes = computed(() => {

11
components/button/button.tsx
View File

@ -10,7 +10,7 @@ import {
watchEffect,
} from 'vue';
import Wave from '../_util/wave';
import buttonTypes from './buttonTypes';
import buttonProps from './buttonTypes';
import { flattenChildren, initDefaultProps } from '../_util/props-util';
import useConfigInject from '../_util/hooks/useConfigInject';
import devWarning from '../vc-util/devWarning';
@ -27,14 +27,14 @@ const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
function isUnborderedButtonType(type: ButtonType | undefined) {
return type === 'text' || type === 'link';
}
export { buttonProps };
export default defineComponent({
name: 'AButton',
inheritAttrs: false,
__ANT_BUTTON: true,
props: initDefaultProps(buttonTypes(), { type: 'default' }),
props: initDefaultProps(buttonProps(), { type: 'default' }),
slots: ['icon'],
emits: ['click', 'mousedown'],
// emits: ['click', 'mousedown'],
setup(props, { slots, attrs, emit }) {
const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);
@ -151,7 +151,7 @@ export default defineComponent({
isNeedInserted = children.length === 1 && !icon && !isUnborderedButtonType(props.type);
const { type, htmlType, disabled, href, title, target } = props;
const { type, htmlType, disabled, href, title, target, onMousedown } = props;
const iconType = innerLoading.value ? 'loading' : icon;
const buttonProps = {
@ -164,6 +164,7 @@ export default defineComponent({
{ [`${prefixCls.value}-icon-only`]: children.length === 0 && !!iconType },
],
onClick: handleClick,
onMousedown,
};
// https://github.com/vueComponent/ant-design-vue/issues/4930
if (!disabled) {

35
components/button/buttonTypes.ts
View File

@ -1,16 +1,12 @@
import { tuple } from '../_util/type';
import PropTypes from '../_util/vue-types';
import type { ExtractPropTypes, PropType } from 'vue';
import type { SizeType } from '../config-provider';
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');
export type ButtonType = typeof ButtonTypes[number];
const ButtonShapes = tuple('default', 'circle', 'round');
export type ButtonShape = typeof ButtonShapes[number];
export type ButtonType = 'link' | 'default' | 'primary' | 'ghost' | 'dashed' | 'text';
export type ButtonShape = 'default' | 'circle' | 'round';
const ButtonHTMLTypes = tuple('submit', 'button', 'reset');
export type ButtonHTMLType = typeof ButtonHTMLTypes[number];
export type ButtonHTMLType = 'submit' | 'button' | 'reset';
export type LegacyButtonType = ButtonType | 'danger';
export function convertLegacyProps(type?: LegacyButtonType): ButtonProps {
@ -21,10 +17,10 @@ export function convertLegacyProps(type?: LegacyButtonType): ButtonProps {
}
export const buttonProps = () => ({
prefixCls: PropTypes.string,
type: PropTypes.oneOf(ButtonTypes),
htmlType: PropTypes.oneOf(ButtonHTMLTypes).def('button'),
shape: PropTypes.oneOf(ButtonShapes),
prefixCls: String,
type: String as PropType<ButtonType>,
htmlType: { type: String as PropType<ButtonHTMLType>, default: 'button' },
shape: { type: String as PropType<ButtonShape> },
size: {
type: String as PropType<SizeType>,
},
@ -32,17 +28,20 @@ export const buttonProps = () => ({
type: [Boolean, Object] as PropType<boolean | { delay?: number }>,
default: (): boolean | { delay?: number } => false,
},
disabled: PropTypes.looseBool,
ghost: PropTypes.looseBool,
block: PropTypes.looseBool,
danger: PropTypes.looseBool,
disabled: { type: Boolean, default: undefined },
ghost: { type: Boolean, default: undefined },
block: { type: Boolean, default: undefined },
danger: { type: Boolean, default: undefined },
icon: PropTypes.any,
href: PropTypes.string,
target: PropTypes.string,
title: PropTypes.string,
href: String,
target: String,
title: String,
onClick: {
type: Function as PropType<(event: MouseEvent) => void>,
},
onMousedown: {
type: Function as PropType<(event: MouseEvent) => void>,
},
});
export type ButtonProps = Partial<ExtractPropTypes<ReturnType<typeof buttonProps>>>;

18
components/card/Card.tsx
View File

@ -1,4 +1,4 @@
import type { VNodeTypes, PropType, VNode, ExtractPropTypes } from 'vue';
import type { VNodeTypes, PropType, VNode, ExtractPropTypes, CSSProperties } from 'vue';
import { isVNode, defineComponent, renderSlot } from 'vue';
import Tabs from '../tabs';
import Row from '../row';
@ -24,14 +24,14 @@ export type CardSize = 'default' | 'small';
const { TabPane } = Tabs;
export const cardProps = () => ({
prefixCls: PropTypes.string,
prefixCls: String,
title: PropTypes.any,
extra: PropTypes.any,
bordered: PropTypes.looseBool.def(true),
bodyStyle: PropTypes.style,
headStyle: PropTypes.style,
loading: PropTypes.looseBool.def(false),
hoverable: PropTypes.looseBool.def(false),
bordered: { type: Boolean, default: true },
bodyStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
headStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
loading: { type: Boolean, default: false },
hoverable: { type: Boolean, default: false },
type: { type: String as PropType<CardType> },
size: { type: String as PropType<CardSize> },
actions: PropTypes.any,
@ -39,8 +39,8 @@ export const cardProps = () => ({
type: Array as PropType<CardTabListType[]>,
},
tabBarExtraContent: PropTypes.any,
activeTabKey: PropTypes.string,
defaultActiveTabKey: PropTypes.string,
activeTabKey: String,
defaultActiveTabKey: String,
cover: PropTypes.any,
onTabChange: {
type: Function as PropType<(key: string) => void>,

11
components/card/Grid.tsx
View File

@ -1,13 +1,16 @@
import type { ExtractPropTypes } from 'vue';
import { defineComponent, computed } from 'vue';
import useConfigInject from '../_util/hooks/useConfigInject';
export const cardGridProps = () => ({
prefixCls: String,
hoverable: { type: Boolean, default: true },
});
export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardGridProps>>>;
export default defineComponent({
name: 'ACardGrid',
__ANT_CARD_GRID: true,
props: {
prefixCls: String,
hoverable: { type: Boolean, default: true },
},
props: cardGridProps(),
setup(props, { slots }) {
const { prefixCls } = useConfigInject('card', props);
const classNames = computed(() => {

15
components/card/Meta.tsx
View File

@ -1,16 +1,19 @@
import type { ExtractPropTypes } from 'vue';
import { defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import { getPropsSlot } from '../_util/props-util';
import useConfigInject from '../_util/hooks/useConfigInject';
export const cardMetaProps = () => ({
prefixCls: String,
title: PropTypes.any,
description: PropTypes.any,
avatar: PropTypes.any,
});
export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardMetaProps>>>;
export default defineComponent({
name: 'ACardMeta',
props: {
prefixCls: PropTypes.string,
title: PropTypes.any,
description: PropTypes.any,
avatar: PropTypes.any,
},
props: cardMetaProps(),
slots: ['title', 'description', 'avatar'],
setup(props, { slots }) {
const { prefixCls } = useConfigInject('card', props);

2
components/card/__tests__/__snapshots__/demo.test.js.snap
View File

@ -259,7 +259,7 @@ exports[`renders ./components/card/demo/meta.vue correctly 1`] = `
<div class="ant-card-cover"><img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"></div>
<div class="ant-card-body">
<div class="ant-card-meta">
<div class="ant-card-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-card-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-card-meta-detail">
<div class="ant-card-meta-title">Card title</div>
<div class="ant-card-meta-description">This is the description</div>

7
components/checkbox/Checkbox.tsx
View File

@ -3,12 +3,11 @@ import classNames from '../_util/classNames';
import VcCheckbox from '../vc-checkbox/Checkbox';
import { flattenChildren } from '../_util/props-util';
import warning from '../_util/warning';
import type { RadioChangeEvent } from '../radio/interface';
import type { EventHandler } from '../_util/EventInterface';
import { useInjectFormItemContext } from '../form/FormItemContext';
import useConfigInject from '../_util/hooks/useConfigInject';
import type { CheckboxProps } from './interface';
import type { CheckboxChangeEvent, CheckboxProps } from './interface';
import { CheckboxGroupContextKey, checkboxProps } from './interface';
export default defineComponent({
@ -16,7 +15,7 @@ export default defineComponent({
inheritAttrs: false,
__ANT_CHECKBOX: true,
props: checkboxProps(),
emits: ['change', 'update:checked'],
// emits: ['change', 'update:checked'],
setup(props, { emit, attrs, slots, expose }) {
const formItemContext = useInjectFormItemContext();
const { prefixCls, direction } = useConfigInject('checkbox', props);
@ -41,7 +40,7 @@ export default defineComponent({
);
});
const handleChange = (event: RadioChangeEvent) => {
const handleChange = (event: CheckboxChangeEvent) => {
const targetChecked = event.target.checked;
emit('update:checked', targetChecked);
emit('change', event);

2
components/checkbox/Group.tsx
View File

@ -8,7 +8,7 @@ import { CheckboxGroupContextKey, checkboxGroupProps } from './interface';
export default defineComponent({
name: 'ACheckboxGroup',
props: checkboxGroupProps(),
emits: ['change', 'update:value'],
// emits: ['change', 'update:value'],
setup(props, { slots, emit, expose }) {
const formItemContext = useInjectFormItemContext();
const { prefixCls, direction } = useConfigInject('checkbox', props);

20
components/checkbox/interface.ts
View File

@ -1,4 +1,5 @@
import type { ExtractPropTypes, InjectionKey, PropType, Ref } from 'vue';
import type { MouseEventHandler } from '../_util/EventInterface';
import type { VueNode } from '../_util/type';
import PropTypes from '../_util/vue-types';
@ -8,7 +9,18 @@ export interface CheckboxOptionType {
value: CheckboxValueType;
disabled?: boolean;
indeterminate?: boolean;
onChange?: (e: Event) => void;
onChange?: (e: CheckboxChangeEvent) => void;
}
export interface CheckboxChangeEvent {
target: CheckboxChangeEventTarget;
stopPropagation: () => void;
preventDefault: () => void;
nativeEvent: MouseEvent;
}
export interface CheckboxChangeEventTarget extends CheckboxProps {
checked: boolean;
}
export const abstractCheckboxGroupProps = () => {
@ -51,9 +63,9 @@ export const abstractCheckboxProps = () => {
indeterminate: { type: Boolean, default: undefined },
type: { type: String, default: 'checkbox' },
autofocus: { type: Boolean, default: undefined },
onChange: PropTypes.func,
'onUpdate:checked': PropTypes.func,
onClick: PropTypes.func,
onChange: Function as PropType<(e: CheckboxChangeEvent) => void>,
'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
onClick: Function as PropType<MouseEventHandler>,
skipGroup: { type: Boolean, default: false },
};
};

2
components/collapse/Collapse.tsx
View File

@ -41,7 +41,7 @@ export default defineComponent({
expandIconPosition: 'left',
}),
slots: ['expandIcon'],
emits: ['change', 'update:activeKey'],
// emits: ['change', 'update:activeKey'],
setup(props, { attrs, slots, emit }) {
const stateActiveKey = ref<Key[]>(
getActiveKeysArray(firstNotUndefined([props.activeKey, props.defaultActiveKey])),

8
components/collapse/CollapsePanel.tsx
View File

@ -12,6 +12,7 @@ export { collapsePanelProps };
export type CollapsePanelProps = Partial<ExtractPropTypes<ReturnType<typeof collapsePanelProps>>>;
export default defineComponent({
name: 'ACollapsePanel',
inheritAttrs: false,
props: initDefaultProps(collapsePanelProps(), {
showArrow: true,
isActive: false,
@ -20,8 +21,8 @@ export default defineComponent({
forceRender: false,
}),
slots: ['expandIcon', 'extra', 'header'],
emits: ['itemClick'],
setup(props, { slots, emit }) {
// emits: ['itemClick'],
setup(props, { slots, emit, attrs }) {
devWarning(
props.disabled === undefined,
'Collapse.Panel',
@ -61,6 +62,7 @@ export default defineComponent({
[`${prefixClsValue}-item-active`]: isActive,
[`${prefixClsValue}-item-disabled`]: disabled,
[`${prefixClsValue}-no-arrow`]: !showArrow,
[`${attrs.class}`]: !!attrs.class,
});
let icon = <i class="arrow" />;
@ -85,7 +87,7 @@ export default defineComponent({
};
return (
<div class={itemCls}>
<div {...attrs} class={itemCls}>
<div
class={headerCls}
onClick={() => collapsible !== 'header' && handleItemClick()}

6
components/collapse/__tests__/__snapshots__/demo.test.js.snap
View File

@ -88,7 +88,7 @@ exports[`renders ./components/collapse/demo/borderless.vue correctly 1`] = `
exports[`renders ./components/collapse/demo/custom.vue correctly 1`] = `
<div class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left">
<div class="ant-collapse-item ant-collapse-item-active" style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;">
<div style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;" class="ant-collapse-item ant-collapse-item-active">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="true">
<div><span role="img" aria-label="caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg focusable="false" class="" style="transform: rotate(90deg);" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path></svg></span></div>This is panel header 1
<!---->
@ -99,14 +99,14 @@ exports[`renders ./components/collapse/demo/custom.vue correctly 1`] = `
</div>
</div>
</div>
<div class="ant-collapse-item" style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;">
<div style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;" class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path></svg></span></div>This is panel header 2
<!---->
</div>
<!---->
</div>
<div class="ant-collapse-item" style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;">
<div style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;" class="ant-collapse-item">
<div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
<div><span role="img" aria-label="caret-right" class="anticon anticon-caret-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path></svg></span></div>This is panel header 3
<!---->

47
components/collapse/commonProps.ts
View File

@ -1,42 +1,57 @@
import type { PropType } from 'vue';
import type { Key } from '../_util/type';
import { tuple } from '../_util/type';
import PropTypes from '../_util/vue-types';
export type CollapsibleType = 'header' | 'disabled';
export type ActiveKeyType = Array<string | number> | string | number;
export interface PanelProps {
isActive?: boolean;
header?: any;
showArrow?: boolean;
forceRender?: boolean;
/** @deprecated Use `collapsible="disabled"` instead */
disabled?: boolean;
extra?: any;
collapsible?: CollapsibleType;
}
const collapseProps = () => ({
prefixCls: PropTypes.string,
prefixCls: String,
activeKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
defaultActiveKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
accordion: PropTypes.looseBool,
destroyInactivePanel: PropTypes.looseBool,
bordered: PropTypes.looseBool,
expandIcon: PropTypes.func,
accordion: { type: Boolean, default: undefined },
destroyInactivePanel: { type: Boolean, default: undefined },
bordered: { type: Boolean, default: undefined },
expandIcon: Function as PropType<(panelProps: PanelProps) => any>,
openAnimation: PropTypes.object,
expandIconPosition: PropTypes.oneOf(tuple('left', 'right')),
collapsible: { type: String as PropType<CollapsibleType> },
ghost: PropTypes.looseBool,
ghost: { type: Boolean, default: undefined },
onChange: Function as PropType<(key: Key | Key[]) => void>,
'onUpdate:activeKey': Function as PropType<(key: Key | Key[]) => void>,
});
const collapsePanelProps = () => ({
openAnimation: PropTypes.object,
prefixCls: PropTypes.string,
prefixCls: String,
header: PropTypes.any,
headerClass: PropTypes.string,
showArrow: PropTypes.looseBool,
isActive: PropTypes.looseBool,
destroyInactivePanel: PropTypes.looseBool,
headerClass: String,
showArrow: { type: Boolean, default: undefined },
isActive: { type: Boolean, default: undefined },
destroyInactivePanel: { type: Boolean, default: undefined },
/** @deprecated Use `collapsible="disabled"` instead */
disabled: PropTypes.looseBool,
accordion: PropTypes.looseBool,
forceRender: PropTypes.looseBool,
expandIcon: PropTypes.func,
disabled: { type: Boolean, default: undefined },
accordion: { type: Boolean, default: undefined },
forceRender: { type: Boolean, default: undefined },
expandIcon: Function as PropType<(panelProps: PanelProps) => any>,
extra: PropTypes.any,
panelKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
collapsible: { type: String as PropType<CollapsibleType> },
role: String,
onItemClick: { type: Function as PropType<(panelKey: string | number) => void> },
onItemClick: { type: Function as PropType<(panelKey: Key) => void> },
});
export { collapseProps, collapsePanelProps };

18
components/color-picker/ColorPicker.jsx
View File

@ -21,18 +21,18 @@ export default {
event: 'change.value', //为了支持v-model直接返回颜色字符串 所以用了自定义的事件,与pickr自带change事件进行区分
},
props: {
prefixCls: PropTypes.string,
defaultValue: PropTypes.string, //默认值
prefixCls: String,
defaultValue: String, //默认值
config: PropTypes.object, //pickr配置
value: PropTypes.string, //颜色值
value: String, //颜色值
locale: PropTypes.object, //双语包
colorRounded: PropTypes.number, //颜色数值保留几位小数
colorRounded: Number, //颜色数值保留几位小数
size: PropTypes.oneOf(['default', 'small', 'large']).def('default'), //尺寸
getPopupContainer: PropTypes.func, //指定渲染容器
disabled: PropTypes.looseBool.def(false), //是否禁用
format: PropTypes.string, //颜色格式设置
alpha: PropTypes.looseBool.def(false), //是否开启透明通道
hue: PropTypes.looseBool.def(true), //是否开启色彩预选
getPopupContainer: Function, //指定渲染容器
disabled: { type: Boolean, default: false }, //是否禁用
format: String, //颜色格式设置
alpha: { type: Boolean, default: false }, //是否开启透明通道
hue: { type: Boolean, default: true }, //是否开启色彩预选
},
data() {

12
components/comment/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`renders ./components/comment/demo/basic.vue correctly 1`] = `
<div class="ant-comment">
<div class="ant-comment-inner">
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-content">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span><span class="ant-comment-content-author-time"><!----><span>a few seconds ago</span></span></div>
<div class="ant-comment-content-detail">
@ -24,7 +24,7 @@ exports[`renders ./components/comment/demo/editor.vue correctly 1`] = `
<!--v-if-->
<div class="ant-comment">
<div class="ant-comment-inner">
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-content">
<div class="ant-comment-content-author">
<!---->
@ -120,7 +120,7 @@ exports[`renders ./components/comment/demo/list.vue correctly 1`] = `
exports[`renders ./components/comment/demo/nested.vue correctly 1`] = `
<div class="ant-comment">
<div class="ant-comment-inner">
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-content">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span>
<!---->
@ -136,7 +136,7 @@ exports[`renders ./components/comment/demo/nested.vue correctly 1`] = `
<div class="ant-comment-nested">
<div class="ant-comment">
<div class="ant-comment-inner">
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-content">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span>
<!---->
@ -152,7 +152,7 @@ exports[`renders ./components/comment/demo/nested.vue correctly 1`] = `
<div class="ant-comment-nested">
<div class="ant-comment">
<div class="ant-comment-inner">
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-content">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span>
<!---->
@ -169,7 +169,7 @@ exports[`renders ./components/comment/demo/nested.vue correctly 1`] = `
</div>
<div class="ant-comment">
<div class="ant-comment-inner">
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random" alt="Han Solo"></span></div>
<div class="ant-comment-content">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span>
<!---->

12
components/comment/index.tsx
View File

@ -5,8 +5,8 @@ import { flattenChildren } from '../_util/props-util';
import type { VueNode } from '../_util/type';
import { withInstall } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject';
export const commentProps = {
actions: PropTypes.array,
export const commentProps = () => ({
actions: Array,
/** The element to display as the comment author. */
author: PropTypes.any,
/** The element to display as the comment avatar - generally an antd Avatar */
@ -14,16 +14,16 @@ export const commentProps = {
/** The main content of the comment */
content: PropTypes.any,
/** Comment prefix defaults to '.ant-comment' */
prefixCls: PropTypes.string,
prefixCls: String,
/** A datetime element containing the time to be displayed */
datetime: PropTypes.any,
};
});
export type CommentProps = Partial<ExtractPropTypes<typeof commentProps>>;
export type CommentProps = Partial<ExtractPropTypes<ReturnType<typeof commentProps>>>;
const Comment = defineComponent({
name: 'AComment',
props: commentProps,
props: commentProps(),
slots: ['actions', 'author', 'avatar', 'content', 'datetime'],
setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('comment', props);

11
components/components.ts
View File

@ -99,13 +99,20 @@ export {
LayoutContent,
} from './layout';
export type { ListProps } from './list';
export type { ListProps, ListItemProps, ListItemMetaProps } from './list';
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, MenuMode } from './menu';
export type {
MenuProps,
MenuTheme,
SubMenuProps,
MenuItemProps,
MenuMode,
MenuDividerProps,
} from './menu';
export { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu';
export type { MentionsProps } from './mentions';

5
components/config-provider/context.ts
View File

@ -4,7 +4,6 @@ import type { ValidateMessages } from '../form/interface';
import type { RequiredMark } from '../form/Form';
import type { RenderEmptyHandler } from './renderEmpty';
import type { TransformCellTextProps } from '../table/interface';
import PropTypes from '../_util/vue-types';
import type { Locale } from '../locale-provider';
type GlobalFormCOntextProps = {
@ -93,7 +92,7 @@ export const configProviderProps = () => ({
input: {
type: Object as PropType<{ autocomplete: string }>,
},
autoInsertSpaceInButton: PropTypes.looseBool,
autoInsertSpaceInButton: { type: Boolean, default: undefined },
locale: {
type: Object as PropType<Locale>,
default: undefined as Locale,
@ -110,7 +109,7 @@ export const configProviderProps = () => ({
space: {
type: Object as PropType<{ size: SizeType | number }>,
},
virtual: PropTypes.looseBool,
virtual: { type: Boolean, default: undefined },
dropdownMatchSelectWidth: { type: [Number, Boolean], default: true },
form: {
type: Object as PropType<{

45
components/descriptions/index.tsx
View File

@ -23,30 +23,31 @@ import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
import Row from './Row';
import PropTypes from '../_util/vue-types';
import { tuple } from '../_util/type';
import { cloneElement } from '../_util/vnode';
import { flattenChildren } from '../_util/props-util';
import useConfigInject from '../_util/hooks/useConfigInject';
export const DescriptionsItemProps = {
prefixCls: PropTypes.string,
prefixCls: String,
label: PropTypes.any,
span: PropTypes.number,
span: Number,
};
const descriptionsItemProp = {
prefixCls: PropTypes.string,
const descriptionsItemProp = () => ({
prefixCls: String,
label: PropTypes.any,
labelStyle: PropTypes.style,
contentStyle: PropTypes.style,
span: PropTypes.number.def(1),
};
labelStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
contentStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
span: { type: Number, default: 1 },
});
export type DescriptionsItemProp = Partial<ExtractPropTypes<typeof descriptionsItemProp>>;
export type DescriptionsItemProp = Partial<
ExtractPropTypes<ReturnType<typeof descriptionsItemProp>>
>;
export const DescriptionsItem = defineComponent({
name: 'ADescriptionsItem',
props: descriptionsItemProp,
props: descriptionsItemProp(),
slots: ['label'],
setup(_, { slots }) {
return () => slots.default?.();
@ -128,24 +129,24 @@ function getRows(children: VNode[], column: number) {
return rows;
}
export const descriptionsProps = {
prefixCls: PropTypes.string,
bordered: PropTypes.looseBool,
size: PropTypes.oneOf(tuple('default', 'middle', 'small')).def('default'),
export const descriptionsProps = () => ({
prefixCls: String,
bordered: { type: Boolean, default: undefined },
size: { type: String as PropType<'default' | 'middle' | 'small'>, default: 'default' },
title: PropTypes.any,
extra: PropTypes.any,
column: {
type: [Number, Object] as PropType<number | Partial<Record<Breakpoint, number>>>,
default: (): number | Partial<Record<Breakpoint, number>> => DEFAULT_COLUMN_MAP,
},
layout: PropTypes.oneOf(tuple('horizontal', 'vertical')),
colon: PropTypes.looseBool,
labelStyle: PropTypes.style,
contentStyle: PropTypes.style,
};
layout: String as PropType<'horizontal' | 'vertical'>,
colon: { type: Boolean, default: undefined },
labelStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
contentStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
});
export type DescriptionsProps = HTMLAttributes &
Partial<ExtractPropTypes<typeof descriptionsProps>>;
Partial<ExtractPropTypes<ReturnType<typeof descriptionsProps>>>;
export interface DescriptionsContextProp {
labelStyle?: Ref<CSSProperties>;
@ -157,7 +158,7 @@ export const descriptionsContext: InjectionKey<DescriptionsContextProp> =
const Descriptions = defineComponent({
name: 'ADescriptions',
props: descriptionsProps,
props: descriptionsProps(),
slots: ['title', 'extra'],
Item: DescriptionsItem,
setup(props, { slots }) {

8
components/divider/index.tsx
View File

@ -4,7 +4,7 @@ import { computed, defineComponent } from 'vue';
import { withInstall } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject';
export const dividerProps = {
export const dividerProps = () => ({
prefixCls: String,
type: {
type: String as PropType<'horizontal' | 'vertical' | ''>,
@ -23,12 +23,12 @@ export const dividerProps = {
default: false,
},
orientationMargin: [String, Number],
};
export type DividerProps = Partial<ExtractPropTypes<typeof dividerProps>>;
});
export type DividerProps = Partial<ExtractPropTypes<ReturnType<typeof dividerProps>>>;
const Divider = defineComponent({
name: 'ADivider',
props: dividerProps,
props: dividerProps(),
setup(props, { slots }) {
const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props);
const hasCustomMarginLeft = computed(

4
components/drawer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -82,7 +82,7 @@ exports[`renders ./components/drawer/demo/user-profile.vue correctly 1`] = `
<ul class="ant-list-items">
<li class="ant-list-item">
<div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></span></div>
<div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Lily</a></h4>
<div class="ant-list-item-meta-description">Progresser XTech</div>
@ -97,7 +97,7 @@ exports[`renders ./components/drawer/demo/user-profile.vue correctly 1`] = `
</li>
<li class="ant-list-item">
<div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></span></div>
<div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Lily</a></h4>
<div class="ant-list-item-meta-description">Progresser XTech</div>

48
components/drawer/index.tsx
View File

@ -19,6 +19,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
import { tuple, withInstall } from '../_util/type';
import omit from '../_util/omit';
import devWarning from '../vc-util/devWarning';
import type { KeyboardEventHandler, MouseEventHandler } from '../_util/EventInterface';
type ILevelMove = number | [number, number];
@ -35,40 +36,43 @@ export interface PushState {
const defaultPushState: PushState = { distance: 180 };
export const drawerProps = () => ({
autofocus: PropTypes.looseBool,
closable: PropTypes.looseBool,
autofocus: { type: Boolean, default: undefined },
closable: { type: Boolean, default: undefined },
closeIcon: PropTypes.any,
destroyOnClose: PropTypes.looseBool,
forceRender: PropTypes.looseBool,
destroyOnClose: { type: Boolean, default: undefined },
forceRender: { type: Boolean, default: undefined },
getContainer: PropTypes.any,
maskClosable: PropTypes.looseBool,
mask: PropTypes.looseBool,
maskStyle: PropTypes.object,
maskClosable: { type: Boolean, default: undefined },
mask: { type: Boolean, default: undefined },
maskStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
/** @deprecated Use `style` instead */
wrapStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
style: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
class: PropTypes.any,
/** @deprecated Use `class` instead */
wrapClassName: PropTypes.string,
wrapClassName: String,
size: {
type: String as PropType<sizeType>,
},
drawerStyle: PropTypes.object,
headerStyle: PropTypes.object,
bodyStyle: PropTypes.object,
contentWrapperStyle: PropTypes.object,
drawerStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
headerStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
bodyStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
contentWrapperStyle: {
type: Object as PropType<CSSProperties>,
default: undefined as CSSProperties,
},
title: PropTypes.any,
visible: PropTypes.looseBool,
visible: { type: Boolean, default: undefined },
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
zIndex: PropTypes.number,
prefixCls: PropTypes.string,
zIndex: Number,
prefixCls: String,
push: PropTypes.oneOfType([PropTypes.looseBool, { type: Object as PropType<PushState> }]),
placement: PropTypes.oneOf(PlacementTypes),
keyboard: PropTypes.looseBool,
keyboard: { type: Boolean, default: undefined },
extra: PropTypes.any,
footer: PropTypes.any,
footerStyle: PropTypes.object,
footerStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
level: PropTypes.any,
levelMove: {
type: [Number, Array, Function] as PropType<
@ -77,7 +81,10 @@ export const drawerProps = () => ({
},
handle: PropTypes.any,
/** @deprecated Use `@afterVisibleChange` instead */
afterVisibleChange: PropTypes.func,
afterVisibleChange: Function as PropType<(visible: boolean) => void>,
onAfterVisibleChange: Function as PropType<(visible: boolean) => void>,
'onUpdate:visible': Function as PropType<(visible: boolean) => void>,
onClose: Function as PropType<MouseEventHandler | KeyboardEventHandler>,
});
export type DrawerProps = Partial<ExtractPropTypes<ReturnType<typeof drawerProps>>>;
@ -95,7 +102,7 @@ const Drawer = defineComponent({
push: defaultPushState,
}),
slots: ['closeIcon', 'title', 'extra', 'footer', 'handle'],
emits: ['update:visible', 'close', 'afterVisibleChange'],
// emits: ['update:visible', 'close', 'afterVisibleChange'],
setup(props, { emit, slots, attrs }) {
const sPush = ref(false);
const destroyClose = ref(false);
@ -343,6 +350,9 @@ const Drawer = defineComponent({
'title',
'push',
'wrapStyle',
'onAfterVisibleChange',
'onClose',
'onUpdate:visible',
]),
...val,
onClose: close,

2
components/dropdown/dropdown-button.tsx
View File

@ -20,7 +20,7 @@ export default defineComponent({
placement: 'bottomRight',
type: 'default',
}),
emits: ['click', 'visibleChange', 'update:visible'],
// emits: ['click', 'visibleChange', 'update:visible'],
slots: ['icon', 'leftButton', 'rightButton', 'overlay'],
setup(props, { slots, attrs, emit }) {
const handleVisibleChange = (val: boolean) => {

2
components/dropdown/dropdown.tsx
View File

@ -23,7 +23,7 @@ const Dropdown = defineComponent({
placement: 'bottomLeft',
trigger: 'hover',
}),
emits: ['visibleChange', 'update:visible'],
// emits: ['visibleChange', 'update:visible'],
slots: ['overlay'],
setup(props, { slots, attrs, emit }) {
const { prefixCls, rootPrefixCls, direction, getPopupContainer } = useConfigInject(

61
components/dropdown/props.ts
View File

@ -1,5 +1,4 @@
import { tuple } from '../_util/type';
import type { PropType } from 'vue';
import type { CSSProperties, PropType } from 'vue';
import PropTypes from '../_util/vue-types';
import buttonTypes from '../button/buttonTypes';
@ -32,32 +31,30 @@ const dropdownProps = () => ({
>,
},
overlay: PropTypes.any,
visible: PropTypes.looseBool,
disabled: PropTypes.looseBool,
visible: { type: Boolean, default: undefined },
disabled: { type: Boolean, default: undefined },
align: { type: Object as PropType<Align> },
getPopupContainer: PropTypes.func,
prefixCls: PropTypes.string,
transitionName: PropTypes.string,
placement: PropTypes.oneOf(
tuple(
'topLeft',
'topCenter',
'top',
'topRight',
'bottomLeft',
'bottomCenter',
'bottom',
'bottomRight',
),
),
overlayClassName: PropTypes.string,
overlayStyle: PropTypes.style,
forceRender: PropTypes.looseBool,
mouseEnterDelay: PropTypes.number,
mouseLeaveDelay: PropTypes.number,
openClassName: PropTypes.string,
minOverlayWidthMatchTrigger: PropTypes.looseBool,
destroyPopupOnHide: PropTypes.looseBool,
getPopupContainer: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
prefixCls: String,
transitionName: String,
placement: String as PropType<
| 'topLeft'
| 'topCenter'
| 'top'
| 'topRight'
| 'bottomLeft'
| 'bottomCenter'
| 'bottom'
| 'bottomRight'
>,
overlayClassName: String,
overlayStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
forceRender: { type: Boolean, default: undefined },
mouseEnterDelay: Number,
mouseLeaveDelay: Number,
openClassName: String,
minOverlayWidthMatchTrigger: { type: Boolean, default: undefined },
destroyPopupOnHide: { type: Boolean, default: undefined },
onVisibleChange: {
type: Function as PropType<(val: boolean) => void>,
},
@ -70,13 +67,13 @@ const buttonTypesProps = buttonTypes();
const dropdownButtonProps = () => ({
...dropdownProps(),
type: buttonTypesProps.type,
size: PropTypes.oneOf(tuple('small', 'large')),
size: String as PropType<'small' | 'large'>,
htmlType: buttonTypesProps.htmlType,
href: PropTypes.string,
disabled: PropTypes.looseBool,
prefixCls: PropTypes.string,
href: String,
disabled: { type: Boolean, default: undefined },
prefixCls: String,
icon: PropTypes.any,
title: PropTypes.string,
title: String,
loading: buttonTypesProps.loading,
onClick: {
type: Function as PropType<MouseEventHandler>,

6
components/empty/index.tsx
View File

@ -1,4 +1,4 @@
import type { CSSProperties, FunctionalComponent } from 'vue';
import type { CSSProperties, FunctionalComponent, PropType } from 'vue';
import classNames from '../_util/classNames';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import DefaultEmptyImg from './empty';
@ -85,10 +85,10 @@ Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg;
Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg;
Empty.inheritAttrs = false;
Empty.props = {
prefixCls: PropTypes.string,
prefixCls: String,
image: PropTypes.any,
description: PropTypes.any,
imageStyle: PropTypes.object,
imageStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
};
export default withInstall(Empty);

30
components/form/Form.tsx
View File

@ -23,6 +23,7 @@ import type {
ValidateErrorEntity,
ValidateOptions,
Callbacks,
ValidateMessages,
} from './interface';
import { useInjectSize } from '../_util/hooks/useSize';
import useConfigInject from '../_util/hooks/useConfigInject';
@ -60,25 +61,28 @@ export type ValidationRule = {
trigger?: string;
};
export const formProps = {
export const formProps = () => ({
layout: PropTypes.oneOf(tuple('horizontal', 'inline', 'vertical')),
labelCol: { type: Object as PropType<ColProps & HTMLAttributes> },
wrapperCol: { type: Object as PropType<ColProps & HTMLAttributes> },
colon: PropTypes.looseBool,
colon: { type: Boolean, default: undefined },
labelAlign: PropTypes.oneOf(tuple('left', 'right')),
labelWrap: PropTypes.looseBool,
prefixCls: PropTypes.string,
labelWrap: { type: Boolean, default: undefined },
prefixCls: String,
requiredMark: { type: [String, Boolean] as PropType<RequiredMark | ''>, default: undefined },
/** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */
hideRequiredMark: PropTypes.looseBool,
hideRequiredMark: { type: Boolean, default: undefined },
model: PropTypes.object,
rules: { type: Object as PropType<{ [k: string]: ValidationRule[] | ValidationRule }> },
validateMessages: PropTypes.object,
validateOnRuleChange: PropTypes.looseBool,
validateMessages: {
type: Object as PropType<ValidateMessages>,
default: undefined as ValidateMessages,
},
validateOnRuleChange: { type: Boolean, default: undefined },
// 提交失败自动滚动到第一个错误字段
scrollToFirstError: { type: [Boolean, Object] as PropType<boolean | Options> },
onSubmit: PropTypes.func,
name: PropTypes.string,
onSubmit: Function as PropType<(e: Event) => void>,
name: String,
validateTrigger: { type: [String, Array] as PropType<string | string[]> },
size: { type: String as PropType<SizeType> },
onValuesChange: { type: Function as PropType<Callbacks['onValuesChange']> },
@ -86,9 +90,9 @@ export const formProps = {
onFinish: { type: Function as PropType<Callbacks['onFinish']> },
onFinishFailed: { type: Function as PropType<Callbacks['onFinishFailed']> },
onValidate: { type: Function as PropType<Callbacks['onValidate']> },
};
});
export type FormProps = Partial<ExtractPropTypes<typeof formProps>>;
export type FormProps = Partial<ExtractPropTypes<ReturnType<typeof formProps>>>;
export type FormExpose = {
resetFields: (name?: NamePath) => void;
@ -120,14 +124,14 @@ function isEqualName(name1: NamePath, name2: NamePath) {
const Form = defineComponent({
name: 'AForm',
inheritAttrs: false,
props: initDefaultProps(formProps, {
props: initDefaultProps(formProps(), {
layout: 'horizontal',
hideRequiredMark: false,
colon: true,
}),
Item: FormItem,
useForm,
emits: ['finishFailed', 'submit', 'finish', 'validate'],
// emits: ['finishFailed', 'submit', 'finish', 'validate'],
setup(props, { emit, slots, expose, attrs }) {
const size = useInjectSize(props);
const { prefixCls, direction, form: contextForm } = useConfigInject('form', props);

26
components/form/FormItem.tsx
View File

@ -27,7 +27,7 @@ import { toArray } from './utils/typeUtil';
import { warning } from '../vc-util/warning';
import find from 'lodash-es/find';
import { tuple } from '../_util/type';
import type { InternalNamePath, RuleError, RuleObject, ValidateOptions } from './interface';
import type { InternalNamePath, Rule, RuleError, RuleObject, ValidateOptions } from './interface';
import useConfigInject from '../_util/hooks/useConfigInject';
import { useInjectForm } from './context';
import FormItemLabel from './FormItemLabel';
@ -81,31 +81,31 @@ function getPropByPath(obj: any, namePathList: any, strict?: boolean) {
v: tempObj ? tempObj[keyArr[i]] : undefined,
};
}
export const formItemProps = {
htmlFor: PropTypes.string,
prefixCls: PropTypes.string,
export const formItemProps = () => ({
htmlFor: String,
prefixCls: String,
label: PropTypes.any,
help: PropTypes.any,
extra: PropTypes.any,
labelCol: { type: Object as PropType<ColProps & HTMLAttributes> },
wrapperCol: { type: Object as PropType<ColProps & HTMLAttributes> },
hasFeedback: PropTypes.looseBool.def(false),
colon: PropTypes.looseBool,
hasFeedback: { type: Boolean, default: false },
colon: { type: Boolean, default: undefined },
labelAlign: PropTypes.oneOf(tuple('left', 'right')),
prop: { type: [String, Number, Array] as PropType<string | number | Array<string | number>> },
name: { type: [String, Number, Array] as PropType<string | number | Array<string | number>> },
rules: PropTypes.oneOfType([Array, Object]),
autoLink: PropTypes.looseBool.def(true),
required: PropTypes.looseBool,
validateFirst: PropTypes.looseBool,
rules: [Array, Object] as PropType<Rule[] | Rule>,
autoLink: { type: Boolean, default: true },
required: { type: Boolean, default: undefined },
validateFirst: { type: Boolean, default: undefined },
validateStatus: PropTypes.oneOf(tuple('', 'success', 'warning', 'error', 'validating')),
validateTrigger: { type: [String, Array] as PropType<string | string[]> },
messageVariables: { type: Object as PropType<Record<string, string>> },
hidden: Boolean,
noStyle: Boolean,
};
});
export type FormItemProps = Partial<ExtractPropTypes<typeof formItemProps>>;
export type FormItemProps = Partial<ExtractPropTypes<ReturnType<typeof formItemProps>>>;
export type FormItemExpose = {
onFieldBlur: () => void;
@ -125,7 +125,7 @@ export default defineComponent({
name: 'AFormItem',
inheritAttrs: false,
__ANT_NEW_FORM_ITEM: true,
props: formItemProps,
props: formItemProps(),
slots: ['help', 'label', 'extra'],
setup(props, { slots, attrs, expose }) {
warning(props.prop === undefined, `\`prop\` is deprecated. Please use \`name\` instead.`);

35
components/grid/Col.tsx
View File

@ -34,13 +34,34 @@ export const colProps = () => ({
offset: [String, Number],
push: [String, Number],
pull: [String, Number],
xs: { type: [String, Number, Object] as PropType<string | number | ColSize> },
sm: { type: [String, Number, Object] as PropType<string | number | ColSize> },
md: { type: [String, Number, Object] as PropType<string | number | ColSize> },
lg: { type: [String, Number, Object] as PropType<string | number | ColSize> },
xl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
xxl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
xxxl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
xs: {
type: [String, Number, Object] as PropType<string | number | ColSize>,
default: undefined as string | number | ColSize,
},
sm: {
type: [String, Number, Object] as PropType<string | number | ColSize>,
default: undefined as string | number | ColSize,
},
md: {
type: [String, Number, Object] as PropType<string | number | ColSize>,
default: undefined as string | number | ColSize,
},
lg: {
type: [String, Number, Object] as PropType<string | number | ColSize>,
default: undefined as string | number | ColSize,
},
xl: {
type: [String, Number, Object] as PropType<string | number | ColSize>,
default: undefined as string | number | ColSize,
},
xxl: {
type: [String, Number, Object] as PropType<string | number | ColSize>,
default: undefined as string | number | ColSize,
},
xxxl: {
type: [String, Number, Object] as PropType<string | number | ColSize>,
default: undefined as string | number | ColSize,
},
prefixCls: String,
flex: [String, Number],
});

3
components/image/PreviewGroup.tsx
View File

@ -1,12 +1,11 @@
import PreviewGroup from '../vc-image/src/PreviewGroup';
import { computed, defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject';
const InternalPreviewGroup = defineComponent({
name: 'AImagePreviewGroup',
inheritAttrs: false,
props: { previewPrefixCls: PropTypes.string },
props: { previewPrefixCls: String },
setup(props, { attrs, slots }) {
const { getPrefixCls } = useConfigInject('image', props);
const prefixCls = computed(() => getPrefixCls('image-preview', props.previewPrefixCls));

5
components/image/index.tsx
View File

@ -6,12 +6,13 @@ import useConfigInject from '../_util/hooks/useConfigInject';
import PreviewGroup from './PreviewGroup';
export type ImageProps = Partial<
ExtractPropTypes<typeof imageProps> & Omit<ImgHTMLAttributes, 'placeholder' | 'onClick'>
ExtractPropTypes<ReturnType<typeof imageProps>> &
Omit<ImgHTMLAttributes, 'placeholder' | 'onClick'>
>;
const Image = defineComponent<ImageProps>({
name: 'AImage',
inheritAttrs: false,
props: imageProps as any,
props: imageProps() as any,
setup(props, { slots, attrs }) {
const { prefixCls } = useConfigInject('image', props);
return () => {

15
components/input-number/index.tsx
View File

@ -11,8 +11,9 @@ import { cloneElement } from '../_util/vnode';
import omit from '../_util/omit';
import PropTypes from '../_util/vue-types';
import isValidValue from '../_util/isValidValue';
export const inputNumberProps = {
...baseInputNumberProps,
const baseProps = baseInputNumberProps();
export const inputNumberProps = () => ({
...baseProps,
size: { type: String as PropType<SizeType> },
bordered: { type: Boolean, default: true },
placeholder: String,
@ -22,16 +23,16 @@ export const inputNumberProps = {
addonBefore: PropTypes.any,
addonAfter: PropTypes.any,
prefix: PropTypes.any,
'update:value': baseInputNumberProps.onChange,
};
'update:value': baseProps.onChange,
});
export type InputNumberProps = Partial<ExtractPropTypes<typeof inputNumberProps>>;
export type InputNumberProps = Partial<ExtractPropTypes<ReturnType<typeof inputNumberProps>>>;
const InputNumber = defineComponent({
name: 'AInputNumber',
inheritAttrs: false,
props: inputNumberProps,
emits: ['focus', 'blur', 'change', 'input', 'update:value'],
props: inputNumberProps(),
// emits: ['focus', 'blur', 'change', 'input', 'update:value'],
slots: ['addonBefore', 'addonAfter', 'prefix'],
setup(props, { emit, expose, attrs, slots }) {
const formItemContext = useInjectFormItemContext();

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

@ -34,7 +34,7 @@ const getDecimalIfValidate = (value: ValueType) => {
return decimal.isInvalidate() ? null : decimal;
};
export const inputNumberProps = {
export const inputNumberProps = () => ({
/** value will show as string */
stringMode: { type: Boolean as PropType<boolean> },
@ -76,12 +76,12 @@ export const inputNumberProps = {
},
onBlur: { type: Function as PropType<(e: InputEvent) => void> },
onFocus: { type: Function as PropType<(e: InputEvent) => void> },
};
});
export default defineComponent({
name: 'InnerInputNumber',
inheritAttrs: false,
props: inputNumberProps,
props: inputNumberProps(),
slots: ['upHandler', 'downHandler'],
setup(props, { attrs, slots, emit, expose }) {
const inputRef = ref<HTMLInputElement>();

14
components/input/ClearableLabeledInput.tsx
View File

@ -15,23 +15,23 @@ export default defineComponent({
name: 'ClearableLabeledInput',
inheritAttrs: false,
props: {
prefixCls: PropTypes.string,
prefixCls: String,
inputType: PropTypes.oneOf(tuple('text', 'input')),
value: PropTypes.any,
defaultValue: PropTypes.any,
allowClear: PropTypes.looseBool,
allowClear: { type: Boolean, default: undefined },
element: PropTypes.any,
handleReset: PropTypes.func,
disabled: PropTypes.looseBool,
handleReset: Function as PropType<MouseEventHandler>,
disabled: { type: Boolean, default: undefined },
direction: { type: String as PropType<Direction> },
size: { type: String as PropType<SizeType> },
suffix: PropTypes.any,
prefix: PropTypes.any,
addonBefore: PropTypes.any,
addonAfter: PropTypes.any,
readonly: PropTypes.looseBool,
focused: PropTypes.looseBool,
bordered: PropTypes.looseBool.def(true),
readonly: { type: Boolean, default: undefined },
focused: { type: Boolean, default: undefined },
bordered: { type: Boolean, default: true },
triggerFocus: { type: Function as PropType<() => void> },
hidden: Boolean,
},

5
components/input/Group.tsx
View File

@ -1,6 +1,5 @@
import type { PropType } from 'vue';
import { computed, defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import type { SizeType } from '../config-provider';
import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
import useConfigInject from '../_util/hooks/useConfigInject';
@ -8,9 +7,9 @@ import useConfigInject from '../_util/hooks/useConfigInject';
export default defineComponent({
name: 'AInputGroup',
props: {
prefixCls: PropTypes.string,
prefixCls: String,
size: { type: String as PropType<SizeType> },
compact: PropTypes.looseBool,
compact: { type: Boolean, default: undefined },
onMouseenter: { type: Function as PropType<MouseEventHandler> },
onMouseleave: { type: Function as PropType<MouseEventHandler> },
onFocus: { type: Function as PropType<FocusEventHandler> },

7
components/input/Input.tsx
View File

@ -107,9 +107,7 @@ export function triggerFocus(
export default defineComponent({
name: 'AInput',
inheritAttrs: false,
props: {
...inputProps,
},
props: inputProps(),
setup(props, { slots, attrs, expose, emit }) {
const inputRef = ref();
const clearableInputRef = ref();
@ -268,7 +266,7 @@ export default defineComponent({
valueModifiers = {},
htmlSize,
} = props;
const otherProps = omit(props as InputProps & { inputType: any; placeholder: string }, [
const otherProps = omit(props as InputProps & { placeholder: string }, [
'prefixCls',
'onPressEnter',
'addonBefore',
@ -280,7 +278,6 @@ export default defineComponent({
// specify either the value prop, or the defaultValue prop, but not both.
'defaultValue',
'size',
'inputType',
'bordered',
'htmlSize',
'lazy',

10
components/input/Password.tsx
View File

@ -23,12 +23,12 @@ export default defineComponent({
mixins: [BaseMixin],
inheritAttrs: false,
props: {
...inputProps,
prefixCls: PropTypes.string,
inputPrefixCls: PropTypes.string,
...inputProps(),
prefixCls: String,
inputPrefixCls: String,
action: PropTypes.string.def('click'),
visibilityToggle: PropTypes.looseBool.def(true),
iconRender: PropTypes.func,
visibilityToggle: { type: Boolean, default: true },
iconRender: Function,
},
setup(props, { slots, attrs, expose }) {
const visible = ref(false);

2
components/input/ResizableTextArea.tsx
View File

@ -27,7 +27,7 @@ const ResizableTextArea = defineComponent({
name: 'ResizableTextArea',
mixins: [BaseMixin],
inheritAttrs: false,
props: textAreaProps,
props: textAreaProps(),
setup(props, { attrs, emit, expose }) {
let nextFrameActionId: any;
let resizeFrameId: any;

4
components/input/Search.tsx
View File

@ -17,8 +17,8 @@ export default defineComponent({
name: 'AInputSearch',
inheritAttrs: false,
props: {
...inputProps,
inputPrefixCls: PropTypes.string,
...inputProps(),
inputPrefixCls: String,
// 不能设置默认值 https://github.com/vueComponent/ant-design-vue/issues/1916
enterButton: PropTypes.any,
onSearch: {

2
components/input/TextArea.tsx
View File

@ -47,7 +47,7 @@ function setTriggerValue(
export default defineComponent({
name: 'ATextarea',
inheritAttrs: false,
props: textAreaProps,
props: textAreaProps(),
setup(props, { attrs, expose, emit }) {
const formItemContext = useInjectFormItemContext();
const stateValue = ref(props.value === undefined ? props.defaultValue : props.value);

64
components/input/inputProps.ts
View File

@ -3,11 +3,17 @@ import PropTypes from '../_util/vue-types';
import type { SizeType } from '../config-provider';
import omit from '../_util/omit';
import type { LiteralUnion, VueNode } from '../_util/type';
import type {
ChangeEventHandler,
CompositionEventHandler,
FocusEventHandler,
KeyboardEventHandler,
} from '../_util/EventInterface';
export const inputDefaultValue = Symbol() as unknown as string;
const inputProps = {
id: PropTypes.string,
prefixCls: PropTypes.string,
inputPrefixCls: PropTypes.string,
const inputProps = () => ({
id: String,
prefixCls: String,
inputPrefixCls: String,
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
value: {
type: [String, Number, Symbol] as PropType<string | number>,
@ -47,35 +53,35 @@ const inputProps = {
>,
default: 'text',
},
name: PropTypes.string,
name: String,
size: { type: String as PropType<SizeType> },
disabled: PropTypes.looseBool,
readonly: PropTypes.looseBool,
disabled: { type: Boolean, default: undefined },
readonly: { type: Boolean, default: undefined },
addonBefore: PropTypes.any,
addonAfter: PropTypes.any,
prefix: PropTypes.any,
suffix: PropTypes.any,
autofocus: PropTypes.looseBool,
allowClear: PropTypes.looseBool,
lazy: PropTypes.looseBool.def(true),
maxlength: PropTypes.number,
loading: PropTypes.looseBool,
bordered: PropTypes.looseBool,
autofocus: { type: Boolean, default: undefined },
allowClear: { type: Boolean, default: undefined },
lazy: { type: Boolean, default: true },
maxlength: Number,
loading: { type: Boolean, default: undefined },
bordered: { type: Boolean, default: undefined },
showCount: { type: [Boolean, Object] as PropType<boolean | ShowCountProps> },
htmlSize: Number,
onPressEnter: PropTypes.func,
onKeydown: PropTypes.func,
onKeyup: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onChange: PropTypes.func,
onInput: PropTypes.func,
'onUpdate:value': PropTypes.func,
onPressEnter: Function as PropType<KeyboardEventHandler>,
onKeydown: Function as PropType<KeyboardEventHandler>,
onKeyup: Function as PropType<KeyboardEventHandler>,
onFocus: Function as PropType<FocusEventHandler>,
onBlur: Function as PropType<FocusEventHandler>,
onChange: Function as PropType<ChangeEventHandler>,
onInput: Function as PropType<ChangeEventHandler>,
'onUpdate:value': Function as PropType<(val: string) => void>,
valueModifiers: Object,
hidden: Boolean,
};
});
export default inputProps;
export type InputProps = Partial<ExtractPropTypes<typeof inputProps>>;
export type InputProps = Partial<ExtractPropTypes<ReturnType<typeof inputProps>>>;
export interface AutoSizeType {
minRows?: number;
@ -84,17 +90,17 @@ export interface AutoSizeType {
export interface ShowCountProps {
formatter: (args: { count: number; maxlength?: number }) => VueNode;
}
const textAreaProps = {
...omit(inputProps, ['prefix', 'addonBefore', 'addonAfter', 'suffix']),
const textAreaProps = () => ({
...omit(inputProps(), ['prefix', 'addonBefore', 'addonAfter', 'suffix']),
rows: Number,
autosize: { type: [Boolean, Object] as PropType<AutoSizeType>, default: undefined },
autoSize: { type: [Boolean, Object] as PropType<AutoSizeType>, default: undefined },
onResize: { type: Function as PropType<(size: { width: number; height: number }) => void> },
onCompositionstart: PropTypes.func,
onCompositionend: PropTypes.func,
onCompositionstart: Function as PropType<CompositionEventHandler>,
onCompositionend: Function as PropType<CompositionEventHandler>,
valueModifiers: Object,
};
});
export { textAreaProps };
export type TextAreaProps = Partial<ExtractPropTypes<typeof textAreaProps>>;
export type TextAreaProps = Partial<ExtractPropTypes<ReturnType<typeof textAreaProps>>>;

28
components/layout/Sider.tsx
View File

@ -23,13 +23,16 @@ const dimensionMaxMap = {
export type CollapseType = 'clickTrigger' | 'responsive';
export const siderProps = {
prefixCls: PropTypes.string,
collapsible: PropTypes.looseBool,
collapsed: PropTypes.looseBool,
defaultCollapsed: PropTypes.looseBool,
reverseArrow: PropTypes.looseBool,
zeroWidthTriggerStyle: PropTypes.style,
export const siderProps = () => ({
prefixCls: String,
collapsible: { type: Boolean, default: undefined },
collapsed: { type: Boolean, default: undefined },
defaultCollapsed: { type: Boolean, default: undefined },
reverseArrow: { type: Boolean, default: undefined },
zeroWidthTriggerStyle: {
type: Object as PropType<CSSProperties>,
default: undefined as CSSProperties,
},
trigger: PropTypes.any,
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@ -37,14 +40,9 @@ export const siderProps = {
theme: PropTypes.oneOf(tuple('light', 'dark')).def('dark'),
onBreakpoint: Function as PropType<(broken: boolean) => void>,
onCollapse: Function as PropType<(collapsed: boolean, type: CollapseType) => void>,
};
});
export type SiderProps = Partial<ExtractPropTypes<typeof siderProps>>;
// export interface SiderState {
// collapsed?: boolean;
// below: boolean;
// belowShow?: boolean;
// }
export type SiderProps = Partial<ExtractPropTypes<ReturnType<typeof siderProps>>>;
export interface SiderContextProps {
sCollapsed?: boolean;
@ -62,7 +60,7 @@ const generateId = (() => {
export default defineComponent({
name: 'ALayoutSider',
inheritAttrs: false,
props: initDefaultProps(siderProps, {
props: initDefaultProps(siderProps(), {
collapsible: false,
defaultCollapsed: false,
reverseArrow: false,

19
components/layout/layout.tsx
View File

@ -1,16 +1,15 @@
import type { ExtractPropTypes, HTMLAttributes } from 'vue';
import { computed, createVNode, defineComponent, provide, ref } from 'vue';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject';
import { SiderHookProviderKey } from './injectionKey';
export const basicProps = {
prefixCls: PropTypes.string,
hasSider: PropTypes.looseBool,
tagName: PropTypes.string,
};
export const basicProps = () => ({
prefixCls: String,
hasSider: { type: Boolean, default: undefined },
tagName: String,
});
export type BasicProps = Partial<ExtractPropTypes<typeof basicProps>> & HTMLAttributes;
export type BasicProps = Partial<ExtractPropTypes<ReturnType<typeof basicProps>>> & HTMLAttributes;
type GeneratorArgument = {
suffixCls: string;
@ -22,7 +21,7 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
return (BasicComponent: typeof Basic) => {
const Adapter = defineComponent({
name,
props: basicProps,
props: basicProps(),
setup(props, { slots }) {
const { prefixCls } = useConfigInject(suffixCls, props);
return () => {
@ -40,14 +39,14 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
}
const Basic = defineComponent({
props: basicProps,
props: basicProps(),
setup(props, { slots }) {
return () => createVNode(props.tagName, { class: props.prefixCls }, slots);
},
});
const BasicLayout = defineComponent({
props: basicProps,
props: basicProps(),
setup(props, { slots }) {
const { direction } = useConfigInject('', props);
const siders = ref<string[]>([]);

15
components/list/Item.tsx
View File

@ -3,24 +3,27 @@ import classNames from '../_util/classNames';
import { isStringElement, isEmptyElement, flattenChildren } from '../_util/props-util';
import { Col } from '../grid';
import { cloneElement } from '../_util/vnode';
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import { defineComponent, inject, ref } from 'vue';
import ItemMeta from './ItemMeta';
import useConfigInject from '../_util/hooks/useConfigInject';
import { ListContextKey } from './contextKey';
import type { ListGridType } from '.';
export const ListItemProps = {
prefixCls: PropTypes.string,
export const listItemProps = () => ({
prefixCls: String,
extra: PropTypes.any,
actions: PropTypes.array,
grid: PropTypes.any,
colStyle: PropTypes.style,
};
grid: Object as PropType<ListGridType>,
colStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
});
export type ListItemProps = Partial<ExtractPropTypes<ReturnType<typeof listItemProps>>>;
export default defineComponent({
name: 'AListItem',
inheritAttrs: false,
Meta: ItemMeta,
props: ListItemProps,
props: listItemProps(),
slots: ['actions', 'extra'],
setup(props, { slots, attrs }) {
const { itemLayout, grid } = inject(ListContextKey, {

10
components/list/ItemMeta.tsx
View File

@ -3,18 +3,18 @@ import { defineComponent } from 'vue';
import useConfigInject from '../_util/hooks/useConfigInject';
import PropTypes from '../_util/vue-types';
export const listItemMetaProps = {
export const listItemMetaProps = () => ({
avatar: PropTypes.any,
description: PropTypes.any,
prefixCls: PropTypes.string,
prefixCls: String,
title: PropTypes.any,
};
});
export type ListItemMetaProps = Partial<ExtractPropTypes<typeof listItemMetaProps>>;
export type ListItemMetaProps = Partial<ExtractPropTypes<ReturnType<typeof listItemMetaProps>>>;
export default defineComponent({
name: 'AListItemMeta',
props: listItemMetaProps,
props: listItemMetaProps(),
displayName: 'AListItemMeta', // 兼容历史函数式组件
__ANT_LIST_ITEM_META: true,
slots: ['avatar', 'description', 'title'],

14
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

@ -10,7 +10,7 @@ exports[`renders ./components/list/demo/basic.vue correctly 1`] = `
<ul class="ant-list-items">
<li class="ant-list-item">
<div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 1</a></h4>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
@ -21,7 +21,7 @@ exports[`renders ./components/list/demo/basic.vue correctly 1`] = `
</li>
<li class="ant-list-item">
<div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 2</a></h4>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
@ -32,7 +32,7 @@ exports[`renders ./components/list/demo/basic.vue correctly 1`] = `
</li>
<li class="ant-list-item">
<div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 3</a></h4>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
@ -43,7 +43,7 @@ exports[`renders ./components/list/demo/basic.vue correctly 1`] = `
</li>
<li class="ant-list-item">
<div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 4</a></h4>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
@ -420,7 +420,7 @@ exports[`renders ./components/list/demo/vertical.vue correctly 1`] = `
<li class="ant-list-item">
<div class="ant-list-item-main">
<div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">ant design vue part 0</a></h4>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div>
@ -438,7 +438,7 @@ exports[`renders ./components/list/demo/vertical.vue correctly 1`] = `
<li class="ant-list-item">
<div class="ant-list-item-main">
<div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">ant design vue part 1</a></h4>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div>
@ -456,7 +456,7 @@ exports[`renders ./components/list/demo/vertical.vue correctly 1`] = `
<li class="ant-list-item">
<div class="ant-list-item-main">
<div class="ant-list-item-meta">
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span></div>
<div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">ant design vue part 2</a></h4>
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div>

8
components/list/index.tsx
View File

@ -19,7 +19,7 @@ import type { Breakpoint } from '../_util/responsiveObserve';
import { responsiveArray } from '../_util/responsiveObserve';
import eagerComputed from '../_util/eagerComputed';
export { ListItemProps } from './Item';
export type { ListItemProps } from './Item';
export type { ListItemMetaProps } from './ItemMeta';
export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
@ -41,7 +41,7 @@ export type ListSize = 'small' | 'default' | 'large';
export type ListItemLayout = 'horizontal' | 'vertical';
export const listProps = () => ({
bordered: PropTypes.looseBool,
bordered: { type: Boolean, default: undefined },
dataSource: PropTypes.array,
extra: PropTypes.any,
grid: { type: Object as PropType<ListGridType>, default: undefined as ListGridType },
@ -57,9 +57,9 @@ export const listProps = () => ({
},
prefixCls: String,
rowKey: [String, Number, Function] as PropType<Key | ((item: any) => Key)>,
renderItem: PropTypes.any,
renderItem: Function as PropType<(opt: { item: any; index: number }) => any>,
size: String as PropType<ListSize>,
split: PropTypes.looseBool,
split: { type: Boolean, default: undefined },
header: PropTypes.any,
footer: PropTypes.any,
locale: {

3
components/locale-provider/index.tsx
View File

@ -1,6 +1,5 @@
import type { App, VNode, PropType } from 'vue';
import { provide, defineComponent, reactive, watch } from 'vue';
import PropTypes from '../_util/vue-types';
import type { ModalLocale } from '../modal/locale';
import warning from '../_util/warning';
import { withInstall } from '../_util/type';
@ -59,7 +58,7 @@ const LocaleProvider = defineComponent({
locale: {
type: Object as PropType<Locale>,
},
ANT_MARK__: PropTypes.string,
ANT_MARK__: String,
},
setup(props, { slots }) {
warning(

18
components/mentions/index.tsx
View File

@ -9,6 +9,7 @@ import { flattenChildren, getOptionProps } from '../_util/props-util';
import { useInjectFormItemContext } from '../form/FormItemContext';
import omit from '../_util/omit';
import { optionProps } from '../vc-mentions/src/Option';
import type { KeyboardEventHandler } from '../_util/EventInterface';
interface MentionsConfig {
prefix?: string | string[];
@ -58,9 +59,9 @@ const getMentions = (value = '', config: MentionsConfig = {}): MentionsEntity[]
.filter((entity): entity is MentionsEntity => !!entity && !!entity.value);
};
export const mentionsProps = {
export const mentionsProps = () => ({
...baseMentionsProps,
loading: PropTypes.looseBool,
loading: { type: Boolean, default: undefined },
onFocus: {
type: Function as PropType<(e: FocusEvent) => void>,
},
@ -73,18 +74,23 @@ export const mentionsProps = {
onChange: {
type: Function as PropType<(text: string) => void>,
},
onPressenter: {
type: Function as PropType<KeyboardEventHandler>,
},
'onUpdate:value': {
type: Function as PropType<(text: string) => void>,
},
notFoundContent: PropTypes.any,
defaultValue: String,
id: String,
};
});
export type MentionsProps = Partial<ExtractPropTypes<typeof mentionsProps>>;
export type MentionsProps = Partial<ExtractPropTypes<ReturnType<typeof mentionsProps>>>;
const Mentions = defineComponent({
name: 'AMentions',
inheritAttrs: false,
props: mentionsProps,
emits: ['update:value', 'change', 'focus', 'blur', 'select', 'pressenter'],
props: mentionsProps(),
slots: ['notFoundContent', 'option'],
setup(props, { slots, emit, attrs, expose }) {
const { prefixCls, renderEmpty, direction } = useConfigInject('mentions', props);

11
components/menu/index.tsx
View File

@ -7,6 +7,7 @@ import SubMenu from './src/SubMenu';
import type { MenuItemGroupProps } from './src/ItemGroup';
import ItemGroup from './src/ItemGroup';
import Divider from './src/Divider';
import type { MenuDividerProps } from './src/Divider';
import type { App, Plugin } from 'vue';
import type { MenuTheme, MenuMode } from './src/interface';
/* istanbul ignore next */
@ -23,7 +24,15 @@ Menu.Item = MenuItem;
Menu.Divider = Divider;
Menu.SubMenu = SubMenu;
Menu.ItemGroup = ItemGroup;
export type { MenuProps, SubMenuProps, MenuItemProps, MenuItemGroupProps, MenuTheme, MenuMode };
export type {
MenuProps,
SubMenuProps,
MenuItemProps,
MenuItemGroupProps,
MenuTheme,
MenuMode,
MenuDividerProps,
};
export {
SubMenu,
MenuItem as Item,

13
components/menu/src/Divider.tsx
View File

@ -1,12 +1,17 @@
import useConfigInject from '../../_util/hooks/useConfigInject';
import type { ExtractPropTypes } from 'vue';
import { computed, defineComponent } from 'vue';
export const menuDividerProps = () => ({
prefixCls: String,
dashed: Boolean,
});
export type MenuDividerProps = Partial<ExtractPropTypes<ReturnType<typeof menuDividerProps>>>;
export default defineComponent({
name: 'AMenuDivider',
props: {
prefixCls: String,
dashed: Boolean,
},
props: menuDividerProps(),
setup(props) {
const { prefixCls } = useConfigInject('menu', props);
const cls = computed(() => {

8
components/menu/src/ItemGroup.tsx
View File

@ -5,16 +5,16 @@ import PropTypes from '../../_util/vue-types';
import { useInjectMenu } from './hooks/useMenuContext';
import { useMeasure } from './hooks/useKeyPath';
export const menuItemGroupProps = {
export const menuItemGroupProps = () => ({
title: PropTypes.any,
};
});
export type MenuItemGroupProps = Partial<ExtractPropTypes<typeof menuItemGroupProps>>;
export type MenuItemGroupProps = Partial<ExtractPropTypes<ReturnType<typeof menuItemGroupProps>>>;
export default defineComponent({
name: 'AMenuItemGroup',
inheritAttrs: false,
props: menuItemGroupProps,
props: menuItemGroupProps(),
slots: ['title'],
setup(props, { slots, attrs }) {
const { prefixCls } = useInjectMenu();

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

@ -29,15 +29,15 @@ import { OVERFLOW_KEY, PathContext } from './hooks/useKeyPath';
import type { FocusEventHandler, MouseEventHandler } from '../../_util/EventInterface';
import collapseMotion from '../../_util/collapseMotion';
export const menuProps = {
export const menuProps = () => ({
id: String,
prefixCls: String,
disabled: Boolean,
inlineCollapsed: Boolean,
disabledOverflow: Boolean,
forceSubMenuRender: Boolean,
openKeys: Array,
selectedKeys: Array,
openKeys: Array as PropType<Key[]>,
selectedKeys: Array as PropType<Key[]>,
activeKey: String, // 内部组件使用
selectable: { type: Boolean, default: true },
multiple: { type: Boolean, default: false },
@ -68,15 +68,15 @@ export const menuProps = {
'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>>;
export type MenuProps = Partial<ExtractPropTypes<ReturnType<typeof menuProps>>>;
const EMPTY_LIST: string[] = [];
export default defineComponent({
name: 'AMenu',
inheritAttrs: false,
props: menuProps,
props: menuProps(),
slots: ['expandIcon', 'overflowedIndicator'],
setup(props, { slots, emit, attrs }) {
const { prefixCls, direction, getPrefixCls } = useConfigInject('menu', props);

18
components/menu/src/MenuItem.tsx
View File

@ -1,6 +1,6 @@
import { flattenChildren, getPropsSlot, isValidElement } from '../../_util/props-util';
import PropTypes from '../../_util/vue-types';
import type { ExtractPropTypes } from 'vue';
import type { ExtractPropTypes, PropType } from 'vue';
import { computed, defineComponent, getCurrentInstance, onBeforeUnmount, ref, watch } from 'vue';
import { useInjectKeyPath, useMeasure } from './hooks/useKeyPath';
import { useInjectFirstLevel, useInjectMenu } from './hooks/useMenuContext';
@ -11,24 +11,30 @@ import KeyCode from '../../_util/KeyCode';
import useDirectionStyle from './hooks/useDirectionStyle';
import Overflow from '../../vc-overflow';
import devWarning from '../../vc-util/devWarning';
import type { MouseEventHandler } from '../../_util/EventInterface';
let indexGuid = 0;
export const menuItemProps = {
export const menuItemProps = () => ({
id: String,
role: String,
disabled: Boolean,
danger: Boolean,
title: { type: [String, Boolean], default: undefined },
icon: PropTypes.any,
};
onMouseenter: Function as PropType<MouseEventHandler>,
onMouseleave: Function as PropType<MouseEventHandler>,
onClick: Function as PropType<MouseEventHandler>,
onKeydown: Function as PropType<MouseEventHandler>,
onFocus: Function as PropType<MouseEventHandler>,
});
export type MenuItemProps = Partial<ExtractPropTypes<typeof menuItemProps>>;
export type MenuItemProps = Partial<ExtractPropTypes<ReturnType<typeof menuItemProps>>>;
export default defineComponent({
name: 'AMenuItem',
inheritAttrs: false,
props: menuItemProps,
emits: ['mouseenter', 'mouseleave', 'click', 'keydown', 'focus'],
props: menuItemProps(),
// emits: ['mouseenter', 'mouseleave', 'click', 'keydown', 'focus'],
slots: ['icon', 'title'],
setup(props, { slots, emit, attrs }) {
const instance = getCurrentInstance();

15
components/menu/src/SubMenu.tsx
View File

@ -19,10 +19,12 @@ import { cloneElement } from '../../_util/vnode';
import Overflow from '../../vc-overflow';
import devWarning from '../../vc-util/devWarning';
import isValid from '../../_util/isValid';
import type { MouseEventHandler } from '../../_util/EventInterface';
import type { Key } from 'ant-design-vue/es/_util/type';
let indexGuid = 0;
export const subMenuProps = {
export const subMenuProps = () => ({
icon: PropTypes.any,
title: PropTypes.any,
disabled: Boolean,
@ -32,16 +34,19 @@ export const subMenuProps = {
internalPopupClose: Boolean,
eventKey: String,
expandIcon: Function as PropType<(p?: { isOpen: boolean; [key: string]: any }) => any>,
};
onMouseenter: Function as PropType<MouseEventHandler>,
onMouseleave: Function as PropType<MouseEventHandler>,
onTitleClick: Function as PropType<(e: MouseEvent, key: Key) => void>,
});
export type SubMenuProps = Partial<ExtractPropTypes<typeof subMenuProps>>;
export type SubMenuProps = Partial<ExtractPropTypes<ReturnType<typeof subMenuProps>>>;
export default defineComponent({
name: 'ASubMenu',
inheritAttrs: false,
props: subMenuProps,
props: subMenuProps(),
slots: ['icon', 'title', 'expandIcon'],
emits: ['titleClick', 'mouseenter', 'mouseleave'],
// emits: ['titleClick', 'mouseenter', 'mouseleave'],
setup(props, { slots, attrs, emit }) {
useProvideFirstLevel(false);
const isMeasure = useMeasure();

4
components/modal/Modal.tsx
View File

@ -68,8 +68,8 @@ export const modalProps = () => ({
default: undefined,
},
zIndex: Number,
bodyStyle: Object as PropType<CSSProperties>,
maskStyle: Object as PropType<CSSProperties>,
bodyStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
maskStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
mask: { type: Boolean, default: undefined },
keyboard: { type: Boolean, default: undefined },
wrapProps: Object,

1
components/page-header/__tests__/__snapshots__/demo.test.js.snap
View File

@ -722,7 +722,6 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
draggable="false"
src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"
/>
</span>

19
components/page-header/index.tsx
View File

@ -1,4 +1,4 @@
import type { ExtractPropTypes } from 'vue';
import type { ExtractPropTypes, PropType } from 'vue';
import { defineComponent, ref, computed } from 'vue';
import PropTypes from '../_util/vue-types';
import { filterEmpty, flattenChildren, isEmptyContent } from '../_util/props-util';
@ -13,10 +13,11 @@ import useConfigInject from '../_util/hooks/useConfigInject';
import classNames from '../_util/classNames';
import ResizeObserver from '../vc-resize-observer';
import useDestroyed from '../_util/hooks/useDestroyed';
import type { MouseEventHandler } from '../_util/EventInterface';
export const pageHeaderProps = {
export const pageHeaderProps = () => ({
backIcon: PropTypes.any,
prefixCls: PropTypes.string,
prefixCls: String,
title: PropTypes.any,
subTitle: PropTypes.any,
breadcrumb: PropTypes.object,
@ -24,16 +25,16 @@ export const pageHeaderProps = {
footer: PropTypes.any,
extra: PropTypes.any,
avatar: PropTypes.object,
ghost: PropTypes.looseBool,
onBack: PropTypes.func,
};
ghost: { type: Boolean, default: undefined },
onBack: Function as PropType<MouseEventHandler>,
});
export type PageHeaderProps = Partial<ExtractPropTypes<typeof pageHeaderProps>>;
export type PageHeaderProps = Partial<ExtractPropTypes<ReturnType<typeof pageHeaderProps>>>;
const PageHeader = defineComponent({
name: 'APageHeader',
props: pageHeaderProps,
emits: ['back'],
props: pageHeaderProps(),
// emits: ['back'],
slots: ['backIcon', 'avatar', 'breadcrumb', 'title', 'subTitle', 'tags', 'extra', 'footer'],
setup(props, { emit, slots }) {
const { prefixCls, direction, pageHeader } = useConfigInject('page-header', props);

2
components/pagination/Pagination.tsx
View File

@ -78,7 +78,7 @@ export default defineComponent({
name: 'APagination',
inheritAttrs: false,
props: paginationProps(),
emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
// emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
setup(props, { slots, attrs }) {
const { prefixCls, configProvider, direction } = useConfigInject('pagination', props);
const selectPrefixCls = computed(() =>

19
components/popconfirm/index.tsx
View File

@ -1,4 +1,4 @@
import type { ExtractPropTypes, PropType } from 'vue';
import type { ExtractPropTypes, HTMLAttributes, PropType } from 'vue';
import { computed, onMounted, ref, toRef, defineComponent } from 'vue';
import Tooltip from '../tooltip';
import abstractTooltipProps from '../tooltip/abstractTooltipProps';
@ -24,19 +24,25 @@ import ActionButton from '../_util/ActionButton';
export const popconfirmProps = () => ({
...abstractTooltipProps(),
prefixCls: PropTypes.string,
prefixCls: String,
content: PropTypes.any,
title: PropTypes.any,
okType: {
type: String as PropType<LegacyButtonType>,
default: 'primary',
},
disabled: PropTypes.looseBool.def(false),
disabled: { type: Boolean, default: false },
okText: PropTypes.any,
cancelText: PropTypes.any,
icon: PropTypes.any,
okButtonProps: PropTypes.object,
cancelButtonProps: PropTypes.object,
okButtonProps: {
type: Object as PropType<ButtonProps & HTMLAttributes>,
default: undefined as ButtonProps & HTMLAttributes,
},
cancelButtonProps: {
type: Object as PropType<ButtonProps & HTMLAttributes>,
default: undefined as ButtonProps & HTMLAttributes,
},
showCancel: { type: Boolean, default: true },
onConfirm: Function as PropType<(e: MouseEvent) => void>,
onCancel: Function as PropType<(e: MouseEvent) => void>,
@ -52,10 +58,9 @@ export interface PopconfirmLocale {
const Popconfirm = defineComponent({
name: 'APopconfirm',
props: initDefaultProps(popconfirmProps(), {
...tooltipDefaultProps,
...tooltipDefaultProps(),
trigger: 'click',
transitionName: 'zoom-big',
align: () => ({}),
placement: 'top',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,

2
components/popover/index.tsx
View File

@ -21,7 +21,7 @@ export type PopoverProps = Partial<ExtractPropTypes<ReturnType<typeof popoverPro
const Popover = defineComponent({
name: 'APopover',
props: initDefaultProps(popoverProps(), {
...tooltipDefaultProps,
...tooltipDefaultProps(),
trigger: 'hover',
transitionName: 'zoom-big',
placement: 'top',

1
components/progress/Circle.tsx
View File

@ -22,6 +22,7 @@ function getStrokeColor({
}
export default defineComponent({
name: 'Circle',
inheritAttrs: false,
props: progressProps(),
setup(props, { slots }) {

11
components/progress/Line.tsx
View File

@ -2,20 +2,19 @@ import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import { presetPrimaryColors } from '@ant-design/colors';
import { computed, defineComponent } from 'vue';
import type { Direction } from '../config-provider';
import PropTypes from '../_util/vue-types';
import type { StringGradients, ProgressGradient } from './props';
import { progressProps } from './props';
import { getSuccessPercent, validProgress } from './utils';
export const lineProps = {
export const lineProps = () => ({
...progressProps(),
prefixCls: PropTypes.string,
prefixCls: String,
direction: {
type: String as PropType<Direction>,
},
};
});
export type LineProps = Partial<ExtractPropTypes<typeof lineProps>>;
export type LineProps = Partial<ExtractPropTypes<ReturnType<typeof lineProps>>>;
/**
* {
@ -70,7 +69,7 @@ export const handleGradient = (strokeColor: ProgressGradient, directionConfig: D
export default defineComponent({
name: 'Line',
props: lineProps,
props: lineProps(),
setup(props, { slots }) {
const backgroundProps = computed(() => {
const { strokeColor, direction } = props;

14
components/progress/Steps.tsx
View File

@ -1,24 +1,24 @@
import type { ExtractPropTypes, PropType } from 'vue';
import { computed, defineComponent } from 'vue';
import type { VueNode } from '../_util/type';
import PropTypes from '../_util/vue-types';
import type { ProgressSize } from './props';
import { progressProps } from './props';
export const stepsProps = {
export const stepsProps = () => ({
...progressProps(),
steps: PropTypes.number,
steps: Number,
size: {
type: String as PropType<ProgressSize>,
},
strokeColor: PropTypes.string,
trailColor: PropTypes.string,
};
strokeColor: String,
trailColor: String,
});
export type StepsProps = Partial<ExtractPropTypes<typeof stepsProps>>;
export default defineComponent({
props: stepsProps,
name: 'Steps',
props: stepsProps(),
setup(props, { slots }) {
const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100)));
const stepWidth = computed(() => (props.size === 'small' ? 2 : 14));

23
components/progress/props.ts
View File

@ -19,29 +19,30 @@ export interface SuccessProps {
}
export const progressProps = () => ({
prefixCls: PropTypes.string,
prefixCls: String,
type: PropTypes.oneOf(ProgressType),
percent: PropTypes.number,
percent: Number,
format: { type: Function as PropType<(percent?: number, successPercent?: number) => VueNode> },
status: PropTypes.oneOf(progressStatuses),
showInfo: PropTypes.looseBool,
strokeWidth: PropTypes.number,
strokeLinecap: PropTypes.oneOf(tuple('butt', 'round', 'square')),
showInfo: { type: Boolean, default: undefined },
strokeWidth: Number,
strokeLinecap: String as PropType<'butt' | 'square' | 'round'>,
strokeColor: {
type: [String, Object] as PropType<string | ProgressGradient>,
default: undefined as string | ProgressGradient,
},
trailColor: PropTypes.string,
width: PropTypes.number,
trailColor: String,
width: Number,
success: {
type: Object as PropType<SuccessProps>,
default: (): SuccessProps => ({}),
},
gapDegree: PropTypes.number,
gapPosition: PropTypes.oneOf(tuple('top', 'bottom', 'left', 'right')),
gapDegree: Number,
gapPosition: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
size: PropTypes.oneOf(ProgressSize),
steps: PropTypes.number,
steps: Number,
/** @deprecated Use `success` instead */
successPercent: PropTypes.number,
successPercent: Number,
title: String,
});

30
components/radio/Group.tsx
View File

@ -5,16 +5,14 @@ import PropTypes from '../_util/vue-types';
import Radio from './Radio';
import useConfigInject from '../_util/hooks/useConfigInject';
import { tuple } from '../_util/type';
import type { RadioChangeEvent } from './interface';
import type { RadioChangeEvent, RadioGroupButtonStyle, RadioGroupOptionType } from './interface';
import { useInjectFormItemContext } from '../form/FormItemContext';
const RadioGroupSizeTypes = tuple('large', 'default', 'small');
export type RadioGroupSize = typeof RadioGroupSizeTypes[number];
const RadioGroupOptionTypes = tuple('default', 'button');
export type RadioGroupOption = typeof RadioGroupOptionTypes[number];
export type RadioGroupOption = RadioGroupOptionType;
export type RadioGroupChildOption = {
label?: any;
@ -22,26 +20,28 @@ export type RadioGroupChildOption = {
disabled?: boolean;
};
export const radioGroupProps = {
prefixCls: PropTypes.string,
export const radioGroupProps = () => ({
prefixCls: String,
value: PropTypes.any,
size: PropTypes.oneOf(RadioGroupSizeTypes).def('default'),
options: {
type: Array as PropType<Array<string | RadioGroupChildOption | number>>,
},
disabled: PropTypes.looseBool,
name: PropTypes.string,
buttonStyle: PropTypes.string.def('outline'),
id: PropTypes.string,
optionType: PropTypes.oneOf(RadioGroupOptionTypes).def('default'),
};
disabled: { type: Boolean, default: undefined },
name: String,
buttonStyle: { type: String as PropType<RadioGroupButtonStyle>, default: 'outline' },
id: String,
optionType: { type: String as PropType<RadioGroupOptionType>, default: 'default' },
onChange: Function as PropType<(e: RadioChangeEvent) => void>,
'onUpdate:value': Function as PropType<(val: any) => void>,
});
export type RadioGroupProps = Partial<ExtractPropTypes<typeof radioGroupProps>>;
export type RadioGroupProps = Partial<ExtractPropTypes<ReturnType<typeof radioGroupProps>>>;
export default defineComponent({
name: 'ARadioGroup',
props: radioGroupProps,
emits: ['update:value', 'change'],
props: radioGroupProps(),
// emits: ['update:value', 'change'],
setup(props, { slots, emit }) {
const formItemContext = useInjectFormItemContext();
const { prefixCls, direction, size } = useConfigInject('radio', props);

40
components/radio/Radio.tsx
View File

@ -1,4 +1,4 @@
import type { ExtractPropTypes } from 'vue';
import type { ExtractPropTypes, PropType } from 'vue';
import { defineComponent, inject, ref } from 'vue';
import PropTypes from '../_util/vue-types';
import VcCheckbox from '../vc-checkbox/Checkbox';
@ -6,28 +6,32 @@ import classNames from '../_util/classNames';
import useConfigInject from '../_util/hooks/useConfigInject';
import type { RadioChangeEvent, RadioGroupContext } from './interface';
import { useInjectFormItemContext } from '../form/FormItemContext';
import omit from '../_util/omit';
import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
export const radioProps = {
prefixCls: PropTypes.string,
checked: PropTypes.looseBool,
disabled: PropTypes.looseBool,
isGroup: PropTypes.looseBool,
export const radioProps = () => ({
prefixCls: String,
checked: { type: Boolean, default: undefined },
disabled: { type: Boolean, default: undefined },
isGroup: { type: Boolean, default: undefined },
value: PropTypes.any,
name: PropTypes.string,
id: PropTypes.string,
autofocus: PropTypes.looseBool,
onChange: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onClick: PropTypes.func,
};
name: String,
id: String,
autofocus: { type: Boolean, default: undefined },
onChange: Function as PropType<(event: RadioChangeEvent) => void>,
onFocus: Function as PropType<FocusEventHandler>,
onBlur: Function as PropType<FocusEventHandler>,
onClick: Function as PropType<MouseEventHandler>,
'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
'onUpdate:value': Function as PropType<(checked: boolean) => void>,
});
export type RadioProps = Partial<ExtractPropTypes<typeof radioProps>>;
export type RadioProps = Partial<ExtractPropTypes<ReturnType<typeof radioProps>>>;
export default defineComponent({
name: 'ARadio',
props: radioProps,
emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'],
props: radioProps(),
// emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'],
setup(props, { emit, expose, slots }) {
const formItemContext = useInjectFormItemContext();
const vcCheckbox = ref<HTMLElement>();
@ -66,7 +70,7 @@ export default defineComponent({
const rProps: RadioProps = {
prefixCls: prefixCls.value,
id,
...restProps,
...omit(restProps, ['onUpdate:checked', 'onUpdate:value']),
};
if (radioGroup) {

4
components/radio/RadioButton.tsx
View File

@ -6,8 +6,8 @@ import type { RadioGroupContext } from './interface';
export default defineComponent({
name: 'ARadioButton',
props: radioProps,
setup(props: RadioProps, { slots }) {
props: radioProps(),
setup(props, { slots }) {
const { prefixCls } = useConfigInject('radio-button', props);
const radioGroupContext = inject<RadioGroupContext>('radioGroupContext', undefined);

32
components/radio/__tests__/__snapshots__/demo.test.js.snap
View File

@ -44,13 +44,31 @@ exports[`renders ./components/radio/demo/radioGroup.vue correctly 1`] = `
exports[`renders ./components/radio/demo/radioGroup-more.vue correctly 1`] = `<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Option A</span></label><label class="ant-radio-wrapper" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>Option B</span></label><label class="ant-radio-wrapper" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="3"><span class="ant-radio-inner"></span></span><span>Option C</span></label><label class="ant-radio-wrapper" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="4"><span class="ant-radio-inner"></span></span><span> More... <!--v-if--></span></label></div>`;
exports[`renders ./components/radio/demo/radioGroup-options.vue correctly 1`] = `
<div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div><br>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div><br>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-checked ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div><br>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div><br>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div><br>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-checked ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div><br>
<div class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-checked ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div>
</div>
<!---->
<div class="ant-space-item">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-checked ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div>
</div>
<!---->
</div>
`;

10
components/radio/demo/radioGroup-options.vue
View File

@ -16,20 +16,14 @@ Render radios by configuring `options`.
</docs>
<template>
<div>
<a-space direction="vertical">
<a-radio-group v-model:value="value1" :options="plainOptions" />
<br />
<a-radio-group v-model:value="value2" :options="optionsWithDisabled" />
<br />
<a-radio-group v-model:value="value3" :options="plainOptions" disabled />
<br />
<a-radio-group v-model:value="value1" option-type="button" :options="plainOptions" />
<br />
<a-radio-group v-model:value="value2" option-type="button" :options="optionsWithDisabled" />
<br />
<a-radio-group v-model:value="value3" option-type="button" :options="plainOptions" disabled />
<br />
</div>
</a-space>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

3
components/radio/interface.ts
View File

@ -4,6 +4,9 @@ export interface RadioChangeEventTarget extends RadioProps {
checked: boolean;
}
export type RadioGroupButtonStyle = 'outline' | 'solid';
export type RadioGroupOptionType = 'default' | 'button';
export interface RadioChangeEvent {
target: RadioChangeEventTarget;
stopPropagation: () => void;

20
components/rate/Star.tsx
View File

@ -4,17 +4,17 @@ import { getPropsSlot } from '../_util/props-util';
import PropTypes from '../_util/vue-types';
export const starProps = {
value: PropTypes.number,
index: PropTypes.number,
prefixCls: PropTypes.string,
allowHalf: PropTypes.looseBool,
disabled: PropTypes.looseBool,
value: Number,
index: Number,
prefixCls: String,
allowHalf: { type: Boolean, default: undefined },
disabled: { type: Boolean, default: undefined },
character: PropTypes.any,
characterRender: PropTypes.func,
focused: PropTypes.looseBool,
count: PropTypes.number,
onClick: PropTypes.func,
onHover: PropTypes.func,
characterRender: Function,
focused: { type: Boolean, default: undefined },
count: Number,
onClick: Function,
onHover: Function,
};
export type StarProps = Partial<ExtractPropTypes<typeof starProps>>;

40
components/rate/index.tsx
View File

@ -1,4 +1,4 @@
import type { ExtractPropTypes, VNode } from 'vue';
import type { ExtractPropTypes, PropType, VNode } from 'vue';
import { watch, defineComponent, ref, reactive, onMounted } from 'vue';
import { initDefaultProps, getPropsSlot, findDOMNode } from '../_util/props-util';
import { withInstall } from '../_util/type';
@ -13,28 +13,36 @@ import useConfigInject from '../_util/hooks/useConfigInject';
import Star from './Star';
import useRefs from '../_util/hooks/useRefs';
import { useInjectFormItemContext } from '../form/FormItemContext';
import type { Direction } from '../config-provider';
import type { FocusEventHandler, KeyboardEventHandler } from '../_util/EventInterface';
export const rateProps = {
prefixCls: PropTypes.string,
count: PropTypes.number,
value: PropTypes.number,
allowHalf: PropTypes.looseBool,
allowClear: PropTypes.looseBool,
tooltips: PropTypes.arrayOf(PropTypes.string),
disabled: PropTypes.looseBool,
export const rateProps = () => ({
prefixCls: String,
count: Number,
value: Number,
allowHalf: { type: Boolean, default: undefined },
allowClear: { type: Boolean, default: undefined },
tooltips: Array as PropType<string[]>,
disabled: { type: Boolean, default: undefined },
character: PropTypes.any,
autofocus: PropTypes.looseBool,
autofocus: { type: Boolean, default: undefined },
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
direction: PropTypes.string,
id: PropTypes.string,
};
direction: String as PropType<Direction>,
id: String,
onChange: Function as PropType<(value: number) => void>,
onHoverChange: Function as PropType<(value: number) => void>,
'onUpdate:value': Function as PropType<(value: number) => void>,
onFocus: Function as PropType<FocusEventHandler>,
onBlur: Function as PropType<FocusEventHandler>,
onKeydown: Function as PropType<KeyboardEventHandler>,
});
export type RateProps = Partial<ExtractPropTypes<typeof rateProps>>;
export type RateProps = Partial<ExtractPropTypes<ReturnType<typeof rateProps>>>;
const Rate = defineComponent({
name: 'ARate',
inheritAttrs: false,
props: initDefaultProps(rateProps, {
props: initDefaultProps(rateProps(), {
value: 0,
count: 5,
allowHalf: false,
@ -42,7 +50,7 @@ const Rate = defineComponent({
tabindex: 0,
direction: 'ltr',
}),
emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'],
// emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'],
setup(props, { slots, attrs, emit, expose }) {
const { prefixCls, direction } = useConfigInject('rate', props);
const formItemContext = useInjectFormItemContext();

20
components/result/index.tsx
View File

@ -1,7 +1,6 @@
import type { App, VNodeTypes, Plugin, ExtractPropTypes } from 'vue';
import type { App, VNodeTypes, Plugin, ExtractPropTypes, PropType } from 'vue';
import { defineComponent, computed } from 'vue';
import PropTypes from '../_util/vue-types';
import { tuple } from '../_util/type';
import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
@ -25,21 +24,22 @@ export const ExceptionMap = {
'403': unauthorized,
};
export type ExceptionStatusType = 403 | 404 | 500 | '403' | '404' | '500';
export type ResultStatusType = ExceptionStatusType | keyof typeof IconMap;
// ExceptionImageMap keys
const ExceptionStatus = Object.keys(ExceptionMap);
export const resultProps = {
prefixCls: PropTypes.string,
export const resultProps = () => ({
prefixCls: String,
icon: PropTypes.any,
status: PropTypes.oneOf(tuple('success', 'error', 'info', 'warning', '404', '403', '500')).def(
'info',
),
status: { type: [Number, String] as PropType<ResultStatusType>, default: 'info' },
title: PropTypes.any,
subTitle: PropTypes.any,
extra: PropTypes.any,
};
});
export type ResultProps = Partial<ExtractPropTypes<typeof resultProps>>;
export type ResultProps = Partial<ExtractPropTypes<ReturnType<typeof resultProps>>>;
const renderIcon = (prefixCls: string, { status, icon }) => {
if (ExceptionStatus.includes(`${status}`)) {
@ -60,7 +60,7 @@ const renderExtra = (prefixCls: string, extra: VNodeTypes) =>
const Result = defineComponent({
name: 'AResult',
props: resultProps,
props: resultProps(),
slots: ['title', 'subTitle', 'icon', 'extra'],
setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('result', props);

15
components/slider/index.tsx
View File

@ -10,6 +10,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
import SliderTooltip from './SliderTooltip';
import classNames from '../_util/classNames';
import { useInjectFormItemContext } from '../form/FormItemContext';
import type { FocusEventHandler } from '../_util/EventInterface';
export type SliderValue = number | [number, number];
@ -64,10 +65,13 @@ export const sliderProps = () => ({
type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
},
autofocus: { type: Boolean, default: undefined },
onChange: { type: Function as PropType<(value: Value) => void> },
onAfterChange: { type: Function as PropType<(value: Value) => void> },
handleStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
trackStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
onChange: { type: Function as PropType<(value: Value) => void> },
onAfterChange: { type: Function as PropType<(value: Value) => void> },
onFocus: { type: Function as PropType<FocusEventHandler> },
onBlur: { type: Function as PropType<FocusEventHandler> },
'onUpdate:value': { type: Function as PropType<(value: Value) => void> },
});
export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>;
@ -77,7 +81,7 @@ const Slider = defineComponent({
name: 'ASlider',
inheritAttrs: false,
props: sliderProps(),
emits: ['update:value', 'change', 'afterChange', 'blur'],
// emits: ['update:value', 'change', 'afterChange', 'blur'],
slots: ['mark'],
setup(props, { attrs, slots, emit, expose }) {
const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } =
@ -173,7 +177,7 @@ const Slider = defineComponent({
step={restProps.step!}
draggableTrack={draggableTrack}
class={cls}
ref={ref}
ref={sliderRef}
handle={(info: HandleGeneratorInfo) =>
handleWithTooltip({
tooltipPrefixCls,
@ -183,6 +187,7 @@ const Slider = defineComponent({
}
prefixCls={prefixCls.value}
onChange={handleChange}
onBlur={handleBlur}
v-slots={{ mark: slots.mark }}
/>
);
@ -193,7 +198,7 @@ const Slider = defineComponent({
id={id}
step={restProps.step!}
class={cls}
ref={ref}
ref={sliderRef}
handle={(info: HandleGeneratorInfo) =>
handleWithTooltip({
tooltipPrefixCls,

12
components/space/index.tsx
View File

@ -14,17 +14,17 @@ const spaceSize = {
middle: 16,
large: 24,
};
export const spaceProps = {
prefixCls: PropTypes.string,
export const spaceProps = () => ({
prefixCls: String,
size: {
type: [String, Number, Array] as PropType<SpaceSize | [SpaceSize, SpaceSize]>,
},
direction: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
align: PropTypes.oneOf(tuple('start', 'end', 'center', 'baseline')),
wrap: PropTypes.looseBool,
};
wrap: { type: Boolean, default: undefined },
});
export type SpaceProps = Partial<ExtractPropTypes<typeof spaceProps>>;
export type SpaceProps = Partial<ExtractPropTypes<ReturnType<typeof spaceProps>>>;
function getNumberSize(size: SpaceSize) {
return typeof size === 'string' ? spaceSize[size] : size || 0;
@ -32,7 +32,7 @@ function getNumberSize(size: SpaceSize) {
const Space = defineComponent({
name: 'ASpace',
props: spaceProps,
props: spaceProps(),
slots: ['split'],
setup(props, { slots }) {
const { prefixCls, space, direction: directionConfig } = useConfigInject('space', props);

20
components/spin/Spin.tsx
View File

@ -1,22 +1,19 @@
import type { VNode, ExtractPropTypes } from 'vue';
import type { VNode, ExtractPropTypes, PropType } from 'vue';
import { inject, cloneVNode, isVNode, defineComponent, nextTick } from 'vue';
import debounce from 'lodash-es/debounce';
import { tuple } from '../_util/type';
import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin';
import { getComponent, getSlot } from '../_util/props-util';
import initDefaultProps from '../_util/props-util/initDefaultProps';
import { defaultConfigProvider } from '../config-provider';
export const SpinSize = PropTypes.oneOf(tuple('small', 'default', 'large'));
export type SpinSize = 'small' | 'default' | 'large';
export const spinProps = () => ({
prefixCls: PropTypes.string,
spinning: PropTypes.looseBool,
size: SpinSize,
wrapperClassName: PropTypes.string,
prefixCls: String,
spinning: { type: Boolean, default: undefined },
size: String as PropType<SpinSize>,
wrapperClassName: String,
tip: PropTypes.any,
delay: PropTypes.number,
delay: Number,
indicator: PropTypes.any,
});
@ -36,7 +33,6 @@ export function setDefaultIndicator(Content: any) {
export default defineComponent({
name: 'ASpin',
mixins: [BaseMixin],
inheritAttrs: false,
props: initDefaultProps(spinProps(), {
size: 'default',
@ -83,7 +79,7 @@ export default defineComponent({
updateSpinning() {
const { spinning, sSpinning } = this;
if (sSpinning !== spinning) {
this.setState({ sSpinning: spinning });
this.sSpinning = spinning;
}
},
cancelExistingSpin() {

18
components/statistic/Countdown.tsx
View File

@ -1,4 +1,6 @@
import type { ExtractPropTypes, PropType } from 'vue';
import { defineComponent, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue';
import omit from '../_util/omit';
import initDefaultProps from '../_util/props-util/initDefaultProps';
import Statistic, { statisticProps } from './Statistic';
import type { countdownValueType, FormatConfig } from './utils';
@ -9,13 +11,23 @@ const REFRESH_INTERVAL = 1000 / 30;
function getTime(value?: countdownValueType) {
return new Date(value as any).getTime();
}
export const countdownProps = () => {
return {
...statisticProps(),
value: [Number, String],
format: String,
onFinish: Function as PropType<() => void>,
onChange: Function as PropType<(value?: countdownValueType) => void>,
};
};
export type CountdownProps = Partial<ExtractPropTypes<ReturnType<typeof countdownProps>>>;
export default defineComponent({
name: 'AStatisticCountdown',
props: initDefaultProps(statisticProps, {
props: initDefaultProps(countdownProps(), {
format: 'HH:mm:ss',
}),
emits: ['finish', 'change'],
// emits: ['finish', 'change'],
setup(props, { emit, slots }) {
const countdownId = ref<any>();
const statistic = ref();
@ -80,7 +92,7 @@ export default defineComponent({
<Statistic
ref={statistic}
{...{
...props,
...omit(props, ['onFinish', 'onChange']),
valueRender: valueRenderHtml,
formatter: formatCountdown,
}}

Some files were not shown because too many files have changed in this diff Show More