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

2024-11-30 02:57:50 +08:00 · 2022-05-21 15:14:29 +08:00 · 2022-05-21 15:14:29 +08:00 · 8ad9317d11
commit 8ad9317d11
parent 76585f75b9 d9b3d8057f
45 changed files with 88 additions and 58 deletions
--- a/components/_util/reactivePick.ts
+++ b/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;
 }
--- a/components/alert/index.tsx
+++ b/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}
--- a/components/avatar/Avatar.tsx
+++ b/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>
--- a/components/avatar/Group.tsx
+++ b/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>
      );
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/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>
--- a/components/carousel/index.tsx
+++ b/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}
--- a/components/checkbox/Checkbox.tsx
+++ b/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}
        >
--- a/components/collapse/Collapse.tsx
+++ b/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()}
--- a/components/drawer/index.tsx
+++ b/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>
        )
      );
--- a/components/dropdown/dropdown-button.tsx
+++ b/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,
--- a/components/input-number/index.tsx
+++ b/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;

--- a/components/input/ClearableLabeledInput.tsx
+++ b/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,
--- a/components/input/ResizableTextArea.tsx
+++ b/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, [
--- a/components/input/TextArea.tsx
+++ b/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}
--- a/components/layout/Sider.tsx
+++ b/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
--- a/components/menu/src/Menu.tsx
+++ b/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)));
      }

--- a/components/rate/index.tsx
+++ b/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}
--- a/components/statistic/Countdown.tsx
+++ b/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,
          }}
--- a/components/statistic/Statistic.tsx
+++ b/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,
--- a/components/statistic/utils.ts
+++ b/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
--- a/components/table/Table.tsx
+++ b/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
--- a/components/tabs/src/TabNavList/AddButton.tsx
+++ b/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', {
--- a/components/tabs/src/TabNavList/OperationNode.tsx
+++ b/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>
--- a/components/tabs/src/TabNavList/TabNode.tsx
+++ b/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 */}
--- a/components/tabs/src/TabNavList/index.tsx
+++ b/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();
--- a/components/tabs/src/TabPanelList/TabPane.tsx
+++ b/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?.()}
--- a/components/transfer/index.tsx
+++ b/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`}
--- a/components/transfer/list.tsx
+++ b/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 ? (
              <>
--- a/components/tree/Tree.tsx
+++ b/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),
--- a/components/tree/index.en-US.md
+++ b/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 |
--- a/components/tree/index.zh-CN.md
+++ b/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

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
--- a/components/upload/Upload.tsx
+++ b/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}
--- a/components/upload/UploadList/ListItem.tsx
+++ b/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,
--- a/components/vc-dialog/Content.tsx
+++ b/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}
--- a/components/vc-mentions/src/Mentions.tsx
+++ b/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`}>
--- a/components/vc-notification/Notice.tsx
+++ b/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}
--- a/components/vc-notification/Notification.tsx
+++ b/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%',
            }
--- a/components/vc-pagination/Pager.tsx
+++ b/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,
--- a/components/vc-picker/Picker.tsx
+++ b/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}
--- a/components/vc-picker/PickerPanel.tsx
+++ b/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}
--- a/components/vc-slider/src/Handle.tsx
+++ b/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;
--- a/components/vc-table/Table.tsx
+++ b/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}
        >
--- a/components/vc-tree/TreeNode.tsx
+++ b/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}
--- a/components/vc-trigger/Popup/PopupInner.tsx
+++ b/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 }));
--- a/package.json
+++ b/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",