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 CompositionEventHandler = (e: CompositionEvent) => void;
export type ClipboardEventHandler = (e: ClipboardEvent) => void; export type ClipboardEventHandler = (e: ClipboardEvent) => void;
export type ChangeEventHandler = (e: ChangeEvent) => void; export type ChangeEventHandler = (e: ChangeEvent) => void;
export type ChangeEvent = Event & { export type ChangeEvent = Event & {
target: { target: {
value?: string | undefined; value?: string | undefined;

2
components/_util/Portal.tsx
View File

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

6
components/_util/PortalWrapper.tsx
View File

@ -52,10 +52,10 @@ export default defineComponent({
name: 'PortalWrapper', name: 'PortalWrapper',
inheritAttrs: false, inheritAttrs: false,
props: { props: {
wrapperClassName: PropTypes.string, wrapperClassName: String,
forceRender: PropTypes.looseBool, forceRender: { type: Boolean, default: undefined },
getContainer: PropTypes.any, getContainer: PropTypes.any,
visible: PropTypes.looseBool, visible: { type: Boolean, default: undefined },
}, },
setup(props, { slots }) { 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. * This helps accessibility reader to tread as a interactive button to operation.
*/ */
import KeyCode from './KeyCode'; import KeyCode from './KeyCode';
import PropTypes from './vue-types';
const inlineStyle = { const inlineStyle = {
border: 0, border: 0,
@ -19,10 +18,10 @@ const TransButton = defineComponent({
name: 'TransButton', name: 'TransButton',
inheritAttrs: false, inheritAttrs: false,
props: { props: {
noStyle: PropTypes.looseBool, noStyle: { type: Boolean, default: undefined },
onClick: PropTypes.func, onClick: Function,
disabled: PropTypes.looseBool, disabled: { type: Boolean, default: undefined },
autofocus: PropTypes.looseBool, autofocus: { type: Boolean, default: undefined },
}, },
setup(props, { slots, emit, attrs, expose }) { setup(props, { slots, emit, attrs, expose }) {
const domRef = ref(); const domRef = ref();

7
components/affix/index.tsx
View File

@ -47,14 +47,13 @@ export const affixProps = () => ({
offsetTop: Number, offsetTop: Number,
/** 距离窗口底部达到指定偏移量后触发 */ /** 距离窗口底部达到指定偏移量后触发 */
offsetBottom: Number, offsetBottom: Number,
/** 固定状态改变时触发的回调函数 */
// onChange?: (affixed?: boolean) => void;
/** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */ /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
target: { target: {
type: Function as PropType<() => Window | HTMLElement | null>, type: Function as PropType<() => Window | HTMLElement | null>,
default: getDefaultTarget, default: getDefaultTarget,
}, },
prefixCls: String, prefixCls: String,
/** 固定状态改变时触发的回调函数 */
onChange: Function as PropType<AffixEmits['change']>, onChange: Function as PropType<AffixEmits['change']>,
onTestUpdatePosition: Function as PropType<AffixEmits['testUpdatePosition']>, onTestUpdatePosition: Function as PropType<AffixEmits['testUpdatePosition']>,
}); });
@ -62,8 +61,8 @@ export const affixProps = () => ({
export type AffixProps = Partial<ExtractPropTypes<ReturnType<typeof affixProps>>>; export type AffixProps = Partial<ExtractPropTypes<ReturnType<typeof affixProps>>>;
export type AffixEmits = { export type AffixEmits = {
change: (lastAffix: boolean) => boolean; change: (lastAffix: boolean) => void;
testUpdatePosition: () => boolean; testUpdatePosition: () => void;
}; };
export type AffixExpose = { 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 type { NodeMouseEventHandler } from '../vc-tree/contextTypes';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
function noop() {}
const iconMapFilled = { const iconMapFilled = {
success: CheckCircleFilled, success: CheckCircleFilled,
info: InfoCircleFilled, info: InfoCircleFilled,
@ -44,7 +42,7 @@ export const alertProps = () => ({
*/ */
type: PropTypes.oneOf(AlertTypes), type: PropTypes.oneOf(AlertTypes),
/** Whether Alert can be closed */ /** Whether Alert can be closed */
closable: PropTypes.looseBool, closable: { type: Boolean, default: undefined },
/** Close text to show */ /** Close text to show */
closeText: PropTypes.any, closeText: PropTypes.any,
/** Content of Alert */ /** Content of Alert */
@ -52,11 +50,11 @@ export const alertProps = () => ({
/** Additional content of Alert */ /** Additional content of Alert */
description: PropTypes.any, description: PropTypes.any,
/** Trigger when animation ending of Alert */ /** Trigger when animation ending of Alert */
afterClose: PropTypes.func.def(noop), afterClose: Function as PropType<() => void>,
/** Whether to show icon */ /** Whether to show icon */
showIcon: PropTypes.looseBool, showIcon: { type: Boolean, default: undefined },
prefixCls: PropTypes.string, prefixCls: String,
banner: PropTypes.looseBool, banner: { type: Boolean, default: undefined },
icon: PropTypes.any, icon: PropTypes.any,
closeIcon: PropTypes.any, closeIcon: PropTypes.any,
onClose: Function as PropType<NodeMouseEventHandler>, onClose: Function as PropType<NodeMouseEventHandler>,

16
components/anchor/AnchorLink.tsx
View File

@ -1,23 +1,23 @@
import type { ExtractPropTypes } from 'vue'; import type { ExtractPropTypes } from 'vue';
import { defineComponent, nextTick, onBeforeUnmount, onMounted, watch } from 'vue'; import { defineComponent, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
import PropTypes from '../_util/vue-types'; 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 classNames from '../_util/classNames';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import { useInjectAnchor } from './context'; import { useInjectAnchor } from './context';
export const anchorLinkProps = { export const anchorLinkProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
href: PropTypes.string.def('#'), href: String,
title: PropTypes.any, 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({ export default defineComponent({
name: 'AAnchorLink', name: 'AAnchorLink',
props: anchorLinkProps, props: initDefaultProps(anchorLinkProps(), { href: '#' }),
slots: ['title'], slots: ['title'],
setup(props, { slots }) { setup(props, { slots }) {
let mergedTitle = null; 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"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import type { AnchorProps } from 'ant-design-vue';
export default defineComponent({ export default defineComponent({
setup() { setup() {
const handleClick = (e: Event, link: string) => { const handleClick: AnchorProps['onClick'] = (e, link) => {
e.preventDefault(); e.preventDefault();
console.log(link); 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 { defineComponent, ref } from 'vue';
import Select, { selectProps } from '../select'; import Select, { selectProps } from '../select';
import PropTypes from '../_util/vue-types';
import { isValidElement, flattenChildren } from '../_util/props-util'; import { isValidElement, flattenChildren } from '../_util/props-util';
import warning from '../_util/warning'; import warning from '../_util/warning';
import Option from './Option'; import Option from './Option';
@ -13,15 +12,27 @@ function isSelectOptionOrSelectOptGroup(child: any): boolean {
return child?.type?.isSelectOption || child?.type?.isSelectOptGroup; return child?.type?.isSelectOption || child?.type?.isSelectOptGroup;
} }
export const autoCompleteProps = { export const autoCompleteProps = () => ({
...omit(selectProps(), ['loading', 'mode', 'optionLabelProp', 'labelInValue']), ...omit(selectProps(), ['loading', 'mode', 'optionLabelProp', 'labelInValue']),
dataSource: PropTypes.array, dataSource: Array as PropType<{ value: any; text: any }[] | string[]>,
dropdownMenuStyle: PropTypes.style, dropdownMenuStyle: {
// optionLabelProp: PropTypes.string, type: Object as PropType<CSSProperties>,
default: undefined as CSSProperties,
},
// optionLabelProp: String,
dropdownMatchSelectWidth: { type: [Number, Boolean], default: true }, 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; export const AutoCompleteOption = Option;
@ -30,19 +41,8 @@ export const AutoCompleteOptGroup = OptGroup;
const AutoComplete = defineComponent({ const AutoComplete = defineComponent({
name: 'AAutoComplete', name: 'AAutoComplete',
inheritAttrs: false, inheritAttrs: false,
props: { props: autoCompleteProps(),
...autoCompleteProps, // emits: ['change', 'select', 'focus', 'blur'],
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'],
slots: ['option'], slots: ['option'],
setup(props, { slots, attrs, expose }) { setup(props, { slots, attrs, expose }) {
warning( warning(

16
components/avatar/Avatar.tsx
View File

@ -1,5 +1,5 @@
import type { VueNode } from '../_util/type'; import type { VueNode } from '../_util/type';
import { tuple } from '../_util/type';
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'; import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
import { getPropsSlot } from '../_util/props-util'; import { getPropsSlot } from '../_util/props-util';
@ -15,19 +15,19 @@ import eagerComputed from '../_util/eagerComputed';
export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap; export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
export const avatarProps = () => ({ export const avatarProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
shape: PropTypes.oneOf(tuple('circle', 'square')).def('circle'), shape: { type: String as PropType<'circle' | 'square'>, default: 'circle' },
size: { size: {
type: [Number, String, Object] as PropType<AvatarSize>, type: [Number, String, Object] as PropType<AvatarSize>,
default: (): AvatarSize => 'default', default: (): AvatarSize => 'default',
}, },
src: PropTypes.string, src: String,
/** Srcset of image avatar */ /** Srcset of image avatar */
srcset: PropTypes.string, srcset: String,
icon: PropTypes.any, icon: PropTypes.any,
alt: PropTypes.string, alt: String,
gap: PropTypes.number, gap: Number,
draggable: PropTypes.bool, draggable: { type: Boolean, default: undefined },
crossOrigin: String as PropType<'' | 'anonymous' | 'use-credentials'>, crossOrigin: String as PropType<'' | 'anonymous' | 'use-credentials'>,
loadError: { loadError: {
type: Function as PropType<() => boolean>, 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 Popover from '../popover';
import type { PropType, ExtractPropTypes, CSSProperties } from 'vue'; import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import { flattenChildren, getPropsSlot } from '../_util/props-util'; import { flattenChildren, getPropsSlot } from '../_util/props-util';
import { tuple } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import useProvideSize from '../_util/hooks/useSize'; import useProvideSize from '../_util/hooks/useSize';
export const groupProps = () => ({ export const groupProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
maxCount: PropTypes.number, maxCount: Number,
maxStyle: { maxStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
type: Object as PropType<CSSProperties>, maxPopoverPlacement: { type: String as PropType<'top' | 'bottom'>, default: 'top' },
default: () => ({} as CSSProperties),
},
maxPopoverPlacement: PropTypes.oneOf(tuple('top', 'bottom')).def('top'),
maxPopoverTrigger: String as PropType<'hover' | 'focus' | 'click'>, maxPopoverTrigger: String as PropType<'hover' | 'focus' | 'click'>,
/* /*
* Size of avatar, options: `large`, `small`, `default` * Size of avatar, options: `large`, `small`, `default`
@ -25,7 +20,7 @@ export const groupProps = () => ({
* */ * */
size: { size: {
type: [Number, String, Object] as PropType<AvatarSize>, 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 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>`; 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`] = ` 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> <!----><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>
<div class="ant-divider ant-divider-horizontal" role="separator"> <div class="ant-divider ant-divider-horizontal" role="separator">
<!----> <!---->
</div> </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> <!----><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>
<div class="ant-divider ant-divider-horizontal" role="separator"> <div class="ant-divider ant-divider-horizontal" role="separator">
<!----> <!---->
</div> </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> <!----><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> </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/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, onDeactivated,
} from 'vue'; } from 'vue';
import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined'; import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined';
import PropTypes from '../_util/vue-types';
import addEventListener from '../vc-util/Dom/addEventListener'; import addEventListener from '../vc-util/Dom/addEventListener';
import getScroll from '../_util/getScroll'; import getScroll from '../_util/getScroll';
import { getTransitionProps, Transition } from '../_util/transition'; import { getTransitionProps, Transition } from '../_util/transition';
@ -19,23 +18,24 @@ import scrollTo from '../_util/scrollTo';
import { withInstall } from '../_util/type'; import { withInstall } from '../_util/type';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import type { MouseEventHandler } from '../_util/EventInterface';
export const backTopProps = { export const backTopProps = () => ({
visibilityHeight: PropTypes.number.def(400), visibilityHeight: { type: Number, default: 400 },
duration: PropTypes.number.def(450), duration: { type: Number, default: 450 },
target: Function as PropType<() => HTMLElement | Window | Document>, target: Function as PropType<() => HTMLElement | Window | Document>,
prefixCls: PropTypes.string, prefixCls: String,
onClick: PropTypes.func, onClick: Function as PropType<MouseEventHandler>,
// visible: PropTypes.looseBool, // Only for test. Don't use it. // visible: { type: Boolean, default: undefined }, // Only for test. Don't use it.
}; });
export type BackTopProps = Partial<ExtractPropTypes<typeof backTopProps>>; export type BackTopProps = Partial<ExtractPropTypes<typeof backTopProps>>;
const BackTop = defineComponent({ const BackTop = defineComponent({
name: 'ABackTop', name: 'ABackTop',
inheritAttrs: false, inheritAttrs: false,
props: backTopProps, props: backTopProps(),
emits: ['click'], // emits: ['click'],
setup(props, { slots, attrs, emit }) { setup(props, { slots, attrs, emit }) {
const { prefixCls, direction } = useConfigInject('back-top', props); const { prefixCls, direction } = useConfigInject('back-top', props);
const domRef = ref(); 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 { getPropsSlot, flattenChildren } from '../_util/props-util';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import { getTransitionProps, Transition } from '../_util/transition'; 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 { defineComponent, computed, ref, watch } from 'vue';
import { tuple } from '../_util/type';
import Ribbon from './Ribbon'; import Ribbon from './Ribbon';
import { isPresetColor } from './utils'; import { isPresetColor } from './utils';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import isNumeric from '../_util/isNumeric'; import isNumeric from '../_util/isNumeric';
import type { PresetStatusColorType } from '../_util/colors';
export const badgeProps = { export const badgeProps = () => ({
/** Number to show in badge */ /** Number to show in badge */
count: PropTypes.any, count: PropTypes.any,
showZero: PropTypes.looseBool, showZero: { type: Boolean, default: undefined },
/** Max count to show */ /** Max count to show */
overflowCount: PropTypes.number.def(99), overflowCount: { type: Number, default: 99 },
/** whether to show red dot without number */ /** whether to show red dot without number */
dot: PropTypes.looseBool, dot: { type: Boolean, default: undefined },
prefixCls: PropTypes.string, prefixCls: String,
scrollNumberPrefixCls: PropTypes.string, scrollNumberPrefixCls: String,
status: PropTypes.oneOf(tuple('success', 'processing', 'default', 'error', 'warning')), status: { type: String as PropType<PresetStatusColorType> },
// sync antd@4.6.0 size: { type: String as PropType<'default' | 'small'>, default: 'default' },
size: PropTypes.oneOf(tuple('default', 'small')).def('default'), color: String,
color: PropTypes.string,
text: PropTypes.any, text: PropTypes.any,
offset: PropTypes.arrayOf(PropTypes.oneOfType([String, Number])), offset: Array as unknown as PropType<[number | string, number | string]>,
numberStyle: PropTypes.style, numberStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
title: PropTypes.string, title: String,
}; });
export type BadgeProps = Partial<ExtractPropTypes<typeof badgeProps>>; export type BadgeProps = Partial<ExtractPropTypes<ReturnType<typeof badgeProps>>>;
export default defineComponent({ export default defineComponent({
name: 'ABadge', name: 'ABadge',
Ribbon, Ribbon,
inheritAttrs: false, inheritAttrs: false,
props: badgeProps, props: badgeProps(),
slots: ['text', 'count'], slots: ['text', 'count'],
setup(props, { slots, attrs }) { setup(props, { slots, attrs }) {
const { prefixCls, direction } = useConfigInject('badge', props); const { prefixCls, direction } = useConfigInject('badge', props);
@ -197,7 +196,7 @@ export default defineComponent({
const transitionProps = getTransitionProps(children ? `${pre}-zoom` : '', { const transitionProps = getTransitionProps(children ? `${pre}-zoom` : '', {
appear: false, appear: false,
}); });
let scrollNumberStyle: CSSProperties = { ...mergedStyle, ...props.numberStyle }; let scrollNumberStyle: CSSProperties = { ...mergedStyle, ...(props.numberStyle as object) };
if (color && !isPresetColor(color)) { if (color && !isPresetColor(color)) {
scrollNumberStyle = scrollNumberStyle || {}; scrollNumberStyle = scrollNumberStyle || {};
scrollNumberStyle.background = color; scrollNumberStyle.background = color;

13
components/badge/Ribbon.tsx
View File

@ -1,5 +1,4 @@
import type { LiteralUnion } from '../_util/type'; import type { LiteralUnion } from '../_util/type';
import { tuple } from '../_util/type';
import type { PresetColorType } from '../_util/colors'; import type { PresetColorType } from '../_util/colors';
import { isPresetColor } from './utils'; import { isPresetColor } from './utils';
import type { CSSProperties, PropType, ExtractPropTypes } from 'vue'; import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
@ -7,19 +6,19 @@ import { defineComponent, computed } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
export const ribbonProps = { export const ribbonProps = () => ({
prefix: PropTypes.string, prefix: String,
color: { type: String as PropType<LiteralUnion<PresetColorType, string>> }, color: { type: String as PropType<LiteralUnion<PresetColorType, string>> },
text: PropTypes.any, 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({ export default defineComponent({
name: 'ABadgeRibbon', name: 'ABadgeRibbon',
inheritAttrs: false, inheritAttrs: false,
props: ribbonProps, props: ribbonProps(),
slots: ['text'], slots: ['text'],
setup(props, { attrs, slots }) { setup(props, { attrs, slots }) {
const { prefixCls, direction } = useConfigInject('ribbon', props); 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 SingleNumber from './SingleNumber';
import { filterEmpty } from '../_util/props-util'; import { filterEmpty } from '../_util/props-util';
export const scrollNumberProps = { const scrollNumberProps = {
prefixCls: PropTypes.string, prefixCls: String,
count: PropTypes.any, count: PropTypes.any,
component: PropTypes.string, component: String,
title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]), title: PropTypes.any,
show: Boolean, show: Boolean,
}; };

10
components/breadcrumb/Breadcrumb.tsx
View File

@ -14,8 +14,8 @@ export interface Route {
children?: Omit<Route, 'children'>[]; children?: Omit<Route, 'children'>[];
} }
export const breadcrumbProps = { export const breadcrumbProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
routes: { type: Array as PropType<Route[]> }, routes: { type: Array as PropType<Route[]> },
params: PropTypes.any, params: PropTypes.any,
separator: PropTypes.any, separator: PropTypes.any,
@ -24,9 +24,9 @@ export const breadcrumbProps = {
(opt: { route: Route; params: unknown; routes: Route[]; paths: string[] }) => VueNode (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) { function getBreadcrumbName(route: Route, params: unknown) {
if (!route.breadcrumbName) { if (!route.breadcrumbName) {
@ -53,7 +53,7 @@ function defaultItemRender(opt: {
export default defineComponent({ export default defineComponent({
name: 'ABreadcrumb', name: 'ABreadcrumb',
props: breadcrumbProps, props: breadcrumbProps(),
slots: ['separator', 'itemRender'], slots: ['separator', 'itemRender'],
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('breadcrumb', props); 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 { defineComponent } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getPropsSlot } from '../_util/props-util'; import { getPropsSlot } from '../_util/props-util';
import DropDown from '../dropdown/dropdown'; import DropDown from '../dropdown/dropdown';
import DownOutlined from '@ant-design/icons-vue/DownOutlined'; import DownOutlined from '@ant-design/icons-vue/DownOutlined';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import type { MouseEventHandler } from '../_util/EventInterface';
export const breadcrumbItemProps = { export const breadcrumbItemProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
href: PropTypes.string, href: String,
separator: PropTypes.any, separator: PropTypes.any,
overlay: 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({ export default defineComponent({
name: 'ABreadcrumbItem', name: 'ABreadcrumbItem',
inheritAttrs: false,
__ANT_BREADCRUMB_ITEM: true, __ANT_BREADCRUMB_ITEM: true,
props: breadcrumbItemProps, props: breadcrumbItemProps(),
emits: ['click'], // emits: ['click'],
slots: ['separator', 'overlay'], slots: ['separator', 'overlay'],
setup(props, { slots, emit }) { setup(props, { slots, attrs }) {
const { prefixCls } = useConfigInject('breadcrumb', props); const { prefixCls } = useConfigInject('breadcrumb', props);
/** /**
* if overlay is have * if overlay is have
@ -41,24 +44,29 @@ export default defineComponent({
return breadcrumbItem; return breadcrumbItem;
}; };
const handleClick = (e: MouseEvent) => {
emit('click', e);
};
return () => { return () => {
const separator = getPropsSlot(slots, props, 'separator') ?? '/'; const separator = getPropsSlot(slots, props, 'separator') ?? '/';
const children = getPropsSlot(slots, props); const children = getPropsSlot(slots, props);
const { class: cls, style, ...restAttrs } = attrs;
let link: JSX.Element; let link: JSX.Element;
if (props.href !== undefined) { 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 { } else {
link = <span class={`${prefixCls.value}-link`}>{children}</span>; link = (
<span class={`${prefixCls.value}-link`} onClick={props.onClick} {...restAttrs}>
{children}
</span>
);
} }
// wrap to dropDown // wrap to dropDown
link = renderBreadcrumbNode(link, prefixCls.value); link = renderBreadcrumbNode(link, prefixCls.value);
if (children) { if (children) {
return ( return (
<span onClick={handleClick}> <span class={cls} style={style}>
{link} {link}
{separator && <span class={`${prefixCls.value}-separator`}>{separator}</span>} {separator && <span class={`${prefixCls.value}-separator`}>{separator}</span>}
</span> </span>

13
components/breadcrumb/BreadcrumbSeparator.tsx
View File

@ -1,19 +1,20 @@
import type { ExtractPropTypes } from 'vue'; import type { ExtractPropTypes } from 'vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import { flattenChildren } from '../_util/props-util'; import { flattenChildren } from '../_util/props-util';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
export const breadcrumbSeparatorProps = { export const breadcrumbSeparatorProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
}; });
export type BreadcrumbSeparatorProps = Partial<ExtractPropTypes<typeof breadcrumbSeparatorProps>>; export type BreadcrumbSeparatorProps = Partial<
ExtractPropTypes<ReturnType<typeof breadcrumbSeparatorProps>>
>;
export default defineComponent({ export default defineComponent({
name: 'ABreadcrumbSeparator', name: 'ABreadcrumbSeparator',
__ANT_BREADCRUMB_SEPARATOR: true, __ANT_BREADCRUMB_SEPARATOR: true,
inheritAttrs: false, inheritAttrs: false,
props: breadcrumbSeparatorProps, props: breadcrumbSeparatorProps(),
setup(props, { slots, attrs }) { setup(props, { slots, attrs }) {
const { prefixCls } = useConfigInject('breadcrumb', props); 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 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 { computed, defineComponent } from 'vue';
import { flattenChildren } from '../_util/props-util'; import { flattenChildren } from '../_util/props-util';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import type { ExtractPropTypes, PropType } from 'vue'; import type { ExtractPropTypes, PropType } from 'vue';
import type { SizeType } from '../config-provider'; import type { SizeType } from '../config-provider';
import UnreachableException from '../_util/unreachableException'; import UnreachableException from '../_util/unreachableException';
const buttonGroupProps = { export const buttonGroupProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
size: { size: {
type: String as PropType<SizeType>, 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({ export default defineComponent({
name: 'AButtonGroup', name: 'AButtonGroup',
props: buttonGroupProps, props: buttonGroupProps(),
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('btn-group', props); const { prefixCls, direction } = useConfigInject('btn-group', props);
const classes = computed(() => { const classes = computed(() => {

11
components/button/button.tsx
View File

@ -10,7 +10,7 @@ import {
watchEffect, watchEffect,
} from 'vue'; } from 'vue';
import Wave from '../_util/wave'; import Wave from '../_util/wave';
import buttonTypes from './buttonTypes'; import buttonProps from './buttonTypes';
import { flattenChildren, initDefaultProps } from '../_util/props-util'; import { flattenChildren, initDefaultProps } from '../_util/props-util';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import devWarning from '../vc-util/devWarning'; import devWarning from '../vc-util/devWarning';
@ -27,14 +27,14 @@ const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
function isUnborderedButtonType(type: ButtonType | undefined) { function isUnborderedButtonType(type: ButtonType | undefined) {
return type === 'text' || type === 'link'; return type === 'text' || type === 'link';
} }
export { buttonProps };
export default defineComponent({ export default defineComponent({
name: 'AButton', name: 'AButton',
inheritAttrs: false, inheritAttrs: false,
__ANT_BUTTON: true, __ANT_BUTTON: true,
props: initDefaultProps(buttonTypes(), { type: 'default' }), props: initDefaultProps(buttonProps(), { type: 'default' }),
slots: ['icon'], slots: ['icon'],
emits: ['click', 'mousedown'], // emits: ['click', 'mousedown'],
setup(props, { slots, attrs, emit }) { setup(props, { slots, attrs, emit }) {
const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props); const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);
@ -151,7 +151,7 @@ export default defineComponent({
isNeedInserted = children.length === 1 && !icon && !isUnborderedButtonType(props.type); 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 iconType = innerLoading.value ? 'loading' : icon;
const buttonProps = { const buttonProps = {
@ -164,6 +164,7 @@ export default defineComponent({
{ [`${prefixCls.value}-icon-only`]: children.length === 0 && !!iconType }, { [`${prefixCls.value}-icon-only`]: children.length === 0 && !!iconType },
], ],
onClick: handleClick, onClick: handleClick,
onMousedown,
}; };
// https://github.com/vueComponent/ant-design-vue/issues/4930 // https://github.com/vueComponent/ant-design-vue/issues/4930
if (!disabled) { 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 PropTypes from '../_util/vue-types';
import type { ExtractPropTypes, PropType } from 'vue'; import type { ExtractPropTypes, PropType } from 'vue';
import type { SizeType } from '../config-provider'; import type { SizeType } from '../config-provider';
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text'); export type ButtonType = 'link' | 'default' | 'primary' | 'ghost' | 'dashed' | 'text';
export type ButtonType = typeof ButtonTypes[number]; export type ButtonShape = 'default' | 'circle' | 'round';
const ButtonShapes = tuple('default', 'circle', 'round');
export type ButtonShape = typeof ButtonShapes[number];
const ButtonHTMLTypes = tuple('submit', 'button', 'reset'); export type ButtonHTMLType = 'submit' | 'button' | 'reset';
export type ButtonHTMLType = typeof ButtonHTMLTypes[number];
export type LegacyButtonType = ButtonType | 'danger'; export type LegacyButtonType = ButtonType | 'danger';
export function convertLegacyProps(type?: LegacyButtonType): ButtonProps { export function convertLegacyProps(type?: LegacyButtonType): ButtonProps {
@ -21,10 +17,10 @@ export function convertLegacyProps(type?: LegacyButtonType): ButtonProps {
} }
export const buttonProps = () => ({ export const buttonProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
type: PropTypes.oneOf(ButtonTypes), type: String as PropType<ButtonType>,
htmlType: PropTypes.oneOf(ButtonHTMLTypes).def('button'), htmlType: { type: String as PropType<ButtonHTMLType>, default: 'button' },
shape: PropTypes.oneOf(ButtonShapes), shape: { type: String as PropType<ButtonShape> },
size: { size: {
type: String as PropType<SizeType>, type: String as PropType<SizeType>,
}, },
@ -32,17 +28,20 @@ export const buttonProps = () => ({
type: [Boolean, Object] as PropType<boolean | { delay?: number }>, type: [Boolean, Object] as PropType<boolean | { delay?: number }>,
default: (): boolean | { delay?: number } => false, default: (): boolean | { delay?: number } => false,
}, },
disabled: PropTypes.looseBool, disabled: { type: Boolean, default: undefined },
ghost: PropTypes.looseBool, ghost: { type: Boolean, default: undefined },
block: PropTypes.looseBool, block: { type: Boolean, default: undefined },
danger: PropTypes.looseBool, danger: { type: Boolean, default: undefined },
icon: PropTypes.any, icon: PropTypes.any,
href: PropTypes.string, href: String,
target: PropTypes.string, target: String,
title: PropTypes.string, title: String,
onClick: { onClick: {
type: Function as PropType<(event: MouseEvent) => void>, type: Function as PropType<(event: MouseEvent) => void>,
}, },
onMousedown: {
type: Function as PropType<(event: MouseEvent) => void>,
},
}); });
export type ButtonProps = Partial<ExtractPropTypes<ReturnType<typeof buttonProps>>>; 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 { isVNode, defineComponent, renderSlot } from 'vue';
import Tabs from '../tabs'; import Tabs from '../tabs';
import Row from '../row'; import Row from '../row';
@ -24,14 +24,14 @@ export type CardSize = 'default' | 'small';
const { TabPane } = Tabs; const { TabPane } = Tabs;
export const cardProps = () => ({ export const cardProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
title: PropTypes.any, title: PropTypes.any,
extra: PropTypes.any, extra: PropTypes.any,
bordered: PropTypes.looseBool.def(true), bordered: { type: Boolean, default: true },
bodyStyle: PropTypes.style, bodyStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
headStyle: PropTypes.style, headStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
loading: PropTypes.looseBool.def(false), loading: { type: Boolean, default: false },
hoverable: PropTypes.looseBool.def(false), hoverable: { type: Boolean, default: false },
type: { type: String as PropType<CardType> }, type: { type: String as PropType<CardType> },
size: { type: String as PropType<CardSize> }, size: { type: String as PropType<CardSize> },
actions: PropTypes.any, actions: PropTypes.any,
@ -39,8 +39,8 @@ export const cardProps = () => ({
type: Array as PropType<CardTabListType[]>, type: Array as PropType<CardTabListType[]>,
}, },
tabBarExtraContent: PropTypes.any, tabBarExtraContent: PropTypes.any,
activeTabKey: PropTypes.string, activeTabKey: String,
defaultActiveTabKey: PropTypes.string, defaultActiveTabKey: String,
cover: PropTypes.any, cover: PropTypes.any,
onTabChange: { onTabChange: {
type: Function as PropType<(key: string) => void>, 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 { defineComponent, computed } from 'vue';
import useConfigInject from '../_util/hooks/useConfigInject'; 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({ export default defineComponent({
name: 'ACardGrid', name: 'ACardGrid',
__ANT_CARD_GRID: true, __ANT_CARD_GRID: true,
props: { props: cardGridProps(),
prefixCls: String,
hoverable: { type: Boolean, default: true },
},
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls } = useConfigInject('card', props); const { prefixCls } = useConfigInject('card', props);
const classNames = computed(() => { const classNames = computed(() => {

15
components/card/Meta.tsx
View File

@ -1,16 +1,19 @@
import type { ExtractPropTypes } from 'vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getPropsSlot } from '../_util/props-util'; import { getPropsSlot } from '../_util/props-util';
import useConfigInject from '../_util/hooks/useConfigInject'; 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({ export default defineComponent({
name: 'ACardMeta', name: 'ACardMeta',
props: { props: cardMetaProps(),
prefixCls: PropTypes.string,
title: PropTypes.any,
description: PropTypes.any,
avatar: PropTypes.any,
},
slots: ['title', 'description', 'avatar'], slots: ['title', 'description', 'avatar'],
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls } = useConfigInject('card', props); 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-cover"><img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"></div>
<div class="ant-card-body"> <div class="ant-card-body">
<div class="ant-card-meta"> <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-detail">
<div class="ant-card-meta-title">Card title</div> <div class="ant-card-meta-title">Card title</div>
<div class="ant-card-meta-description">This is the description</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 VcCheckbox from '../vc-checkbox/Checkbox';
import { flattenChildren } from '../_util/props-util'; import { flattenChildren } from '../_util/props-util';
import warning from '../_util/warning'; import warning from '../_util/warning';
import type { RadioChangeEvent } from '../radio/interface';
import type { EventHandler } from '../_util/EventInterface'; import type { EventHandler } from '../_util/EventInterface';
import { useInjectFormItemContext } from '../form/FormItemContext'; import { useInjectFormItemContext } from '../form/FormItemContext';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import type { CheckboxProps } from './interface'; import type { CheckboxChangeEvent, CheckboxProps } from './interface';
import { CheckboxGroupContextKey, checkboxProps } from './interface'; import { CheckboxGroupContextKey, checkboxProps } from './interface';
export default defineComponent({ export default defineComponent({
@ -16,7 +15,7 @@ export default defineComponent({
inheritAttrs: false, inheritAttrs: false,
__ANT_CHECKBOX: true, __ANT_CHECKBOX: true,
props: checkboxProps(), props: checkboxProps(),
emits: ['change', 'update:checked'], // emits: ['change', 'update:checked'],
setup(props, { emit, attrs, slots, expose }) { setup(props, { emit, attrs, slots, expose }) {
const formItemContext = useInjectFormItemContext(); const formItemContext = useInjectFormItemContext();
const { prefixCls, direction } = useConfigInject('checkbox', props); 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; const targetChecked = event.target.checked;
emit('update:checked', targetChecked); emit('update:checked', targetChecked);
emit('change', event); emit('change', event);

2
components/checkbox/Group.tsx
View File

@ -8,7 +8,7 @@ import { CheckboxGroupContextKey, checkboxGroupProps } from './interface';
export default defineComponent({ export default defineComponent({
name: 'ACheckboxGroup', name: 'ACheckboxGroup',
props: checkboxGroupProps(), props: checkboxGroupProps(),
emits: ['change', 'update:value'], // emits: ['change', 'update:value'],
setup(props, { slots, emit, expose }) { setup(props, { slots, emit, expose }) {
const formItemContext = useInjectFormItemContext(); const formItemContext = useInjectFormItemContext();
const { prefixCls, direction } = useConfigInject('checkbox', props); 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 { ExtractPropTypes, InjectionKey, PropType, Ref } from 'vue';
import type { MouseEventHandler } from '../_util/EventInterface';
import type { VueNode } from '../_util/type'; import type { VueNode } from '../_util/type';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
@ -8,7 +9,18 @@ export interface CheckboxOptionType {
value: CheckboxValueType; value: CheckboxValueType;
disabled?: boolean; disabled?: boolean;
indeterminate?: 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 = () => { export const abstractCheckboxGroupProps = () => {
@ -51,9 +63,9 @@ export const abstractCheckboxProps = () => {
indeterminate: { type: Boolean, default: undefined }, indeterminate: { type: Boolean, default: undefined },
type: { type: String, default: 'checkbox' }, type: { type: String, default: 'checkbox' },
autofocus: { type: Boolean, default: undefined }, autofocus: { type: Boolean, default: undefined },
onChange: PropTypes.func, onChange: Function as PropType<(e: CheckboxChangeEvent) => void>,
'onUpdate:checked': PropTypes.func, 'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
onClick: PropTypes.func, onClick: Function as PropType<MouseEventHandler>,
skipGroup: { type: Boolean, default: false }, skipGroup: { type: Boolean, default: false },
}; };
}; };

2
components/collapse/Collapse.tsx
View File

@ -41,7 +41,7 @@ export default defineComponent({
expandIconPosition: 'left', expandIconPosition: 'left',
}), }),
slots: ['expandIcon'], slots: ['expandIcon'],
emits: ['change', 'update:activeKey'], // emits: ['change', 'update:activeKey'],
setup(props, { attrs, slots, emit }) { setup(props, { attrs, slots, emit }) {
const stateActiveKey = ref<Key[]>( const stateActiveKey = ref<Key[]>(
getActiveKeysArray(firstNotUndefined([props.activeKey, props.defaultActiveKey])), 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 type CollapsePanelProps = Partial<ExtractPropTypes<ReturnType<typeof collapsePanelProps>>>;
export default defineComponent({ export default defineComponent({
name: 'ACollapsePanel', name: 'ACollapsePanel',
inheritAttrs: false,
props: initDefaultProps(collapsePanelProps(), { props: initDefaultProps(collapsePanelProps(), {
showArrow: true, showArrow: true,
isActive: false, isActive: false,
@ -20,8 +21,8 @@ export default defineComponent({
forceRender: false, forceRender: false,
}), }),
slots: ['expandIcon', 'extra', 'header'], slots: ['expandIcon', 'extra', 'header'],
emits: ['itemClick'], // emits: ['itemClick'],
setup(props, { slots, emit }) { setup(props, { slots, emit, attrs }) {
devWarning( devWarning(
props.disabled === undefined, props.disabled === undefined,
'Collapse.Panel', 'Collapse.Panel',
@ -61,6 +62,7 @@ export default defineComponent({
[`${prefixClsValue}-item-active`]: isActive, [`${prefixClsValue}-item-active`]: isActive,
[`${prefixClsValue}-item-disabled`]: disabled, [`${prefixClsValue}-item-disabled`]: disabled,
[`${prefixClsValue}-no-arrow`]: !showArrow, [`${prefixClsValue}-no-arrow`]: !showArrow,
[`${attrs.class}`]: !!attrs.class,
}); });
let icon = <i class="arrow" />; let icon = <i class="arrow" />;
@ -85,7 +87,7 @@ export default defineComponent({
}; };
return ( return (
<div class={itemCls}> <div {...attrs} class={itemCls}>
<div <div
class={headerCls} class={headerCls}
onClick={() => collapsible !== 'header' && handleItemClick()} 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`] = ` 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 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 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 <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>
</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 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><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> </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 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 <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 { PropType } from 'vue';
import type { Key } from '../_util/type';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
export type CollapsibleType = 'header' | 'disabled'; export type CollapsibleType = 'header' | 'disabled';
export type ActiveKeyType = Array<string | number> | string | number; 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 = () => ({ const collapseProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
activeKey: { type: [Array, Number, String] as PropType<ActiveKeyType> }, activeKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
defaultActiveKey: { type: [Array, Number, String] as PropType<ActiveKeyType> }, defaultActiveKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
accordion: PropTypes.looseBool, accordion: { type: Boolean, default: undefined },
destroyInactivePanel: PropTypes.looseBool, destroyInactivePanel: { type: Boolean, default: undefined },
bordered: PropTypes.looseBool, bordered: { type: Boolean, default: undefined },
expandIcon: PropTypes.func, expandIcon: Function as PropType<(panelProps: PanelProps) => any>,
openAnimation: PropTypes.object, openAnimation: PropTypes.object,
expandIconPosition: PropTypes.oneOf(tuple('left', 'right')), expandIconPosition: PropTypes.oneOf(tuple('left', 'right')),
collapsible: { type: String as PropType<CollapsibleType> }, 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 = () => ({ const collapsePanelProps = () => ({
openAnimation: PropTypes.object, openAnimation: PropTypes.object,
prefixCls: PropTypes.string, prefixCls: String,
header: PropTypes.any, header: PropTypes.any,
headerClass: PropTypes.string, headerClass: String,
showArrow: PropTypes.looseBool, showArrow: { type: Boolean, default: undefined },
isActive: PropTypes.looseBool, isActive: { type: Boolean, default: undefined },
destroyInactivePanel: PropTypes.looseBool, destroyInactivePanel: { type: Boolean, default: undefined },
/** @deprecated Use `collapsible="disabled"` instead */ /** @deprecated Use `collapsible="disabled"` instead */
disabled: PropTypes.looseBool, disabled: { type: Boolean, default: undefined },
accordion: PropTypes.looseBool, accordion: { type: Boolean, default: undefined },
forceRender: PropTypes.looseBool, forceRender: { type: Boolean, default: undefined },
expandIcon: PropTypes.func, expandIcon: Function as PropType<(panelProps: PanelProps) => any>,
extra: PropTypes.any, extra: PropTypes.any,
panelKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), panelKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
collapsible: { type: String as PropType<CollapsibleType> }, collapsible: { type: String as PropType<CollapsibleType> },
role: String, role: String,
onItemClick: { type: Function as PropType<(panelKey: string | number) => void> }, onItemClick: { type: Function as PropType<(panelKey: Key) => void> },
}); });
export { collapseProps, collapsePanelProps }; export { collapseProps, collapsePanelProps };

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

@ -21,18 +21,18 @@ export default {
event: 'change.value', //为了支持v-model直接返回颜色字符串 所以用了自定义的事件,与pickr自带change事件进行区分 event: 'change.value', //为了支持v-model直接返回颜色字符串 所以用了自定义的事件,与pickr自带change事件进行区分
}, },
props: { props: {
prefixCls: PropTypes.string, prefixCls: String,
defaultValue: PropTypes.string, //默认值 defaultValue: String, //默认值
config: PropTypes.object, //pickr配置 config: PropTypes.object, //pickr配置
value: PropTypes.string, //颜色值 value: String, //颜色值
locale: PropTypes.object, //双语包 locale: PropTypes.object, //双语包
colorRounded: PropTypes.number, //颜色数值保留几位小数 colorRounded: Number, //颜色数值保留几位小数
size: PropTypes.oneOf(['default', 'small', 'large']).def('default'), //尺寸 size: PropTypes.oneOf(['default', 'small', 'large']).def('default'), //尺寸
getPopupContainer: PropTypes.func, //指定渲染容器 getPopupContainer: Function, //指定渲染容器
disabled: PropTypes.looseBool.def(false), //是否禁用 disabled: { type: Boolean, default: false }, //是否禁用
format: PropTypes.string, //颜色格式设置 format: String, //颜色格式设置
alpha: PropTypes.looseBool.def(false), //是否开启透明通道 alpha: { type: Boolean, default: false }, //是否开启透明通道
hue: PropTypes.looseBool.def(true), //是否开启色彩预选 hue: { type: Boolean, default: true }, //是否开启色彩预选
}, },
data() { 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`] = ` exports[`renders ./components/comment/demo/basic.vue correctly 1`] = `
<div class="ant-comment"> <div class="ant-comment">
<div class="ant-comment-inner"> <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">
<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-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"> <div class="ant-comment-content-detail">
@ -24,7 +24,7 @@ exports[`renders ./components/comment/demo/editor.vue correctly 1`] = `
<!--v-if--> <!--v-if-->
<div class="ant-comment"> <div class="ant-comment">
<div class="ant-comment-inner"> <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">
<div class="ant-comment-content-author"> <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`] = ` exports[`renders ./components/comment/demo/nested.vue correctly 1`] = `
<div class="ant-comment"> <div class="ant-comment">
<div class="ant-comment-inner"> <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">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span> <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-nested">
<div class="ant-comment"> <div class="ant-comment">
<div class="ant-comment-inner"> <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">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span> <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-nested">
<div class="ant-comment"> <div class="ant-comment">
<div class="ant-comment-inner"> <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">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span> <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>
<div class="ant-comment"> <div class="ant-comment">
<div class="ant-comment-inner"> <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">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span> <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 type { VueNode } from '../_util/type';
import { withInstall } from '../_util/type'; import { withInstall } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
export const commentProps = { export const commentProps = () => ({
actions: PropTypes.array, actions: Array,
/** The element to display as the comment author. */ /** The element to display as the comment author. */
author: PropTypes.any, author: PropTypes.any,
/** The element to display as the comment avatar - generally an antd Avatar */ /** 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 */ /** The main content of the comment */
content: PropTypes.any, content: PropTypes.any,
/** Comment prefix defaults to '.ant-comment' */ /** Comment prefix defaults to '.ant-comment' */
prefixCls: PropTypes.string, prefixCls: String,
/** A datetime element containing the time to be displayed */ /** A datetime element containing the time to be displayed */
datetime: PropTypes.any, datetime: PropTypes.any,
}; });
export type CommentProps = Partial<ExtractPropTypes<typeof commentProps>>; export type CommentProps = Partial<ExtractPropTypes<ReturnType<typeof commentProps>>>;
const Comment = defineComponent({ const Comment = defineComponent({
name: 'AComment', name: 'AComment',
props: commentProps, props: commentProps(),
slots: ['actions', 'author', 'avatar', 'content', 'datetime'], slots: ['actions', 'author', 'avatar', 'content', 'datetime'],
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('comment', props); const { prefixCls, direction } = useConfigInject('comment', props);

11
components/components.ts
View File

@ -99,13 +99,20 @@ export {
LayoutContent, LayoutContent,
} from './layout'; } from './layout';
export type { ListProps } from './list'; export type { ListProps, ListItemProps, ListItemMetaProps } from './list';
export { default as List, ListItem, ListItemMeta } from './list'; export { default as List, ListItem, ListItemMeta } from './list';
export type { MessageArgsProps } from './message'; export type { MessageArgsProps } from './message';
export { default as message } 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 { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu';
export type { MentionsProps } from './mentions'; 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 { RequiredMark } from '../form/Form';
import type { RenderEmptyHandler } from './renderEmpty'; import type { RenderEmptyHandler } from './renderEmpty';
import type { TransformCellTextProps } from '../table/interface'; import type { TransformCellTextProps } from '../table/interface';
import PropTypes from '../_util/vue-types';
import type { Locale } from '../locale-provider'; import type { Locale } from '../locale-provider';
type GlobalFormCOntextProps = { type GlobalFormCOntextProps = {
@ -93,7 +92,7 @@ export const configProviderProps = () => ({
input: { input: {
type: Object as PropType<{ autocomplete: string }>, type: Object as PropType<{ autocomplete: string }>,
}, },
autoInsertSpaceInButton: PropTypes.looseBool, autoInsertSpaceInButton: { type: Boolean, default: undefined },
locale: { locale: {
type: Object as PropType<Locale>, type: Object as PropType<Locale>,
default: undefined as Locale, default: undefined as Locale,
@ -110,7 +109,7 @@ export const configProviderProps = () => ({
space: { space: {
type: Object as PropType<{ size: SizeType | number }>, type: Object as PropType<{ size: SizeType | number }>,
}, },
virtual: PropTypes.looseBool, virtual: { type: Boolean, default: undefined },
dropdownMatchSelectWidth: { type: [Number, Boolean], default: true }, dropdownMatchSelectWidth: { type: [Number, Boolean], default: true },
form: { form: {
type: Object as PropType<{ 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 ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
import Row from './Row'; import Row from './Row';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { tuple } from '../_util/type';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import { flattenChildren } from '../_util/props-util'; import { flattenChildren } from '../_util/props-util';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
export const DescriptionsItemProps = { export const DescriptionsItemProps = {
prefixCls: PropTypes.string, prefixCls: String,
label: PropTypes.any, label: PropTypes.any,
span: PropTypes.number, span: Number,
}; };
const descriptionsItemProp = { const descriptionsItemProp = () => ({
prefixCls: PropTypes.string, prefixCls: String,
label: PropTypes.any, label: PropTypes.any,
labelStyle: PropTypes.style, labelStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
contentStyle: PropTypes.style, contentStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
span: PropTypes.number.def(1), span: { type: Number, default: 1 },
}; });
export type DescriptionsItemProp = Partial<ExtractPropTypes<typeof descriptionsItemProp>>; export type DescriptionsItemProp = Partial<
ExtractPropTypes<ReturnType<typeof descriptionsItemProp>>
>;
export const DescriptionsItem = defineComponent({ export const DescriptionsItem = defineComponent({
name: 'ADescriptionsItem', name: 'ADescriptionsItem',
props: descriptionsItemProp, props: descriptionsItemProp(),
slots: ['label'], slots: ['label'],
setup(_, { slots }) { setup(_, { slots }) {
return () => slots.default?.(); return () => slots.default?.();
@ -128,24 +129,24 @@ function getRows(children: VNode[], column: number) {
return rows; return rows;
} }
export const descriptionsProps = { export const descriptionsProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
bordered: PropTypes.looseBool, bordered: { type: Boolean, default: undefined },
size: PropTypes.oneOf(tuple('default', 'middle', 'small')).def('default'), size: { type: String as PropType<'default' | 'middle' | 'small'>, default: 'default' },
title: PropTypes.any, title: PropTypes.any,
extra: PropTypes.any, extra: PropTypes.any,
column: { column: {
type: [Number, Object] as PropType<number | Partial<Record<Breakpoint, number>>>, type: [Number, Object] as PropType<number | Partial<Record<Breakpoint, number>>>,
default: (): number | Partial<Record<Breakpoint, number>> => DEFAULT_COLUMN_MAP, default: (): number | Partial<Record<Breakpoint, number>> => DEFAULT_COLUMN_MAP,
}, },
layout: PropTypes.oneOf(tuple('horizontal', 'vertical')), layout: String as PropType<'horizontal' | 'vertical'>,
colon: PropTypes.looseBool, colon: { type: Boolean, default: undefined },
labelStyle: PropTypes.style, labelStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
contentStyle: PropTypes.style, contentStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
}; });
export type DescriptionsProps = HTMLAttributes & export type DescriptionsProps = HTMLAttributes &
Partial<ExtractPropTypes<typeof descriptionsProps>>; Partial<ExtractPropTypes<ReturnType<typeof descriptionsProps>>>;
export interface DescriptionsContextProp { export interface DescriptionsContextProp {
labelStyle?: Ref<CSSProperties>; labelStyle?: Ref<CSSProperties>;
@ -157,7 +158,7 @@ export const descriptionsContext: InjectionKey<DescriptionsContextProp> =
const Descriptions = defineComponent({ const Descriptions = defineComponent({
name: 'ADescriptions', name: 'ADescriptions',
props: descriptionsProps, props: descriptionsProps(),
slots: ['title', 'extra'], slots: ['title', 'extra'],
Item: DescriptionsItem, Item: DescriptionsItem,
setup(props, { slots }) { 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 { withInstall } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
export const dividerProps = { export const dividerProps = () => ({
prefixCls: String, prefixCls: String,
type: { type: {
type: String as PropType<'horizontal' | 'vertical' | ''>, type: String as PropType<'horizontal' | 'vertical' | ''>,
@ -23,12 +23,12 @@ export const dividerProps = {
default: false, default: false,
}, },
orientationMargin: [String, Number], orientationMargin: [String, Number],
}; });
export type DividerProps = Partial<ExtractPropTypes<typeof dividerProps>>; export type DividerProps = Partial<ExtractPropTypes<ReturnType<typeof dividerProps>>>;
const Divider = defineComponent({ const Divider = defineComponent({
name: 'ADivider', name: 'ADivider',
props: dividerProps, props: dividerProps(),
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props); const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props);
const hasCustomMarginLeft = computed( 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"> <ul class="ant-list-items">
<li class="ant-list-item"> <li class="ant-list-item">
<div class="ant-list-item-meta"> <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"> <div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Lily</a></h4> <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> <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>
<li class="ant-list-item"> <li class="ant-list-item">
<div class="ant-list-item-meta"> <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"> <div class="ant-list-item-meta-content">
<h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Lily</a></h4> <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> <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 { tuple, withInstall } from '../_util/type';
import omit from '../_util/omit'; import omit from '../_util/omit';
import devWarning from '../vc-util/devWarning'; import devWarning from '../vc-util/devWarning';
import type { KeyboardEventHandler, MouseEventHandler } from '../_util/EventInterface';
type ILevelMove = number | [number, number]; type ILevelMove = number | [number, number];
@ -35,40 +36,43 @@ export interface PushState {
const defaultPushState: PushState = { distance: 180 }; const defaultPushState: PushState = { distance: 180 };
export const drawerProps = () => ({ export const drawerProps = () => ({
autofocus: PropTypes.looseBool, autofocus: { type: Boolean, default: undefined },
closable: PropTypes.looseBool, closable: { type: Boolean, default: undefined },
closeIcon: PropTypes.any, closeIcon: PropTypes.any,
destroyOnClose: PropTypes.looseBool, destroyOnClose: { type: Boolean, default: undefined },
forceRender: PropTypes.looseBool, forceRender: { type: Boolean, default: undefined },
getContainer: PropTypes.any, getContainer: PropTypes.any,
maskClosable: PropTypes.looseBool, maskClosable: { type: Boolean, default: undefined },
mask: PropTypes.looseBool, mask: { type: Boolean, default: undefined },
maskStyle: PropTypes.object, maskStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
/** @deprecated Use `style` instead */ /** @deprecated Use `style` instead */
wrapStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties }, wrapStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
style: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties }, style: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
class: PropTypes.any, class: PropTypes.any,
/** @deprecated Use `class` instead */ /** @deprecated Use `class` instead */
wrapClassName: PropTypes.string, wrapClassName: String,
size: { size: {
type: String as PropType<sizeType>, type: String as PropType<sizeType>,
}, },
drawerStyle: PropTypes.object, drawerStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
headerStyle: PropTypes.object, headerStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
bodyStyle: PropTypes.object, bodyStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
contentWrapperStyle: PropTypes.object, contentWrapperStyle: {
type: Object as PropType<CSSProperties>,
default: undefined as CSSProperties,
},
title: PropTypes.any, title: PropTypes.any,
visible: PropTypes.looseBool, visible: { type: Boolean, default: undefined },
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
zIndex: PropTypes.number, zIndex: Number,
prefixCls: PropTypes.string, prefixCls: String,
push: PropTypes.oneOfType([PropTypes.looseBool, { type: Object as PropType<PushState> }]), push: PropTypes.oneOfType([PropTypes.looseBool, { type: Object as PropType<PushState> }]),
placement: PropTypes.oneOf(PlacementTypes), placement: PropTypes.oneOf(PlacementTypes),
keyboard: PropTypes.looseBool, keyboard: { type: Boolean, default: undefined },
extra: PropTypes.any, extra: PropTypes.any,
footer: PropTypes.any, footer: PropTypes.any,
footerStyle: PropTypes.object, footerStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
level: PropTypes.any, level: PropTypes.any,
levelMove: { levelMove: {
type: [Number, Array, Function] as PropType< type: [Number, Array, Function] as PropType<
@ -77,7 +81,10 @@ export const drawerProps = () => ({
}, },
handle: PropTypes.any, handle: PropTypes.any,
/** @deprecated Use `@afterVisibleChange` instead */ /** @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>>>; export type DrawerProps = Partial<ExtractPropTypes<ReturnType<typeof drawerProps>>>;
@ -95,7 +102,7 @@ const Drawer = defineComponent({
push: defaultPushState, push: defaultPushState,
}), }),
slots: ['closeIcon', 'title', 'extra', 'footer', 'handle'], slots: ['closeIcon', 'title', 'extra', 'footer', 'handle'],
emits: ['update:visible', 'close', 'afterVisibleChange'], // emits: ['update:visible', 'close', 'afterVisibleChange'],
setup(props, { emit, slots, attrs }) { setup(props, { emit, slots, attrs }) {
const sPush = ref(false); const sPush = ref(false);
const destroyClose = ref(false); const destroyClose = ref(false);
@ -343,6 +350,9 @@ const Drawer = defineComponent({
'title', 'title',
'push', 'push',
'wrapStyle', 'wrapStyle',
'onAfterVisibleChange',
'onClose',
'onUpdate:visible',
]), ]),
...val, ...val,
onClose: close, onClose: close,

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

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

2
components/dropdown/dropdown.tsx
View File

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

61
components/dropdown/props.ts
View File

@ -1,5 +1,4 @@
import { tuple } from '../_util/type'; import type { CSSProperties, PropType } from 'vue';
import type { PropType } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import buttonTypes from '../button/buttonTypes'; import buttonTypes from '../button/buttonTypes';
@ -32,32 +31,30 @@ const dropdownProps = () => ({
>, >,
}, },
overlay: PropTypes.any, overlay: PropTypes.any,
visible: PropTypes.looseBool, visible: { type: Boolean, default: undefined },
disabled: PropTypes.looseBool, disabled: { type: Boolean, default: undefined },
align: { type: Object as PropType<Align> }, align: { type: Object as PropType<Align> },
getPopupContainer: PropTypes.func, getPopupContainer: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
prefixCls: PropTypes.string, prefixCls: String,
transitionName: PropTypes.string, transitionName: String,
placement: PropTypes.oneOf( placement: String as PropType<
tuple( | 'topLeft'
'topLeft', | 'topCenter'
'topCenter', | 'top'
'top', | 'topRight'
'topRight', | 'bottomLeft'
'bottomLeft', | 'bottomCenter'
'bottomCenter', | 'bottom'
'bottom', | 'bottomRight'
'bottomRight', >,
), overlayClassName: String,
), overlayStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
overlayClassName: PropTypes.string, forceRender: { type: Boolean, default: undefined },
overlayStyle: PropTypes.style, mouseEnterDelay: Number,
forceRender: PropTypes.looseBool, mouseLeaveDelay: Number,
mouseEnterDelay: PropTypes.number, openClassName: String,
mouseLeaveDelay: PropTypes.number, minOverlayWidthMatchTrigger: { type: Boolean, default: undefined },
openClassName: PropTypes.string, destroyPopupOnHide: { type: Boolean, default: undefined },
minOverlayWidthMatchTrigger: PropTypes.looseBool,
destroyPopupOnHide: PropTypes.looseBool,
onVisibleChange: { onVisibleChange: {
type: Function as PropType<(val: boolean) => void>, type: Function as PropType<(val: boolean) => void>,
}, },
@ -70,13 +67,13 @@ const buttonTypesProps = buttonTypes();
const dropdownButtonProps = () => ({ const dropdownButtonProps = () => ({
...dropdownProps(), ...dropdownProps(),
type: buttonTypesProps.type, type: buttonTypesProps.type,
size: PropTypes.oneOf(tuple('small', 'large')), size: String as PropType<'small' | 'large'>,
htmlType: buttonTypesProps.htmlType, htmlType: buttonTypesProps.htmlType,
href: PropTypes.string, href: String,
disabled: PropTypes.looseBool, disabled: { type: Boolean, default: undefined },
prefixCls: PropTypes.string, prefixCls: String,
icon: PropTypes.any, icon: PropTypes.any,
title: PropTypes.string, title: String,
loading: buttonTypesProps.loading, loading: buttonTypesProps.loading,
onClick: { onClick: {
type: Function as PropType<MouseEventHandler>, 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 classNames from '../_util/classNames';
import LocaleReceiver from '../locale-provider/LocaleReceiver'; import LocaleReceiver from '../locale-provider/LocaleReceiver';
import DefaultEmptyImg from './empty'; import DefaultEmptyImg from './empty';
@ -85,10 +85,10 @@ Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg;
Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg; Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg;
Empty.inheritAttrs = false; Empty.inheritAttrs = false;
Empty.props = { Empty.props = {
prefixCls: PropTypes.string, prefixCls: String,
image: PropTypes.any, image: PropTypes.any,
description: PropTypes.any, description: PropTypes.any,
imageStyle: PropTypes.object, imageStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
}; };
export default withInstall(Empty); export default withInstall(Empty);

30
components/form/Form.tsx
View File

@ -23,6 +23,7 @@ import type {
ValidateErrorEntity, ValidateErrorEntity,
ValidateOptions, ValidateOptions,
Callbacks, Callbacks,
ValidateMessages,
} from './interface'; } from './interface';
import { useInjectSize } from '../_util/hooks/useSize'; import { useInjectSize } from '../_util/hooks/useSize';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
@ -60,25 +61,28 @@ export type ValidationRule = {
trigger?: string; trigger?: string;
}; };
export const formProps = { export const formProps = () => ({
layout: PropTypes.oneOf(tuple('horizontal', 'inline', 'vertical')), layout: PropTypes.oneOf(tuple('horizontal', 'inline', 'vertical')),
labelCol: { type: Object as PropType<ColProps & HTMLAttributes> }, labelCol: { type: Object as PropType<ColProps & HTMLAttributes> },
wrapperCol: { 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')), labelAlign: PropTypes.oneOf(tuple('left', 'right')),
labelWrap: PropTypes.looseBool, labelWrap: { type: Boolean, default: undefined },
prefixCls: PropTypes.string, prefixCls: String,
requiredMark: { type: [String, Boolean] as PropType<RequiredMark | ''>, default: undefined }, requiredMark: { type: [String, Boolean] as PropType<RequiredMark | ''>, default: undefined },
/** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */ /** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */
hideRequiredMark: PropTypes.looseBool, hideRequiredMark: { type: Boolean, default: undefined },
model: PropTypes.object, model: PropTypes.object,
rules: { type: Object as PropType<{ [k: string]: ValidationRule[] | ValidationRule }> }, rules: { type: Object as PropType<{ [k: string]: ValidationRule[] | ValidationRule }> },
validateMessages: PropTypes.object, validateMessages: {
validateOnRuleChange: PropTypes.looseBool, type: Object as PropType<ValidateMessages>,
default: undefined as ValidateMessages,
},
validateOnRuleChange: { type: Boolean, default: undefined },
// 提交失败自动滚动到第一个错误字段 // 提交失败自动滚动到第一个错误字段
scrollToFirstError: { type: [Boolean, Object] as PropType<boolean | Options> }, scrollToFirstError: { type: [Boolean, Object] as PropType<boolean | Options> },
onSubmit: PropTypes.func, onSubmit: Function as PropType<(e: Event) => void>,
name: PropTypes.string, name: String,
validateTrigger: { type: [String, Array] as PropType<string | string[]> }, validateTrigger: { type: [String, Array] as PropType<string | string[]> },
size: { type: String as PropType<SizeType> }, size: { type: String as PropType<SizeType> },
onValuesChange: { type: Function as PropType<Callbacks['onValuesChange']> }, onValuesChange: { type: Function as PropType<Callbacks['onValuesChange']> },
@ -86,9 +90,9 @@ export const formProps = {
onFinish: { type: Function as PropType<Callbacks['onFinish']> }, onFinish: { type: Function as PropType<Callbacks['onFinish']> },
onFinishFailed: { type: Function as PropType<Callbacks['onFinishFailed']> }, onFinishFailed: { type: Function as PropType<Callbacks['onFinishFailed']> },
onValidate: { type: Function as PropType<Callbacks['onValidate']> }, 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 = { export type FormExpose = {
resetFields: (name?: NamePath) => void; resetFields: (name?: NamePath) => void;
@ -120,14 +124,14 @@ function isEqualName(name1: NamePath, name2: NamePath) {
const Form = defineComponent({ const Form = defineComponent({
name: 'AForm', name: 'AForm',
inheritAttrs: false, inheritAttrs: false,
props: initDefaultProps(formProps, { props: initDefaultProps(formProps(), {
layout: 'horizontal', layout: 'horizontal',
hideRequiredMark: false, hideRequiredMark: false,
colon: true, colon: true,
}), }),
Item: FormItem, Item: FormItem,
useForm, useForm,
emits: ['finishFailed', 'submit', 'finish', 'validate'], // emits: ['finishFailed', 'submit', 'finish', 'validate'],
setup(props, { emit, slots, expose, attrs }) { setup(props, { emit, slots, expose, attrs }) {
const size = useInjectSize(props); const size = useInjectSize(props);
const { prefixCls, direction, form: contextForm } = useConfigInject('form', 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 { warning } from '../vc-util/warning';
import find from 'lodash-es/find'; import find from 'lodash-es/find';
import { tuple } from '../_util/type'; 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 useConfigInject from '../_util/hooks/useConfigInject';
import { useInjectForm } from './context'; import { useInjectForm } from './context';
import FormItemLabel from './FormItemLabel'; import FormItemLabel from './FormItemLabel';
@ -81,31 +81,31 @@ function getPropByPath(obj: any, namePathList: any, strict?: boolean) {
v: tempObj ? tempObj[keyArr[i]] : undefined, v: tempObj ? tempObj[keyArr[i]] : undefined,
}; };
} }
export const formItemProps = { export const formItemProps = () => ({
htmlFor: PropTypes.string, htmlFor: String,
prefixCls: PropTypes.string, prefixCls: String,
label: PropTypes.any, label: PropTypes.any,
help: PropTypes.any, help: PropTypes.any,
extra: PropTypes.any, extra: PropTypes.any,
labelCol: { type: Object as PropType<ColProps & HTMLAttributes> }, labelCol: { type: Object as PropType<ColProps & HTMLAttributes> },
wrapperCol: { type: Object as PropType<ColProps & HTMLAttributes> }, wrapperCol: { type: Object as PropType<ColProps & HTMLAttributes> },
hasFeedback: PropTypes.looseBool.def(false), hasFeedback: { type: Boolean, default: false },
colon: PropTypes.looseBool, colon: { type: Boolean, default: undefined },
labelAlign: PropTypes.oneOf(tuple('left', 'right')), labelAlign: PropTypes.oneOf(tuple('left', 'right')),
prop: { type: [String, Number, Array] as PropType<string | number | Array<string | number>> }, prop: { type: [String, Number, Array] as PropType<string | number | Array<string | number>> },
name: { 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]), rules: [Array, Object] as PropType<Rule[] | Rule>,
autoLink: PropTypes.looseBool.def(true), autoLink: { type: Boolean, default: true },
required: PropTypes.looseBool, required: { type: Boolean, default: undefined },
validateFirst: PropTypes.looseBool, validateFirst: { type: Boolean, default: undefined },
validateStatus: PropTypes.oneOf(tuple('', 'success', 'warning', 'error', 'validating')), validateStatus: PropTypes.oneOf(tuple('', 'success', 'warning', 'error', 'validating')),
validateTrigger: { type: [String, Array] as PropType<string | string[]> }, validateTrigger: { type: [String, Array] as PropType<string | string[]> },
messageVariables: { type: Object as PropType<Record<string, string>> }, messageVariables: { type: Object as PropType<Record<string, string>> },
hidden: Boolean, hidden: Boolean,
noStyle: Boolean, noStyle: Boolean,
}; });
export type FormItemProps = Partial<ExtractPropTypes<typeof formItemProps>>; export type FormItemProps = Partial<ExtractPropTypes<ReturnType<typeof formItemProps>>>;
export type FormItemExpose = { export type FormItemExpose = {
onFieldBlur: () => void; onFieldBlur: () => void;
@ -125,7 +125,7 @@ export default defineComponent({
name: 'AFormItem', name: 'AFormItem',
inheritAttrs: false, inheritAttrs: false,
__ANT_NEW_FORM_ITEM: true, __ANT_NEW_FORM_ITEM: true,
props: formItemProps, props: formItemProps(),
slots: ['help', 'label', 'extra'], slots: ['help', 'label', 'extra'],
setup(props, { slots, attrs, expose }) { setup(props, { slots, attrs, expose }) {
warning(props.prop === undefined, `\`prop\` is deprecated. Please use \`name\` instead.`); 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], offset: [String, Number],
push: [String, Number], push: [String, Number],
pull: [String, Number], pull: [String, Number],
xs: { type: [String, Number, Object] as PropType<string | number | ColSize> }, xs: {
sm: { type: [String, Number, Object] as PropType<string | number | ColSize> }, type: [String, Number, Object] as PropType<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> }, },
xl: { type: [String, Number, Object] as PropType<string | number | ColSize> }, sm: {
xxl: { type: [String, Number, Object] as PropType<string | number | ColSize> }, type: [String, Number, Object] as PropType<string | number | ColSize>,
xxxl: { 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, prefixCls: String,
flex: [String, Number], flex: [String, Number],
}); });

3
components/image/PreviewGroup.tsx
View File

@ -1,12 +1,11 @@
import PreviewGroup from '../vc-image/src/PreviewGroup'; import PreviewGroup from '../vc-image/src/PreviewGroup';
import { computed, defineComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
const InternalPreviewGroup = defineComponent({ const InternalPreviewGroup = defineComponent({
name: 'AImagePreviewGroup', name: 'AImagePreviewGroup',
inheritAttrs: false, inheritAttrs: false,
props: { previewPrefixCls: PropTypes.string }, props: { previewPrefixCls: String },
setup(props, { attrs, slots }) { setup(props, { attrs, slots }) {
const { getPrefixCls } = useConfigInject('image', props); const { getPrefixCls } = useConfigInject('image', props);
const prefixCls = computed(() => getPrefixCls('image-preview', props.previewPrefixCls)); 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'; import PreviewGroup from './PreviewGroup';
export type ImageProps = Partial< export type ImageProps = Partial<
ExtractPropTypes<typeof imageProps> & Omit<ImgHTMLAttributes, 'placeholder' | 'onClick'> ExtractPropTypes<ReturnType<typeof imageProps>> &
Omit<ImgHTMLAttributes, 'placeholder' | 'onClick'>
>; >;
const Image = defineComponent<ImageProps>({ const Image = defineComponent<ImageProps>({
name: 'AImage', name: 'AImage',
inheritAttrs: false, inheritAttrs: false,
props: imageProps as any, props: imageProps() as any,
setup(props, { slots, attrs }) { setup(props, { slots, attrs }) {
const { prefixCls } = useConfigInject('image', props); const { prefixCls } = useConfigInject('image', props);
return () => { return () => {

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

@ -11,8 +11,9 @@ import { cloneElement } from '../_util/vnode';
import omit from '../_util/omit'; import omit from '../_util/omit';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import isValidValue from '../_util/isValidValue'; import isValidValue from '../_util/isValidValue';
export const inputNumberProps = { const baseProps = baseInputNumberProps();
...baseInputNumberProps, export const inputNumberProps = () => ({
...baseProps,
size: { type: String as PropType<SizeType> }, size: { type: String as PropType<SizeType> },
bordered: { type: Boolean, default: true }, bordered: { type: Boolean, default: true },
placeholder: String, placeholder: String,
@ -22,16 +23,16 @@ export const inputNumberProps = {
addonBefore: PropTypes.any, addonBefore: PropTypes.any,
addonAfter: PropTypes.any, addonAfter: PropTypes.any,
prefix: 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({ const InputNumber = defineComponent({
name: 'AInputNumber', name: 'AInputNumber',
inheritAttrs: false, inheritAttrs: false,
props: inputNumberProps, props: inputNumberProps(),
emits: ['focus', 'blur', 'change', 'input', 'update:value'], // emits: ['focus', 'blur', 'change', 'input', 'update:value'],
slots: ['addonBefore', 'addonAfter', 'prefix'], slots: ['addonBefore', 'addonAfter', 'prefix'],
setup(props, { emit, expose, attrs, slots }) { setup(props, { emit, expose, attrs, slots }) {
const formItemContext = useInjectFormItemContext(); 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; return decimal.isInvalidate() ? null : decimal;
}; };
export const inputNumberProps = { export const inputNumberProps = () => ({
/** value will show as string */ /** value will show as string */
stringMode: { type: Boolean as PropType<boolean> }, stringMode: { type: Boolean as PropType<boolean> },
@ -76,12 +76,12 @@ export const inputNumberProps = {
}, },
onBlur: { type: Function as PropType<(e: InputEvent) => void> }, onBlur: { type: Function as PropType<(e: InputEvent) => void> },
onFocus: { type: Function as PropType<(e: InputEvent) => void> }, onFocus: { type: Function as PropType<(e: InputEvent) => void> },
}; });
export default defineComponent({ export default defineComponent({
name: 'InnerInputNumber', name: 'InnerInputNumber',
inheritAttrs: false, inheritAttrs: false,
props: inputNumberProps, props: inputNumberProps(),
slots: ['upHandler', 'downHandler'], slots: ['upHandler', 'downHandler'],
setup(props, { attrs, slots, emit, expose }) { setup(props, { attrs, slots, emit, expose }) {
const inputRef = ref<HTMLInputElement>(); const inputRef = ref<HTMLInputElement>();

14
components/input/ClearableLabeledInput.tsx
View File

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

5
components/input/Group.tsx
View File

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

7
components/input/Input.tsx
View File

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

10
components/input/Password.tsx
View File

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

2
components/input/ResizableTextArea.tsx
View File

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

4
components/input/Search.tsx
View File

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

2
components/input/TextArea.tsx
View File

@ -47,7 +47,7 @@ function setTriggerValue(
export default defineComponent({ export default defineComponent({
name: 'ATextarea', name: 'ATextarea',
inheritAttrs: false, inheritAttrs: false,
props: textAreaProps, props: textAreaProps(),
setup(props, { attrs, expose, emit }) { setup(props, { attrs, expose, emit }) {
const formItemContext = useInjectFormItemContext(); const formItemContext = useInjectFormItemContext();
const stateValue = ref(props.value === undefined ? props.defaultValue : props.value); 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 type { SizeType } from '../config-provider';
import omit from '../_util/omit'; import omit from '../_util/omit';
import type { LiteralUnion, VueNode } from '../_util/type'; import type { LiteralUnion, VueNode } from '../_util/type';
import type {
ChangeEventHandler,
CompositionEventHandler,
FocusEventHandler,
KeyboardEventHandler,
} from '../_util/EventInterface';
export const inputDefaultValue = Symbol() as unknown as string; export const inputDefaultValue = Symbol() as unknown as string;
const inputProps = { const inputProps = () => ({
id: PropTypes.string, id: String,
prefixCls: PropTypes.string, prefixCls: String,
inputPrefixCls: PropTypes.string, inputPrefixCls: String,
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
value: { value: {
type: [String, Number, Symbol] as PropType<string | number>, type: [String, Number, Symbol] as PropType<string | number>,
@ -47,35 +53,35 @@ const inputProps = {
>, >,
default: 'text', default: 'text',
}, },
name: PropTypes.string, name: String,
size: { type: String as PropType<SizeType> }, size: { type: String as PropType<SizeType> },
disabled: PropTypes.looseBool, disabled: { type: Boolean, default: undefined },
readonly: PropTypes.looseBool, readonly: { type: Boolean, default: undefined },
addonBefore: PropTypes.any, addonBefore: PropTypes.any,
addonAfter: PropTypes.any, addonAfter: PropTypes.any,
prefix: PropTypes.any, prefix: PropTypes.any,
suffix: PropTypes.any, suffix: PropTypes.any,
autofocus: PropTypes.looseBool, autofocus: { type: Boolean, default: undefined },
allowClear: PropTypes.looseBool, allowClear: { type: Boolean, default: undefined },
lazy: PropTypes.looseBool.def(true), lazy: { type: Boolean, default: true },
maxlength: PropTypes.number, maxlength: Number,
loading: PropTypes.looseBool, loading: { type: Boolean, default: undefined },
bordered: PropTypes.looseBool, bordered: { type: Boolean, default: undefined },
showCount: { type: [Boolean, Object] as PropType<boolean | ShowCountProps> }, showCount: { type: [Boolean, Object] as PropType<boolean | ShowCountProps> },
htmlSize: Number, htmlSize: Number,
onPressEnter: PropTypes.func, onPressEnter: Function as PropType<KeyboardEventHandler>,
onKeydown: PropTypes.func, onKeydown: Function as PropType<KeyboardEventHandler>,
onKeyup: PropTypes.func, onKeyup: Function as PropType<KeyboardEventHandler>,
onFocus: PropTypes.func, onFocus: Function as PropType<FocusEventHandler>,
onBlur: PropTypes.func, onBlur: Function as PropType<FocusEventHandler>,
onChange: PropTypes.func, onChange: Function as PropType<ChangeEventHandler>,
onInput: PropTypes.func, onInput: Function as PropType<ChangeEventHandler>,
'onUpdate:value': PropTypes.func, 'onUpdate:value': Function as PropType<(val: string) => void>,
valueModifiers: Object, valueModifiers: Object,
hidden: Boolean, hidden: Boolean,
}; });
export default inputProps; export default inputProps;
export type InputProps = Partial<ExtractPropTypes<typeof inputProps>>; export type InputProps = Partial<ExtractPropTypes<ReturnType<typeof inputProps>>>;
export interface AutoSizeType { export interface AutoSizeType {
minRows?: number; minRows?: number;
@ -84,17 +90,17 @@ export interface AutoSizeType {
export interface ShowCountProps { export interface ShowCountProps {
formatter: (args: { count: number; maxlength?: number }) => VueNode; formatter: (args: { count: number; maxlength?: number }) => VueNode;
} }
const textAreaProps = { const textAreaProps = () => ({
...omit(inputProps, ['prefix', 'addonBefore', 'addonAfter', 'suffix']), ...omit(inputProps(), ['prefix', 'addonBefore', 'addonAfter', 'suffix']),
rows: Number, rows: Number,
autosize: { type: [Boolean, Object] as PropType<AutoSizeType>, default: undefined }, autosize: { type: [Boolean, Object] as PropType<AutoSizeType>, default: undefined },
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> }, onResize: { type: Function as PropType<(size: { width: number; height: number }) => void> },
onCompositionstart: PropTypes.func, onCompositionstart: Function as PropType<CompositionEventHandler>,
onCompositionend: PropTypes.func, onCompositionend: Function as PropType<CompositionEventHandler>,
valueModifiers: Object, valueModifiers: Object,
}; });
export { textAreaProps }; 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 type CollapseType = 'clickTrigger' | 'responsive';
export const siderProps = { export const siderProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
collapsible: PropTypes.looseBool, collapsible: { type: Boolean, default: undefined },
collapsed: PropTypes.looseBool, collapsed: { type: Boolean, default: undefined },
defaultCollapsed: PropTypes.looseBool, defaultCollapsed: { type: Boolean, default: undefined },
reverseArrow: PropTypes.looseBool, reverseArrow: { type: Boolean, default: undefined },
zeroWidthTriggerStyle: PropTypes.style, zeroWidthTriggerStyle: {
type: Object as PropType<CSSProperties>,
default: undefined as CSSProperties,
},
trigger: PropTypes.any, trigger: PropTypes.any,
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
collapsedWidth: 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'), theme: PropTypes.oneOf(tuple('light', 'dark')).def('dark'),
onBreakpoint: Function as PropType<(broken: boolean) => void>, onBreakpoint: Function as PropType<(broken: boolean) => void>,
onCollapse: Function as PropType<(collapsed: boolean, type: CollapseType) => void>, onCollapse: Function as PropType<(collapsed: boolean, type: CollapseType) => void>,
}; });
export type SiderProps = Partial<ExtractPropTypes<typeof siderProps>>; export type SiderProps = Partial<ExtractPropTypes<ReturnType<typeof siderProps>>>;
// export interface SiderState {
// collapsed?: boolean;
// below: boolean;
// belowShow?: boolean;
// }
export interface SiderContextProps { export interface SiderContextProps {
sCollapsed?: boolean; sCollapsed?: boolean;
@ -62,7 +60,7 @@ const generateId = (() => {
export default defineComponent({ export default defineComponent({
name: 'ALayoutSider', name: 'ALayoutSider',
inheritAttrs: false, inheritAttrs: false,
props: initDefaultProps(siderProps, { props: initDefaultProps(siderProps(), {
collapsible: false, collapsible: false,
defaultCollapsed: false, defaultCollapsed: false,
reverseArrow: false, reverseArrow: false,

19
components/layout/layout.tsx
View File

@ -1,16 +1,15 @@
import type { ExtractPropTypes, HTMLAttributes } from 'vue'; import type { ExtractPropTypes, HTMLAttributes } from 'vue';
import { computed, createVNode, defineComponent, provide, ref } from 'vue'; import { computed, createVNode, defineComponent, provide, ref } from 'vue';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import { SiderHookProviderKey } from './injectionKey'; import { SiderHookProviderKey } from './injectionKey';
export const basicProps = { export const basicProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
hasSider: PropTypes.looseBool, hasSider: { type: Boolean, default: undefined },
tagName: PropTypes.string, tagName: String,
}; });
export type BasicProps = Partial<ExtractPropTypes<typeof basicProps>> & HTMLAttributes; export type BasicProps = Partial<ExtractPropTypes<ReturnType<typeof basicProps>>> & HTMLAttributes;
type GeneratorArgument = { type GeneratorArgument = {
suffixCls: string; suffixCls: string;
@ -22,7 +21,7 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
return (BasicComponent: typeof Basic) => { return (BasicComponent: typeof Basic) => {
const Adapter = defineComponent({ const Adapter = defineComponent({
name, name,
props: basicProps, props: basicProps(),
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls } = useConfigInject(suffixCls, props); const { prefixCls } = useConfigInject(suffixCls, props);
return () => { return () => {
@ -40,14 +39,14 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
} }
const Basic = defineComponent({ const Basic = defineComponent({
props: basicProps, props: basicProps(),
setup(props, { slots }) { setup(props, { slots }) {
return () => createVNode(props.tagName, { class: props.prefixCls }, slots); return () => createVNode(props.tagName, { class: props.prefixCls }, slots);
}, },
}); });
const BasicLayout = defineComponent({ const BasicLayout = defineComponent({
props: basicProps, props: basicProps(),
setup(props, { slots }) { setup(props, { slots }) {
const { direction } = useConfigInject('', props); const { direction } = useConfigInject('', props);
const siders = ref<string[]>([]); 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 { isStringElement, isEmptyElement, flattenChildren } from '../_util/props-util';
import { Col } from '../grid'; import { Col } from '../grid';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import { defineComponent, inject, ref } from 'vue'; import { defineComponent, inject, ref } from 'vue';
import ItemMeta from './ItemMeta'; import ItemMeta from './ItemMeta';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import { ListContextKey } from './contextKey'; import { ListContextKey } from './contextKey';
import type { ListGridType } from '.';
export const ListItemProps = { export const listItemProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
extra: PropTypes.any, extra: PropTypes.any,
actions: PropTypes.array, actions: PropTypes.array,
grid: PropTypes.any, grid: Object as PropType<ListGridType>,
colStyle: PropTypes.style, colStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
}; });
export type ListItemProps = Partial<ExtractPropTypes<ReturnType<typeof listItemProps>>>;
export default defineComponent({ export default defineComponent({
name: 'AListItem', name: 'AListItem',
inheritAttrs: false, inheritAttrs: false,
Meta: ItemMeta, Meta: ItemMeta,
props: ListItemProps, props: listItemProps(),
slots: ['actions', 'extra'], slots: ['actions', 'extra'],
setup(props, { slots, attrs }) { setup(props, { slots, attrs }) {
const { itemLayout, grid } = inject(ListContextKey, { 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 useConfigInject from '../_util/hooks/useConfigInject';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
export const listItemMetaProps = { export const listItemMetaProps = () => ({
avatar: PropTypes.any, avatar: PropTypes.any,
description: PropTypes.any, description: PropTypes.any,
prefixCls: PropTypes.string, prefixCls: String,
title: PropTypes.any, title: PropTypes.any,
}; });
export type ListItemMetaProps = Partial<ExtractPropTypes<typeof listItemMetaProps>>; export type ListItemMetaProps = Partial<ExtractPropTypes<ReturnType<typeof listItemMetaProps>>>;
export default defineComponent({ export default defineComponent({
name: 'AListItemMeta', name: 'AListItemMeta',
props: listItemMetaProps, props: listItemMetaProps(),
displayName: 'AListItemMeta', // 兼容历史函数式组件 displayName: 'AListItemMeta', // 兼容历史函数式组件
__ANT_LIST_ITEM_META: true, __ANT_LIST_ITEM_META: true,
slots: ['avatar', 'description', 'title'], 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"> <ul class="ant-list-items">
<li class="ant-list-item"> <li class="ant-list-item">
<div class="ant-list-item-meta"> <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"> <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> <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> <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>
<li class="ant-list-item"> <li class="ant-list-item">
<div class="ant-list-item-meta"> <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"> <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> <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> <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>
<li class="ant-list-item"> <li class="ant-list-item">
<div class="ant-list-item-meta"> <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"> <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> <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> <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>
<li class="ant-list-item"> <li class="ant-list-item">
<div class="ant-list-item-meta"> <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"> <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> <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> <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"> <li class="ant-list-item">
<div class="ant-list-item-main"> <div class="ant-list-item-main">
<div class="ant-list-item-meta"> <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"> <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> <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> <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"> <li class="ant-list-item">
<div class="ant-list-item-main"> <div class="ant-list-item-main">
<div class="ant-list-item-meta"> <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"> <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> <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> <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"> <li class="ant-list-item">
<div class="ant-list-item-main"> <div class="ant-list-item-main">
<div class="ant-list-item-meta"> <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"> <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> <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> <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 { responsiveArray } from '../_util/responsiveObserve';
import eagerComputed from '../_util/eagerComputed'; import eagerComputed from '../_util/eagerComputed';
export { ListItemProps } from './Item'; export type { ListItemProps } from './Item';
export type { ListItemMetaProps } from './ItemMeta'; export type { ListItemMetaProps } from './ItemMeta';
export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'; 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 type ListItemLayout = 'horizontal' | 'vertical';
export const listProps = () => ({ export const listProps = () => ({
bordered: PropTypes.looseBool, bordered: { type: Boolean, default: undefined },
dataSource: PropTypes.array, dataSource: PropTypes.array,
extra: PropTypes.any, extra: PropTypes.any,
grid: { type: Object as PropType<ListGridType>, default: undefined as ListGridType }, grid: { type: Object as PropType<ListGridType>, default: undefined as ListGridType },
@ -57,9 +57,9 @@ export const listProps = () => ({
}, },
prefixCls: String, prefixCls: String,
rowKey: [String, Number, Function] as PropType<Key | ((item: any) => Key)>, 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>, size: String as PropType<ListSize>,
split: PropTypes.looseBool, split: { type: Boolean, default: undefined },
header: PropTypes.any, header: PropTypes.any,
footer: PropTypes.any, footer: PropTypes.any,
locale: { locale: {

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

@ -1,6 +1,5 @@
import type { App, VNode, PropType } from 'vue'; import type { App, VNode, PropType } from 'vue';
import { provide, defineComponent, reactive, watch } from 'vue'; import { provide, defineComponent, reactive, watch } from 'vue';
import PropTypes from '../_util/vue-types';
import type { ModalLocale } from '../modal/locale'; import type { ModalLocale } from '../modal/locale';
import warning from '../_util/warning'; import warning from '../_util/warning';
import { withInstall } from '../_util/type'; import { withInstall } from '../_util/type';
@ -59,7 +58,7 @@ const LocaleProvider = defineComponent({
locale: { locale: {
type: Object as PropType<Locale>, type: Object as PropType<Locale>,
}, },
ANT_MARK__: PropTypes.string, ANT_MARK__: String,
}, },
setup(props, { slots }) { setup(props, { slots }) {
warning( 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 { useInjectFormItemContext } from '../form/FormItemContext';
import omit from '../_util/omit'; import omit from '../_util/omit';
import { optionProps } from '../vc-mentions/src/Option'; import { optionProps } from '../vc-mentions/src/Option';
import type { KeyboardEventHandler } from '../_util/EventInterface';
interface MentionsConfig { interface MentionsConfig {
prefix?: string | string[]; prefix?: string | string[];
@ -58,9 +59,9 @@ const getMentions = (value = '', config: MentionsConfig = {}): MentionsEntity[]
.filter((entity): entity is MentionsEntity => !!entity && !!entity.value); .filter((entity): entity is MentionsEntity => !!entity && !!entity.value);
}; };
export const mentionsProps = { export const mentionsProps = () => ({
...baseMentionsProps, ...baseMentionsProps,
loading: PropTypes.looseBool, loading: { type: Boolean, default: undefined },
onFocus: { onFocus: {
type: Function as PropType<(e: FocusEvent) => void>, type: Function as PropType<(e: FocusEvent) => void>,
}, },
@ -73,18 +74,23 @@ export const mentionsProps = {
onChange: { onChange: {
type: Function as PropType<(text: string) => void>, 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, notFoundContent: PropTypes.any,
defaultValue: String, defaultValue: String,
id: String, id: String,
}; });
export type MentionsProps = Partial<ExtractPropTypes<typeof mentionsProps>>; export type MentionsProps = Partial<ExtractPropTypes<ReturnType<typeof mentionsProps>>>;
const Mentions = defineComponent({ const Mentions = defineComponent({
name: 'AMentions', name: 'AMentions',
inheritAttrs: false, inheritAttrs: false,
props: mentionsProps, props: mentionsProps(),
emits: ['update:value', 'change', 'focus', 'blur', 'select', 'pressenter'],
slots: ['notFoundContent', 'option'], slots: ['notFoundContent', 'option'],
setup(props, { slots, emit, attrs, expose }) { setup(props, { slots, emit, attrs, expose }) {
const { prefixCls, renderEmpty, direction } = useConfigInject('mentions', props); 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 type { MenuItemGroupProps } from './src/ItemGroup';
import ItemGroup from './src/ItemGroup'; import ItemGroup from './src/ItemGroup';
import Divider from './src/Divider'; import Divider from './src/Divider';
import type { MenuDividerProps } from './src/Divider';
import type { App, Plugin } from 'vue'; import type { App, Plugin } from 'vue';
import type { MenuTheme, MenuMode } from './src/interface'; import type { MenuTheme, MenuMode } from './src/interface';
/* istanbul ignore next */ /* istanbul ignore next */
@ -23,7 +24,15 @@ Menu.Item = MenuItem;
Menu.Divider = Divider; Menu.Divider = Divider;
Menu.SubMenu = SubMenu; Menu.SubMenu = SubMenu;
Menu.ItemGroup = ItemGroup; Menu.ItemGroup = ItemGroup;
export type { MenuProps, SubMenuProps, MenuItemProps, MenuItemGroupProps, MenuTheme, MenuMode }; export type {
MenuProps,
SubMenuProps,
MenuItemProps,
MenuItemGroupProps,
MenuTheme,
MenuMode,
MenuDividerProps,
};
export { export {
SubMenu, SubMenu,
MenuItem as Item, MenuItem as Item,

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

@ -1,12 +1,17 @@
import useConfigInject from '../../_util/hooks/useConfigInject'; import useConfigInject from '../../_util/hooks/useConfigInject';
import type { ExtractPropTypes } from 'vue';
import { computed, defineComponent } 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({ export default defineComponent({
name: 'AMenuDivider', name: 'AMenuDivider',
props: { props: menuDividerProps(),
prefixCls: String,
dashed: Boolean,
},
setup(props) { setup(props) {
const { prefixCls } = useConfigInject('menu', props); const { prefixCls } = useConfigInject('menu', props);
const cls = computed(() => { 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 { useInjectMenu } from './hooks/useMenuContext';
import { useMeasure } from './hooks/useKeyPath'; import { useMeasure } from './hooks/useKeyPath';
export const menuItemGroupProps = { export const menuItemGroupProps = () => ({
title: PropTypes.any, title: PropTypes.any,
}; });
export type MenuItemGroupProps = Partial<ExtractPropTypes<typeof menuItemGroupProps>>; export type MenuItemGroupProps = Partial<ExtractPropTypes<ReturnType<typeof menuItemGroupProps>>>;
export default defineComponent({ export default defineComponent({
name: 'AMenuItemGroup', name: 'AMenuItemGroup',
inheritAttrs: false, inheritAttrs: false,
props: menuItemGroupProps, props: menuItemGroupProps(),
slots: ['title'], slots: ['title'],
setup(props, { slots, attrs }) { setup(props, { slots, attrs }) {
const { prefixCls } = useInjectMenu(); 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 type { FocusEventHandler, MouseEventHandler } from '../../_util/EventInterface';
import collapseMotion from '../../_util/collapseMotion'; import collapseMotion from '../../_util/collapseMotion';
export const menuProps = { export const menuProps = () => ({
id: String, id: String,
prefixCls: String, prefixCls: String,
disabled: Boolean, disabled: Boolean,
inlineCollapsed: Boolean, inlineCollapsed: Boolean,
disabledOverflow: Boolean, disabledOverflow: Boolean,
forceSubMenuRender: Boolean, forceSubMenuRender: Boolean,
openKeys: Array, openKeys: Array as PropType<Key[]>,
selectedKeys: Array, selectedKeys: Array as PropType<Key[]>,
activeKey: String, // 内部组件使用 activeKey: String, // 内部组件使用
selectable: { type: Boolean, default: true }, selectable: { type: Boolean, default: true },
multiple: { type: Boolean, default: false }, multiple: { type: Boolean, default: false },
@ -68,15 +68,15 @@ export const menuProps = {
'onUpdate:openKeys': Function as PropType<(keys: Key[]) => void>, 'onUpdate:openKeys': Function as PropType<(keys: Key[]) => void>,
'onUpdate:selectedKeys': Function as PropType<(keys: Key[]) => void>, 'onUpdate:selectedKeys': Function as PropType<(keys: Key[]) => void>,
'onUpdate:activeKey': Function as PropType<(key: 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[] = []; const EMPTY_LIST: string[] = [];
export default defineComponent({ export default defineComponent({
name: 'AMenu', name: 'AMenu',
inheritAttrs: false, inheritAttrs: false,
props: menuProps, props: menuProps(),
slots: ['expandIcon', 'overflowedIndicator'], slots: ['expandIcon', 'overflowedIndicator'],
setup(props, { slots, emit, attrs }) { setup(props, { slots, emit, attrs }) {
const { prefixCls, direction, getPrefixCls } = useConfigInject('menu', props); 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 { flattenChildren, getPropsSlot, isValidElement } from '../../_util/props-util';
import PropTypes from '../../_util/vue-types'; 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 { computed, defineComponent, getCurrentInstance, onBeforeUnmount, ref, watch } from 'vue';
import { useInjectKeyPath, useMeasure } from './hooks/useKeyPath'; import { useInjectKeyPath, useMeasure } from './hooks/useKeyPath';
import { useInjectFirstLevel, useInjectMenu } from './hooks/useMenuContext'; import { useInjectFirstLevel, useInjectMenu } from './hooks/useMenuContext';
@ -11,24 +11,30 @@ import KeyCode from '../../_util/KeyCode';
import useDirectionStyle from './hooks/useDirectionStyle'; import useDirectionStyle from './hooks/useDirectionStyle';
import Overflow from '../../vc-overflow'; import Overflow from '../../vc-overflow';
import devWarning from '../../vc-util/devWarning'; import devWarning from '../../vc-util/devWarning';
import type { MouseEventHandler } from '../../_util/EventInterface';
let indexGuid = 0; let indexGuid = 0;
export const menuItemProps = { export const menuItemProps = () => ({
id: String, id: String,
role: String, role: String,
disabled: Boolean, disabled: Boolean,
danger: Boolean, danger: Boolean,
title: { type: [String, Boolean], default: undefined }, title: { type: [String, Boolean], default: undefined },
icon: PropTypes.any, 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({ export default defineComponent({
name: 'AMenuItem', name: 'AMenuItem',
inheritAttrs: false, inheritAttrs: false,
props: menuItemProps, props: menuItemProps(),
emits: ['mouseenter', 'mouseleave', 'click', 'keydown', 'focus'], // emits: ['mouseenter', 'mouseleave', 'click', 'keydown', 'focus'],
slots: ['icon', 'title'], slots: ['icon', 'title'],
setup(props, { slots, emit, attrs }) { setup(props, { slots, emit, attrs }) {
const instance = getCurrentInstance(); 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 Overflow from '../../vc-overflow';
import devWarning from '../../vc-util/devWarning'; import devWarning from '../../vc-util/devWarning';
import isValid from '../../_util/isValid'; import isValid from '../../_util/isValid';
import type { MouseEventHandler } from '../../_util/EventInterface';
import type { Key } from 'ant-design-vue/es/_util/type';
let indexGuid = 0; let indexGuid = 0;
export const subMenuProps = { export const subMenuProps = () => ({
icon: PropTypes.any, icon: PropTypes.any,
title: PropTypes.any, title: PropTypes.any,
disabled: Boolean, disabled: Boolean,
@ -32,16 +34,19 @@ export const subMenuProps = {
internalPopupClose: Boolean, internalPopupClose: Boolean,
eventKey: String, eventKey: String,
expandIcon: Function as PropType<(p?: { isOpen: boolean; [key: string]: any }) => any>, 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({ export default defineComponent({
name: 'ASubMenu', name: 'ASubMenu',
inheritAttrs: false, inheritAttrs: false,
props: subMenuProps, props: subMenuProps(),
slots: ['icon', 'title', 'expandIcon'], slots: ['icon', 'title', 'expandIcon'],
emits: ['titleClick', 'mouseenter', 'mouseleave'], // emits: ['titleClick', 'mouseenter', 'mouseleave'],
setup(props, { slots, attrs, emit }) { setup(props, { slots, attrs, emit }) {
useProvideFirstLevel(false); useProvideFirstLevel(false);
const isMeasure = useMeasure(); const isMeasure = useMeasure();

4
components/modal/Modal.tsx
View File

@ -68,8 +68,8 @@ export const modalProps = () => ({
default: undefined, default: undefined,
}, },
zIndex: Number, zIndex: Number,
bodyStyle: Object as PropType<CSSProperties>, bodyStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
maskStyle: Object as PropType<CSSProperties>, maskStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
mask: { type: Boolean, default: undefined }, mask: { type: Boolean, default: undefined },
keyboard: { type: Boolean, default: undefined }, keyboard: { type: Boolean, default: undefined },
wrapProps: Object, 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" class="ant-avatar ant-avatar-circle ant-avatar-image"
> >
<img <img
draggable="false"
src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4" src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"
/> />
</span> </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 { defineComponent, ref, computed } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { filterEmpty, flattenChildren, isEmptyContent } from '../_util/props-util'; import { filterEmpty, flattenChildren, isEmptyContent } from '../_util/props-util';
@ -13,10 +13,11 @@ import useConfigInject from '../_util/hooks/useConfigInject';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import ResizeObserver from '../vc-resize-observer'; import ResizeObserver from '../vc-resize-observer';
import useDestroyed from '../_util/hooks/useDestroyed'; import useDestroyed from '../_util/hooks/useDestroyed';
import type { MouseEventHandler } from '../_util/EventInterface';
export const pageHeaderProps = { export const pageHeaderProps = () => ({
backIcon: PropTypes.any, backIcon: PropTypes.any,
prefixCls: PropTypes.string, prefixCls: String,
title: PropTypes.any, title: PropTypes.any,
subTitle: PropTypes.any, subTitle: PropTypes.any,
breadcrumb: PropTypes.object, breadcrumb: PropTypes.object,
@ -24,16 +25,16 @@ export const pageHeaderProps = {
footer: PropTypes.any, footer: PropTypes.any,
extra: PropTypes.any, extra: PropTypes.any,
avatar: PropTypes.object, avatar: PropTypes.object,
ghost: PropTypes.looseBool, ghost: { type: Boolean, default: undefined },
onBack: PropTypes.func, onBack: Function as PropType<MouseEventHandler>,
}; });
export type PageHeaderProps = Partial<ExtractPropTypes<typeof pageHeaderProps>>; export type PageHeaderProps = Partial<ExtractPropTypes<ReturnType<typeof pageHeaderProps>>>;
const PageHeader = defineComponent({ const PageHeader = defineComponent({
name: 'APageHeader', name: 'APageHeader',
props: pageHeaderProps, props: pageHeaderProps(),
emits: ['back'], // emits: ['back'],
slots: ['backIcon', 'avatar', 'breadcrumb', 'title', 'subTitle', 'tags', 'extra', 'footer'], slots: ['backIcon', 'avatar', 'breadcrumb', 'title', 'subTitle', 'tags', 'extra', 'footer'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const { prefixCls, direction, pageHeader } = useConfigInject('page-header', props); const { prefixCls, direction, pageHeader } = useConfigInject('page-header', props);

2
components/pagination/Pagination.tsx
View File

@ -78,7 +78,7 @@ export default defineComponent({
name: 'APagination', name: 'APagination',
inheritAttrs: false, inheritAttrs: false,
props: paginationProps(), props: paginationProps(),
emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'], // emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
setup(props, { slots, attrs }) { setup(props, { slots, attrs }) {
const { prefixCls, configProvider, direction } = useConfigInject('pagination', props); const { prefixCls, configProvider, direction } = useConfigInject('pagination', props);
const selectPrefixCls = computed(() => 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 { computed, onMounted, ref, toRef, defineComponent } from 'vue';
import Tooltip from '../tooltip'; import Tooltip from '../tooltip';
import abstractTooltipProps from '../tooltip/abstractTooltipProps'; import abstractTooltipProps from '../tooltip/abstractTooltipProps';
@ -24,19 +24,25 @@ import ActionButton from '../_util/ActionButton';
export const popconfirmProps = () => ({ export const popconfirmProps = () => ({
...abstractTooltipProps(), ...abstractTooltipProps(),
prefixCls: PropTypes.string, prefixCls: String,
content: PropTypes.any, content: PropTypes.any,
title: PropTypes.any, title: PropTypes.any,
okType: { okType: {
type: String as PropType<LegacyButtonType>, type: String as PropType<LegacyButtonType>,
default: 'primary', default: 'primary',
}, },
disabled: PropTypes.looseBool.def(false), disabled: { type: Boolean, default: false },
okText: PropTypes.any, okText: PropTypes.any,
cancelText: PropTypes.any, cancelText: PropTypes.any,
icon: PropTypes.any, icon: PropTypes.any,
okButtonProps: PropTypes.object, okButtonProps: {
cancelButtonProps: PropTypes.object, 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 }, showCancel: { type: Boolean, default: true },
onConfirm: Function as PropType<(e: MouseEvent) => void>, onConfirm: Function as PropType<(e: MouseEvent) => void>,
onCancel: Function as PropType<(e: MouseEvent) => void>, onCancel: Function as PropType<(e: MouseEvent) => void>,
@ -52,10 +58,9 @@ export interface PopconfirmLocale {
const Popconfirm = defineComponent({ const Popconfirm = defineComponent({
name: 'APopconfirm', name: 'APopconfirm',
props: initDefaultProps(popconfirmProps(), { props: initDefaultProps(popconfirmProps(), {
...tooltipDefaultProps, ...tooltipDefaultProps(),
trigger: 'click', trigger: 'click',
transitionName: 'zoom-big', transitionName: 'zoom-big',
align: () => ({}),
placement: 'top', placement: 'top',
mouseEnterDelay: 0.1, mouseEnterDelay: 0.1,
mouseLeaveDelay: 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({ const Popover = defineComponent({
name: 'APopover', name: 'APopover',
props: initDefaultProps(popoverProps(), { props: initDefaultProps(popoverProps(), {
...tooltipDefaultProps, ...tooltipDefaultProps(),
trigger: 'hover', trigger: 'hover',
transitionName: 'zoom-big', transitionName: 'zoom-big',
placement: 'top', placement: 'top',

1
components/progress/Circle.tsx
View File

@ -22,6 +22,7 @@ function getStrokeColor({
} }
export default defineComponent({ export default defineComponent({
name: 'Circle',
inheritAttrs: false, inheritAttrs: false,
props: progressProps(), props: progressProps(),
setup(props, { slots }) { 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 { presetPrimaryColors } from '@ant-design/colors';
import { computed, defineComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import type { Direction } from '../config-provider'; import type { Direction } from '../config-provider';
import PropTypes from '../_util/vue-types';
import type { StringGradients, ProgressGradient } from './props'; import type { StringGradients, ProgressGradient } from './props';
import { progressProps } from './props'; import { progressProps } from './props';
import { getSuccessPercent, validProgress } from './utils'; import { getSuccessPercent, validProgress } from './utils';
export const lineProps = { export const lineProps = () => ({
...progressProps(), ...progressProps(),
prefixCls: PropTypes.string, prefixCls: String,
direction: { direction: {
type: String as PropType<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({ export default defineComponent({
name: 'Line', name: 'Line',
props: lineProps, props: lineProps(),
setup(props, { slots }) { setup(props, { slots }) {
const backgroundProps = computed(() => { const backgroundProps = computed(() => {
const { strokeColor, direction } = props; const { strokeColor, direction } = props;

14
components/progress/Steps.tsx
View File

@ -1,24 +1,24 @@
import type { ExtractPropTypes, PropType } from 'vue'; import type { ExtractPropTypes, PropType } from 'vue';
import { computed, defineComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import type { VueNode } from '../_util/type'; import type { VueNode } from '../_util/type';
import PropTypes from '../_util/vue-types';
import type { ProgressSize } from './props'; import type { ProgressSize } from './props';
import { progressProps } from './props'; import { progressProps } from './props';
export const stepsProps = { export const stepsProps = () => ({
...progressProps(), ...progressProps(),
steps: PropTypes.number, steps: Number,
size: { size: {
type: String as PropType<ProgressSize>, type: String as PropType<ProgressSize>,
}, },
strokeColor: PropTypes.string, strokeColor: String,
trailColor: PropTypes.string, trailColor: String,
}; });
export type StepsProps = Partial<ExtractPropTypes<typeof stepsProps>>; export type StepsProps = Partial<ExtractPropTypes<typeof stepsProps>>;
export default defineComponent({ export default defineComponent({
props: stepsProps, name: 'Steps',
props: stepsProps(),
setup(props, { slots }) { setup(props, { slots }) {
const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100))); const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100)));
const stepWidth = computed(() => (props.size === 'small' ? 2 : 14)); 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 = () => ({ export const progressProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
type: PropTypes.oneOf(ProgressType), type: PropTypes.oneOf(ProgressType),
percent: PropTypes.number, percent: Number,
format: { type: Function as PropType<(percent?: number, successPercent?: number) => VueNode> }, format: { type: Function as PropType<(percent?: number, successPercent?: number) => VueNode> },
status: PropTypes.oneOf(progressStatuses), status: PropTypes.oneOf(progressStatuses),
showInfo: PropTypes.looseBool, showInfo: { type: Boolean, default: undefined },
strokeWidth: PropTypes.number, strokeWidth: Number,
strokeLinecap: PropTypes.oneOf(tuple('butt', 'round', 'square')), strokeLinecap: String as PropType<'butt' | 'square' | 'round'>,
strokeColor: { strokeColor: {
type: [String, Object] as PropType<string | ProgressGradient>, type: [String, Object] as PropType<string | ProgressGradient>,
default: undefined as string | ProgressGradient,
}, },
trailColor: PropTypes.string, trailColor: String,
width: PropTypes.number, width: Number,
success: { success: {
type: Object as PropType<SuccessProps>, type: Object as PropType<SuccessProps>,
default: (): SuccessProps => ({}), default: (): SuccessProps => ({}),
}, },
gapDegree: PropTypes.number, gapDegree: Number,
gapPosition: PropTypes.oneOf(tuple('top', 'bottom', 'left', 'right')), gapPosition: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
size: PropTypes.oneOf(ProgressSize), size: PropTypes.oneOf(ProgressSize),
steps: PropTypes.number, steps: Number,
/** @deprecated Use `success` instead */ /** @deprecated Use `success` instead */
successPercent: PropTypes.number, successPercent: Number,
title: String, title: String,
}); });

30
components/radio/Group.tsx
View File

@ -5,16 +5,14 @@ import PropTypes from '../_util/vue-types';
import Radio from './Radio'; import Radio from './Radio';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
import type { RadioChangeEvent } from './interface'; import type { RadioChangeEvent, RadioGroupButtonStyle, RadioGroupOptionType } from './interface';
import { useInjectFormItemContext } from '../form/FormItemContext'; import { useInjectFormItemContext } from '../form/FormItemContext';
const RadioGroupSizeTypes = tuple('large', 'default', 'small'); const RadioGroupSizeTypes = tuple('large', 'default', 'small');
export type RadioGroupSize = typeof RadioGroupSizeTypes[number]; export type RadioGroupSize = typeof RadioGroupSizeTypes[number];
const RadioGroupOptionTypes = tuple('default', 'button'); export type RadioGroupOption = RadioGroupOptionType;
export type RadioGroupOption = typeof RadioGroupOptionTypes[number];
export type RadioGroupChildOption = { export type RadioGroupChildOption = {
label?: any; label?: any;
@ -22,26 +20,28 @@ export type RadioGroupChildOption = {
disabled?: boolean; disabled?: boolean;
}; };
export const radioGroupProps = { export const radioGroupProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
value: PropTypes.any, value: PropTypes.any,
size: PropTypes.oneOf(RadioGroupSizeTypes).def('default'), size: PropTypes.oneOf(RadioGroupSizeTypes).def('default'),
options: { options: {
type: Array as PropType<Array<string | RadioGroupChildOption | number>>, type: Array as PropType<Array<string | RadioGroupChildOption | number>>,
}, },
disabled: PropTypes.looseBool, disabled: { type: Boolean, default: undefined },
name: PropTypes.string, name: String,
buttonStyle: PropTypes.string.def('outline'), buttonStyle: { type: String as PropType<RadioGroupButtonStyle>, default: 'outline' },
id: PropTypes.string, id: String,
optionType: PropTypes.oneOf(RadioGroupOptionTypes).def('default'), 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({ export default defineComponent({
name: 'ARadioGroup', name: 'ARadioGroup',
props: radioGroupProps, props: radioGroupProps(),
emits: ['update:value', 'change'], // emits: ['update:value', 'change'],
setup(props, { slots, emit }) { setup(props, { slots, emit }) {
const formItemContext = useInjectFormItemContext(); const formItemContext = useInjectFormItemContext();
const { prefixCls, direction, size } = useConfigInject('radio', props); 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 { defineComponent, inject, ref } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import VcCheckbox from '../vc-checkbox/Checkbox'; import VcCheckbox from '../vc-checkbox/Checkbox';
@ -6,28 +6,32 @@ import classNames from '../_util/classNames';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import type { RadioChangeEvent, RadioGroupContext } from './interface'; import type { RadioChangeEvent, RadioGroupContext } from './interface';
import { useInjectFormItemContext } from '../form/FormItemContext'; import { useInjectFormItemContext } from '../form/FormItemContext';
import omit from '../_util/omit';
import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
export const radioProps = { export const radioProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
checked: PropTypes.looseBool, checked: { type: Boolean, default: undefined },
disabled: PropTypes.looseBool, disabled: { type: Boolean, default: undefined },
isGroup: PropTypes.looseBool, isGroup: { type: Boolean, default: undefined },
value: PropTypes.any, value: PropTypes.any,
name: PropTypes.string, name: String,
id: PropTypes.string, id: String,
autofocus: PropTypes.looseBool, autofocus: { type: Boolean, default: undefined },
onChange: PropTypes.func, onChange: Function as PropType<(event: RadioChangeEvent) => void>,
onFocus: PropTypes.func, onFocus: Function as PropType<FocusEventHandler>,
onBlur: PropTypes.func, onBlur: Function as PropType<FocusEventHandler>,
onClick: PropTypes.func, 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({ export default defineComponent({
name: 'ARadio', name: 'ARadio',
props: radioProps, props: radioProps(),
emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'], // emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'],
setup(props, { emit, expose, slots }) { setup(props, { emit, expose, slots }) {
const formItemContext = useInjectFormItemContext(); const formItemContext = useInjectFormItemContext();
const vcCheckbox = ref<HTMLElement>(); const vcCheckbox = ref<HTMLElement>();
@ -66,7 +70,7 @@ export default defineComponent({
const rProps: RadioProps = { const rProps: RadioProps = {
prefixCls: prefixCls.value, prefixCls: prefixCls.value,
id, id,
...restProps, ...omit(restProps, ['onUpdate:checked', 'onUpdate:value']),
}; };
if (radioGroup) { if (radioGroup) {

4
components/radio/RadioButton.tsx
View File

@ -6,8 +6,8 @@ import type { RadioGroupContext } from './interface';
export default defineComponent({ export default defineComponent({
name: 'ARadioButton', name: 'ARadioButton',
props: radioProps, props: radioProps(),
setup(props: RadioProps, { slots }) { setup(props, { slots }) {
const { prefixCls } = useConfigInject('radio-button', props); const { prefixCls } = useConfigInject('radio-button', props);
const radioGroupContext = inject<RadioGroupContext>('radioGroupContext', undefined); 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-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`] = ` exports[`renders ./components/radio/demo/radioGroup-options.vue correctly 1`] = `
<div> <div class="ant-space ant-space-vertical">
<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-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><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"><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 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>
<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-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 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-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> </div>
`; `;

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

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

3
components/radio/interface.ts
View File

@ -4,6 +4,9 @@ export interface RadioChangeEventTarget extends RadioProps {
checked: boolean; checked: boolean;
} }
export type RadioGroupButtonStyle = 'outline' | 'solid';
export type RadioGroupOptionType = 'default' | 'button';
export interface RadioChangeEvent { export interface RadioChangeEvent {
target: RadioChangeEventTarget; target: RadioChangeEventTarget;
stopPropagation: () => void; 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'; import PropTypes from '../_util/vue-types';
export const starProps = { export const starProps = {
value: PropTypes.number, value: Number,
index: PropTypes.number, index: Number,
prefixCls: PropTypes.string, prefixCls: String,
allowHalf: PropTypes.looseBool, allowHalf: { type: Boolean, default: undefined },
disabled: PropTypes.looseBool, disabled: { type: Boolean, default: undefined },
character: PropTypes.any, character: PropTypes.any,
characterRender: PropTypes.func, characterRender: Function,
focused: PropTypes.looseBool, focused: { type: Boolean, default: undefined },
count: PropTypes.number, count: Number,
onClick: PropTypes.func, onClick: Function,
onHover: PropTypes.func, onHover: Function,
}; };
export type StarProps = Partial<ExtractPropTypes<typeof starProps>>; 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 { watch, defineComponent, ref, reactive, onMounted } from 'vue';
import { initDefaultProps, getPropsSlot, findDOMNode } from '../_util/props-util'; import { initDefaultProps, getPropsSlot, findDOMNode } from '../_util/props-util';
import { withInstall } from '../_util/type'; import { withInstall } from '../_util/type';
@ -13,28 +13,36 @@ import useConfigInject from '../_util/hooks/useConfigInject';
import Star from './Star'; import Star from './Star';
import useRefs from '../_util/hooks/useRefs'; import useRefs from '../_util/hooks/useRefs';
import { useInjectFormItemContext } from '../form/FormItemContext'; import { useInjectFormItemContext } from '../form/FormItemContext';
import type { Direction } from '../config-provider';
import type { FocusEventHandler, KeyboardEventHandler } from '../_util/EventInterface';
export const rateProps = { export const rateProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
count: PropTypes.number, count: Number,
value: PropTypes.number, value: Number,
allowHalf: PropTypes.looseBool, allowHalf: { type: Boolean, default: undefined },
allowClear: PropTypes.looseBool, allowClear: { type: Boolean, default: undefined },
tooltips: PropTypes.arrayOf(PropTypes.string), tooltips: Array as PropType<string[]>,
disabled: PropTypes.looseBool, disabled: { type: Boolean, default: undefined },
character: PropTypes.any, character: PropTypes.any,
autofocus: PropTypes.looseBool, autofocus: { type: Boolean, default: undefined },
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
direction: PropTypes.string, direction: String as PropType<Direction>,
id: PropTypes.string, 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({ const Rate = defineComponent({
name: 'ARate', name: 'ARate',
inheritAttrs: false, inheritAttrs: false,
props: initDefaultProps(rateProps, { props: initDefaultProps(rateProps(), {
value: 0, value: 0,
count: 5, count: 5,
allowHalf: false, allowHalf: false,
@ -42,7 +50,7 @@ const Rate = defineComponent({
tabindex: 0, tabindex: 0,
direction: 'ltr', direction: 'ltr',
}), }),
emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'], // emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'],
setup(props, { slots, attrs, emit, expose }) { setup(props, { slots, attrs, emit, expose }) {
const { prefixCls, direction } = useConfigInject('rate', props); const { prefixCls, direction } = useConfigInject('rate', props);
const formItemContext = useInjectFormItemContext(); 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 { defineComponent, computed } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { tuple } from '../_util/type';
import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled'; import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'; import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled'; import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
@ -25,21 +24,22 @@ export const ExceptionMap = {
'403': unauthorized, '403': unauthorized,
}; };
export type ExceptionStatusType = 403 | 404 | 500 | '403' | '404' | '500';
export type ResultStatusType = ExceptionStatusType | keyof typeof IconMap;
// ExceptionImageMap keys // ExceptionImageMap keys
const ExceptionStatus = Object.keys(ExceptionMap); const ExceptionStatus = Object.keys(ExceptionMap);
export const resultProps = { export const resultProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
icon: PropTypes.any, icon: PropTypes.any,
status: PropTypes.oneOf(tuple('success', 'error', 'info', 'warning', '404', '403', '500')).def( status: { type: [Number, String] as PropType<ResultStatusType>, default: 'info' },
'info',
),
title: PropTypes.any, title: PropTypes.any,
subTitle: PropTypes.any, subTitle: PropTypes.any,
extra: 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 }) => { const renderIcon = (prefixCls: string, { status, icon }) => {
if (ExceptionStatus.includes(`${status}`)) { if (ExceptionStatus.includes(`${status}`)) {
@ -60,7 +60,7 @@ const renderExtra = (prefixCls: string, extra: VNodeTypes) =>
const Result = defineComponent({ const Result = defineComponent({
name: 'AResult', name: 'AResult',
props: resultProps, props: resultProps(),
slots: ['title', 'subTitle', 'icon', 'extra'], slots: ['title', 'subTitle', 'icon', 'extra'],
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('result', props); 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 SliderTooltip from './SliderTooltip';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import { useInjectFormItemContext } from '../form/FormItemContext'; import { useInjectFormItemContext } from '../form/FormItemContext';
import type { FocusEventHandler } from '../_util/EventInterface';
export type SliderValue = number | [number, number]; export type SliderValue = number | [number, number];
@ -64,10 +65,13 @@ export const sliderProps = () => ({
type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>, type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
}, },
autofocus: { type: Boolean, default: undefined }, 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> }, handleStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
trackStyle: { 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>>>; export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>;
@ -77,7 +81,7 @@ const Slider = defineComponent({
name: 'ASlider', name: 'ASlider',
inheritAttrs: false, inheritAttrs: false,
props: sliderProps(), props: sliderProps(),
emits: ['update:value', 'change', 'afterChange', 'blur'], // emits: ['update:value', 'change', 'afterChange', 'blur'],
slots: ['mark'], slots: ['mark'],
setup(props, { attrs, slots, emit, expose }) { setup(props, { attrs, slots, emit, expose }) {
const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } = const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } =
@ -173,7 +177,7 @@ const Slider = defineComponent({
step={restProps.step!} step={restProps.step!}
draggableTrack={draggableTrack} draggableTrack={draggableTrack}
class={cls} class={cls}
ref={ref} ref={sliderRef}
handle={(info: HandleGeneratorInfo) => handle={(info: HandleGeneratorInfo) =>
handleWithTooltip({ handleWithTooltip({
tooltipPrefixCls, tooltipPrefixCls,
@ -183,6 +187,7 @@ const Slider = defineComponent({
} }
prefixCls={prefixCls.value} prefixCls={prefixCls.value}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur}
v-slots={{ mark: slots.mark }} v-slots={{ mark: slots.mark }}
/> />
); );
@ -193,7 +198,7 @@ const Slider = defineComponent({
id={id} id={id}
step={restProps.step!} step={restProps.step!}
class={cls} class={cls}
ref={ref} ref={sliderRef}
handle={(info: HandleGeneratorInfo) => handle={(info: HandleGeneratorInfo) =>
handleWithTooltip({ handleWithTooltip({
tooltipPrefixCls, tooltipPrefixCls,

12
components/space/index.tsx
View File

@ -14,17 +14,17 @@ const spaceSize = {
middle: 16, middle: 16,
large: 24, large: 24,
}; };
export const spaceProps = { export const spaceProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
size: { size: {
type: [String, Number, Array] as PropType<SpaceSize | [SpaceSize, SpaceSize]>, type: [String, Number, Array] as PropType<SpaceSize | [SpaceSize, SpaceSize]>,
}, },
direction: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'), direction: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
align: PropTypes.oneOf(tuple('start', 'end', 'center', 'baseline')), 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) { function getNumberSize(size: SpaceSize) {
return typeof size === 'string' ? spaceSize[size] : size || 0; return typeof size === 'string' ? spaceSize[size] : size || 0;
@ -32,7 +32,7 @@ function getNumberSize(size: SpaceSize) {
const Space = defineComponent({ const Space = defineComponent({
name: 'ASpace', name: 'ASpace',
props: spaceProps, props: spaceProps(),
slots: ['split'], slots: ['split'],
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls, space, direction: directionConfig } = useConfigInject('space', props); 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 { inject, cloneVNode, isVNode, defineComponent, nextTick } from 'vue';
import debounce from 'lodash-es/debounce'; import debounce from 'lodash-es/debounce';
import { tuple } from '../_util/type';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin';
import { getComponent, getSlot } from '../_util/props-util'; import { getComponent, getSlot } from '../_util/props-util';
import initDefaultProps from '../_util/props-util/initDefaultProps'; import initDefaultProps from '../_util/props-util/initDefaultProps';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
export const SpinSize = PropTypes.oneOf(tuple('small', 'default', 'large')); export type SpinSize = 'small' | 'default' | 'large';
export const spinProps = () => ({ export const spinProps = () => ({
prefixCls: PropTypes.string, prefixCls: String,
spinning: PropTypes.looseBool, spinning: { type: Boolean, default: undefined },
size: SpinSize, size: String as PropType<SpinSize>,
wrapperClassName: PropTypes.string, wrapperClassName: String,
tip: PropTypes.any, tip: PropTypes.any,
delay: PropTypes.number, delay: Number,
indicator: PropTypes.any, indicator: PropTypes.any,
}); });
@ -36,7 +33,6 @@ export function setDefaultIndicator(Content: any) {
export default defineComponent({ export default defineComponent({
name: 'ASpin', name: 'ASpin',
mixins: [BaseMixin],
inheritAttrs: false, inheritAttrs: false,
props: initDefaultProps(spinProps(), { props: initDefaultProps(spinProps(), {
size: 'default', size: 'default',
@ -83,7 +79,7 @@ export default defineComponent({
updateSpinning() { updateSpinning() {
const { spinning, sSpinning } = this; const { spinning, sSpinning } = this;
if (sSpinning !== spinning) { if (sSpinning !== spinning) {
this.setState({ sSpinning: spinning }); this.sSpinning = spinning;
} }
}, },
cancelExistingSpin() { 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 { defineComponent, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue';
import omit from '../_util/omit';
import initDefaultProps from '../_util/props-util/initDefaultProps'; import initDefaultProps from '../_util/props-util/initDefaultProps';
import Statistic, { statisticProps } from './Statistic'; import Statistic, { statisticProps } from './Statistic';
import type { countdownValueType, FormatConfig } from './utils'; import type { countdownValueType, FormatConfig } from './utils';
@ -9,13 +11,23 @@ const REFRESH_INTERVAL = 1000 / 30;
function getTime(value?: countdownValueType) { function getTime(value?: countdownValueType) {
return new Date(value as any).getTime(); 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({ export default defineComponent({
name: 'AStatisticCountdown', name: 'AStatisticCountdown',
props: initDefaultProps(statisticProps, { props: initDefaultProps(countdownProps(), {
format: 'HH:mm:ss', format: 'HH:mm:ss',
}), }),
emits: ['finish', 'change'], // emits: ['finish', 'change'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const countdownId = ref<any>(); const countdownId = ref<any>();
const statistic = ref(); const statistic = ref();
@ -80,7 +92,7 @@ export default defineComponent({
<Statistic <Statistic
ref={statistic} ref={statistic}
{...{ {...{
...props, ...omit(props, ['onFinish', 'onChange']),
valueRender: valueRenderHtml, valueRender: valueRenderHtml,
formatter: formatCountdown, formatter: formatCountdown,
}} }}

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