fix: support vue 3.4
parent
4ed2868137
commit
d7f9bd27dc
|
@ -7,7 +7,6 @@ import {
|
||||||
onMounted,
|
onMounted,
|
||||||
onBeforeUnmount,
|
onBeforeUnmount,
|
||||||
onUpdated,
|
onUpdated,
|
||||||
getCurrentInstance,
|
|
||||||
nextTick,
|
nextTick,
|
||||||
computed,
|
computed,
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
|
@ -61,6 +60,7 @@ export default defineComponent({
|
||||||
const container = shallowRef<HTMLElement>();
|
const container = shallowRef<HTMLElement>();
|
||||||
const componentRef = shallowRef();
|
const componentRef = shallowRef();
|
||||||
const rafId = shallowRef<number>();
|
const rafId = shallowRef<number>();
|
||||||
|
const triggerUpdate = shallowRef(1);
|
||||||
const defaultContainer = canUseDom() && document.createElement('div');
|
const defaultContainer = canUseDom() && document.createElement('div');
|
||||||
const removeCurrentContainer = () => {
|
const removeCurrentContainer = () => {
|
||||||
// Portal will remove from `parentNode`.
|
// Portal will remove from `parentNode`.
|
||||||
|
@ -106,8 +106,6 @@ export default defineComponent({
|
||||||
attachToParent();
|
attachToParent();
|
||||||
});
|
});
|
||||||
|
|
||||||
const instance = getCurrentInstance();
|
|
||||||
|
|
||||||
useScrollLocker(
|
useScrollLocker(
|
||||||
computed(() => {
|
computed(() => {
|
||||||
return (
|
return (
|
||||||
|
@ -155,7 +153,7 @@ export default defineComponent({
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (!attachToParent()) {
|
if (!attachToParent()) {
|
||||||
rafId.value = raf(() => {
|
rafId.value = raf(() => {
|
||||||
instance.update();
|
triggerUpdate.value += 1;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -177,7 +175,7 @@ export default defineComponent({
|
||||||
getOpenCount: () => openCount,
|
getOpenCount: () => openCount,
|
||||||
getContainer,
|
getContainer,
|
||||||
};
|
};
|
||||||
if (forceRender || visible || componentRef.value) {
|
if (triggerUpdate.value && (forceRender || visible || componentRef.value)) {
|
||||||
portal = (
|
portal = (
|
||||||
<Portal
|
<Portal
|
||||||
getContainer={getContainer}
|
getContainer={getContainer}
|
||||||
|
|
|
@ -176,7 +176,6 @@ const Affix = defineComponent({
|
||||||
affixStyle: undefined,
|
affixStyle: undefined,
|
||||||
placeholderStyle: undefined,
|
placeholderStyle: undefined,
|
||||||
});
|
});
|
||||||
currentInstance.update();
|
|
||||||
// Test if `updatePosition` called
|
// Test if `updatePosition` called
|
||||||
if (process.env.NODE_ENV === 'test') {
|
if (process.env.NODE_ENV === 'test') {
|
||||||
emit('testUpdatePosition');
|
emit('testUpdatePosition');
|
||||||
|
@ -256,7 +255,7 @@ const Affix = defineComponent({
|
||||||
const { prefixCls } = useConfigInject('affix', props);
|
const { prefixCls } = useConfigInject('affix', props);
|
||||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||||
return () => {
|
return () => {
|
||||||
const { affixStyle, placeholderStyle } = state;
|
const { affixStyle, placeholderStyle, status } = state;
|
||||||
const className = classNames({
|
const className = classNames({
|
||||||
[prefixCls.value]: affixStyle,
|
[prefixCls.value]: affixStyle,
|
||||||
[hashId.value]: true,
|
[hashId.value]: true,
|
||||||
|
@ -271,7 +270,7 @@ const Affix = defineComponent({
|
||||||
]);
|
]);
|
||||||
return wrapSSR(
|
return wrapSSR(
|
||||||
<ResizeObserver onResize={updatePosition}>
|
<ResizeObserver onResize={updatePosition}>
|
||||||
<div {...restProps} {...attrs} ref={placeholderNode}>
|
<div {...restProps} {...attrs} ref={placeholderNode} data-measure-status={status}>
|
||||||
{affixStyle && <div style={placeholderStyle} aria-hidden="true" />}
|
{affixStyle && <div style={placeholderStyle} aria-hidden="true" />}
|
||||||
<div class={className} ref={fixedNode} style={affixStyle}>
|
<div class={className} ref={fixedNode} style={affixStyle}>
|
||||||
{slots.default?.()}
|
{slots.default?.()}
|
||||||
|
|
|
@ -28,7 +28,6 @@ const confirm = (config: ModalFuncProps) => {
|
||||||
if (confirmDialogInstance) {
|
if (confirmDialogInstance) {
|
||||||
// destroy
|
// destroy
|
||||||
vueRender(null, container as any);
|
vueRender(null, container as any);
|
||||||
confirmDialogInstance.component.update();
|
|
||||||
confirmDialogInstance = null;
|
confirmDialogInstance = null;
|
||||||
}
|
}
|
||||||
const triggerCancel = args.some(param => param && param.triggerCancel);
|
const triggerCancel = args.some(param => param && param.triggerCancel);
|
||||||
|
|
|
@ -10,9 +10,10 @@ import Button from '../../button';
|
||||||
import ListItem from './ListItem';
|
import ListItem from './ListItem';
|
||||||
import type { HTMLAttributes } from 'vue';
|
import type { HTMLAttributes } from 'vue';
|
||||||
import {
|
import {
|
||||||
|
triggerRef,
|
||||||
|
watch,
|
||||||
computed,
|
computed,
|
||||||
defineComponent,
|
defineComponent,
|
||||||
getCurrentInstance,
|
|
||||||
onMounted,
|
onMounted,
|
||||||
shallowRef,
|
shallowRef,
|
||||||
watchEffect,
|
watchEffect,
|
||||||
|
@ -46,15 +47,26 @@ export default defineComponent({
|
||||||
}),
|
}),
|
||||||
setup(props, { slots, expose }) {
|
setup(props, { slots, expose }) {
|
||||||
const motionAppear = shallowRef(false);
|
const motionAppear = shallowRef(false);
|
||||||
const instance = getCurrentInstance();
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
motionAppear.value == true;
|
motionAppear.value == true;
|
||||||
});
|
});
|
||||||
|
const mergedItems = shallowRef([]);
|
||||||
|
watch(
|
||||||
|
() => props.items,
|
||||||
|
(val = []) => {
|
||||||
|
mergedItems.value = val.slice();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
if (props.listType !== 'picture' && props.listType !== 'picture-card') {
|
if (props.listType !== 'picture' && props.listType !== 'picture-card') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
(props.items || []).forEach((file: InternalUploadFile) => {
|
let hasUpdate = false;
|
||||||
|
(props.items || []).forEach((file: InternalUploadFile, index) => {
|
||||||
if (
|
if (
|
||||||
typeof document === 'undefined' ||
|
typeof document === 'undefined' ||
|
||||||
typeof window === 'undefined' ||
|
typeof window === 'undefined' ||
|
||||||
|
@ -69,11 +81,17 @@ export default defineComponent({
|
||||||
if (props.previewFile) {
|
if (props.previewFile) {
|
||||||
props.previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
|
props.previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
|
||||||
// Need append '' to avoid dead loop
|
// Need append '' to avoid dead loop
|
||||||
file.thumbUrl = previewDataUrl || '';
|
const thumbUrl = previewDataUrl || '';
|
||||||
instance.update();
|
if (thumbUrl !== file.thumbUrl) {
|
||||||
|
mergedItems.value[index].thumbUrl = thumbUrl;
|
||||||
|
hasUpdate = true;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
if (hasUpdate) {
|
||||||
|
triggerRef(mergedItems);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// ============================= Events =============================
|
// ============================= Events =============================
|
||||||
|
@ -177,7 +195,6 @@ export default defineComponent({
|
||||||
listType,
|
listType,
|
||||||
locale,
|
locale,
|
||||||
isImageUrl: isImgUrl,
|
isImageUrl: isImgUrl,
|
||||||
items = [],
|
|
||||||
showPreviewIcon,
|
showPreviewIcon,
|
||||||
showRemoveIcon,
|
showRemoveIcon,
|
||||||
showDownloadIcon,
|
showDownloadIcon,
|
||||||
|
@ -190,6 +207,7 @@ export default defineComponent({
|
||||||
appendActionVisible,
|
appendActionVisible,
|
||||||
} = props;
|
} = props;
|
||||||
const appendActionDom = appendAction?.();
|
const appendActionDom = appendAction?.();
|
||||||
|
const items = mergedItems.value;
|
||||||
return (
|
return (
|
||||||
<TransitionGroup {...transitionGroupProps.value} tag="div">
|
<TransitionGroup {...transitionGroupProps.value} tag="div">
|
||||||
{items.map(file => {
|
{items.map(file => {
|
||||||
|
|
|
@ -1,14 +1,6 @@
|
||||||
// base 0.0.1-alpha.7
|
// base 0.0.1-alpha.7
|
||||||
import type { VNode } from 'vue';
|
import type { ComponentPublicInstance, VNode } from 'vue';
|
||||||
import {
|
import { onMounted, defineComponent, nextTick, shallowRef, watch, withDirectives } from 'vue';
|
||||||
onMounted,
|
|
||||||
defineComponent,
|
|
||||||
getCurrentInstance,
|
|
||||||
nextTick,
|
|
||||||
shallowRef,
|
|
||||||
watch,
|
|
||||||
withDirectives,
|
|
||||||
} from 'vue';
|
|
||||||
import classNames from '../_util/classNames';
|
import classNames from '../_util/classNames';
|
||||||
import type { ChangeEvent, FocusEventHandler } from '../_util/EventInterface';
|
import type { ChangeEvent, FocusEventHandler } from '../_util/EventInterface';
|
||||||
import omit from '../_util/omit';
|
import omit from '../_util/omit';
|
||||||
|
@ -33,6 +25,7 @@ export default defineComponent({
|
||||||
const stateValue = shallowRef(props.value === undefined ? props.defaultValue : props.value);
|
const stateValue = shallowRef(props.value === undefined ? props.defaultValue : props.value);
|
||||||
const focused = shallowRef(false);
|
const focused = shallowRef(false);
|
||||||
const inputRef = shallowRef<HTMLInputElement>();
|
const inputRef = shallowRef<HTMLInputElement>();
|
||||||
|
const rootRef = shallowRef<ComponentPublicInstance>();
|
||||||
watch(
|
watch(
|
||||||
() => props.value,
|
() => props.value,
|
||||||
() => {
|
() => {
|
||||||
|
@ -80,7 +73,6 @@ export default defineComponent({
|
||||||
const triggerChange = (e: Event) => {
|
const triggerChange = (e: Event) => {
|
||||||
emit('change', e);
|
emit('change', e);
|
||||||
};
|
};
|
||||||
const instance = getCurrentInstance();
|
|
||||||
const setValue = (value: string | number, callback?: Function) => {
|
const setValue = (value: string | number, callback?: Function) => {
|
||||||
if (stateValue.value === value) {
|
if (stateValue.value === value) {
|
||||||
return;
|
return;
|
||||||
|
@ -90,7 +82,7 @@ export default defineComponent({
|
||||||
} else {
|
} else {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (inputRef.value.value !== stateValue.value) {
|
if (inputRef.value.value !== stateValue.value) {
|
||||||
instance.update();
|
rootRef.value?.$forceUpdate();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -245,6 +237,7 @@ export default defineComponent({
|
||||||
<BaseInput
|
<BaseInput
|
||||||
{...rest}
|
{...rest}
|
||||||
{...attrs}
|
{...attrs}
|
||||||
|
ref={rootRef}
|
||||||
prefixCls={prefixCls}
|
prefixCls={prefixCls}
|
||||||
inputElement={getInputElement()}
|
inputElement={getInputElement()}
|
||||||
handleReset={handleReset}
|
handleReset={handleReset}
|
||||||
|
|
|
@ -19,7 +19,6 @@ import type { ScrollConfig, ScrollTo } from '../vc-virtual-list/List';
|
||||||
import {
|
import {
|
||||||
computed,
|
computed,
|
||||||
defineComponent,
|
defineComponent,
|
||||||
getCurrentInstance,
|
|
||||||
onBeforeUnmount,
|
onBeforeUnmount,
|
||||||
onMounted,
|
onMounted,
|
||||||
provide,
|
provide,
|
||||||
|
@ -606,10 +605,10 @@ export default defineComponent({
|
||||||
|
|
||||||
// ============================= Dropdown ==============================
|
// ============================= Dropdown ==============================
|
||||||
const containerWidth = shallowRef<number>(null);
|
const containerWidth = shallowRef<number>(null);
|
||||||
const instance = getCurrentInstance();
|
// const instance = getCurrentInstance();
|
||||||
const onPopupMouseEnter = () => {
|
const onPopupMouseEnter = () => {
|
||||||
// We need force update here since popup dom is render async
|
// We need force update here since popup dom is render async
|
||||||
instance.update();
|
// instance.update();
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
watch(
|
watch(
|
||||||
|
|
Loading…
Reference in New Issue