style: update prettier & format code

.eslintrc

@@ -11,7 +11,7 @@
     "parser": "babel-eslint"
   },
   "extends": ["plugin:vue/vue3-recommended", "prettier"],
-  "plugins": ["markdown"],
+  "plugins": ["markdown", "jest"],
   "overrides": [
     {
       "files": ["**/demo/*.md"],

.prettierrc

@@ -3,6 +3,7 @@
   "trailingComma": "all",
   "printWidth": 100,
   "proseWrap": "never",
+  "arrowParens": "avoid",
   "overrides": [
     {
       "files": ".prettierrc",

antd-tools/utils/getChangelog.js

@@ -1,10 +1,7 @@
 const fs = require('fs');
 
 module.exports = function getChangelog(file, version) {
-  const lines = fs
+  const lines = fs.readFileSync(file).toString().split('\n');
-    .readFileSync(file)
-    .toString()
-    .split('\n');
   const changeLog = [];
   const startPattern = new RegExp(`^## ${version}`);
   const stopPattern = /^## /; // 前一个版本

antd-tools/utils/getRunCmdEnv.js

@@ -11,13 +11,7 @@ module.exports = function getRunCmdEnv() {
   const nodeModulesBinDir = path.join(__dirname, '../../node_modules/.bin');
 
   Object.entries(env)
-    .filter(
+    .filter(v => v.slice(0, 1).pop().toLowerCase() === 'path')
-      v =>
-        v
-          .slice(0, 1)
-          .pop()
-          .toLowerCase() === 'path',
-    )
     .forEach(v => {
       const key = v.slice(0, 1).pop();
       env[key] = env[key] ? `${nodeModulesBinDir}:${env[key]}` : nodeModulesBinDir;

components/_util/hooks/useSize.ts

@@ -18,7 +18,7 @@ const useInjectSize = <T = SizeType>(props?: Record<any, any>): ComputedRef<T> =
     ? computed(() => props.size)
     : inject(
         sizeProvider,
-        computed(() => ('default' as unknown) as T),
+        computed(() => 'default' as unknown as T),
       );
   return size;
 };

components/anchor/Anchor.tsx

@@ -175,9 +175,9 @@ export default defineComponent({
         `${prefixCls.value}-link-title-active`,
       )[0];
       if (linkNode) {
-        (inkNodeRef.value as HTMLElement).style.top = `${linkNode.offsetTop +
+        (inkNodeRef.value as HTMLElement).style.top = `${
-          linkNode.clientHeight / 2 -
+          linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5
-          4.5}px`;
+        }px`;
       }
     };
 

components/badge/Badge.tsx

@@ -44,9 +44,11 @@ export default defineComponent({
 
     // ================================ Misc ================================
     const numberedDisplayCount = computed(() => {
-      return ((props.count as number) > (props.overflowCount as number)
+      return (
+        (props.count as number) > (props.overflowCount as number)
           ? `${props.overflowCount}+`
-        : props.count) as string | number | null;
+          : props.count
+      ) as string | number | null;
     });
 
     const hasStatus = computed(

components/badge/ScrollNumber.tsx

@@ -35,7 +35,7 @@ export default defineComponent({
         count,
         title,
         show,
-        component: Tag = ('sup' as unknown) as DefineComponent,
+        component: Tag = 'sup' as unknown as DefineComponent,
         class: className,
         style,
         ...restProps

components/badge/index.ts

@@ -1,7 +1,7 @@
 import { App, Plugin } from 'vue';
 import Badge from './Badge';
 import Ribbon from './Ribbon';
-export type { BadgeProps } from './Badge'
+export type { BadgeProps } from './Badge';
 
 Badge.install = function (app: App) {
   app.component(Badge.name, Badge);
@@ -9,7 +9,7 @@ Badge.install = function(app: App) {
   return app;
 };
 
-export {Ribbon as BadgeRibbon}
+export { Ribbon as BadgeRibbon };
 
 export default Badge as typeof Badge &
   Plugin & {

components/button/index.ts

@@ -1,7 +1,7 @@
 import { App, Plugin } from 'vue';
 import Button from './button';
 import ButtonGroup from './button-group';
-export type {ButtonProps} from './button'
+export type { ButtonProps } from './button';
 
 Button.Group = ButtonGroup;
 
@@ -11,7 +11,7 @@ Button.install = function(app: App) {
   app.component(ButtonGroup.name, ButtonGroup);
   return app;
 };
-export {ButtonGroup}
+export { ButtonGroup };
 export default Button as typeof Button &
   Plugin & {
     readonly Group: typeof ButtonGroup;

components/card/index.ts

@@ -3,7 +3,7 @@ import Card from './Card';
 import Meta from './Meta';
 import Grid from './Grid';
 
-export type {CardProps} from './Card'
+export type { CardProps } from './Card';
 
 Card.Meta = Meta;
 Card.Grid = Grid;
@@ -16,7 +16,7 @@ Card.install = function(app: App) {
   return app;
 };
 
-export {Meta as CardMeta, Grid as CardGrid}
+export { Meta as CardMeta, Grid as CardGrid };
 
 export default Card as typeof Card &
   Plugin & {

components/cascader/__tests__/index.test.js

@@ -110,9 +110,7 @@ describe('Cascader', () => {
     });
 
     await asyncExpect(() => {
-      $$('.ant-cascader-menu')[0]
+      $$('.ant-cascader-menu')[0].querySelectorAll('.ant-cascader-menu-item')[0].click();
-        .querySelectorAll('.ant-cascader-menu-item')[0]
-        .click();
     });
 
     await asyncExpect(() => {
@@ -120,9 +118,7 @@ describe('Cascader', () => {
     });
 
     await asyncExpect(() => {
-      $$('.ant-cascader-menu')[1]
+      $$('.ant-cascader-menu')[1].querySelectorAll('.ant-cascader-menu-item')[0].click();
-        .querySelectorAll('.ant-cascader-menu-item')[0]
-        .click();
     });
 
     await asyncExpect(() => {
@@ -130,9 +126,7 @@ describe('Cascader', () => {
     });
 
     await asyncExpect(() => {
-      $$('.ant-cascader-menu')[2]
+      $$('.ant-cascader-menu')[2].querySelectorAll('.ant-cascader-menu-item')[0].click();
-        .querySelectorAll('.ant-cascader-menu-item')[0]
-        .click();
     });
 
     await asyncExpect(() => {

components/col/index.ts

@@ -1,4 +1,4 @@
 import { Col } from '../grid';
 import { withInstall } from '../_util/type';
-export type {ColProps} from '../grid'
+export type { ColProps } from '../grid';
 export default withInstall(Col);

components/collapse/index.ts

@@ -1,9 +1,8 @@
 import { App, Plugin } from 'vue';
 import Collapse from './Collapse';
 import CollapsePanel from './CollapsePanel';
-export type {CollapseProps} from './Collapse'
+export type { CollapseProps } from './Collapse';
-export type {CollapsePanelProps} from './CollapsePanel'
+export type { CollapsePanelProps } from './CollapsePanel';
-
 
 Collapse.Panel = CollapsePanel;
 
@@ -14,7 +13,7 @@ Collapse.install = function(app: App) {
   return app;
 };
 
-export {CollapsePanel}
+export { CollapsePanel };
 export default Collapse as typeof Collapse &
   Plugin & {
     readonly Panel: typeof CollapsePanel;

components/components.ts

@@ -1,4 +1,3 @@
-
 export type { AffixProps } from './affix';
 export { default as Affix } from './affix';
 
@@ -6,7 +5,7 @@ export type { AnchorProps, AnchorLinkProps } from './anchor';
 export { default as Anchor, AnchorLink } from './anchor';
 
 export type { AutoCompleteProps } from './auto-complete';
-export {default as AutoComplete, AutoCompleteOptGroup, AutoCompleteOption } from './auto-complete'
+export { default as AutoComplete, AutoCompleteOptGroup, AutoCompleteOption } from './auto-complete';
 
 export type { AlertProps } from './alert';
 export { default as Alert } from './alert';
@@ -131,7 +130,13 @@ export type { SelectProps } from './select';
 export { default as Select, SelectOptGroup, SelectOption } from './select';
 
 export type { SkeletonProps } from './skeleton';
-export { default as Skeleton, SkeletonButton, SkeletonAvatar, SkeletonInput, SkeletonImage } from './skeleton';
+export {
+  default as Skeleton,
+  SkeletonButton,
+  SkeletonAvatar,
+  SkeletonInput,
+  SkeletonImage,
+} from './skeleton';
 
 export { default as Slider } from './slider';
 
@@ -171,7 +176,13 @@ export type { TooltipProps } from './tooltip';
 export { default as Tooltip } from './tooltip';
 
 export type { TypographyProps } from './typography';
-export { default as Typography, TypographyLink, TypographyParagraph, TypographyText, TypographyTitle } from './typography';
+export {
+  default as Typography,
+  TypographyLink,
+  TypographyParagraph,
+  TypographyText,
+  TypographyTitle,
+} from './typography';
 
 export type { UploadProps } from './upload';
 

components/date-picker/__tests__/RangePicker.test.js

@@ -195,11 +195,9 @@ describe('RangePicker', () => {
       $$('.ant-calendar-picker-input')[0].click();
     });
     await asyncExpect(() => {
-      expect(
+      expect($$('.ant-calendar-cell')[23].getAttribute('class').split(' ')).toContain(
-        $$('.ant-calendar-cell')[23]
+        'ant-calendar-in-range-cell',
-          .getAttribute('class')
+      );
-          .split(' '),
-      ).toContain('ant-calendar-in-range-cell');
     });
   });
 

components/date-picker/__tests__/showTime.test.js

@@ -124,30 +124,22 @@ describe('RangePicker with showTime', () => {
     );
 
     await asyncExpect(() => {
-      expect(
+      expect($$('.ant-calendar-time-picker-btn')[0].getAttribute('class').split(' ')).toContain(
-        $$('.ant-calendar-time-picker-btn')[0]
+        'ant-calendar-time-picker-btn-disabled',
-          .getAttribute('class')
+      );
-          .split(' '),
+      expect($$('.ant-calendar-ok-btn')[0].getAttribute('class').split(' ')).toContain(
-      ).toContain('ant-calendar-time-picker-btn-disabled');
+        'ant-calendar-ok-btn-disabled',
-      expect(
+      );
-        $$('.ant-calendar-ok-btn')[0]
-          .getAttribute('class')
-          .split(' '),
-      ).toContain('ant-calendar-ok-btn-disabled');
     });
     $$('.ant-calendar-date')[10].click();
     $$('.ant-calendar-date')[11].click();
     await asyncExpect(() => {
-      expect(
+      expect($$('.ant-calendar-time-picker-btn')[0].getAttribute('class').split(' ')).not.toContain(
-        $$('.ant-calendar-time-picker-btn')[0]
+        'ant-calendar-time-picker-btn-disabled',
-          .getAttribute('class')
+      );
-          .split(' '),
+      expect($$('.ant-calendar-ok-btn')[0].getAttribute('class').split(' ')).not.toContain(
-      ).not.toContain('ant-calendar-time-picker-btn-disabled');
+        'ant-calendar-ok-btn-disabled',
-      expect(
+      );
-        $$('.ant-calendar-ok-btn')[0]
-          .getAttribute('class')
-          .split(' '),
-      ).not.toContain('ant-calendar-ok-btn-disabled');
     });
     expect(onChangeFn).toHaveBeenCalled();
     expect(onOpenChangeFn).not.toHaveBeenCalled();

components/date-picker/index.ts

@@ -13,33 +13,33 @@ import {
   WeekPickerPropsTypes,
 } from './interface';
 
-const WrappedRangePicker = (wrapPicker(
+const WrappedRangePicker = wrapPicker(
   RangePicker as any,
   RangePickerProps,
   'date',
-) as unknown) as DefineComponent<RangePickerPropsTypes>;
+) as unknown as DefineComponent<RangePickerPropsTypes>;
 
-const WrappedWeekPicker = (wrapPicker(
+const WrappedWeekPicker = wrapPicker(
   WeekPicker as any,
   WeekPickerProps,
   'week',
-) as unknown) as DefineComponent<WeekPickerPropsTypes>;
+) as unknown as DefineComponent<WeekPickerPropsTypes>;
 
-const DatePicker = (wrapPicker(
+const DatePicker = wrapPicker(
   createPicker(VcCalendar as any, DatePickerProps, 'ADatePicker'),
   DatePickerProps,
   'date',
-) as unknown) as DefineComponent<DatePickerPropsTypes> & {
+) as unknown as DefineComponent<DatePickerPropsTypes> & {
   readonly RangePicker: typeof WrappedRangePicker;
   readonly MonthPicker: typeof MonthPicker;
   readonly WeekPicker: typeof WrappedWeekPicker;
 };
 
-const MonthPicker = (wrapPicker(
+const MonthPicker = wrapPicker(
   createPicker(MonthCalendar as any, MonthPickerProps, 'AMonthPicker'),
   MonthPickerProps,
   'month',
-) as unknown) as DefineComponent<MonthPickerPropsTypes>;
+) as unknown as DefineComponent<MonthPickerPropsTypes>;
 
 Object.assign(DatePicker, {
   RangePicker: WrappedRangePicker,

components/date-picker/interface.tsx

@@ -56,9 +56,7 @@ export interface DatePickerPropsTypes extends PickerProps, SinglePickerProps {
   showTime?: Record<string, any> | boolean;
   showToday?: boolean;
   open?: boolean;
-  disabledTime?: (
+  disabledTime?: (current?: moment.Moment | null) => {
-    current?: moment.Moment | null,
-  ) => {
     disabledHours?: () => number[];
     disabledMinutes?: () => number[];
     disabledSeconds?: () => number[];

components/descriptions/index.tsx

@@ -154,9 +154,8 @@ export interface DescriptionsContextProp {
   contentStyle?: Ref<CSSProperties>;
 }
 
-export const descriptionsContext: InjectionKey<DescriptionsContextProp> = Symbol(
+export const descriptionsContext: InjectionKey<DescriptionsContextProp> =
-  'descriptionsContext',
+  Symbol('descriptionsContext');
-);
 
 const Descriptions = defineComponent({
   name: 'ADescriptions',

components/dropdown/index.ts

@@ -14,7 +14,7 @@ Dropdown.install = function(app: App) {
   return app;
 };
 
-export {DropdownButton}
+export { DropdownButton };
 
 export default Dropdown as typeof Dropdown &
   Plugin & {

components/form/utils/validateUtil.ts

@@ -211,9 +211,8 @@ export function validateRules(
       validateRule(name, value, rule, options, messageVariables),
     );
 
-    summaryPromise = (validateFirst
+    summaryPromise = (
-      ? finishOnFirstFailed(rulePromises)
+      validateFirst ? finishOnFirstFailed(rulePromises) : finishOnAllFailed(rulePromises)
-      : finishOnAllFailed(rulePromises)
     ).then((errors: string[]): string[] | Promise<string[]> => {
       if (!errors.length) {
         return [];

components/input-number/index.tsx

@@ -64,7 +64,12 @@ const InputNumber = defineComponent({
   },
 
   render() {
-    const { prefixCls: customizePrefixCls, size, class: className, ...others } = {
+    const {
+      prefixCls: customizePrefixCls,
+      size,
+      class: className,
+      ...others
+    } = {
       ...getOptionProps(this),
       ...this.$attrs,
     } as any;

components/locale-provider/__tests__/index.test.js

@@ -221,7 +221,8 @@ describe('Locale Provider', () => {
         { sync: false, attachTo: 'body' },
       );
       await sleep();
-      const currentConfirmNode = document.querySelectorAll('.ant-modal-confirm')[
+      const currentConfirmNode =
+        document.querySelectorAll('.ant-modal-confirm')[
           document.querySelectorAll('.ant-modal-confirm').length - 1
         ];
       let cancelButtonText = currentConfirmNode.querySelectorAll(

components/modal/Modal.tsx

@@ -133,9 +133,7 @@ export interface ModalFuncProps {
 
 type getContainerFunc = () => HTMLElement;
 
-export type ModalFunc = (
+export type ModalFunc = (props: ModalFuncProps) => {
-  props: ModalFuncProps,
-) => {
   destroy: () => void;
   update: (newConfig: ModalFuncProps) => void;
 };

components/progress/line.tsx

@@ -51,15 +51,8 @@ export const handleGradient = strokeColor => {
 };
 
 const Line = (_, { attrs, slots }) => {
-  const {
+  const { prefixCls, percent, successPercent, strokeWidth, size, strokeColor, strokeLinecap } =
-    prefixCls,
+    attrs;
-    percent,
-    successPercent,
-    strokeWidth,
-    size,
-    strokeColor,
-    strokeLinecap,
-  } = attrs;
   let backgroundProps;
   if (strokeColor && typeof strokeColor !== 'string') {
     backgroundProps = handleGradient(strokeColor);

components/row/index.ts

@@ -1,6 +1,6 @@
 import { Row } from '../grid';
 import { withInstall } from '../_util/type';
 
-export type {RowProps} from '../grid'
+export type { RowProps } from '../grid';
 
 export default withInstall(Row);

components/space/index.tsx

@@ -50,9 +50,12 @@ const Space = defineComponent({
     watch(
       size,
       () => {
-        [horizontalSize.value, verticalSize.value] = ((Array.isArray(size.value)
+        [horizontalSize.value, verticalSize.value] = (
-          ? size.value
+          (Array.isArray(size.value) ? size.value : [size.value, size.value]) as [
-          : [size.value, size.value]) as [SpaceSize, SpaceSize]).map(item => getNumberSize(item));
+            SpaceSize,
+            SpaceSize,
+          ]
+        ).map(item => getNumberSize(item));
       },
       { immediate: true },
     );

components/spin/__tests__/delay.test.js

@@ -13,12 +13,7 @@ describe('delay spinning', () => {
     };
     const wrapper = mount(Spin, props);
     await asyncExpect(() => {
-      expect(
+      expect(wrapper.find('.ant-spin').classes().includes('ant-spin-spinning')).toEqual(false);
-        wrapper
-          .find('.ant-spin')
-          .classes()
-          .includes('ant-spin-spinning'),
-      ).toEqual(false);
     });
   });
 
@@ -32,23 +27,13 @@ describe('delay spinning', () => {
     };
     const wrapper = mount(Spin, props);
 
-    expect(
+    expect(wrapper.findAll('.ant-spin')[0].classes().includes('ant-spin-spinning')).toEqual(false);
-      wrapper
-        .findAll('.ant-spin')[0]
-        .classes()
-        .includes('ant-spin-spinning'),
-    ).toEqual(false);
 
     // use await not jest.runAllTimers()
     // because of https://github.com/facebook/jest/issues/3465
     await new Promise(resolve => setTimeout(resolve, 500));
 
-    expect(
+    expect(wrapper.findAll('.ant-spin')[0].classes().includes('ant-spin-spinning')).toEqual(true);
-      wrapper
-        .findAll('.ant-spin')[0]
-        .classes()
-        .includes('ant-spin-spinning'),
-    ).toEqual(true);
   });
 
   it('should cancel debounce function when unmount', async () => {

components/statistic/__tests__/index.test.js

@@ -65,12 +65,7 @@ describe('Statistic', () => {
 
   describe('Countdown', () => {
     it('render correctly', () => {
-      const now = moment()
+      const now = moment().add(2, 'd').add(11, 'h').add(28, 'm').add(9, 's').add(3, 'ms');
-        .add(2, 'd')
-        .add(11, 'h')
-        .add(28, 'm')
-        .add(9, 's')
-        .add(3, 'ms');
 
       [
         ['H:m:s', '59:28:9'],

components/statistic/index.ts

@@ -2,7 +2,7 @@ import { App, Plugin } from 'vue';
 import Statistic from './Statistic';
 import Countdown from './Countdown';
 
-export type {StatisticProps} from './Statistic'
+export type { StatisticProps } from './Statistic';
 
 Statistic.Countdown = Countdown;
 /* istanbul ignore next */
@@ -12,7 +12,7 @@ Statistic.install = function(app: App) {
   return app;
 };
 
-export const StatisticCountdown = Statistic.Countdown
+export const StatisticCountdown = Statistic.Countdown;
 
 export default Statistic as typeof Statistic &
   Plugin & {

components/table/Table.tsx

@@ -1216,10 +1216,8 @@ export default defineComponent({
       transformCellText: customizeTransformCellText,
     } = this;
     const data = this.getCurrentPageData();
-    const {
+    const { getPopupContainer: getContextPopupContainer, transformCellText: tct } =
-      getPopupContainer: getContextPopupContainer,
+      this.configProvider;
-      transformCellText: tct,
-    } = this.configProvider;
     const getPopupContainer = this.getPopupContainer || getContextPopupContainer;
     const transformCellText = customizeTransformCellText || tct;
     let loading = this.loading;

components/table/__tests__/Table.rowSelection.test.js

@@ -310,16 +310,10 @@ describe('Table.rowSelection', () => {
     );
     expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(4);
 
-    dropdownWrapper
+    dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(2).trigger('click');
-      .findAll('.ant-dropdown-menu-item > div')
-      .at(2)
-      .trigger('click');
     expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3]);
 
-    dropdownWrapper
+    dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(3).trigger('click');
-      .findAll('.ant-dropdown-menu-item > div')
-      .at(3)
-      .trigger('click');
     expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3]);
   });
 

components/timeline/index.tsx

@@ -13,7 +13,7 @@ Timeline.install = function(app: App) {
   app.component(TimelineItem.name, TimelineItem);
   return app;
 };
-export {TimelineItem}
+export { TimelineItem };
 export default Timeline as typeof Timeline &
   Plugin & {
     readonly Item: typeof TimelineItem;

components/typography/Base.tsx

@@ -123,8 +123,7 @@ const Base = defineComponent<InternalBlockProps>({
 
     const contentRef = ref();
     const editIcon = ref();
-    const ellipsis = computed(
+    const ellipsis = computed((): EllipsisConfig => {
-      (): EllipsisConfig => {
       const ellipsis = props.ellipsis;
       if (!ellipsis) return {};
 
@@ -133,8 +132,7 @@ const Base = defineComponent<InternalBlockProps>({
         expandable: false,
         ...(typeof ellipsis === 'object' ? ellipsis : null),
       };
-      },
+    });
-    );
     onMounted(() => {
       state.clientRendered = true;
     });
@@ -294,7 +292,11 @@ const Base = defineComponent<InternalBlockProps>({
       // Do not measure if css already support ellipsis
       if (canUseCSSEllipsis.value) return;
 
-      const { content, text, ellipsis: ell } = measure(
+      const {
+        content,
+        text,
+        ellipsis: ell,
+      } = measure(
         contentRef.value?.$el,
         { rows, suffix },
         props.content,
@@ -451,7 +453,14 @@ const Base = defineComponent<InternalBlockProps>({
         <LocaleReceiver
           componentName="Text"
           children={(locale: Locale) => {
-            const { type, disabled, content, class: className, style, ...restProps } = {
+            const {
+              type,
+              disabled,
+              content,
+              class: className,
+              style,
+              ...restProps
+            } = {
               ...props,
               ...attrs,
             };

components/typography/__tests__/index.test.js

@@ -20,8 +20,10 @@ describe('Typography', () => {
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
   // Mock offsetHeight
-  const originOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight')
+  const originOffsetHeight = Object.getOwnPropertyDescriptor(
-    .get;
+    HTMLElement.prototype,
+    'offsetHeight',
+  ).get;
   Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
     get() {
       let html = this.innerHTML;

components/typography/index.tsx

@@ -6,14 +6,13 @@ import Text from './Text';
 import Title from './Title';
 import Typography from './Typography';
 
-export type {TypographyProps} from './Typography'
+export type { TypographyProps } from './Typography';
 
-
+Typography.Text = Text;
-Typography.Text = Text
+Typography.Title = Title;
-Typography.Title = Title
+Typography.Paragraph = Paragraph;
-Typography.Paragraph = Paragraph
+Typography.Link = Link;
-Typography.Link = Link
+Typography.Base = Base;
-Typography.Base = Base
 
 Typography.install = function (app: App) {
   app.component(Typography.name, Typography);
@@ -29,7 +28,7 @@ export {
   Title as TypographyTitle,
   Paragraph as TypographyParagraph,
   Link as TypographyLink,
-}
+};
 
 export default Typography as typeof Typography &
   Plugin & {

components/upload/__tests__/uploadlist.test.js

@@ -93,10 +93,7 @@ describe('Upload List', () => {
     const wrapper = mount(Upload, props);
     setTimeout(async () => {
       expect(wrapper.findAll('.ant-upload-list-item').length).toBe(2);
-      wrapper
+      wrapper.findAll('.ant-upload-list-item')[0].find('.anticon-delete').trigger('click');
-        .findAll('.ant-upload-list-item')[0]
-        .find('.anticon-delete')
-        .trigger('click');
       await delay(400);
       // wrapper.update();
       expect(wrapper.findAll('.ant-upload-list-item').length).toBe(1);

components/vc-calendar/src/date/DateTBody.jsx

@@ -178,12 +178,7 @@ const DateTBody = {
           cls += ` ${nextMonthDayClass}`;
         }
 
-        if (
+        if (current.clone().endOf('month').date() === current.date()) {
-          current
-            .clone()
-            .endOf('month')
-            .date() === current.date()
-        ) {
           cls += ` ${lastDayOfMonthClass}`;
         }
 

components/vc-calendar/src/month/MonthPanel.jsx

@@ -59,15 +59,8 @@ const MonthPanel = {
   },
 
   render() {
-    const {
+    const { sValue, cellRender, contentRender, locale, rootPrefixCls, disabledDate, renderFooter } =
-      sValue,
+      this;
-      cellRender,
-      contentRender,
-      locale,
-      rootPrefixCls,
-      disabledDate,
-      renderFooter,
-    } = this;
     const year = sValue.year();
     const prefixCls = `${rootPrefixCls}-month-panel`;
 

components/vc-checkbox/src/Checkbox.jsx

@@ -100,18 +100,8 @@ export default defineComponent({
   },
 
   render() {
-    const {
+    const { prefixCls, name, id, type, disabled, readonly, tabindex, autofocus, value, ...others } =
-      prefixCls,
+      getOptionProps(this);
-      name,
-      id,
-      type,
-      disabled,
-      readonly,
-      tabindex,
-      autofocus,
-      value,
-      ...others
-    } = getOptionProps(this);
     const { class: className, onFocus, onBlur } = this.$attrs;
     const globalProps = Object.keys({ ...others, ...this.$attrs }).reduce((prev, key) => {
       if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {

components/vc-image/src/Image.tsx

@@ -190,15 +190,8 @@ const ImageInternal = defineComponent({
       return l;
     };
     return () => {
-      const {
+      const { prefixCls, wrapperClassName, fallback, src, preview, placeholder, wrapperStyle } =
-        prefixCls,
+        props;
-        wrapperClassName,
-        fallback,
-        src,
-        preview,
-        placeholder,
-        wrapperStyle,
-      } = props;
       const {
         width,
         height,

components/vc-overflow/context.ts

@@ -26,9 +26,9 @@ export interface OverflowContextProviderValueType {
   className?: string;
 }
 
-const OverflowContextProviderKey: InjectionKey<ComputedRef<OverflowContextProviderValueType | null>> = Symbol(
+const OverflowContextProviderKey: InjectionKey<
-  'OverflowContextProviderKey',
+  ComputedRef<OverflowContextProviderValueType | null>
-);
+> = Symbol('OverflowContextProviderKey');
 
 export const OverflowContextProvider = defineComponent({
   name: 'OverflowContextProvider',
@@ -45,7 +45,8 @@ export const OverflowContextProvider = defineComponent({
   },
 });
 
-export const useInjectOverflowContext = (): ComputedRef<OverflowContextProviderValueType | null> => {
+export const useInjectOverflowContext =
+  (): ComputedRef<OverflowContextProviderValueType | null> => {
     return inject(
       OverflowContextProviderKey,
       computed(() => null),

components/vc-select/Select.tsx

@@ -63,9 +63,8 @@ const RefSelect = generateSelector<SelectOptionsType>({
   fillOptionsWithMissingValue,
 });
 
-export type ExportedSelectProps<
+export type ExportedSelectProps<ValueType extends DefaultValueType = DefaultValueType> =
-  ValueType extends DefaultValueType = DefaultValueType
+  SelectProps<SelectOptionsType, ValueType>;
-> = SelectProps<SelectOptionsType, ValueType>;
 
 const Select = defineComponent<Omit<ExportedSelectProps, 'children'>>({
   setup(props, { attrs, expose, slots }) {

components/vc-select/Selector/MultipleSelector.tsx

@@ -56,8 +56,8 @@ const props = {
 
   maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   maxTagTextLength: PropTypes.number,
-  maxTagPlaceholder: PropTypes.any.def(() => (omittedValues: LabelValueType[]) =>
+  maxTagPlaceholder: PropTypes.any.def(
-    `+ ${omittedValues.length} ...`,
+    () => (omittedValues: LabelValueType[]) => `+ ${omittedValues.length} ...`,
   ),
   tagRender: PropTypes.func,
 

components/vc-select/generate.tsx

@@ -326,7 +326,7 @@ export default function generateSelector<
     label?: VNodeChild;
     key?: Key;
     disabled?: boolean;
-  }[]
+  }[],
 >(config: GenerateConfig<OptionsType>) {
   const {
     prefixCls: defaultPrefixCls,
@@ -442,8 +442,7 @@ export default function generateSelector<
         return mergedSearchValue;
       });
 
-      const mergedOptions = computed(
+      const mergedOptions = computed((): OptionsType => {
-        (): OptionsType => {
         let newOptions = props.options;
         if (newOptions === undefined) {
           newOptions = convertChildrenToData(props.children);
@@ -463,8 +462,7 @@ export default function generateSelector<
         }
 
         return newOptions || ([] as OptionsType);
-        },
+      });
-      );
 
       const mergedFlattenOptions = computed(() => flattenOptions(mergedOptions.value, props));
 
@@ -553,14 +551,16 @@ export default function generateSelector<
         const { internalProps = {} } = props;
         if (!internalProps.skipTriggerSelect) {
           // Skip trigger `onSelect` or `onDeselect` if configured
-          const selectValue = (mergedLabelInValue.value
+          const selectValue = (
+            mergedLabelInValue.value
               ? getLabeledValue(newValue, {
                   options: newValueOption,
                   prevValueMap: mergedValueMap.value,
                   labelInValue: mergedLabelInValue.value,
                   optionLabelProp: mergedOptionLabelProp.value,
                 })
-            : newValue) as SingleType<ValueType>;
+              : newValue
+          ) as SingleType<ValueType>;
 
           if (isSelect && props.onSelect) {
             props.onSelect(selectValue, outOption);

components/vc-select/hooks/useCacheOptions.ts

@@ -7,7 +7,7 @@ export default function useCacheOptions<
     label?: VNodeChild;
     key?: Key;
     disabled?: boolean;
-  }[]
+  }[],
 >(options: Ref) {
   const optionMap = computed(() => {
     const map: Map<RawValueType, FlattenOptionsType<OptionsType>[number]> = new Map();

components/vc-select/utils/commonUtil.ts

@@ -80,7 +80,7 @@ export function toOuterValues<FOT extends FlattenOptionsType>(
 
 export function removeLastEnabledValue<
   T extends { disabled?: boolean },
-  P extends RawValueType | object
+  P extends RawValueType | object,
 >(measureValues: T[], values: P[]): { values: P[]; removedValue: P } {
   const newValues = [...values];
 

components/vc-select/utils/valueUtil.ts

@@ -178,9 +178,7 @@ function getFilterFunction(optionFilterProp: string) {
 
     // Group label search
     if ('options' in option) {
-      return toRawString(option.label)
+      return toRawString(option.label).toLowerCase().includes(lowerSearchText);
-        .toLowerCase()
-        .includes(lowerSearchText);
     }
     // Option value search
     const rawValue = option[optionFilterProp];
@@ -277,9 +275,7 @@ export function fillOptionsWithMissingValue(
   optionLabelProp: string,
   labelInValue: boolean,
 ): SelectOptionsType {
-  const values = toArray<RawValueType | LabelValueType>(value)
+  const values = toArray<RawValueType | LabelValueType>(value).slice().sort();
-    .slice()
-    .sort();
   const cloneOptions = [...options];
 
   // Convert options value to set

components/vc-select/utils/warningPropsUtil.ts

@@ -137,9 +137,9 @@ function warningProps(props: SelectProps) {
     if (invalidateChildType) {
       warning(
         false,
-        `\`children\` should be \`Select.Option\` or \`Select.OptGroup\` instead of \`${invalidateChildType.displayName ||
+        `\`children\` should be \`Select.Option\` or \`Select.OptGroup\` instead of \`${
-          invalidateChildType.name ||
+          invalidateChildType.displayName || invalidateChildType.name || invalidateChildType
-          invalidateChildType}\`.`,
+        }\`.`,
       );
     }
 

components/vc-slider/src/Handle.jsx

@@ -73,17 +73,8 @@ export default defineComponent({
     },
   },
   render() {
-    const {
+    const { prefixCls, vertical, reverse, offset, disabled, min, max, value, tabindex } =
-      prefixCls,
+      getOptionProps(this);
-      vertical,
-      reverse,
-      offset,
-      disabled,
-      min,
-      max,
-      value,
-      tabindex,
-    } = getOptionProps(this);
     const className = classNames(this.$attrs.class, {
       [`${prefixCls}-handle-click-focused`]: this.clickFocused,
     });

components/vc-steps/Step.jsx

@@ -40,9 +40,8 @@ export default defineComponent({
       this.__emit('stepClick', this.stepIndex);
     },
     renderIconNode() {
-      const { prefixCls, stepNumber, status, iconPrefix, icons, progressDot } = getOptionProps(
+      const { prefixCls, stepNumber, status, iconPrefix, icons, progressDot } =
-        this,
+        getOptionProps(this);
-      );
       const icon = getComponent(this, 'icon');
       const title = getComponent(this, 'title');
       const description = getComponent(this, 'description');

components/vc-table/src/Table.jsx

@@ -366,12 +366,8 @@ export default defineComponent({
         return;
       }
       const { scroll = {} } = this;
-      const {
+      const { ref_headTable, ref_bodyTable, ref_fixedColumnsBodyLeft, ref_fixedColumnsBodyRight } =
-        ref_headTable,
+        this;
-        ref_bodyTable,
-        ref_fixedColumnsBodyLeft,
-        ref_fixedColumnsBodyRight,
-      } = this;
       if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== ref_headTable) {
         const scrollTop = target.scrollTop;
         if (ref_fixedColumnsBodyLeft && target !== ref_fixedColumnsBodyLeft) {

components/vc-table/src/TableRow.jsx

@@ -258,8 +258,12 @@ const TableRow = {
       );
     }
 
-    const { class: customClass, className: customClassName, style: customStyle, ...rowProps } =
+    const {
-      customRow(record, index) || {};
+      class: customClass,
+      className: customClassName,
+      style: customStyle,
+      ...rowProps
+    } = customRow(record, index) || {};
 
     let style = { height: typeof height === 'number' ? `${height}px` : height };
 

components/vc-tabs/src/TabPane.jsx

@@ -34,12 +34,8 @@ export default defineComponent({
     };
     const isRender = destroyInactiveTabPane ? active : this.isActived;
     const shouldRender = isRender || forceRender;
-    const {
+    const { sentinelStart, sentinelEnd, setPanelSentinelStart, setPanelSentinelEnd } =
-      sentinelStart,
+      this.sentinelContext;
-      sentinelEnd,
-      setPanelSentinelStart,
-      setPanelSentinelEnd,
-    } = this.sentinelContext;
     let panelSentinelStart;
     let panelSentinelEnd;
     if (active && shouldRender) {

components/vc-tabs/src/utils.js

@@ -69,10 +69,7 @@ export function getMarginStyle(index, tabBarPosition) {
 }
 
 export function getStyle(el, property) {
-  return +window
+  return +window.getComputedStyle(el).getPropertyValue(property).replace('px', '');
-    .getComputedStyle(el)
-    .getPropertyValue(property)
-    .replace('px', '');
 }
 
 export function setPxStyle(el, value, vertical) {

components/vc-time-picker/Header.jsx

@@ -90,10 +90,7 @@ const Header = {
           });
           return;
         }
-        value
+        value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second());
-          .hour(parsed.hour())
-          .minute(parsed.minute())
-          .second(parsed.second());
 
         // if time value not allowed, response warning.
         if (

components/vc-tree-select/src/Selector/MultipleSelector/index.jsx

@@ -50,13 +50,8 @@ const MultipleSelector = {
     },
 
     _renderPlaceholder() {
-      const {
+      const { prefixCls, placeholder, searchPlaceholder, searchValue, selectorValueList } =
-        prefixCls,
+        this.$props;
-        placeholder,
-        searchPlaceholder,
-        searchValue,
-        selectorValueList,
-      } = this.$props;
 
       const currentPlaceholder = placeholder || searchPlaceholder;
 

components/vc-trigger/Trigger.jsx

@@ -609,9 +609,8 @@ export default defineComponent({
     } else {
       newChildProps.onClick = this.createTwoChains('onClick');
       newChildProps.onMousedown = this.createTwoChains('onMousedown');
-      newChildProps[
+      newChildProps[supportsPassive ? 'onTouchstartPassive' : 'onTouchstart'] =
-        supportsPassive ? 'onTouchstartPassive' : 'onTouchstart'
+        this.createTwoChains('onTouchstart');
-      ] = this.createTwoChains('onTouchstart');
     }
     if (this.isMouseEnterToShow()) {
       newChildProps.onMouseenter = this.onMouseenter;

examples/index.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -8,10 +7,15 @@
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
-  <meta name="description" content="An enterprise-class UI components based on Ant Design and Vue" />
+    <meta
+      name="description"
+      content="An enterprise-class UI components based on Ant Design and Vue"
+    />
     <title>Ant Design Vue</title>
-  <meta name="keywords"
+    <meta
-    content="ant design vue,ant-design-vue,ant-design-vue admin,ant design pro,vue ant design,vue ant design pro,vue ant design admin,ant design vue官网,ant design vue中文文档,ant design vue文档" />
+      name="keywords"
+      content="ant design vue,ant-design-vue,ant-design-vue admin,ant design pro,vue ant design,vue ant design pro,vue ant design admin,ant design vue官网,ant design vue中文文档,ant design vue文档"
+    />
     <link rel="shortcut icon" type="image/x-icon" href="https://qn.antdv.com/favicon.ico" />
     <style id="nprogress-style">
       #nprogress {
@@ -23,5 +27,4 @@
   <body>
     <div id="app" style="padding: 50px"></div>
   </body>
-
 </html>

package.json

@@ -88,7 +88,7 @@
     "@typescript-eslint/eslint-plugin": "^4.1.0",
     "@typescript-eslint/parser": "^4.1.0",
     "@vue/babel-plugin-jsx": "^1.0.0",
-    "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-plugin-eslint": "^5.0.0-0",
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
@@ -119,6 +119,7 @@
     "eslint": "^7.25.0",
     "eslint-config-prettier": "^8.0.0",
     "eslint-plugin-html": "^6.0.0",
+    "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-markdown": "^2.0.0-alpha.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.1.0",
@@ -132,7 +133,6 @@
     "html-webpack-plugin": "^5.3.1",
     "husky": "^4.0.0",
     "ignore-emit-webpack-plugin": "^2.0.6",
-    "istanbul-instrumenter-loader": "^3.0.0",
     "jest": "^26.0.0",
     "jest-environment-jsdom-fifteen": "^1.0.2",
     "jest-serializer-vue": "^2.0.0",
@@ -154,8 +154,8 @@
     "nprogress": "^0.2.0",
     "postcss": "^8.2.12",
     "postcss-loader": "^5.0.0",
-    "prettier": "^1.18.2",
+    "prettier": "^2.2.0",
-    "pretty-quick": "^2.0.0",
+    "pretty-quick": "^3.0.0",
     "prismjs": "^1.20.0",
     "querystring": "^0.2.0",
     "raw-loader": "^4.0.2",

scripts/gulpfile.js

@@ -43,6 +43,7 @@ function dist(done) {
       hash: false,
       version: false,
     });
+    // eslint-disable-next-line no-console
     console.log(buildInfo);
     done(0);
   });
@@ -64,6 +65,7 @@ function copyHtml() {
   rl.on('line', line => {
     if (line.indexOf('path:') > -1) {
       const name = line.split("'")[1].split("'")[0];
+      // eslint-disable-next-line no-console
       console.log('create path:', name);
       const toPaths = [
         `_site/components/${name}`,