theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

all

Browse Source
This commit is contained in:
theluyuan
2024-10-22 09:09:41 +08:00
parent ef869c5ab1
commit 3a9b2d55c6
99 changed files with 4506 additions and 3465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
package/component/es/dropdown/index2.js
View File

@@ -176,7 +176,10 @@ const _sfc_main = defineComponent({
const slots = useSlots();
const attrs = useAttrs();
const childrenRefs = /* @__PURE__ */ new Set();
const dropdownCtx = inject(dropdownInjectionKey, void 0);
const dropdownCtx = inject(
dropdownInjectionKey,
void 0
);
const { children, firstElement: dropdownRef } = useFirstElement();
const contentRef = shallowRef();
const contentStyle = ref({});
@@ -188,11 +191,15 @@ const _sfc_main = defineComponent({
const { x: mouseLeft, y: mouseTop } = toRefs(mousePosition);
const openState = ref(false);
let scrollElements;
const containerRef = computed(() => {
var _a;
return props.popupContainer ? (_a = document.querySelector(props.popupContainer)) != null ? _a : document.body : dropdownRef.value;
});
const triggerMethods = computed(() => [].concat(props.trigger));
const containerRef = computed(
() => {
var _a;
return props.popupContainer ? (_a = document.querySelector(props.popupContainer)) != null ? _a : document.body : dropdownRef.value;
}
);
const triggerMethods = computed(
() => [].concat(props.trigger)
);
const computedPlacement = computed(() => {
return transformPlacement(props.placement);
});
@@ -276,7 +283,11 @@ const _sfc_main = defineComponent({
const containerRect = containerRef.value.getBoundingClientRect();
const triggerRect = props.alignPoint ? getTriggerRect() : getElementScrollRect(dropdownRef.value, containerRect);
const contentRect = getElementScrollRect(contentRef.value, containerRect);
const { style } = getContentStyle(computedPlacement.value, triggerRect, contentRect);
const { style } = getContentStyle(
computedPlacement.value,
triggerRect,
contentRect
);
if (props.autoFitMinWidth) {
style.minWidth = `${triggerRect.width}px`;
}
@@ -287,11 +298,20 @@ const _sfc_main = defineComponent({
if (props.autoFitPosition) {
nextTick(() => {
const triggerRect2 = props.alignPoint ? getTriggerRect() : getElementScrollRect(dropdownRef.value, containerRect);
const contentRect2 = getElementScrollRect(contentRef.value, containerRect);
const contentRect2 = getElementScrollRect(
contentRef.value,
containerRect
);
let { top, left } = style;
top = Number(top.toString().replace("px", ""));
left = Number(left.toString().replace("px", ""));
const { top: fitTop, left: fitLeft } = getFitPlacement(top, left, computedPlacement.value, triggerRect2, contentRect2);
const { top: fitTop, left: fitLeft } = getFitPlacement(
top,
left,
computedPlacement.value,
triggerRect2,
contentRect2
);
style.top = `${fitTop}px`;
style.left = `${fitLeft}px`;
contentStyle.value = {
@@ -520,16 +540,22 @@ const _sfc_main = defineComponent({
dropdownCtx == null ? void 0 : dropdownCtx.removeChildRef(ref2);
};
dropdownCtx == null ? void 0 : dropdownCtx.addChildRef(contentRef);
const { stop: removeContentResizeObserver } = useResizeObserver(contentRef, () => {
if (openState.value && props.autoFixPosition) {
updateContentStyle();
const { stop: removeContentResizeObserver } = useResizeObserver(
contentRef,
() => {
if (openState.value && props.autoFixPosition) {
updateContentStyle();
}
}
});
const { stop: removeTriggerResizeObserver } = useResizeObserver(dropdownRef, () => {
if (openState.value && props.autoFixPosition) {
updateContentStyle();
);
const { stop: removeTriggerResizeObserver } = useResizeObserver(
dropdownRef,
() => {
if (openState.value && props.autoFixPosition) {
updateContentStyle();
}
}
});
);
onClickOutside(dropdownRef, (e) => {
var _a, _b, _c;
if (!props.clickOutsideToClose || !openState.value || ((_a = dropdownRef.value) == null ? void 0 : _a.contains(e.target)) || ((_b = contentRef.value) == null ? void 0 : _b.contains(e.target))) {
@@ -544,15 +570,21 @@ const _sfc_main = defineComponent({
});
const onlyChildRenderFunc = () => {
const slotContent = slots.default ? slots.default() : [];
const transformedSlotContent = slotContent.map((vnode) => cloneVNode(vnode, {
onClick: handleClick,
onContextmenu: handleContextMenuClick,
onMouseenter: handleMouseEnter,
onMouseleave: handleMouseLeave,
onFocusin: handleFocusin,
onFocusout: handleFocusout,
...attrs
}, true));
const transformedSlotContent = slotContent.map(
(vnode) => cloneVNode(
vnode,
{
onClick: handleClick,
onContextmenu: handleContextMenuClick,
onMouseenter: handleMouseEnter,
onMouseleave: handleMouseLeave,
onFocusin: handleFocusin,
onFocusout: handleFocusout,
...attrs
},
true
)
);
children.value = transformedSlotContent;
return h(Fragment, children.value);
};
@@ -577,16 +609,23 @@ const _sfc_main = defineComponent({
removeTriggerResizeObserver();
window.removeEventListener("resize", handleScroll);
});
watch(() => props.visible, (newVal, oldVal) => {
openState.value = newVal;
}, { immediate: true });
provide(dropdownInjectionKey, reactive({
onMouseenter: handleMouseEnterWithContext,
onMouseleave: handleMouseLeaveWithContext,
addChildRef,
removeChildRef,
hide: handleContextHide
}));
watch(
() => props.visible,
(newVal, oldVal) => {
openState.value = newVal;
},
{ immediate: true }
);
provide(
dropdownInjectionKey,
reactive({
onMouseenter: handleMouseEnterWithContext,
onMouseleave: handleMouseLeaveWithContext,
addChildRef,
removeChildRef,
hide: handleContextHide
})
);
provide("openState", openState);
expose({ show, hide, toggle });
return (_ctx, _cache) => {