Merge remote-tracking branch 'origin/main' into feat-v3.3

Author: tangjinzhou

components/_util/reactivePick.ts

@@ -1,5 +1,6 @@
 import type { UnwrapRef } from 'vue';
 import { reactive, toRef } from 'vue';
+import fromPairs from 'lodash-es/fromPairs';
 
 /**
  * Reactively pick fields from a reactive object
@@ -10,5 +11,5 @@ export function reactivePick<T extends object, K extends keyof T>(
   obj: T,
   ...keys: K[]
 ): { [S in K]: UnwrapRef<T[S]> } {
-  return reactive(Object.fromEntries(keys.map(k => [k, toRef(obj, k)]))) as any;
+  return reactive(fromPairs(keys.map(k => [k, toRef(obj, k)]))) as any;
 }

components/alert/index.tsx

@@ -168,7 +168,7 @@ const Alert = defineComponent({
           <div
             role="alert"
             {...attrs}
-            style={[attrs.style, motionStyle.value]}
+            style={[attrs.style as CSSProperties, motionStyle.value]}
             v-show={!closing.value}
             class={[attrs.class, alertCls]}
             data-show={!closing.value}

components/avatar/Avatar.tsx

@@ -203,7 +203,7 @@ const Avatar = defineComponent({
           {...attrs}
           ref={avatarNodeRef}
           class={classString}
-          style={[sizeStyle, responsiveSizeStyle(!!icon), attrs.style]}
+          style={[sizeStyle, responsiveSizeStyle(!!icon), attrs.style as CSSProperties]}
         >
           {childrenToRender}
         </span>

components/avatar/Group.tsx

@@ -71,14 +71,14 @@ const Group = defineComponent({
           </Popover>,
         );
         return (
-          <div {...attrs} class={cls} style={attrs.style}>
+          <div {...attrs} class={cls} style={attrs.style as CSSProperties}>
             {childrenShow}
           </div>
         );
       }
 
       return (
-        <div {...attrs} class={cls} style={attrs.style}>
+        <div {...attrs} class={cls} style={attrs.style as CSSProperties}>
           {childrenWithProps}
         </div>
       );

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import { defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getPropsSlot } from '../_util/props-util';
@@ -66,7 +66,7 @@ export default defineComponent({
       link = renderBreadcrumbNode(link, prefixCls.value);
       if (children) {
         return (
-          <li class={cls} style={style}>
+          <li class={cls} style={style as CSSProperties}>
             {link}
             {separator && <span class={`${prefixCls.value}-separator`}>{separator}</span>}
           </li>

components/carousel/index.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import { ref, computed, watchEffect, defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import warning from '../_util/warning';
@@ -127,7 +127,7 @@ const Carousel = defineComponent({
         [`${cls}`]: !!cls,
       });
       return (
-        <div class={className} style={style}>
+        <div class={className} style={style as CSSProperties}>
           <SlickCarousel
             ref={slickRef}
             {...props}

components/checkbox/Checkbox.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'vue';
 import { watchEffect, onMounted, defineComponent, inject, onBeforeUnmount, ref } from 'vue';
 import classNames from '../_util/classNames';
 import VcCheckbox from '../vc-checkbox/Checkbox';
@@ -96,7 +97,7 @@ export default defineComponent({
       return (
         <label
           class={classString}
-          style={style}
+          style={style as CSSProperties}
           onMouseenter={onMouseenter as EventHandler}
           onMouseleave={onMouseleave as EventHandler}
         >

components/collapse/Collapse.tsx

@@ -8,7 +8,7 @@ import { cloneElement } from '../_util/vnode';
 import type { CollapsibleType } from './commonProps';
 import { collapseProps } from './commonProps';
 import { getDataAndAriaProps } from '../_util/util';
-import type { ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes } from 'vue';
 import { computed, defineComponent, ref, watch } from 'vue';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import firstNotUndefined from '../_util/firstNotUndefined';
@@ -173,7 +173,7 @@ export default defineComponent({
         <div
           class={collapseClassName}
           {...getDataAndAriaProps(attrs)}
-          style={attrs.style}
+          style={attrs.style as CSSProperties}
           role={accordion ? 'tablist' : null}
         >
           {getItems()}

components/drawer/index.tsx

@@ -283,7 +283,7 @@ const Drawer = defineComponent({
       return (
         closable && (
           <button key="closer" onClick={close} aria-label="Close" class={`${prefixCls}-close`}>
-            {$closeIcon === undefined ? <CloseOutlined></CloseOutlined> : null}
+            {$closeIcon === undefined ? <CloseOutlined></CloseOutlined> : $closeIcon}
           </button>
         )
       );

components/dropdown/dropdown-button.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes, HTMLAttributes } from 'vue';
 import { defineComponent } from 'vue';
 import Button from '../button';
 import classNames from '../_util/classNames';
@@ -54,7 +54,7 @@ export default defineComponent({
         onClick,
         'onUpdate:visible': _updateVisible,
         ...restProps
-      } = { ...props, ...attrs };
+      } = { ...props, ...attrs } as DropdownButtonProps & HTMLAttributes;
 
       const dropdownProps = {
         align,