fix: support vue 3.4

Author: kananramazandev

components/_util/PortalWrapper.tsx

@@ -7,7 +7,6 @@ import {
   onMounted,
   onBeforeUnmount,
   onUpdated,
-  getCurrentInstance,
   nextTick,
   computed,
 } from 'vue';
@@ -61,6 +60,7 @@ export default defineComponent({
     const container = shallowRef<HTMLElement>();
     const componentRef = shallowRef();
     const rafId = shallowRef<number>();
+    const triggerUpdate = shallowRef(1);
     const defaultContainer = canUseDom() && document.createElement('div');
     const removeCurrentContainer = () => {
       // Portal will remove from `parentNode`.
@@ -106,8 +106,6 @@ export default defineComponent({
       attachToParent();
     });
 
-    const instance = getCurrentInstance();
-
     useScrollLocker(
       computed(() => {
         return (
@@ -155,7 +153,7 @@ export default defineComponent({
       nextTick(() => {
         if (!attachToParent()) {
           rafId.value = raf(() => {
-            instance.update();
+            triggerUpdate.value += 1;
           });
         }
       });
@@ -177,7 +175,7 @@ export default defineComponent({
         getOpenCount: () => openCount,
         getContainer,
       };
-      if (forceRender || visible || componentRef.value) {
+      if (triggerUpdate.value && (forceRender || visible || componentRef.value)) {
         portal = (
           <Portal
             getContainer={getContainer}

components/affix/index.tsx

@@ -176,7 +176,6 @@ const Affix = defineComponent({
         affixStyle: undefined,
         placeholderStyle: undefined,
       });
-      currentInstance.update();
       // Test if `updatePosition` called
       if (process.env.NODE_ENV === 'test') {
         emit('testUpdatePosition');
@@ -256,7 +255,7 @@ const Affix = defineComponent({
     const { prefixCls } = useConfigInject('affix', props);
     const [wrapSSR, hashId] = useStyle(prefixCls);
     return () => {
-      const { affixStyle, placeholderStyle } = state;
+      const { affixStyle, placeholderStyle, status } = state;
       const className = classNames({
         [prefixCls.value]: affixStyle,
         [hashId.value]: true,
@@ -271,7 +270,7 @@ const Affix = defineComponent({
       ]);
       return wrapSSR(
         <ResizeObserver onResize={updatePosition}>
-          <div {...restProps} {...attrs} ref={placeholderNode}>
+          <div {...restProps} {...attrs} ref={placeholderNode} data-measure-status={status}>
             {affixStyle && <div style={placeholderStyle} aria-hidden="true" />}
             <div class={className} ref={fixedNode} style={affixStyle}>
               {slots.default?.()}

components/modal/confirm.tsx

@@ -28,7 +28,6 @@ const confirm = (config: ModalFuncProps) => {
     if (confirmDialogInstance) {
       // destroy
       vueRender(null, container as any);
-      confirmDialogInstance.component.update();
       confirmDialogInstance = null;
     }
     const triggerCancel = args.some(param => param && param.triggerCancel);

components/upload/UploadList/index.tsx

@@ -10,9 +10,10 @@ import Button from '../../button';
 import ListItem from './ListItem';
 import type { HTMLAttributes } from 'vue';
 import {
+  triggerRef,
+  watch,
   computed,
   defineComponent,
-  getCurrentInstance,
   onMounted,
   shallowRef,
   watchEffect,
@@ -46,15 +47,26 @@ export default defineComponent({
   }),
   setup(props, { slots, expose }) {
     const motionAppear = shallowRef(false);
-    const instance = getCurrentInstance();
     onMounted(() => {
       motionAppear.value == true;
     });
+    const mergedItems = shallowRef([]);
+    watch(
+      () => props.items,
+      (val = []) => {
+        mergedItems.value = val.slice();
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
     watchEffect(() => {
       if (props.listType !== 'picture' && props.listType !== 'picture-card') {
         return;
       }
-      (props.items || []).forEach((file: InternalUploadFile) => {
+      let hasUpdate = false;
+      (props.items || []).forEach((file: InternalUploadFile, index) => {
         if (
           typeof document === 'undefined' ||
           typeof window === 'undefined' ||
@@ -69,11 +81,17 @@ export default defineComponent({
         if (props.previewFile) {
           props.previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
             // Need append '' to avoid dead loop
-            file.thumbUrl = previewDataUrl || '';
-            instance.update();
+            const thumbUrl = previewDataUrl || '';
+            if (thumbUrl !== file.thumbUrl) {
+              mergedItems.value[index].thumbUrl = thumbUrl;
+              hasUpdate = true;
+            }
           });
         }
       });
+      if (hasUpdate) {
+        triggerRef(mergedItems);
+      }
     });
 
     // ============================= Events =============================
@@ -177,7 +195,6 @@ export default defineComponent({
         listType,
         locale,
         isImageUrl: isImgUrl,
-        items = [],
         showPreviewIcon,
         showRemoveIcon,
         showDownloadIcon,
@@ -190,6 +207,7 @@ export default defineComponent({
         appendActionVisible,
       } = props;
       const appendActionDom = appendAction?.();
+      const items = mergedItems.value;
       return (
         <TransitionGroup {...transitionGroupProps.value} tag="div">
           {items.map(file => {

components/vc-input/Input.tsx

@@ -1,14 +1,6 @@
 // base 0.0.1-alpha.7
-import type { VNode } from 'vue';
-import {
-  onMounted,
-  defineComponent,
-  getCurrentInstance,
-  nextTick,
-  shallowRef,
-  watch,
-  withDirectives,
-} from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
+import { onMounted, defineComponent, nextTick, shallowRef, watch, withDirectives } from 'vue';
 import classNames from '../_util/classNames';
 import type { ChangeEvent, FocusEventHandler } from '../_util/EventInterface';
 import omit from '../_util/omit';
@@ -33,6 +25,7 @@ export default defineComponent({
     const stateValue = shallowRef(props.value === undefined ? props.defaultValue : props.value);
     const focused = shallowRef(false);
     const inputRef = shallowRef<HTMLInputElement>();
+    const rootRef = shallowRef<ComponentPublicInstance>();
     watch(
       () => props.value,
       () => {
@@ -80,7 +73,6 @@ export default defineComponent({
     const triggerChange = (e: Event) => {
       emit('change', e);
     };
-    const instance = getCurrentInstance();
     const setValue = (value: string | number, callback?: Function) => {
       if (stateValue.value === value) {
         return;
@@ -90,7 +82,7 @@ export default defineComponent({
       } else {
         nextTick(() => {
           if (inputRef.value.value !== stateValue.value) {
-            instance.update();
+            rootRef.value?.$forceUpdate();
           }
         });
       }
@@ -245,6 +237,7 @@ export default defineComponent({
         <BaseInput
           {...rest}
           {...attrs}
+          ref={rootRef}
           prefixCls={prefixCls}
           inputElement={getInputElement()}
           handleReset={handleReset}

components/vc-select/BaseSelect.tsx

@@ -19,7 +19,6 @@ import type { ScrollConfig, ScrollTo } from '../vc-virtual-list/List';
 import {
   computed,
   defineComponent,
-  getCurrentInstance,
   onBeforeUnmount,
   onMounted,
   provide,
@@ -606,10 +605,10 @@ export default defineComponent({
 
     // ============================= Dropdown ==============================
     const containerWidth = shallowRef<number>(null);
-    const instance = getCurrentInstance();
+    // const instance = getCurrentInstance();
     const onPopupMouseEnter = () => {
       // We need force update here since popup dom is render async
-      instance.update();
+      // instance.update();
     };
     onMounted(() => {
       watch(