mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-05 13:39:40 +08:00
3aeeeb2aed
* refactor: transfer、tooltip (#4306) * refactor(transfer): use composition api (#4135) * refactor(transfer): use composition api * fix: remove console * refactor(tooltip): use composition api (#4059) * refactor(tooltip): use composition api * chore: useConfigInject * fix: remove useless * style: format code * refactor: transfer * refactor: tooltip Co-authored-by: ajuner <106791576@qq.com> * Refactor mentions (#4341) * refactor(mentions): use compositionAPI (#4313) * refactor: mentions * refactor: mentions Co-authored-by: ajuner <106791576@qq.com> * Refactor progress (#4358) * fix: timepicker error border not show #4331 * fix(UploadDragger): fix UploadDrager no export (#4334) * refactor(switch): support customize checked value #4329 (#4332) * refactor(switch): support customize checked value #4329 * test: add test case * refactor: update props name * refactor: update ts * refactor: optimize * style: uncheckedValue to unCheckedValue * test: update snap * feat: udpate switch ts * docs: remove ie11 * fix: tree-select throw error when use slot title * fix: TypeScript definition of Table interface for typescript 4.3.5 (#4353) * fix type for typescript 4.3.5 * Update interface.ts close #4296 * fix: dropdown submenu style error #4351 close #4351 * fix(notification): 完善notification类型 (#4346) * refactor(progress): use composition API (#4355) * refactor(progress): use composition API * refactor(vc-progress): update * refactor: progress * refactor: progress * fix: timepicker error border not show #4331 * fix(UploadDragger): fix UploadDrager no export (#4334) * refactor(switch): support customize checked value #4329 (#4332) * refactor(switch): support customize checked value #4329 * test: add test case * refactor: update props name * refactor: update ts * refactor: optimize * style: uncheckedValue to unCheckedValue * test: update snap * feat: udpate switch ts * docs: remove ie11 * fix: tree-select throw error when use slot title * fix: TypeScript definition of Table interface for typescript 4.3.5 (#4353) * fix type for typescript 4.3.5 * Update interface.ts close #4296 * fix: dropdown submenu style error #4351 close #4351 * fix(notification): 完善notification类型 (#4346) * refactor(progress): use composition API (#4355) * refactor(progress): use composition API * refactor(vc-progress): update * refactor: progress * refactor: progress Co-authored-by: Jarvis <35361626+fanhaoyuan@users.noreply.github.com> Co-authored-by: John <John60676@qq.com> Co-authored-by: 艾斯特洛 <axetroy.dev@gmail.com> Co-authored-by: zanllp <qc@zanllp.cn> * docs: add changelog * refactor: tree * refactor: tree * style: lint * refactor: tree * 热factor: tree * refactor: tree * refactor: tree * refactor: tree * refactor: directory tree * refactor: tree * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * style: lint format * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * fix: upload ts error * fix: update tree title render & switchIcon * test: update tree test * feat: add VirtualScroll tree * refactor: datePicker & calendar & trigger (#4522) * style: update * test: update calendar test * test: update test * test: update test * refactor: slider * feat: update slider css * refactor: slider to ts * refactor: slider to ts * perf: update default itemHeight * test: update * fix: uddate ts type * fix: update skeleton * fix: update skeleton * refactor: update vc-pagination * refactor: pagination * refactor: timeline * refactor: steps * refactor: collapse * refactor: collapse * refactor: popconfirm * refactor: popover * refactor: dropdown * doc: merge doc * chore: vite for dev (#4602) * style: js to jsx * doc: add site * style: lint * style: format ts type * doc: update * style: format code * style: format site * doc: update * style: dmeo * style: format scripts * chore: remove sub-modules * chore: update vite * site: add site build * test: update snap * doc(select): add tip (#4606) * refactor: table (#4641) * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * fix: column not pass to cell * doc: uppate table * fix: update bodyCell headerCell * doc: remove examples * refactor: table * fix: table title not work * fix: table selection * fix: table checkStrictly * refactor: table * fix: table template error * feat: table support summary * test: update snap * perf: table * docs(table): fix ajax demo (#4639) * test: update table * refactor: remove old table * doc: update table doc * doc: update doc * doc: update select * doc: update summary Co-authored-by: John <John60676@qq.com> * doc: update doc * fix: menu arrow not work * test: update * doc: add next site * style: format * doc: update * doc: update site script * fix: expand icon not fixed * feat: use renderSlot * test: update table snap * feat: confirm support reactively * feat: configProvider.config * feat: message support configprovider.config * feat: notification support configprovider.config * doc: update doc * fix: typescript compile error * style: add import eslint * doc: update demo * chore: set transpileOnly true * style: fix eslint error * test: update snap * doc: update * test: mock date * test: update snap * chore: remove gulp-typescript (#4675) * feat: V3 form (#4678) * chore: update husky * perf: update formItem * perf: useInjectFormItemContext * fix: table ts error * doc: add Customized Form Controls demo * feat: export useInjectFormItemContext * doc: update form doc * doc: update doc * doc: update doc * feat: autocomplete support option slot * doc: update * feat: add form item rest * style: remove omit.js * refactor: autocomplete * doc: add changelog to site * doc: update site anchor * doc: update doc layout * test: update table test * doc: update * chore: udpate gulp script * chore: udpate gulp script * doc: add changelog * doc: update * test: ignore some test wait vue-test-utils * fix: form id error #4582 close #4582 * doc: add select Responsive demo * doc: remove temp doc Co-authored-by: ajuner <106791576@qq.com> Co-authored-by: Jarvis <35361626+fanhaoyuan@users.noreply.github.com> Co-authored-by: John <John60676@qq.com> Co-authored-by: 艾斯特洛 <axetroy.dev@gmail.com> Co-authored-by: zanllp <qc@zanllp.cn> Co-authored-by: Amour1688 <lcz_1996@foxmail.com>
208 lines
5.4 KiB
Vue
208 lines
5.4 KiB
Vue
import type { PropType } from 'vue';
|
|
import {
|
|
nextTick,
|
|
defineComponent,
|
|
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 type { AlignType, AlignResult, TargetType, TargetPoint } from './interface';
|
|
import useBuffer from './hooks/useBuffer';
|
|
import isEqual from 'lodash-es/isEqual';
|
|
|
|
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; align?: AlignType }>({});
|
|
const nodeRef = ref();
|
|
const [forceAlign, cancelForceAlign] = useBuffer(
|
|
() => {
|
|
const {
|
|
disabled: latestDisabled,
|
|
target: latestTarget,
|
|
align: latestAlign,
|
|
onAlign: latestOnAlign,
|
|
} = props;
|
|
if (!latestDisabled && latestTarget && nodeRef.value) {
|
|
const source = nodeRef.value;
|
|
|
|
let result: AlignResult;
|
|
const element = getElement(latestTarget);
|
|
const point = getPoint(latestTarget);
|
|
|
|
cacheRef.value.element = element;
|
|
cacheRef.value.point = point;
|
|
cacheRef.value.align = latestAlign;
|
|
// 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, latestAlign);
|
|
} else if (point) {
|
|
result = alignPoint(source, point, latestAlign);
|
|
}
|
|
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 !== sourceResizeMonitor.value.element) {
|
|
sourceResizeMonitor.value.cancel();
|
|
sourceResizeMonitor.value.element = nodeRef.value;
|
|
sourceResizeMonitor.value.cancel = monitorResize(nodeRef.value, forceAlign);
|
|
}
|
|
|
|
if (
|
|
cacheRef.value.element !== element ||
|
|
!isSamePoint(cacheRef.value.point, point) ||
|
|
!isEqual(cacheRef.value.align, props.align)
|
|
) {
|
|
forceAlign();
|
|
|
|
// Add resize observer
|
|
if (resizeMonitor.value.element !== element) {
|
|
resizeMonitor.value.cancel();
|
|
resizeMonitor.value.element = element;
|
|
resizeMonitor.value.cancel = monitorResize(element, forceAlign);
|
|
}
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
goAlign();
|
|
});
|
|
});
|
|
|
|
onUpdated(() => {
|
|
nextTick(() => {
|
|
goAlign();
|
|
});
|
|
});
|
|
|
|
// Listen for disabled change
|
|
watch(
|
|
() => props.disabled,
|
|
disabled => {
|
|
if (!disabled) {
|
|
forceAlign();
|
|
} else {
|
|
cancelForceAlign();
|
|
}
|
|
},
|
|
{ immediate: true, 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 }, true, true);
|
|
}
|
|
return null;
|
|
};
|
|
},
|
|
});
|