Merge branch 'next' of github.com:vueComponent/ant-design-vue into next

Author: undefined

.jest.js

@@ -13,12 +13,13 @@ if (process.env.WORKFLOW === 'true') {
 module.exports = {
   testURL: 'http://localhost/',
   setupFiles: ['./tests/setup.js'],
-  moduleFileExtensions: ['js', 'jsx', 'json', 'vue', 'md', 'jpg'],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'vue', 'md', 'jpg'],
   modulePathIgnorePatterns: ['/_site/'],
   testPathIgnorePatterns: testPathIgnorePatterns,
   transform: {
     '^.+\\.(vue|md)$': '<rootDir>/node_modules/vue-jest',
     '^.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.(ts|tsx)$': '<rootDir>/node_modules/ts-jest',
     '^.+\\.svg$': '<rootDir>/node_modules/jest-transform-stub',
   },
   testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
@@ -45,4 +46,9 @@ module.exports = {
   ],
   testEnvironment: 'jest-environment-jsdom-fifteen',
   transformIgnorePatterns,
+  globals: {
+    'ts-jest': {
+      babelConfig: true,
+    },
+  },
 };

components/_util/BaseMixin.ts

@@ -2,7 +2,7 @@ import { getOptionProps } from './props-util';
 
 export default {
   methods: {
-    setState(state = {}, callback: () => any) {
+    setState(state = {}, callback: () => void) {
       let newState = typeof state === 'function' ? state(this.$data, this.$props) : state;
       if (this.getDerivedStateFromProps) {
         const s = this.getDerivedStateFromProps(getOptionProps(this), {

components/_util/classNames.ts

@@ -16,7 +16,7 @@ export type ClassValue =
   | boolean;
 
 function classNames(...args: ClassValue[]): string {
-  const classes = [];
+  const classes: string[] = [];
   for (let i = 0; i < args.length; i++) {
     const value = args[i];
     if (!value) {

components/_util/type.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, VNodeProps } from 'vue';
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
@@ -25,6 +25,8 @@ export type EventHandlers<E> = {
 
 export type Data = Record<string, unknown>;
 
+export type Key = string | number;
+
 export declare type DefaultFactory<T> = (props: Data) => T | null | undefined;
 export declare interface PropOptions<T = any, D = T> {
   type?: PropType<T> | true | null;

components/_util/vue-types/index.ts

@@ -1,11 +1,13 @@
 import { PropType } from 'vue';
 import isPlainObject from 'lodash-es/isPlainObject';
 import { toType, getType, isFunction, validateType, isInteger, isArray, warn } from './utils';
-interface BaseTypes {
-  type: any;
-  def: Function;
-  validator: Function;
-}
+
+// interface BaseTypes {
+//   type: any;
+//   def: Function;
+//   validator: Function;
+// }
+
 const PropTypes = {
   get any() {
     return toType('any', {
@@ -16,7 +18,7 @@ const PropTypes = {
   get func() {
     return {
       type: Function,
-    } as BaseTypes;
+    };
   },
 
   get bool() {

components/index.ts renamed to components/index.js

@@ -5,7 +5,6 @@ import {
   defineComponent,
   SetupContext,
   App,
-  watchEffect,
   VNodeTypes,
   CSSProperties,
 } from 'vue';
@@ -44,29 +43,8 @@ const Tag = defineComponent({
     const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
 
     const visible = ref(true);
-
     const props = attrs as TagProps;
 
-    watchEffect(() => {
-      if ('visible' in props) {
-        visible.value = props.visible!;
-      }
-    });
-
-    const handleCloseClick = (e: MouseEvent) => {
-      e.stopPropagation();
-      if (props.onClose) {
-        props.onClose(e);
-      }
-
-      if (e.defaultPrevented) {
-        return;
-      }
-      if (!('visible' in props)) {
-        visible.value = false;
-      }
-    };
-
     return () => {
       const {
         prefixCls: customizePrefixCls,
@@ -79,6 +57,24 @@ const Tag = defineComponent({
         ...restProps
       } = props;
 
+      if ('visible' in props) {
+        visible.value = props.visible!;
+      }
+
+      const handleCloseClick = (e: MouseEvent) => {
+        e.stopPropagation();
+        if (props.onClose) {
+          props.onClose(e);
+        }
+
+        if (e.defaultPrevented) {
+          return;
+        }
+        if (!('visible' in props)) {
+          visible.value = false;
+        }
+      };
+
       const isPresetColor = (): boolean => {
         if (!color) {
           return false;

components/modal/ActionButton.tsx renamed to components/modal/ActionButton.jsx

@@ -1,19 +1,24 @@
 // based on rc-resize-observer 0.1.3
+import { defineComponent, PropType } from 'vue';
 import ResizeObserver from 'resize-observer-polyfill';
 import BaseMixin from '../_util/BaseMixin';
 import { findDOMNode } from '../_util/props-util';
 
 // Still need to be compatible with React 15, we use class component here
-const VueResizeObserver = {
+const VueResizeObserver = defineComponent({
   name: 'ResizeObserver',
   mixins: [BaseMixin],
   props: {
     disabled: Boolean,
-    onResize: Function,
+    onResize: Function as PropType<
+      (size: { width: number; height: number; offsetWidth: number; offsetHeight: number }) => void
+    >,
   },
-  data() {
+  beforeCreate() {
     this.currentElement = null;
     this.resizeObserver = null;
+  },
+  data() {
     return {
       width: 0,
       height: 0,
@@ -54,7 +59,7 @@ const VueResizeObserver = {
       }
     },
 
-    handleResize(entries) {
+    handleResize(entries: ResizeObserverEntry[]) {
       const { target } = entries[0];
       const { width, height } = target.getBoundingClientRect();
       /**
@@ -82,8 +87,8 @@ const VueResizeObserver = {
   },
 
   render() {
-    return this.$slots.default && this.$slots.default()[0];
+    return this.$slots.default?.()[0];
   },
-};
+});
 
 export default VueResizeObserver;

components/modal/ConfirmDialog.tsx renamed to components/modal/ConfirmDialog.jsx

@@ -1,10 +1,23 @@
 import classNames from '../_util/classNames';
 import ResizeObserver from '../vc-resize-observer';
+import { CSSProperties, FunctionalComponent } from 'vue';
 
-const Filter = ({ height, offset, prefixCls, onInnerResize }, { slots }) => {
+interface FillerProps {
+  prefixCls?: string;
+  /** Virtual filler height. Should be `count * itemMinHeight` */
+  height: number;
+  /** Set offset of visible items. Should be the top of start item position */
+  offset?: number;
+  onInnerResize?: () => void;
+}
+
+const Filter: FunctionalComponent<FillerProps> = (
+  { height, offset, prefixCls, onInnerResize },
+  { slots },
+) => {
   let outerStyle = {};
 
-  let innerStyle = {
+  let innerStyle: CSSProperties = {
     display: 'flex',
     flexDirection: 'column',
   };
@@ -43,15 +56,8 @@ const Filter = ({ height, offset, prefixCls, onInnerResize }, { slots }) => {
     </div>
   );
 };
+
 Filter.displayName = 'Filter';
 Filter.inheritAttrs = false;
-Filter.props = {
-  prefixCls: String,
-  /** Virtual filler height. Should be `count * itemMinHeight` */
-  height: Number,
-  /** Set offset of visible items. Should be the top of start item position */
-  offset: Number,
-  onInnerResize: Function,
-};
 
 export default Filter;

components/modal/Modal.tsx renamed to components/modal/Modal.jsx

@@ -0,0 +1,17 @@
+import { cloneVNode, FunctionalComponent } from 'vue';
+
+export interface ItemProps {
+  setRef: (element: HTMLElement) => void;
+}
+
+const Item: FunctionalComponent<ItemProps> = ({ setRef }, { slots }) => {
+  const children = slots.default?.();
+
+  return children && children.length
+    ? cloneVNode(children[0], {
+        ref: setRef,
+      })
+    : children;
+};
+
+export default Item;