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

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,

components/input-number/index.tsx

@@ -104,7 +104,7 @@ const InputNumber = defineComponent({
         prefix = slots.prefix?.(),
         valueModifiers = {},
         ...others
-      } = { ...(attrs as HTMLAttributes), ...props };
+      } = { ...attrs, ...props } as InputNumberProps & HTMLAttributes;
 
       const preCls = prefixCls.value;
 

components/input/ClearableLabeledInput.tsx

@@ -2,7 +2,7 @@ import classNames from '../_util/classNames';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import PropTypes from '../_util/vue-types';
 import { cloneElement } from '../_util/vnode';
-import type { PropType, VNode } from 'vue';
+import type { CSSProperties, PropType, VNode } from 'vue';
 import { defineComponent } from 'vue';
 import { tuple } from '../_util/type';
 import type { Direction, SizeType } from '../config-provider';
@@ -97,7 +97,7 @@ export default defineComponent({
         },
       );
       return (
-        <span className={affixWrapperCls} style={attrs.style} hidden={hidden}>
+        <span class={affixWrapperCls} style={attrs.style as CSSProperties} hidden={hidden}>
           {cloneElement(element, {
             style: null,
             value,

components/input/ResizableTextArea.tsx

@@ -125,6 +125,9 @@ const ResizableTextArea = defineComponent({
       if (!textareaProps.autofocus) {
         delete textareaProps.autofocus;
       }
+      if (textareaProps.rows === 0) {
+        delete textareaProps.rows;
+      }
       return (
         <ResizeObserver onResize={handleResize} disabled={!(autoSize || autosize)}>
           {withDirectives((<textarea {...textareaProps} ref={textAreaRef} />) as VNode, [

components/input/TextArea.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'vue';
 import {
   computed,
   defineComponent,
@@ -290,7 +291,7 @@ export default defineComponent({
               `${prefixCls.value}-textarea-show-count`,
               customClass,
             )}
-            style={style}
+            style={style as CSSProperties}
             data-count={typeof dataCount !== 'object' ? dataCount : undefined}
           >
             {textareaNode}

components/layout/Sider.tsx

@@ -194,7 +194,7 @@ export default defineComponent({
             )
           : null;
       const divStyle = [
-        attrs.style,
+        attrs.style as CSSProperties,
         {
           flex: `0 0 ${siderWidth}`,
           maxWidth: siderWidth, // Fix width transition bug in IE11

components/menu/src/Menu.tsx

@@ -355,7 +355,7 @@ export default defineComponent({
         newOpenKeys.push(key);
       } else if (mergedMode.value !== 'inline') {
         // We need find all related popup to close
-        const subPathKeys = getChildrenKeys(childrenEventKeys);
+        const subPathKeys = getChildrenKeys(unref(childrenEventKeys));
         newOpenKeys = uniq(newOpenKeys.filter(k => !subPathKeys.includes(k)));
       }
 

components/rate/index.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType, VNode } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType, VNode } from 'vue';
 import { watch, defineComponent, ref, reactive, onMounted } from 'vue';
 import { initDefaultProps, getPropsSlot, findDOMNode } from '../_util/props-util';
 import { withInstall } from '../_util/type';
@@ -230,7 +230,7 @@ const Rate = defineComponent({
           {...attrs}
           id={id}
           class={rateClassName}
-          style={style}
+          style={style as CSSProperties}
           onMouseleave={disabled ? null : onMouseLeave}
           tabindex={disabled ? -1 : tabindex}
           onFocus={disabled ? null : onFocus}

components/statistic/Countdown.tsx

@@ -3,7 +3,7 @@ import { defineComponent, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue
 import omit from '../_util/omit';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import Statistic, { statisticProps } from './Statistic';
-import type { countdownValueType, FormatConfig } from './utils';
+import type { countdownValueType, FormatConfig, valueType } from './utils';
 import { formatCountdown as formatCD } from './utils';
 
 const REFRESH_INTERVAL = 1000 / 30;
@@ -14,7 +14,7 @@ function getTime(value?: countdownValueType) {
 export const countdownProps = () => {
   return {
     ...statisticProps(),
-    value: [Number, String],
+    value: [Number, String, Object] as PropType<countdownValueType>,
     format: String,
     onFinish: Function as PropType<() => void>,
     onChange: Function as PropType<(value?: countdownValueType) => void>,
@@ -88,11 +88,13 @@ export default defineComponent({
       stopTimer();
     });
     return () => {
+      const value = props.value as valueType;
       return (
         <Statistic
           ref={statistic}
           {...{
             ...omit(props, ['onFinish', 'onChange']),
+            value,
             valueRender: valueRenderHtml,
             formatter: formatCountdown,
           }}

components/statistic/Statistic.tsx

@@ -3,7 +3,7 @@ import { defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import StatisticNumber from './Number';
-import type { countdownValueType } from './utils';
+import type { valueType } from './utils';
 import Skeleton from '../skeleton/Skeleton';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
@@ -13,7 +13,7 @@ export const statisticProps = () => ({
   groupSeparator: String,
   format: String,
   value: {
-    type: [String, Number, Object] as PropType<countdownValueType>,
+    type: [String, Number, Object] as PropType<valueType>,
   },
   valueStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
   valueRender: PropTypes.any,

components/statistic/utils.ts

@@ -2,7 +2,7 @@ import type { VNodeTypes } from 'vue';
 import padStart from 'lodash-es/padStart';
 
 export type valueType = number | string;
-export type countdownValueType = valueType | string;
+export type countdownValueType = valueType | Date;
 
 export type Formatter =
   | false

components/table/Table.tsx

@@ -34,7 +34,7 @@ import scrollTo from '../_util/scrollTo';
 import defaultLocale from '../locale/en_US';
 import type { SizeType } from '../config-provider';
 import devWarning from '../vc-util/devWarning';
-import type { PropType } from 'vue';
+import type { CSSProperties, PropType } from 'vue';
 import { nextTick, reactive, ref, computed, defineComponent, toRef, watchEffect, watch } from 'vue';
 import type { DefaultRecordType } from '../vc-table/interface';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
@@ -636,7 +636,7 @@ const InteralTable = defineComponent<
       );
       const tableProps = omit(props, ['columns']);
       return (
-        <div class={wrapperClassNames} style={attrs.style}>
+        <div class={wrapperClassNames} style={attrs.style as CSSProperties}>
           <Spin spinning={false} {...spinProps}>
             {topPaginationNode}
             <RcTable

components/tabs/src/TabNavList/AddButton.tsx

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue';
+import type { CSSProperties, PropType } from 'vue';
 import { defineComponent, ref } from 'vue';
 import type { EditableConfig, TabsLocale } from '../interface';
 
@@ -32,7 +32,7 @@ export default defineComponent({
           ref={domRef}
           type="button"
           class={`${prefixCls}-nav-add`}
-          style={attrs.style}
+          style={attrs.style as CSSProperties}
           aria-label={locale?.addAriaLabel || 'Add tab'}
           onClick={event => {
             editable.onEdit('add', {

components/tabs/src/TabNavList/OperationNode.tsx

@@ -224,7 +224,10 @@ export default defineComponent({
       );
 
       return (
-        <div class={classNames(`${prefixCls}-nav-operations`, attrs.class)} style={attrs.style}>
+        <div
+          class={classNames(`${prefixCls}-nav-operations`, attrs.class)}
+          style={attrs.style as CSSProperties}
+        >
           {moreNode}
           <AddButton prefixCls={prefixCls} locale={locale} editable={editable} />
         </div>

components/tabs/src/TabNavList/TabNode.tsx

@@ -1,5 +1,5 @@
 import type { Tab, EditableConfig } from '../interface';
-import type { PropType } from 'vue';
+import type { CSSProperties, PropType } from 'vue';
 import { defineComponent, computed, ref } from 'vue';
 import type { FocusEventHandler } from '../../../_util/EventInterface';
 import KeyCode from '../../../_util/KeyCode';
@@ -88,7 +88,7 @@ export default defineComponent({
             [`${tabPrefix}-active`]: active,
             [`${tabPrefix}-disabled`]: disabled,
           })}
-          style={attrs.style}
+          style={attrs.style as CSSProperties}
           onClick={onInternalClick}
         >
           {/* Primary Tab Button */}

components/tabs/src/TabNavList/index.tsx

@@ -464,7 +464,7 @@ export default defineComponent({
         <div
           role="tablist"
           class={classNames(`${pre}-nav`, className)}
-          style={style}
+          style={style as CSSProperties}
           onKeydown={() => {
             // No need animation when use keyboard
             doLockAnimation();

components/tabs/src/TabPanelList/TabPane.tsx

@@ -63,7 +63,7 @@ export default defineComponent({
           tabindex={active ? 0 : -1}
           aria-labelledby={id && `${id}-tab-${tabKey}`}
           aria-hidden={!active}
-          style={[mergedStyle.value, attrs.style]}
+          style={[mergedStyle.value, attrs.style as CSSProperties]}
           class={[`${prefixCls}-tabpane`, active && `${prefixCls}-tabpane-active`, attrs.class]}
         >
           {(active || visited.value || forceRender) && slots.default?.()}

components/transfer/index.tsx

@@ -344,7 +344,7 @@ const Transfer = defineComponent({
       const rightTitle =
         (titles && titles[1]) ?? slots.rightTitle?.() ?? (locale.titles || ['', ''])[1];
       return (
-        <div class={cls} style={style} id={id}>
+        <div class={cls} style={style as CSSProperties} id={id}>
           <List
             key="leftList"
             prefixCls={`${prefixCls.value}-list`}

components/transfer/list.tsx

@@ -7,7 +7,7 @@ import Menu from '../menu';
 import Dropdown from '../dropdown';
 import Search from './search';
 import ListBody from './ListBody';
-import type { VNode, VNodeTypes, ExtractPropTypes, PropType } from 'vue';
+import type { VNode, VNodeTypes, ExtractPropTypes, PropType, CSSProperties } from 'vue';
 import { watchEffect, computed, defineComponent, ref } from 'vue';
 import type { RadioChangeEvent } from '../radio/interface';
 import type { TransferDirection, TransferItem } from './index';
@@ -388,7 +388,7 @@ export default defineComponent({
       );
 
       return (
-        <div class={listCls} style={attrs.style}>
+        <div class={listCls} style={attrs.style as CSSProperties}>
           <div class={`${prefixCls}-header`}>
             {showSelectAll ? (
               <>

components/tree/Tree.tsx

@@ -5,7 +5,7 @@ import VcTree from '../vc-tree';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import type { DataNode, EventDataNode, FieldNames, Key } from '../vc-tree/interface';
+import type { DataNode, EventDataNode, FieldNames, Key, ScrollTo } from '../vc-tree/interface';
 import type { TreeNodeProps } from '../vc-tree/props';
 import { treeProps as vcTreeProps } from '../vc-tree/props';
 import useConfigInject from '../_util/hooks/useConfigInject';
@@ -168,11 +168,15 @@ export default defineComponent({
     );
     const { prefixCls, direction, virtual } = useConfigInject('tree', props);
     const treeRef = ref();
+    const scrollTo: ScrollTo = scroll => {
+      treeRef.value?.scrollTo(scroll);
+    };
     expose({
       treeRef,
       onNodeExpand: (...args) => {
         treeRef.value?.onNodeExpand(...args);
       },
+      scrollTo,
       selectedKeys: computed(() => treeRef.value?.selectedKeys),
       checkedKeys: computed(() => treeRef.value?.checkedKeys),
       halfCheckedKeys: computed(() => treeRef.value?.halfCheckedKeys),

components/tree/index.en-US.md

@@ -56,6 +56,12 @@ Almost anything can be represented in a tree structure. Examples include directo
 | rightClick | Callback function for when the user right clicks a treeNode | function({event, node}) |
 | select | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) |
 
+### Tree Methods
+
+| Name | Description |
+| --- | --- |
+| scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | Scroll to key item in virtual scroll |
+
 ### TreeNode
 
 | Property | Description | Type | Default | Version |

components/tree/index.zh-CN.md

@@ -57,6 +57,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 | rightClick | 响应右键点击 | function({event, node}) |
 | select | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) |
 
+### Tree 方法
+
+| 名称 | 说明 |
+| --- | --- |
+| scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | 虚拟滚动下，滚动到指定 key 条目 |
+
 ### TreeNode
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |

components/upload/Upload.tsx

@@ -383,7 +383,7 @@ export default defineComponent({
               onDrop={onFileDrop}
               onDragover={onFileDrop}
               onDragleave={onFileDrop}
-              style={attrs.style}
+              style={attrs.style as CSSProperties}
             >
               <VcUpload
                 {...rcUploadProps}

components/upload/UploadList/ListItem.tsx

@@ -266,7 +266,7 @@ export default defineComponent({
         );
 
       return (
-        <div class={listContainerNameClass} style={style} ref={ref}>
+        <div class={listContainerNameClass} style={style as CSSProperties} ref={ref}>
           {itemRender
             ? itemRender({
                 originNode: item,

components/vc-dialog/Content.tsx

@@ -137,7 +137,7 @@ export default defineComponent({
               v-show={visible}
               key="dialog-element"
               role="document"
-              style={[contentStyleRef.value, attrs.style]}
+              style={[contentStyleRef.value, attrs.style as CSSProperties]}
               class={[prefixCls, attrs.class]}
               onMousedown={onMousedown}
               onMouseup={onMouseup}

components/vc-mentions/src/Mentions.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes } from 'vue';
 import {
   toRef,
   watchEffect,
@@ -278,7 +278,7 @@ export default defineComponent({
         onPressenter: onPressEnter,
       };
       return (
-        <div class={classNames(prefixCls, className)} style={style}>
+        <div class={classNames(prefixCls, className)} style={style as CSSProperties}>
           {withDirectives(<textarea ref={textarea} {...textareaProps} />, [[antInputDirective]])}
           {measuring && (
             <div ref={measure} class={`${prefixCls}-measure`}>

components/vc-notification/Notice.tsx

@@ -1,6 +1,6 @@
 import type { Key } from '../_util/type';
 import { Teleport, computed, defineComponent, onMounted, watch, onUnmounted } from 'vue';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes, CSSProperties } from 'vue';
 import type { MouseEventHandler } from '../_util/EventInterface';
 import classNames from '../_util/classNames';
 
@@ -113,7 +113,7 @@ export default defineComponent<NoticeProps>({
           class={classNames(componentClass, className, {
             [`${componentClass}-closable`]: closable,
           })}
-          style={style}
+          style={style as CSSProperties}
           onMouseenter={clearCloseTimer}
           onMouseleave={startCloseTimer}
           onClick={onClick}

components/vc-notification/Notification.tsx

@@ -179,7 +179,7 @@ const Notification = defineComponent<NotificationProps>({
         <div
           class={className}
           style={
-            attrs.style || {
+            (attrs.style as CSSProperties) || {
               top: '65px',
               left: '50%',
             }

components/vc-pagination/Pager.tsx

@@ -1,5 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
+import type { CSSProperties } from 'vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -52,7 +53,7 @@ export default defineComponent({
           title={showTitle ? String(page) : null}
           tabindex="0"
           class={cls}
-          style={style}
+          style={style as CSSProperties}
         >
           {itemRender({
             page,

components/vc-picker/Picker.tsx

@@ -592,7 +592,7 @@ function Picker<DateType>() {
                 [`${prefixCls}-focused`]: focused.value,
                 [`${prefixCls}-rtl`]: direction === 'rtl',
               })}
-              style={attrs.style}
+              style={attrs.style as CSSProperties}
               onMousedown={onMousedown}
               onMouseup={onInternalMouseup}
               onMouseenter={onMouseenter}

components/vc-picker/PickerPanel.tsx

@@ -33,6 +33,7 @@ import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
 import { getLowerBoundTime, setDateTime, setTime } from './utils/timeUtil';
 import type { VueNode } from '../_util/type';
+import type { CSSProperties } from 'vue';
 import { computed, createVNode, defineComponent, ref, toRef, watch, watchEffect } from 'vue';
 import useMergedState from '../_util/hooks/useMergedState';
 import { warning } from '../vc-util/warning';
@@ -596,7 +597,7 @@ function PickerPanel<DateType>() {
           <div
             tabindex={tabindex}
             class={classNames(classString.value, attrs.class)}
-            style={attrs.style}
+            style={attrs.style as CSSProperties}
             onKeydown={onInternalKeydown}
             onBlur={onInternalBlur}
             onMousedown={onMousedown}

components/vc-slider/src/Handle.tsx

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue';
+import type { CSSProperties, PropType } from 'vue';
 import { computed, defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import classNames from '../../_util/classNames';
 import PropTypes from '../../_util/vue-types';
@@ -108,7 +108,7 @@ export default defineComponent({
         'aria-valuenow': value,
         'aria-disabled': !!disabled,
       };
-      const elStyle = [attrs.style, positionStyle.value];
+      const elStyle = [attrs.style as CSSProperties, positionStyle.value];
       let mergedTabIndex = tabindex || 0;
       if (disabled || tabindex === null) {
         mergedTabIndex = null;

components/vc-table/Table.tsx

@@ -837,7 +837,7 @@ export default defineComponent<TableProps<DefaultRecordType>>({
               flattenColumns.value[columnCount.value - 1].fixed === 'right',
             [attrs.class as string]: attrs.class,
           })}
-          style={attrs.style}
+          style={attrs.style as CSSProperties}
           id={id}
           ref={fullTableRef}
         >

components/vc-tree/TreeNode.tsx

@@ -1,6 +1,7 @@
 import { useInjectKeysState, useInjectTreeContext } from './contextTypes';
 import Indent from './Indent';
 import { convertNodePropsToEventData, getTreeNodeProps } from './utils/treeUtil';
+import type { CSSProperties } from 'vue';
 import {
   computed,
   defineComponent,
@@ -556,7 +557,7 @@ export default defineComponent({
             'drag-over-gap-bottom': !disabled && dragOverGapBottom.value,
             'filter-node': filterTreeNode && filterTreeNode(eventData.value),
           })}
-          style={attrs.style}
+          style={attrs.style as CSSProperties}
           // Draggable config
           draggable={draggableWithoutDisabled}
           aria-grabbed={dragging}

components/vc-trigger/Popup/PopupInner.tsx

@@ -152,7 +152,7 @@ export default defineComponent({
             statusValue === 'motion' || statusValue === 'stable' || !visible.value ? null : 0,
           pointerEvents: statusValue === 'stable' ? null : 'none',
         },
-        attrs.style,
+        attrs.style as CSSProperties,
       ];
 
       let childNode: any = flattenChildren(slots.default?.({ visible: props.visible }));

package.json

@@ -254,7 +254,7 @@
     "vue-router": "^4.0.0",
     "vue-server-renderer": "^2.6.11",
     "vue-style-loader": "^4.1.2",
-    "vue-tsc": "^0.30.2",
+    "vue-tsc": "^0.34.15",
     "vuex": "^4.0.0-beta.2",
     "webpack": "^5.0.0",
     "webpack-bundle-analyzer": "^4.4.2",