mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-09 23:49:36 +08:00
9e0df41a55
* chore: remove resize-observer-polyfill * refactor: align * refactor(v3/avatar): refactor using composition api (#4052) * refactor(avatar): refactor using composition api * refactor: update props define * fix: avatar src scale not update * refactor: resizeObserver * refactor: divider * refactor: localeProvider * refactor(v3/back-top): use composition api (#4060) * refactor: backtop * refactor: empty * refactor: transButton * feat(v3/avatar): add avatar group (#4062) * feat(avatar): add avatar group * refactor: update * refactor: update Co-authored-by: tangjinzhou <415800467@qq.com> * refactor: avatar * refactor: avatar * style: rename useProvide * refactor: menu (#4110) * fix: menu * refactor: menu * refactor: remove rc-menu * fix: menu rtl error * style: lint * refactor(Anchor): use composition api (#4054) * refactor: anchor * refactor: anchor * refactor: anchor * feat: update * fix: icon class lose * refactor(v3/badge): use composition api (#4076) * refactor: badge * fix: badge inheritAttrs * refactor: grid * refactor: layout * fix: menu not close * refactor: space * refactor: result * refactor: affix * refactor: comment * refactor: form * feat: spin add rtl * feat: export spin type * refactor: pageHeader * refactor: page-header * refactor: skeleton * refactor: typography * refactor(v3/rate): use composition api * fix: add useRef hook * refactor: form * fix: menu not update * refactor: form * refactor: form * fix: slide animate not work * fix: menu mode error * fix: menu icon * refactor: rate * perf: remove rate * feat: add vc-overflow * refactor: menu * fix: remove flex check (#4165) * fix: dist locale file lose #3684 * release 2.2.0-beta.1 * dcos: update changelog * chore: update type * docs: update changelog Co-authored-by: John <John60676@qq.com> Co-authored-by: 言肆 <18x@loacg.com> Co-authored-by: zkwolf <chenhao5866@gmail.com>
205 lines
5.3 KiB
Vue
205 lines
5.3 KiB
Vue
import {
|
|
defineComponent,
|
|
PropType,
|
|
ref,
|
|
computed,
|
|
onMounted,
|
|
onUpdated,
|
|
watch,
|
|
onUnmounted,
|
|
} from 'vue';
|
|
import { alignElement, alignPoint } from 'dom-align';
|
|
import addEventListener from '../vc-util/Dom/addEventListener';
|
|
import { cloneElement } from '../_util/vnode';
|
|
import isVisible from '../vc-util/Dom/isVisible';
|
|
|
|
import { isSamePoint, restoreFocus, monitorResize } from './util';
|
|
import { AlignType, AlignResult, TargetType, TargetPoint } from './interface';
|
|
import useBuffer from './hooks/useBuffer';
|
|
|
|
type OnAlign = (source: HTMLElement, result: AlignResult) => void;
|
|
|
|
export interface AlignProps {
|
|
align: AlignType;
|
|
target: TargetType;
|
|
onAlign?: OnAlign;
|
|
monitorBufferTime?: number;
|
|
monitorWindowResize?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const alignProps = {
|
|
align: Object as PropType<AlignType>,
|
|
target: [Object, Function] as PropType<TargetType>,
|
|
onAlign: Function as PropType<OnAlign>,
|
|
monitorBufferTime: Number,
|
|
monitorWindowResize: Boolean,
|
|
disabled: Boolean,
|
|
};
|
|
|
|
interface MonitorRef {
|
|
element?: HTMLElement;
|
|
cancel: () => void;
|
|
}
|
|
|
|
export interface RefAlign {
|
|
forceAlign: () => void;
|
|
}
|
|
|
|
function getElement(func: TargetType) {
|
|
if (typeof func !== 'function') return null;
|
|
return func();
|
|
}
|
|
|
|
function getPoint(point: TargetType) {
|
|
if (typeof point !== 'object' || !point) return null;
|
|
return point;
|
|
}
|
|
|
|
export default defineComponent({
|
|
name: 'Align',
|
|
props: alignProps,
|
|
emits: ['align'],
|
|
setup(props, { expose, slots }) {
|
|
const cacheRef = ref<{ element?: HTMLElement; point?: TargetPoint }>({});
|
|
const nodeRef = ref();
|
|
const forceAlignPropsRef = computed(() => ({
|
|
disabled: props.disabled,
|
|
target: props.target,
|
|
onAlign: props.onAlign,
|
|
}));
|
|
|
|
const [forceAlign, cancelForceAlign] = useBuffer(
|
|
() => {
|
|
const {
|
|
disabled: latestDisabled,
|
|
target: latestTarget,
|
|
onAlign: latestOnAlign,
|
|
} = forceAlignPropsRef.value;
|
|
if (!latestDisabled && latestTarget && nodeRef.value && nodeRef.value.$el) {
|
|
const source = nodeRef.value.$el;
|
|
|
|
let result: AlignResult;
|
|
const element = getElement(latestTarget);
|
|
const point = getPoint(latestTarget);
|
|
|
|
cacheRef.value.element = element;
|
|
cacheRef.value.point = point;
|
|
|
|
// IE lose focus after element realign
|
|
// We should record activeElement and restore later
|
|
const { activeElement } = document;
|
|
|
|
// We only align when element is visible
|
|
if (element && isVisible(element)) {
|
|
result = alignElement(source, element, props.align);
|
|
} else if (point) {
|
|
result = alignPoint(source, point, props.align);
|
|
}
|
|
|
|
restoreFocus(activeElement, source);
|
|
|
|
if (latestOnAlign && result) {
|
|
latestOnAlign(source, result);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
computed(() => props.monitorBufferTime),
|
|
);
|
|
|
|
// ===================== Effect =====================
|
|
// Listen for target updated
|
|
const resizeMonitor = ref<MonitorRef>({
|
|
cancel: () => {},
|
|
});
|
|
// Listen for source updated
|
|
const sourceResizeMonitor = ref<MonitorRef>({
|
|
cancel: () => {},
|
|
});
|
|
|
|
const goAlign = () => {
|
|
const target = props.target;
|
|
const element = getElement(target);
|
|
const point = getPoint(target);
|
|
|
|
if (nodeRef.value && nodeRef.value.$el !== sourceResizeMonitor.value.element) {
|
|
sourceResizeMonitor.value.cancel();
|
|
sourceResizeMonitor.value.element = nodeRef.value.$el;
|
|
sourceResizeMonitor.value.cancel = monitorResize(nodeRef.value.$el, forceAlign);
|
|
}
|
|
|
|
if (cacheRef.value.element !== element || !isSamePoint(cacheRef.value.point, point)) {
|
|
forceAlign();
|
|
|
|
// Add resize observer
|
|
if (resizeMonitor.value.element !== element) {
|
|
resizeMonitor.value.cancel();
|
|
resizeMonitor.value.element = element;
|
|
resizeMonitor.value.cancel = monitorResize(element, forceAlign);
|
|
}
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
goAlign();
|
|
});
|
|
|
|
onUpdated(() => {
|
|
goAlign();
|
|
});
|
|
|
|
// Listen for disabled change
|
|
watch(
|
|
() => props.disabled,
|
|
disabled => {
|
|
if (!disabled) {
|
|
forceAlign();
|
|
} else {
|
|
cancelForceAlign();
|
|
}
|
|
},
|
|
{ flush: 'post' },
|
|
);
|
|
|
|
// Listen for window resize
|
|
const winResizeRef = ref<{ remove: Function }>(null);
|
|
|
|
watch(
|
|
() => props.monitorWindowResize,
|
|
monitorWindowResize => {
|
|
if (monitorWindowResize) {
|
|
if (!winResizeRef.value) {
|
|
winResizeRef.value = addEventListener(window, 'resize', forceAlign);
|
|
}
|
|
} else if (winResizeRef.value) {
|
|
winResizeRef.value.remove();
|
|
winResizeRef.value = null;
|
|
}
|
|
},
|
|
{ flush: 'post' },
|
|
);
|
|
onUnmounted(() => {
|
|
resizeMonitor.value.cancel();
|
|
sourceResizeMonitor.value.cancel();
|
|
if (winResizeRef.value) winResizeRef.value.remove();
|
|
cancelForceAlign();
|
|
});
|
|
|
|
expose({
|
|
forceAlign: () => forceAlign(true),
|
|
});
|
|
|
|
return () => {
|
|
const child = slots?.default();
|
|
if (child) {
|
|
return cloneElement(child[0], { ref: nodeRef });
|
|
}
|
|
return child && child[0];
|
|
};
|
|
},
|
|
});
|